/* * dark-mode.css — System-wide dark mode styles * * Applied via: html.dark-mode (set in before paint to prevent flash) * Toggled by: assets/js/dark-mode.js * * Include this file in EVERY page's AFTER your page-specific styles * so these rules have higher specificity where needed. */ /* ═══════════════════════════════════════════════════════ CSS CUSTOM PROPERTY OVERRIDES ═══════════════════════════════════════════════════════ */ html.dark-mode { --body-bg: #111827; --card-bg: #1e2533; --text-dark: #e2e8f0; --sidebar-bg: #0f172a; --sidebar-hover: #1e2a3a; } /* ═══════════════════════════════════════════════════════ BASE ELEMENTS ═══════════════════════════════════════════════════════ */ html.dark-mode body { background-color: #111827; color: #e2e8f0; } html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: #93c5fd; } html.dark-mode p, html.dark-mode span, html.dark-mode label, html.dark-mode li { color: #94a3b8; } html.dark-mode a { color: #93c5fd; } html.dark-mode a:hover { color: #bfdbfe; } html.dark-mode hr { border-color: rgba(255, 255, 255, 0.08); } /* ═══════════════════════════════════════════════════════ FORM CONTROLS ═══════════════════════════════════════════════════════ */ html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background: #2a3044; border-color: rgba(255, 255, 255, 0.12) !important; color: #e2e8f0; } html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: #64748b; } html.dark-mode input:focus, html.dark-mode select:focus, html.dark-mode textarea:focus { outline-color: #3b82f6; border-color: #3b82f6 !important; } /* ═══════════════════════════════════════════════════════ LAYOUT — HEADER / BANNER ═══════════════════════════════════════════════════════ */ html.dark-mode .header, html.dark-mode .topbar { background: #1a1f2e !important; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); color: #e2e8f0; } html.dark-mode .header:hover, html.dark-mode .topbar:hover { background: #1f2640 !important; } html.dark-mode .admin-info h1, html.dark-mode .teacher-info h1 { color: #93c5fd !important; } html.dark-mode .admin-info p, html.dark-mode .teacher-info p { color: #94a3b8 !important; } /* School banner (teacher dashboard) */ html.dark-mode .school-banner { background: linear-gradient(135deg, #0f172a 0%, #0a1020 55%, #0d1f3c 100%) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); } /* ═══════════════════════════════════════════════════════ LAYOUT — SIDEBAR ═══════════════════════════════════════════════════════ */ html.dark-mode .sidebar { background: #0f172a; } html.dark-mode .sidebar-header { background: #0a1020; border-bottom-color: rgba(255, 255, 255, 0.07); } html.dark-mode .nav-item { border-color: rgba(255, 255, 255, 0.05); } html.dark-mode .nav-link { color: #cbd5e1; } html.dark-mode .nav-link:hover { background: #1e2a3a; color: #fff; } html.dark-mode .dropdown-menu, html.dark-mode .nested-menu { background: rgba(0, 0, 0, 0.25); } html.dark-mode .nested-menu .nav-link { color: #94a3b8; } html.dark-mode .logout-section { border-color: rgba(255, 255, 255, 0.08); } /* ═══════════════════════════════════════════════════════ LAYOUT — MAIN CONTENT AREA ═══════════════════════════════════════════════════════ */ html.dark-mode .main-content { background: #111827; } html.dark-mode .stats-header h2 { color: #93c5fd !important; } /* ═══════════════════════════════════════════════════════ CARDS — GENERIC ═══════════════════════════════════════════════════════ */ html.dark-mode .stat-card, html.dark-mode .detailed-card, html.dark-mode .chart-card, html.dark-mode .chart-container, html.dark-mode .activity-mini-card, html.dark-mode .daily-summary-card, html.dark-mode .users-list, html.dark-mode .logs-container, html.dark-mode .table-container, html.dark-mode .distribution-table-container, html.dark-mode .activity-table-wrapper, html.dark-mode .card, html.dark-mode .welcome-section, html.dark-mode .subject-card, html.dark-mode .class-card, html.dark-mode .info-card, html.dark-mode .schedule-card, html.dark-mode .quick-action-card, html.dark-mode .inactivity-modal-content { background: #1e2533 !important; color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* Card headings */ html.dark-mode .detailed-card h3, html.dark-mode .chart-card h4, html.dark-mode .chart-container h3, html.dark-mode .logs-container h3, html.dark-mode .distribution-section h3, html.dark-mode .activity-section h3, html.dark-mode .daily-activity-section .section-header h3, html.dark-mode .users-list h4 { color: #93c5fd !important; border-color: rgba(255, 255, 255, 0.1); } /* ═══════════════════════════════════════════════════════ STAT CARDS (admin dashboard) ═══════════════════════════════════════════════════════ */ html.dark-mode .stat-card p, html.dark-mode .stat-card .subtext { color: #94a3b8 !important; } html.dark-mode .stat-card i { color: #93c5fd; } html.dark-mode .stat-row { border-color: rgba(255, 255, 255, 0.07); } html.dark-mode .stat-label { color: #94a3b8 !important; } html.dark-mode .stat-value { color: #e2e8f0 !important; } html.dark-mode .progress-bar { background: #263248; } /* ═══════════════════════════════════════════════════════ ACTIVITY MINI CARDS ═══════════════════════════════════════════════════════ */ html.dark-mode .activity-mini-card { border-left-color: #3b82f6; } html.dark-mode .activity-mini-card .label, html.dark-mode .activity-mini-card .sub { color: #94a3b8 !important; } html.dark-mode .daily-summary-card { border-color: rgba(255, 255, 255, 0.06); } html.dark-mode .summary-content p { color: #94a3b8 !important; } /* ═══════════════════════════════════════════════════════ DISTRIBUTION / ACTIVITY TABLES ═══════════════════════════════════════════════════════ */ html.dark-mode .distribution-table th, html.dark-mode .activity-table th, html.dark-mode table th { background: #2563EB !important; color: #fff !important; } html.dark-mode .distribution-table td, html.dark-mode .activity-table td, html.dark-mode table td { border-color: rgba(255, 255, 255, 0.06) !important; color: #cbd5e1 !important; } html.dark-mode .distribution-table tr:hover, html.dark-mode .activity-table tr:hover, html.dark-mode table tr:hover { background: #263248 !important; } html.dark-mode .distribution-table-container::-webkit-scrollbar-track { background: #1a1f2e; } html.dark-mode .distribution-table-container::-webkit-scrollbar-thumb { background: #3b4a63; } /* ═══════════════════════════════════════════════════════ ACTIVITY LEGEND / GRID ═══════════════════════════════════════════════════════ */ html.dark-mode .activity-legend { background: #263248; } html.dark-mode .legend-item { color: #cbd5e1 !important; } html.dark-mode .activity-grid-row { border-color: rgba(255, 255, 255, 0.06); } html.dark-mode .activity-grid-row:hover { background: #263248; } html.dark-mode .date-main { color: #e2e8f0 !important; } html.dark-mode .date-sub { color: #64748b !important; } html.dark-mode .date-range-badge { background: #263248; color: #cbd5e1 !important; } /* ═══════════════════════════════════════════════════════ ACTIVE USERS LIST ═══════════════════════════════════════════════════════ */ html.dark-mode .user-item { border-color: rgba(255, 255, 255, 0.07); } html.dark-mode .user-avatar { background: #263248; color: #93c5fd; } html.dark-mode .user-details h5 { color: #e2e8f0 !important; } html.dark-mode .user-details p, html.dark-mode .user-time { color: #64748b !important; } /* ═══════════════════════════════════════════════════════ ACTIVITY LOG LIST ═══════════════════════════════════════════════════════ */ html.dark-mode .log-item { border-color: rgba(255, 255, 255, 0.07); } html.dark-mode .log-item .description { color: #94a3b8 !important; } html.dark-mode .log-item .time { color: #64748b !important; } /* ═══════════════════════════════════════════════════════ SEARCH INPUT & PAGINATION ═══════════════════════════════════════════════════════ */ html.dark-mode .search-input { background: #2a3044; border-color: rgba(255, 255, 255, 0.12) !important; color: #e2e8f0; } html.dark-mode .search-input::placeholder { color: #64748b; } html.dark-mode .pagination a, html.dark-mode .pagination span { background: #263248; border-color: rgba(255, 255, 255, 0.1); color: #cbd5e1; } html.dark-mode .pagination a:hover { background: #2563EB; color: #fff; } html.dark-mode .pagination .current { background: #2563EB; border-color: #2563EB; color: #fff; } /* ═══════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════ */ html.dark-mode .btn.outline { border-color: #3b82f6; color: #93c5fd; } html.dark-mode .btn.outline:hover { background: #2563EB; color: #fff; } /* ═══════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════ */ html.dark-mode .badge-default, html.dark-mode .badge-logout, html.dark-mode .badge-total { background: #2a3a55; color: #94a3b8; } /* ═══════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════ */ html.dark-mode .footer, html.dark-mode footer { background: #1a1f2e !important; border-top-color: rgba(255, 255, 255, 0.08) !important; color: #64748b !important; } html.dark-mode .footer-links a { color: #93c5fd !important; } html.dark-mode .footer-links a:hover { color: #bfdbfe !important; } /* ═══════════════════════════════════════════════════════ TEACHER DASHBOARD — SPECIFIC ELEMENTS ═══════════════════════════════════════════════════════ */ html.dark-mode .welcome-section h2 { color: #93c5fd !important; } html.dark-mode .welcome-section p { color: #94a3b8 !important; } /* ═══════════════════════════════════════════════════════ INACTIVITY MODAL - DARK MODE ═══════════════════════════════════════════════════════ */ html.dark-mode .inactivity-modal { background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.dark-mode .inactivity-modal-content { background: #1e293b; color: #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); } html.dark-mode .timer-progress { background: #334155; } html.dark-mode .warning-icon i { color: #f87171; } html.dark-mode .inactivity-modal-header i { color: #93c5fd; } html.dark-mode .inactivity-modal-header h2 { color: #f1f5f9; } html.dark-mode .inactivity-modal-body p { color: #94a3b8; } html.dark-mode .countdown-timer { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); border-color: #991b1b; } html.dark-mode .countdown-timer .label { color: #fca5a5; } html.dark-mode .countdown-timer .time, html.dark-mode .countdown { color: #f87171; } html.dark-mode .inactivity-note, html.dark-mode .hint-text { color: #64748b; } html.dark-mode .inactivity-note i, html.dark-mode .hint-text i { color: #fbbf24; } html.dark-mode .inactivity-btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } html.dark-mode .inactivity-btn-primary:hover { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); } html.dark-mode .inactivity-btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } html.dark-mode .inactivity-btn-danger:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4); } html.dark-mode .inactivity-btn-secondary { background: #334155; color: #e2e8f0; border-color: #475569; } html.dark-mode .inactivity-btn-secondary:hover { background: #475569; color: #f1f5f9; } html.dark-mode .btn.btn-secondary { background: #334155; color: #e2e8f0; border-color: #475569; } html.dark-mode .btn.btn-secondary:hover { background: #475569; color: #f1f5f9; } /* ═══════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON — SHARED STYLES (applies on all pages that include dark-mode.css) ═══════════════════════════════════════════════════════ */ /* Base toggle — works on light backgrounds (admin header) */ .dark-toggle { display: flex; align-items: center; gap: 8px; background: none; border: 1.5px solid rgba(26, 42, 108, 0.25); border-radius: 50px; padding: 6px 14px 6px 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: #4a5568; transition: all 0.25s ease; white-space: nowrap; letter-spacing: 0.2px; flex-shrink: 0; user-select: none; } .dark-toggle:hover { border-color: #1D4ED8; color: #1D4ED8; background: rgba(29, 78, 216, 0.06); } /* Toggle variant for dark-banner pages (teacher header which is always dark) */ .dark-toggle.on-dark-bg { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.85); } .dark-toggle.on-dark-bg:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.45); color: #fff; } /* Track */ .dark-toggle .toggle-track { width: 34px; height: 18px; background: #cbd5e1; border-radius: 50px; position: relative; transition: background 0.25s; flex-shrink: 0; } .dark-toggle.on-dark-bg .toggle-track { background: rgba(255, 255, 255, 0.28); } /* Thumb */ .dark-toggle .toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: transform 0.25s ease; } /* Icon */ .dark-toggle .toggle-icon { font-size: 0.9rem; transition: transform 0.4s ease; display: flex; align-items: center; } /* ── ACTIVE (dark mode ON) state ── */ html.dark-mode .dark-toggle { border-color: rgba(147, 197, 253, 0.4); color: #93c5fd; background: rgba(59, 130, 246, 0.1); } html.dark-mode .dark-toggle:hover { background: rgba(59, 130, 246, 0.2); border-color: #93c5fd; color: #bfdbfe; } html.dark-mode .dark-toggle .toggle-track { background: #3b82f6; } html.dark-mode .dark-toggle .toggle-thumb { transform: translateX(16px); } html.dark-mode .dark-toggle .toggle-icon { transform: rotate(360deg); }