/* Auth pages only (resources/views/auth/login, two-factor-challenge).
   Holds just what the compiled Metronic/Tailwind bundle can't express:
   the split layout, the dark brand panel, the tinted error box, and
   the OTP input. Everything else on those pages is kt-* / utilities
   that exist in assets/css/styles.css. */

.auth-shell     { display: flex; min-height: 100dvh; }
.auth-form-col  { width: 100%; }
.auth-brand-col { display: none; }

@media (min-width: 64rem) {           /* = Tailwind lg */
    .auth-form-col  { width: 40%; }
    .auth-brand-col { display: flex; width: 60%; }
}

/* Same treatment as the sidebar wordmark (layouts/partials/sidebar.blade.php). */
.auth-wordmark { color: #6366f1; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
.auth-brand-col .auth-wordmark { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); }

/* Tinted variant; kt-alert-destructive is a solid red block. */
.auth-alert {
    background: color-mix(in oklab, var(--destructive) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--destructive) 25%, transparent);
    color: var(--destructive);
}

/* Pressed state; hover (primary 90%) and focus ring come from .kt-btn. */
.auth-submit:active { background-color: color-mix(in oklab, var(--primary) 82%, black); }

/* 2FA code / recovery code. */
.auth-code, .auth-code::placeholder { text-align: center; letter-spacing: 0.3em; }
.auth-code { font-size: 1.375rem; font-weight: 600; }

/* Brand panel video. The poster is painted as the panel background so it
   shows whenever the <video> is hidden (reduced motion, not yet loaded). */
.auth-brand-col { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.auth-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.auth-brand-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1; }
.auth-brand-content { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .auth-video { display: none; } }

/* Submit spinner. Tailwind's .hidden sits in @layer utilities, so keenicons'
   unlayered .ki-outline display rule beat it and the spinner showed at rest. */
[data-auth-spinner] { display: none; }
.auth-submit[aria-busy="true"] [data-auth-spinner] { display: inline-block; }