/* Tailwind-friendly custom styles (minimal, non-conflicting) */

/* Smooth Scroll */
html { scroll-behavior: smooth; }

/* Subtle hover utilities (use as optional helpers) */
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.hover-zoom img { transition: transform .25s ease; }
.hover-zoom:hover img { transform: scale(1.06); }

/* Logo visibility helpers */
.logo-image { height: 28px; width: auto; display: block; }
/* If your logo is dark on light backgrounds, add class="logo-image logo-image-invert" to auto-invert in dark mode */
html.dark .logo-image-invert { filter: invert(1) brightness(1.1) contrast(1.05); }

/* Reduce default image max-height constraints from old Bootstrap utilities */
img { max-width: 100%; height: auto; }

/* Tweak focus ring for keyboard users if needed */
:focus-visible { outline: 2px solid rgba(16,185,129,.6); outline-offset: 2px; }

/* Unified form input styling (works with Tailwind CDN) */
.input-base {
	width: 100%;
	border: 1px solid #d1d5db; /* gray-300 */
	border-radius: 0.5rem; /* rounded-md slightly larger */
	background: #ffffff;
	padding: 0.65rem 0.9rem;
	font-size: 0.95rem;
	line-height: 1.25rem;
	color: #111827; /* gray-900 */
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input-base:focus {
	border-color: #16a34a; /* brand */
	box-shadow: 0 0 0 3px rgba(22,163,74,0.30);
	outline: 0;
}
.input-base::placeholder { color: #6b7280; /* gray-500 */ }
.input-base[disabled], .input-base[readonly] {
	background: #f1f5f9; /* slate-100 */
	cursor: not-allowed;
	color: #6b7280;
}

/* Label consistency */
.form-label {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-bottom: .35rem;
	color: #374151; /* gray-700 */
}

/* Card refinement for auth forms */
.auth-card {
	border: 1px solid #e5e7eb; /* gray-200 */
	background: #ffffff;
	border-radius: 1rem; /* rounded-xl */
	padding: 2rem 1.75rem;
	box-shadow: 0 4px 24px -2px rgba(0,0,0,.05), 0 2px 8px -2px rgba(0,0,0,.06);
}

/* Spacing helper */
.stack-md > * + * { margin-top: 1rem; }

/* Reduce form width on very large screens for better focus */
@media (min-width: 1280px) {
	.auth-wrapper { max-width: 480px; }
}