/* ═══════════════════════════════════════════════════════════════════
   SupervisorSync — Theme System
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light theme (default) ─────────────────────────────────────── */
:root,
html[data-theme="light"] {
    /* GitHub-style light tokens used by _Layout */
    --t-bg: #f6f8fa;
    --t-bg-card: #ffffff;
    --t-bg-subtle: #f0f4f8;
    --t-bg-hover: #e8edf5;
    --t-border: #d1d9e0;
    --t-border-muted: #e1e4e8;
    --t-text-primary: #1f2328;
    --t-text-secondary: #636c76;
    --t-text-muted: #8c959f;
    --t-primary: #0969da;
    --t-primary-hover: #0550ae;
    --t-success: #1a7f37;
    --t-warning: #bf8700;
    --t-danger: #cf222e;
    --t-navbar-bg: #ffffff;
    --t-navbar-shadow: 0 2px 15px rgba(0,0,0,0.08);
    --t-input-bg: #f8fafc;
    --t-input-border: #e2e8f0;
    --t-shadow: 0 2px 12px rgba(0,0,0,0.06);
    /* Dashboard role pages use --color-* variables.
     In light mode these stay as defined per-page. */

    color-scheme: light;
}

/* ── Dark theme ─────────────────────────────────────────────────── */
html[data-theme="dark"] {
    /* Layout tokens */
    --t-bg: #0d1117;
    --t-bg-card: #161b22;
    --t-bg-subtle: #1c2128;
    --t-bg-hover: #21262d;
    --t-border: #30363d;
    --t-border-muted: #21262d;
    --t-text-primary: #e6edf3;
    --t-text-secondary: #8b949e;
    --t-text-muted: #6e7681;
    --t-primary: #388bfd;
    --t-primary-hover: #58a6ff;
    --t-success: #3fb950;
    --t-warning: #d29922;
    --t-danger: #f85149;
    --t-navbar-bg: #161b22;
    --t-navbar-shadow: 0 2px 15px rgba(0,0,0,0.4);
    --t-input-bg: #0d1117;
    --t-input-border: #30363d;
    --t-shadow: 0 2px 12px rgba(0,0,0,0.3);
    /* Override ALL dashboard --color-* variables globally.
     Every role page (Student, Supervisor, DeptAdmin, SystemAdmin)
     uses these exact variable names — one override fixes them all. */
    --color-primary: #388bfd;
    --color-success: #3fb950;
    --color-warning: #d29922;
    --color-danger: #f85149;
    --color-info: #58a6ff;
    --color-text-primary: #e6edf3;
    --color-text-secondary: #8b949e;
    --color-text-muted: #6e7681;
    --color-bg: #0d1117;
    --color-bg-subtle: #1c2128;
    --color-border: #30363d;
    --color-border-muted: #21262d;
    color-scheme: dark;
}

    /* ═══════════════════════════════════════════════════════════════════
   GLOBAL DARK OVERRIDES
   These catch anything not using CSS variables
   ═══════════════════════════════════════════════════════════════════ */

    html[data-theme="dark"] body {
        background-color: #0d1117 !important;
        color: #e6edf3 !important;
    }

    /* ── Navbar ────────────────────────────────────────────────────── */
    html[data-theme="dark"] .custom-navbar {
        background: #161b22 !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.4) !important;
        border-bottom: 1px solid #30363d !important;
    }

    html[data-theme="dark"] .navbar-brand {
        background: linear-gradient(135deg, #58a6ff, #79c0ff) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    html[data-theme="dark"] .nav-link {
        color: #8b949e !important;
    }

        html[data-theme="dark"] .nav-link:hover {
            color: #388bfd !important;
            background: rgba(56,139,253,0.1) !important;
        }

    /* ── Sidebar ───────────────────────────────────────────────────── */
    html[data-theme="dark"] .sidebar-menu {
        background: #161b22 !important;
        border-left: 1px solid #30363d;
    }

    html[data-theme="dark"] .sidebar-nav .nav-item {
        border-bottom-color: #21262d !important;
    }

    html[data-theme="dark"] .sidebar-nav .nav-link {
        color: #8b949e !important;
    }

    html[data-theme="dark"] .sidebar-close {
        color: #8b949e !important;
    }

    /* ── Footer ────────────────────────────────────────────────────── */
    html[data-theme="dark"] .custom-footer {
        background: linear-gradient(135deg, #161b22 0%, #0d1117 100%) !important;
        border-top-color: #30363d !important;
    }

    html[data-theme="dark"] .footer-content {
        color: #8b949e !important;
    }

    /* ── Page wrappers / backgrounds ──────────────────────────────── */
    html[data-theme="dark"] .page-wrap:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .pay-wrapper:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .change-password-container:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .cp-wrap:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] body > .container {
        background-color: #0d1117 !important;
    }

    /* ── All white cards & panels ──────────────────────────────────── */
    html[data-theme="dark"] .card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .kpi-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .stat-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .page-header:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .pay-page-header:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .table-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .toolbar:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .filter-bar:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .password-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .cp-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .contact-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .overview-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .goal-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .team-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .advisor-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .testi-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .security-tip:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .info-box:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #161b22 !important;
        border-color: #30363d !important;
        color: #e6edf3 !important;
    }

        html[data-theme="dark"] .card:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .kpi-card:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .supervisor-card:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .feature-card:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .testi-card:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            border-color: #388bfd !important;
        }

    /* ── Supervisor / allocation cards ────────────────────────────── */
    html[data-theme="dark"] .supervisor-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .feat:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .feature-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .step:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .section-fog:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #161b22 !important;
        border-color: #30363d !important;
    }

        html[data-theme="dark"] .feat:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            background: rgba(56,139,253,0.1) !important;
        }

    /* ── Report / resource / session cards ─────────────────────────── */
    html[data-theme="dark"] .password-requirements:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .req-box:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .cp-header:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .photo-popup-cap:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .edit-sup-info:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .pw-info-item:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .pw-warning:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #1c2128 !important;
        border-color: #30363d !important;
    }

    /* ── Tables ────────────────────────────────────────────────────── */
    html[data-theme="dark"] table:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #e6edf3 !important;
    }

    html[data-theme="dark"] thead:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .table-card thead:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #1c2128 !important;
        border-bottom-color: #30363d !important;
    }

    html[data-theme="dark"] th:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #8b949e !important;
        border-color: #30363d !important;
        background: #1c2128 !important;
    }

    html[data-theme="dark"] td:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #e6edf3 !important;
        border-color: #21262d !important;
    }

    html[data-theme="dark"] tbody tr:hover td {
        background: #1c2128 !important;
    }

    /* ── Inputs & forms ────────────────────────────────────────────── */
    html[data-theme="dark"] .form-control:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] input.form-control:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] textarea.form-control:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] select.form-control:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .search-input:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .filter-select:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #0d1117 !important;
        border-color: #30363d !important;
        color: #e6edf3 !important;
    }

        html[data-theme="dark"] .form-control:focus:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .search-input:focus:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            border-color: #388bfd !important;
            box-shadow: 0 0 0 3px rgba(56,139,253,0.2) !important;
            background: #161b22 !important;
        }

        html[data-theme="dark"] .form-control::placeholder,
        html[data-theme="dark"] .search-input::placeholder {
            color: #6e7681 !important;
        }

    html[data-theme="dark"] .form-label:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] label.form-label:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #8b949e !important;
    }

    html[data-theme="dark"] .form-hint:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #6e7681 !important;
    }

    html[data-theme="dark"] .form-check-input:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background-color: #161b22 !important;
        border-color: #30363d !important;
    }

        html[data-theme="dark"] .form-check-input:checked:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            background-color: #388bfd !important;
            border-color: #388bfd !important;
        }

    /* ── Buttons ───────────────────────────────────────────────────── */
    html[data-theme="dark"] .btn-outline:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .btn-cancel:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .filter-btn:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #161b22 !important;
        border-color: #30363d !important;
        color: #e6edf3 !important;
    }

        html[data-theme="dark"] .btn-outline:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .btn-cancel:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
        html[data-theme="dark"] .filter-btn:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            background: #1c2128 !important;
            border-color: #388bfd !important;
            color: #e6edf3 !important;
        }

        html[data-theme="dark"] .filter-btn.active:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            background: #0c2d6b !important;
            border-color: #388bfd !important;
            color: #58a6ff !important;
        }

        html[data-theme="dark"] .filter-btn.active-green:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            background: #0f2d18 !important;
            border-color: #3fb950 !important;
            color: #3fb950 !important;
        }

        html[data-theme="dark"] .filter-btn.active-red:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            background: #300c0c !important;
            border-color: #f85149 !important;
            color: #f85149 !important;
        }

    /* ── Badges ────────────────────────────────────────────────────── */
    html[data-theme="dark"] .badge-success:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #0f2d18 !important;
        color: #3fb950 !important;
        border-color: #3fb950 !important;
    }

    html[data-theme="dark"] .badge-danger:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #300c0c !important;
        color: #f85149 !important;
        border-color: #f85149 !important;
    }

    html[data-theme="dark"] .badge-warning:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #2d1f07 !important;
        color: #d29922 !important;
        border-color: #d29922 !important;
    }

    html[data-theme="dark"] .badge-muted:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #1c2128 !important;
        color: #6e7681 !important;
        border-color: #30363d !important;
    }

    /* ── Alerts ────────────────────────────────────────────────────── */
    html[data-theme="dark"] .alert-danger:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .alert-error-custom:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #300c0c !important;
        border-color: #f85149 !important;
        color: #f85149 !important;
    }

    html[data-theme="dark"] .alert-success:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .alert-success-custom:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #0f2d18 !important;
        border-color: #3fb950 !important;
        color: #3fb950 !important;
    }

    /* ── Modals ────────────────────────────────────────────────────── */
    html[data-theme="dark"] .modal-box:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #161b22 !important;
        border: 1px solid #30363d !important;
    }

    html[data-theme="dark"] .modal-header:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .modal-footer {
        border-color: #21262d !important;
    }

    html[data-theme="dark"] .modal-close:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #6e7681 !important;
    }

        html[data-theme="dark"] .modal-close:hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            color: #e6edf3 !important;
        }

    html[data-theme="dark"] .modal-overlay:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: rgba(0,0,0,0.7) !important;
    }

    /* ── Progress bars & capacity fills ───────────────────────────── */
    html[data-theme="dark"] .progress-bar-wrap:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .capacity-track:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .rate-bar:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .strength-bar-wrap:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #1c2128 !important;
    }

    /* ── KPI left-border colours ───────────────────────────────────── */
    html[data-theme="dark"] .kpi-card.primary:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        border-left-color: #388bfd !important;
    }

    html[data-theme="dark"] .kpi-card.success:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        border-left-color: #3fb950 !important;
    }

    html[data-theme="dark"] .kpi-card.warning:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        border-left-color: #d29922 !important;
    }

    html[data-theme="dark"] .kpi-card.red:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        border-left-color: #f85149 !important;
    }

    /* ── KPI values & labels ───────────────────────────────────────── */
    html[data-theme="dark"] .kpi-value:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #e6edf3 !important;
    }

    html[data-theme="dark"] .kpi-label:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #8b949e !important;
    }

    html[data-theme="dark"] .kpi-sub:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #6e7681 !important;
    }

    /* ── Text ──────────────────────────────────────────────────────── */
    html[data-theme="dark"] h1:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *), html[data-theme="dark"] h2:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] h3:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *), html[data-theme="dark"] h4:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] h5:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *), html[data-theme="dark"] h6:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #e6edf3 !important;
    }

    html[data-theme="dark"] p:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #8b949e;
    }

    html[data-theme="dark"] small:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #6e7681 !important;
    }

    html[data-theme="dark"] .text-muted:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #6e7681 !important;
    }

    html[data-theme="dark"] hr:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .divider-line:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        border-color: #30363d !important;
    }

    /* ── Links ─────────────────────────────────────────────────────── */
    html[data-theme="dark"] a:not(.btn):not(.btn-primary-hero):not(.btn-ghost-hero):not(.btn-primary):not(.back-btn):not(.social-btn):not(.btn-nav-login):not(.social-link):not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #58a6ff;
    }

        html[data-theme="dark"] a:not(.btn):not(.btn-primary-hero):not(.btn-ghost-hero):not(.btn-primary):not(.back-btn):not(.social-btn):not(.btn-nav-login):not(.social-link):hover:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
            color: #79c0ff;
        }

    /* ── Breadcrumbs / page header text ───────────────────────────── */
    html[data-theme="dark"] .page-header h1:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #e6edf3 !important;
    }

    html[data-theme="dark"] .page-header p:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #8b949e !important;
    }

    /* ── Student / supervisor avatar initials ─────────────────────── */
    html[data-theme="dark"] .student-name:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #e6edf3 !important;
    }

    html[data-theme="dark"] .student-email:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        color: #6e7681 !important;
    }

    /* ── Section backgrounds (About, Homepage light sections) ───────── */
    html[data-theme="dark"] .section-fog:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .testimonials:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .bg-light:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] #statsSection.bg-light:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #161b22 !important;
    }

    /* ── Capacity banner in edit modal ────────────────────────────── */
    html[data-theme="dark"] #capacityBanner[style*="background: #fff8c5"]:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #2d1f07 !important;
        color: #d29922 !important;
        border-color: #d29922 !important;
    }

    /* ── Payment / checkout cards ──────────────────────────────────── */
    html[data-theme="dark"] .checkout-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *),
    html[data-theme="dark"] .payment-card:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #161b22 !important;
        border-color: #30363d !important;
    }

    /* ── Toast notifications ───────────────────────────────────────── */
    html[data-theme="dark"] .toast-msg:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #e6edf3 !important;
        color: #0d1117 !important;
    }

    /* ── Scrollbar ─────────────────────────────────────────────────── */
    html[data-theme="dark"] ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-track {
        background: #0d1117;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: #30363d;
        border-radius: 4px;
    }

        html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: #6e7681;
        }

    /* ── Password visibility boxes ─────────────────────────────────── */
    html[data-theme="dark"] .pw-password-box:not(.sspa *):not(.chat-shell *):not(.ssp *):not(.ssa *){
        background: #0d1117 !important;
        border: 1px solid #30363d !important;
    }

/* ═══════════════════════════════════════════════════════════════════
   THEME TOGGLE + LANGUAGE PICKER COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--t-border, #d1d9e0);
    color: var(--t-text-secondary, #636c76);
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

    .theme-toggle:hover {
        background: var(--t-bg-hover, #e8edf5);
        border-color: var(--t-primary, #0969da);
        transform: rotate(20deg);
    }

html[data-theme="dark"] .theme-toggle {
    border-color: #30363d;
    color: #8b949e;
}

    html[data-theme="dark"] .theme-toggle:hover {
        background: #1c2128;
        border-color: #388bfd;
    }

/* Language picker */
.lang-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--t-border, #d1d9e0);
    color: var(--t-text-secondary, #636c76);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .lang-btn:hover {
        background: var(--t-bg-hover, #e8edf5);
        border-color: var(--t-primary, #0969da);
    }

html[data-theme="dark"] .lang-btn {
    border-color: #30363d;
    color: #8b949e;
}

    html[data-theme="dark"] .lang-btn:hover {
        background: #1c2128;
        border-color: #388bfd;
    }

.lang-flag {
    font-size: 15px;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d9e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 160px;
    z-index: 9999;
    overflow: hidden;
    animation: dropDown 0.15s ease;
}

    .lang-dropdown.open {
        display: block;
    }

html[data-theme="dark"] .lang-dropdown {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

@@keyframes dropDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2328;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

    .lang-option:hover {
        background: #f0f4f8;
        color: #0969da;
    }

    .lang-option.active {
        color: #0969da;
        font-weight: 700;
    }

html[data-theme="dark"] .lang-option {
    color: #e6edf3;
}

    html[data-theme="dark"] .lang-option:hover {
        background: #1c2128;
        color: #58a6ff;
    }

    html[data-theme="dark"] .lang-option.active {
        color: #58a6ff;
    }

/* ── Smooth transitions (skip animations/transforms) ───────────── */
body, .card, .kpi-card, table, th, td, .form-control, input,
.navbar-brand, .custom-navbar, .sidebar-menu, .modal-box, .badge,
.btn-outline, .page-header, .pay-page-header, .toolbar {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.25s ease !important;
}

/* Never transition these */
.orb, .hero-mesh, .trust-inner, .scroll-dot, .btn-spinner,
.hamburger-icon span, .capacity-fill, .progress-bar-fill,
.score-fill, .strength-bar, .chart-bar-fill {
    transition: none !important;
}