/* ================================================================
   AUTH PAGES DARK MODE - Glassmorphic Auth System
   Applied when html.dark is present. Covers login, signup,
   password reset, and all account/ template pages.
   ================================================================ */

/* ===== Body Background ===== */
html.dark body {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
    color: #e2e8f0 !important;
}

/* ===== Dark CSS Variables Override ===== */
html.dark {
    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-surface: #1e293b;
    --color-border: #334155;
    --glass-bg: rgba(30, 41, 59, 0.95);
    --glass-border: rgba(71, 85, 105, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ===== Auth Card ===== */
html.dark .auth-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-md) !important;
}

html.dark .auth-header::after {
    background: var(--glass-bg) !important;
}

/* ===== Form Inputs ===== */
html.dark .form-input,
html.dark .form-select,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark .form-input:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #5d6d63 !important;
    background: #1e293b !important;
    box-shadow: 0 0 0 3px rgba(93,109,99, 0.2) !important;
}

html.dark .form-input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* ===== Form Labels ===== */
html.dark .form-label,
html.dark label {
    color: #cbd5e1 !important;
}

/* ===== Remember / Forgot ===== */
html.dark .remember-me label {
    color: #94a3b8 !important;
}

/* ===== Error Messages ===== */
html.dark .error-message {
    background: rgba(239, 68, 68, 0.15) !important;
    border-left-color: #ef4444 !important;
    color: #fca5a5 !important;
}

html.dark .field-error {
    color: #fca5a5 !important;
}

/* ===== Success Messages ===== */
html.dark .success-message {
    background: rgba(16, 185, 129, 0.15) !important;
    border-left-color: #10b981 !important;
    color: #6ee7b7 !important;
}

/* ===== Auth Footer / Legal ===== */
html.dark .auth-footer {
    color: #94a3b8 !important;
}

html.dark .auth-legal {
    color: #64748b !important;
    border-top-color: #334155 !important;
}

/* ===== Lists & Info Boxes ===== */
html.dark .info-box,
html.dark .alert-info {
    background: rgba(138,121,99, 0.1) !important;
    border-color: #334155 !important;
    color: #93c5fd !important;
}

/* ===== Registration Form Steps ===== */
html.dark .step-card,
html.dark .wizard-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #334155 !important;
}

html.dark .step-indicator {
    color: #94a3b8;
}

html.dark .step-indicator.active {
    color: #a5b4fc;
}

/* ===== Password Strength ===== */
html.dark .password-strength {
    background: #0f172a !important;
}

/* ===== Social Login Buttons ===== */
html.dark .btn-social,
html.dark .btn-google {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark .btn-social:hover,
html.dark .btn-google:hover {
    background: #334155 !important;
}

/* ===== Dividers ===== */
html.dark .divider,
html.dark .auth-divider {
    border-color: #334155 !important;
    color: #64748b !important;
}

html.dark .divider span,
html.dark .auth-divider span {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #64748b !important;
}

/* ===== Select2 ===== */
html.dark .select2-container--default .select2-selection--single {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark .select2-container--default .select2-results__option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark .select2-container--default .select2-results__option--highlighted {
    background-color: #334155 !important;
}

html.dark .select2-dropdown {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* ===== Checkboxes ===== */
html.dark input[type="checkbox"] {
    accent-color: #5d6d63;
}

/* ===== Suspended / Inactive Pages ===== */
html.dark .suspended-card,
html.dark .inactive-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #334155 !important;
}

/* ===== Scrollbar ===== */
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* ===== Smooth Transition ===== */
html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}