/* ========================================================================== SPUP Guidance — Unified Dark Mode Activated by adding the `dark-mode` class to (or ). The class is applied by a blocking head script before paint to avoid FOUC. ========================================================================== */ :root { /* ── Dark palette (kept for backward-compat with existing overrides) ── */ --dm-bg: #0f141b; --dm-surface: #1a2230; --dm-surface-2: #222b3b; --dm-elevated: #2a3445; --dm-border: #2c3648; --dm-border-soft: #232c3c; --dm-text: #e4e9f2; --dm-text-soft: #b6c0d2; --dm-text-muted:#8693a8; --dm-accent: #6c8cff; --dm-accent-soft: #2c3b6e; --dm-success: #4ade80; --dm-warning: #fbbf24; --dm-danger: #f87171; --dm-info: #60a5fa; /* ── Semantic tokens — light mode values ── Consume var(--surface) / var(--text) / ... in our own CSS so every element follows the active theme automatically. */ --app-bg: #ffffff; --surface: #ffffff; --surface-2: #f5f7fa; --elevated: #eef2f7; --border: #e2e8f0; --border-soft: #eef2f6; --text: #263238; --text-soft: #546e7a; --text-muted: #90a4ae; --accent: #3949ab; --accent-soft: #e6f0ff; --success: #2e7d32; --warning: #f57f17; --danger: #c62828; --danger-soft: #fce4ec; --info: #1565c0; } /* ── Semantic tokens — dark mode values (swap the whole palette) ── */ .dark-mode { --app-bg: var(--dm-bg); --surface: var(--dm-surface); --surface-2: var(--dm-surface-2); --elevated: var(--dm-elevated); --border: var(--dm-border); --border-soft: var(--dm-border-soft); --text: var(--dm-text); --text-soft: var(--dm-text-soft); --text-muted: var(--dm-text-muted); --accent: var(--dm-accent); --accent-soft: var(--dm-accent-soft); --success: var(--dm-success); --warning: var(--dm-warning); --danger: var(--dm-danger); --danger-soft: rgba(248, 113, 113, 0.16); --info: var(--dm-info); } /* ===== Base ============================================================= */ .dark-mode, .dark-mode body { background: var(--dm-bg) !important; color: var(--dm-text) !important; } .dark-mode .app, .dark-mode .layout, .dark-mode .page-container, .dark-mode .main-content, .dark-mode .container-fluid { background: var(--dm-bg) !important; color: var(--dm-text) !important; } /* Generic text colors that often slip through */ .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6, .dark-mode label, .dark-mode p, .dark-mode span, .dark-mode small, .dark-mode strong, .dark-mode div, .dark-mode li { color: inherit; } .dark-mode .text-dark, .dark-mode .text-body, .dark-mode .text-default, .dark-mode .text-black, .dark-mode .text-gray, .dark-mode .text-secondary { color: var(--dm-text-soft) !important; } .dark-mode .text-muted { color: var(--dm-text-muted) !important; } .dark-mode a { color: #9bb3ff; } .dark-mode a:hover { color: #b9caff; } .dark-mode hr { border-color: var(--dm-border) !important; } /* ===== Header =========================================================== */ .dark-mode .header { background: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-border) !important; box-shadow: none !important; } .dark-mode .logo .spup-logo-text, .dark-mode .header a, .dark-mode .header .nav-right > li > a, .dark-mode .header .nav-left > li > a { color: var(--dm-text) !important; } .dark-mode .header .anticon { color: var(--dm-text-soft) !important; } /* ===== Sidebar ========================================================== */ .dark-mode .side-nav { background: var(--dm-surface) !important; border-right: 1px solid var(--dm-border) !important; } .dark-mode .side-nav .side-nav-inner { background: transparent !important; } .dark-mode .side-nav-menu > li > a, .dark-mode .side-nav-menu .dropdown-menu li a { color: var(--dm-text-soft) !important; } .dark-mode .side-nav-menu > li > a .icon-holder, .dark-mode .side-nav-menu > li > a i { color: var(--dm-text-muted) !important; } .dark-mode .side-nav-menu > li > a:hover, .dark-mode .side-nav-menu .dropdown-menu li a:hover, .dark-mode .side-nav-menu > li.open > a, .dark-mode .side-nav-menu > li.active > a { color: #fff !important; background: rgba(108, 140, 255, 0.10) !important; } .dark-mode .side-nav-menu > li.active > a .icon-holder, .dark-mode .side-nav-menu > li.open > a .icon-holder, .dark-mode .side-nav-menu > li > a:hover .icon-holder { color: var(--dm-accent) !important; } .dark-mode .side-nav-menu .dropdown-menu { background: var(--dm-surface-2) !important; } .dark-mode .side-nav-menu .nav-text { color: inherit !important; } /* ===== Cards ============================================================ */ .dark-mode .card, .dark-mode .info-card, .dark-mode .news-sidebar-card, .dark-mode .panel { background: var(--dm-surface) !important; border: 1px solid var(--dm-border-soft) !important; color: var(--dm-text) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } .dark-mode .card-header, .dark-mode .card-footer { background: transparent !important; border-color: var(--dm-border-soft) !important; color: var(--dm-text-soft) !important; } .dark-mode .card-body { color: var(--dm-text) !important; } .dark-mode .card-title, .dark-mode .card-header h1, .dark-mode .card-header h2, .dark-mode .card-header h3, .dark-mode .card-header h4, .dark-mode .card-header h5 { color: var(--dm-text) !important; } /* ===== Tables =========================================================== */ .dark-mode .table { color: var(--dm-text) !important; } .dark-mode .table th, .dark-mode .table td { border-color: var(--dm-border-soft) !important; color: var(--dm-text) !important; } .dark-mode .table thead th { background: var(--dm-surface-2) !important; color: var(--dm-text-soft) !important; border-color: var(--dm-border) !important; } .dark-mode .table-bordered, .dark-mode .table-bordered th, .dark-mode .table-bordered td { border-color: var(--dm-border-soft) !important; } .dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; } .dark-mode .table tbody tr:hover td, .dark-mode .table-hover tbody tr:hover { background: rgba(108,140,255,0.06) !important; } .dark-mode .table-borderless td { background: transparent !important; } /* ===== DataTables ======================================================= */ .dark-mode .dataTables_wrapper, .dark-mode .dataTables_wrapper .dataTables_length, .dark-mode .dataTables_wrapper .dataTables_filter, .dark-mode .dataTables_wrapper .dataTables_info, .dark-mode .dataTables_wrapper .dataTables_processing, .dark-mode .dataTables_wrapper .dataTables_paginate { color: var(--dm-text-soft) !important; } .dark-mode .dataTables_wrapper .dataTables_filter input, .dark-mode .dataTables_wrapper .dataTables_length select { background: var(--dm-surface-2) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; border-radius: 6px; padding: 4px 10px; } .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--dm-text-soft) !important; background: var(--dm-surface-2) !important; border: 1px solid var(--dm-border) !important; border-radius: 6px !important; margin: 0 2px; } .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--dm-elevated) !important; color: #fff !important; border-color: var(--dm-accent) !important; } .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--dm-accent) !important; color: #fff !important; border-color: var(--dm-accent) !important; } .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { background: var(--dm-surface) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border-soft) !important; opacity: 0.55; } /* ===== Forms ============================================================ */ .dark-mode .form-control, .dark-mode select.form-control, .dark-mode textarea.form-control { background: var(--dm-surface-2) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .form-control:focus { background: var(--dm-elevated) !important; border-color: var(--dm-accent) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(108,140,255,0.15) !important; } .dark-mode .form-control::placeholder { color: var(--dm-text-muted) !important; } .dark-mode .input-group-text, .dark-mode .input-group-addon { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text-soft) !important; } .dark-mode .input-affix .prefix-icon, .dark-mode .input-affix .suffix-icon { color: var(--dm-text-muted) !important; } .dark-mode label, .dark-mode .col-form-label, .dark-mode .form-label { color: var(--dm-text-soft) !important; } .dark-mode .custom-control-label { color: var(--dm-text) !important; } /* ===== Buttons ========================================================== */ .dark-mode .btn-default, .dark-mode .btn-light { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .btn-default:hover, .dark-mode .btn-light:hover { background: var(--dm-elevated) !important; color: #fff !important; } .dark-mode .btn-primary { background: #4a6cf7 !important; border-color: #4a6cf7 !important; color: #fff !important; } .dark-mode .btn-primary:hover { background: #5b7cff !important; border-color: #5b7cff !important; } .dark-mode .btn-secondary { background: #3a4458 !important; border-color: #3a4458 !important; color: var(--dm-text) !important; } .dark-mode .btn-success { background: #2e9e5b !important; border-color: #2e9e5b !important; color:#fff !important; } .dark-mode .btn-warning { background: #d4a017 !important; border-color: #d4a017 !important; color:#1a1a1a !important; } .dark-mode .btn-danger { background: #d93b4f !important; border-color: #d93b4f !important; color:#fff !important; } .dark-mode .btn-info { background: #2b7eb3 !important; border-color: #2b7eb3 !important; color:#fff !important; } .dark-mode .btn-link { color: var(--dm-accent) !important; } .dark-mode .btn-outline-danger { background: rgba(217,59,79,0.08) !important; border-color: #8a3340 !important; color: #ff8a9b !important; } .dark-mode .btn-outline-danger:hover, .dark-mode .btn-outline-danger:focus, .dark-mode .btn-outline-danger:active { background: rgba(217,59,79,0.20) !important; border-color: #b5394b !important; color: #ffa3b1 !important; } .dark-mode .btn-outline-primary { background: rgba(108,140,255,0.08) !important; border-color: #3d5bd1 !important; color: #a9c0ff !important; } .dark-mode .btn-outline-primary:hover, .dark-mode .btn-outline-primary:focus, .dark-mode .btn-outline-primary:active { background: rgba(108,140,255,0.20) !important; border-color: #6c8cff !important; color: #c8d7ff !important; } .dark-mode .btn-outline-secondary { background: transparent !important; border-color: var(--dm-border) !important; color: var(--dm-text-soft) !important; } .dark-mode .btn-outline-secondary:hover, .dark-mode .btn-outline-secondary:focus, .dark-mode .btn-outline-secondary:active { background: var(--dm-elevated) !important; border-color: #3a4659 !important; color: var(--dm-text) !important; } /* ===== Badges =========================================================== */ .dark-mode .badge { color: #fff; } .dark-mode .badge-primary { background: #4a6cf7 !important; color: #fff !important; } .dark-mode .badge-secondary { background: #3a4458 !important; color: var(--dm-text) !important; } .dark-mode .badge-success { background: #2e9e5b !important; color: #fff !important; } .dark-mode .badge-warning { background: #d4a017 !important; color: #1a1a1a !important; } .dark-mode .badge-danger { background: #d93b4f !important; color: #fff !important; } .dark-mode .badge-info { background: #2b7eb3 !important; color: #fff !important; } .dark-mode .badge-light { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border:1px solid var(--dm-border); } /* ===== Alerts =========================================================== */ .dark-mode .alert-info { background: rgba(96,165,250,0.10) !important; border-color: rgba(96,165,250,0.30) !important; color: #b9d4fb !important; } .dark-mode .alert-warning { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.30) !important; color: #fde68a !important; } .dark-mode .alert-success { background: rgba(74,222,128,0.10) !important; border-color: rgba(74,222,128,0.30) !important; color: #bbf7d0 !important; } .dark-mode .alert-danger { background: rgba(248,113,113,0.10) !important; border-color: rgba(248,113,113,0.30) !important; color: #fecaca !important; } /* ===== Modals & Dropdowns =============================================== */ .dark-mode .modal-content { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .modal-header, .dark-mode .modal-footer { border-color: var(--dm-border-soft) !important; } .dark-mode .modal-title { color: var(--dm-text) !important; } .dark-mode .close { color: var(--dm-text) !important; text-shadow: none !important; } .dark-mode .dropdown-menu { background: var(--dm-surface-2) !important; border: 1px solid var(--dm-border) !important; } .dark-mode .dropdown-menu .dropdown-item { color: var(--dm-text-soft) !important; } .dark-mode .dropdown-menu .dropdown-item:hover, .dark-mode .dropdown-menu .dropdown-item:focus { background: rgba(108,140,255,0.10) !important; color: #fff !important; } .dark-mode .pop-profile { background: var(--dm-surface-2) !important; } .dark-mode .pop-profile .border-bottom { border-color: var(--dm-border-soft) !important; } .dark-mode .user-level { color: var(--dm-text-muted) !important; } /* ===== Page header ====================================================== */ .dark-mode .page-header h2, .dark-mode .header-title, .dark-mode .page-header-title { color: var(--dm-text) !important; } /* ===== Footer =========================================================== */ .dark-mode .footer { background: var(--dm-surface) !important; border-top: 1px solid var(--dm-border) !important; color: var(--dm-text-muted) !important; } .dark-mode .footer a, .dark-mode .footer .text-gray { color: var(--dm-text-muted) !important; } .dark-mode .footer a:hover { color: var(--dm-text-soft) !important; } /* ===== Misc components used in this app ================================== */ .dark-mode .schedule-item, .dark-mode .news-item { background: var(--dm-surface-2) !important; border-color: var(--dm-border-soft) !important; color: var(--dm-text) !important; } .dark-mode .student-welcome-card { background: linear-gradient(135deg, #1b2b4d 0%, #243766 60%, #2c4486 100%) !important; color: #fff !important; } /* Cumulative-forms department cards */ .dark-mode .dept-cf-card { background: var(--dm-surface) !important; border: 1px solid var(--dm-border-soft) !important; color: var(--dm-text) !important; } .dark-mode .dept-cf-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important; border-color: var(--dm-accent) !important; } .dark-mode .dept-cf-card .dept-icon { background: rgba(108,140,255,0.12) !important; color: #9bb3ff !important; } .dark-mode .dept-cf-card .dept-cf-code { color: #9bb3ff !important; } .dark-mode .dept-cf-card .dept-cf-title { color: var(--dm-text-soft) !important; } .dark-mode .dept-cf-card .dept-cf-badge { background: rgba(108,140,255,0.15) !important; color: #b9caff !important; } .dark-mode .dept-cf-card .dept-cf-badge.zero { background: rgba(255,255,255,0.06) !important; color: var(--dm-text-muted) !important; } .dark-mode .dept-cf-card .dept-cf-arrow { color: var(--dm-text-muted) !important; } /* Welcome card subdued admin pill */ .dark-mode .student-welcome-card .badge, .dark-mode .welcome-card .badge { background: rgba(255,255,255,0.18) !important; color: #fff !important; } /* Borders & misc */ .dark-mode .border, .dark-mode .border-top, .dark-mode .border-right, .dark-mode .border-bottom, .dark-mode .border-left { border-color: var(--dm-border-soft) !important; } /* List groups */ .dark-mode .list-group-item { background: var(--dm-surface) !important; border-color: var(--dm-border-soft) !important; color: var(--dm-text) !important; } /* Nav tabs / pills */ .dark-mode .nav-tabs { border-bottom-color: var(--dm-border) !important; } .dark-mode .nav-tabs .nav-link { color: var(--dm-text-soft) !important; border-color: transparent !important; } .dark-mode .nav-tabs .nav-link.active { background: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-surface) !important; } /* Theme toggle button */ .dark-mode #theme-toggle { color: #f5c518 !important; } :not(.dark-mode) > #theme-toggle, html:not(.dark-mode) #theme-toggle { color: #546e7a; } #theme-toggle:focus, #theme-toggle:active { outline: none !important; box-shadow: none !important; } /* Charts — soften colors only via canvas containers; canvases use their own configs */ .dark-mode canvas { filter: none; } /* Code blocks */ .dark-mode pre, .dark-mode code { background: var(--dm-surface-2) !important; color: #d6e0f0 !important; } /* ======================================================================== Page-specific component overrides (Department list, Cumulative tables, Schedule pages, Forms, etc.). These use high-specificity selectors with !important so they override the inline light styles baked into blades. ======================================================================== */ /* ----- Department Management list ---------------------------------------- */ .dark-mode .dept-card { background: var(--dm-surface) !important; border: 1px solid var(--dm-border-soft) !important; } .dark-mode .dept-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; border-color: var(--dm-border) !important; } .dark-mode .dept-header { background: var(--dm-surface) !important; color: var(--dm-text) !important; } .dark-mode .dept-header:hover { background: var(--dm-surface-2) !important; } .dark-mode .dept-header .dept-info h5 { color: var(--dm-text) !important; } .dark-mode .dept-header .dept-info small { color: var(--dm-text-muted) !important; } .dark-mode .dept-num { background: rgba(108,140,255,0.14) !important; color: #9bb3ff !important; } .dark-mode .dept-badge { background: rgba(108,140,255,0.14) !important; color: #b9caff !important; } .dark-mode .dept-toggle { background: var(--dm-surface-2) !important; color: var(--dm-text-muted) !important; } .dark-mode .dept-card.open .dept-toggle { background: rgba(108,140,255,0.18) !important; color: #b9caff !important; } .dark-mode .dept-body { background: var(--dm-surface-2) !important; border-top-color: var(--dm-border-soft) !important; } .dark-mode .course-item { border-bottom-color: var(--dm-border-soft) !important; color: var(--dm-text) !important; } .dark-mode .course-num { background: var(--dm-elevated) !important; color: var(--dm-text-soft) !important; } .dark-mode .course-majors, .dark-mode .course-majors li { color: var(--dm-text-muted) !important; } .dark-mode .no-courses { color: var(--dm-text-muted) !important; } /* ----- Cumulative Forms — student list table ----------------------------- */ .dark-mode .student-cf-table th { background: var(--dm-surface-2) !important; color: var(--dm-text-soft) !important; border-bottom-color: var(--dm-border) !important; } .dark-mode .student-cf-table td { color: var(--dm-text) !important; border-bottom-color: var(--dm-border-soft) !important; } .dark-mode .student-cf-table tbody tr:hover { background: rgba(108,140,255,0.08) !important; } .dark-mode .student-cf-table tbody tr:hover td { background: transparent !important; color: #fff !important; } .dark-mode .student-avatar { border-color: var(--dm-border) !important; } .dark-mode .student-avatar-placeholder { background: rgba(108,140,255,0.14) !important; color: #9bb3ff !important; } .dark-mode .badge-yr { background: rgba(74,222,128,0.15) !important; color: #86efac !important; } /* Generic inline-styled cards using `border:1px solid #e2e8f0` etc. We can't beat inline borders without being specific, but card itself already gets dark surface from the .card rule above. */ /* Department info strip on cumulative forms detail page */ .dark-mode .card-body span[style*="color:#1a237e"], .dark-mode .card-body span[style*="color: #1a237e"], .dark-mode span[style*="color:#1a237e"], .dark-mode div[style*="color:#1a237e"] { color: #9bb3ff !important; } .dark-mode span[style*="background:#e6f0ff"], .dark-mode span[style*="background: #e6f0ff"] { background: rgba(108,140,255,0.15) !important; color: #b9caff !important; } .dark-mode span[style*="color:#3366cc"] { color: #b9caff !important; } .dark-mode span[style*="color:#546e7a"], .dark-mode p[style*="color:#546e7a"], .dark-mode div[style*="color:#546e7a"] { color: var(--dm-text-soft) !important; } .dark-mode span[style*="color:#888"], .dark-mode small[style*="color:#888"] { color: var(--dm-text-muted) !important; } .dark-mode i[style*="color:#ddd"], .dark-mode i[style*="color:#bbb"] { color: var(--dm-text-muted) !important; } /* Light hover backgrounds added via inline/scoped rules */ .dark-mode tbody tr:hover { background: rgba(108,140,255,0.08) !important; } /* ----- Cumulative counselor list ----------------------------------------- */ .dark-mode .student-list-table th, .dark-mode .counselor-cf-table th { background: var(--dm-surface-2) !important; color: var(--dm-text-soft) !important; } .dark-mode .student-list-table td, .dark-mode .counselor-cf-table td { color: var(--dm-text) !important; border-color: var(--dm-border-soft) !important; } /* ----- Forms / intro / start cards (BEU + cumulative) -------------------- */ .dark-mode .form-card, .dark-mode .intro-card, .dark-mode .start-card, .dark-mode .info-box { background: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border-soft) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important; } .dark-mode .section-title { color: var(--dm-text) !important; border-bottom-color: rgba(74,222,128,0.4) !important; } .dark-mode .siblings-table th, .dark-mode .siblings-table td { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border-soft) !important; } /* ----- Welcome / dashboard cards using inline pastel bgs ---------------- */ .dark-mode .info-card, .dark-mode .stat-card { background: var(--dm-surface) !important; border-color: var(--dm-border-soft) !important; color: var(--dm-text) !important; } .dark-mode .stat-card .stat-icon { background: var(--dm-elevated) !important; } .dark-mode .stat-card .stat-label { color: var(--dm-text-muted) !important; } .dark-mode .stat-card .stat-value { color: var(--dm-text) !important; } /* ----- Chart legend rows (e.g., dashboard "SITE / SBAHM ...") ----------- */ .dark-mode .chart-legend-row, .dark-mode .legend-row { color: var(--dm-text) !important; } /* ----- Pagination (Laravel paginator default) --------------------------- */ .dark-mode .pagination .page-link { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text-soft) !important; } .dark-mode .pagination .page-link:hover { background: var(--dm-elevated) !important; color: #fff !important; border-color: var(--dm-accent) !important; } .dark-mode .pagination .page-item.active .page-link { background: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } .dark-mode .pagination .page-item.disabled .page-link { background: var(--dm-surface) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border-soft) !important; } /* ----- Inline white backgrounds on form-cards (forms/intro, beu-forms) -- */ .dark-mode div[style*="background:#fff"], .dark-mode div[style*="background: #fff"], .dark-mode div[style*="background:#ffffff"], .dark-mode div[style*="background: #ffffff"] { background: var(--dm-surface) !important; color: var(--dm-text) !important; } .dark-mode th[style*="background-color: #f5f5f5"], .dark-mode th[style*="background-color:#f5f5f5"] { background: var(--dm-surface-2) !important; color: var(--dm-text-soft) !important; } .dark-mode th[style*="color: #333"], .dark-mode td[style*="color: #333"] { color: var(--dm-text) !important; } /* ----- Search input groups ---------------------------------------------- */ .dark-mode .input-group-append .btn-primary { background: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } /* ----- Generic "soft" pastel backgrounds we want to neutralize ---------- */ .dark-mode [style*="background:#e6f0ff"], .dark-mode [style*="background: #e6f0ff"] { background: rgba(108,140,255,0.15) !important; } .dark-mode [style*="background:#e8f5e9"], .dark-mode [style*="background: #e8f5e9"] { background: rgba(74,222,128,0.15) !important; } .dark-mode [style*="background:#fff3cd"], .dark-mode [style*="background: #fff3cd"] { background: rgba(251,191,36,0.12) !important; color: #fde68a !important; } .dark-mode [style*="background:#f8f9fa"], .dark-mode [style*="background: #f8f9fa"], .dark-mode [style*="background:#f8fafc"], .dark-mode [style*="background: #f8fafc"], .dark-mode [style*="background:#f5f5f5"], .dark-mode [style*="background: #f5f5f5"], .dark-mode [style*="background:#fff8f5"], .dark-mode [style*="background: #fff8f5"] { background: var(--dm-surface-2) !important; } /* Inline border:1px solid #e2e8f0 etc. */ .dark-mode [style*="border:1px solid #e2e8f0"], .dark-mode [style*="border: 1px solid #e2e8f0"] { border-color: var(--dm-border-soft) !important; } /* ----- Anti-white-row fallback: any tr getting Bootstrap default light hover gets neutralized in dark mode. */ .dark-mode .table-hover tbody tr:hover, .dark-mode .table-hover tbody tr:hover > td, .dark-mode .table-hover tbody tr:hover > th { background-color: rgba(108,140,255,0.07) !important; color: var(--dm-text) !important; } /* ======================================================================== Consolidated page-specific dark overrides (moved out of blade files so dark-mode.css is the single source of truth). ======================================================================== */ /* ----- Dashboard: side panel + stats/charts ---------------------------- */ .dark-mode .db-side-panel { box-shadow: 0 2px 12px rgba(0,0,0,0.35); } .dark-mode .db-sched-item { border-color: var(--dm-border); } .dark-mode .db-sched-item:hover { background: var(--dm-elevated); } .dark-mode .db-sched-name { color: var(--dm-text); } .dark-mode .db-sched-date { color: var(--dm-accent); } .dark-mode .db-sched-service { color: var(--dm-text-muted); } .dark-mode .db-sched-time { background: var(--dm-surface-2); color: var(--dm-text-soft); } .dark-mode .db-sched-empty { color: var(--dm-text-muted); } .dark-mode .sched-badge-pending { background: rgba(230,81,0,0.18); color: #ffb74d; } .dark-mode .sched-badge-confirm { background: rgba(46,125,50,0.18); color: #81c784; } .dark-mode .sched-badge-cancel { background: rgba(198,40,40,0.18); color: #ef9a9a; } .dark-mode .sched-badge-reschedule { background: rgba(245,127,23,0.18); color: #ffd54f; } .dark-mode .db-stat-card .stat-value { color: var(--dm-text); } .dark-mode .db-stat-card .stat-label { color: var(--dm-text-muted); } .dark-mode .dept-legend-row { border-color: var(--dm-border); } .dark-mode .dept-name { color: var(--dm-text-soft); } .dark-mode .dept-count { color: var(--dm-text); } .dark-mode .db-chart-card .card-header { border-color: var(--dm-border); color: var(--dm-text); } /* ----- Schedule index: mini calendar + schedule items ------------------ */ .dark-mode .mini-cal-card { background: var(--dm-surface); box-shadow: 0 2px 12px rgba(0,0,0,0.35); } .dark-mode .cal-day { color: var(--dm-text-soft); } .dark-mode .cal-day:hover { background: var(--dm-elevated); color: var(--dm-accent); } .dark-mode .cal-day.today { background: var(--dm-accent-soft); color: var(--dm-accent); } .dark-mode .cal-day.selected { background: var(--dm-accent) !important; color: #fff !important; } .dark-mode .cal-day.other-month { color: var(--dm-text-muted); } .dark-mode .cal-day.other-month:hover { background: var(--dm-elevated); } .dark-mode .mini-cal-grid th { color: var(--dm-text-muted); } .dark-mode .mini-cal-sched-item { background: var(--dm-surface-2); border-color: var(--dm-accent); } .dark-mode .mini-cal-sched-item .sc-name { color: var(--dm-text); } .dark-mode .mini-cal-sched-item .sc-svc { color: var(--dm-text-muted); } .dark-mode .mini-cal-sched-item .sc-time { background: var(--dm-elevated); color: var(--dm-text-soft); } .dark-mode .mini-cal-sched-item .sc-dept { background: var(--dm-accent-soft); color: var(--dm-accent); } .dark-mode .mini-cal-sched-item .sc-group { background: rgba(108,140,255,0.16); color: var(--dm-accent); } .dark-mode .mini-cal-detail .detail-header { color: var(--dm-accent); } .dark-mode .mini-cal-detail-empty { color: var(--dm-text-muted); } .dark-mode .sc-badge-pending { background: rgba(230,81,0,0.18); color: #ffb74d; } .dark-mode .sc-badge-confirm { background: rgba(46,125,50,0.18); color: #81c784; } .dark-mode .sc-badge-cancel { background: rgba(198,40,40,0.18); color: #ef9a9a; } .dark-mode .sc-badge-reschedule { background: rgba(245,127,23,0.18); color: #ffd54f; } .dark-mode .cal-dot { background: var(--dm-accent); } .dark-mode .cal-day.selected .cal-dot { background: #fff; } /* ----- Schedule index: status tabs (upcoming / ongoing / finished / cancelled) -- */ .dark-mode .sched-tab { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } .dark-mode .sched-tab:hover { background: var(--dm-elevated) !important; color: var(--dm-accent) !important; } .dark-mode .sched-tab.active { background: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } .dark-mode .sched-tab.active:hover { color: #fff !important; } .dark-mode .sched-tab:not(.active) .tab-count { background: rgba(255, 255, 255, 0.10) !important; color: inherit !important; } /* ----- Schedule index: student-facing status notes & reschedule badge ---- */ .dark-mode .schedule-note { background: rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.30) !important; color: #fde68a !important; } .dark-mode .schedule-note i { color: #fbbf24 !important; } .dark-mode .status-reschedule { background: rgba(251, 191, 36, 0.14) !important; color: #fbbf24 !important; } .dark-mode [style*="background:#fde8e8"], .dark-mode [style*="background: #fde8e8"] { background: rgba(248, 113, 113, 0.12) !important; border-color: rgba(248, 113, 113, 0.30) !important; color: #fecaca !important; } .dark-mode [style*="background:#fff8e1"], .dark-mode [style*="background: #fff8e1"] { background: rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.30) !important; color: #fde68a !important; } /* ----- Student profile ------------------------------------------------ */ .dark-mode .info-card { background: var(--dm-surface); } .dark-mode .info-cell .info-value { color: var(--dm-text); } .dark-mode .section-title { color: var(--dm-accent); border-bottom-color: var(--dm-border, #2a3145); } /* ----- Student schedule create ---------------------------------------- */ .dark-mode .info-grid { background: var(--dm-surface-2); border-color: var(--dm-border, #2a3145); } .dark-mode .info-grid .info-cell .info-value { color: var(--dm-text); } .dark-mode .counselor-card { border-color: #3a4055 !important; background: #1e2235; } .dark-mode .counselor-card-label input[type="radio"]:checked + .counselor-card { border-color: #7986cb !important; background: #252a40; } .dark-mode .pick-cal-card { background: var(--dm-surface); } .dark-mode .pck-day { color: var(--dm-text-soft); } .dark-mode .pck-day:hover:not(.unavailable):not(.past):not(.other) { background: var(--dm-elevated); color: var(--dm-accent); } .dark-mode .pck-day.today { background: var(--dm-accent-soft); color: var(--dm-accent); } .dark-mode .pck-day.selected { background: var(--dm-accent) !important; color: #fff !important; } .dark-mode .pck-day.unavailable { background: rgba(198,40,40,0.25); color: #ef9a9a; } .dark-mode .pick-cal-side .selected-empty { background: var(--dm-surface-2); border-color: var(--dm-border, #2a3145); color: var(--dm-text-muted); } /* ======================================================================== Guest pages (auth + public forms). The toggle lives on the guest layout. ======================================================================== */ /* Floating toggle button on guest pages */ .dark-mode #theme-toggle { background: rgba(20, 25, 35, 0.60) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40) !important; } /* ----- Auth pages (admin login, student login / register / pending) ----- */ .dark-mode .auth-wrapper, .dark-mode .pending-wrap { background: linear-gradient(135deg, #12231a 0%, #0f3b24 35%, #145c33 70%, #0b3a1f 100%) !important; } .dark-mode .auth-wrapper::before { background: radial-gradient(circle, #b8860b 0%, rgba(245, 197, 24, 0) 70%); opacity: 0.30; } .dark-mode .auth-wrapper::after { background: radial-gradient(circle, #1f6b3a 0%, rgba(31, 107, 58, 0) 70%); opacity: 0.50; } .dark-mode .auth-card { background: rgba(26, 34, 48, 0.92) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7), 0 8px 20px -10px rgba(0, 0, 0, 0.5) !important; } .dark-mode .auth-brand .brand-text h1 { color: var(--dm-text) !important; } .dark-mode .auth-brand .brand-text p { color: var(--dm-text-muted) !important; } .dark-mode .auth-form .form-label { color: var(--dm-text-soft) !important; } .dark-mode .auth-input-wrap .input-icon { color: var(--dm-text-muted) !important; } .dark-mode .auth-input-wrap input, .dark-mode .auth-row input, .dark-mode .auth-row select { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .auth-input-wrap input:focus { background: var(--dm-elevated) !important; border-color: var(--spup-green) !important; box-shadow: 0 0 0 4px rgba(46, 139, 79, 0.25) !important; } .dark-mode .auth-input-wrap input::placeholder { color: var(--dm-text-muted) !important; } .dark-mode .auth-divider { color: var(--dm-text-muted) !important; } .dark-mode .auth-divider::before, .dark-mode .auth-divider::after { background: var(--dm-border) !important; } .dark-mode .auth-alert-danger { background: rgba(248, 113, 113, 0.12) !important; color: #fecaca !important; border-color: rgba(248, 113, 113, 0.30) !important; } .dark-mode .auth-alert-success { background: rgba(74, 222, 128, 0.12) !important; color: #bbf7d0 !important; border-color: rgba(74, 222, 128, 0.30) !important; } .dark-mode .auth-footer { color: var(--dm-text-muted) !important; } .dark-mode .auth-footer a { color: var(--dm-text-soft) !important; } .dark-mode .auth-footer a:hover { color: var(--spup-green-light) !important; } .dark-mode .auth-card input[disabled], .dark-mode .auth-card input[readonly] { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ----- Pending approval page ----- */ .dark-mode .pending-card { background: rgba(26, 34, 48, 0.96) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7) !important; } .dark-mode .pending-icon { background: rgba(251, 191, 36, 0.16) !important; color: #fde68a !important; } .dark-mode .pending-card h1 { color: var(--dm-success) !important; } .dark-mode .pending-card p { color: var(--dm-text-soft) !important; } .dark-mode .pending-meta { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .btn-pending-outline { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-success) !important; } .dark-mode .btn-pending-outline:hover { background: var(--dm-elevated) !important; } /* ======================================================================== Public document forms (forms/* + BEU forms). They define their own light palette at :root (--ink / --paper / ...); flip those variables in dark mode so the whole "paper" sheet goes dark consistently. ======================================================================== */ :root.dark-mode { --bg: var(--dm-bg); --paper: var(--dm-surface); --text: var(--dm-text); --muted: var(--dm-text-muted); --line: var(--dm-border); --line-strong: #4a5578; --ink: #6c8cff; --ink-soft: #6c8cff; --ink-50: var(--dm-accent-soft); --warn-bg: rgba(251, 191, 36, 0.12); --warn-bd: rgba(251, 191, 36, 0.30); --warn-fg: #fde68a; } .dark-mode .form-letterhead { background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-accent-soft) 100%) !important; } .dark-mode .form-letterhead .lh-exit { color: var(--dm-text-muted) !important; } .dark-mode .form-letterhead .lh-exit:hover { color: var(--dm-accent) !important; text-decoration: underline !important; } .dark-mode .form-control { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .form-control:focus { background: var(--dm-elevated) !important; border-color: var(--dm-accent) !important; } .dark-mode .form-control[readonly] { background: var(--dm-elevated) !important; } .dark-mode .btn-secondary { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-accent) !important; } .dark-mode .siblings-table tbody tr:nth-child(even) td, .dark-mode .data-table tbody tr:nth-child(even) td { background: var(--dm-surface-2) !important; } .dark-mode .siblings-table input:focus, .dark-mode .data-table input:focus { background: var(--dm-elevated) !important; border-color: var(--dm-accent) !important; } .dark-mode .yn-row { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .dark-mode .yn-row .yn-opts label { background: var(--dm-surface) !important; } .dark-mode .alert-danger { background: rgba(248, 113, 113, 0.12) !important; border-color: rgba(248, 113, 113, 0.30) !important; color: #fecaca !important; } .dark-mode .alert-info { background: var(--dm-accent-soft) !important; border-color: rgba(96, 165, 250, 0.30) !important; color: #b9d4fb !important; } .dark-mode .helper-banner { background: rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.30) !important; color: #fde68a !important; } /* ----- BEU forms (own scoped styles built on semantic tokens) ----- */ .dark-mode .form-id { color: var(--dm-text-muted) !important; } .dark-mode .intro-card .subtitle { color: var(--dm-text-muted) !important; } .dark-mode .intro-card .btn-primary { background: var(--dm-accent) !important; } .dark-mode .intro-card .btn-primary:hover { background: #5b7cff !important; } .dark-mode .directions-box { border-left-color: var(--dm-accent) !important; } /* ----- Attendance sheet (page overrides loaded after dark-mode.css) ----- */ .dark-mode .att-toolbar, .dark-mode .att-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; } .dark-mode .att-summary { background: var(--dm-accent-soft) !important; border-bottom-color: var(--dm-border) !important; } .dark-mode .att-stat { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .dark-mode .att-stat .num { color: #9bb3ff !important; } .dark-mode .att-stat.present .num { color: #86efac !important; } .dark-mode .att-stat.absent .num { color: #fca5a5 !important; } .dark-mode .att-stat.pending .num { color: #ffd54f !important; } .dark-mode .att-stat .lbl { color: var(--dm-text-muted) !important; } .dark-mode .att-table thead th { background: var(--dm-surface-2) !important; color: var(--dm-text-soft) !important; } .dark-mode .att-table tbody td { color: var(--dm-text) !important; border-bottom-color: var(--dm-border-soft) !important; } .dark-mode .att-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; } .dark-mode .att-table tbody tr:hover { background: rgba(108,140,255,0.07) !important; } .dark-mode .att-num, .dark-mode .att-id { color: var(--dm-text-muted) !important; } .dark-mode .att-bulk-actions { background: var(--dm-surface-2) !important; border-bottom-color: var(--dm-border) !important; } .dark-mode .att-bulk-actions .label { color: var(--dm-text-muted) !important; } .dark-mode .att-radio { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } .dark-mode .att-radio.present.active { background: #2e9e5b !important; border-color: #237b47 !important; } .dark-mode .att-radio.absent.active { background: #d93b4f !important; border-color: #a51515 !important; } .dark-mode .att-radio.unmark.active { background: rgba(251,191,36,0.14) !important; border-color: #f9a825 !important; color: #fde68a !important; } .dark-mode .att-remark { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .att-remark:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px rgba(108,140,255,0.15) !important; } .dark-mode .att-remark::placeholder { color: var(--dm-text-muted) !important; } /* ----- Cumulative student lists: search / filter bars ----- */ .dark-mode .search-bar input[type="text"], .dark-mode .search-bar .form-control, .dark-mode input.form-control[name="search"], .dark-mode select.form-control[name="program"], .dark-mode select.form-control[name="yr_level"], .dark-mode select.form-control[name="gender"] { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .search-bar input[type="text"]::placeholder, .dark-mode input.form-control[name="search"]::placeholder { color: var(--dm-text-muted) !important; } /* ----- Cancelled schedule rows (admin schedule list) ----- */ .dark-mode tr.table-light, .dark-mode tr.table-light > td, .dark-mode tr.table-light > th { background: var(--dm-surface-2) !important; color: var(--dm-text-muted) !important; } /* ----- Online forms (forms/* pages define their own light :root tokens that survive because they load after dark-mode.css) ----- */ .dark-mode .form-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 18px 38px -22px rgba(0,0,0,0.45) !important; } .dark-mode .form-letterhead { background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-accent-soft) 100%) !important; border-bottom-color: var(--dm-accent) !important; } .dark-mode .form-stepper { background: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } .dark-mode .form-stepper .step .dot { background: var(--dm-surface) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border) !important; } .dark-mode .form-control:focus { background: var(--dm-surface) !important; } .dark-mode .form-control[readonly] { background: var(--dm-surface-2) !important; } .dark-mode .siblings-table tbody tr:nth-child(even) td, .dark-mode .data-table tbody tr:nth-child(even) td { background: var(--dm-surface-2) !important; } .dark-mode .yn-row { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; } .dark-mode .yn-row .yn-opts label { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } .dark-mode .btn-secondary { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-accent) !important; } .dark-mode .btn-secondary:hover { background: var(--dm-accent-soft) !important; } .dark-mode .alert-danger { background: rgba(248,113,113,0.12) !important; border-color: rgba(248,113,113,0.35) !important; color: #fecaca !important; } .dark-mode .helper-banner { background: rgba(251,191,36,0.10) !important; border-color: rgba(251,191,36,0.35) !important; color: #fde68a !important; } /* ----- Student dashboard: notification cards ----- */ .dark-mode .news-item.notification-item { background: rgba(251,191,36,0.08) !important; } /* ===== Notification bell =============================================== */ .dark-mode .bell-menu { background: var(--dm-surface-2) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; } .dark-mode .bell-header, .dark-mode .bell-item, .dark-mode .bell-footer { border-color: var(--dm-border-soft) !important; } .dark-mode .bell-toggle:hover, .dark-mode .bell-toggle:focus { background: rgba(108, 140, 255, 0.12) !important; } .dark-mode .bell-item:hover, .dark-mode .bell-item:focus { background: rgba(108, 140, 255, 0.08) !important; } .dark-mode .bell-item.unread { background: rgba(108, 140, 255, 0.14) !important; } .dark-mode .bell-item.unread:hover, .dark-mode .bell-item.unread:focus { background: rgba(108, 140, 255, 0.14) !important; } .dark-mode .bell-item-icon { background: var(--dm-elevated) !important; } .dark-mode .bell-item.unread .bell-item-icon { background: var(--dm-accent) !important; }