/* ========================================= DARK THEME OVERRIDES Activates when ========================================= */ [data-theme='dark'] { /* Base Body Colors */ --bg-color: #111827; /* Softer dark gray, distinct from pure black */ --bg-secondary: #111827; --white: #1f2937; /* Cards/Modals become elevated lighter gray */ --input-bg: #374151; /* Inputs get another step lighter */ /* Surfaces */ --page-bg: #0b1220; /* Text Colors */ --text-main: #f9fafb; /* Crisp white text for headings */ --text-body: #d1d5db; /* Dimmer text for paragraphs */ /* Generic Border Color Default Override */ --border-color: #374151; /* Modify specific badges to have better contrast */ --badge-bg: rgba(234, 88, 12, 0.15); --badge-text: #fdba74; } /* Base resets for global dark mode */ [data-theme='dark'], [data-theme='dark'] body, [data-theme='dark'] .bg-gray-50, [data-theme='dark'] .app-layout, [data-theme='dark'] .sidebar-main, [data-theme='dark'] .dashboard-container, [data-theme='dark'] .practice-container, [data-theme='dark'] .auth-wrapper, [data-theme='dark'] .onboarding-container, [data-theme='dark'] .admin-main, [data-theme='dark'] .admin-login-wrapper { background-color: var(--bg-color); } /* Cards & Modals - soften shadow */ [data-theme='dark'] .login-card, [data-theme='dark'] .auth-card, [data-theme='dark'] .onboarding-card, [data-theme='dark'] .sidebar { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); border-color: #334155 !important; } /* Modals */ [data-theme='dark'] .modal-content { background: var(--white); border: 1px solid var(--border-color); } [data-theme='dark'] .modal-header { border-bottom-color: var(--border-color); } [data-theme='dark'] .modal-footer { border-top-color: var(--border-color); background-color: rgba(0, 0, 0, 0.1); /* Slight dark indent */ } /* Inputs */ [data-theme='dark'] .form-input, [data-theme='dark'] .login-input { background-color: var(--input-bg); color: var(--text-main); border-color: #475569; } [data-theme='dark'] .form-input:focus, [data-theme='dark'] .login-input:focus { background-color: #334155; /* Keep it dark on focus */ border-color: var(--primary-color); } [data-theme='dark'] .form-label { color: #e2e8f0; } /* Dropdowns / Menus */ [data-theme='dark'] .profile-dropdown, [data-theme='dark'] .user-action-menu { background: var(--white); border-color: var(--border-color); } [data-theme='dark'] .dropdown-item { color: var(--text-main); } [data-theme='dark'] .dropdown-item:hover, [data-theme='dark'] .action-menu-item:hover { background: #334155; } [data-theme='dark'] .dropdown-divider { background: var(--border-color); } /* Headers */ [data-theme='dark'] header, [data-theme='dark'] .dashboard-header, [data-theme='dark'] .admin-header, [data-theme='dark'] .user-page-header { border-bottom-color: var(--border-color); } /* ─────────────────────────────────────────────── Theme Toggle UI Component Replicates the neumorphic pill switch ─────────────────────────────────────────────── */ .theme-toggle-wrapper { display: inline-flex; align-items: center; cursor: pointer; } .theme-toggle-input { display: none; /* Hide the actual checkbox */ } /* Track Light Mode */ .theme-toggle-track { width: 58px; height: 28px; background-color: #e2e8f0; border-radius: 999px; position: relative; /* Inset shadow for depth in light mode */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.4s ease, box-shadow 0.4s ease; } /* Track Dark Mode */ .theme-toggle-input:checked+.theme-toggle-track { background-color: #1e293b; /* Inner shadow for dark mode depth */ box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); } /* Thumb Light Mode */ .theme-toggle-thumb { width: 20px; height: 20px; background-color: #ffffff; border-radius: 50%; position: absolute; top: 4px; left: 4px; /* Crisp drop shadow */ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease, box-shadow 0.4s ease; } /* Thumb Dark Mode */ .theme-toggle-input:checked+.theme-toggle-track .theme-toggle-thumb { transform: translateX(30px); background-color: #475569; /* Slate gray thumb that matches background beautifully */ box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.4); } /* ─────────────────────────────────────────────── Auth Pages (Login/Signup) Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .auth-card { background: var(--white); } [data-theme='dark'] .auth-header h1 { color: var(--text-main); } [data-theme='dark'] .auth-tabs, [data-theme='dark'] .tab-container { background-color: rgba(0, 0, 0, 0.2) !important; } [data-theme='dark'] .auth-tab.active, [data-theme='dark'] .tab-btn.active { background-color: var(--input-bg); color: var(--text-main); } [data-theme='dark'] .social-btn { background-color: var(--white); color: var(--text-main); border-color: var(--border-color); } [data-theme='dark'] .social-btn:hover { background-color: var(--input-bg); } /* ─────────────────────────────────────────────── Admin Question Bank Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .qb-search-input, [data-theme='dark'] .qb-filter-select { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-main); } [data-theme='dark'] .qb-table-wrap { background-color: var(--white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } [data-theme='dark'] .qb-table thead th { background-color: var(--page-bg); border-bottom-color: var(--page-bg); } [data-theme='dark'] .qb-row td { border-bottom-color: var(--page-bg); } [data-theme='dark'] .qb-row:hover { background-color: rgba(255, 255, 255, 0.03); } [data-theme='dark'] .qb-page-btn { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-body); } [data-theme='dark'] .qb-page-btn.active, [data-theme='dark'] .qb-page-btn:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #ffffff; } [data-theme='dark'] .badge-draft { background-color: rgba(255, 255, 255, 0.1); color: #94a3b8; } [data-theme='dark'] .qb-img-badge { background-color: rgba(22, 163, 74, 0.15); color: #4ade80; } /* ─────────────────────────────────────────────── Admin Subjects Page Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] #subjectSearch { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-main); } [data-theme='dark'] .subject-card-v2 { background-color: var(--white); border-color: var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } [data-theme='dark'] .subject-card-v2:hover { border-color: #475569; } [data-theme='dark'] .subject-card-v2.active { background-color: rgba(var(--primary-rgb), 0.1); border-color: rgba(var(--primary-rgb), 0.3); } [data-theme='dark'] .sc-edit-btn { background-color: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .topics-container { background-color: var(--white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } [data-theme='dark'] .add-topic-btn { background-color: rgba(255, 255, 255, 0.05); border-color: var(--border-color); } [data-theme='dark'] .add-topic-btn:hover { background-color: rgba(255, 255, 255, 0.1); } [data-theme='dark'] .topic-item { background-color: var(--page-bg); border-color: transparent; } [data-theme='dark'] .topic-item:hover { background-color: rgba(255, 255, 255, 0.05); border-color: var(--border-color); } [data-theme='dark'] .topic-progress-wrap { background-color: var(--border-color); } [data-theme='dark'] .btn-delete-subject { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #f87171; } [data-theme='dark'] .btn-delete-subject:hover { background-color: rgba(239, 68, 68, 0.2); } /* ─────────────────────────────────────────────── Sidebar Toggle Button ─────────────────────────────────────────────── */ [data-theme='dark'] .sidebar-toggle-btn { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-body); } [data-theme='dark'] .sidebar-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--primary-color); } /* ─────────────────────────────────────────────── Exam Interface Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .exam-layout { background-color: var(--page-bg); } @media (min-width: 768px) { [data-theme='dark'] .exam-layout { background-color: var(--white); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } } /* Header */ [data-theme='dark'] .exam-header { background-color: var(--white); border-bottom-color: var(--border-color); } [data-theme='dark'] .exam-quit-btn:hover { background-color: var(--input-bg); } [data-theme='dark'] .exam-brand { color: var(--text-main); } [data-theme='dark'] .exam-subject-tag { color: #6ee7b7; background-color: rgba(var(--primary-rgb), 0.15); } /* Progress Bar */ [data-theme='dark'] .exam-progress-bar-wrapper { background-color: var(--input-bg); } /* Timer */ [data-theme='dark'] .timer-container { background-color: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme='dark'] .timer-container.warning { background-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } /* Question Header */ [data-theme='dark'] .question-number-badge { background-color: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .report-issue-btn { color: var(--text-body); } [data-theme='dark'] .report-issue-btn:hover { color: #fbbf24; background-color: rgba(245, 158, 11, 0.1); } /* Question Image */ [data-theme='dark'] .question-image-container { border-color: var(--border-color); background-color: var(--input-bg); } /* Options */ [data-theme='dark'] .option-inner { border-color: var(--border-color); background-color: var(--page-bg); } [data-theme='dark'] .option-inner:hover { border-color: #475569; background-color: rgba(255, 255, 255, 0.03); } [data-theme='dark'] .option-letter { background-color: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .option-label input:checked+.option-inner { border-color: var(--primary-color); background-color: rgba(var(--primary-rgb), 0.1); } [data-theme='dark'] .option-label input:checked+.option-inner .option-letter { background-color: var(--primary-color); color: #ffffff; } /* Footer */ [data-theme='dark'] .exam-footer { background-color: var(--page-bg); border-top-color: var(--border-color); } @media (min-width: 768px) { [data-theme='dark'] .exam-footer { background-color: var(--white); } } [data-theme='dark'] .btn-outline { background-color: var(--page-bg); border-color: var(--border-color); color: var(--text-main); } [data-theme='dark'] .btn-outline:hover { background-color: var(--input-bg); } [data-theme='dark'] .btn-outline:disabled { background-color: rgba(255, 255, 255, 0.05); border-color: var(--border-color); color: #64748b; } [data-theme='dark'] .btn-primary { background-color: var(--primary-color); color: #ffffff; } [data-theme='dark'] .btn-finish { background-color: var(--primary-color); color: #ffffff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25); } /* Sidebar — Flag Button */ [data-theme='dark'] .sidebar-flag-btn { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.25); color: #f87171; } [data-theme='dark'] .sidebar-flag-btn:hover { background: rgba(239, 68, 68, 0.2); } [data-theme='dark'] .sidebar-flag-btn.flagged { background: #ef4444; border-color: #ef4444; color: #ffffff; } /* Sidebar — Sections */ [data-theme='dark'] .sidebar-section { border-color: var(--border-color); background: var(--white); } [data-theme='dark'] .sidebar-section-header { border-bottom-color: var(--border-color); background: var(--page-bg); } [data-theme='dark'] .sidebar-section-title { color: #94a3b8; } [data-theme='dark'] .calc-toggle-btn { color: var(--text-body); } [data-theme='dark'] .calc-toggle-btn:hover { color: var(--text-main); background: var(--input-bg); } /* Sidebar — Calculator */ [data-theme='dark'] .calc-display { background-color: var(--input-bg); color: var(--text-main); } [data-theme='dark'] .calc-btn { background: var(--input-bg); color: var(--text-main); } [data-theme='dark'] .calc-btn:hover { background: #475569; } [data-theme='dark'] .calc-op { background: rgba(217, 119, 6, 0.15); color: #fbbf24; } [data-theme='dark'] .calc-op:hover { background: rgba(217, 119, 6, 0.25); } [data-theme='dark'] .calc-clear { background: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme='dark'] .calc-clear:hover { background: rgba(239, 68, 68, 0.25); } [data-theme='dark'] .calc-equals { background: var(--primary-color); color: #ffffff; } [data-theme='dark'] .calc-equals:hover { background: var(--primary-hover); } /* Sidebar — Navigator Legend */ [data-theme='dark'] .legend-item { color: #94a3b8; } /* Sidebar — Mobile Drawer */ [data-theme='dark'] .mobile-tools-drawer { background: var(--white); box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5); } [data-theme='dark'] .mobile-drawer-handle { background-color: var(--border-color); } [data-theme='dark'] .mobile-drawer-header { border-bottom-color: var(--border-color); } [data-theme='dark'] .mobile-drawer-tab { color: var(--text-body); background: var(--page-bg); border-color: var(--border-color); } [data-theme='dark'] .mobile-drawer-tab.active { background: var(--primary-color); border-color: var(--primary-color); color: #ffffff; } [data-theme='dark'] .mobile-tools-backdrop.open { background: rgba(0, 0, 0, 0.6); } /* Report */ [data-theme='dark'] .report-textarea { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-main); } [data-theme='dark'] .submitting-content { background-color: var(--white); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); } /* ─────────────────────────────────────────────── Results Page Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .back-btn { background-color: var(--input-bg); color: var(--text-main); } [data-theme='dark'] .back-btn:hover { background-color: rgba(255, 255, 255, 0.1); } [data-theme='dark'] .results-meta-badge { background-color: rgba(217, 119, 6, 0.15); color: #fcd34d; } [data-theme='dark'] .result-card { background-color: var(--white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } [data-theme='dark'] .main-score-card { background: linear-gradient(to bottom right, rgba(var(--primary-rgb), 0.15), var(--white)); } [data-theme='dark'] .ring-content { background-color: var(--primary-dark); } [data-theme='dark'] .xp-earned-badge { background-color: var(--input-bg); border-color: var(--border-color); } [data-theme='dark'] .score-band, [data-theme='dark'] .streak-badge { background-color: var(--input-bg); color: #cbd5e1; } [data-theme='dark'] .stat-box { background-color: var(--page-bg); } [data-theme='dark'] .weakness-card { background-color: rgba(180, 83, 9, 0.15); /* Tinted amber for dark bg */ } [data-theme='dark'] .weakness-card .card-header-flex h3, [data-theme='dark'] .weakness-card .weakness-desc { color: #fcd34d; } [data-theme='dark'] .topic-pill { background-color: var(--input-bg); border-color: rgba(252, 211, 77, 0.3); color: #fcd34d; } [data-theme='dark'] .count-correct { background-color: rgba(16, 185, 129, 0.15); color: #34d399; } [data-theme='dark'] .count-wrong { background-color: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme='dark'] .count-unanswered { background-color: rgba(255, 255, 255, 0.1); color: #cbd5e1; } [data-theme='dark'] .btn-outline.results-btn { background-color: var(--page-bg); border-color: var(--border-color); color: var(--text-main); } [data-theme='dark'] .btn-outline.results-btn:hover { background-color: var(--input-bg); } /* ─────────────────────────────────────────────── Admin Mobile Navigation Coverage ─────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme='dark'] .bottom-nav { background-color: var(--page-bg); border-top-color: var(--border-color); } [data-theme='dark'] .bottom-nav .nav-item { color: var(--text-body); } [data-theme='dark'] .bottom-nav .nav-item:hover, [data-theme='dark'] .bottom-nav .nav-item.active { color: var(--primary-color); } [data-theme='dark'] .more-drawer-backdrop.open { background: rgba(0, 0, 0, 0.7); } [data-theme='dark'] .more-drawer { background-color: var(--page-bg); box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5); } [data-theme='dark'] .more-drawer-handle { background-color: var(--border-color); } [data-theme='dark'] .more-drawer-title { color: var(--text-muted); } [data-theme='dark'] .more-drawer-item { color: var(--text-main); } [data-theme='dark'] .more-drawer-item:hover, [data-theme='dark'] .more-drawer-item.active { background-color: var(--input-bg); color: var(--primary-color); } [data-theme='dark'] .more-drawer-item.active .more-drawer-icon { color: var(--primary-color); } [data-theme='dark'] .more-drawer-icon { background-color: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .more-drawer-chevron { color: var(--text-muted); } [data-theme='dark'] .more-drawer-item--danger { color: #f87171; } [data-theme='dark'] .more-drawer-item--danger .more-drawer-icon { background-color: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme='dark'] .more-drawer-item--danger:hover { background-color: rgba(239, 68, 68, 0.15); color: #f87171; } } /* ─────────────────────────────────────────────── Profile History Preview Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .history-preview-section { background-color: var(--white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); } [data-theme='dark'] .history-item { border-bottom-color: var(--page-bg); } [data-theme='dark'] .empty-state-card { background-color: var(--page-bg); } [data-theme='dark'] .score-high { background-color: rgba(16, 185, 129, 0.15); color: #34d399; } [data-theme='dark'] .score-med { background-color: rgba(249, 115, 22, 0.15); color: #fb923c; } [data-theme='dark'] .score-low { background-color: rgba(239, 68, 68, 0.15); color: #f87171; } /* ─────────────────────────────────────────────── Review Page Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .review-layout { background-color: var(--white); } @media (min-width: 768px) { [data-theme='dark'] .review-layout { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } } [data-theme='dark'] .review-header { background-color: var(--white); border-bottom-color: var(--border-color); } [data-theme='dark'] .review-back-btn { background: var(--input-bg); color: var(--text-main); } [data-theme='dark'] .review-back-btn:hover { background: rgba(255, 255, 255, 0.1); } /* Toolbar / Filters */ [data-theme='dark'] .review-toolbar { background: var(--white); border-bottom-color: var(--border-color); } [data-theme='dark'] .filter-pill { background: var(--page-bg); border-color: var(--border-color); color: var(--text-body); } [data-theme='dark'] .filter-pill:hover { background: var(--input-bg); } [data-theme='dark'] .filter-pill.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #ffffff; } [data-theme='dark'] .filter-pill:not(.active) .filter-count { background: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .subject-tab { background: var(--page-bg); border-color: var(--border-color); color: var(--text-body); } [data-theme='dark'] .subject-tab:hover { background: var(--input-bg); } [data-theme='dark'] .subject-tab.active { background: #e2e8f0; border-color: #e2e8f0; color: #0f172a; } /* Sidebar */ [data-theme='dark'] .review-sidebar { background: var(--page-bg); border-right-color: var(--border-color); } [data-theme='dark'] .sidebar-grid-section { border-top-color: var(--border-color); } /* Weakness Card */ [data-theme='dark'] .weakness-detect-card { background: linear-gradient(135deg, rgba(0, 121, 107, 0.15) 0%, rgba(0, 77, 64, 0.2) 100%); } [data-theme='dark'] .weakness-detect-card .weakness-detect-icon { background: rgba(255, 255, 255, 0.1); color: #4db6ac; } [data-theme='dark'] .weakness-detect-text strong { color: #4db6ac; } [data-theme='dark'] .weakness-detect-text p { color: #80cbc4; } [data-theme='dark'] .weakness-detect-card.positive { background: linear-gradient(135deg, rgba(46, 125, 50, 0.15) 0%, rgba(27, 94, 32, 0.2) 100%); } [data-theme='dark'] .weakness-detect-card.positive .weakness-detect-icon { color: #66bb6a; } [data-theme='dark'] .weakness-detect-card.positive .weakness-detect-text strong { color: #66bb6a; } [data-theme='dark'] .weakness-detect-card.positive .weakness-detect-text p { color: #81c784; } /* Navigator Strip */ [data-theme='dark'] .question-nav-strip { background: var(--white); border-color: var(--border-color); } [data-theme='dark'] .q-nav-correct { background-color: rgba(5, 150, 105, 0.2); color: #34d399; } [data-theme='dark'] .q-nav-incorrect { background-color: rgba(220, 38, 38, 0.2); color: #f87171; } [data-theme='dark'] .q-nav-unanswered { background-color: var(--input-bg); color: #94a3b8; } [data-theme='dark'] .q-nav-item.current { background-color: #e2e8f0; color: #0f172a; } [data-theme='dark'] .q-nav-item.bookmarked::after { border-color: var(--white); } /* Question Card */ [data-theme='dark'] .review-question-card { background: var(--white); border-color: var(--border-color); } [data-theme='dark'] .bookmark-btn { background: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .bookmark-btn:hover { background: rgba(255, 255, 255, 0.1); } [data-theme='dark'] .bookmark-btn.active { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } [data-theme='dark'] .review-time-badge { background: var(--input-bg); color: #94a3b8; } [data-theme='dark'] .badge-correct { background-color: rgba(5, 150, 105, 0.15); color: #34d399; } [data-theme='dark'] .badge-incorrect { background-color: rgba(220, 38, 38, 0.15); color: #f87171; } [data-theme='dark'] .badge-unanswered { background-color: var(--input-bg); color: #94a3b8; } /* Options */ [data-theme='dark'] .review-option { border-color: var(--border-color); background: var(--page-bg); } [data-theme='dark'] .review-option-indicator { background-color: var(--input-bg); color: var(--text-body); } [data-theme='dark'] .review-option.option-correct { background-color: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); } [data-theme='dark'] .review-option.option-wrong { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } /* Explanation */ [data-theme='dark'] .review-explanation { background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.15) 100%); border-left-color: #f97316; } [data-theme='dark'] .review-explanation h4 { color: #fb923c; } [data-theme='dark'] .review-explanation p { color: #fdba74; } [data-theme='dark'] .explanation-feedback { border-top-color: rgba(249, 115, 22, 0.15); } [data-theme='dark'] .feedback-label { color: #fb923c; } [data-theme='dark'] .feedback-btn { border-color: rgba(249, 115, 22, 0.2); background: rgba(255, 255, 255, 0.05); color: #fb923c; } [data-theme='dark'] .feedback-btn:hover { background: rgba(255, 255, 255, 0.1); } [data-theme='dark'] .feedback-btn.active { background: #f97316; border-color: #f97316; color: #ffffff; } /* Footer */ [data-theme='dark'] .review-footer { background-color: var(--white); border-top-color: var(--border-color); } [data-theme='dark'] .review-btn-outline { background: var(--page-bg); border-color: var(--border-color); color: var(--text-main); } [data-theme='dark'] .review-btn-outline:disabled { background: rgba(255, 255, 255, 0.05); } /* Grid Overlay */ [data-theme='dark'] .grid-overlay-content { background: var(--white); } [data-theme='dark'] .grid-overlay-close { background: var(--input-bg); color: var(--text-body); } /* Empty State */ [data-theme='dark'] .review-empty-state { color: var(--text-body); } /* ─────────────────────────────────────────────── Exam Sidebar Coverage ─────────────────────────────────────────────── */ [data-theme='dark'] .exam-sidebar { background: var(--page-bg); border-left-color: var(--border-color); } [data-theme='dark'] .exam-sidebar-item { border-color: var(--border-color); background: var(--white); color: var(--text-body); } [data-theme='dark'] .exam-sidebar-item:hover { background: var(--input-bg); } [data-theme='dark'] .exam-sidebar-item.answered { background-color: rgba(74, 222, 128, 0.2); border-color: rgba(74, 222, 128, 0.35); color: #4ade80; } [data-theme='dark'] .exam-sidebar-item.current { background-color: #38bdf8; border-color: #38bdf8; color: #ffffff; } [data-theme='dark'] .exam-sidebar-item.flagged::after { border-color: var(--page-bg); } /* ─────────────────────────────────────────────── Theme Selector (Profile Settings) Dark Overrides ─────────────────────────────────────────────── */ [data-theme='dark'] .theme-selector { background-color: var(--page-bg); } [data-theme='dark'] .theme-seg-btn { color: var(--text-body); } [data-theme='dark'] .theme-seg-btn:hover { background: rgba(255, 255, 255, 0.05); } [data-theme='dark'] .theme-seg-btn.active { background: var(--input-bg); color: var(--primary-color); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } [data-theme='dark'] .setting-item--appearance .setting-icon { background: rgba(168, 85, 247, 0.15) !important; color: #c084fc !important; }