/* ========================================== Dark mode for student pages (all platforms) Activated by: Toggle button: #themeToggle (see pages) ========================================== */ /* --- Circle theme reveal overlay --- */ .theme-reveal { position: fixed; top: 0; left: 0; width: 0; height: 0; border-radius: 50%; pointer-events: none; z-index: -1; transform: translate(-50%, -50%) scale(0); opacity: 0; } .theme-reveal.theme-reveal-active { transition: width .6s cubic-bezier(.4,0,.2,1), height .6s cubic-bezier(.4,0,.2,1), opacity .1s linear; width: var(--reveal-size, 2200px); height: var(--reveal-size, 2200px); opacity: 1; } .theme-reveal.theme-reveal-done { opacity: 0; } html[data-theme="dark"] body { background: linear-gradient(160deg, #0e1124 0%, #141834 40%, #0c0f20 100%) fixed !important; color: #e7e9f5; } /* --- Shared navbar --- */ html[data-theme="dark"] .navbar { background: #131631 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important; } html[data-theme="dark"] .navbar .logout-btn, html[data-theme="dark"] .navbar .back-btn, html[data-theme="dark"] .navbar .navbar-text { color: #c7cbe6 !important; } html[data-theme="dark"] .navbar .navbar-brand span { color: #a78bfa; } /* --- Enhanced student navbar dark mode --- */ html[data-theme="dark"] .student-nav { background: rgba(19, 22, 49, 0.92) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } html[data-theme="dark"] .student-nav-start { color: #e7e9f5; } html[data-theme="dark"] .student-nav-title { color: #e7e9f5; } html[data-theme="dark"] .student-nav-back { background: rgba(72, 191, 225, 0.1); color: #48cae4; } html[data-theme="dark"] .student-nav-back:hover { background: rgba(72, 191, 225, 0.2); } html[data-theme="dark"] .student-nav-icon-btn { background: rgba(255, 255, 255, 0.06); color: #c7cbe6; } html[data-theme="dark"] .student-nav-icon-btn:hover { background: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .student-nav-btn-primary { background: linear-gradient(135deg, #0096c7, #0077b6); color: #fff; box-shadow: 0 2px 8px rgba(0, 150, 199, 0.3); } html[data-theme="dark"] .student-nav-btn-outline { color: #48cae4; border-color: rgba(72, 202, 228, 0.3); } html[data-theme="dark"] .student-nav-btn-outline:hover { background: rgba(72, 202, 228, 0.1); border-color: #48cae4; } html[data-theme="dark"] .student-nav-balance { background: rgba(72, 191, 225, 0.1); color: #48cae4; } html[data-theme="dark"] .student-nav-balance:hover { background: rgba(72, 191, 225, 0.2); } html[data-theme="dark"] .student-nav-logout { color: #f87171; } html[data-theme="dark"] .student-nav-logout:hover { background: rgba(248, 113, 113, 0.1); } /* --- Generic cards (Bootstrap .card used across pages) --- */ html[data-theme="dark"] .main-content .card, html[data-theme="dark"] .main-content.card, html[data-theme="dark"] .card { background: #171b3a !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme="dark"] .card-header { background: linear-gradient(135deg, #1a1f44 0%, #161a38 100%) !important; border-bottom-color: #2a3060 !important; color: #fff; } html[data-theme="dark"] .card-header-warning { background: linear-gradient(135deg, #6b4a00 0%, #6b2020 100%) !important; border-bottom-color: #2a3060 !important; color: #ffd270; } html[data-theme="dark"] .card-header-warning i { color: #ffd270; } html[data-theme="dark"] .card-header-custom, html[data-theme="dark"] .card-header-success, html[data-theme="dark"] .card-header-info, html[data-theme="dark"] .card-header-danger { background: linear-gradient(135deg, #1a1f44 0%, #161a38 100%) !important; border-bottom-color: #2a3060 !important; color: #fff; } html[data-theme="dark"] .card-footer, html[data-theme="dark"] .card-footer.bg-white, html[data-theme="dark"] .card-footer.bg-light { background: #171b3a !important; border-top-color: #2a3060 !important; } html[data-theme="dark"] .sorting-controls { background: #171b3a !important; border: 1px solid #2a3060 !important; } html[data-theme="dark"] .file-upload-container { border-color: #3b4280 !important; background-color: #171b3a !important; } html[data-theme="dark"] .file-upload-container:hover { border-color: #60a5fa !important; background-color: #1a1f44 !important; } html[data-theme="dark"] .file-upload-container.has-file { border-color: #34d399 !important; background-color: #14281e !important; } html[data-theme="dark"] .current-file { background-color: #14281e !important; border: 1px solid #34d399 !important; color: #86efac; } /* --- Courses list page --- */ html[data-theme="dark"] .modern-course-card { background: none; } html[data-theme="dark"] .modern-course-card .course-details-container { background: #171b3a; border-color: #2a3060; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); } html[data-theme="dark"] .modern-course-card .course-details-container > div { color: inherit; } html[data-theme="dark"] .modern-course-card .course-title { color: #fff; } html[data-theme="dark"] .modern-course-card .course-description { color: #aab0d4; } html[data-theme="dark"] .modern-course-card .course-stats .stat-item { color: #c7cbe6; background: rgba(255, 255, 255, .07); border-color: #2a3060; } html[data-theme="dark"] .modern-course-card .course-stats .stat-item .material-symbols-outlined, html[data-theme="dark"] .modern-course-card .material-symbols-outlined { color: #a78bfa; } html[data-theme="dark"] .modern-course-card .w-100.fw-bold.d-flex.gap-2, html[data-theme="dark"] .modern-course-card .text-muted { color: #8b90b8 !important; } html[data-theme="dark"] .modern-course-card .original-price-crossed { color: #8b90b8; } /* --- Guest grade toggles & sections --- */ html[data-theme="dark"] .guest-grade-chip { background: #171b3a; border-color: #2a3060; color: #c7cbe6; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); } html[data-theme="dark"] .guest-grade-chip:hover { border-color: #a78bfa; color: #a78bfa; } html[data-theme="dark"] .guest-grade-chip.active { background: linear-gradient(135deg, #4361ee 0%, #7b2ff7 100%); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(67, 97, 238, .35); } html[data-theme="dark"] .guest-grade-chip-count { background: rgba(255, 255, 255, .1); color: #a78bfa; } html[data-theme="dark"] .guest-grade-chip.active .guest-grade-chip-count { background: rgba(255, 255, 255, .25); color: #fff; } html[data-theme="dark"] .guest-grade-heading { background: linear-gradient(135deg, #171b3a 0%, #1d2252 100%); border-color: #2a3060; } html[data-theme="dark"] .guest-grade-heading-icon { color: #a78bfa; } html[data-theme="dark"] .guest-grade-heading h2 { color: #fff; } html[data-theme="dark"] .guest-grade-heading-count { color: #a78bfa; background: rgba(255, 255, 255, .07); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); } /* --- Course detail page --- */ html[data-theme="dark"] .stats-card { background: #171b3a; border: 1px solid #2a3060; } html[data-theme="dark"] .stats-card h3 { color: #fff; } html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stat-card:nth-child(2), html[data-theme="dark"] .stat-card:nth-child(3), html[data-theme="dark"] .stat-card:nth-child(4) { background: rgba(255, 255, 255, .05) !important; border-color: #2a3060 !important; } html[data-theme="dark"] .stat-card .stat-number { color: #fff; } html[data-theme="dark"] .stat-card:nth-child(2) .stat-number { color: #93c5fd; } html[data-theme="dark"] .stat-card:nth-child(3) .stat-number { color: #86efac; } html[data-theme="dark"] .stat-card:nth-child(4) .stat-number { color: #fdba74; } html[data-theme="dark"] .stat-card .stat-label { color: #aab0d4; } html[data-theme="dark"] .stat-card .stat-label::before { background: rgba(255, 255, 255, .2); } html[data-theme="dark"] .description-card { background: #171b3a; border: 1px solid #2a3060; color: #e7e9f5; } html[data-theme="dark"] .description-card h3 { color: #fff; } html[data-theme="dark"] .description-card .course-description-full { color: #c7cbe6; } html[data-theme="dark"] .lecture-item { background: #171b3a; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } html[data-theme="dark"] .lecture-item:hover { box-shadow: 0 18px 40px rgba(102, 126, 234, .18); } html[data-theme="dark"] .lecture-item .lecture-title { color: #fff; } html[data-theme="dark"] .lecture-item .lecture-meta { color: #aab0d4; } html[data-theme="dark"] .lecture-content { background: linear-gradient(to bottom, #191d3e, #141838); } html[data-theme="dark"] .item-card { background: #191d3e; color: #e7e9f5; } html[data-theme="dark"] .item-card a, html[data-theme="dark"] .item-card span, html[data-theme="dark"] .item-card .item-info { color: #e7e9f5; } html[data-theme="dark"] .no-folder-section { background: #171b3a; border-color: #2a3060; } html[data-theme="dark"] .no-folder-title, html[data-theme="dark"] .empty-state { color: #aab0d4; } /* --- Modals / forms / alerts --- */ html[data-theme="dark"] .modal-content { background: #171b3a; color: #e7e9f5; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: #2a3060; } html[data-theme="dark"] .modal-title { color: #fff; } html[data-theme="dark"] .modal-header .btn-close { filter: invert(1); } html[data-theme="dark"] .form-label { color: #c7cbe6; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .input-group-text { background: #10132a; border-color: #2a3060; color: #e7e9f5; } html[data-theme="dark"] .form-control:focus { background: #10132a; color: #fff; } html[data-theme="dark"] .upload-area { border-color: #2a3060; background: #10132a; color: #e7e9f5; } html[data-theme="dark"] .upload-area:hover { border-color: #60a5fa; background: #1a1e3a; } html[data-theme="dark"] .upload-area.dragover { border-color: #34d399; background: #12251f; } html[data-theme="dark"] .form-check-input { background-color: #10132a; border-color: #3b4280; --bs-form-check-bg: #10132a; } html[data-theme="dark"] .form-check-input:checked { background-color: #60a5fa; border-color: #60a5fa; } html[data-theme="dark"] .form-check-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] .swal2-input::placeholder, html[data-theme="dark"] .swal2-textarea::placeholder, html[data-theme="dark"] .select2-search__field::placeholder { color: #8b90b8; opacity: 1; } html[data-theme="dark"] .form-control::-webkit-input-placeholder, html[data-theme="dark"] input::-webkit-input-placeholder, html[data-theme="dark"] textarea::-webkit-input-placeholder { color: #8b90b8; opacity: 1; } html[data-theme="dark"] .form-control::-moz-placeholder, html[data-theme="dark"] input::-moz-placeholder, html[data-theme="dark"] textarea::-moz-placeholder { color: #8b90b8; opacity: 1; } html[data-theme="dark"] .form-control:-ms-input-placeholder, html[data-theme="dark"] input:-ms-input-placeholder, html[data-theme="dark"] textarea:-ms-input-placeholder { color: #8b90b8; opacity: 1; } html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-warning { background: #1a1f3f; border-color: #2a3060; color: #e7e9f5; } html[data-theme="dark"] .alert-primary, html[data-theme="dark"] .current-balance.alert-primary { background: #1a1f3f; border-color: #2a3060; color: #e7e9f5; } html[data-theme="dark"] .alert-primary strong, html[data-theme="dark"] .current-balance.alert-primary strong { color: #fff; } html[data-theme="dark"] #notificationsDropdown { color: #aab0d4; } html[data-theme="dark"] #notificationsDropdown:hover { color: #fff; background: rgba(167, 139, 250, 0.16); } html[data-theme="dark"] #notificationsDropdown .material-symbols-outlined { color: #aab0d4; } html[data-theme="dark"] .text-muted { color: #8b90b8 !important; } /* --- Navbar theme toggle button --- */ .theme-toggle{ display:inline-flex;align-items:center;gap:.4rem; border:1px solid #e2e8f0;background:#fff;color:#334155; border-radius:100rem;padding:.45rem .85rem; font-family:'Cairo','Tajawal','Almarai',sans-serif;font-weight:700;font-size:.82rem;line-height:1; cursor:pointer;white-space:nowrap;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.05); } .theme-toggle:hover{border-color:#a379ff;color:#6d28d9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(99,72,254,.18)} .theme-toggle .material-symbols-outlined{font-size:1.15rem;line-height:1} html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.06);border-color:rgba(167,139,250,.45);color:#e9e7ff} html[data-theme="dark"] .theme-toggle:hover{background:rgba(167,139,250,.16);border-color:#d8b4fe;color:#fff} @media (max-width:575.98px){.theme-toggle-text{display:none}.theme-toggle{padding:.4rem .6rem}} @media (max-width:380px){.theme-toggle{width:34px;height:34px;padding:0;justify-content:center}.theme-toggle-text{display:none}} /* --- Student dashboard / transactions --- */ html[data-theme="dark"] .dashboard-card{background:#171b3a;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .dashboard-card .card-title, html[data-theme="dark"] .dashboard-card .card-text{color:#fff} html[data-theme="dark"] .dashboard-card .btn-primary-mine, html[data-theme="dark"] .dashboard-card .btn-warning-mine, html[data-theme="dark"] .dashboard-card .btn-info-mine{color:#fff} html[data-theme="dark"] .user-avatar, html[data-theme="dark"] .user-avatar-large{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff} html[data-theme="dark"] .student-type-badge{color:#fff!important;border-color:rgba(255,255,255,.55)!important} html[data-theme="dark"] .table, html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table tbody td{color:#e7e9f5;border-color:#2a3060;--bs-table-bg:transparent} html[data-theme="dark"] .table{background:#151836} html[data-theme="dark"] .table thead th{background:#1a1f44;color:#fff} html[data-theme="dark"] .table tbody tr{background:transparent} html[data-theme="dark"] .table-hover tbody tr:hover{background:#1d2247;color:#fff} html[data-theme="dark"] .table-custom thead th{background:linear-gradient(135deg,#3a3f78 0%,#2c2458 100%)!important;color:#fff!important} html[data-theme="dark"] .table-custom tbody tr{background:transparent!important} /* --- Student report page --- */ html[data-theme="dark"] .student-header{background:linear-gradient(135deg,#131631,#1a1f44)!important} html[data-theme="dark"] .student-avatar{background:rgba(255,255,255,.12);color:#a78bfa} html[data-theme="dark"] .performance-indicator, html[data-theme="dark"] .summary-card{background:#171b3a;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .summary-card h6, html[data-theme="dark"] .summary-card h5{color:#fff} html[data-theme="dark"] .performance-circle{background:#1d2247!important;border-color:#3b4280!important} html[data-theme="dark"] .performance-score{color:#fff} /* --- Exam results page --- */ html[data-theme="dark"] .header{background:#171b3a;border:1px solid #2a3060} html[data-theme="dark"] .header .exam-atom ellipse{stroke:rgba(167,139,250,.45)} html[data-theme="dark"] .exam-details-card, html[data-theme="dark"] .question-container, html[data-theme="dark"] .no-attempts-container{background:#171b3a;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .exam-title h2, html[data-theme="dark"] .student_name h2, html[data-theme="dark"] .exam-details-card h3{color:#fff} html[data-theme="dark"] .explanation-box{background:#1a1f3f !important;border-color:#2a3060 !important;color:#c7cbe6 !important} html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .choices-list .list-group-item{background:#191d3e;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .timeline-content{background:#191d3e;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .chart-container, html[data-theme="dark"] .performance-summary{background:#171b3a;border-color:#2a3060} html[data-theme="dark"] .performance-item{background:#191d3e;border-color:#2a3060;color:#e7e9f5} /* --- Select2 dropdowns --- */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple { background-color: #171b3a !important; border-color: #3b4280 !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered { color: #e7e9f5 !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered { color: #e7e9f5; } html[data-theme="dark"] .select2-dropdown { background-color: #171b3a !important; border-color: #3b4280 !important; } html[data-theme="dark"] .select2-container--default .select2-results__option, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option { color: #c7cbe6; } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] { background-color: #3b4280 !important; color: #fff; } html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field { background-color: #10132a; border-color: #3b4280; color: #e7e9f5; } html[data-theme="dark"] .select2-container--default .select2-selection__choice { background-color: #232851; border-color: #3b4280; color: #e7e9f5; } html[data-theme="dark"] .select2-container--default .select2-selection__choice__remove { color: #fca5a5; } html[data-theme="dark"] .select2-container--default .select2-selection__choice__remove:hover { color: #fff; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b, html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b { border-color: #8b90b8 transparent transparent; } /* --- Course structure (create/edit course) --- */ html[data-theme="dark"] .course-structure { background-color: #171b3a !important; } html[data-theme="dark"] .course-structure .drop-zone, html[data-theme="dark"] .course-structure .list-group, html[data-theme="dark"] #course-structure .list-group, html[data-theme="dark"] #course-structure .list-group-item { background-color: #171b3a; border-color: #2a3060; color: #e7e9f5; } html[data-theme="dark"] #course-structure .list-group-item { background-color: #191d3e; } html[data-theme="dark"] #course-structure .list-group-item:hover { background-color: #232851; } html[data-theme="dark"] #course-structure .drop-zone { background-color: #10132a; border-color: #3b4280; } /* --- Selected items container (create/edit lecture) --- */ html[data-theme="dark"] #selected-items-container { background-color: #171b3a !important; border-color: #3b4280 !important; } html[data-theme="dark"] #selected-items-container .list-group-item, html[data-theme="dark"] #selected-items-container .item-badge { color: #e7e9f5; } /* --- Search containers --- */ html[data-theme="dark"] .search-container { background-color: #171b3a !important; border: 1px solid #2a3060 !important; } /* --- Reorder controls (view_exam_details) --- */ html[data-theme="dark"] #reorderControls { background-color: #171b3a !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme="dark"] .reorder-handle .bg-light { background-color: #191d3e !important; border-color: #2a3060 !important; } html[data-theme="dark"] .drag-handle { background-color: #232851 !important; border-color: #3b4280 !important; } /* --- text-dark (Bootstrap) legibility --- */ html[data-theme="dark"] .text-dark { --bs-text-opacity: 1; color: rgba(231, 233, 245, var(--bs-text-opacity)) !important; } /* --- select-all-container (video/exam statistics, exclusions) --- */ html[data-theme="dark"] .select-all-container { background-color: #171b3a !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme="dark"] .select-all-container .form-check-label, html[data-theme="dark"] .select-all-container label { color: #e7e9f5; } /* --- folder-picker-trigger (manage videos/lectures/folders/documents) --- */ html[data-theme="dark"] .folder-picker-trigger { background-color: #171b3a !important; border-color: #3b4280 !important; color: #e7e9f5 !important; } html[data-theme="dark"] .folder-picker-trigger:hover { background-color: #1a1f44 !important; border-color: #60a5fa !important; color: #fff !important; } html[data-theme="dark"] .folder-picker-trigger .selected-name { color: #aab0d4 !important; } /* --- Take exam page --- */ html[data-theme="dark"] .question-card{background:#171b3a;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .question-card .question-text{color:#fff} html[data-theme="dark"] .choice-button{background:#191d3e;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .choice-button:hover{background:#232851;border-color:#a78bfa} html[data-theme="dark"] .answer-textarea{background:#10132a;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .answer-textarea:focus{background:#10132a;color:#fff} html[data-theme="dark"] .nav-square{background:#2a3060;border-color:#3b4280;color:#c7cbe6} html[data-theme="dark"] .nav-square.answered{background:#16a34a!important;color:#fff!important} html[data-theme="dark"] .nav-square.for-review{background:#b45309!important;color:#fff!important} html[data-theme="dark"] .nav-square.selected{background:#7c3aed!important;border-color:#a78bfa;color:#fff!important} html[data-theme="dark"] .form-check-label{color:#c7cbe6} html[data-theme="dark"] .multi-choice-notice{color:#aab0d4} /* --- Watch video page --- */ html[data-theme="dark"] .video-info{background:linear-gradient(135deg,#171b3a,#141838);border-color:#2a3060} html[data-theme="dark"] .video-info h1, html[data-theme="dark"] .video-info h5, html[data-theme="dark"] .video-info h2{color:#fff} html[data-theme="dark"] .requirements-container{background:#171b3a;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .quality-option{background:#191d3e;border-color:#2a3060;color:#e7e9f5} html[data-theme="dark"] .quality-option:hover{background:#232851;border-color:#a78bfa} html[data-theme="dark"] .player-selection-bar .card, html[data-theme="dark"] .video-stats-sidebar .card{background:#171b3a;border-color:#2a3060} html[data-theme="dark"] .video-stats-sidebar .card .card-header{background:#1a1f44;color:#fff} html[data-theme="dark"] .seek-controls-overlay{background:rgba(13,16,38,.92)} html[data-theme="dark"] .quality-preview-container{background:#171b3a;border-color:#2a3060;color:#e7e9f5} /* --- Misc fixes --- */ html[data-theme="dark"] .course-image.bg-light{background:#171b3a!important;border:1px solid #2a3060} html[data-theme="dark"] .course-image.bg-light .material-symbols-outlined{color:#a78bfa!important} /* --- Site countdown timer bar --- */ html[data-theme="dark"] .site-timer-bar{background:linear-gradient(135deg,#0f172a 0%,#1e293b 55%,#0f3460 100%);color:#FFD700;border-bottom-color:rgba(255,215,0,.3)} html[data-theme="dark"] .site-timer-bar .timer-text{color:#FFD700} html[data-theme="dark"] .site-timer-bar .timer-icon{stroke:#FFD700} html[data-theme="dark"] .site-timer-bar .timer-display{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,215,0,.4)} /* --- Student dashboard modern cards --- */ html[data-theme="dark"] .dashboard-card-modern{background:#171b3a;border-color:#2a3060} html[data-theme="dark"] .dashboard-card-modern:hover{box-shadow:0 18px 40px rgba(102,126,234,.18)} html[data-theme="dark"] .dashboard-card-modern .card-title-modern{color:#fff} html[data-theme="dark"] .dashboard-card-modern .card-description{color:#aab0d4} html[data-theme="dark"] .dashboard-card-modern .card-cta{color:#a78bfa} html[data-theme="dark"] .dashboard-card-modern .card-icon-wrapper{filter:brightness(1.2)} html[data-theme="dark"] .stat-card.kpi-indigo, html[data-theme="dark"] .stat-card.kpi-purple, html[data-theme="dark"] .stat-card.kpi-orange, html[data-theme="dark"] .stat-card.kpi-green, html[data-theme="dark"] .stat-card.kpi-red{background:#171b3a;border-color:#2a3060;color:#e7e9f5} /* --- Lecture / folder headers --- */ html[data-theme="dark"] .lecture-header{background:linear-gradient(135deg,#1a1f44,#161a38);border-color:#2a3060} html[data-theme="dark"] .lecture-header .lecture-title{color:#fff} html[data-theme="dark"] .lecture-header .lecture-meta, html[data-theme="dark"] .lecture-header .expand-icon, html[data-theme="dark"] .lecture-number{color:#aab0d4} html[data-theme="dark"] .folder-header{background:linear-gradient(135deg,#1a1f44,#161a38)!important;border-color:#2a3060!important} html[data-theme="dark"] .folder-content{background:#171b3a!important;border:1px solid #2a3060;color:#e7e9f5} html[data-theme="dark"] .folder-content .lecture-item, html[data-theme="dark"] .folder-content .folder-item{color:#e7e9f5} html[data-theme="dark"] .folder-header h4, html[data-theme="dark"] .folder-header h5, html[data-theme="dark"] .folder-lecture-count{color:#fff} html[data-theme="dark"] .folder-icon{color:#a78bfa} html[data-theme="dark"] .folder-structure{background:#171b3a!important;border-color:#2a3060!important;color:#e7e9f5} html[data-theme="dark"] .folder-structure:hover{border-color:#ffc107!important} /* --- bg-light utility boxes (student pages) --- */ html[data-theme="dark"] .student-page .bg-light{background:#1a1f3f!important;border-color:#2a3060!important;color:#e7e9f5} html[data-theme="dark"] .student-page .bg-light small, html[data-theme="dark"] .student-page .bg-light .text-muted{color:#aab0d4!important} /* --- bg-light utility boxes (teacher/admin pages: folder headers, selected-item boxes, badges, course-structure, etc.) --- */ html[data-theme="dark"] .bg-light { background-color:#1a1f3f!important;border-color:#2a3060!important;color:#e7e9f5} html[data-theme="dark"] .bg-light small, html[data-theme="dark"] .bg-light .text-muted{color:#aab0d4!important} /* --- Take exam: legend + active choice --- */ html[data-theme="dark"] .legend-item{color:#c7cbe6} html[data-theme="dark"] .unanswered-color{background:#2a3060;border-color:#3b4280;color:#c7cbe6!important} html[data-theme="dark"] .review-color{background:#b45309;color:#fff!important} html[data-theme="dark"] .answered-color{background:#16a34a} html[data-theme="dark"] .selected-color{background:#7c3aed!important;border-color:#a78bfa} html[data-theme="dark"] .choice-button.active{background:#232851!important;color:#e7e9f5!important;border-color:#a78bfa!important} html[data-theme="dark"] .choice-button.active.rtl::after, html[data-theme="dark"] .choice-button.active.ltr::after{color:#a78bfa} html[data-theme="dark"] .list-group-item.active{background:#2a3060;border-color:#3b4280;color:#fff} /* --- Enhanced course content section (view_course) --- */ html[data-theme="dark"] .content-section-head{background:linear-gradient(135deg,#171b3a 0%,#191d3e 55%,#1d1840 100%);border-color:#2a3060} html[data-theme="dark"] .content-section-title{color:#fff} html[data-theme="dark"] .content-section-sub{color:#aab0d4} html[data-theme="dark"] .count-badge-primary{background:#232851;color:#a78bfa;border-color:#3b4280} html[data-theme="dark"] .count-badge-warning{background:#33250c;color:#fbbf24;border-color:#573d14} html[data-theme="dark"] .lecture-desc{background:#191d3e;border-color:#2a3060;color:#c7cbe6} html[data-theme="dark"] .lecture-desc .material-symbols-outlined{color:#a78bfa} html[data-theme="dark"] .meta-pill{background:#232851;color:#c7cbe6;border-color:#3b4280} html[data-theme="dark"] .meta-pill-free{background:#10281a;color:#4ade80;border-color:#14532d} html[data-theme="dark"] .meta-pill-single{background:#232851;color:#a78bfa;border-color:#3b4280} html[data-theme="dark"] .meta-pill-purchased{background:#10281a;color:#4ade80;border-color:#14532d} html[data-theme="dark"] .meta-pill-expired{background:#331115;color:#f87171;border-color:#5b1a21} html[data-theme="dark"] .meta-pill-access{background:#0c2b3a;color:#38bdf8;border-color:#155e75} html[data-theme="dark"] .meta-pill-locked{background:#262b52;color:#9ca3af;border-color:#343a66} html[data-theme="dark"] .count-badge-purchased{background:#10281a;color:#4ade80;border-color:#14532d} html[data-theme="dark"] .count-badge-info{background:#0c2b3a;color:#38bdf8;border-color:#155e75} html[data-theme="dark"] .status-current{background:#232851;color:#a78bfa} html[data-theme="dark"] .status-done{background:#10281a;color:#4ade80} html[data-theme="dark"] .item-card{background:#171b3a;border-color:#2a3060} html[data-theme="dark"] .item-card:hover{background:#1a1f44} html[data-theme="dark"] .item-title{color:#e7e9f5} html[data-theme="dark"] .item-locked-icon{background:#2a3060;color:#aab0d4} html[data-theme="dark"] .duration-pill{background:#232851;color:#aab0d4} html[data-theme="dark"] .status-locked{background:#33250c;color:#fbbf24} html[data-theme="dark"] .item-arrow{background:#232851;color:#a78bfa} html[data-theme="dark"] .item-arrow-locked{background:#262b52;color:#8f96bf} html[data-theme="dark"] .item-card.locked{background:#151836;border-color:#242a55} html[data-theme="dark"] .item-card.locked .item-title{color:#aab0d4} html[data-theme="dark"] .content-empty-state{background:#151836;border-color:#2a3060;color:#aab0d4} html[data-theme="dark"] .content-empty-state strong{color:#c7cbe6} html[data-theme="dark"] .content-empty-state .material-symbols-outlined{color:#4c5384} html[data-theme="dark"] .no-folder-section{background:#151836;border-color:#2a3060} html[data-theme="dark"] .no-folder-title{color:#c7cbe6} html[data-theme="dark"] .no-folder-title-icon{background:#232851;color:#a78bfa} /* --- Student report page (filter / stats / tables) --- */ html[data-theme="dark"] .filter-section { background: #171b3a !important; border: 1px solid #2a3060; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); } html[data-theme="dark"] .filter-section label { color: #a78bfa; } html[data-theme="dark"] .form-select { background-color: #10132a; color: #fff; border-color: #2a3060; } html[data-theme="dark"] .stat-item { background: #171b3a; border: 1px solid #2a3060; border-radius: 14px; padding: 1rem 1.2rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); } html[data-theme="dark"] .stat-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } html[data-theme="dark"] .stat-item:last-child { border-bottom: 1px solid #2a3060; } html[data-theme="dark"] .stat-label { color: #c7cbe6; } html[data-theme="dark"] .stat-value { color: #a78bfa; } html[data-theme="dark"] .table-custom thead { background: linear-gradient(135deg, #3a3f78 0%, #2c2458 100%) !important; color: #fff; } html[data-theme="dark"] .table-custom tbody tr:hover { background: rgba(102, 126, 234, .12) !important; color: #fff; } /* ========================================== Dark mode for teacher / admin pages ========================================== */ /* --- Sidebar --- */ html[data-theme="dark"] .sidebar{ background: linear-gradient(180deg, #131631 0%, #171b3a 100%) !important; border-left-color: #2a3060 !important; scrollbar-color: #3b4280 transparent; } html[data-theme="dark"] .sidebar::-webkit-scrollbar-track{background:#131631} html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb{background:#3b4280} html[data-theme="dark"] .sidebar-header{ background: linear-gradient(135deg, #3a3f78 0%, #2c2458 100%); } html[data-theme="dark"] .sidebar-item{ color: #c7cbe6; } html[data-theme="dark"] .sidebar-item:hover{ background: linear-gradient(135deg, #232851 0%, #1d2247 100%) !important; color: #fff; } html[data-theme="dark"] .sidebar-item.active{ background: linear-gradient(135deg, #3a3f78 0%, #2c2458 100%) !important; color: #fff; } html[data-theme="dark"] .sidebar-item.active .sidebar-text{ color: #fff; } /* --- Main content --- */ html[data-theme="dark"] .main-content{ background: transparent; } /* --- Teacher dashboard header + stat cards --- */ html[data-theme="dark"] .dashboard-header{ background: linear-gradient(135deg, #232851 0%, #1a1f44 100%) !important; box-shadow: 0 4px 12px rgba(0,0,0,.35); } html[data-theme="dark"] .dashboard-header h1, html[data-theme="dark"] .dashboard-header .h3, html[data-theme="dark"] .dashboard-header .card-title{ color: #fff; } html[data-theme="dark"] .stat-card{ background: #171b3a !important; border-color: #2a3060 !important; box-shadow: 0 8px 25px rgba(0,0,0,.35); } html[data-theme="dark"] .stat-card .stat-value{ color: #fff; } html[data-theme="dark"] .stat-card .stat-label{ color: #aab0d4; } html[data-theme="dark"] .stat-icon{ filter: brightness(1.25); } /* --- Headings / body text --- */ html[data-theme="dark"] .main-content h1, html[data-theme="dark"] .main-content h2, html[data-theme="dark"] .main-content h3, html[data-theme="dark"] .main-content h4, html[data-theme="dark"] .main-content h5, html[data-theme="dark"] .card-title{ color: #fff; } html[data-theme="dark"] .main-content p, html[data-theme="dark"] .main-content li{ color: #c7cbe6; } /* --- Dropdown / pagination --- */ html[data-theme="dark"] .dropdown-menu{ background: #1a1f3f; border-color: #2a3060; } html[data-theme="dark"] .dropdown-item{ color: #c7cbe6; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus{ background: #232851; color: #fff; } html[data-theme="dark"] .page-link{ background: #171b3a; border-color: #2a3060; color: #a78bfa; } html[data-theme="dark"] .page-item.active .page-link{ background: #2c2458; border-color: #3b4280; } /* --- Outline buttons --- */ html[data-theme="dark"] .btn-outline-primary{ color: #a78bfa; border-color: #3b4280; } html[data-theme="dark"] .btn-outline-primary:hover{ background: #2c2458; color: #fff; border-color: #a78bfa; } html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark{ color: #c7cbe6; border-color: #3b4280; } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-dark:hover{ background: #232851; color: #fff; } /* --- Breadcrumb / misc text --- */ html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item.active{ color: #aab0d4; } html[data-theme="dark"] .breadcrumb-item a{ color: #a78bfa; } /* ========================================== Teacher page components (dark mode fixes) ========================================== */ /* --- Grade & folder pickers (grade_helpers.php) --- */ html[data-theme="dark"] .grade-picker-wrap, html[data-theme="dark"] .folder-picker { background: #171b3a !important; border-color: #2a3060 !important; } html[data-theme="dark"] .grade-picker-wrap:focus-within, html[data-theme="dark"] .folder-picker:focus-within { border-color: #a78bfa !important; } html[data-theme="dark"] .grade-picker-label { color: #fff; } html[data-theme="dark"] .grade-picker-count, html[data-theme="dark"] .fp-count, html[data-theme="dark"] .fp-sub { color: #c7cbe6 !important; background: #232851 !important; border-color: #3b4280 !important; } html[data-theme="dark"] .grade-chip, html[data-theme="dark"] .fp-option, html[data-theme="dark"] .fp-toggle { background: #191d3e !important; border-color: #3b4280 !important; color: #e7e9f5 !important; } html[data-theme="dark"] .grade-chip:hover, html[data-theme="dark"] .fp-option:hover, html[data-theme="dark"] .fp-toggle:hover { background: #232851 !important; border-color: #a78bfa !important; color: #fff !important; } html[data-theme="dark"] .grade-chip-box, html[data-theme="dark"] .fp-dot { background: #10132a !important; border-color: #3b4280 !important; } html[data-theme="dark"] .grade-chip:has(input:checked) { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; } html[data-theme="dark"] .grade-chip:has(input:checked) .grade-chip-box { background: #fff !important; border-color: #fff !important; } html[data-theme="dark"] .fp-option.selected { background: #232851 !important; border-color: #a78bfa !important; } html[data-theme="dark"] .fp-option.selected .fp-dot { background: #a78bfa !important; border-color: #a78bfa !important; } html[data-theme="dark"] .fp-children { border-inline-start-color: #3b4280 !important; } html[data-theme="dark"] .fp-empty { background: #1a1f3f !important; border-color: #573d14 !important; color: #fbbf24 !important; } /* --- Teacher dashboard cards --- */ html[data-theme="dark"] .dashboard-card-new { background: #171b3a; border-color: #2a3060; box-shadow: 0 8px 25px rgba(0, 0, 0, .35); } html[data-theme="dark"] .dashboard-card-new:hover { box-shadow: 0 18px 40px rgba(102, 126, 234, .18); } html[data-theme="dark"] .dashboard-card-new .card-title { color: #fff; } html[data-theme="dark"] .dashboard-card-new .card-description { color: #aab0d4; } /* --- Settings sections (create / edit pages) --- */ html[data-theme="dark"] .settings-section { background: #171b3a !important; border-color: #2a3060 !important; box-shadow: none; } html[data-theme="dark"] .settings-section .settings-title { color: #fff; border-bottom-color: #3b4280; } html[data-theme="dark"] .settings-section h4, html[data-theme="dark"] .settings-section h5, html[data-theme="dark"] .settings-section h6 { color: #fff; } /* --- Video stats container (manage_videos) --- */ html[data-theme="dark"] .video-stats-container { background-color: #171b3a !important; border-color: #2a3060 !important; } /* --- Note boxes (coupon pages) --- */ html[data-theme="dark"] .note-box { background: #1a1f3f !important; border-left-color: #38bdf8 !important; color: #c7cbe6; } html[data-theme="dark"] .note-box h6 { color: #7dd3fc !important; } /* --- Filter cards (statistics pages) --- */ html[data-theme="dark"] .filter-card { background: #171b3a !important; border-color: #2a3060 !important; } /* --- Bulk actions toolbar (manage / stats pages) --- */ html[data-theme="dark"] .bulk-actions { background-color: #171b3a !important; border-color: #2a3060 !important; box-shadow: 0 4px 6px rgba(0, 0, 0, .35); } html[data-theme="dark"] .bulk-actions label { color: #c7cbe6; } html[data-theme="dark"] .bulk-actions select, html[data-theme="dark"] .bulk-actions .form-select { color: #fff; } /* --- Form containers (create / edit pages) --- */ html[data-theme="dark"] .form-container { background-color: #171b3a !important; border-color: #2a3060 !important; box-shadow: 0 4px 6px rgba(0, 0, 0, .35); } /* --- Orphaned items section (statistics / create pages) --- */ html[data-theme="dark"] .orphaned-items-section { background-color: #171b3a !important; border-color: #3b4280 !important; color: #e7e9f5; } html[data-theme="dark"] .orphaned-items-section .text-muted { color: #8b90b8 !important; } /* --- Format example box (bulk question add pages) --- */ html[data-theme="dark"] .format-example { background-color: #1a1f3f !important; color: #e7e9f5; } html[data-theme="dark"] .format-example pre { color: #c7cbe6; } html[data-theme="dark"] .format-example .symbol { color: #93c5fd; } /* --- Section selector (add questions from sections) --- */ html[data-theme="dark"] .section-selector { background: #171b3a !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme="dark"] .section-selector h5, html[data-theme="dark"] .section-selector h4 { color: #fff; } /* ========================================== SweetAlert2 (swal2-container / popup) ========================================== */ html[data-theme="dark"] .swal2-container { background-color: rgba(8, 10, 26, .62) !important; } html[data-theme="dark"] .swal2-popup { background: #171b3a; border: 1px solid #2a3060; color: #e7e9f5; } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-title * { color: #fff; } html[data-theme="dark"] .swal2-html-container, html[data-theme="dark"] .swal2-content, html[data-theme="dark"] .swal2-html-container p { color: #c7cbe6; } html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-file, html[data-theme="dark"] .swal2-textarea, html[data-theme="dark"] .swal2-select { background: #10132a; border-color: #2a3060; color: #e7e9f5; } html[data-theme="dark"] .swal2-input:focus, html[data-theme="dark"] .swal2-textarea:focus { border-color: #a78bfa; } html[data-theme="dark"] .swal2-validation-message { background: #331115; color: #fca5a5; } html[data-theme="dark"] .swal2-validation-message::before { background: #f87171; color: #fff; } html[data-theme="dark"] .swal2-footer { border-top-color: #2a3060; color: #aab0d4; } html[data-theme="dark"] .swal2-close { color: #8b90b8; } html[data-theme="dark"] .swal2-close:hover { color: #fff; } html[data-theme="dark"] .swal2-loader { border-color: #a78bfa transparent; } html[data-theme="dark"] .swal2-progress-steps .swal2-active { color: #a78bfa; } html[data-theme="dark"] .swal2-success-ring { border-color: #34d399; } html[data-theme="dark"] .swal2-success-line-tip, html[data-theme="dark"] .swal2-success-line-long { background-color: #34d399; } html[data-theme="dark"] .swal2-error { border-color: #f87171; } html[data-theme="dark"] .swal2-x-mark-line-left, html[data-theme="dark"] .swal2-x-mark-line-right { background-color: #f87171; } /* --- Bulk actions toolbar (course_statistics) --- */ html[data-theme="dark"] #bulkActionsToolbar, html[data-theme="dark"] .d-flex.align-items-center.gap-2.mb-3.p-2.bg-light.rounded.border { background-color: #1a1f3f !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme="dark"] #bulkActionsToolbar .text-primary { color: #a78bfa !important; } /* --- PDF options (upload_students) --- */ html[data-theme="dark"] .pdf-options { background: #171b3a; border: 1px solid #2a3060; color: #e7e9f5; } html[data-theme="dark"] .pdf-option-label { color: #fff; } html[data-theme="dark"] .pdf-type-description { color: #8b90b8; } html[data-theme="dark"] .custom-dimensions { background: #10132a; border: 1px solid #2a3060; } html[data-theme="dark"] .dimension-label { color: #c7cbe6; } html[data-theme="dark"] .units { color: #8b90b8; } /* ========================================== Theme reveal: make surfaces transparent during the circle animation (toggled via by js/theme_reveal.js) Placed last so it wins over earlier !important surface rules. ========================================== */ html[data-theme-revealing], html[data-theme-revealing] body { background: transparent !important; } html[data-theme-revealing] .navbar, html[data-theme-revealing] .student-nav, html[data-theme-revealing] .navbar-collapse, html[data-theme-revealing] .card, html[data-theme-revealing] .card-header, html[data-theme-revealing] .card-footer, html[data-theme-revealing] .table, html[data-theme-revealing] .table thead th, html[data-theme-revealing] .table th, html[data-theme-revealing] .table td, html[data-theme-revealing] .modal-content, html[data-theme-revealing] .form-control, html[data-theme-revealing] .form-select, html[data-theme-revealing] .input-group-text, html[data-theme-revealing] .list-group-item, html[data-theme-revealing] .main-content, html[data-theme-revealing] .container, html[data-theme-revealing] .sidebar, html[data-theme-revealing] .dropdown-menu, html[data-theme-revealing] .alert, html[data-theme-revealing] thead, html[data-theme-revealing] tbody, html[data-theme-revealing] .stat-card, html[data-theme-revealing] .grade-picker-wrap, html[data-theme-revealing] .dashboard-card-new { background: transparent !important; } /* .no-exams empty state uses a white background - fix for dark mode */ html[data-theme="dark"] .no-exams { background-color: #171b3a !important; color: #e7e9f5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .no-exams-icon { color: #a78bfa; } /* stat-card + grade-picker-wrap white backgrounds - fix for dark mode */ html[data-theme="dark"] .stat-card { background: #171b3a !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme="dark"] .stat-card .stat-number, html[data-theme="dark"] .stat-card .stat-label { color: #e7e9f5; } html[data-theme="dark"] .grade-picker-wrap { background: #171b3a !important; border-color: #2a3060 !important; color: #e7e9f5; } html[data-theme-revealing] .card-header { background: transparent !important; border-color: transparent !important; }