/* ============================================================
   VIDEOTAXI LOGIN — DESKTOP DARK MODE
   Palette-only overlay. Layout remains in login_desktop.css.
   ============================================================ */

html.dark,
html.dark body {
    background: #111111 !important;
    color: #eeeeee !important;
}

html.dark .login-container {
    background: #1c1c1c !important;
    color: #eeeeee !important;
    border-color: #3b3b3b !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38) !important;
}

html.dark .login-container h1,
html.dark .login-container label {
    color: #eeeeee !important;
}

html.dark .login-container input,
html.dark .login-container input[type="email"],
html.dark .login-container input[type="password"],
html.dark .login-container input[type="text"] {
    background: #252525 !important;
    color: #f2f2f2 !important;
    -webkit-text-fill-color: #f2f2f2 !important;
    border-color: #4a4a4a !important;
    box-shadow: none !important;
}

html.dark .login-container input::placeholder {
    color: #969696 !important;
    -webkit-text-fill-color: #969696 !important;
}

html.dark .login-container input:focus {
    background: #252525 !important;
    border-color: #FDCA0B !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(253, 202, 11, 0.12) !important;
}

/* Browser autofill must stay dark. */
html.dark .login-container input:-webkit-autofill,
html.dark .login-container input:-webkit-autofill:hover,
html.dark .login-container input:-webkit-autofill:focus,
html.dark .login-container input:-webkit-autofill:active {
    -webkit-text-fill-color: #f2f2f2 !important;
    caret-color: #f2f2f2 !important;
    box-shadow: 0 0 0 1000px #252525 inset !important;
    -webkit-box-shadow: 0 0 0 1000px #252525 inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

html.dark .toggle-password {
    color: #c8c8c8 !important;
}

html.dark .toggle-password:hover {
    color: #FDCA0B !important;
    opacity: 1 !important;
}

html.dark .forgot-password-link {
    color: #FDCA0B !important;
}

html.dark .forgot-password-link:hover,
html.dark .forgot-password-link:focus-visible {
    color: #ffe16a !important;
}

/* Dark-mode action treatment: yellow outline, not a solid slab. */
html.dark .login-btn {
    background: transparent !important;
    color: #FDCA0B !important;
    border: 2px solid #FDCA0B !important;
    box-shadow: none !important;
}

html.dark .login-btn:hover,
html.dark .login-btn:focus-visible {
    background: rgba(253, 202, 11, 0.10) !important;
    color: #FDCA0B !important;
    border-color: #FDCA0B !important;
}

html.dark .login-btn:disabled,
html.dark .login-btn.is-submitting {
    background: rgba(253, 202, 11, 0.06) !important;
    color: #c9aa3b !important;
    border-color: #9a842f !important;
}

html.dark .login-submit-spinner {
    border-color: rgba(253, 202, 11, 0.30) !important;
    border-top-color: #FDCA0B !important;
}

html.dark .login-submit-status {
    color: #bdbdbd !important;
}

/* Keep logo areas transparent in dark mode. */
html.dark .logo,
html.dark .logo img {
    background: transparent !important;
}

/* Flash messages — dark surfaces with readable status colours. */
html.dark #flash-messages .flash {
    box-shadow: none !important;
}

html.dark #flash-messages .flash-danger,
html.dark #flash-messages .flash-error {
    background: rgba(217, 45, 32, 0.15) !important;
    color: #ff8a80 !important;
    border-color: rgba(255, 107, 107, 0.55) !important;
}

html.dark #flash-messages .flash-success {
    background: rgba(22, 163, 74, 0.14) !important;
    color: #78d69a !important;
    border-color: rgba(52, 208, 88, 0.50) !important;
}

html.dark #flash-messages .flash-warning {
    background: rgba(253, 202, 11, 0.11) !important;
    color: #FDCA0B !important;
    border-color: rgba(253, 202, 11, 0.50) !important;
}

html.dark #flash-messages .flash-info {
    background: rgba(80, 165, 255, 0.12) !important;
    color: #9dccff !important;
    border-color: rgba(80, 165, 255, 0.45) !important;
}


/* v4 theme-class compatibility */
body.dark { background:#111111 !important; color:#eeeeee !important; }
body.dark .login-btn { background:#242424 !important; color:#FDCA0B !important; border:2px solid #FDCA0B !important; box-shadow:none !important; }