/* ═══════════════════════════════════════════════════════════════ darkmode.css — System-auto dark mode overrides Applied when Designed for dark navy (#0c1021) bg with blue accents ═══════════════════════════════════════════════════════════════ */ /* ── Remove unwanted focus/active outlines on icon-only buttons ── */ [data-theme="dark"] button:focus:not(:focus-visible), [data-theme="dark"] a:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Close / dismiss / icon-only buttons — no border or outline ring */ [data-theme="dark"] .toast-close, [data-theme="dark"] .notification-close, [data-theme="dark"] .alert-close, [data-theme="dark"] .modal-close, [data-theme="dark"] .btn-close, [data-theme="dark"] [class*="close"], [data-theme="dark"] [aria-label="Close"], [data-theme="dark"] [aria-label="Dismiss"] { outline: none !important; box-shadow: none !important; border: none !important; background: transparent !important; } /* ── Core palette override ───────────────────────────────────── */ [data-theme="dark"] { --bg: #0c1021; --bg2: #0f1328; --surface: #141829; --panel: #161b2e; --panel-hover: #1a2038; --text: #ffffff; --text-light: #e0e4ef; --muted: #a0a8c0; --primary: #4e7aff; --primary-dark: #3a63e0; --primary-light: rgba(78, 122, 255, .12); --secondary: #4e7aff; --accent: #4e7aff; --border: rgba(255, 255, 255, .18); --border-light: rgba(255, 255, 255, .10); --green: #34d399; --amber: #fbbf24; --red: #f87171; --shadow-sm: 0 1px 4px rgba(0, 0, 0, .3); --shadow-md: 0 2px 8px rgba(0, 0, 0, .4); --shadow-lg: 0 4px 16px rgba(0, 0, 0, .5); --shadow-xl: 0 8px 24px rgba(0, 0, 0, .5); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --line: rgba(255, 255, 255, .15); color-scheme: dark; } /* ── Body & page background ──────────────────────────────────── */ [data-theme="dark"] body { background: #0c1021; color: var(--text); } [data-theme="dark"] .page-bg { background: url('page-bg-dark.webp') center/cover no-repeat fixed !important; background-image: url('page-bg-dark.webp') !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; background-attachment: fixed !important; opacity: 0.3 !important; filter: none !important; } /* ── Links ───────────────────────────────────────────────────── */ [data-theme="dark"] a { color: inherit; } /* ═══════════════════════════════════════════════════════════════ AUTH PAGES (auth_base.html) Login, signup, verify-otp, forgot/reset password ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .auth-card { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .4) !important; } [data-theme="dark"] .auth-card h2 { color: #ffffff !important; } [data-theme="dark"] .auth-brand h1 { color: #ffffff !important; } [data-theme="dark"] .auth-brand p { color: #a0a8c0 !important; } [data-theme="dark"] .auth-footer { color: #a0a8c0 !important; } [data-theme="dark"] .auth-footer a { color: #4e7aff !important; } /* Auth form fields — ensure dark bg + white outline */ [data-theme="dark"] .auth-card .form-group label { color: #ffffff !important; } [data-theme="dark"] .auth-card .form-control, [data-theme="dark"] .auth-card input[type="text"], [data-theme="dark"] .auth-card input[type="email"], [data-theme="dark"] .auth-card input[type="password"], [data-theme="dark"] .auth-card input[type="tel"], [data-theme="dark"] .auth-card select { background: #141829 !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .auth-card .form-control:focus, [data-theme="dark"] .auth-card input:focus { border-color: #4e7aff !important; box-shadow: 0 0 0 3px rgba(78, 122, 255, .2) !important; } [data-theme="dark"] .auth-card .form-control::placeholder, [data-theme="dark"] .auth-card input::placeholder { color: #8090b0 !important; } /* Auth submit button */ [data-theme="dark"] .auth-card .btn-submit { background: #4e7aff !important; color: #ffffff !important; } [data-theme="dark"] .auth-card .btn-submit:hover { background: #3a63e0 !important; } /* Flash alerts on auth pages */ [data-theme="dark"] .alert-success { background: rgba(52, 211, 153, .08) !important; color: #6ee7b7 !important; border-color: rgba(52, 211, 153, .18) !important; } [data-theme="dark"] .alert-success .alert-icon { color: #34d399 !important; } [data-theme="dark"] .alert-success .alert-progress { background: #34d399 !important; } [data-theme="dark"] .alert-error, [data-theme="dark"] .alert-danger { background: rgba(248, 113, 113, .08) !important; color: #fca5a5 !important; border-color: rgba(248, 113, 113, .18) !important; } [data-theme="dark"] .alert-error .alert-icon, [data-theme="dark"] .alert-danger .alert-icon { color: #f87171 !important; } [data-theme="dark"] .alert-error .alert-progress, [data-theme="dark"] .alert-danger .alert-progress { background: #f87171 !important; } [data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, .08) !important; color: #fde68a !important; border-color: rgba(251, 191, 36, .18) !important; } [data-theme="dark"] .alert-warning .alert-icon { color: #fbbf24 !important; } [data-theme="dark"] .alert-warning .alert-progress { background: #fbbf24 !important; } [data-theme="dark"] .alert-info { background: rgba(78, 122, 255, .08) !important; color: #93b4ff !important; border-color: rgba(78, 122, 255, .18) !important; } [data-theme="dark"] .alert-info .alert-icon { color: #4e7aff !important; } [data-theme="dark"] .alert-info .alert-progress { background: #4e7aff !important; } [data-theme="dark"] .alert-text { color: inherit !important; } /* ═══════════════════════════════════════════════════════════════ STUDENT PAGES (student/base.html) Dashboard, search, results, requests, profile, messages ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .topbar { background: rgba(12, 16, 33, .95) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom-color: rgba(255, 255, 255, .12) !important; } /* Toast notifications in student pages */ [data-theme="dark"] .toast { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .toast-body { color: #ffffff !important; } /* Stat card label and icon bg overrides */ [data-theme="dark"] .stat-card .label { color: #a0a8c0 !important; } [data-theme="dark"] .stat-card .stat-icon { background: transparent !important; border: none !important; } /* ── Student dashboard confirmed-exam banner ── */ [data-theme="dark"] .confirmed-banner { background: linear-gradient(135deg, rgba(52, 211, 153, .06) 0%, rgba(52, 211, 153, .04) 40%, rgba(52, 211, 153, .08) 100%) !important; border-color: rgba(52, 211, 153, .25) !important; } [data-theme="dark"] .cb-title { color: #6ee7b7 !important; } [data-theme="dark"] .cb-subtitle { color: #a7f3d0 !important; } [data-theme="dark"] .cb-icon { background: rgba(52, 211, 153, .12) !important; } [data-theme="dark"] .cb-icon svg { color: #34d399 !important; } [data-theme="dark"] .cb-card { background: rgba(20, 24, 41, .75) !important; backdrop-filter: blur(8px) !important; border-color: rgba(52, 211, 153, .15) !important; } [data-theme="dark"] .cb-card:hover { box-shadow: 0 2px 12px rgba(52, 211, 153, .12) !important; } [data-theme="dark"] .cb-school-name { color: #ffffff !important; } [data-theme="dark"] .cb-school-loc { color: #a0a8c0 !important; } [data-theme="dark"] .cb-meta-label { color: #a0a8c0 !important; } [data-theme="dark"] .cb-meta-value { color: #ffffff !important; } [data-theme="dark"] .cb-meta-item svg { color: #34d399 !important; } [data-theme="dark"] .cb-subj { background: rgba(52, 211, 153, .08) !important; color: #6ee7b7 !important; border-color: rgba(52, 211, 153, .18) !important; } [data-theme="dark"] .cb-subj .cb-lvl { background: rgba(52, 211, 153, .15) !important; color: #34d399 !important; } [data-theme="dark"] .cb-btn-primary { background: #16a34a !important; color: #fff !important; } [data-theme="dark"] .cb-btn-outline { color: #6ee7b7 !important; border-color: rgba(52, 211, 153, .25) !important; background: transparent !important; } [data-theme="dark"] .cb-btn-outline:hover { background: rgba(52, 211, 153, .08) !important; } [data-theme="dark"] .brand-text { color: #ffffff !important; } /* ── GLOBAL: IBretake.com logo / brand text white everywhere ── */ [data-theme="dark"] .logo, [data-theme="dark"] .logo-link, [data-theme="dark"] .logo-link span, [data-theme="dark"] .top-bar .logo-link span, [data-theme="dark"] .brand p, [data-theme="dark"] .brand h1, [data-theme="dark"] .brand-text, [data-theme="dark"] .article-footer a, [data-theme="dark"] .article-footer span, [data-theme="dark"] #ib-switcher-bar a span { color: #ffffff !important; } [data-theme="dark"] .nav-link { color: #a0a8c0 !important; } [data-theme="dark"] .nav-link:hover { color: #ffffff !important; } [data-theme="dark"] .nav-link.active { color: #4e7aff !important; background: rgba(78, 122, 255, .12) !important; } [data-theme="dark"] .nav-link.logout { color: #f87171 !important; } [data-theme="dark"] .nav-link.logout:hover { color: #fca5a5 !important; } /* Cards & stat cards */ [data-theme="dark"] .card { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .card h2, [data-theme="dark"] .card h3 { color: #ffffff !important; } [data-theme="dark"] .stat-card { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .stat-card .value { color: #ffffff !important; } /* Buttons */ [data-theme="dark"] .btn:not(.btn-confirm):not(.btn-cancel) { background: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .btn:not(.btn-confirm):not(.btn-cancel):hover { background: var(--panel-hover); } [data-theme="dark"] .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } [data-theme="dark"] .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } [data-theme="dark"] .btn-danger { background: rgba(248, 113, 113, .08) !important; color: var(--red) !important; border-color: rgba(248, 113, 113, .18) !important; } [data-theme="dark"] .btn-success { background: rgba(52, 211, 153, .08) !important; color: var(--green) !important; border-color: rgba(52, 211, 153, .18) !important; } [data-theme="dark"] .btn-confirm { background: #16a34a !important; color: #fff !important; border: 1px solid #16a34a !important; } [data-theme="dark"] .btn-confirm:hover { background: #15803d !important; border: 1px solid #15803d !important; } [data-theme="dark"] .btn-cancel { background: #dc2626 !important; color: #fff !important; border: 1px solid #dc2626 !important; } [data-theme="dark"] .btn-cancel:hover { background: #b91c1c !important; border: 1px solid #b91c1c !important; } [data-theme="dark"] .btn-warning { background: rgba(245, 158, 11, .12) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, .25) !important; } [data-theme="dark"] .btn-warning:hover { background: rgba(245, 158, 11, .2) !important; } /* Tables */ [data-theme="dark"] .table th { color: #a0a8c0 !important; border-bottom-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .table td { color: #e0e4ef !important; border-bottom-color: rgba(255, 255, 255, .08) !important; } [data-theme="dark"] .table tr:hover { background: rgba(78, 122, 255, .04) !important; } /* Toast notifications */ [data-theme="dark"] .toast { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .toast-body { color: #ffffff !important; } [data-theme="dark"] .toast-close { color: #a0a8c0 !important; } [data-theme="dark"] .toast-success { border-color: rgba(52, 211, 153, .25) !important; } [data-theme="dark"] .toast-success .toast-icon { color: #34d399 !important; } [data-theme="dark"] .toast-success .toast-progress { background: #34d399 !important; } [data-theme="dark"] .toast-danger, [data-theme="dark"] .toast-error { border-color: rgba(248, 113, 113, .25) !important; } [data-theme="dark"] .toast-danger .toast-icon, [data-theme="dark"] .toast-error .toast-icon { color: #f87171 !important; } [data-theme="dark"] .toast-danger .toast-progress, [data-theme="dark"] .toast-error .toast-progress { background: #f87171 !important; } [data-theme="dark"] .toast-warning { border-color: rgba(251, 191, 36, .25) !important; } [data-theme="dark"] .toast-warning .toast-icon { color: #fbbf24 !important; } [data-theme="dark"] .toast-warning .toast-progress { background: #fbbf24 !important; } [data-theme="dark"] .toast-info { border-color: rgba(78, 122, 255, .25) !important; } [data-theme="dark"] .toast-info .toast-icon { color: #4e7aff !important; } [data-theme="dark"] .toast-info .toast-progress { background: #4e7aff !important; } /* ═══════════════════════════════════════════════════════════════ STUDENT SUB-PAGES — search, my_requests, request_detail, etc. These have hardcoded whites and dark-text colors in inline styles. ═══════════════════════════════════════════════════════════════ */ /* ── Search page — map card, side panel, stepper ── */ [data-theme="dark"] .map-card { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .mapHeader { background: linear-gradient(180deg, #161b2e, #141829) !important; border-bottom-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .mapHeader h2 { color: #ffffff !important; } [data-theme="dark"] .mapHeader .hint { color: #a0a8c0 !important; } [data-theme="dark"] svg.map-svg { background: #0c1021 !important; } [data-theme="dark"] .side-panel { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .sideTop { background: linear-gradient(180deg, #161b2e, #141829) !important; border-bottom-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .sideTop .title { color: #ffffff !important; } [data-theme="dark"] .sideTop .sub { color: #a0a8c0 !important; } [data-theme="dark"] .search-box { border-bottom-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .search-box input { background: #141829 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .meta-bar { background: #141829 !important; border-bottom-color: rgba(255, 255, 255, .12) !important; color: #a0a8c0 !important; } [data-theme="dark"] .country-row:hover { background: rgba(78, 122, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .country-check { border-color: rgba(255, 255, 255, .25) !important; background: #141829 !important; } [data-theme="dark"] .country-row.selected .country-check { border-color: rgba(78, 122, 255, .5) !important; background: rgba(78, 122, 255, .08) !important; } [data-theme="dark"] .country-name { color: #ffffff !important; } [data-theme="dark"] .progressTrack { background: rgba(78, 122, 255, .12) !important; } /* Stepper bar */ [data-theme="dark"] .flow-stepper { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .step-num { background: #141829 !important; border-color: rgba(255, 255, 255, .18) !important; color: #a0a8c0 !important; } [data-theme="dark"] .step-label { color: #a0a8c0 !important; } [data-theme="dark"] .flow-step.active .step-num { background: #4e7aff !important; border-color: #4e7aff !important; color: #ffffff !important; } [data-theme="dark"] .flow-step.active .step-label { color: #ffffff !important; } [data-theme="dark"] .flow-step.done .step-num { background: rgba(52, 211, 153, .12) !important; border-color: #34d399 !important; color: #34d399 !important; } [data-theme="dark"] .flow-step.done .step-label { color: #34d399 !important; } [data-theme="dark"] .step-arrow { color: rgba(255, 255, 255, .25) !important; } /* Bottom bar */ [data-theme="dark"] .flow-bottom-bar { background: rgba(12, 16, 33, .95) !important; backdrop-filter: blur(12px) !important; border-top-color: rgba(255, 255, 255, .12) !important; } /* ── Request cards ── */ [data-theme="dark"] .req-card { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .req-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .4) !important; } [data-theme="dark"] .req-date { color: #a0a8c0 !important; } /* Search page dark mode map variables */ [data-theme="dark"] .search-flow-container { --ocean: #0c1021; --continent: #2a3255; --continentHover: #3a4575; --continentActive: #4e7aff; --continent-stroke: rgba(255, 255, 255, .55); --country-c: #2a3255; --countryHover: #3a4575; --countrySelected: #4e7aff; --graticule: rgba(78, 122, 255, .08); --graticule-border: rgba(78, 122, 255, .04); } /* ── Request detail — status bars ── */ [data-theme="dark"] .sb-your-turn { background: rgba(251, 191, 36, .08) !important; border-color: rgba(251, 191, 36, .22) !important; color: #fde68a !important; } [data-theme="dark"] .sb-your-turn .sb-badge { background: rgba(251, 191, 36, .12) !important; color: #fde68a !important; } [data-theme="dark"] .sb-waiting { background: rgba(148, 163, 184, .06) !important; border-color: rgba(148, 163, 184, .18) !important; color: #a0a8c0 !important; } [data-theme="dark"] .sb-waiting .sb-badge { background: rgba(148, 163, 184, .10) !important; color: #a0a8c0 !important; } [data-theme="dark"] .sb-overdue { background: rgba(248, 113, 113, .06) !important; border-color: rgba(248, 113, 113, .20) !important; color: #fca5a5 !important; } [data-theme="dark"] .sb-overdue .sb-badge { background: rgba(248, 113, 113, .10) !important; color: #fca5a5 !important; } [data-theme="dark"] .sb-confirmed { background: rgba(52, 211, 153, .06) !important; border-color: rgba(52, 211, 153, .18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .sb-confirmed .sb-badge { background: rgba(52, 211, 153, .10) !important; color: #6ee7b7 !important; } [data-theme="dark"] .sb-terminal { background: rgba(107, 122, 158, .05) !important; border-color: rgba(255, 255, 255, .10) !important; color: #7a86a8 !important; } [data-theme="dark"] .status-bar .sb-text small { color: inherit !important; } /* ── Request detail — subject decided badges ── */ [data-theme="dark"] .subj-decided.accepted { background: rgba(52, 211, 153, .10) !important; color: #6ee7b7 !important; } [data-theme="dark"] .subj-decided.rejected { background: rgba(248, 113, 113, .10) !important; color: #fca5a5 !important; } [data-theme="dark"] .subj-decided.pending { background: rgba(251, 191, 36, .10) !important; color: #fde68a !important; } [data-theme="dark"] .subj-decided.cancelled { background: rgba(107, 122, 158, .10) !important; color: #a8b2cf !important; } /* ── Request detail — payment card ── */ [data-theme="dark"] .pay-card { background: linear-gradient(135deg, rgba(52, 211, 153, .06), rgba(22, 163, 74, .04)) !important; border-color: rgba(52, 211, 153, .22) !important; } [data-theme="dark"] .pay-icon { background: rgba(52, 211, 153, .12) !important; } [data-theme="dark"] .pay-icon svg { color: #34d399 !important; } [data-theme="dark"] .pay-header-text h4 { color: #6ee7b7 !important; } [data-theme="dark"] .pay-header-text p { color: #86efac !important; } [data-theme="dark"] .pay-breakdown { background: rgba(255, 255, 255, .04) !important; border-color: rgba(52, 211, 153, .12) !important; } [data-theme="dark"] .pay-row { color: #a0a8c0 !important; } [data-theme="dark"] .pay-row.total { color: #6ee7b7 !important; border-top-color: rgba(52, 211, 153, .18) !important; } [data-theme="dark"] .btn-pay { background: #16a34a !important; color: #fff !important; } [data-theme="dark"] .btn-pay:hover { background: #15803d !important; } /* ── Request detail — side cards ── */ [data-theme="dark"] .side-card { background: var(--panel) !important; border-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .side-card h4 { color: #ffffff !important; } [data-theme="dark"] .side-card p { color: #a0a8c0 !important; } /* ── Request detail — chat panel dark ── */ [data-theme="dark"] .msg-coordinator { background: #1e2340 !important; border-color: rgba(255, 255, 255, .10) !important; } [data-theme="dark"] .msg-coordinator .msg-body { color: #e0e4ef !important; } [data-theme="dark"] .chat-empty { color: #7a86a8 !important; } [data-theme="dark"] .chat-input-wrap { border-top-color: rgba(255, 255, 255, .10) !important; background: #161b2e !important; } [data-theme="dark"] .chat-input-wrap input, [data-theme="dark"] .chat-input-wrap textarea { background: #141829 !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════ COORDINATOR PAGES (coordinator/base.html) Dashboard, subjects, requests, settings ═══════════════════════════════════════════════════════════════ */ /* Coordinator sidebar — already dark (#1a1a2e), keep it but deepen */ [data-theme="dark"] .sidebar { --sidebar-bg: #0a0e1a; --sidebar-text: #7a86a8; --sidebar-hover: #121730; background: #0a0e1a !important; } [data-theme="dark"] .user-info { background: #121730 !important; border-color: rgba(255, 255, 255, .06) !important; } [data-theme="dark"] .user-info strong { color: #e0e4ef !important; } [data-theme="dark"] .user-info small { color: #7a86a8 !important; } /* Coordinator nav items */ [data-theme="dark"] .nav-item { color: #7a86a8 !important; } [data-theme="dark"] .nav-item:hover { background: #121730 !important; color: #e0e4ef !important; } [data-theme="dark"] .nav-item.active { background: #4e7aff !important; color: #ffffff !important; } [data-theme="dark"] .nav-item.logout, [data-theme="dark"] .nav-item.logout span { color: #f87171 !important; } [data-theme="dark"] .nav-item.logout:hover, [data-theme="dark"] .nav-item.logout:hover span { color: #f87171 !important; } [data-theme="dark"] .nav-item.logout:hover { background: rgba(248, 113, 113, .08) !important; } [data-theme="dark"] .nav-item.logout:hover span { background: none !important; } /* Coordinator main area */ [data-theme="dark"] .main { background: transparent !important; } /* Coordinator cards override */ [data-theme="dark"] .card h3 { color: #ffffff !important; } /* Coordinator specific btn-danger / btn-success with hardcoded light colors */ [data-theme="dark"] .btn-danger { background: rgba(248, 113, 113, .08) !important; color: #fca5a5 !important; border-color: rgba(248, 113, 113, .25) !important; } [data-theme="dark"] .btn-danger:hover { background: rgba(248, 113, 113, .15) !important; } [data-theme="dark"] .btn-success { background: rgba(52, 211, 153, .08) !important; color: #6ee7b7 !important; border-color: rgba(52, 211, 153, .25) !important; } [data-theme="dark"] .btn-success:hover { background: rgba(52, 211, 153, .15) !important; } /* Coordinator filter tabs — remove box outline from global button rule */ [data-theme="dark"] .req-filt { border: none !important; border-bottom: 2px solid transparent !important; background: none !important; color: #7a86a8 !important; } [data-theme="dark"] .req-filt:hover { color: #e0e4ef !important; border: none !important; border-bottom: 2px solid transparent !important; } [data-theme="dark"] .req-filt.active { color: #4e7aff !important; border: none !important; border-bottom: 2px solid #4e7aff !important; } [data-theme="dark"] .req-filt .filt-count { background: rgba(255, 255, 255, .08) !important; color: #7a86a8 !important; } [data-theme="dark"] .req-filters { border-bottom-color: rgba(255, 255, 255, .10) !important; } /* Coordinator status labels — dark-friendly colours */ [data-theme="dark"] .status-label.st-confirmed { background: rgba(52, 211, 153, .10) !important; color: #6ee7b7 !important; border-color: rgba(52, 211, 153, .35) !important; } [data-theme="dark"] .status-label.st-rejected { background: rgba(248, 113, 113, .10) !important; color: #fca5a5 !important; border-color: rgba(248, 113, 113, .35) !important; } [data-theme="dark"] .status-label.st-received { background: rgba(78, 122, 255, .10) !important; color: #93b4ff !important; border-color: rgba(78, 122, 255, .35) !important; } [data-theme="dark"] .status-label.st-review { background: rgba(251, 191, 36, .10) !important; color: #fde68a !important; border-color: rgba(251, 191, 36, .35) !important; } [data-theme="dark"] .status-label.st-need_info { background: rgba(251, 146, 60, .10) !important; color: #fdba74 !important; border-color: rgba(251, 146, 60, .35) !important; } [data-theme="dark"] .status-label.st-awaiting { background: rgba(78, 122, 255, .10) !important; color: #93b4ff !important; border-color: rgba(78, 122, 255, .35) !important; } [data-theme="dark"] .status-label.st-partial { background: rgba(251, 146, 60, .10) !important; color: #fdba74 !important; border-color: rgba(251, 146, 60, .35) !important; } [data-theme="dark"] .status-label.st-closed, [data-theme="dark"] .status-label.st-expired { background: rgba(107, 122, 158, .10) !important; color: #a8b2cf !important; border-color: rgba(107, 122, 158, .35) !important; } /* Coordinator logout button — no box outline, red text */ [data-theme="dark"] .nav-item.logout, [data-theme="dark"] button.nav-item.logout, [data-theme="dark"] .nav-item.logout span, [data-theme="dark"] button.nav-item.logout span { border: none !important; color: #f87171 !important; background: none !important; } [data-theme="dark"] .nav-item.logout:hover, [data-theme="dark"] button.nav-item.logout:hover { border: none !important; background: rgba(248, 113, 113, .08) !important; color: #f87171 !important; } [data-theme="dark"] .nav-item.logout:hover span, [data-theme="dark"] button.nav-item.logout:hover span { background: none !important; color: #f87171 !important; } /* Coordinator subject pills on requests page */ [data-theme="dark"] .subj-pill { background: rgba(78, 122, 255, .08) !important; color: #93b4ff !important; border-color: rgba(78, 122, 255, .18) !important; } /* ═══════════════════════════════════════════════════════════════ ARTICLE PAGES (articles/base.html) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .top-bar { background: rgba(12, 16, 33, .92) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .top-bar .logo-link span { color: #ffffff !important; } [data-theme="dark"] .top-bar a.back { color: #93b4ff !important; border-color: rgba(78, 122, 255, .2) !important; background: rgba(78, 122, 255, .06) !important; } [data-theme="dark"] .top-bar a.back:hover { background: rgba(78, 122, 255, .12) !important; border-color: rgba(78, 122, 255, .3) !important; } [data-theme="dark"] .article-container { background: #161b2e !important; border-color: rgba(255, 255, 255, .18) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .5); } [data-theme="dark"] .article-container h1, [data-theme="dark"] .article-container h2, [data-theme="dark"] .article-container h3, [data-theme="dark"] .article-container strong { color: #ffffff !important; } [data-theme="dark"] .article-container p, [data-theme="dark"] .article-container ul, [data-theme="dark"] .article-container ol, [data-theme="dark"] .article-container li { color: #e0e4ef !important; } [data-theme="dark"] .article-container h2 { border-bottom-color: rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .article-tag { background: rgba(78, 122, 255, .12) !important; color: #93b4ff !important; } [data-theme="dark"] .article-date, [data-theme="dark"] .article-read-time { color: #a0a8c0 !important; } [data-theme="dark"] .article-container blockquote { background: rgba(78, 122, 255, .06) !important; border-left-color: #4e7aff !important; color: #e0e4ef !important; } [data-theme="dark"] .article-container blockquote p { color: #e0e4ef !important; } [data-theme="dark"] .article-container blockquote strong { color: #ffffff !important; } [data-theme="dark"] .tip-box { background: rgba(78, 122, 255, .08) !important; border-color: rgba(78, 122, 255, .15) !important; } [data-theme="dark"] .tip-box strong { color: #93b4ff !important; } [data-theme="dark"] .tip-box strong span { color: #e0e4ef !important; } [data-theme="dark"] .tip-box strong svg { stroke: #93b4ff !important; } [data-theme="dark"] .tip-box p, [data-theme="dark"] .tip-box { color: #e0e4ef !important; } [data-theme="dark"] .cta-box { background: rgba(78, 122, 255, .06) !important; border-color: rgba(78, 122, 255, .12) !important; } [data-theme="dark"] .cta-box p { color: #ffffff !important; } /* ext-banner: dark bg, white text, no light bg behind icon */ [data-theme="dark"] .ext-banner { background: rgba(78, 122, 255, .08) !important; border-color: rgba(78, 122, 255, .15) !important; } [data-theme="dark"] .ext-banner p { color: #ffffff !important; } [data-theme="dark"] .ext-banner .ext-icon { color: #93b4ff !important; background: transparent !important; } [data-theme="dark"] .ext-banner .ext-icon svg { stroke: #93b4ff !important; } /* article-container link color */ [data-theme="dark"] .article-container a { color: #93b4ff !important; } [data-theme="dark"] .article-container a:hover { color: #b8d0ff !important; } /* article footer */ [data-theme="dark"] .article-footer { color: #a0a8c0 !important; } [data-theme="dark"] .article-footer a { color: #a0a8c0 !important; } /* ═══════════════════════════════════════════════════════════════ ADMIN PAGES — login.html (admin/dashboard.html already has its own dark theme) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .wrapper .card { background: var(--panel); border-color: var(--border); box-shadow: 0 4px 24px rgba(0, 0, 0, .4); } /* ═══════════════════════════════════════════════════════════════ LANDING PAGE (landing_page.html) ═══════════════════════════════════════════════════════════════ */ /* Navigation */ [data-theme="dark"] .top-bar, [data-theme="dark"] .lp-topbar { background: rgba(12, 16, 33, .95) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Hero badge */ [data-theme="dark"] .hero-badge { background: var(--surface); border-color: var(--border); color: var(--text-light); } /* Hero text */ [data-theme="dark"] .hero h1, [data-theme="dark"] .hero-grid h1 { color: var(--text) !important; } [data-theme="dark"] .hero p, [data-theme="dark"] .hero-grid p { color: var(--text-light) !important; } /* Login buttons on landing */ [data-theme="dark"] .login-btn--outline { background: transparent; border-color: var(--border); color: var(--text); } [data-theme="dark"] .login-btn--outline:hover { background: var(--surface); border-color: var(--border); } /* Search/filter panels */ [data-theme="dark"] .search-panel, [data-theme="dark"] .search-bar, [data-theme="dark"] .filter-section { background: var(--panel) !important; border-color: var(--border) !important; } /* School cards */ [data-theme="dark"] .school-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .step-card, [data-theme="dark"] .resource-card, [data-theme="dark"] .faq-item, [data-theme="dark"] .testimonial-card { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important; } [data-theme="dark"] .school-card:hover, [data-theme="dark"] .feature-card:hover, [data-theme="dark"] .resource-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important; border-color: rgba(78, 122, 255, .2) !important; } /* Card text */ [data-theme="dark"] .school-card h3, [data-theme="dark"] .feature-card h3, [data-theme="dark"] .step-card h3, [data-theme="dark"] .resource-card h3 { color: var(--text) !important; } [data-theme="dark"] .school-card p, [data-theme="dark"] .feature-card p, [data-theme="dark"] .step-card p, [data-theme="dark"] .resource-card p { color: var(--text-light) !important; } /* Tags and pills on cards */ [data-theme="dark"] .school-card .tag, [data-theme="dark"] .school-tag, [data-theme="dark"] .pill { background: rgba(78, 122, 255, .1) !important; color: #93b4ff !important; border-color: rgba(78, 122, 255, .15) !important; } /* Section headings */ [data-theme="dark"] section h2, [data-theme="dark"] .section-title, [data-theme="dark"] .section-heading { color: var(--text) !important; } [data-theme="dark"] section p.section-subtitle, [data-theme="dark"] .section-subtitle { color: var(--text-light) !important; } /* Step numbers / feature icons */ [data-theme="dark"] .step-number, [data-theme="dark"] .feature-icon { background: rgba(78, 122, 255, .1) !important; color: #93b4ff !important; } /* FAQ accordion */ [data-theme="dark"] .faq-item { border-color: var(--border) !important; } [data-theme="dark"] .faq-question { color: var(--text) !important; } [data-theme="dark"] .faq-answer, [data-theme="dark"] .faq-answer p { color: var(--text-light) !important; } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .footer { background: #080b16 !important; border-top-color: var(--border) !important; color: var(--muted) !important; } [data-theme="dark"] footer a, [data-theme="dark"] .footer a { color: var(--text-light) !important; } [data-theme="dark"] footer h4, [data-theme="dark"] .footer h4 { color: var(--text) !important; } /* Stat counters / numbers on landing */ [data-theme="dark"] .counter, [data-theme="dark"] .stat-number { color: var(--text) !important; } /* Dividers & HRs */ [data-theme="dark"] hr { border-color: var(--border); } /* ═══════════════════════════════════════════════════════════════ LANDING PAGE — TARGETED FIXES (all reported issues) ═══════════════════════════════════════════════════════════════ */ /* ── 1. NAV BAR — Resources / FAQ / Contact buttons ─────────── */ /* Text: white. Background: transparent (match dark nav bg) */ [data-theme="dark"] .nav-links button { color: #ffffff !important; background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .nav-links button:hover { color: #93b4ff !important; background: rgba(255, 255, 255, .06) !important; } /* Logo text in navbar */ [data-theme="dark"] .logo { color: #ffffff !important; } /* ── 2. HOW IT WORKS — step cards ────────────────────────────── */ /* Cards: dark bg, white outline */ [data-theme="dark"] .step-card { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; } /* Step number circle: dark bg, white border */ [data-theme="dark"] .step-number { background: #0c1021 !important; border: 2px solid rgba(255, 255, 255, .18) !important; color: #ffffff !important; } /* Step titles & text: white */ [data-theme="dark"] .step-title { color: #ffffff !important; } [data-theme="dark"] .step-text { color: #a0a8c0 !important; } /* ── 3. "Built for students and coordinators" — section title ── */ [data-theme="dark"] .section-title { color: #ffffff !important; } [data-theme="dark"] .section-subtitle { color: #e0e4ef !important; } /* ── 4. AUDIENCE CARDS — dark bg instead of white ────────────── */ [data-theme="dark"] .audience-card { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .audience-label { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #e0e4ef !important; } [data-theme="dark"] .audience-title { color: #ffffff !important; } [data-theme="dark"] .audience-text { color: #e0e4ef !important; } [data-theme="dark"] .audience-link { color: #93b4ff !important; } /* ── 5. RESOURCES — article cards dark bg ────────────────────── */ [data-theme="dark"] .article-card { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .article-card a { color: #ffffff !important; } [data-theme="dark"] .article-title { color: #ffffff !important; } [data-theme="dark"] .article-text { color: #a0a8c0 !important; } [data-theme="dark"] .article-link { color: #93b4ff !important; } [data-theme="dark"] .article-tag-badge { background: rgba(255, 255, 255, .12) !important; color: #e0e4ef !important; } /* Carousel navigation buttons */ [data-theme="dark"] .carousel-btn { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #ffffff !important; } [data-theme="dark"] .carousel-btn:hover { background: #1a2038 !important; } /* ── 6. FAQ — headings, question text, outlines, plus signs ─── */ [data-theme="dark"] details.faq-item { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; } [data-theme="dark"] details.faq-item:hover { border-color: rgba(255, 255, 255, .30) !important; } [data-theme="dark"] details.faq-item[open] { border-color: #4e7aff !important; } [data-theme="dark"] details.faq-item summary { color: #ffffff !important; } [data-theme="dark"] details.faq-item summary:hover { color: #93b4ff !important; } /* Plus / minus sign */ [data-theme="dark"] details.faq-item summary::after { color: #ffffff !important; } [data-theme="dark"] details.faq-item[open] summary::after { color: #93b4ff !important; } /* Answer text */ [data-theme="dark"] .faq-answer { color: #e0e4ef !important; } /* ── 7. CONTACT section — labels, list, heading ──────────────── */ [data-theme="dark"] .contact-info h3 { color: #ffffff !important; } [data-theme="dark"] .contact-info p { color: #e0e4ef !important; } /* Contact list labels: Email, Hours, Response time */ [data-theme="dark"] .contact-list li { color: #e0e4ef !important; border-bottom-color: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .contact-list strong { color: #ffffff !important; } /* Contact form */ [data-theme="dark"] .contact-form label { color: #ffffff !important; } [data-theme="dark"] .contact-form input, [data-theme="dark"] .contact-form textarea { background: #141829 !important; border: 1.5px solid rgba(255, 255, 255, .18) !important; color: #ffffff !important; } [data-theme="dark"] .contact-form input::placeholder, [data-theme="dark"] .contact-form textarea::placeholder { color: #a0a8c0 !important; } [data-theme="dark"] .contact-form input:focus, [data-theme="dark"] .contact-form textarea:focus { border-color: #4e7aff !important; } [data-theme="dark"] .form-note { color: #a0a8c0 !important; } /* ── 8. HERO section text ────────────────────────────────────── */ [data-theme="dark"] .hero-title { color: #ffffff !important; } [data-theme="dark"] .hero-subtitle { color: #e0e4ef !important; } [data-theme="dark"] .hero-trust { color: #a0a8c0 !important; } [data-theme="dark"] .hero-badge { background: #161b2e !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #e0e4ef !important; } [data-theme="dark"] .hero-art { border-color: rgba(255, 255, 255, .18) !important; } /* ── 9. Section dividers ─────────────────────────────────────── */ [data-theme="dark"] .section-divider { background: rgba(255, 255, 255, .12) !important; } /* ── 11. Footer on landing ───────────────────────────────────── */ [data-theme="dark"] .footer-text { color: #a0a8c0 !important; } [data-theme="dark"] .footer-links a { color: #e0e4ef !important; } [data-theme="dark"] .footer-links a:hover { color: #93b4ff !important; } /* ── 12. Login buttons in nav ────────────────────────────────── */ [data-theme="dark"] .login-btn { color: #ffffff !important; } [data-theme="dark"] .login-btn--outline { background: transparent !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #ffffff !important; } [data-theme="dark"] .login-btn--outline:hover { background: rgba(255, 255, 255, .08) !important; } /* ═══════════════════════════════════════════════════════════════ FORM ELEMENTS (form-elements.css) — dark overrides form-elements uses --fe-* tokens that read from --surface etc. We override those tokens + hardcoded whites ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --fe-bg: var(--surface); --fe-bg-hover: var(--panel-hover, #1a2038); --fe-border: var(--border); --fe-border-focus: var(--primary); --fe-text: var(--text); --fe-muted: var(--muted); --fe-primary: var(--primary); --fe-primary-light: var(--primary-light); --fe-shadow-focus: 0 0 0 3px rgba(78, 122, 255, .2); --fe-shadow-popover: 0 8px 30px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); } /* Input fields */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] textarea, [data-theme="dark"] .form-control, [data-theme="dark"] select.form-control { background-color: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] input[type="text"]:hover, [data-theme="dark"] input[type="email"]:hover, [data-theme="dark"] input[type="password"]:hover, [data-theme="dark"] input[type="tel"]:hover, [data-theme="dark"] input[type="number"]:hover, [data-theme="dark"] textarea:hover, [data-theme="dark"] .form-control:hover { background-color: var(--panel-hover, #1a2038); border-color: rgba(78, 122, 255, .3); } [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="email"]:focus, [data-theme="dark"] input[type="password"]:focus, [data-theme="dark"] input[type="tel"]:focus, [data-theme="dark"] input[type="number"]:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] .form-control:focus { background-color: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(78, 122, 255, .2); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--muted); } /* Date input calendar icon */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); } /* Select dropdown arrow */ [data-theme="dark"] select.form-control { color-scheme: dark; } /* Form labels */ [data-theme="dark"] .form-group label { color: var(--text); } /* Submit buttons */ [data-theme="dark"] .btn-submit { background: var(--primary); color: #fff; } [data-theme="dark"] .btn-submit:hover { background: var(--primary-dark); } /* Enhanced select (fe-select) — popover panel */ [data-theme="dark"] .fe-select-popover, [data-theme="dark"] .fe-phone-popover { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .5) !important; } [data-theme="dark"] .fe-select-option:hover, [data-theme="dark"] .fe-phone-option:hover { background: rgba(78, 122, 255, .08) !important; } [data-theme="dark"] .fe-select-option.selected, [data-theme="dark"] .fe-phone-option.selected { background: rgba(78, 122, 255, .12) !important; color: #93b4ff !important; } /* Enhanced select trigger */ [data-theme="dark"] .fe-select-trigger, [data-theme="dark"] .fe-phone-trigger { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .fe-select-trigger:hover, [data-theme="dark"] .fe-phone-trigger:hover { border-color: rgba(78, 122, 255, .3) !important; background: var(--panel-hover, #1a2038) !important; } /* Search inside select popovers */ [data-theme="dark"] .fe-select-search input, [data-theme="dark"] .fe-phone-search input { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Toggle switch */ [data-theme="dark"] .fe-toggle-track { background: var(--border) !important; } [data-theme="dark"] .fe-toggle-track.active { background: var(--primary) !important; } /* Checkbox */ [data-theme="dark"] .fe-checkbox-box { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="dark"] .fe-checkbox-box.checked { background: var(--primary) !important; border-color: var(--primary) !important; } /* Calendar (date picker) popover */ [data-theme="dark"] .fe-calendar-popover, [data-theme="dark"] .fe-calendar { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, .5) !important; color: var(--text) !important; } [data-theme="dark"] .fe-calendar-day:hover { background: rgba(78, 122, 255, .12) !important; } [data-theme="dark"] .fe-calendar-day.selected { background: var(--primary) !important; color: #fff !important; } [data-theme="dark"] .fe-calendar-day.today { border-color: var(--primary) !important; } [data-theme="dark"] .fe-calendar-header { color: var(--text) !important; } [data-theme="dark"] .fe-calendar-weekday { color: var(--muted) !important; } [data-theme="dark"] .fe-calendar-nav { color: var(--text-light) !important; } [data-theme="dark"] .fe-calendar-nav:hover { background: rgba(78, 122, 255, .1) !important; } /* ═══════════════════════════════════════════════════════════════ OTP VERIFY PAGE — specific overrides ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .otp-box { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .otp-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(78, 122, 255, .2); } [data-theme="dark"] .otp-box.filled { border-color: var(--primary); background: var(--primary-light); } [data-theme="dark"] .otp-box.success { border-color: var(--green); background: rgba(52, 211, 153, .08); } [data-theme="dark"] .otp-box.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, .12); } [data-theme="dark"] .resend-link { background: var(--surface); border-color: var(--border); color: var(--primary); } [data-theme="dark"] .resend-link:hover { background: var(--primary-light); border-color: var(--primary); } [data-theme="dark"] .blocked-msg { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .15); color: #fca5a5; } [data-theme="dark"] .otp-verified-badge { background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .15); color: #6ee7b7; } /* ═══════════════════════════════════════════════════════════════ MISC — catch-all for hardcoded white backgrounds ═══════════════════════════════════════════════════════════════ */ /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1e2642; border-radius: 3px; } /* Generic rgba overrides for white backgrounds used inline */ [data-theme="dark"] [style*="background:rgba(255,255,255"], [data-theme="dark"] [style*="background: rgba(255,255,255"], [data-theme="dark"] [style*="background-color:rgba(255,255,255"], [data-theme="dark"] [style*="background-color: rgba(255,255,255"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #ffffff"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background: white"] { background: var(--panel) !important; } /* Progress bars */ [data-theme="dark"] .progress-bar { background: var(--border-light); } /* Horizontal rules */ [data-theme="dark"] .section-label { border-bottom-color: var(--border); color: var(--muted); } /* Phone row selects on verify page */ [data-theme="dark"] .phone-row select { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); } /* Generic card hover effect — subtle blue glow */ [data-theme="dark"] .card:hover { border-color: rgba(78, 122, 255, .15); } /* ═══════════════════════════════════════════════════════════════ STANDALONE PAGES — coordinatordashboard.html & resultpagestudent.html These use --line, --blue, --blue2 and hardcoded rgba(255,255,255) backgrounds ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --line: rgba(30, 38, 66, .5); --blue: #4e7aff; --blue2: #3a63e0; } /* Body radial-gradient backgrounds → dark navy */ [data-theme="dark"] body { background: radial-gradient(1100px 560px at 14% 0%, rgba(78,122,255,0.06), rgba(78,122,255,0) 60%), radial-gradient(1000px 520px at 86% 10%, rgba(118,75,162,0.04), rgba(118,75,162,0) 55%), #0c1021 !important; } /* Sidebar (coordinatordashboard) */ [data-theme="dark"] .sidebar { background: radial-gradient(800px 380px at 20% 0%, rgba(78,122,255,0.04), rgba(78,122,255,0) 60%), radial-gradient(700px 340px at 80% 20%, rgba(118,75,162,0.03), rgba(118,75,162,0) 55%), rgba(12,16,33,0.95) !important; backdrop-filter: blur(12px); border-right-color: var(--border) !important; } [data-theme="dark"] .brand { background: rgba(20,24,41,0.70) !important; border-color: var(--border) !important; box-shadow: 0 18px 44px rgba(0,0,0,.15) !important; } [data-theme="dark"] .brand h1 { color: var(--text) !important; } [data-theme="dark"] .brand p { color: var(--muted) !important; } [data-theme="dark"] .nav button { background: rgba(20,24,41,0.70) !important; border-color: var(--border) !important; color: var(--text-light) !important; box-shadow: 0 14px 34px rgba(0,0,0,.12) !important; } [data-theme="dark"] .nav button:hover { box-shadow: 0 14px 34px rgba(0,0,0,.2) !important; background: rgba(30,38,66,0.6) !important; } [data-theme="dark"] .nav button.active { border-color: rgba(78,122,255,0.40) !important; background: rgba(78,122,255,0.10) !important; } [data-theme="dark"] .ico { background: rgba(78,122,255,0.08) !important; border-color: var(--border) !important; } [data-theme="dark"] .side-card { background: rgba(20,24,41,0.70) !important; border-color: var(--border) !important; box-shadow: 0 18px 44px rgba(0,0,0,.15) !important; } [data-theme="dark"] .side-card .k { color: var(--text-light) !important; } [data-theme="dark"] .side-card .v { color: var(--muted) !important; } /* Topbar/chrome bars — standalone pages */ [data-theme="dark"] .topbar { background: rgba(12,16,33,0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom-color: var(--border) !important; } /* Top left/right text */ [data-theme="dark"] .top-left h2 { color: var(--text) !important; } [data-theme="dark"] .top-left p { color: var(--muted) !important; } /* Search bar */ [data-theme="dark"] .search { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 12px 28px rgba(0,0,0,.15) !important; } [data-theme="dark"] .search input { color: var(--text) !important; } /* Chips */ [data-theme="dark"] .chip { background: rgba(20,24,41,0.70) !important; border-color: var(--border) !important; color: var(--text-light) !important; box-shadow: 0 10px 24px rgba(0,0,0,.12) !important; } /* Cards — standalone pages use rgba(255,255,255,0.92) backgrounds */ [data-theme="dark"] .card { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: 0 18px 44px rgba(0,0,0,.2) !important; } [data-theme="dark"] .card .head { border-bottom-color: var(--border) !important; } [data-theme="dark"] .card h1, [data-theme="dark"] .card h3 { color: var(--text) !important; } [data-theme="dark"] .card .sub, [data-theme="dark"] .sub { color: var(--muted) !important; } /* Buttons — standalone pages with rgba(255,255,255,0.92) bg */ [data-theme="dark"] .btn:not(.btn-confirm):not(.btn-cancel):not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-light) !important; box-shadow: 0 12px 28px rgba(0,0,0,.12) !important; } [data-theme="dark"] .btn:not(.btn-confirm):not(.btn-cancel):not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover { background: var(--panel-hover) !important; box-shadow: 0 14px 34px rgba(0,0,0,.2) !important; } [data-theme="dark"] .btn.primary { background: var(--primary) !important; color: #fff !important; border-color: rgba(78,122,255,0.3) !important; box-shadow: 0 22px 50px rgba(78,122,255,0.15) !important; } [data-theme="dark"] .btn.primary:hover { background: var(--primary-dark) !important; } [data-theme="dark"] .btn.danger { background: rgba(248,113,113,0.08) !important; border-color: rgba(248,113,113,0.18) !important; color: #fca5a5 !important; } /* Stat values */ [data-theme="dark"] .stat .val { color: var(--text) !important; } /* Badges */ [data-theme="dark"] .badge { background: rgba(30,38,66,0.5) !important; border-color: var(--border) !important; color: var(--text-light) !important; } [data-theme="dark"] .badge.good { background: rgba(52,211,153,0.10) !important; border-color: rgba(52,211,153,0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .badge.warn { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.20) !important; color: #fde68a !important; } [data-theme="dark"] .badge.bad { background: rgba(248,113,113,0.10) !important; border-color: rgba(248,113,113,0.18) !important; color: #fca5a5 !important; } /* Badge color variants (must come after generic .badge to win cascade) */ [data-theme="dark"] .badge-blue { background: rgba(78, 122, 255, .15) !important; color: #a3c0ff !important; border: 1px solid rgba(78, 122, 255, .35) !important; } [data-theme="dark"] .badge-green { background: rgba(34, 197, 94, .15) !important; color: #86efac !important; border: 1px solid rgba(34, 197, 94, .35) !important; } [data-theme="dark"] .badge-amber { background: rgba(251, 191, 36, .14) !important; color: #fde68a !important; border: 1px solid rgba(251, 191, 36, .35) !important; } [data-theme="dark"] .badge-red { background: rgba(248, 113, 113, .15) !important; color: #fca5a5 !important; border: 1px solid rgba(248, 113, 113, .35) !important; } [data-theme="dark"] .badge-gray { background: rgba(148, 163, 184, .12) !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, .28) !important; } /* List items */ [data-theme="dark"] .item { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: 0 12px 28px rgba(0,0,0,.12) !important; } [data-theme="dark"] .item:hover { box-shadow: 0 14px 34px rgba(0,0,0,.2) !important; } [data-theme="dark"] .item .t { color: var(--text) !important; } [data-theme="dark"] .item .m { color: var(--muted) !important; } [data-theme="dark"] .meta { color: var(--muted) !important; } /* Tables — standalone pages */ [data-theme="dark"] table:not(.subj-table) { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] th { color: var(--text-light) !important; background: rgba(20,24,41,0.5) !important; } [data-theme="dark"] td { color: var(--text-light) !important; border-bottom-color: var(--border) !important; } /* Pills on standalone pages */ [data-theme="dark"] .pill { background: rgba(20,24,41,0.70) !important; border-color: var(--border) !important; color: var(--text-light) !important; } [data-theme="dark"] .pill.ok { background: rgba(52,211,153,0.10) !important; border-color: rgba(52,211,153,0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .pill.warn { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.20) !important; color: #fde68a !important; } [data-theme="dark"] .pill.bad { background: rgba(248,113,113,0.10) !important; border-color: rgba(248,113,113,0.18) !important; color: #fca5a5 !important; } /* Labels / hints / dividers */ [data-theme="dark"] label { color: var(--text-light) !important; } [data-theme="dark"] .hint { color: var(--muted) !important; } [data-theme="dark"] .divider { background: var(--border) !important; } /* Modals — standalone pages */ [data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.6) !important; } [data-theme="dark"] .modal { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: 0 40px 120px rgba(0,0,0,.4) !important; } [data-theme="dark"] .modal .mh { border-bottom-color: var(--border) !important; } [data-theme="dark"] .modal .mh h4 { color: var(--text) !important; } [data-theme="dark"] .modal .mb { color: var(--text-light) !important; } /* Mobile topbar & drawer */ [data-theme="dark"] .mobile-top { background: rgba(12,16,33,0.92) !important; backdrop-filter: blur(10px) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .hamburger { background: var(--surface) !important; border-color: var(--border) !important; } [data-theme="dark"] .drawer .sheet { background: radial-gradient(800px 380px at 20% 0%, rgba(78,122,255,0.04), rgba(78,122,255,0) 60%), radial-gradient(700px 340px at 80% 20%, rgba(118,75,162,0.03), rgba(118,75,162,0) 55%), rgba(12,16,33,0.96) !important; border-right-color: var(--border) !important; } /* Progress bars on result pages */ [data-theme="dark"] .progress-shell { background: rgba(30,38,66,0.5) !important; border-color: var(--border) !important; } [data-theme="dark"] .progress-fill { background: linear-gradient(90deg, rgba(78,122,255,0.95), rgba(78,122,255,0.65)) !important; } [data-theme="dark"] .progress-meta { color: var(--muted) !important; } /* ═══════════════════════════════════════════════════════════════ STANDALONE — resultpagestudent.html specific (panels, schools, filters, breakdown) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .panel { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] .panel .ph { border-bottom-color: var(--border) !important; } [data-theme="dark"] .panel .ph h2 { color: var(--text) !important; } [data-theme="dark"] .school { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] .school:hover { box-shadow: 0 18px 44px rgba(0,0,0,.25) !important; } [data-theme="dark"] .avatar { background: radial-gradient(18px 18px at 30% 30%, rgba(78,122,255,0.25), rgba(78,122,255,0) 60%), rgba(30,38,66,0.3) !important; border-color: var(--border) !important; color: #93b4ff !important; } [data-theme="dark"] .title { color: var(--text) !important; } [data-theme="dark"] .metaLine { color: var(--muted) !important; } [data-theme="dark"] .metaLine a { color: #93b4ff !important; } [data-theme="dark"] .price { color: var(--text) !important; } [data-theme="dark"] .small { color: var(--muted) !important; } [data-theme="dark"] .toggle { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-light) !important; } [data-theme="dark"] .breakdown { border-top-color: var(--border) !important; } [data-theme="dark"] .bdRow { color: var(--text-light) !important; } [data-theme="dark"] .bdRow .k { color: var(--muted) !important; } /* ═══════════════════════════════════════════════════════════════ STANDALONE — studentsearch.html specific (rowItem, tags, seg buttons, selectedList, modal) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --primary-2: #3a63e0; --danger: #f87171; } [data-theme="dark"] .rowItem { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] .rowItem:hover { box-shadow: 0 18px 44px rgba(0,0,0,.2) !important; } [data-theme="dark"] .rowItem.added { border-color: rgba(78,122,255,0.30) !important; box-shadow: 0 18px 50px rgba(78,122,255,0.08) !important; } [data-theme="dark"] .rowTitle { color: var(--text) !important; } [data-theme="dark"] .tag { background: rgba(30,38,66,0.4) !important; border-color: var(--border) !important; color: var(--text-light) !important; } [data-theme="dark"] .tag.primary { background: rgba(78,122,255,0.12) !important; border-color: rgba(78,122,255,0.22) !important; color: #93b4ff !important; } [data-theme="dark"] .tag.good { background: rgba(52,211,153,0.10) !important; border-color: rgba(52,211,153,0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .tag.warn { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.22) !important; color: #fde68a !important; } [data-theme="dark"] .chev { background: var(--surface) !important; border-color: var(--border) !important; color: var(--muted) !important; } [data-theme="dark"] .expand { border-top-color: var(--border) !important; } [data-theme="dark"] .seg button { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-light) !important; } [data-theme="dark"] .seg button:hover { background: var(--panel-hover) !important; } [data-theme="dark"] .seg button.active { background: rgba(78,122,255,0.12) !important; border-color: rgba(78,122,255,0.28) !important; } [data-theme="dark"] .sel { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] .sel .name { color: var(--text) !important; } [data-theme="dark"] .sel .sub { color: var(--muted) !important; } [data-theme="dark"] .searchIcon { background: rgba(78,122,255,0.10) !important; color: #93b4ff !important; } /* studentsearch modal */ [data-theme="dark"] .backdrop { background: rgba(0,0,0,0.6) !important; } [data-theme="dark"] .backdrop .modal { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] .modalHeader { border-bottom-color: var(--border) !important; } [data-theme="dark"] .modalHeader h3 { color: var(--text) !important; } [data-theme="dark"] .modalBody { color: var(--text-light) !important; } /* ═══════════════════════════════════════════════════════════════ STANDALONE — Map.html specific (continents, countries, ocean, chrome bar, side panel) ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --continent: #2a3255; --continentHover: #3a4575; --continentActive: #4e7aff; --country: #2a3255; --countryHover: #3a4575; --countrySelected: #4e7aff; --ocean: #0c1021; --graticule: rgba(78,122,255,0.08); } [data-theme="dark"] .chrome { background: rgba(12,16,33,0.92) !important; backdrop-filter: blur(14px) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .prompt .q { color: var(--text) !important; } [data-theme="dark"] .prompt .qSub { color: var(--muted) !important; } /* Map SVG — scoped to map only, not all SVGs */ [data-theme="dark"] svg.map-svg, [data-theme="dark"] .search-flow-container > svg { background: var(--ocean) !important; } [data-theme="dark"] .continent { stroke: rgba(255, 255, 255, .5) !important; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.35)) drop-shadow(-1px -1px 0px rgba(78,122,255,.15)) !important; } [data-theme="dark"] .continent:hover { filter: drop-shadow(3px 6px 6px rgba(0,0,0,.40)) drop-shadow(-1px -1px 1px rgba(78,122,255,.20)) !important; } [data-theme="dark"] .continent.is-active { filter: drop-shadow(3px 6px 8px rgba(78,122,255,.25)) drop-shadow(-1px -1px 1px rgba(78,122,255,.15)) !important; } [data-theme="dark"] .country { stroke: rgba(255, 255, 255, .35) !important; filter: drop-shadow(1px 3px 2px rgba(0,0,0,.25)) drop-shadow(-1px -1px 0px rgba(78,122,255,.10)) !important; } [data-theme="dark"] .country:hover { filter: drop-shadow(2px 4px 4px rgba(0,0,0,.30)) drop-shadow(-1px -1px 1px rgba(78,122,255,.15)) !important; } /* Map card & header */ [data-theme="dark"] .mapHeader { background: linear-gradient(180deg, var(--panel), rgba(20,24,41,0.95)) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .mapHeader h1 { color: var(--text) !important; } [data-theme="dark"] .mapHeader .hint { color: var(--muted) !important; } /* Side panel */ [data-theme="dark"] .side { background: var(--panel) !important; border-color: var(--border) !important; } [data-theme="dark"] .sideTop { background: var(--surface) !important; } [data-theme="dark"] .sideTop .title { color: var(--text) !important; } [data-theme="dark"] .sideTop .sub { color: var(--muted) !important; } [data-theme="dark"] .controls { background: var(--panel) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .controls .btn { background: var(--surface) !important; } [data-theme="dark"] .controls .btn:hover { background: var(--panel-hover) !important; } /* Map search input */ [data-theme="dark"] .search input { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .meta { background: var(--panel) !important; } /* Country list rows */ [data-theme="dark"] .row:hover { background: rgba(78,122,255,0.06) !important; border-color: var(--border) !important; } [data-theme="dark"] .check { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="dark"] .row.selected .check { border-color: rgba(78,122,255,0.45) !important; background: rgba(78,122,255,0.10) !important; } [data-theme="dark"] .name { color: var(--text) !important; } [data-theme="dark"] .footerNote { background: var(--panel) !important; border-top-color: var(--border) !important; } [data-theme="dark"] .error { background: rgba(248,113,113,0.08) !important; color: #fca5a5 !important; border-top-color: var(--border) !important; } /* ═══════════════════════════════════════════════════════════════ STANDALONE — coordinator/pending_verification.html ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .icon-wrapper { background: linear-gradient(135deg, rgba(78,122,255,0.10), rgba(78,122,255,0.06)) !important; border-color: rgba(78,122,255,0.2) !important; } [data-theme="dark"] h1 { color: var(--text) !important; } [data-theme="dark"] .status-pending { background: rgba(251,191,36,0.08) !important; color: #fde68a !important; border-color: rgba(251,191,36,0.18) !important; } [data-theme="dark"] .status-rejected { background: rgba(248,113,113,0.08) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,0.18) !important; } [data-theme="dark"] p.desc { color: var(--muted) !important; } [data-theme="dark"] .info-item { background: var(--surface) !important; } [data-theme="dark"] .info-item .label { color: var(--muted) !important; } [data-theme="dark"] .info-item .value { color: var(--text) !important; } [data-theme="dark"] .step-done { background: rgba(52,211,153,0.12) !important; color: #6ee7b7 !important; } [data-theme="dark"] .step-current { background: rgba(251,191,36,0.10) !important; color: #fde68a !important; } [data-theme="dark"] .step-pending { background: var(--surface) !important; color: var(--muted) !important; border-color: var(--border) !important; } [data-theme="dark"] .step-text { color: var(--muted) !important; } [data-theme="dark"] .step-text strong { color: var(--text) !important; } [data-theme="dark"] .btn-logout { color: #fca5a5 !important; border-color: rgba(248,113,113,0.18) !important; } [data-theme="dark"] .btn-logout:hover { background: rgba(248,113,113,0.08) !important; } [data-theme="dark"] .footer { color: var(--muted) !important; } [data-theme="dark"] .footer a { color: #93b4ff !important; } /* ═══════════════════════════════════════════════════════════════ LANDING PAGE — additional overrides for inline whites ═══════════════════════════════════════════════════════════════ */ /* Article category label on landing page */ [data-theme="dark"] .article-category { background: var(--surface) !important; color: var(--text-light) !important; } /* Article body text on landing */ [data-theme="dark"] .article-body h3 { color: var(--text) !important; } [data-theme="dark"] .article-body p { color: var(--text-light) !important; } [data-theme="dark"] .article-body .article-meta { color: var(--muted) !important; } [data-theme="dark"] .article-body a { color: #93b4ff !important; } /* Hero section adjustments */ [data-theme="dark"] .hero-content { color: var(--text) !important; } /* CTA sections */ [data-theme="dark"] .cta-section { background: var(--surface) !important; border-color: var(--border) !important; } [data-theme="dark"] .cta-section h2 { color: var(--text) !important; } [data-theme="dark"] .cta-section p { color: var(--text-light) !important; } /* Input styling on landing page */ [data-theme="dark"] .search-input { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* Feature descriptions */ [data-theme="dark"] .feature-desc { color: var(--text-light) !important; } /* Step descriptions */ [data-theme="dark"] .step-desc { color: var(--text-light) !important; } /* ═══════════════════════════════════════════════════════════════ CATCH-ALL — inline dark-on-dark text overrides Some JS-rendered templates use inline style="color: rgba(11,18,32,...)" which would be invisible on dark backgrounds ═══════════════════════════════════════════════════════════════ */ /* Inline style dark text on JS-rendered elements */ [data-theme="dark"] [style*="color: rgba(11,18,32"], [data-theme="dark"] [style*="color:rgba(11,18,32"], [data-theme="dark"] [style*="color: rgba(15,23,42"], [data-theme="dark"] [style*="color:rgba(15,23,42"], [data-theme="dark"] [style*="color: rgba(127,29,29"], [data-theme="dark"] [style*="color:rgba(127,29,29"], [data-theme="dark"] [style*="color: rgba(120,53,15"], [data-theme="dark"] [style*="color:rgba(120,53,15"], [data-theme="dark"] [style*="color: rgba(20,83,45"], [data-theme="dark"] [style*="color:rgba(20,83,45"], [data-theme="dark"] [style*="color: rgba(15,92,42"], [data-theme="dark"] [style*="color:rgba(15,92,42"], [data-theme="dark"] [style*="color: rgba(124,76,0"], [data-theme="dark"] [style*="color:rgba(124,76,0"], [data-theme="dark"] [style*="color: #0b1220"], [data-theme="dark"] [style*="color:#0b1220"], [data-theme="dark"] [style*="color: #111827"], [data-theme="dark"] [style*="color:#111827"], [data-theme="dark"] [style*="color: #1a1a2e"], [data-theme="dark"] [style*="color:#1a1a2e"] { color: var(--text-light) !important; } /* Inline style dark badge backgrounds → dark versions */ [data-theme="dark"] [style*="background: rgba(239,68,68"], [data-theme="dark"] [style*="background:rgba(239,68,68"], [data-theme="dark"] [style*="background: #fef2f2"], [data-theme="dark"] [style*="background:#fef2f2"] { background: rgba(248,113,113,0.08) !important; color: #fca5a5 !important; } [data-theme="dark"] [style*="background: #fffbeb"], [data-theme="dark"] [style*="background:#fffbeb"], [data-theme="dark"] [style*="background: rgba(245,158,11"], [data-theme="dark"] [style*="background:rgba(245,158,11"] { background: rgba(251,191,36,0.08) !important; color: #fde68a !important; } [data-theme="dark"] [style*="background: #dcfce7"], [data-theme="dark"] [style*="background:#dcfce7"], [data-theme="dark"] [style*="background: rgba(22,163,74"], [data-theme="dark"] [style*="background:rgba(22,163,74"] { background: rgba(52,211,153,0.08) !important; color: #6ee7b7 !important; } /* Inline border colors on standalone pages */ [data-theme="dark"] [style*="border-color: rgba(15,23,42"], [data-theme="dark"] [style*="border-color:rgba(15,23,42"], [data-theme="dark"] [style*="border: 1px solid rgba(15,23,42"], [data-theme="dark"] [style*="border:1px solid rgba(15,23,42"] { border-color: var(--border) !important; } /* Ensure all headings on all pages have light text */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text); } /* Ensure body text is light globally */ [data-theme="dark"] p { color: var(--text-light); } /* Ensure select elements get dark treatment */ [data-theme="dark"] select { background-color: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] select option { background-color: var(--surface); color: var(--text); } /* ═══════════════════════════════════════════════════════════════ GLOBAL TEXT — force ALL text white/light in dark mode No element should ever show dark text on dark background ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] div, [data-theme="dark"] span, [data-theme="dark"] p, [data-theme="dark"] a, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] label, [data-theme="dark"] legend, [data-theme="dark"] dt, [data-theme="dark"] dd, [data-theme="dark"] figcaption, [data-theme="dark"] blockquote, [data-theme="dark"] small, [data-theme="dark"] strong, [data-theme="dark"] em, [data-theme="dark"] b, [data-theme="dark"] i { color: #ffffff; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #ffffff !important; } /* Muted / secondary text — still visible but softer */ [data-theme="dark"] .muted, [data-theme="dark"] .hint, [data-theme="dark"] .sub, [data-theme="dark"] .small, [data-theme="dark"] .meta, [data-theme="dark"] .text-muted, [data-theme="dark"] .text-light, [data-theme="dark"] .desc, [data-theme="dark"] p.desc, [data-theme="dark"] .subtitle, [data-theme="dark"] .auth-footer, [data-theme="dark"] .footer, [data-theme="dark"] .article-footer, [data-theme="dark"] .footerNote, [data-theme="dark"] .step-text, [data-theme="dark"] .info-item .label, [data-theme="dark"] .progress-meta, [data-theme="dark"] .side-card .v, [data-theme="dark"] .metaLine, [data-theme="dark"] .bdRow .k, [data-theme="dark"] .item .m, [data-theme="dark"] .brand p, [data-theme="dark"] .prompt .qSub, [data-theme="dark"] .auth-brand p, [data-theme="dark"] .sel .sub { color: #a0a8c0 !important; } /* Links — keep primary blue */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-item) { color: #93b4ff; } /* Placeholder text */ [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #8090b0 !important; } /* Override any inline style dark text colors */ [data-theme="dark"] [style*="color: rgba(11,18,32"], [data-theme="dark"] [style*="color:rgba(11,18,32"], [data-theme="dark"] [style*="color: rgba(15,23,42"], [data-theme="dark"] [style*="color:rgba(15,23,42"], [data-theme="dark"] [style*="color: rgba(127,29,29"], [data-theme="dark"] [style*="color:rgba(127,29,29"], [data-theme="dark"] [style*="color: rgba(120,53,15"], [data-theme="dark"] [style*="color:rgba(120,53,15"], [data-theme="dark"] [style*="color: rgba(20,83,45"], [data-theme="dark"] [style*="color:rgba(20,83,45"], [data-theme="dark"] [style*="color: rgba(15,92,42"], [data-theme="dark"] [style*="color:rgba(15,92,42"], [data-theme="dark"] [style*="color: rgba(124,76,0"], [data-theme="dark"] [style*="color:rgba(124,76,0"], [data-theme="dark"] [style*="color: #0b1220"], [data-theme="dark"] [style*="color:#0b1220"], [data-theme="dark"] [style*="color: #111827"], [data-theme="dark"] [style*="color:#111827"], [data-theme="dark"] [style*="color: #1a1a2e"], [data-theme="dark"] [style*="color:#1a1a2e"], [data-theme="dark"] [style*="color: #1e293b"], [data-theme="dark"] [style*="color:#1e293b"], [data-theme="dark"] [style*="color: #92400e"], [data-theme="dark"] [style*="color:#92400e"], [data-theme="dark"] [style*="color: #991b1b"], [data-theme="dark"] [style*="color:#991b1b"], [data-theme="dark"] [style*="color: #166534"], [data-theme="dark"] [style*="color:#166534"] { color: #e0e4ef !important; } /* ═══════════════════════════════════════════════════════════════ GLOBAL OUTLINES — white/light border on ALL boxes Every card, panel, input, button, modal, sidebar, popover ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .auth-card, [data-theme="dark"] .school, [data-theme="dark"] .item, [data-theme="dark"] .rowItem, [data-theme="dark"] .sel, [data-theme="dark"] .side-card, [data-theme="dark"] .chip, [data-theme="dark"] .pill, [data-theme="dark"] .badge, [data-theme="dark"] .tag, [data-theme="dark"] .toast, [data-theme="dark"] .modal, [data-theme="dark"] .article-container, [data-theme="dark"] .faq-item, [data-theme="dark"] .school-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .step-card, [data-theme="dark"] .resource-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .search-panel, [data-theme="dark"] .filter-section, [data-theme="dark"] .cta-box, [data-theme="dark"] .tip-box, [data-theme="dark"] .ext-banner, [data-theme="dark"] .hero-badge, [data-theme="dark"] .info-item, [data-theme="dark"] .wrapper .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .icon-wrapper, [data-theme="dark"] .status-badge, [data-theme="dark"] .step-num, [data-theme="dark"] .progress-shell, [data-theme="dark"] .avatar, [data-theme="dark"] .toggle, [data-theme="dark"] .side { border: 1px solid rgba(255, 255, 255, .18) !important; } /* Buttons — white outline */ [data-theme="dark"] .btn:not(.ia-btn):not(.nav-link):not(.btn-confirm):not(.btn-cancel):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-primary), [data-theme="dark"] button:not(.ia-btn):not(.nav-link):not(.ia-choice-btn):not(.student-hamburger):not(.hamburger-btn):not(.drawer-close):not(.drawer-close-btn):not(.toast-close):not(.notification-close):not(.alert-close):not(.modal-close):not(.btn-close):not(.sidebar-toggle):not(.nav-links-btn):not(.nav-link-btn):not(.attach-btn):not(.btn-confirm):not(.btn-cancel):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-primary), [data-theme="dark"] .seg button, [data-theme="dark"] .hamburger, [data-theme="dark"] .chev, [data-theme="dark"] .resend-link, [data-theme="dark"] .login-btn--outline { border: 1px solid rgba(255, 255, 255, .18) !important; } /* Nav buttons (Resources, FAQ, Contact, Logout) — no border */ [data-theme="dark"] .nav-links button, [data-theme="dark"] .nav-link-btn, [data-theme="dark"] button.nav-link, [data-theme="dark"] .nav-link.logout { border: none !important; box-shadow: none !important; } /* Icon-only menu and dismiss buttons stay frameless in dark mode. */ [data-theme="dark"] button.hamburger-btn, [data-theme="dark"] button.drawer-close, [data-theme="dark"] button.drawer-close-btn, [data-theme="dark"] button.student-hamburger, [data-theme="dark"] button.sidebar-toggle, [data-theme="dark"] button.toast-close, [data-theme="dark"] button.notification-close, [data-theme="dark"] button.alert-close, [data-theme="dark"] button.btn-close, [data-theme="dark"] .modal-close { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } [data-theme="dark"] button.hamburger-btn:focus:not(:focus-visible), [data-theme="dark"] button.drawer-close:focus:not(:focus-visible), [data-theme="dark"] button.drawer-close-btn:focus:not(:focus-visible), [data-theme="dark"] button.student-hamburger:focus:not(:focus-visible), [data-theme="dark"] button.sidebar-toggle:focus:not(:focus-visible), [data-theme="dark"] button.toast-close:focus:not(:focus-visible), [data-theme="dark"] button.notification-close:focus:not(:focus-visible), [data-theme="dark"] button.alert-close:focus:not(:focus-visible), [data-theme="dark"] button.btn-close:focus:not(:focus-visible), [data-theme="dark"] .modal-close:focus:not(:focus-visible), [data-theme="dark"] button.hamburger-btn:active, [data-theme="dark"] button.drawer-close:active, [data-theme="dark"] button.drawer-close-btn:active, [data-theme="dark"] button.student-hamburger:active, [data-theme="dark"] button.sidebar-toggle:active, [data-theme="dark"] button.toast-close:active, [data-theme="dark"] button.notification-close:active, [data-theme="dark"] button.alert-close:active, [data-theme="dark"] button.btn-close:active, [data-theme="dark"] .modal-close:active { outline: 0 !important; box-shadow: none !important; } /* IA toggle buttons — each button is its own pill, no extra borders */ [data-theme="dark"] .ia-btn { border: none !important; background: transparent !important; color: rgba(255, 255, 255, .5) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .ia-btn.available[data-ia-choice="with"]:hover { background: rgba(22, 163, 74, .12) !important; color: #4ade80 !important; box-shadow: inset 0 0 0 1.5px #22c55e !important; } [data-theme="dark"] .ia-btn.available[data-ia-choice="without"]:hover { background: rgba(239, 68, 68, .10) !important; color: #fca5a5 !important; box-shadow: inset 0 0 0 1.5px #ef4444 !important; } [data-theme="dark"] .ia-btn.selected-ia[data-ia-choice="with"] { background: #16a34a !important; color: #fff !important; box-shadow: none !important; } [data-theme="dark"] .ia-btn.selected-ia[data-ia-choice="without"] { background: #dc2626 !important; color: #fff !important; box-shadow: none !important; } /* Primary buttons keep their existing border but slightly brighter */ [data-theme="dark"] .btn.primary, [data-theme="dark"] .btn-primary { border: 1px solid rgba(78, 122, 255, .5) !important; } [data-theme="dark"] .btn.danger, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-logout { border: 1px solid rgba(248, 113, 113, .4) !important; } [data-theme="dark"] .btn-success, [data-theme="dark"] .btn.success { border: 1px solid rgba(52, 211, 153, .4) !important; } /* Inputs — white outline */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] textarea, [data-theme="dark"] .form-control, [data-theme="dark"] select, [data-theme="dark"] select.form-control { border: 1.5px solid rgba(255, 255, 255, .18) !important; color: #ffffff !important; } /* Enhanced form component triggers & popovers */ [data-theme="dark"] .fe-select-trigger, [data-theme="dark"] .fe-phone-trigger, [data-theme="dark"] .fe-pills-trigger, [data-theme="dark"] .fe-phone-btn { border: 1.5px solid rgba(255, 255, 255, .18) !important; color: #ffffff !important; } [data-theme="dark"] .fe-select-popover, [data-theme="dark"] .fe-phone-popover, [data-theme="dark"] .fe-calendar-popover, [data-theme="dark"] .fe-calendar { border: 1px solid rgba(255, 255, 255, .18) !important; } /* Checkbox & toggle */ [data-theme="dark"] .fe-checkbox-box, [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] .check { border: 2px solid rgba(255, 255, 255, .25) !important; } [data-theme="dark"] .fe-toggle-track { border: 1px solid rgba(255, 255, 255, .18) !important; } /* OTP boxes */ [data-theme="dark"] .otp-box { border: 2px solid rgba(255, 255, 255, .20) !important; color: #ffffff !important; } [data-theme="dark"] .otp-box:focus { border-color: var(--primary) !important; } [data-theme="dark"] .otp-box.filled { border-color: var(--primary) !important; } /* Tables */ [data-theme="dark"] table:not(.subj-table) { border: 1px solid rgba(255, 255, 255, .15) !important; } [data-theme="dark"] .subj-table { border: none !important; } [data-theme="dark"] th, [data-theme="dark"] td { border-bottom: 1px solid rgba(255, 255, 255, .10) !important; color: #ffffff !important; } [data-theme="dark"] th { color: #a0a8c0 !important; } /* Sidebar, topbar, chrome bar outlines */ [data-theme="dark"] .sidebar { border-right: 1px solid rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .topbar, [data-theme="dark"] .top-bar, [data-theme="dark"] .chrome { border-bottom: 1px solid rgba(255, 255, 255, .12) !important; } /* Card internal borders (head sections) */ [data-theme="dark"] .card .head, [data-theme="dark"] .cardHeader, [data-theme="dark"] .panel .ph, [data-theme="dark"] .mapHeader, [data-theme="dark"] .sideTop, [data-theme="dark"] .modal .mh, [data-theme="dark"] .modalHeader { border-bottom: 1px solid rgba(255, 255, 255, .12) !important; } /* Dividers */ [data-theme="dark"] .divider, [data-theme="dark"] .breakdown { border-color: rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .12) !important; } [data-theme="dark"] hr { border-color: rgba(255, 255, 255, .12) !important; } /* Search bars */ [data-theme="dark"] .search { border: 1px solid rgba(255, 255, 255, .18) !important; } /* Map elements */ [data-theme="dark"] .controls { border-bottom: 1px solid rgba(255, 255, 255, .12) !important; } [data-theme="dark"] .footerNote { border-top: 1px solid rgba(255, 255, 255, .12) !important; } /* Expand sections */ [data-theme="dark"] .expand { border-top: 1px solid rgba(255, 255, 255, .10) !important; } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .footer { border-top: 1px solid rgba(255, 255, 255, .10) !important; } /* Mobile top */ [data-theme="dark"] .mobile-top { border-bottom: 1px solid rgba(255, 255, 255, .12) !important; } /* ── IA Permitted / Not Permitted indicators ── */ /* coordinator/offerings.html */ [data-theme="dark"] .ia-indicator.yes { background: rgba(52, 211, 153, .10) !important; color: #6ee7b7 !important; border: 1px solid rgba(52, 211, 153, .25) !important; } [data-theme="dark"] .ia-indicator.no { background: rgba(248, 113, 113, .10) !important; color: #fca5a5 !important; border: 1px solid rgba(248, 113, 113, .25) !important; } /* student/select_subjects.html */ [data-theme="dark"] .offering-ia.yes { background: rgba(52, 211, 153, .10) !important; color: #6ee7b7 !important; border: 1px solid rgba(52, 211, 153, .25) !important; } [data-theme="dark"] .offering-ia.no { background: rgba(248, 113, 113, .10) !important; color: #fca5a5 !important; border: 1px solid rgba(248, 113, 113, .25) !important; } /* ── Coverage badges (search results page) ── */ [data-theme="dark"] .coverage-badge.complete { background: rgba(52, 211, 153, .12) !important; color: #6ee7b7 !important; border: 1px solid rgba(52, 211, 153, .30) !important; } [data-theme="dark"] .coverage-badge.partial { background: rgba(248, 113, 113, .10) !important; color: #fca5a5 !important; border: 1px solid rgba(248, 113, 113, .30) !important; } [data-theme="dark"] .partial-warn { background: rgba(248, 113, 113, .08) !important; border-color: rgba(248, 113, 113, .22) !important; color: #fca5a5 !important; } [data-theme="dark"] .partial-warn strong { color: #fca5a5 !important; } [data-theme="dark"] .subject-row { background: rgba(255, 255, 255, .04) !important; } /* ── Notification icons & items ── */ [data-theme="dark"] .notif-icon.info { background: rgba(78, 122, 255, .14) !important; color: #93b4ff !important; } [data-theme="dark"] .notif-icon.success { background: rgba(52, 211, 153, .14) !important; color: #6ee7b7 !important; } [data-theme="dark"] .notif-icon.warning { background: rgba(251, 191, 36, .14) !important; color: #fde68a !important; } [data-theme="dark"] .notif-icon.error { background: rgba(248, 113, 113, .14) !important; color: #fca5a5 !important; } [data-theme="dark"] .notif-item { background: var(--panel) !important; border-color: rgba(255, 255, 255, .10) !important; } [data-theme="dark"] .notif-item.unread { background: rgba(78, 122, 255, .06) !important; border-color: rgba(78, 122, 255, .22) !important; } [data-theme="dark"] .notif-title { color: #ffffff !important; } [data-theme="dark"] .notif-text { color: #a0a8c0 !important; } [data-theme="dark"] .notif-meta { color: #7a829e !important; } /* ── Session lock banner (school_detail "confirmed place" banner) ── */ [data-theme="dark"] .session-lock-banner { background: linear-gradient(135deg, rgba(251, 191, 36, .08), rgba(251, 191, 36, .05)) !important; border-color: rgba(251, 191, 36, .30) !important; } [data-theme="dark"] .session-lock-banner svg { stroke: #fbbf24 !important; } [data-theme="dark"] .session-lock-banner .slb-title { color: #fde68a !important; } [data-theme="dark"] .session-lock-banner .slb-text { color: #d4d8e8 !important; } [data-theme="dark"] .session-lock-banner .slb-text a { color: #fde68a !important; } /* ── Coordinator notes banner (school_detail notes) ── */ [data-theme="dark"] .coord-notes-banner { background: linear-gradient(135deg, rgba(139, 92, 246, .10), rgba(139, 92, 246, .06)) !important; border-color: rgba(139, 92, 246, .35) !important; } [data-theme="dark"] .coord-notes-banner svg { stroke: #a78bfa !important; } [data-theme="dark"] .coord-notes-banner div[data-i18n="det_coordinator_notes"] { color: #c4b5fd !important; } [data-theme="dark"] .coord-notes-banner div[style*="color:#5b21b6"] { color: #a78bfa !important; } [data-theme="dark"] .coord-notes-banner div[style*="color:#4c1d95"] { color: #d4d8e8 !important; } [data-theme="dark"] .coord-notes-banner span[style*="background:rgba(22,163,74"] { background: rgba(74, 222, 128, .15) !important; color: #4ade80 !important; } /* ── Leaflet mini-map — dark tiles ── */ [data-theme="dark"] .mini-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(1.1) !important; } [data-theme="dark"] .mini-map .leaflet-marker-icon, [data-theme="dark"] .mini-map .leaflet-marker-shadow { filter: invert(1) hue-rotate(180deg) !important; } /* Popup — white bg, black text */ [data-theme="dark"] .mini-map .leaflet-popup-content-wrapper { background: #ffffff !important; color: #1a1a1a !important; filter: none !important; } [data-theme="dark"] .mini-map .leaflet-popup-tip { background: #ffffff !important; filter: none !important; } [data-theme="dark"] .mini-map .leaflet-popup-content { color: #1a1a1a !important; } [data-theme="dark"] .mini-map .leaflet-popup-content * { color: #1a1a1a !important; } [data-theme="dark"] .mini-map .leaflet-popup-close-button { color: #666666 !important; } /* Zoom controls — black text on white bg */ [data-theme="dark"] .mini-map .leaflet-control-zoom { filter: none !important; border: 2px solid rgba(0,0,0,.2) !important; } [data-theme="dark"] .mini-map .leaflet-control-zoom a { background-color: #ffffff !important; color: #000000 !important; border-color: #cccccc !important; filter: none !important; } [data-theme="dark"] .mini-map .leaflet-control-zoom a span { color: #000000 !important; } [data-theme="dark"] .mini-map .leaflet-control-zoom-in, [data-theme="dark"] .mini-map .leaflet-control-zoom-out { background-color: #ffffff !important; color: #000000 !important; filter: none !important; } [data-theme="dark"] .mini-map .leaflet-control-attribution { background: rgba(12, 16, 33, .8) !important; color: #7a829e !important; } [data-theme="dark"] .mini-map .leaflet-control-attribution a { color: #93b4ff !important; } /* Article pages: keep FAQ rows and final CTA quiet, not boxed callouts. */ [data-theme="dark"] .article-container .cta-box { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .article-container .cta-box p + p { color: #e0e4ef !important; } [data-theme="dark"] .article-container details.faq-item { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 0 !important; } [data-theme="dark"] .article-container details.faq-item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .18) !important; } [data-theme="dark"] .article-container details.faq-item[open] { border-color: rgba(255, 255, 255, .24) !important; } [data-theme="dark"] .article-container details.faq-item summary::after { border-color: rgba(255, 255, 255, .18) !important; color: #93b4ff !important; }