/** * BatangBibo — Shared Dark Mode Stylesheet v2.0 * Toggle: add/remove .dark-mode on * Flash prevention: add .pre-dark on before paint * * DARK BLUE palette — comfortable, not black: * bg-base #0f1a2e deep navy * bg-card #162035 card surfaces * bg-raise #1c2840 slightly raised * bg-input #1a2d4a form fields * accent #4a9eff sky blue * gold #FFD700 CTA / highlights * text #dce8ff near-white blue tint * muted #7a9cc0 secondary text */ /* ── Flash prevention ─────────────────────────────────────── */ html.pre-dark body { background: #0f1a2e !important; color: #dce8ff !important; } /* ══════════════════════════════════════════ BASE ══════════════════════════════════════════ */ body.dark-mode { background: #0f1a2e !important; color: #dce8ff !important; } /* ══════════════════════════════════════════ LIGHT MODE — slight blue-tinted off-white ONLY applied to pages that have these classes ══════════════════════════════════════════ */ /* Index landing page sections */ body:not(.dark-mode) .roles-section, body:not(.dark-mode) .mechanics-section { background: #f4f6fb !important; } body:not(.dark-mode) .benefits-section { background: #eaeefc !important; } body:not(.dark-mode) .how-section { background: linear-gradient(135deg, #eaeefc 0%, #d8dff4 100%) !important; } /* ══════════════════════════════════════════ LANDING PAGE — index.php ══════════════════════════════════════════ */ body.dark-mode .roles-section { background: #132238 !important; } body.dark-mode .how-section { background: #0f1a2e !important; } body.dark-mode .mechanics-section { background: #132238 !important; } body.dark-mode .benefits-section { background: #0f1a2e !important; } body.dark-mode .stats-section { background: linear-gradient(135deg,#162035,#0d2a5e) !important; } body.dark-mode .cta-section { background: linear-gradient(135deg,#162035,#0d3070) !important; } body.dark-mode .footer { background: #08101e !important; color: #7a9cc0 !important; } body.dark-mode .footer p { color: #7a9cc0 !important; } /* Section headings */ body.dark-mode .section-title { color: #7ecfff !important; text-shadow: 0 0 24px rgba(74,158,255,0.35), 0 0 48px rgba(74,158,255,0.12); } body.dark-mode .text-muted { color: #7a9cc0 !important; } /* Role cards */ body.dark-mode .role-card { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.22) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05) !important; } body.dark-mode .role-card:hover { border-color: #FFD700 !important; box-shadow: 0 14px 36px rgba(0,0,0,0.50), 0 0 28px rgba(255,215,0,0.16) !important; } body.dark-mode .role-icon { filter: drop-shadow(0 0 8px rgba(74,158,255,0.50)); } body.dark-mode .role-title { color: #7ecfff !important; text-shadow: 0 0 12px rgba(74,158,255,0.30); } body.dark-mode .role-text { color: #b0c8e0 !important; } body.dark-mode .role-card .mt-3 { background: rgba(74,158,255,0.08) !important; color: #7a9cc0 !important; border-radius: 10px; } /* Step cards */ body.dark-mode .step-card { background: linear-gradient(145deg, #162035, #1c2840) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05) !important; } body.dark-mode .step-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.48), 0 0 18px rgba(74,158,255,0.14) !important; } body.dark-mode .step-number { box-shadow: 0 4px 18px rgba(74,158,255,0.50), 0 0 16px rgba(74,158,255,0.25) !important; } body.dark-mode .step-title { color: #7ecfff !important; text-shadow: 0 0 10px rgba(74,158,255,0.28); } body.dark-mode .step-desc { color: #b0c8e0 !important; } /* Tier cards — keep vivid colors, boost shadow */ body.dark-mode .tier-card { box-shadow: 0 8px 28px rgba(0,0,0,0.50) !important; } body.dark-mode .tier-name { text-shadow: 0 0 18px rgba(255,215,0,0.50); } body.dark-mode .tier-rule { background: rgba(0,0,0,0.22) !important; } /* Feature cards */ body.dark-mode .feature-card { background: rgba(74,158,255,0.07) !important; border-color: rgba(74,158,255,0.20) !important; } body.dark-mode .feature-card:hover { background: rgba(74,158,255,0.14) !important; border-color: #FFD700 !important; box-shadow: 0 0 26px rgba(255,215,0,0.16) !important; } body.dark-mode .feature-title { text-shadow: 0 0 14px rgba(255,215,0,0.42); } /* Benefit cards */ body.dark-mode .benefit-card { box-shadow: 0 10px 36px rgba(0,0,0,0.48) !important; } body.dark-mode .benefit-title { text-shadow: 0 0 18px rgba(255,215,0,0.42); } body.dark-mode .benefit-list li { color: rgba(255,255,255,0.90) !important; } /* Stats */ body.dark-mode .stat-number { text-shadow: 0 0 20px rgba(255,215,0,0.52), 0 0 40px rgba(255,215,0,0.18); } body.dark-mode .stat-label { color: rgba(255,255,255,0.78) !important; } /* Mission rules / rewards info boxes */ body.dark-mode .p-4[style*="f0f4ff"], body.dark-mode .p-4[style*="f0fff4"] { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.22) !important; } body.dark-mode .p-4[style*="f0f4ff"] h5 { color: #7ecfff !important; } body.dark-mode .p-4[style*="f0fff4"] h5 { color: #70e080 !important; } body.dark-mode .p-4[style*="f0f4ff"] ul, body.dark-mode .p-4[style*="f0fff4"] ul { color: #b0c8e0 !important; } /* PWA install banner */ body.dark-mode .install-banner { background: linear-gradient(90deg, #162035, #1c2840) !important; border-top: 1px solid rgba(74,158,255,0.20); box-shadow: 0 -4px 18px rgba(0,0,0,0.28); } body.dark-mode .install-banner .fw-bold { color: #dce8ff !important; } /* ══════════════════════════════════════════ LOGIN & REGISTRATION ══════════════════════════════════════════ */ html.pre-dark body { background: linear-gradient(135deg,#0f1a2e,#162035) !important; } body.dark-mode .login-card, body.dark-mode .register-card { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.45) !important; box-shadow: 0 10px 0 #08101e, 0 24px 56px rgba(0,0,0,0.50), 0 0 0 1px rgba(74,158,255,0.14), 0 0 40px rgba(74,158,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important; } body.dark-mode .login-card h2, body.dark-mode h2.fw-bold, body.dark-mode h4 { color: #7ecfff !important; text-shadow: 0 0 20px rgba(74,158,255,0.48), 0 0 40px rgba(74,158,255,0.18); } body.dark-mode .game-subtitle { color: rgba(180,218,255,0.85) !important; } /* Role selector */ body.dark-mode .role-label { background: rgba(74,158,255,0.10) !important; color: #b8d8f8 !important; border: 2px solid rgba(74,158,255,0.24) !important; } body.dark-mode .role-label:hover { background: rgba(74,158,255,0.20) !important; } body.dark-mode .role-btn-group input[type="radio"]:checked + .role-label { background: linear-gradient(135deg,#FFD700,#ffb800) !important; color: #1a1035 !important; border-color: #ffb800 !important; box-shadow: 0 4px 18px rgba(255,215,0,0.45), 0 0 24px rgba(255,215,0,0.22) !important; } /* Inputs */ body.dark-mode .form-control { background: rgba(255,255,255,0.06) !important; border: 1.5px solid rgba(74,158,255,0.28) !important; color: #dce8ff !important; } body.dark-mode .form-control:focus { background: rgba(74,158,255,0.12) !important; border-color: #4a9eff !important; box-shadow: 0 0 0 0.2rem rgba(74,158,255,0.25), 0 0 16px rgba(74,158,255,0.14) !important; } body.dark-mode .form-control::placeholder { color: #4a6888 !important; } body.dark-mode .input-icon input { background: rgba(255,255,255,0.06) !important; } body.dark-mode .form-select { background: rgba(255,255,255,0.06) !important; border: 1.5px solid rgba(74,158,255,0.28) !important; color: #dce8ff !important; } body.dark-mode .form-select:focus { border-color: #4a9eff !important; box-shadow: 0 0 0 0.2rem rgba(74,158,255,0.25) !important; } /* Labels */ body.dark-mode .form-label { color: #a8c8e8 !important; font-weight: 700; } body.dark-mode .form-check-label { color: #a8c8e8 !important; } body.dark-mode .password-requirements, body.dark-mode small.text-muted { color: #6a8ca8 !important; } /* Terms box */ body.dark-mode #termsBox { background: rgba(0,0,0,0.20) !important; border-color: rgba(74,158,255,0.22) !important; color: #90aec8 !important; } /* Eye toggle */ body.dark-mode [onclick*="togglePw"] span { color: #6090b0 !important; } /* Error / success */ body.dark-mode .error-message { background: rgba(220,53,69,0.14) !important; border-left: 4px solid #dc3545 !important; color: #ff9999 !important; box-shadow: 0 0 14px rgba(220,53,69,0.22) !important; } body.dark-mode .success-message { background: rgba(40,167,69,0.12) !important; border-left: 4px solid #28a745 !important; color: #78e888 !important; } /* Submit buttons */ body.dark-mode .btn-start, body.dark-mode .btn-register { box-shadow: 0 6px 0 #1e7e34, 0 8px 22px rgba(40,167,69,0.40) !important; } body.dark-mode .btn-admin-login { box-shadow: 0 4px 0 #1a3a6b, 0 0 18px rgba(74,158,255,0.38) !important; } /* Misc login/reg */ body.dark-mode #forgotBox { background: rgba(74,158,255,0.07) !important; border: 1px solid rgba(74,158,255,0.20) !important; border-radius: 16px; color: #90b8d8 !important; } body.dark-mode #forgotBox p { color: #90b8d8 !important; } body.dark-mode .btn-admin-corner { background: rgba(74,158,255,0.08) !important; border-color: rgba(74,158,255,0.30) !important; } body.dark-mode .toggle-link { color: #7ecfff !important; } body.dark-mode .toggle-link:hover { background: rgba(74,158,255,0.12) !important; color: #FFD700 !important; } /* ══════════════════════════════════════════ DASHBOARDS — teacher, admin, student ══════════════════════════════════════════ */ /* Sidebar */ body.dark-mode .sidebar { background: linear-gradient(180deg, #0a1628, #101e34) !important; border-right: 4px solid rgba(74,158,255,0.35) !important; } body.dark-mode .sidebar-brand h3 { color: #FFD700 !important; text-shadow: 0 0 16px rgba(255,215,0,0.42); } body.dark-mode .sidebar-brand p { color: rgba(255,255,255,0.48) !important; } /* Main content area */ body.dark-mode .main-content, body.dark-mode .main-wrapper { background: #0f1a2e !important; } /* Page header */ body.dark-mode .page-header { background: linear-gradient(135deg, #162035, #1c2840) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important; } body.dark-mode .page-title { color: #7ecfff !important; text-shadow: 0 0 18px rgba(74,158,255,0.38); } /* All cards / panels */ body.dark-mode .stat-card, body.dark-mode .summary-card, body.dark-mode .dashboard-card, body.dark-mode .panel-card, body.dark-mode .card, body.dark-mode .mission-card, body.dark-mode .content-card, body.dark-mode .subject-card, body.dark-mode .achievement-card, body.dark-mode .reward-card, body.dark-mode .story-card, body.dark-mode .flashcard-card { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.18) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important; color: #dce8ff !important; } body.dark-mode .card:hover, body.dark-mode .mission-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 20px rgba(74,158,255,0.12) !important; } body.dark-mode .card-header { background: rgba(74,158,255,0.09) !important; color: #7ecfff !important; border-bottom-color: rgba(74,158,255,0.16) !important; } body.dark-mode .card-body { color: #dce8ff !important; } /* Modals */ body.dark-mode .modal-content { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.30) !important; box-shadow: 0 0 0 1px rgba(74,158,255,0.14), 0 28px 56px rgba(0,0,0,0.55) !important; } body.dark-mode .modal-header { border-bottom-color: rgba(74,158,255,0.16) !important; } body.dark-mode .modal-footer { border-top-color: rgba(74,158,255,0.16) !important; } body.dark-mode .modal-title { color: #7ecfff !important; text-shadow: 0 0 14px rgba(74,158,255,0.32); } /* Tables */ body.dark-mode .table { color: #dce8ff !important; --bs-table-bg: transparent; } body.dark-mode .table thead th, body.dark-mode .table th { background: rgba(74,158,255,0.12) !important; color: #7ecfff !important; border-color: rgba(74,158,255,0.16) !important; } body.dark-mode .table td { border-color: rgba(74,158,255,0.10) !important; color: #c8daf0 !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(74,158,255,0.04) !important; } body.dark-mode .table-hover > tbody > tr:hover > * { background: rgba(74,158,255,0.10) !important; } /* Inputs — dashboard forms */ body.dark-mode .input-group-text { background: rgba(74,158,255,0.10) !important; border-color: rgba(74,158,255,0.26) !important; color: #7a9cc0 !important; } /* Dropdowns */ body.dark-mode .dropdown-menu { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.20) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important; } body.dark-mode .dropdown-item { color: #c8daf0 !important; } body.dark-mode .dropdown-item:hover { background: rgba(74,158,255,0.14) !important; color: #7ecfff !important; } body.dark-mode .dropdown-divider { border-color: rgba(74,158,255,0.12) !important; } /* Alerts */ body.dark-mode .alert-info { background: rgba(13,202,240,0.09) !important; border-color: rgba(13,202,240,0.28) !important; color: #60d8f0 !important; } body.dark-mode .alert-success { background: rgba(25,135,84,0.10) !important; border-color: rgba(25,135,84,0.28) !important; color: #70e080 !important; } body.dark-mode .alert-warning { background: rgba(255,193,7,0.09) !important; border-color: rgba(255,193,7,0.28) !important; color: #ffe070 !important; } body.dark-mode .alert-danger { background: rgba(220,53,69,0.10) !important; border-color: rgba(220,53,69,0.28) !important; color: #f08080 !important; } /* Badges */ body.dark-mode .badge.bg-light { background: rgba(74,158,255,0.20) !important; color: #7ecfff !important; } body.dark-mode .badge.bg-secondary{ background: rgba(74,158,255,0.16) !important; } body.dark-mode .badge-registered { background: rgba(40,167,69,0.16) !important; color: #70e080 !important; } body.dark-mode .badge-unregistered{ background: rgba(74,158,255,0.10) !important; color: #7a9cc0 !important; } /* Typography */ body.dark-mode h1,body.dark-mode h2,body.dark-mode h3, body.dark-mode h4,body.dark-mode h5,body.dark-mode h6 { color: #c8e0ff !important; } body.dark-mode p { color: inherit; } body.dark-mode .text-muted { color: #7a9cc0 !important; } body.dark-mode .text-dark { color: #c8daf0 !important; } body.dark-mode hr { border-color: rgba(74,158,255,0.14) !important; } /* Sidebar nav links */ body.dark-mode .nav-link { color: rgba(200,224,255,0.82) !important; } body.dark-mode .nav-link:hover { background: rgba(74,158,255,0.16) !important; color: #a8d8ff !important; } body.dark-mode .nav-link.active { background: rgba(74,158,255,0.24) !important; color: #7ecfff !important; } /* Notification bell */ body.dark-mode .bell-dropdown { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.20) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important; } body.dark-mode .bell-notif-item { background: rgba(74,158,255,0.08) !important; border-left-color: #4a9eff !important; color: #c8daf0 !important; } body.dark-mode .bell-notif-item.unread { background: rgba(74,158,255,0.16) !important; } body.dark-mode .bell-notif-item .bni-msg { color: #c8daf0 !important; } body.dark-mode .bell-notif-item .bni-time { color: #7a9cc0 !important; } /* Student top-nav */ body.dark-mode .top-nav { background: linear-gradient(135deg, rgba(10,22,40,0.98), rgba(16,30,52,0.98)) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Student bottom-nav */ body.dark-mode .bottom-nav { background: linear-gradient(135deg, rgba(10,22,40,0.98), rgba(16,30,52,0.98)) !important; border-top-color: rgba(74,158,255,0.16) !important; } body.dark-mode .bottom-nav-item { color: rgba(150,190,230,0.68) !important; } body.dark-mode .bottom-nav-item.active { color: #4a9eff !important; } /* Progress bars */ body.dark-mode .progress { background: rgba(74,158,255,0.12) !important; } /* Admin extras */ body.dark-mode .bulk-toolbar { background: rgba(74,158,255,0.08) !important; border-color: rgba(74,158,255,0.28) !important; } body.dark-mode .form-panel { background: rgba(74,158,255,0.05) !important; border-color: rgba(74,158,255,0.22) !important; } /* ══════════════════════════════════════════ DARK MODE TOGGLE BUTTONS ══════════════════════════════════════════ */ /* Sidebar version (teacher / admin) */ .dm-toggle-btn { display: flex; align-items: center; gap: 9px; width: calc(100% - 30px); margin: 6px 15px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(220,232,255,0.85); font-family: 'Nunito', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all 0.2s; text-align: left; outline: none; } .dm-toggle-btn:hover { background: rgba(74,158,255,0.18); color: #FFD700; border-color: rgba(255,215,0,0.50); box-shadow: 0 0 12px rgba(255,215,0,0.16); } /* Navbar version (index, login, register) */ .btn-nav-dark { background: rgba(255,255,255,0.08) !important; border: 1.5px solid rgba(255,255,255,0.18) !important; color: white !important; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all 0.2s; flex-shrink: 0; outline: none; padding: 0; } .btn-nav-dark:hover { background: rgba(74,158,255,0.22) !important; border-color: #FFD700 !important; color: #FFD700 !important; } /* Student top-nav round toggle */ .dm-toggle-btn.dm-round, button.dm-toggle-btn[style*="round"], .top-nav .dm-toggle-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; padding: 0 !important; justify-content: center !important; margin: 0 !important; flex-shrink: 0 !important; min-width: unset !important; } /* ══════════════════════════════════════════════════════════════ DASHBOARD WHITE-CONTAINER FIX Targets every white box that doesn't use a named class so they properly go dark in dark mode. ══════════════════════════════════════════════════════════════ */ /* ── Generic white/light backgrounds ── */ body.dark-mode .student-table-container, body.dark-mode .activity-card, body.dark-mode .history-container, body.dark-mode .achievements-container, body.dark-mode .panel-card, body.dark-mode .form-panel, body.dark-mode .stat-card, body.dark-mode .summary-card, body.dark-mode .dashboard-card, body.dark-mode .card, body.dark-mode .modal-content { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.18) !important; box-shadow: 0 4px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04) !important; color: #dce8ff !important; } /* ── Table containers stay dark ── */ body.dark-mode .student-table-container *, body.dark-mode .activity-card *, body.dark-mode .history-container *, body.dark-mode .achievements-container *, body.dark-mode .panel-card * { color: inherit; } /* ── Table itself ── */ body.dark-mode .student-table-container table, body.dark-mode .panel-card table, body.dark-mode .history-container table { color: #dce8ff !important; --bs-table-bg: transparent !important; --bs-table-striped-bg: rgba(74,158,255,0.05) !important; --bs-table-hover-bg: rgba(74,158,255,0.10) !important; } /* ── Table header ── */ body.dark-mode .table-light, body.dark-mode thead.table-light, body.dark-mode .table > thead { background: rgba(74,158,255,0.12) !important; --bs-table-bg: rgba(74,158,255,0.12) !important; } body.dark-mode .table-light th, body.dark-mode thead.table-light th, body.dark-mode .table > thead th, body.dark-mode .table > thead td { background: rgba(74,158,255,0.12) !important; color: #7ecfff !important; border-color: rgba(74,158,255,0.18) !important; font-weight: 800; } /* ── Table rows ── */ body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tbody > tr > th { color: #c8daf0 !important; border-color: rgba(74,158,255,0.10) !important; background: transparent !important; } body.dark-mode .table-hover > tbody > tr:hover > td, body.dark-mode .table-hover > tbody > tr:hover > th { background: rgba(74,158,255,0.10) !important; } body.dark-mode .table-warning > td, body.dark-mode tr.table-warning > td, body.dark-mode tr.table-warning > th { background: rgba(255,193,7,0.10) !important; color: #ffe083 !important; } /* ── Table borderless ── */ body.dark-mode .table-borderless td, body.dark-mode .table-borderless th { border: none !important; } /* ── Table title headings ── */ body.dark-mode .table-title, body.dark-mode .page-title { color: #7ecfff !important; text-shadow: 0 0 16px rgba(74,158,255,0.30); } /* ── Section/card headings ── */ body.dark-mode .student-table-container h4, body.dark-mode .student-table-container h5, body.dark-mode .student-table-container h6, body.dark-mode .activity-card h4, body.dark-mode .activity-card h5, body.dark-mode .activity-card h6, body.dark-mode .history-container h3, body.dark-mode .history-container h4, body.dark-mode .achievements-container h3, body.dark-mode .achievements-container h4, body.dark-mode .panel-card h4, body.dark-mode .panel-card h5, body.dark-mode .panel-card h6 { color: #7ecfff !important; } /* ── Inline small text / muted inside cards ── */ body.dark-mode .student-table-container .text-muted, body.dark-mode .activity-card .text-muted, body.dark-mode .panel-card .text-muted, body.dark-mode .stat-card .text-muted, body.dark-mode .history-container .text-muted, body.dark-mode .achievements-container .text-muted { color: #7a9cc0 !important; } /* ── Stat card specific ── */ body.dark-mode .stat-card .stat-label { color: #7a9cc0 !important; } body.dark-mode .stat-card .stat-value { color: #dce8ff !important; } /* ── Achievement items (inside white rounded boxes) ── */ body.dark-mode .achievement-item { background: rgba(74,158,255,0.08) !important; border: 1px solid rgba(74,158,255,0.14) !important; } body.dark-mode .achievement-name { color: #c8daf0 !important; } body.dark-mode .achievement-date { color: #7a9cc0 !important; } /* ── Activity feed inline chips ── */ body.dark-mode #activityFeed > div[style*="background:#f8f9fa"], body.dark-mode #activityFeed > div[style*="background:#fff0f0"] { background: rgba(74,158,255,0.08) !important; border-color: rgba(74,158,255,0.15) !important; color: #c8daf0 !important; } body.dark-mode #activityFeed .fw-bold { color: #dce8ff !important; } body.dark-mode #activityFeed .text-muted { color: #7a9cc0 !important; } /* ── Search / filter form controls inside cards ── */ body.dark-mode .student-table-container .form-control, body.dark-mode .student-table-container .form-select, body.dark-mode .panel-card .form-control, body.dark-mode .panel-card .form-select { background: rgba(255,255,255,0.06) !important; border: 1.5px solid rgba(74,158,255,0.28) !important; color: #dce8ff !important; } body.dark-mode .student-table-container .form-control:focus, body.dark-mode .student-table-container .form-select:focus, body.dark-mode .panel-card .form-control:focus, body.dark-mode .panel-card .form-select:focus { background: rgba(74,158,255,0.12) !important; border-color: #4a9eff !important; box-shadow: 0 0 0 0.2rem rgba(74,158,255,0.22) !important; } body.dark-mode .student-table-container .form-control::placeholder, body.dark-mode .panel-card .form-control::placeholder { color: #4a6888 !important; } /* ── Inline style backgrounds that stay white ── */ /* white box with inline style="background:..." inside dark containers */ body.dark-mode [style*="background:#f8f9fa"], body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background:white"], body.dark-mode [style*="background: white"] { background: #1c2840 !important; color: #dce8ff !important; } /* ── Inline white preview/info boxes ── */ body.dark-mode [style*="background:#f0f2ff"], body.dark-mode [style*="background: #f0f2ff"], body.dark-mode [style*="background:#e3f2fd"], body.dark-mode [style*="background:#fce4ec"], body.dark-mode [style*="background:#fff3e0"], body.dark-mode [style*="background:#fffde7"], body.dark-mode [style*="background:#e8f5e9"], body.dark-mode [style*="background:#f3e5f5"], body.dark-mode [style*="background:#fff8e1"], body.dark-mode [style*="background:#e8f5e9"], body.dark-mode [style*="background:rgba(255,255,255,0.15)"], body.dark-mode [style*="background: rgba(255,255,255,0.15)"] { background: rgba(74,158,255,0.07) !important; border-color: rgba(74,158,255,0.18) !important; color: #c8daf0 !important; } /* ── Inline text color overrides ── */ body.dark-mode [style*="color:#333"], body.dark-mode [style*="color: #333"], body.dark-mode [style*="color:#2c3e50"], body.dark-mode [style*="color: #2c3e50"], body.dark-mode [style*="color:#444"], body.dark-mode [style*="color: #444"], body.dark-mode [style*="color:#555"], body.dark-mode [style*="color: #555"] { color: #c8daf0 !important; } body.dark-mode [style*="color:#666"], body.dark-mode [style*="color: #666"], body.dark-mode [style*="color:#777"], body.dark-mode [style*="color: #777"], body.dark-mode [style*="color:#888"], body.dark-mode [style*="color:#999"], body.dark-mode [style*="color:#aaa"] { color: #7a9cc0 !important; } /* ── Progress bar track ── */ body.dark-mode .progress-bar-container, body.dark-mode [style*="background:#f0f0f0"], body.dark-mode [style*="background: #f0f0f0"], body.dark-mode [style*="background:#ddd"], body.dark-mode [style*="background: #ddd"] { background: rgba(74,158,255,0.12) !important; } /* ── Input group text ── */ body.dark-mode .input-group-text { background: rgba(74,158,255,0.10) !important; border-color: rgba(74,158,255,0.26) !important; color: #7a9cc0 !important; } /* ── nav-tabs inside dashboard ── */ body.dark-mode .nav-tabs { border-bottom-color: rgba(74,158,255,0.18) !important; } body.dark-mode .nav-tabs .nav-link { color: #7a9cc0 !important; background: transparent !important; border-color: transparent !important; } body.dark-mode .nav-tabs .nav-link.active { background: #1c2840 !important; color: #7ecfff !important; border-color: rgba(74,158,255,0.28) rgba(74,158,255,0.28) #1c2840 !important; } body.dark-mode .nav-tabs .nav-link:hover { background: rgba(74,158,255,0.08) !important; color: #a8d8ff !important; border-color: rgba(74,158,255,0.14) !important; } /* ── Pagination ── */ body.dark-mode .page-link { background: #162035 !important; border-color: rgba(74,158,255,0.22) !important; color: #7ecfff !important; } body.dark-mode .page-item.active .page-link { background: #4a9eff !important; border-color: #4a9eff !important; color: #fff !important; } body.dark-mode .page-link:hover { background: rgba(74,158,255,0.15) !important; color: #a8d8ff !important; } /* ── HR dividers inside white cards ── */ body.dark-mode .student-table-container hr, body.dark-mode .panel-card hr, body.dark-mode .activity-card hr { border-color: rgba(74,158,255,0.14) !important; } /* ── Bulk toolbar ── */ body.dark-mode .bulk-toolbar { background: rgba(74,158,255,0.08) !important; border-color: rgba(74,158,255,0.30) !important; color: #dce8ff !important; } body.dark-mode .bulk-count { color: #7ecfff !important; } /* ── Form panel (add student / add teacher dashed box) ── */ body.dark-mode .form-panel { background: rgba(74,158,255,0.06) !important; border-color: rgba(74,158,255,0.25) !important; color: #dce8ff !important; } body.dark-mode .form-panel .form-label { color: #a8c8e8 !important; } /* ── Inline alert strips inside cards ── */ body.dark-mode .alert[style*="background:#e8f5e9"], body.dark-mode .alert[style*="background: #e8f5e9"] { background: rgba(40,167,69,0.12) !important; border-color: rgba(40,167,69,0.28) !important; color: #70e080 !important; } body.dark-mode .alert[style*="background:#fff8e1"], body.dark-mode .alert[style*="background: #fff8e1"] { background: rgba(255,193,7,0.10) !important; border-color: rgba(255,193,7,0.28) !important; color: #ffe083 !important; } body.dark-mode .alert[style*="background:#e3f2fd"], body.dark-mode .alert[style*="background: #e3f2fd"] { background: rgba(74,158,255,0.10) !important; border-color: rgba(74,158,255,0.28) !important; color: #7ecfff !important; } /* ── Researcher notice box (algo logs) ── */ body.dark-mode [style*="background:#fff8e1"][style*="border-left"] { background: rgba(255,193,7,0.08) !important; border-left-color: rgba(255,193,7,0.50) !important; color: #c8daf0 !important; } /* ── Manual URL preview box ── */ body.dark-mode #manualUrlPreview { background: rgba(74,158,255,0.07) !important; border: 1px solid rgba(74,158,255,0.18) !important; color: #c8daf0 !important; } body.dark-mode #manualUrlPreview strong { color: #a8c8e8 !important; } body.dark-mode #manualUrlCurrent { color: #4a9eff !important; } /* ── Quick actions grid buttons ── */ body.dark-mode .quick-actions-grid .btn-outline-secondary { color: #a8c8e8 !important; border-color: rgba(74,158,255,0.30) !important; } body.dark-mode .quick-actions-grid .btn-outline-secondary:hover { background: rgba(74,158,255,0.14) !important; color: #7ecfff !important; } body.dark-mode .quick-actions-grid .btn-outline-info { color: #4a9eff !important; border-color: rgba(74,158,255,0.35) !important; } /* ── Tier badge pills inside table rows (inline style colored ones) ── */ /* These use inline background so we can't target by class, but text should remain white */ body.dark-mode td span[style*="color:white"], body.dark-mode td span[style*="color: white"] { opacity: 0.95; } /* ── "Needs Help" badge ── */ body.dark-mode .badge.bg-danger { box-shadow: 0 0 6px rgba(220,53,69,0.35); } body.dark-mode .badge.bg-success { box-shadow: 0 0 6px rgba(40,167,69,0.30); } body.dark-mode .badge.bg-warning { box-shadow: 0 0 6px rgba(255,193,7,0.25); } body.dark-mode .badge.bg-primary { box-shadow: 0 0 6px rgba(74,158,255,0.30); } body.dark-mode .badge.bg-secondary { background: #2a3d55 !important; color: #a8c8e8 !important; } body.dark-mode .badge.bg-info { background: rgba(13,202,240,0.20) !important; color: #60d8f0 !important; } body.dark-mode .badge.bg-light { background: rgba(74,158,255,0.16) !important; color: #7ecfff !important; } body.dark-mode .badge.text-muted { color: #7a9cc0 !important; } /* ── Recent activity no-data text ── */ body.dark-mode .text-muted p, body.dark-mode p.text-muted { color: #7a9cc0 !important; } /* ── fw-bold text that may inherit dark bg color ── */ body.dark-mode td .fw-bold { color: #dce8ff !important; } body.dark-mode td small.text-muted { color: #7a9cc0 !important; } /* ── Status badges (inline style in history table) ── */ body.dark-mode .status-promoted { box-shadow: 0 0 8px rgba(40,167,69,0.35); } body.dark-mode .status-completed { background: #0d6efd !important; box-shadow: 0 0 8px rgba(13,110,253,0.35); } body.dark-mode .status-support { box-shadow: 0 0 8px rgba(220,53,69,0.35); } body.dark-mode .status-progress { color: #1a1a1a !important; } /* ── Subject mission cards (student dashboard) — keep their gradient but darken ── */ body.dark-mode .mission-card { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.22) !important; } body.dark-mode .mission-card[style*="background:linear-gradient(135deg,#e3f2fd"], body.dark-mode .mission-card[style*="background:linear-gradient(135deg,#fce4ec"], body.dark-mode .mission-card[style*="background:linear-gradient(135deg,#f3e5f5"], body.dark-mode .mission-card[style*="background:linear-gradient(135deg,#fff3e0"], body.dark-mode .mission-card[style*="background:linear-gradient(135deg,#fffde7"] { background: linear-gradient(145deg, #162035, #1c2840) !important; } body.dark-mode .mission-title { color: #dce8ff !important; } body.dark-mode .mission-description { color: #7a9cc0 !important; } body.dark-mode .mission-rewards { color: #7a9cc0 !important; } /* ── Progress bar track inside mission cards ── */ body.dark-mode .progress-bar-container { background: rgba(255,255,255,0.12) !important; } body.dark-mode [style*="background:#ddd;border-radius:10px"] { background: rgba(255,255,255,0.12) !important; } /* ── Assigned teacher / grade banner (student dashboard) ── */ body.dark-mode [style*="background:rgba(255,255,255,0.15)"] { background: rgba(74,158,255,0.10) !important; border: 1px solid rgba(74,158,255,0.18) !important; } /* ── Level info inside progress bar area ── */ body.dark-mode [style*="background:#e3f2fd;border-radius"] { background: rgba(74,158,255,0.10) !important; color: #7ecfff !important; } body.dark-mode [style*="background:#fce4ec;border-radius"] { background: rgba(220,53,69,0.10) !important; color: #f09090 !important; } /* ── Tier color info box (lit-info / num-info) ── */ body.dark-mode #lit-info, body.dark-mode #num-info { background: rgba(74,158,255,0.09) !important; color: #7ecfff !important; } /* ══════════════════════════════════════════════════════════════ MISSION CARD SUBJECT BADGE PILLS These have inline background from PHP so we target the class ══════════════════════════════════════════════════════════════ */ body.dark-mode .subject-literacy { background: rgba(25,118,210,0.18) !important; color: #7ecfff !important; } body.dark-mode .subject-numeracy { background: rgba(194,24,91,0.16) !important; color: #f090b0 !important; } body.dark-mode .subject-science { background: rgba(56,142,60,0.16) !important; color: #70e080 !important; } body.dark-mode .subject-mixed { background: rgba(123,31,162,0.16) !important; color: #c090f0 !important; } /* ══════════════════════════════════════════════════════════════ TIER BADGES (class-based, used inside tables) ══════════════════════════════════════════════════════════════ */ body.dark-mode .tier-support { background: rgba(220,53,69,0.18) !important; color: #ff9090 !important; border: 1px solid rgba(220,53,69,0.30) !important; } body.dark-mode .tier-easy { background: rgba(40,167,69,0.16) !important; color: #70e080 !important; border: 1px solid rgba(40,167,69,0.28) !important; } body.dark-mode .tier-average { background: rgba(255,193,7,0.14) !important; color: #ffe083 !important; border: 1px solid rgba(255,193,7,0.26) !important; } /* ══════════════════════════════════════════════════════════════ PERFORMANCE COLORS (text) ══════════════════════════════════════════════════════════════ */ body.dark-mode .performance-good { color: #70e080 !important; } body.dark-mode .performance-average { color: #ffe083 !important; } body.dark-mode .performance-poor { color: #ff9090 !important; } /* ══════════════════════════════════════════════════════════════ INDEX.PHP — LANDING PAGE SECTION & CARD FIXES Targets white backgrounds that don't react to dark mode yet ══════════════════════════════════════════════════════════════ */ /* ── Body base in dark mode ── */ body.dark-mode { background: #0f1a2e !important; color: #dce8ff !important; } /* ── White section backgrounds ── */ body.dark-mode .roles-section { background: #132238 !important; } body.dark-mode .mechanics-section { background: #132238 !important; } body.dark-mode .benefits-section { background: #0f1a2e !important; } /* ── Role cards (white rounded cards) ── */ body.dark-mode .role-card { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.20) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important; color: #dce8ff !important; } body.dark-mode .role-card:hover { border-color: #FFD700 !important; box-shadow: 0 16px 40px rgba(0,0,0,0.50), 0 0 22px rgba(255,215,0,0.14) !important; } body.dark-mode .role-title { color: #7ecfff !important; } body.dark-mode .role-text { color: #b0c8e0 !important; } body.dark-mode .section-title { color: #7ecfff !important; text-shadow: 0 0 20px rgba(74,158,255,0.28); } /* ── Role card inline info boxes ── */ body.dark-mode .role-card .mt-3.p-3 { background: rgba(74,158,255,0.07) !important; color: #a0b8d0 !important; border-color: rgba(74,158,255,0.15) !important; } body.dark-mode .role-card .mt-3.p-3 strong { color: #7ecfff !important; } /* ── Role badges (inline coloured pills) ── */ body.dark-mode .role-badge[style*="background:#f3e5f5"] { background: rgba(118,75,162,0.18) !important; color: #c4a0ff !important; } body.dark-mode .role-badge[style*="background:#fff8e1"] { background: rgba(245,124,0,0.14) !important; color: #ffc060 !important; } body.dark-mode .role-badge[style*="background:#e8f5e9"] { background: rgba(40,167,69,0.14) !important; color: #70e080 !important; } /* ── How-it-works section ── */ body.dark-mode .how-section { background: linear-gradient(135deg, #0f1a2e 0%, #0d1c30 100%) !important; } body.dark-mode .step-card { background: linear-gradient(145deg, #162035, #1c2840) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important; color: #dce8ff !important; } body.dark-mode .step-title { color: #7ecfff !important; } body.dark-mode .step-desc { color: #b0c8e0 !important; } body.dark-mode .step-number { box-shadow: 0 4px 18px rgba(74,158,255,0.50), 0 0 14px rgba(74,158,255,0.22) !important; } /* ── Tier cards (already colourful, just boost shadows) ── */ body.dark-mode .tier-card { box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important; } body.dark-mode .tier-name { text-shadow: 0 0 18px rgba(255,215,0,0.50); } body.dark-mode .tier-rule { background: rgba(0,0,0,0.22) !important; } body.dark-mode .tier-desc { color: rgba(255,255,255,0.92) !important; } /* ── Mission Rules / Rewards boxes (inline background styles) ── */ body.dark-mode .p-4[style*="background:#f0f4ff"] { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.22) !important; } body.dark-mode .p-4[style*="background:#f0fff4"] { background: linear-gradient(145deg, #102518, #162a1e) !important; border-color: rgba(40,167,69,0.22) !important; } body.dark-mode .p-4[style*="background:#f0f4ff"] h5 { color: #7ecfff !important; } body.dark-mode .p-4[style*="background:#f0fff4"] h5 { color: #70e080 !important; } body.dark-mode .p-4[style*="background:#f0f4ff"] ul, body.dark-mode .p-4[style*="background:#f0fff4"] ul { color: #b0c8e0 !important; } body.dark-mode .p-4[style*="background:#f0f4ff"] li strong, body.dark-mode .p-4[style*="background:#f0fff4"] li strong { color: #dce8ff !important; } body.dark-mode .p-4[style*="background:#f0f4ff"] li em, body.dark-mode .p-4[style*="background:#f0fff4"] li em { color: #a0b8d0 !important; } /* ── text-muted inside sections ── */ body.dark-mode .mechanics-section .text-muted { color: #7a9cc0 !important; } body.dark-mode .mechanics-section strong { color: #dce8ff !important; } /* ── Benefits section ── */ body.dark-mode .benefit-card { box-shadow: 0 12px 40px rgba(0,0,0,0.50) !important; } body.dark-mode .benefit-card[style*="background:linear-gradient(135deg,#1a252f"] { background: linear-gradient(135deg, #0a1628, #101e34) !important; } body.dark-mode .benefit-title { text-shadow: 0 0 18px rgba(255,215,0,0.42); } body.dark-mode .benefit-list li { color: rgba(255,255,255,0.92) !important; } body.dark-mode .benefit-list li::before { text-shadow: 0 0 8px rgba(255,215,0,0.55); } /* ── Stats section ── */ body.dark-mode .stats-section { background: linear-gradient(135deg, #0a1628, #162035) !important; } body.dark-mode .stat-number { text-shadow: 0 0 22px rgba(255,215,0,0.52), 0 0 44px rgba(255,215,0,0.18); } body.dark-mode .stat-label { color: rgba(220,232,255,0.78) !important; } /* ── CTA section (already purple gradient — keep it, darken slightly) ── */ body.dark-mode .cta-section { background: linear-gradient(135deg, #162035 0%, #1c2840 100%) !important; } body.dark-mode .cta-title { text-shadow: 0 0 22px rgba(255,215,0,0.45); } body.dark-mode .cta-text { color: rgba(220,232,255,0.88) !important; } /* ── Features section cards (on purple bg — enhance hover) ── */ body.dark-mode .feature-card { background: rgba(74,158,255,0.07) !important; border-color: rgba(74,158,255,0.20) !important; } body.dark-mode .feature-card:hover { background: rgba(74,158,255,0.14) !important; border-color: #FFD700 !important; box-shadow: 0 0 28px rgba(255,215,0,0.16) !important; } body.dark-mode .feature-title { text-shadow: 0 0 14px rgba(255,215,0,0.42); } body.dark-mode .feature-text { color: rgba(220,232,255,0.88) !important; } /* ── Footer ── */ body.dark-mode .footer { background: #060e1c !important; border-top: 1px solid rgba(74,158,255,0.10); } body.dark-mode .footer p { color: rgba(160,190,220,0.65) !important; } body.dark-mode .footer strong { color: #7ecfff !important; } /* ── PWA install banner ── */ body.dark-mode .install-banner { background: linear-gradient(90deg, #162035, #1c2840) !important; border-top: 1px solid rgba(74,158,255,0.18) !important; box-shadow: 0 -4px 18px rgba(0,0,0,0.35) !important; } body.dark-mode .install-banner .fw-bold { color: #dce8ff !important; } body.dark-mode .install-banner [style*="color:#777"], body.dark-mode .install-banner [style*="color: #777"] { color: #7a9cc0 !important; } body.dark-mode .install-banner [style*="color:#333"], body.dark-mode .install-banner [style*="color: #333"] { color: #dce8ff !important; } /* ── Tutorial modal ── */ body.dark-mode #tutorialModal .modal-content { background: linear-gradient(145deg, #162035, #1c2840) !important; border-color: rgba(74,158,255,0.25) !important; } body.dark-mode #tutorialModal .modal-footer[style*="background:#f8f9fa"] { background: rgba(74,158,255,0.06) !important; } body.dark-mode #tutorialModal .spinner-border { color: #4a9eff !important; } body.dark-mode #tutorialModal .text-muted { color: #7a9cc0 !important; } /* ── Floating manual button — keep vivid ── */ body.dark-mode #manualBtnFloat { box-shadow: 0 6px 24px rgba(74,158,255,0.45) !important; } /* ── Light mode tweaks: off-white for non-hero sections ── */ body:not(.dark-mode) .roles-section { background: #f4f6fb !important; } body:not(.dark-mode) .mechanics-section { background: #f4f6fb !important; } body:not(.dark-mode) .benefits-section { background: #eaeefc !important; } body:not(.dark-mode) .how-section { background: linear-gradient(135deg, #eaeefc 0%, #d8dff4 100%) !important; }