/* ====================================================================
   DARK MODE — Face Recognition Attendance System
   Theme : Black / Red
   Class : body.dark-mode
   Strategy:
     1. Override :root CSS variables by re-declaring them on body.dark-mode
        (CSS custom properties declared closer to the element win, but
        re-declaring on body is the safest cross-browser override for
        variables set in :root when we cannot edit each page.)
     2. Target every structural class, inline-styled pattern, and
        hardcoded colour used across all pages.
   ==================================================================== */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
body.dark-mode {
    /* Page-level CSS variables — override every :root block */
    --primary:       #f0f0f0;
    --accent:        #e53e3e;
    --accent-light:  rgba(229, 62, 62, 0.12);
    --accent2:       #fc5c5c;
    --accent3:       #fc5c5c;
    --accent4:       #d69e2e;
    --surface:       #111111;
    --surface2:      #1a1a1a;
    --border:        #2a2a2a;
    --border-light:  #2a2a2a;
    --text-main:     #f0f0f0;
    --text-sub:      #888888;
    --radius:        14px;
    --shadow:        0 4px 24px rgba(0,0,0,0.7);
    --shadow-lg:     0 8px 40px rgba(0,0,0,0.8);
    --danger:        #e53e3e;

    /* Internal DM tokens */
    --dm-bg-base:       #0a0a0a;
    --dm-bg-surface:    #111111;
    --dm-bg-elevated:   #1a1a1a;
    --dm-bg-hover:      #222222;
    --dm-bg-input:      #161616;
    --dm-border:        #2a2a2a;
    --dm-accent:        #e53e3e;
    --dm-accent-hover:  #fc5c5c;
    --dm-accent-muted:  rgba(229, 62, 62, 0.12);
    --dm-accent-glow:   rgba(229, 62, 62, 0.28);
    --dm-text-primary:  #f0f0f0;
    --dm-text-secondary:#a0a0a0;
    --dm-text-muted:    #555555;
    --dm-text-link:     #fc5c5c;
    --dm-success:       #38a169;
    --dm-warning:       #d69e2e;
    --dm-danger:        #e53e3e;
    --dm-shadow:        0 4px 24px rgba(0,0,0,0.7);
    --dm-shadow-lg:     0 8px 40px rgba(0,0,0,0.8);
}

/* ── 2. GLOBAL BASE ───────────────────────────────────────────────── */
body.dark-mode {
    background-color: #0a0a0a !important;
    color: #f0f0f0 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode * {
    border-color: #2a2a2a !important;
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────────── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 { color: #f0f0f0 !important; }

body.dark-mode p   { color: #a0a0a0 !important; }
body.dark-mode span:not(.dot):not(.session-pill):not(.badge) { color: inherit; }
body.dark-mode label { color: #a0a0a0 !important; }
body.dark-mode a { color: #fc5c5c !important; }
body.dark-mode a:hover { color: #e53e3e !important; }
body.dark-mode small { color: #888 !important; }

/* ── 4. HEADER / TOPBAR ───────────────────────────────────────────── */
body.dark-mode .header,
body.dark-mode .fixed-header {
    background-color: #111111 !important;
    border-bottom: 1px solid #2a2a2a !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}
body.dark-mode .logo h2 { color: #f0f0f0 !important; }
body.dark-mode .logo span { color: #e53e3e !important; }

body.dark-mode .search {
    background-color: #161616 !important;
    border: 1px solid #2a2a2a !important;
}
body.dark-mode .search:focus-within {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229,62,62,0.12) !important;
}
body.dark-mode .search input {
    color: #f0f0f0 !important;
    background-color: transparent !important;
}
body.dark-mode .search input::placeholder { color: #555 !important; }
body.dark-mode .search button {
    background-color: #1a1a1a !important;
    border: none !important;
}
body.dark-mode .search button i { color: #e53e3e !important; }
body.dark-mode .picon.lock {
    color: #e53e3e !important;
    background-color: rgba(229,62,62,0.12) !important;
}

/* Profile dropdown */
body.dark-mode .profile-dropdown {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
}
body.dark-mode .profile-dropdown li a {
    color: #a0a0a0 !important;
    border-bottom: 1px solid #2a2a2a !important;
}
body.dark-mode .profile-dropdown li a:hover {
    background: #222 !important;
    color: #f0f0f0 !important;
}
body.dark-mode .logout-item a { color: #e53e3e !important; }
body.dark-mode .logout-item a:hover {
    background: rgba(229,62,62,0.1) !important;
}

/* ── 5. SIDEBAR ───────────────────────────────────────────────────── */
body.dark-mode .sidebar {
    background: linear-gradient(180deg, #0d0d0d 0%, #111111 100%) !important;
    border-right: 1px solid #2a2a2a !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.5) !important;
}
body.dark-mode .sidebar-brand       { border-bottom-color: #2a2a2a !important; }
body.dark-mode .sidebar-brand-name  { color: #f0f0f0 !important; }
body.dark-mode .sidebar-brand-name span { color: #e53e3e !important; }
body.dark-mode .sidebar-brand-role  {
    color: #e53e3e !important;
    background: rgba(229,62,62,0.1) !important;
    border-color: rgba(229,62,62,0.2) !important;
}
body.dark-mode .sidebar-avatar      { border-color: #e53e3e !important; }
body.dark-mode .sidebar-section-label { color: #444 !important; }
body.dark-mode .sidebar-divider     { background: #222 !important; }
body.dark-mode .sidebar-bottom      { border-top-color: #2a2a2a !important; }
body.dark-mode .sidebar-scroll::-webkit-scrollbar-thumb { background: #2a2a2a !important; }

body.dark-mode .sidebar--items a,
body.dark-mode .sidebar--bottom-items a {
    color: #888 !important;
    border-left-color: transparent !important;
}
body.dark-mode .sidebar--items a:hover,
body.dark-mode .sidebar--bottom-items a:hover {
    background: rgba(229,62,62,0.07) !important;
    color: #e53e3e !important;
    border-left-color: #e53e3e !important;
}
body.dark-mode .sidebar--items a:hover .nav-icon,
body.dark-mode .sidebar--bottom-items a:hover .nav-icon { color: #e53e3e !important; }
body.dark-mode .nav-icon { color: #444 !important; }

body.dark-mode #active--link {
    background: rgba(229,62,62,0.1) !important;
    color: #e53e3e !important;
    border-left: 3px solid #e53e3e !important;
}
body.dark-mode #active--link .nav-icon { color: #e53e3e !important; }

body.dark-mode .logout-link:hover {
    background: rgba(229,62,62,0.1) !important;
    color: #e53e3e !important;
}
body.dark-mode .icon-1 { color: #e53e3e !important; }
body.dark-mode .icon-2 { color: #555 !important; }

/* ── 6. MAIN CONTENT AREA ─────────────────────────────────────────── */
body.dark-mode .main,
body.dark-mode .main--content {
    background-color: #0a0a0a !important;
}

/* ── 7. PAGE HEADER ───────────────────────────────────────────────── */
body.dark-mode .page-header h1,
body.dark-mode .page-header h2 { color: #f0f0f0 !important; }
body.dark-mode .page-header p,
body.dark-mode .page-header .breadcrumb { color: #888 !important; }
body.dark-mode .page-header .breadcrumb span { color: #e53e3e !important; }

/* ── 8. STAT CARDS ────────────────────────────────────────────────── */
body.dark-mode .stat-card {
    background: #111111 !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}
body.dark-mode .stat-card:hover {
    border-color: #e53e3e !important;
    box-shadow: 0 4px 28px rgba(229,62,62,0.2) !important;
}
body.dark-mode .stat-card::before { background: #e53e3e !important; }
/* All colour variants → red */
body.dark-mode .stat-card.c1 .stat-icon,
body.dark-mode .stat-card.c2 .stat-icon,
body.dark-mode .stat-card.c3 .stat-icon,
body.dark-mode .stat-card.c4 .stat-icon {
    background: rgba(229,62,62,0.12) !important;
    color: #e53e3e !important;
}
body.dark-mode .stat-num   { color: #f0f0f0 !important; }
body.dark-mode .stat-label { color: #888 !important; }
body.dark-mode .stat-info .stat-num   { color: #f0f0f0 !important; }
body.dark-mode .stat-info .stat-label { color: #888 !important; }

/* add-btn inside stat-card */
body.dark-mode .add-btn {
    background: rgba(229,62,62,0.12) !important;
    color: #e53e3e !important;
    border: 1px solid rgba(229,62,62,0.2) !important;
}
body.dark-mode .add-btn:hover {
    background: #e53e3e !important;
    color: #fff !important;
}

/* ── 9. SECTION PANELS ────────────────────────────────────────────── */
body.dark-mode .section-panel {
    background: #111111 !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
body.dark-mode .section-panel-header {
    background: #111111 !important;
    border-bottom-color: #2a2a2a !important;
}
body.dark-mode .section-panel-header h2 { color: #f0f0f0 !important; }
body.dark-mode .section-panel-header a span { color: #e53e3e !important; }

/* Tag inside section-panel-header */
body.dark-mode .tag {
    background: rgba(229,62,62,0.12) !important;
    color: #e53e3e !important;
}

/* Section search input */
body.dark-mode .section-search input {
    background: #161616 !important;
    border-color: #2a2a2a !important;
    color: #f0f0f0 !important;
}
body.dark-mode .section-search input::placeholder { color: #555 !important; }
body.dark-mode .section-search i { color: #555 !important; }

/* ── 10. SESSION / ATTENDANCE PANEL ───────────────────────────────── */
body.dark-mode .session-panel {
    background: #111111 !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
body.dark-mode .session-panel .session-info h3 { color: #f0f0f0 !important; }
body.dark-mode .session-panel .session-info p   { color: #888 !important; }

body.dark-mode .session-pill.inactive {
    background: #1a1a1a !important;
    color: #888 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .session-pill.active {
    background: rgba(56,161,105,0.15) !important;
    color: #38a169 !important;
    border-color: rgba(56,161,105,0.3) !important;
}
body.dark-mode .link-card span[style] {
    background: #e53e3e !important;
    color: #fff !important;
}

/* ── 11. TABLES ───────────────────────────────────────────────────── */
body.dark-mode table { color: #f0f0f0 !important; }
body.dark-mode thead tr,
body.dark-mode thead   { background: #1a1a1a !important; }
body.dark-mode th {
    background: #1a1a1a !important;
    color: #555 !important;
    border-bottom: 1px solid #2a2a2a !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}
body.dark-mode td {
    color: #d0d0d0 !important;
    border-bottom: 1px solid #222 !important;
}
body.dark-mode tbody tr:hover td,
body.dark-mode tbody tr:hover { background: #181818 !important; }
/* Zebra striping fallback */
body.dark-mode .table-wrap { background: transparent !important; }

/* ── 12. BADGES ───────────────────────────────────────────────────── */
body.dark-mode .badge {
    background: rgba(229,62,62,0.12) !important;
    color: #e53e3e !important;
}
body.dark-mode .badge.green  { background: rgba(56,161,105,0.12) !important; color: #38a169 !important; }
body.dark-mode .badge.yellow { background: rgba(214,158,46,0.12) !important; color: #d69e2e !important; }
body.dark-mode .badge.gray   { background: #1a1a1a !important; color: #888 !important; }

/* ── 13. ACTION BUTTONS ───────────────────────────────────────────── */
body.dark-mode .delete-btn {
    background: rgba(229,62,62,0.08) !important;
    border-color: rgba(229,62,62,0.25) !important;
    color: #e53e3e !important;
}
body.dark-mode .delete-btn:hover {
    background: rgba(229,62,62,0.18) !important;
}
body.dark-mode .btn-session,
body.dark-mode .btn-submit {
    background: #e53e3e !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(229,62,62,0.3) !important;
}
body.dark-mode .btn-session:hover:not(:disabled),
body.dark-mode .btn-submit:hover {
    background: #fc5c5c !important;
}
body.dark-mode #adminStartBtn {
    background: #e53e3e !important;
    color: #fff !important;
}
body.dark-mode #adminStartBtn:hover:not(:disabled) {
    background: #fc5c5c !important;
}
body.dark-mode #adminEndBtn {
    background: #c53030 !important;
    color: #fff !important;
}
body.dark-mode .add {
    background: #e53e3e !important;
    color: #fff !important;
}

/* ── 14. FORMS & INPUTS ───────────────────────────────────────────── */
body.dark-mode input,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="search"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #161616 !important;
    color: #f0f0f0 !important;
    border: 1px solid #2a2a2a !important;
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229,62,62,0.12) !important;
    outline: none !important;
    background-color: #1a1a1a !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #555 !important; }
body.dark-mode select option {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
}
body.dark-mode .date-filter {
    background: #161616 !important;
    color: #f0f0f0 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .date-filter:focus { border-color: #e53e3e !important; }
body.dark-mode .form-group label { color: #888 !important; }
body.dark-mode .form-grid { background: transparent !important; }

/* Login form input-group wrapper */
body.dark-mode .input-group {
    background-color: #161616 !important;
    border: 1px solid #2a2a2a !important;
}
body.dark-mode .input-group i { color: #555 !important; }
body.dark-mode .input-group:focus-within {
    border: 1.5px solid #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229,62,62,0.12) !important;
}
body.dark-mode .input-group:focus-within i { color: #e53e3e !important; }

/* ── 15. MODALS & OVERLAYS ────────────────────────────────────────── */
body.dark-mode #overlay,
body.dark-mode .modal-backdrop {
    background: rgba(0,0,0,0.8) !important;
    backdrop-filter: blur(4px) !important;
}
body.dark-mode .modal,
body.dark-mode .formDiv,
body.dark-mode #addLectureForm,
body.dark-mode .formDiv-venue,
body.dark-mode .formDiv-- {
    background: #111111 !important;
    border: 1px solid #2a2a2a !important;
    color: #f0f0f0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.8) !important;
}
body.dark-mode .modal-header {
    border-bottom: 1px solid #2a2a2a !important;
    background: #111111 !important;
}
body.dark-mode .modal-header h3 { color: #f0f0f0 !important; }
body.dark-mode .modal-close,
body.dark-mode .close {
    color: #555 !important;
    background: transparent !important;
}
body.dark-mode .modal-close:hover,
body.dark-mode .close:hover { color: #e53e3e !important; }
body.dark-mode .modal-footer {
    border-top: 1px solid #2a2a2a !important;
    background: #111111 !important;
}
body.dark-mode .form-title { color: #f0f0f0 !important; }
body.dark-mode .form-title p { color: #888 !important; }

/* ── 16. CARDS (generic) ──────────────────────────────────────────── */
body.dark-mode .card {
    background: #111111 !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
body.dark-mode .card:hover {
    border-color: #e53e3e !important;
    box-shadow: 0 4px 28px rgba(229,62,62,0.2) !important;
}
body.dark-mode .card-1 {
    background: rgba(229,62,62,0.08) !important;
    border-color: rgba(229,62,62,0.2) !important;
}
body.dark-mode .card--title { color: #f0f0f0 !important; }
body.dark-mode .card h1     { color: #f0f0f0 !important; }
body.dark-mode .card--icon--lg { color: #e53e3e !important; }
body.dark-mode .room--card  { background: #111111 !important; color: #a0a0a0 !important; }

/* control-card (start-attendance) */
body.dark-mode .control-card {
    background: #111111 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .control-card__header {
    border-bottom-color: #2a2a2a !important;
    background: #111111 !important;
}
body.dark-mode .control-card__header h3 { color: #f0f0f0 !important; }
body.dark-mode .control-card__header p  { color: #888 !important; }

/* ── 17. ALERT / NOTICE BOXES ─────────────────────────────────────── */
body.dark-mode .alert {
    background: rgba(214,158,46,0.1) !important;
    color: #d69e2e !important;
    border-color: rgba(214,158,46,0.3) !important;
}
body.dark-mode .alert-success {
    background: rgba(56,161,105,0.1) !important;
    color: #38a169 !important;
    border-color: rgba(56,161,105,0.3) !important;
}
body.dark-mode .alert-error {
    background: rgba(229,62,62,0.1) !important;
    color: #e53e3e !important;
    border-color: rgba(229,62,62,0.3) !important;
}
body.dark-mode .error-main {
    background: rgba(229,62,62,0.1) !important;
    border: 1px solid rgba(229,62,62,0.3) !important;
    border-radius: 6px !important;
}
body.dark-mode .error-main p { color: #fc5c5c !important; }
body.dark-mode .info-note {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #888 !important;
}

/* messageDiv */
body.dark-mode .messageDiv {
    background: #1a1a1a !important;
    color: #f0f0f0 !important;
    border: 1px solid #2a2a2a !important;
    border-left: 3px solid #e53e3e !important;
}

/* ── 18. STATUS / PILL CLASSES ────────────────────────────────────── */
body.dark-mode .free      { color: #38a169 !important; }
body.dark-mode .scheduled { color: #fc5c5c !important; }
body.dark-mode .edit      { color: #38a169 !important; }
body.dark-mode .delete    { color: #e53e3e !important; }
body.dark-mode .pending   { color: #d69e2e !important; }
body.dark-mode .confirmed { color: #38a169 !important; }
body.dark-mode .rejected  { color: #e53e3e !important; }
body.dark-mode .up--arrow   { color: #38a169 !important; }
body.dark-mode .down--arrow { color: #e53e3e !important; }
body.dark-mode .stat--icon  { color: #e53e3e !important; }
body.dark-mode .unassigned  { color: #555 !important; }

/* Student/lecture status pills from view pages */
body.dark-mode [style*="background: #ecfdf5"],
body.dark-mode [style*="background:#ecfdf5"] {
    background: rgba(56,161,105,0.12) !important;
    color: #38a169 !important;
}
body.dark-mode [style*="background: #fffbeb"],
body.dark-mode [style*="background:#fffbeb"] {
    background: rgba(214,158,46,0.12) !important;
    color: #d69e2e !important;
}
body.dark-mode [style*="background: #fff1f2"],
body.dark-mode [style*="background:#fff1f2"] {
    background: rgba(229,62,62,0.12) !important;
    color: #e53e3e !important;
}
body.dark-mode [style*="background: #e0faf6"],
body.dark-mode [style*="background:#e0faf6"] {
    background: rgba(56,161,105,0.12) !important;
    color: #38a169 !important;
}
body.dark-mode [style*="background: #fff8e1"],
body.dark-mode [style*="background:#fff8e1"] {
    background: rgba(214,158,46,0.12) !important;
    color: #d69e2e !important;
}
body.dark-mode [style*="background: #fee2e2"],
body.dark-mode [style*="background:#fee2e2"] {
    background: rgba(229,62,62,0.12) !important;
    color: #e53e3e !important;
}
body.dark-mode [style*="background: #d1fae5"],
body.dark-mode [style*="background:#d1fae5"] {
    background: rgba(56,161,105,0.12) !important;
    color: #38a169 !important;
}
body.dark-mode [style*="background: #f8f9ff"],
body.dark-mode [style*="background:#f8f9ff"] {
    background: #1a1a1a !important;
}
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"] {
    background: #1a1a1a !important;
}
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"] {
    background: #111111 !important;
}
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"] {
    background: #111111 !important;
}
body.dark-mode [style*="color: var(--text-sub)"],
body.dark-mode [style*="color:var(--text-sub)"] {
    color: #888 !important;
}
body.dark-mode [style*="color: var(--accent)"],
body.dark-mode [style*="color:var(--accent)"] {
    color: #e53e3e !important;
}
body.dark-mode [style*="color: var(--text-main)"],
body.dark-mode [style*="color:var(--text-main)"] {
    color: #f0f0f0 !important;
}

/* ── 19. SETTINGS PAGE ────────────────────────────────────────────── */
body.dark-mode .settings-card,
body.dark-mode .settings-section {
    background: #111111 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .settings-card h3,
body.dark-mode .settings-section h3 { color: #f0f0f0 !important; }
body.dark-mode .toggle-track {
    background: #2a2a2a !important;
}
body.dark-mode .toggle-track.active,
body.dark-mode input[type="checkbox"]:checked + .toggle-track {
    background: #e53e3e !important;
}
/* Password strength bar */
body.dark-mode .strength-bar { background: #2a2a2a !important; }

/* ── 20. ATTENDANCE / CAMERA PAGE ─────────────────────────────────── */
body.dark-mode .session-status-bar {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .time-input-wrap input[type="time"] {
    background: #161616 !important;
    border-color: #2a2a2a !important;
    color: #f0f0f0 !important;
}
body.dark-mode .day-btn {
    background: #161616 !important;
    border-color: #2a2a2a !important;
    color: #888 !important;
}
body.dark-mode .day-btn.selected {
    background: rgba(229,62,62,0.12) !important;
    border-color: #e53e3e !important;
    color: #fc5c5c !important;
}
body.dark-mode .day-btn:hover {
    background: #222 !important;
    color: #f0f0f0 !important;
}
body.dark-mode .countdown-card {
    background: rgba(229,62,62,0.1) !important;
    border-color: rgba(229,62,62,0.25) !important;
}
body.dark-mode .sched-table th {
    background: #1a1a1a !important;
    color: #555 !important;
}
body.dark-mode .sched-table td { color: #f0f0f0 !important; }
body.dark-mode .sched-table-wrap { border-color: #2a2a2a !important; }
body.dark-mode .btn-start-att {
    background: #e53e3e !important;
    color: #fff !important;
}
body.dark-mode .btn-end-att {
    background: #c53030 !important;
    color: #fff !important;
}
body.dark-mode .btn-reset {
    background: #161616 !important;
    color: #888 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .btn-reset:hover:not(:disabled) {
    background: #222 !important;
    color: #f0f0f0 !important;
}

/* ── 21. TOPBAR CLOCK ─────────────────────────────────────────────── */
body.dark-mode .topbar-clock {
    color: #888 !important;
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

/* ── 22. VIEW-STUDENTS / AVATAR ───────────────────────────────────── */
body.dark-mode .student-avatar {
    background: rgba(229,62,62,0.15) !important;
    color: #e53e3e !important;
}

/* ── 23. LOGIN PAGE ───────────────────────────────────────────────── */
body.dark-mode .container {
    background: #111111 !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.8) !important;
}
body.dark-mode .welcome-text { color: #555 !important; }
body.dark-mode .btn {
    background: #e53e3e !important;
    color: #fff !important;
    box-shadow: 0 2px 14px rgba(229,62,62,0.3) !important;
}
body.dark-mode .btn:hover {
    background: #fc5c5c !important;
}
body.dark-mode .recover a { color: #fc5c5c !important; }
body.dark-mode .icons i {
    color: #555 !important;
    border-color: #2a2a2a !important;
}
body.dark-mode .icons i:hover {
    background: #1a1a1a !important;
    border-color: #e53e3e !important;
    color: #e53e3e !important;
}
body.dark-mode .or { color: #444 !important; }

/* ── 24. IMAGE / EDIT ICON ────────────────────────────────────────── */
body.dark-mode .image-box:hover img { box-shadow: 0 0 18px rgba(229,62,62,0.3) !important; }
body.dark-mode .edit-icon { color: #fc5c5c !important; }
body.dark-mode .img--box--cover { border-color: #e53e3e !important; }
body.dark-mode .new-student { border-top-color: #e53e3e !important; color: #888 !important; }

/* ── 25. SCROLLBAR ────────────────────────────────────────────────── */
body.dark-mode ::-webkit-scrollbar { width: 5px; height: 5px; }
body.dark-mode ::-webkit-scrollbar-track { background: #111111; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #e53e3e; }

/* ── 26. DARK MODE TOGGLE BUTTON ──────────────────────────────────── */
.dm-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s;
    margin-left: 14px;
    white-space: nowrap;
}
.dm-toggle:hover {
    background-color: #f3f4f6 !important;
    border-color: #e53e3e !important;
    color: #e53e3e !important;
}
.dm-toggle i { font-size: 1rem; }
body.dark-mode .dm-toggle {
    border-color: #2a2a2a !important;
    color: #888 !important;
    background: none !important;
}
body.dark-mode .dm-toggle:hover {
    background: #1a1a1a !important;
    border-color: #e53e3e !important;
    color: #fc5c5c !important;
}

/* ── 27. GENERIC CATCH-ALL ────────────────────────────────────────── */
/* Any surface that was white/light grey */
body.dark-mode [style*="background: #f5f6fa"],
body.dark-mode [style*="background:#f5f6fa"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background: #f1f4f8"],
body.dark-mode [style*="background: #f4f4f4"] {
    background: #1a1a1a !important;
}
body.dark-mode [style*="color: #1a1f36"],
body.dark-mode [style*="color:#1a1f36"],
body.dark-mode [style*="color: #323847"],
body.dark-mode [style*="color:#323847"],
body.dark-mode [style*="color: #111"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color: black"] {
    color: #f0f0f0 !important;
}
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#6b7280"],
body.dark-mode [style*="color: #9ca3af"],
body.dark-mode [style*="color:#9ca3af"] {
    color: #888 !important;
}
body.dark-mode [style*="border-bottom: 1px solid #f1f1f1"],
body.dark-mode [style*="border: 1.5px solid #e8eaf0"],
body.dark-mode [style*="border: 1px solid #e0e0e0"] {
    border-color: #2a2a2a !important;
}

/* ── 28. SMOOTH TRANSITION ────────────────────────────────────────── */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}