/*
 * LOGIN LIGHT THEME FIX
 * ─────────────────────────────────────────────────────────────────────────────
 * Root Cause: Login.jsx uses `color: var(--ks-border)` for all three
 * OutlinedInput fields. In the Light theme, --ks-border resolves to
 * rgba(15,23,42,0.12) — a near-transparent value intended for divider lines,
 * not text — making typed input invisible against the white --ks-surface bg.
 *
 * This file is a pure CSS-only fix. It is linked in index.html AFTER the
 * theme vars sheet, so it wins the cascade at equal specificity + !important.
 *
 * Scope: [data-color-scheme="light"] — no impact on moderate or dark themes.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Typed text colour fix ─────────────────────────────────────────────────── */
[data-color-scheme="light"] .MuiInputBase-input {
    color: #0f172a !important;                  /* --ks-text-primary (Light) */
    -webkit-text-fill-color: #0f172a !important; /* WebKit: overrides fill-color separately */
}

/* ── Autofill override ─────────────────────────────────────────────────────── */
/*
 * Browsers inject an opaque background on autofilled fields via the UA
 * stylesheet. Login.jsx already overrides this with WebkitBoxShadow inset,
 * but it hardcodes a near-black (#060912) background — invisible in Light mode.
 * We replace it with --ks-bg Light value (#f1f5f9) and enforce dark text.
 */
[data-color-scheme="light"] .MuiInputBase-input:-webkit-autofill,
[data-color-scheme="light"] .MuiInputBase-input:-webkit-autofill:hover,
[data-color-scheme="light"] .MuiInputBase-input:-webkit-autofill:focus,
[data-color-scheme="light"] .MuiInputBase-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px #f1f5f9 inset !important; /* Light bg override */
    -webkit-text-fill-color: #0f172a !important;               /* Dark text over light bg */
    caret-color: #0f172a !important;                           /* Cursor visible */
}

/* ── Placeholder text ──────────────────────────────────────────────────────── */
/*
 * Login.jsx placeholder text inherits the broken color too on some browsers.
 * Lock it to the correct muted value for Light mode.
 */
[data-color-scheme="light"] .MuiInputBase-input::placeholder {
    color: #94a3b8 !important;          /* --ks-input-placeholder (Light) */
    opacity: 1 !important;             /* Firefox reduces opacity by default */
}
