/* ══════════════════════════════════════════════════════════════
   PREMIUM DARK MODE — CSS Variable System + Page Overrides
   Theme: GitHub Dark / Linear / Vercel inspired
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Variables: Light Mode (default) ── */
:root {
  --bg-body: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-input: #f8fafc;
  --bg-sidebar: linear-gradient(180deg, #1e3a5f, #0f4c75 40%, #1b262c);
  --bg-hero: linear-gradient(135deg, #1e3a5f, #0f4c75, #1b262c);
  --bg-overlay: rgba(0,0,0,0.5);
  --text-primary: #1e293b;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.7);
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus: #0d6efd;
  --accent: #0d6efd;
  --accent-alt: #6366f1;
  --accent-hover: #0b5ed7;
  --accent-glow: rgba(13,110,253,0.15);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-hero: 0 12px 32px rgba(15,76,117,0.3);
  --green: #16a34a;
  --green-light: #22c55e;
  --green-bg: #f0fdf4;
  --green-border: #bbf7d0;
  --amber: #f59e0b;
  --amber-dark: #d97706;
  --amber-bg: #fffbeb;
  --amber-border: #fde68a;
  --red: #dc2626;
  --red-light: #ef4444;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --red-soft: #f87171;
  --purple: #7c3aed;
  --purple-bg: #f5f3ff;
  --cyan: #0891b2;
  --cyan-bg: #ecfeff;
  --teal: #0d9488;
  --teal-bg: #f0fdfa;
  --indigo: #4f46e5;
  --indigo-bg: #eef2ff;
  --orange: #ea580c;
  --orange-bg: #fff7ed;
  --rose: #e11d48;
  --rose-bg: #fff1f2;
  --whatsapp: #25d366;
  --icon-blue-bg: #eff6ff;
  --icon-green-bg: #f0fdf4;
  --icon-purple-bg: #f5f3ff;
  --icon-amber-bg: #fffbeb;
  --icon-rose-bg: #fff1f2;
  --icon-cyan-bg: #ecfeff;
  --icon-indigo-bg: #eef2ff;
  --icon-teal-bg: #f0fdfa;
  --icon-red-bg: #fef2f2;
  --icon-orange-bg: #fff7ed;
  --icon-purple-light-bg: #fdf4ff;
  --table-stripe: rgba(0,0,0,0.02);
  --table-hover: rgba(59,130,246,0.04);
  --gradient-primary: linear-gradient(135deg, #0d6efd, #6366f1);
  --gradient-success: linear-gradient(135deg, #16a34a, #22c55e);
  --gradient-amber: linear-gradient(135deg, #d97706, #f59e0b);
}

/* ── CSS Variables: Dark Mode ── */
html.dark {
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #293548;
  --bg-input: #0f172a;
  --bg-sidebar: linear-gradient(180deg, #0b1120, #111827 40%, #0f172a);
  --bg-hero: linear-gradient(135deg, #0b1120, #111827, #1e293b);
  --bg-overlay: rgba(0,0,0,0.7);
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.6);
  --border-default: #334155;
  --border-strong: #475569;
  --border-focus: #3b82f6;
  --accent: #3b82f6;
  --accent-alt: #818cf8;
  --accent-hover: #60a5fa;
  --accent-glow: rgba(59,130,246,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-hero: 0 12px 32px rgba(0,0,0,0.4);
  --green: #4ade80;
  --green-light: #22c55e;
  --green-bg: rgba(34,197,94,0.12);
  --green-border: #166534;
  --amber: #fbbf24;
  --amber-dark: #f59e0b;
  --amber-bg: rgba(245,158,11,0.12);
  --amber-border: #92400e;
  --red: #f87171;
  --red-light: #ef4444;
  --red-bg: rgba(239,68,68,0.12);
  --red-border: #7f1d1d;
  --red-soft: #fca5a5;
  --purple: #a78bfa;
  --purple-bg: rgba(168,85,247,0.12);
  --cyan: #22d3ee;
  --cyan-bg: rgba(6,182,212,0.12);
  --teal: #2dd4bf;
  --teal-bg: rgba(20,184,166,0.12);
  --indigo: #818cf8;
  --indigo-bg: rgba(99,102,241,0.12);
  --orange: #fb923c;
  --orange-bg: rgba(249,115,22,0.12);
  --rose: #fb7185;
  --rose-bg: rgba(244,63,94,0.12);
  --whatsapp: #4ade80;
  --icon-blue-bg: rgba(59,130,246,0.15);
  --icon-green-bg: rgba(34,197,94,0.15);
  --icon-purple-bg: rgba(168,85,247,0.15);
  --icon-amber-bg: rgba(245,158,11,0.15);
  --icon-rose-bg: rgba(244,63,94,0.15);
  --icon-cyan-bg: rgba(6,182,212,0.15);
  --icon-indigo-bg: rgba(99,102,241,0.15);
  --icon-teal-bg: rgba(20,184,166,0.15);
  --icon-red-bg: rgba(239,68,68,0.15);
  --icon-orange-bg: rgba(249,115,22,0.15);
  --icon-purple-light-bg: rgba(168,85,247,0.15);
  --table-stripe: rgba(255,255,255,0.02);
  --table-hover: rgba(59,130,246,0.06);
  --gradient-primary: linear-gradient(135deg, #3b82f6, #818cf8);
  --gradient-success: linear-gradient(135deg, #4ade80, #22c55e);
  --gradient-amber: linear-gradient(135deg, #f59e0b, #fbbf24);
}

/* ── Base ── */
html.dark { background: var(--bg-body) !important; color: var(--text-primary) !important; }
html.dark body { background: var(--bg-body) !important; color: var(--text-primary) !important; }

/* ── Typography ── */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--text-primary) !important; }
html.dark p { color: var(--text-secondary) !important; }
html.dark a { color: var(--accent) !important; }
html.dark a:hover { color: var(--accent-hover) !important; }
html.dark strong, html.dark b { color: var(--text-primary) !important; }
html.dark hr { border-color: var(--border-default) !important; }

/* ── Inline style overrides ── */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:white"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"] {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
}
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background-color:#f1f5f9"],
html.dark [style*="background-color: #f1f5f9"] {
  background: var(--bg-body) !important;
  background-color: var(--bg-body) !important;
}
html.dark [style*="color:#1e293b"],
html.dark [style*="color: #1e293b"],
html.dark [style*="color:#334155"],
html.dark [style*="color: #334155"] {
  color: var(--text-primary) !important;
}
html.dark [style*="color:#64748b"],
html.dark [style*="color: #64748b"],
html.dark [style*="color:#94a3b8"],
html.dark [style*="color: #94a3b8"] {
  color: var(--text-muted) !important;
}
html.dark [style*="border-color:#e2e8f0"],
html.dark [style*="border-color: #e2e8f0"] {
  border-color: var(--border-default) !important;
}
html.dark [style*="border: 2px solid #e2e8f0"],
html.dark [style*="border:2px solid #e2e8f0"],
html.dark [style*="border: 1px solid #e2e8f0"],
html.dark [style*="border:1px solid #e2e8f0"] {
  border-color: var(--border-default) !important;
}
html.dark [style*="border-bottom: 1px solid #f1f5f9"],
html.dark [style*="border-bottom:1px solid #f1f5f9"] {
  border-bottom-color: var(--border-default) !important;
}
html.dark [style*="border-left: 4px solid #0d6efd"],
html.dark [style*="border-left:4px solid #0d6efd"] {
  border-left-color: var(--accent) !important;
}
html.dark [style*="background:#f8fafc"],
html.dark [style*="background: #f8fafc"] {
  background: var(--bg-input) !important;
  background-color: var(--bg-input) !important;
}
html.dark [style*="color:#3b82f6"],
html.dark [style*="color: #3b82f6"],
html.dark [style*="color:#0d6efd"],
html.dark [style*="color: #0d6efd"] {
  color: var(--accent) !important;
}
html.dark [style*="color:#22c55e"],
html.dark [style*="color: #22c55e"],
html.dark [style*="color:#16a34a"],
html.dark [style*="color: #16a34a"] {
  color: var(--green) !important;
}
html.dark [style*="color:#a855f7"],
html.dark [style*="color: #a855f7"],
html.dark [style*="color:#7c3aed"],
html.dark [style*="color: #7c3aed"] {
  color: var(--purple) !important;
}
html.dark [style*="color:#ef4444"],
html.dark [style*="color: #ef4444"],
html.dark [style*="color:#dc2626"],
html.dark [style*="color: #dc2626"] {
  color: var(--red) !important;
}
html.dark [style*="color:#f59e0b"],
html.dark [style*="color: #f59e0b"],
html.dark [style*="color:#d97706"],
html.dark [style*="color: #d97706"] {
  color: var(--amber-dark) !important;
}
html.dark [style*="color:#6366f1"],
html.dark [style*="color: #6366f1"] {
  color: var(--accent-alt) !important;
}
html.dark [style*="color:#f97316"],
html.dark [style*="color: #f97316"],
html.dark [style*="color:#ea580c"],
html.dark [style*="color: #ea580c"] {
  color: var(--orange) !important;
}
html.dark [style*="color:#14b8a6"],
html.dark [style*="color: #14b8a6"],
html.dark [style*="color:#0d9488"],
html.dark [style*="color: #0d9488"] {
  color: var(--teal) !important;
}
html.dark [style*="color:#ec4899"],
html.dark [style*="color: #ec4899"],
html.dark [style*="color:#e11d48"],
html.dark [style*="color: #e11d48"] {
  color: var(--rose) !important;
}
html.dark [style*="color:#06b6d4"],
html.dark [style*="color: #06b6d4"],
html.dark [style*="color:#0891b2"],
html.dark [style*="color: #0891b2"] {
  color: var(--cyan) !important;
}
html.dark [style*="background:#eff6ff"],
html.dark [style*="background: #eff6ff"] {
  background: var(--icon-blue-bg) !important;
  background-color: var(--icon-blue-bg) !important;
}
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background: #f0fdf4"] {
  background: var(--icon-green-bg) !important;
  background-color: var(--icon-green-bg) !important;
}
html.dark [style*="background:#fef2f2"],
html.dark [style*="background: #fef2f2"] {
  background: var(--icon-red-bg) !important;
  background-color: var(--icon-red-bg) !important;
}
html.dark [style*="background:#fffbeb"],
html.dark [style*="background: #fffbeb"] {
  background: var(--icon-amber-bg) !important;
  background-color: var(--icon-amber-bg) !important;
}
html.dark [style*="background:#f5f3ff"],
html.dark [style*="background: #f5f3ff"] {
  background: var(--icon-purple-bg) !important;
  background-color: var(--icon-purple-bg) !important;
}
html.dark [style*="background:#fdf2f8"],
html.dark [style*="background: #fdf2f8"] {
  background: var(--icon-rose-bg) !important;
  background-color: var(--icon-rose-bg) !important;
}
html.dark [style*="background:#eef2ff"],
html.dark [style*="background: #eef2ff"] {
  background: var(--icon-indigo-bg) !important;
  background-color: var(--icon-indigo-bg) !important;
}
html.dark [style*="background:#f0fdfa"],
html.dark [style*="background: #f0fdfa"] {
  background: var(--icon-teal-bg) !important;
  background-color: var(--icon-teal-bg) !important;
}
html.dark [style*="background:#fff7ed"],
html.dark [style*="background: #fff7ed"] {
  background: var(--icon-orange-bg) !important;
  background-color: var(--icon-orange-bg) !important;
}
html.dark [style*="background:#ecfeff"],
html.dark [style*="background: #ecfeff"] {
  background: var(--icon-cyan-bg) !important;
  background-color: var(--icon-cyan-bg) !important;
}
html.dark [style*="background:#fdf4ff"],
html.dark [style*="background: #fdf4ff"] {
  background: var(--icon-purple-light-bg) !important;
  background-color: var(--icon-purple-light-bg) !important;
}
html.dark [style*="background:#fff1f2"],
html.dark [style*="background: #fff1f2"] {
  background: var(--icon-rose-bg) !important;
  background-color: var(--icon-rose-bg) !important;
}
html.dark [style*="background:#fee2e2"],
html.dark [style*="background: #fee2e2"] {
  background: var(--red-bg) !important;
  background-color: var(--red-bg) !important;
}
html.dark [style*="background:#dcfce7"],
html.dark [style*="background: #dcfce7"] {
  background: var(--green-bg) !important;
  background-color: var(--green-bg) !important;
}
html.dark [style*="background:#dbeafe"],
html.dark [style*="background: #dbeafe"] {
  background: var(--icon-blue-bg) !important;
  background-color: var(--icon-blue-bg) !important;
}
html.dark [style*="background:#fef3c7"],
html.dark [style*="background: #fef3c7"] {
  background: var(--amber-bg) !important;
  background-color: var(--amber-bg) !important;
}
html.dark [style*="color:#475569"],
html.dark [style*="color: #475569"] {
  color: var(--text-secondary) !important;
}
html.dark [style*="color:#c9d6df"],
html.dark [style*="color: #c9d6df"] {
  color: rgba(255,255,255,0.7) !important;
}

/* ── Sidebar ── */
html.dark .sidebar { background: var(--bg-sidebar) !important; }
html.dark .sidebar-head { border-bottom-color: rgba(255,255,255,0.06) !important; }
html.dark .sidebar-head .s-name { color: #fff !important; }
html.dark .sidebar-head .s-id { color: rgba(255,255,255,0.5) !important; }
html.dark .sidebar-nav a { color: rgba(255,255,255,0.6) !important; }
html.dark .sidebar-nav a:hover { background: rgba(255,255,255,0.07) !important; color: #fff !important; }
html.dark .sidebar-nav a.active { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
html.dark .sidebar-nav .nav-divider { background: rgba(255,255,255,0.06) !important; }
html.dark .sidebar-nav .nav-section { color: rgba(255,255,255,0.35) !important; }
html.dark .hamburger { background: var(--bg-card) !important; color: var(--text-primary) !important; }
html.dark .sidebar-overlay { background: rgba(0,0,0,0.6) !important; }

/* ── Dark mode toggle ── */
.dark-toggle {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 10px; border: 2px solid var(--border-default); background: var(--bg-card);
  color: var(--amber); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.2s; width: 100%;
}
.dark-toggle:hover { background: var(--bg-card-hover); border-color: var(--amber); }
.dark-toggle i { font-size: 1rem; width: 20px; text-align: center; }

/* ══════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES
   ══════════════════════════════════════ */

/* ── DASHBOARD ── */
html.dark .logo-header img { background: var(--bg-input) !important; }
html.dark .profile-hero { background: var(--bg-hero) !important; }
html.dark .profile-hero img { border-color: rgba(255,255,255,0.2) !important; }
html.dark .profile-info p { color: rgba(255,255,255,0.6) !important; }
html.dark .nav-grid a { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .nav-grid a:hover { border-color: var(--accent) !important; background: var(--bg-card-hover) !important; }
html.dark .nav-grid a i { background: rgba(255,255,255,0.08) !important; }
html.dark .nav-grid a:hover i { background: var(--icon-blue-bg) !important; }
html.dark .nav-grid a.admin-link i { background: rgba(251,191,36,0.15) !important; }
html.dark .nav-grid a.logout-link { color: var(--red-soft) !important; }
html.dark .nav-grid a.logout-link:hover { background: rgba(248,113,113,0.1) !important; border-color: var(--red-soft) !important; }
html.dark .nav-grid a.logout-link i { background: rgba(248,113,113,0.1) !important; }
html.dark .bday-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .bday-card:hover { border-color: var(--amber) !important; background: var(--amber-bg) !important; }
html.dark .bday-name { color: var(--text-primary) !important; }
html.dark .bday-date { color: var(--amber) !important; }
html.dark .notice-card { background: rgba(30,41,59,0.5) !important; border-color: var(--border-default) !important; border-left-color: var(--accent) !important; box-shadow: none !important; }
html.dark .notice-card:hover { box-shadow: none !important; }
html.dark .notice-title { color: var(--text-primary) !important; }
html.dark .notice-body { color: var(--text-secondary) !important; }
html.dark .notice-date { color: var(--text-light) !important; }
html.dark .notice-author { color: var(--text-muted) !important; }
html.dark .notice-attach { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .notice-attach:hover { background: var(--accent-glow) !important; }
html.dark .notice-footer { border-top-color: var(--border-default) !important; }
html.dark .headline-bar { background: var(--amber-bg) !important; border-color: var(--amber-border) !important; }
html.dark .headline-bar span { color: var(--amber-dark) !important; }
html.dark .section-title { color: var(--text-muted) !important; }
html.dark .section-title i { opacity: 0.9; }
html.dark .btn-view { background: rgba(255,255,255,0.1) !important; color: var(--text-on-dark) !important; border-color: rgba(255,255,255,0.2) !important; }
html.dark .btn-view:hover { background: rgba(255,255,255,0.15) !important; }
html.dark .btn-dark-toggle { background: rgba(255,255,255,0.1) !important; color: var(--text-on-dark) !important; border-color: rgba(255,255,255,0.2) !important; }
html.dark .btn-dark-toggle:hover { background: rgba(255,255,255,0.15) !important; }
html.dark .empty-state { color: var(--text-muted) !important; }
html.dark .empty-state i { color: var(--text-light) !important; }

/* ── PROFILE ── */
html.dark .hero-card { background: var(--bg-hero) !important; }
html.dark .hero-name { color: #fff !important; }
html.dark .hero-id { color: rgba(255,255,255,0.6) !important; }
html.dark .hero-id .id-badge { background: rgba(255,255,255,0.1) !important; color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }
html.dark .hero-role.student { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.6) !important; }
html.dark .hero-role.admin { background: linear-gradient(135deg, var(--amber), var(--amber-dark)) !important; }
html.dark .info-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .info-card h3 { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; background: none !important; }
html.dark .info-card h3 i { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
html.dark .info-row { border-bottom-color: var(--border-default) !important; }
html.dark .info-detail .label { color: var(--text-muted) !important; }
html.dark .info-detail .value { color: var(--text-primary) !important; }
html.dark .info-icon.blue { background: var(--icon-blue-bg) !important; }
html.dark .info-icon.green { background: var(--icon-green-bg) !important; }
html.dark .info-icon.purple { background: var(--icon-purple-bg) !important; }
html.dark .info-icon.amber { background: var(--icon-amber-bg) !important; }
html.dark .info-icon.rose { background: var(--icon-rose-bg) !important; }
html.dark .info-icon.cyan { background: var(--icon-cyan-bg) !important; }
html.dark .info-icon.indigo { background: var(--icon-indigo-bg) !important; }
html.dark .info-icon.teal { background: var(--icon-teal-bg) !important; }
html.dark .back-link { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .back-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .edit-btn { background: var(--gradient-primary) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.dark .info-card .edit-btn i { -webkit-text-fill-color: #fff !important; color: #fff !important; }
html.dark .photo-btn { background: var(--gradient-primary) !important; }

/* ── PROFILE MODALS ── */
html.dark .modal-overlay { background: var(--bg-overlay) !important; }
html.dark .modal-box { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .modal-title { color: var(--text-primary) !important; }
html.dark .modal-title i { color: var(--accent) !important; }
html.dark .modal-close { background: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; }
html.dark .modal-close:hover { background: rgba(255,255,255,0.15) !important; }
html.dark .edit-form label { color: var(--text-muted) !important; }
html.dark .edit-form input, html.dark .edit-form select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .edit-form input:focus, html.dark .edit-form select:focus { border-color: var(--border-focus) !important; background: var(--bg-card) !important; color: var(--text-primary) !important; }
html.dark .crop-area { background: var(--bg-input) !important; }
html.dark .upload-input { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .upload-input:hover { border-color: var(--accent) !important; background: var(--bg-card) !important; }
html.dark .progress-bar { background: var(--border-default) !important; }
html.dark .crop-hint { color: var(--text-muted) !important; }
html.dark .btn-save { background: var(--gradient-success) !important; }
html.dark .btn-upload { background: var(--gradient-success) !important; }

/* ── USERS ── */
html.dark .header h1 { background: var(--gradient-primary) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
html.dark .header .count { color: var(--text-muted) !important; }
html.dark .search-wrap { background: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark .search-wrap input { color: var(--text-primary) !important; }
html.dark .filter-select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .user-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .user-card:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-md) !important; }
html.dark .user-card::before { background: var(--gradient-primary) !important; }
html.dark .user-name { color: var(--text-primary) !important; }
html.dark .user-sid { color: var(--accent) !important; background: var(--icon-blue-bg) !important; }
html.dark .user-meta { color: var(--text-muted) !important; }
html.dark .admin-badge { background: var(--gradient-amber) !important; }
html.dark .view-btn { background: var(--gradient-primary) !important; }
html.dark .user-photo { border-color: var(--border-default) !important; }
html.dark .empty-state { color: var(--text-muted) !important; }
html.dark .empty-state i { color: var(--text-light) !important; }

/* ── USERS MODAL ── */
html.dark .modal-hero { background: var(--bg-hero) !important; }
html.dark .modal-hero .modal-name { color: #fff !important; }
html.dark .modal-hero .modal-sid { color: rgba(255,255,255,0.6) !important; }
html.dark .modal-info { background: var(--bg-card) !important; }
html.dark .modal-info .modal-row { border-bottom-color: var(--border-default) !important; }
html.dark .modal-info .modal-label { color: var(--text-muted) !important; }
html.dark .modal-info .modal-value { color: var(--text-primary) !important; }
html.dark .modal-icon.blue { background: var(--icon-blue-bg) !important; }
html.dark .modal-icon.green { background: var(--icon-green-bg) !important; }
html.dark .modal-icon.amber { background: var(--icon-amber-bg) !important; }
html.dark .modal-icon.purple { background: var(--icon-purple-bg) !important; }
html.dark .modal-icon.teal { background: var(--icon-teal-bg) !important; }
html.dark .modal-icon.red { background: var(--icon-red-bg) !important; }
html.dark .modal-btn.whatsapp { background: #15803d !important; color: #fff !important; border: none !important; }
html.dark .modal-btn.whatsapp:hover { background: #166534 !important; }
html.dark .modal-btn.call { background: var(--accent) !important; color: #fff !important; border: none !important; }
html.dark .modal-btn.call:hover { background: var(--accent-hover) !important; }
html.dark .modal-btn.email { background: transparent !important; border: 2px solid var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .modal-btn.email:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .modal-role.admin { background: rgba(251,191,36,0.2) !important; color: var(--amber) !important; border-color: rgba(251,191,36,0.3) !important; }
html.dark .modal-role.student { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.15) !important; }
html.dark .lightbox-close { color: #fff !important; }

/* ── GRADE CALCULATOR ── */
html.dark .student-card { background: var(--bg-hero) !important; }
html.dark .student-info .sname { color: var(--text-on-dark) !important; }
html.dark .student-info .ssid { color: var(--text-on-dark-muted) !important; }
html.dark .id-badge { background: rgba(255,255,255,0.1) !important; color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }
html.dark .picker-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .picker-card h3 { color: var(--text-muted) !important; }
html.dark .picker-group select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .picker-value { color: var(--text-primary) !important; }
html.dark .picker-change { color: var(--accent) !important; }
html.dark .picker-change:hover { background: var(--accent-glow) !important; }
html.dark .change-btn { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .change-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .table-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .table-card th { background: var(--bg-input) !important; color: var(--text-muted) !important; border-bottom-color: var(--border-default) !important; }
html.dark .table-card td { color: var(--text-primary) !important; border-bottom-color: var(--border-default) !important; }
html.dark .grade-select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .calc-btn { background: var(--gradient-primary) !important; }
html.dark .grade-ref { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .grade-ref h3 { color: var(--text-muted) !important; }
html.dark .code-badge { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .credit-badge { background: var(--icon-green-bg) !important; color: var(--green) !important; }
html.dark .result-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .result-card .rc-label { color: var(--text-muted) !important; }
html.dark .result-card .rc-value { background: var(--gradient-primary) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
html.dark .result-card .rc-value.green { background: var(--gradient-success) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html.dark .result-card .rc-value.amber { background: var(--gradient-amber) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html.dark .gr-item { color: var(--text-secondary) !important; }
html.dark .empty-msg { color: var(--text-muted) !important; }

/* ── GRADE CALCULATOR MODAL ── */
html.dark .modal-start-btn { background: var(--gradient-primary) !important; }
html.dark .modal-icon { background: var(--gradient-primary) !important; }

/* ── ROUTINE ── */
html.dark .day-tab { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .day-tab:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .day-tab.active { background: var(--gradient-primary) !important; color: #fff !important; }
html.dark .day-tab.today { border-color: var(--amber) !important; }
html.dark .routine-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .routine-card:hover { box-shadow: var(--shadow-md) !important; }
html.dark .routine-time { color: var(--accent) !important; background: var(--icon-blue-bg) !important; }
html.dark .routine-subject { color: var(--text-primary) !important; }
html.dark .routine-detail { color: var(--text-muted) !important; }
html.dark .routine-detail strong { color: var(--text-secondary) !important; }
html.dark .empty-msg { color: var(--text-muted) !important; }

/* ── SUBMISSIONS ── */
html.dark .form-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .form-card:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-md) !important; }
html.dark .form-card::before { background: var(--gradient-primary) !important; }
html.dark .form-title { color: var(--text-primary) !important; }
html.dark .form-desc { color: var(--text-muted) !important; }
html.dark .form-icon { background: var(--gradient-primary) !important; }
html.dark .form-arrow { color: var(--text-light) !important; }
html.dark .form-deadline { background: var(--amber-bg) !important; color: var(--amber-dark) !important; }
html.dark .form-deadline.urgent { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .empty-state { color: var(--text-muted) !important; }

/* ── TEACHERS (early) ── */
html.dark .search-box { background: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark .search-box input { color: var(--text-primary) !important; }
html.dark .empty-state { color: var(--text-muted) !important; }
html.dark .empty-state i { color: var(--text-light) !important; }

/* ── UPLOAD SUBMISSION ── */
html.dark .student-card { background: var(--bg-hero) !important; }
html.dark .student-info .sname { color: var(--text-on-dark) !important; }
html.dark .student-info .ssid { color: var(--text-on-dark-muted) !important; }
html.dark .form-info-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .form-info-card h2 { color: var(--text-primary) !important; }
html.dark .form-info-card .desc { color: var(--text-muted) !important; }
html.dark .meta-badge { border-color: var(--border-default) !important; }
html.dark .meta-badge.deadline { background: var(--amber-bg) !important; color: var(--amber) !important; }
html.dark .meta-badge.files { background: var(--icon-purple-bg) !important; color: var(--purple) !important; }
html.dark .upload-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .upload-zone { border-color: var(--border-default) !important; background: var(--bg-input) !important; }
html.dark .upload-zone:hover { border-color: var(--accent) !important; background: var(--icon-blue-bg) !important; }
html.dark .upload-zone p { color: var(--text-muted) !important; }
html.dark .upload-zone .hint { color: var(--text-light) !important; }
html.dark .btn-upload { background: var(--gradient-success) !important; }
html.dark .progress-bar { background: var(--border-default) !important; }
html.dark .upload-instructions { background: var(--icon-blue-bg) !important; border-color: var(--border-default) !important; }
html.dark .upload-instructions .inst-title { color: var(--accent) !important; }
html.dark .upload-instructions li { color: var(--text-secondary) !important; }
html.dark .upload-instructions .inst-formats { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .header .sub { color: var(--text-muted) !important; }
html.dark .preview-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .preview-card h3 { color: var(--text-primary) !important; }
html.dark .preview-card .sub { color: var(--text-muted) !important; }
html.dark .preview-img, html.dark .preview-pdf, html.dark .pdf-viewer, html.dark .preview-file { border-color: var(--border-default) !important; background: var(--bg-input) !important; }
html.dark .file-name { color: var(--accent) !important; }
html.dark .file-icon.doc { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .file-icon.xls { background: var(--icon-green-bg) !important; color: var(--green) !important; }
html.dark .file-icon.pdf { background: var(--icon-red-bg) !important; color: var(--red) !important; }
html.dark .file-icon.ppt { background: var(--icon-orange-bg) !important; color: var(--orange) !important; }
html.dark .file-icon.img { background: var(--icon-purple-light-bg) !important; color: var(--purple) !important; }
html.dark .btn-dashboard { background: var(--gradient-primary) !important; }
html.dark .btn-download { background: var(--icon-green-bg) !important; color: var(--green) !important; }
html.dark .deadline-passed { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .deadline-passed h3 { color: var(--text-primary) !important; }
html.dark .deadline-passed p { color: var(--text-muted) !important; }
html.dark .deadline-passed i { color: var(--amber) !important; }
html.dark .upload-zone i { color: var(--text-muted) !important; }
html.dark .preview-file { background: var(--bg-input) !important; }
html.dark .preview-file .file-detail .fname { color: var(--text-primary) !important; }
html.dark .preview-file .file-detail .fmeta { color: var(--text-muted) !important; }
html.dark .preview-card .success-icon { box-shadow: none !important; }
html.dark .msg-success { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green-border) !important; }
html.dark .msg-error { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-border) !important; }
html.dark .msg-warning { background: var(--amber-bg) !important; color: var(--amber) !important; border-color: var(--amber-border) !important; }
html.dark .meta-badge.deadline.urgent { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .progress-text { color: var(--green) !important; }

/* ── PROFILE VIEW ── */
html.dark .profile-hero { background: var(--bg-hero) !important; }
html.dark .profile-hero .hero-name { color: #fff !important; }
html.dark .profile-hero .hero-sid { color: rgba(255,255,255,0.6) !important; }
html.dark .profile-hero .hero-role.admin { background: rgba(251,191,36,0.2) !important; color: var(--amber) !important; border-color: rgba(251,191,36,0.3) !important; }
html.dark .profile-hero .hero-role.student { background: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.15) !important; }
html.dark .info-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .info-row { border-bottom-color: var(--border-default) !important; }
html.dark .info-label { color: var(--text-muted) !important; }
html.dark .info-value { color: var(--text-primary) !important; }
html.dark .info-icon.blue { background: var(--icon-blue-bg) !important; }
html.dark .info-icon.red { background: var(--icon-red-bg) !important; }
html.dark .info-icon.green { background: var(--icon-green-bg) !important; }
html.dark .info-icon.amber { background: var(--icon-amber-bg) !important; }
html.dark .info-icon.purple { background: var(--icon-purple-bg) !important; }
html.dark .info-icon.teal { background: var(--icon-teal-bg) !important; }
html.dark .action-btn.whatsapp { background: var(--whatsapp) !important; }
html.dark .action-btn.call { background: var(--accent) !important; }
html.dark .action-btn.email { background: transparent !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .back-link { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .back-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .lightbox-close { color: #fff !important; }

/* ── GENERIC FORMS ── */
html.dark input[type="text"], html.dark input[type="date"], html.dark input[type="email"],
html.dark input[type="password"], html.dark input[type="number"], html.dark input[type="search"],
html.dark input[type="tel"], html.dark input[type="url"],
html.dark textarea, html.dark select {
  background: var(--bg-input) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
html.dark input:focus, html.dark textarea:focus, html.dark select:focus {
  border-color: var(--border-focus) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
html.dark option { background: var(--bg-card) !important; color: var(--text-primary) !important; }
html.dark label { color: var(--text-muted) !important; }
html.dark ::placeholder { color: var(--text-light) !important; }

/* ── GENERIC TABLE ── */
html.dark table { border-color: var(--border-default) !important; }
html.dark th { background: var(--bg-input) !important; color: var(--text-muted) !important; border-color: var(--border-default) !important; }
html.dark td { border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark tr { border-bottom-color: var(--border-default) !important; }
html.dark tbody tr:nth-child(even) { background: var(--table-stripe) !important; }
html.dark tbody tr:hover { background: var(--table-hover) !important; }

/* ── FLASH MESSAGES ── */
html.dark .flash.success { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green-border) !important; }
html.dark .flash.error { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-border) !important; }

/* ── SCROLLBAR ── */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg-body) !important; }
html.dark ::-webkit-scrollbar-thumb { background: var(--border-default) !important; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--border-strong) !important; }

/* ── TEXT SELECTION ── */
html.dark ::selection { background: rgba(59,130,246,0.3) !important; color: #fff !important; }

/* ── ADMIN DASHBOARD ── */
html.dark .dash-header { background: var(--bg-hero) !important; }
html.dark .dash-header .info h2 { color: #fff !important; }
html.dark .dash-header .info p { color: rgba(255,255,255,0.7) !important; }
html.dark .dash-header .back-btn { background: rgba(255,255,255,0.12) !important; color: #fff !important; border-color: rgba(255,255,255,0.18) !important; }
html.dark .dash-header .back-btn:hover { background: rgba(255,255,255,0.2) !important; }
html.dark .stat-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .stat-card:hover { box-shadow: var(--shadow-md) !important; }
html.dark .stat-num { color: var(--text-primary) !important; }
html.dark .stat-label { color: var(--text-muted) !important; }
html.dark .dash-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .dash-card:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-md) !important; }
html.dark .dash-card .card-label { color: var(--text-primary) !important; }
html.dark .dash-card .card-sub { color: var(--text-muted) !important; }
html.dark .dash-card.danger-card { border-color: var(--red-border) !important; }
html.dark .dash-card.danger-card:hover { background: var(--red-bg) !important; border-color: var(--red) !important; }
html.dark .dash-card.danger-card .card-label { color: var(--red) !important; }
html.dark .ci-blue { background: var(--icon-blue-bg) !important; }
html.dark .ci-amber { background: var(--icon-amber-bg) !important; }
html.dark .ci-green { background: var(--icon-green-bg) !important; }
html.dark .ci-red { background: var(--icon-red-bg) !important; }
html.dark .ci-purple { background: var(--icon-purple-bg) !important; }
html.dark .ci-teal { background: var(--icon-teal-bg) !important; }
html.dark .ci-pink { background: var(--icon-rose-bg) !important; }
html.dark .ci-indigo { background: var(--icon-indigo-bg) !important; }
html.dark .ci-orange { background: var(--icon-orange-bg) !important; }
html.dark .ci-cyan { background: var(--icon-cyan-bg) !important; }
html.dark .ci-slate { background: rgba(100,116,139,0.15) !important; }
html.dark .ci-rose { background: var(--icon-rose-bg) !important; }
html.dark .sec-title { color: var(--text-muted) !important; }
html.dark .toggle-label .t-title { color: var(--text-primary) !important; }
html.dark .toggle-label .t-sub { color: var(--text-muted) !important; }
html.dark .slider { background: #475569 !important; }
html.dark .slider::before { background: var(--text-muted) !important; }
html.dark .switch input:checked + .slider { background: var(--green) !important; }

/* ══════════════════════════════════════
   ADMIN PANEL — Full Dark Mode Overrides
   ══════════════════════════════════════ */

/* ── Admin body + common ── */
html.dark .wrap { color: var(--text-primary) !important; }
html.dark .main { color: var(--text-primary) !important; }

/* ── Admin Header (shared across all admin pages) ── */
html.dark .dash-header { background: var(--bg-hero) !important; }
html.dark .dash-header .info h2 { color: #fff !important; }
html.dark .dash-header .info p { color: rgba(255,255,255,0.7) !important; }
html.dark .dash-header .back-btn { background: rgba(255,255,255,0.12) !important; color: #fff !important; border-color: rgba(255,255,255,0.18) !important; }
html.dark .dash-header .back-btn:hover { background: rgba(255,255,255,0.2) !important; }

/* ── Section Titles ── */
html.dark .sec-title { color: var(--text-muted) !important; }

/* ── Cards (generic white bg cards) ── */
html.dark .user-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .user-card:hover { box-shadow: var(--shadow-md) !important; }
html.dark .user-card.suspended { background: var(--red-bg) !important; border-color: var(--red-border) !important; }
html.dark .user-card .card-top { border-color: var(--border-default) !important; }
html.dark .user-card .card-photo { border-color: var(--border-default) !important; }
html.dark .user-card:hover .card-photo { border-color: var(--accent) !important; }
html.dark .user-avatar { border-color: var(--border-default) !important; }
html.dark .user-name { color: var(--text-primary) !important; }
html.dark .user-id { color: var(--text-muted) !important; }
html.dark .card-name { color: var(--text-primary) !important; }
html.dark .card-sid { color: var(--accent) !important; background: var(--icon-blue-bg) !important; }
html.dark .card-detail { color: var(--text-muted) !important; }
html.dark .card-detail i { color: var(--text-light) !important; }
html.dark .card-actions { border-top-color: var(--border-default) !important; }
html.dark .badge-suspended { background: var(--red) !important; color: #fff !important; }
html.dark .badge-active { background: var(--green) !important; color: #fff !important; }

/* ── Form Cards (notices, teachers, create_submission) ── */
html.dark .form-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .form-card h3 { color: var(--text-primary) !important; }
html.dark .add-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .add-card h3 { color: var(--text-primary) !important; }

/* ── Form Groups (labels, inputs, textareas, selects) ── */
html.dark .form-group label { color: var(--text-muted) !important; }
html.dark .form-group input,
html.dark .form-group textarea,
html.dark .form-group select,
html.dark .form-grid input {
  background: var(--bg-input) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}
html.dark .form-group input:focus,
html.dark .form-group textarea:focus,
html.dark .form-group select:focus,
html.dark .form-grid input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* ── Filter Bar (users page) ── */
html.dark .search-box { background: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark .search-box input { background: transparent !important; color: var(--text-primary) !important; border-color: transparent !important; }
html.dark .search-box i { color: var(--text-muted) !important; }
html.dark .filter-select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .filter-bar { color: var(--text-primary) !important; }

/* ── Export Buttons ── */
html.dark .export-btn.excel { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green-border) !important; }
html.dark .export-btn.excel:hover { background: var(--green-bg) !important; }
html.dark .export-btn.pdf { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-border) !important; }
html.dark .export-btn.pdf:hover { background: var(--red-bg) !important; }
html.dark .result-count { color: var(--text-muted) !important; }

/* ── Action Buttons (shared) ── */
html.dark .act-btn { background: var(--bg-input) !important; color: var(--text-primary) !important; }
html.dark .act-btn.edit { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .act-btn.edit:hover { background: var(--accent-glow) !important; }
html.dark .act-btn.delete { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .act-btn.delete:hover { background: var(--red-bg) !important; }
html.dark .act-btn.suspend { background: var(--amber-bg) !important; color: var(--amber-dark) !important; }
html.dark .act-btn.suspend:hover { background: var(--amber-bg) !important; }
html.dark .act-btn.unsuspend { background: var(--green-bg) !important; color: var(--green) !important; }
html.dark .act-btn.unsuspend:hover { background: var(--green-bg) !important; }
html.dark .btn-view { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .btn-view:hover { background: var(--accent-glow) !important; }

/* ── Courses Page ── */
html.dark .back-link { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .back-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .filter-tab { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .filter-tab:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .filter-tab.active { background: var(--gradient-primary) !important; color: #fff !important; border-color: transparent !important; }
html.dark .btn-action { color: var(--text-primary) !important; }
html.dark .btn-reorder { background: var(--bg-input) !important; color: var(--text-secondary) !important; border-color: var(--border-default) !important; }
html.dark .btn-reorder:hover { background: var(--bg-card-hover) !important; }
html.dark .btn-reorder.active { background: var(--gradient-amber) !important; color: #fff !important; border-color: transparent !important; }
html.dark .btn-save-order { background: var(--gradient-success) !important; }
html.dark .table-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .table-card th { background: var(--bg-input) !important; color: var(--text-muted) !important; border-bottom-color: var(--border-default) !important; }
html.dark .table-card td { color: var(--text-primary) !important; border-bottom-color: var(--border-default) !important; }
html.dark .table-card tr:hover td { background: var(--bg-card-hover) !important; }
html.dark .table-card tr.dragging { background: var(--accent-glow) !important; }
html.dark .code-badge { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .credit-badge { background: var(--icon-green-bg) !important; color: var(--green) !important; }
html.dark .level-badge { background: var(--icon-purple-bg) !important; color: var(--purple) !important; }
html.dark .sem-badge { background: var(--icon-amber-bg) !important; color: var(--amber-dark) !important; }
html.dark .btn-icon { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .btn-edit { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .btn-edit:hover { background: var(--accent-glow) !important; }
html.dark .btn-delete { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .btn-delete:hover { background: var(--red-bg) !important; }
html.dark .btn-up, html.dark .btn-down { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .btn-up:hover, html.dark .btn-down:hover { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .drag-handle { color: var(--text-light) !important; }

/* ── Notices Page ── */
html.dark .notice-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; border-left-color: var(--accent) !important; }
html.dark .notice-title { color: var(--text-primary) !important; }
html.dark .notice-content { color: var(--text-secondary) !important; }
html.dark .notice-attach { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .notice-attach:hover { background: var(--accent-glow) !important; }
html.dark .notice-grid .notice-footer { background: var(--bg-input) !important; border-top-color: var(--border-default) !important; }
html.dark .notice-meta { color: var(--text-muted) !important; }
html.dark .cancel-link { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .cancel-link:hover { background: var(--bg-card-hover) !important; }
html.dark .add-btn { background: var(--gradient-success) !important; }
html.dark .edit-overlay { background: var(--bg-overlay) !important; }
html.dark .edit-box { background: var(--bg-card) !important; }
html.dark .edit-close { background: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; }
html.dark .edit-close:hover { background: rgba(255,255,255,0.15) !important; }
html.dark .edit-title { color: var(--text-primary) !important; }
html.dark .edit-title i { color: var(--accent) !important; }
html.dark .form-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .form-card h3 { color: var(--text-primary) !important; }
html.dark .form-group label { color: var(--text-muted) !important; }
html.dark .form-group input, html.dark .form-group textarea {
  background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important;
}
html.dark .form-group input:focus, html.dark .form-group textarea:focus {
  border-color: var(--border-focus) !important; background: var(--bg-card) !important;
}

/* ── Teachers Page ── */
html.dark .teacher-card { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; }
html.dark .teacher-card:hover { box-shadow: var(--shadow-md) !important; }
html.dark .teacher-photo { background: var(--bg-input) !important; border-bottom: 1px solid var(--border-default) !important; }
html.dark .teacher-info { background: var(--bg-card) !important; }
html.dark .teacher-name { color: var(--text-primary) !important; }
html.dark .teacher-course { color: var(--accent) !important; background: transparent !important; }
html.dark .teacher-code { color: var(--text-muted) !important; }
html.dark .teacher-phone { color: var(--text-muted) !important; }
html.dark .teacher-phone i { color: var(--text-light) !important; }
html.dark .teacher-actions { border-top-color: var(--border-default) !important; background: var(--bg-card) !important; }
html.dark .act-btn.edit { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .act-btn.edit:hover { background: var(--accent-glow) !important; }
html.dark .act-btn.delete { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .act-btn.delete:hover { background: var(--red-bg) !important; }
html.dark .add-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .add-card h3 { color: var(--text-primary) !important; }
html.dark .add-card h3 i { color: var(--text-muted) !important; }
html.dark .form-grid input { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .form-grid input:focus { border-color: var(--border-focus) !important; }
html.dark .empty-state { color: var(--text-muted) !important; }
html.dark .empty-state i { color: var(--text-light) !important; }
html.dark .modal-btn.cancel { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .modal-btn.cancel:hover { background: var(--bg-card-hover) !important; }
html.dark .photo-preview { border-color: var(--border-default) !important; }
html.dark .confirm-icon.danger { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .confirm-msg strong { color: var(--text-primary) !important; }
html.dark .confirm-btn.no { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .confirm-btn.no:hover { background: var(--bg-card-hover) !important; }
html.dark .confirm-btn.yes-danger { background: linear-gradient(135deg, var(--red-light), var(--red)) !important; }
html.dark .add-btn { background: var(--gradient-success) !important; }

/* ── Approve Users — Detail Modal ── */
html.dark .detail-overlay { background: var(--bg-overlay) !important; }
html.dark .detail-box { background: var(--bg-card) !important; }
html.dark .detail-close { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .detail-close:hover { background: var(--bg-card-hover) !important; }
html.dark .detail-top { background: var(--bg-hero) !important; }
html.dark .detail-top h3 { color: #fff !important; }
html.dark .detail-top p { color: rgba(255,255,255,0.7) !important; }
html.dark .detail-body { background: var(--bg-card) !important; }
html.dark .detail-row { border-bottom-color: var(--border-default) !important; }
html.dark .detail-label { color: var(--text-muted) !important; }
html.dark .detail-value { color: var(--text-primary) !important; }
html.dark .detail-actions { border-top-color: var(--border-default) !important; }
html.dark .detail-btn.approve { background: var(--gradient-success) !important; }
html.dark .detail-btn.reject { background: linear-gradient(135deg, var(--red-light), var(--red)) !important; }

/* ── Admin Modals (edit, confirm) ── */
html.dark .modal-overlay { background: var(--bg-overlay) !important; }
html.dark .modal-box { background: var(--bg-card) !important; }
html.dark .modal-head { background: var(--bg-hero) !important; }
html.dark .modal-head h3 { color: #fff !important; }
html.dark .modal-close { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
html.dark .modal-close:hover { background: rgba(255,255,255,0.3) !important; }
html.dark .modal-body { background: var(--bg-card) !important; }
html.dark .modal-foot { border-top-color: var(--border-default) !important; }
html.dark .modal-btn.save { background: var(--gradient-success) !important; }
html.dark .modal-btn.cancel { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .modal-btn.cancel:hover { background: var(--bg-card-hover) !important; }
html.dark .photo-preview { border-color: var(--border-default) !important; }

/* ── Confirm Modal (all admin pages) ── */
html.dark .confirm-overlay { background: var(--bg-overlay) !important; }
html.dark .confirm-box { background: var(--bg-card) !important; }
html.dark .confirm-title { color: var(--text-primary) !important; }
html.dark .confirm-msg { color: var(--text-muted) !important; }
html.dark .confirm-msg strong { color: var(--text-primary) !important; }
html.dark .confirm-icon.warn { background: var(--amber-bg) !important; color: var(--amber-dark) !important; }
html.dark .confirm-icon.danger { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .confirm-icon.success { background: var(--green-bg) !important; color: var(--green) !important; }
html.dark .confirm-btn.no { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .confirm-btn.no:hover { background: var(--bg-card-hover) !important; }
html.dark .confirm-btn.yes-danger { background: linear-gradient(135deg, var(--red-light), var(--red)) !important; }
html.dark .confirm-btn.yes-warn { background: var(--gradient-amber) !important; }
html.dark .confirm-btn.yes-success { background: var(--gradient-success) !important; }

/* ── Toast Messages ── */
html.dark .toast-msg { color: #fff !important; }
html.dark .toast-msg.success { background: var(--green) !important; }
html.dark .toast-msg.error { background: var(--red) !important; }

/* ── Empty State ── */
html.dark .empty-state { color: var(--text-muted) !important; }
html.dark .empty-state i { color: var(--text-light) !important; }
html.dark .empty-msg { color: var(--text-muted) !important; }

/* ── Routine Page (Admin) ── */
html.dark .day-section { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .day-head { background: var(--bg-input) !important; border-bottom-color: var(--border-default) !important; }
html.dark .day-title { color: var(--text-primary) !important; }
html.dark .day-dot { background: var(--accent) !important; }
html.dark .day-count { color: var(--text-muted) !important; }
html.dark .add-row-btn { background: var(--icon-blue-bg) !important; color: var(--accent) !important; border-color: var(--border-default) !important; }
html.dark .add-row-btn:hover { background: var(--accent-glow) !important; }
html.dark .routine-table { border-color: var(--border-default) !important; }
html.dark .routine-table th { background: var(--bg-input) !important; color: var(--text-muted) !important; border-color: var(--border-default) !important; }
html.dark .routine-table td { border-color: var(--border-default) !important; }
html.dark .routine-table tr { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .routine-table input { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .routine-table input::placeholder { color: var(--text-light) !important; }
html.dark .routine-table input:focus { border-color: var(--border-focus) !important; background: var(--bg-card) !important; }
html.dark .remove-btn { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .remove-btn:hover { background: var(--red-bg) !important; }
html.dark .save-btn { background: var(--gradient-success) !important; }
html.dark .empty-day { color: var(--text-muted) !important; }

/* ── Routine Page (User) ── */

/* ── Activity Logs ── */
html.dark .retention-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .retention-card .ret-label { color: var(--text-primary) !important; }
html.dark .retention-card input[type=number] { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .retention-card input[type=number]:focus { border-color: var(--border-focus) !important; }
html.dark .retention-card .ret-btn { background: var(--gradient-primary) !important; }
html.dark .retention-card .ret-info { color: var(--text-muted) !important; }
html.dark .log-list { background: transparent !important; }
html.dark .log-item { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .log-item:hover { box-shadow: var(--shadow-md) !important; }
html.dark .log-icon { background: var(--bg-input) !important; }
html.dark .log-body { color: var(--text-primary) !important; }
html.dark .log-desc { color: var(--text-primary) !important; }
html.dark .log-meta { color: var(--text-muted) !important; }
html.dark .log-details { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .filter-select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .filter-select:focus { border-color: var(--border-focus) !important; }
html.dark .pagination a { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .pagination a:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .pagination .active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
html.dark .pagination .disabled { background: var(--bg-input) !important; color: var(--text-light) !important; border-color: var(--border-default) !important; }
html.dark .stats-row { color: var(--text-primary) !important; }
html.dark .stat-pill { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }

/* ── Results Page ── */
html.dark .top-bar { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .top-bar h1 { background: linear-gradient(135deg, var(--accent), var(--purple)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
html.dark .back-link { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .back-link:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .filter-bar a { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .filter-bar a:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .filter-bar a.active { background: var(--gradient-primary) !important; color: #fff !important; border-color: transparent !important; }
html.dark .stat-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .stat-card .label { color: var(--text-muted) !important; }
html.dark .result-list { background: transparent !important; }
html.dark .result-item { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .result-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; border-color: var(--accent) !important; background: var(--bg-card-hover) !important; }
html.dark .ri-avatar { border-color: var(--border-default) !important; }
html.dark .ri-name { color: var(--text-primary) !important; }
html.dark .ri-id { color: var(--text-muted) !important; }
html.dark .ri-gpa { background: linear-gradient(135deg, var(--accent), var(--purple)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
html.dark .ri-meta { color: var(--text-muted) !important; }
html.dark .ri-level { background: var(--icon-purple-bg) !important; color: var(--purple) !important; }
html.dark .ri-sem { background: var(--green-bg) !important; color: var(--green) !important; }
html.dark .empty-msg { color: var(--text-muted) !important; }
html.dark .empty-msg i { color: var(--text-light) !important; }
html.dark .detail-modal { background: var(--bg-overlay) !important; }
html.dark .detail-card { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; }
html.dark .detail-close { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .detail-close:hover { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; }
html.dark .detail-header { background: transparent !important; }
html.dark .detail-header .d-name { color: var(--text-primary) !important; }
html.dark .detail-header .d-id { color: var(--text-muted) !important; }
html.dark .detail-header .d-gpa { background: linear-gradient(135deg, var(--accent), var(--purple)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
html.dark .grade-table { border-color: var(--border-default) !important; }
html.dark .grade-table th { background: var(--bg-input) !important; color: var(--text-muted) !important; border-color: var(--border-default) !important; }
html.dark .grade-table td { border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .code-badge { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .grade-badge { border-color: var(--border-default) !important; }
html.dark .g-a-plus, html.dark .g-a, html.dark .g-a-minus { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green-border) !important; }
html.dark .g-b-plus, html.dark .g-b, html.dark .g-b-minus { background: var(--icon-blue-bg) !important; color: var(--accent) !important; border-color: rgba(59,130,246,0.3) !important; }
html.dark .g-c-plus, html.dark .g-c { background: var(--amber-bg) !important; color: var(--amber-dark) !important; border-color: var(--amber-border) !important; }
html.dark .g-d { background: var(--orange-bg) !important; color: var(--orange) !important; border-color: rgba(249,115,22,0.3) !important; }
html.dark .g-f { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-border) !important; }

/* ── View Submissions Page ── */
html.dark .top-actions { color: var(--text-primary) !important; }
html.dark .btn-create { background: var(--gradient-success) !important; }
html.dark .form-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .form-card:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-md) !important; }
html.dark .form-top { border-bottom-color: var(--border-default) !important; }
html.dark .form-count { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .form-meta { color: var(--text-muted) !important; }
html.dark .meta-tag { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .meta-tag.deadline { background: var(--amber-bg) !important; color: var(--amber-dark) !important; }
html.dark .meta-tag.created { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .form-actions { border-top-color: var(--border-default) !important; }
html.dark .btn-sm { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .btn-sm:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
html.dark .btn-edit { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .btn-edit:hover { background: var(--accent-glow) !important; }
html.dark .btn-files { background: var(--green-bg) !important; color: var(--green) !important; }
html.dark .btn-files:hover { background: var(--green-bg) !important; }
html.dark .btn-delete { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .btn-delete:hover { background: var(--red-bg) !important; }
html.dark .form-hint { color: var(--text-muted) !important; }
html.dark .btn-submit { background: var(--gradient-primary) !important; }
html.dark .btn-submit.green { background: var(--gradient-success) !important; }
html.dark .form-title { color: var(--text-primary) !important; }
html.dark .form-desc { color: var(--text-muted) !important; }
html.dark .modal-overlay { background: var(--bg-overlay) !important; }
html.dark .modal-box { background: var(--bg-card) !important; color: var(--text-primary) !important; }
html.dark .modal-title { color: var(--text-primary) !important; }
html.dark .modal-title i { color: var(--accent) !important; }
html.dark .modal-close { background: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; }
html.dark .modal-close:hover { background: rgba(255,255,255,0.15) !important; }
html.dark .form-group label { color: var(--text-muted) !important; }
html.dark .form-group input, html.dark .form-group textarea {
  background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important;
}
html.dark .form-group input:focus, html.dark .form-group textarea:focus {
  border-color: var(--border-focus) !important; background: var(--bg-card) !important;
}
/* Warning/Confirm modals with inline styles */
html.dark .warn-icon { background: var(--amber-bg) !important; color: var(--amber-dark) !important; }
html.dark .warn-title { color: var(--text-primary) !important; }
html.dark .warn-msg { color: var(--text-muted) !important; }
html.dark .warn-msg strong { color: var(--text-primary) !important; }
html.dark .delete-icon { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .delete-title { color: var(--text-primary) !important; }
html.dark .delete-msg { color: var(--text-muted) !important; }
html.dark .delete-msg strong { color: var(--text-primary) !important; }
html.dark .btn-cancel { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .btn-cancel:hover { background: var(--bg-card-hover) !important; }

/* ── Create/Edit Submission Pages ── */
html.dark .back-wrap { color: var(--text-primary) !important; }
html.dark .logo-header { color: var(--text-primary) !important; }
html.dark .header h1 { color: var(--text-primary) !important; }
html.dark .header .sub { color: var(--text-muted) !important; }
html.dark .msg { border-color: var(--border-default) !important; }
html.dark .msg-success { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green-border) !important; }
html.dark .msg-error { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-border) !important; }

/* ── Headline Page ── */
html.dark .current-box { background: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark .current-box .label { color: var(--text-muted) !important; }
html.dark .current-box .text { color: var(--text-primary) !important; }
html.dark .preview-box { background: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark .preview-box .label { color: var(--text-muted) !important; }
html.dark .preview-box .preview-text { color: var(--text-primary) !important; }

/* ── Manage CR Page ── */
html.dark .admin-list { background: transparent !important; }
html.dark .admin-card { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; border-left: 4px solid var(--amber) !important; }
html.dark .admin-card:hover { box-shadow: var(--shadow-md) !important; }
html.dark .admin-photo { border-color: var(--amber-bg) !important; }
html.dark .admin-name { color: var(--text-primary) !important; }
html.dark .admin-sid { color: var(--amber-dark) !important; }
html.dark .admin-meta { color: var(--text-muted) !important; }
html.dark .admin-meta i { color: var(--text-light) !important; }
html.dark .admin-badge { background: var(--amber-bg) !important; color: var(--amber-dark) !important; border-color: var(--amber-border) !important; }
html.dark .remove-btn { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .remove-btn:hover { background: var(--red-bg) !important; }
html.dark .no-admin { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .no-admin i { color: var(--text-light) !important; }
html.dark .assign-box { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .assign-box h3 { color: var(--text-primary) !important; }
html.dark .assign-box h3 i { color: var(--text-muted) !important; }
html.dark .search-box input { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .search-box input:focus { border-color: var(--border-focus) !important; }
html.dark .search-box i { color: var(--text-muted) !important; }
html.dark .user-list { background: transparent !important; }
html.dark .user-item { background: var(--bg-input) !important; border: 2px solid var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .user-item:hover { border-color: var(--accent) !important; background: var(--bg-card-hover) !important; }
html.dark .user-item.selected { border-color: var(--accent) !important; background: var(--icon-blue-bg) !important; }
html.dark .user-item .u-name { color: var(--text-primary) !important; }
html.dark .user-item .u-sid { color: var(--text-muted) !important; }
html.dark .pass-section { background: transparent !important; border-top-color: var(--border-default) !important; }
html.dark .pass-section label { color: var(--text-muted) !important; }
html.dark .pass-inputs input { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .pass-inputs input:focus { border-color: var(--border-focus) !important; background: var(--bg-card) !important; }
html.dark .pass-match { color: var(--text-muted) !important; }
html.dark .pass-match.ok { color: var(--green) !important; }
html.dark .pass-match.no { color: var(--red) !important; }
html.dark .assign-btn { background: var(--gradient-success) !important; }
html.dark .empty-user-list { color: var(--text-muted) !important; }
html.dark .btn-submit { background: var(--gradient-primary) !important; }

/* ── View Submission Files Page ── */
html.dark .search-bar { background: var(--bg-input) !important; border-color: var(--border-default) !important; }
html.dark .search-bar input { background: transparent !important; color: var(--text-primary) !important; border-color: transparent !important; }
html.dark .search-bar input::placeholder { color: var(--text-light) !important; }
html.dark .stats { color: var(--text-muted) !important; }
html.dark .stat-pill { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .file-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .file-card:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-md) !important; }
html.dark .file-card.selected { border-color: var(--accent) !important; background: var(--icon-blue-bg) !important; }
html.dark .file-check { border-color: var(--border-default) !important; }
html.dark .file-avatar { border-color: var(--border-default) !important; }
html.dark .file-name { color: var(--text-primary) !important; }
html.dark .file-meta { color: var(--text-muted) !important; }
html.dark .file-actions { border-top-color: var(--border-default) !important; }
html.dark .btn-view { background: var(--icon-blue-bg) !important; color: var(--accent) !important; }
html.dark .btn-view:hover { background: var(--accent-glow) !important; }
html.dark .btn-download { background: var(--green-bg) !important; color: var(--green) !important; }
html.dark .btn-download:hover { background: var(--green-bg) !important; }
html.dark .btn-delete { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .btn-delete:hover { background: var(--red-bg) !important; }
html.dark .btn-batch { background: var(--gradient-success) !important; color: #fff !important; }
html.dark .btn-batch-delete { background: linear-gradient(135deg, var(--red-light), var(--red)) !important; color: #fff !important; }
html.dark .batch-wrap { border-top-color: var(--border-default) !important; }
html.dark .select-all-wrap { color: var(--text-muted) !important; border-bottom-color: var(--border-default) !important; }
html.dark .select-all-wrap label { color: var(--text-muted) !important; }
html.dark .batch-count { color: var(--accent) !important; }
html.dark .modal-overlay { background: var(--bg-overlay) !important; }
html.dark .modal-box { background: var(--bg-card) !important; color: var(--text-primary) !important; }
html.dark .modal-close { background: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; }
html.dark .modal-close:hover { background: rgba(255,255,255,0.15) !important; }
html.dark .confirm-icon { border-color: var(--border-default) !important; }
html.dark .confirm-icon.danger { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .confirm-title { color: var(--text-primary) !important; }
html.dark .confirm-msg { color: var(--text-muted) !important; }
html.dark .confirm-msg strong { color: var(--text-primary) !important; }
html.dark .confirm-actions { border-top-color: var(--border-default) !important; }
html.dark .confirm-btn { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .confirm-btn:hover { background: var(--bg-card-hover) !important; }
html.dark .confirm-btn.no { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .confirm-btn.no:hover { background: var(--bg-card-hover) !important; }
html.dark .confirm-btn.yes-danger { background: linear-gradient(135deg, var(--red-light), var(--red)) !important; }
html.dark .empty-state { color: var(--text-muted) !important; }
html.dark .empty-state i { color: var(--text-light) !important; }

/* ── Admin Password Modal ── */
html.dark [style*="position:fixed"][style*="background:rgba(0,0,0"] { background: rgba(0,0,0,0.7) !important; }
html.dark [style*="background:#fff"][style*="border-radius:16px"],
html.dark [style*="background: #fff"][style*="border-radius: 16px"] {
  background: var(--bg-card) !important; color: var(--text-primary) !important;
}
html.dark [style*="background:#fff"][style*="border-radius:16px"] h5,
html.dark [style*="background: #fff"][style*="border-radius: 16px"] h5 {
  color: var(--text-primary) !important;
}
html.dark [style*="background:#fff"][style*="border-radius:16px"] label,
html.dark [style*="background: #fff"][style*="border-radius: 16px"] label {
  color: var(--text-muted) !important;
}
html.dark [style*="background:#fff"][style*="border-radius:16px"] input,
html.dark [style*="background: #fff"][style*="border-radius: 16px"] input {
  background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important;
}

/* ── Inline gradient button overrides ── */
html.dark [style*="background:linear-gradient(135deg,#f1f5f9,#e2e8f0)"],
html.dark [style*="background: linear-gradient(135deg, #f1f5f9, #e2e8f0)"] {
  background: var(--bg-input) !important;
  background-color: var(--bg-input) !important;
  color: var(--text-muted) !important;
}

/* ── TOAST / FIXED NOTIFICATIONS ── */
html.dark [style*="position:fixed"][style*="background:#22c55e"] { background: var(--green) !important; }
html.dark [style*="position:fixed"][style*="background:#ef4444"] { background: var(--red) !important; }
html.dark [style*="position:fixed"][style*="background:#0d6efd"] { background: var(--accent) !important; }

/* ── BOOTSTRAP OVERRIDES ── */
html.dark .modal-content { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; }
html.dark .modal-header { border-bottom-color: var(--border-default) !important; }
html.dark .modal-header .btn-close { filter: invert(1); }
html.dark .modal-footer { border-top-color: var(--border-default) !important; }
html.dark .modal-body { color: var(--text-primary) !important; }
html.dark .modal-body label { color: var(--text-muted) !important; }
html.dark .modal-body input, html.dark .modal-body select, html.dark .modal-body textarea {
  background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important;
}
html.dark .modal-body input:focus, html.dark .modal-body select:focus, html.dark .modal-body textarea:focus {
  border-color: var(--border-focus) !important; background: var(--bg-card) !important; color: var(--text-primary) !important;
}
html.dark .alert-success { background: var(--green-bg) !important; color: var(--green) !important; border-color: var(--green-border) !important; }
html.dark .alert-danger { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-border) !important; }
html.dark .alert-warning { background: var(--amber-bg) !important; color: var(--amber) !important; border-color: var(--amber-border) !important; }
html.dark .alert-info { background: var(--cyan-bg) !important; color: var(--cyan) !important; border-color: rgba(6,182,212,0.3) !important; }
html.dark .table { color: var(--text-primary) !important; }
html.dark .table td, html.dark .table th { border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .table thead { background: var(--bg-input) !important; }
html.dark .table thead th { color: var(--text-muted) !important; border-bottom-color: var(--border-default) !important; }
html.dark .form-control, html.dark .form-select {
  background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important;
}
html.dark .form-control:focus, html.dark .form-select:focus {
  background: var(--bg-card) !important; border-color: var(--border-focus) !important; color: var(--text-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--accent-glow) !important;
}
html.dark .form-label { color: var(--text-muted) !important; }
html.dark .form-text { color: var(--text-light) !important; }
html.dark .card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .card-header { background: var(--bg-input) !important; border-bottom-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .card-body { color: var(--text-primary) !important; }
html.dark .card-title { color: var(--text-primary) !important; }
html.dark .card-text { color: var(--text-secondary) !important; }
html.dark .btn-outline-primary { color: var(--accent) !important; border-color: var(--accent) !important; }
html.dark .btn-outline-primary:hover { background: var(--accent) !important; color: #fff !important; }
html.dark .btn-outline-danger { color: var(--red) !important; border-color: var(--red) !important; }
html.dark .btn-outline-danger:hover { background: var(--red) !important; color: #fff !important; }
html.dark .btn-outline-success { color: var(--green) !important; border-color: var(--green) !important; }
html.dark .btn-outline-success:hover { background: var(--green) !important; color: #fff !important; }
html.dark .btn-outline-secondary { color: var(--text-muted) !important; border-color: var(--border-default) !important; }
html.dark .btn-outline-secondary:hover { background: var(--border-default) !important; color: var(--text-primary) !important; }

/* ── EDIT REQUESTS ── */
html.dark .req-card { background: var(--bg-card) !important; border-color: var(--border-default) !important; }
html.dark .req-card.pending { border-left-color: var(--amber) !important; }
html.dark .req-card.approved { border-left-color: var(--green) !important; }
html.dark .req-card.rejected { border-left-color: var(--red) !important; }
html.dark .req-name { color: var(--text-primary) !important; }
html.dark .req-id { color: var(--text-muted) !important; }
html.dark .req-field { background: var(--bg-input) !important; }
html.dark .req-field .value { color: var(--text-primary) !important; }
html.dark .req-btn.reject { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--red) !important; }
html.dark .req-btn.reject:hover { background: var(--red-bg) !important; border-color: var(--red) !important; }
html.dark .reject-box { background: var(--bg-card) !important; }
html.dark .reject-title { color: var(--text-primary) !important; }
html.dark .reject-msg { color: var(--text-muted) !important; }
html.dark .reject-note { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }
html.dark .reject-note:focus { border-color: var(--red) !important; }
html.dark .reject-btn.no { background: var(--bg-input) !important; color: var(--text-muted) !important; }
html.dark .filter-tab { background: var(--bg-card) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; }
html.dark .filter-tab.active { background: var(--gradient-primary) !important; }
html.dark .req-note { background: var(--red-bg) !important; color: var(--red) !important; }
html.dark .req-status.pending { background: var(--amber-bg) !important; color: var(--amber) !important; }
html.dark .req-status.approved { background: var(--green-bg) !important; color: var(--green) !important; }
html.dark .req-status.rejected { background: var(--red-bg) !important; color: var(--red) !important; }