/* ============================================================
   MixJo Auth Custom Styles
   Uses official KTUI CSS variables for theme compatibility.
   ============================================================ */

/* Browser Autofill Override
   ----------------------------------------------------------
   Chrome/Edge force their own background on autofilled inputs.
   The only way to override this (per MDN, Tailwind, and
   industry standard) is `box-shadow inset` + `-webkit-text-fill-color`.
   We use KTUI's own CSS variables so colors auto-adapt to theme.
   ---------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--background) inset !important;
    box-shadow: 0 0 0 1000px var(--background) inset !important;
    -webkit-text-fill-color: var(--foreground) !important;
    caret-color: var(--foreground) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Ensure nested inputs inside .kt-input (e.g., password toggle wrapper)
   use transparent background on autofill, inheriting parent's bg via box-shadow */
.kt-input:not(input) input:-webkit-autofill,
.kt-input:not(input) input:-webkit-autofill:hover,
.kt-input:not(input) input:-webkit-autofill:focus,
.kt-input:not(input) input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--background) inset !important;
    box-shadow: 0 0 0 1000px var(--background) inset !important;
    -webkit-text-fill-color: var(--foreground) !important;
    caret-color: var(--foreground) !important;
}

/* ============================================================
   Auth Layout — Missing Tailwind Responsive Utilities
   These utilities are not in metronic/css/styles.css nor in
   the current Vite build (app-yWOuls9l.css). They are added
   here to avoid npm rebuild on the production server.
   ============================================================ */

/* grow — flex-grow:1 so grid fills full body height */
.grow {
    flex-grow: 1;
}

/* Full-height chain: html → body (flex h-full) → grid (grow) */
/* Body already has antialiased flex h-full from auth.blade.php */

/* lg:order-1 / lg:order-2 — column swap at ≥1024px (Tailwind lg breakpoint) */
/* Without these, form appears RIGHT and branded appears LEFT (wrong on desktop) */
@media (min-width: 1024px) {
    .lg\:order-1 { order: 1 !important; }
    .lg\:order-2 { order: 2 !important; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:p-10 { padding: 2.5rem !important; }
    .lg\:p-16 { padding: 3.5rem !important; }
    .lg\:rounded-xl { border-radius: 0.75rem !important; }
    .lg\:border { border-width: 1px !important; border-style: solid !important; }
    .lg\:border-border { border-color: var(--border, #e4e6ef) !important; }
    .lg\:m-5 { margin: 1.25rem !important; }
}

/* xl:bg-cover — background-size:cover at ≥1280px */
@media (min-width: 1280px) {
    .xl\:bg-cover { background-size: cover; }
}

/* xxl:bg-center — background-position:center at ≥1536px */
@media (min-width: 1536px) {
    .xxl\:bg-center { background-position: center; }
}

/* ============================================================
   Branded Background Column — Card & Typography
   Matches official Metronic 9.5.0 branded auth aesthetic.
   ============================================================ */
.branded-bg {
    min-height: 320px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: var(--card, #ffffff);
}

.dark .branded-bg {
    background-color: var(--card, #13141a);
}

@media (min-width: 1024px) {
    .branded-bg {
        min-height: unset;
    }
}

.branded-bg h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 2rem !important;
    color: var(--mono, #181c32) !important;
    margin-bottom: 0.5rem !important;
}

.dark .branded-bg h3 {
    color: var(--mono, #f1f1f4) !important;
}

.branded-bg .text-secondary-foreground {
    color: var(--secondary-foreground, #7e8299) !important;
    font-size: 0.95rem !important;
    line-height: 1.625rem !important;
}

.dark .branded-bg .text-secondary-foreground {
    color: var(--secondary-foreground, #9a9cae) !important;
}

.branded-text-wrapper {
    max-width: 520px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 2.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(228, 230, 239, 0.85);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

.dark .branded-text-wrapper {
    background: rgba(27, 27, 41, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35);
}

.branded-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    background-color: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    width: fit-content;
    margin-bottom: 0.75rem;
}

.dark .branded-badge {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}