/* ================================================================
   AUTH PAGES — Dark/Light mode via CSS Variables
   Utilisé par login, register, forgot-password, reset-password, 2fa
   ================================================================ */

/* Variables par défaut (dark — même palette que dark-mode.css) */
:root {
    --auth-page-bg: #131920;
    --auth-card-bg: #1d2630;
    --auth-card-border: #2e3840;
    --auth-text: #dee2e6;
    --auth-text-secondary: #8996a4;
    --auth-input-bg: #131920;
    --auth-input-border: #2e3840;
    --auth-input-color: #dee2e6;
    --auth-input-placeholder: #5b6b79;
    --auth-accent: #4680ff;
    --auth-accent-hover: #3866cc;
    --auth-accent-soft: rgba(70, 128, 255, .15);
    --auth-shadow: 0 8px 32px rgba(0, 0, 0, .4);
    --auth-alert-danger-bg: rgba(220, 53, 69, .12);
    --auth-alert-danger-color: #ff6b6b;
    --auth-alert-danger-border: rgba(220, 53, 69, .25);
    --auth-alert-success-bg: rgba(40, 167, 69, .12);
    --auth-alert-success-color: #51cf66;
    --auth-alert-success-border: rgba(40, 167, 69, .25);
    --auth-alert-info-bg: rgba(13, 202, 240, .12);
    --auth-alert-info-color: #3bc9db;
    --auth-alert-info-border: rgba(13, 202, 240, .25);
    --auth-link: #4680ff;
    --auth-divider: #2e3840;
    --auth-muted: #5b6b79;
}

/* Light mode */
body.light-mode, html.light-mode {
    --auth-page-bg: #f5f5f5;
    --auth-card-bg: #ffffff;
    --auth-card-border: #e7eaee;
    --auth-text: #131920;
    --auth-text-secondary: #666666;
    --auth-input-bg: #ffffff;
    --auth-input-border: #ddd;
    --auth-input-color: #131920;
    --auth-input-placeholder: #8996a4;
    --auth-accent: #006994;
    --auth-accent-hover: #005577;
    --auth-accent-soft: rgba(0, 105, 148, .1);
    --auth-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    --auth-alert-danger-bg: #f8d7da;
    --auth-alert-danger-color: #721c24;
    --auth-alert-danger-border: #f5c6cb;
    --auth-alert-success-bg: #d4edda;
    --auth-alert-success-color: #155724;
    --auth-alert-success-border: #c3e6cb;
    --auth-alert-info-bg: #d1ecf1;
    --auth-alert-info-color: #0c5460;
    --auth-alert-info-border: #bee5eb;
    --auth-link: #006994;
    --auth-divider: #ddd;
    --auth-muted: #999;
}

/* Base body */
body {
    background: var(--auth-page-bg) !important;
    color: var(--auth-text) !important;
}
body.theme-ready {
    transition: background .2s ease, color .2s ease;
}

/* Cards — login-container, register-container, card */
.login-container,
.register-container,
body > .card {
    background: var(--auth-card-bg) !important;
    border: 1px solid var(--auth-card-border) !important;
    box-shadow: var(--auth-shadow) !important;
    color: var(--auth-text) !important;
}

/* Headers */
.login-header h1,
.register-header h1,
.title {
    color: var(--auth-text) !important;
}
.login-header p,
.register-header p,
.subtitle {
    color: var(--auth-text-secondary) !important;
}

/* Labels */
.form-group label,
label {
    color: var(--auth-text) !important;
}
.form-group label .optional {
    color: var(--auth-muted) !important;
}

/* Inputs */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--auth-input-bg) !important;
    border-color: var(--auth-input-border) !important;
    color: var(--auth-input-color) !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--auth-accent) !important;
    box-shadow: 0 0 0 3px var(--auth-accent-soft) !important;
}
.form-control::placeholder,
input::placeholder {
    color: var(--auth-input-placeholder) !important;
}
.form-control:disabled {
    background: var(--auth-card-bg) !important;
    color: var(--auth-muted) !important;
    opacity: .7;
}

/* Primary buttons */
.btn-login,
.btn-register,
.btn,
button[type="submit"].btn {
    background: var(--auth-accent) !important;
    color: #fff !important;
    border-color: var(--auth-accent) !important;
}
.btn-login:hover,
.btn-register:hover,
.btn:hover {
    background: var(--auth-accent-hover) !important;
    border-color: var(--auth-accent-hover) !important;
}
.btn-login:disabled,
.btn-register:disabled {
    background: var(--auth-muted) !important;
    border-color: var(--auth-muted) !important;
}

/* Passkey button */
.btn-passkey {
    background: transparent !important;
    color: var(--auth-accent) !important;
    border: 2px solid var(--auth-accent) !important;
}
.btn-passkey:hover {
    background: var(--auth-accent-soft) !important;
}

/* Alert boxes */
.alert-danger {
    background: var(--auth-alert-danger-bg) !important;
    color: var(--auth-alert-danger-color) !important;
    border-color: var(--auth-alert-danger-border) !important;
}
.alert-success {
    background: var(--auth-alert-success-bg) !important;
    color: var(--auth-alert-success-color) !important;
    border-color: var(--auth-alert-success-border) !important;
}
.alert-info {
    background: var(--auth-alert-info-bg) !important;
    color: var(--auth-alert-info-color) !important;
    border-color: var(--auth-alert-info-border) !important;
}

/* Links */
.links a,
a.link,
.link {
    color: var(--auth-accent) !important;
}
.links span {
    color: var(--auth-divider) !important;
}

/* Remember me */
.remember-me label {
    color: var(--auth-text-secondary) !important;
}

/* Divider */
.or-divider {
    color: var(--auth-muted) !important;
}
.or-divider::before,
.or-divider::after {
    background: var(--auth-divider) !important;
}

/* Terms box */
.terms-group {
    background: var(--auth-input-bg) !important;
    border-color: var(--auth-card-border) !important;
}
.terms-group span {
    color: var(--auth-text) !important;
}
.terms-group a {
    color: var(--auth-accent) !important;
}

/* Password requirements */
.password-requirements {
    background: var(--auth-input-bg) !important;
    border-color: var(--auth-card-border) !important;
    color: var(--auth-text-secondary) !important;
}
.password-requirements strong {
    color: var(--auth-text) !important;
}
.password-requirements ul {
    color: var(--auth-text-secondary) !important;
}

/* Country dropdown */
.country-dropdown {
    background: var(--auth-card-bg) !important;
    border-color: var(--auth-card-border) !important;
    box-shadow: var(--auth-shadow) !important;
}
.country-dropdown-item {
    border-bottom-color: var(--auth-card-border) !important;
}
.country-dropdown-item:hover {
    background: var(--auth-accent-soft) !important;
}
.country-dropdown-item.selected {
    background: var(--auth-accent-soft) !important;
}
.country-dropdown-text {
    color: var(--auth-text) !important;
}
.country-dropdown-phone {
    color: var(--auth-muted) !important;
}

/* Telegram modal */
.telegram-modal-content {
    background: var(--auth-card-bg) !important;
    color: var(--auth-text) !important;
    box-shadow: var(--auth-shadow) !important;
}
.telegram-modal-header h3 {
    color: var(--auth-text) !important;
}
.telegram-modal-header p {
    color: var(--auth-text-secondary) !important;
}
.telegram-modal-body .instructions {
    background: var(--auth-input-bg) !important;
    color: var(--auth-text) !important;
}
.telegram-modal-body .instructions code {
    background: var(--auth-card-border) !important;
    color: var(--auth-accent) !important;
}
.telegram-info {
    background: var(--auth-accent-soft) !important;
    border-left-color: var(--auth-accent) !important;
    color: var(--auth-text) !important;
}
.btn-skip {
    background: var(--auth-input-bg) !important;
    color: var(--auth-text) !important;
}
.btn-skip:hover {
    background: var(--auth-card-border) !important;
}

/* Verification status */
.verification-status.success {
    background: var(--auth-alert-success-bg) !important;
    color: var(--auth-alert-success-color) !important;
    border-color: var(--auth-alert-success-border) !important;
}
.verification-status.error {
    background: var(--auth-alert-danger-bg) !important;
    color: var(--auth-alert-danger-color) !important;
    border-color: var(--auth-alert-danger-border) !important;
}
.verification-status.loading {
    background: var(--auth-alert-info-bg) !important;
    color: var(--auth-alert-info-color) !important;
    border-color: var(--auth-alert-info-border) !important;
}

/* Resend link */
.resend .link,
.resend button {
    color: var(--auth-accent) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--auth-page-bg); }
::-webkit-scrollbar-thumb { background: var(--auth-card-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--auth-muted); }

/* Transition — gated par .theme-ready pour éviter le scintillement au chargement */
body.theme-ready .login-container, body.theme-ready .register-container, body.theme-ready > .card, body.theme-ready .form-control, body.theme-ready .alert, body.theme-ready input, body.theme-ready textarea, body.theme-ready select, body.theme-ready .btn-login, body.theme-ready .btn-register, body.theme-ready .btn-passkey, body.theme-ready .country-dropdown, body.theme-ready .telegram-modal-content {
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}