/* ============================================================
   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;
}