/* ============================================================ dark.css — Global dark mode Class toggled on element. Surface scale (dark) — editorial navy, matches instructor shell: Page bg #0e1d3d deepest — body/main wrapper (ed-ink) Card #15264a cards, nav, dropdowns Elevated #1c3358 inputs, table headers, sticky rows Border rgba(255,255,255,0.08) ============================================================ */ /* ── Body / page shell ───────────────────────────────────── */ .dark body { background-color: #0e1d3d; color: #e8eaf0; } .dark main { background-color: #0e1d3d; } /* ── Nav ─────────────────────────────────────────────────── */ .dark nav { background-color: #15264a !important; border-bottom-color: rgba(255,255,255,0.08) !important; } .dark nav .text-indigo-600 { color: #a78bfa !important; } .dark nav .text-gray-500, .dark nav .text-gray-700 { color: #9ca3af !important; } .dark nav .text-gray-700:hover { color: #f0f0f8 !important; } /* ── Settings dropdown ───────────────────────────────────── */ .dark #settingsDropdown { background-color: #15264a !important; border-color: rgba(255,255,255,0.08) !important; } .dark #settingsDropdown .text-gray-700 { color: #d1d5db !important; } .dark #settingsDropdown .text-gray-400 { color: #6b7280 !important; } .dark #settingsDropdown .border-gray-100 { border-color: rgba(255,255,255,0.06) !important; } .dark #settingsDropdown a:not(.text-red-600):hover { background-color: rgba(255,255,255,0.06) !important; color: #f0f0f8 !important; } .dark #settingsDropdown a.text-red-600:hover { background-color: rgba(240,58,58,0.12) !important; } /* ── Borders ─────────────────────────────────────────────── */ .dark .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; } .dark .border-gray-100 { border-color: rgba(255,255,255,0.05) !important; } .dark .border-gray-300 { border-color: rgba(255,255,255,0.12) !important; } /* ── Modals ──────────────────────────────────────────────── */ .dark .bg-white.rounded-2xl, .dark .bg-white.rounded-lg.shadow, .dark .bg-white.rounded-xl { background-color: #15264a !important; border-color: rgba(255,255,255,0.08) !important; } /* ── Text ────────────────────────────────────────────────── */ .dark .text-gray-900 { color: #e8eaf0 !important; } .dark .text-gray-800 { color: #d1d5db !important; } .dark .text-gray-700 { color: #c4c9d9 !important; } .dark .text-gray-600 { color: #9ca3af !important; } .dark .text-gray-500 { color: #6b7280 !important; } .dark .text-gray-400 { color: #4b5563 !important; } .dark .text-gray-300 { color: #374151 !important; } /* ── Backgrounds ─────────────────────────────────────────── */ .dark .bg-white { background-color: #15264a !important; } .dark .bg-gray-50 { background-color: #0e1d3d !important; } .dark .bg-gray-100 { background-color: #1c3358 !important; } /* ── Inputs / selects / textareas ────────────────────────── */ .dark input, .dark select, .dark textarea { background-color: #1c3358 !important; border-color: rgba(255,255,255,0.12) !important; color: #e8eaf0 !important; } /* opacity reset: editorial pages dim their placeholders to .42, which would compound with this colour and sink it back under AA. */ .dark input::placeholder, .dark textarea::placeholder { color: var(--ed-placeholder-dark) !important; opacity: 1 !important; } .dark input:focus, .dark select:focus, .dark textarea:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.25) !important; outline: none !important; } .dark .bg-gray-50.border.border-gray-300 { background-color: #1c3358 !important; } /* ── Checkbox day-picker labels ──────────────────────────── */ /* default state */ .dark label:has(input[type="checkbox"]) { border-color: rgba(255,255,255,0.1) !important; color: #c4c9d9 !important; } /* hover state — subtle indigo tint instead of near-white */ .dark label:has(input[type="checkbox"]):hover { background-color: rgba(99,102,241,0.12) !important; border-color: rgba(99,102,241,0.4) !important; } /* checked / selected state */ .dark label:has(input[type="checkbox"]:checked) { background-color: rgba(99,102,241,0.18) !important; border-color: #6366f1 !important; color: #a5b4fc !important; } .dark label:has(input[type="checkbox"]:checked) span { color: #a5b4fc !important; } /* ── Tables ──────────────────────────────────────────────── */ .dark .divide-gray-200 > * { border-color: rgba(255,255,255,0.06) !important; } .dark .divide-gray-100 > * { border-color: rgba(255,255,255,0.04) !important; } .dark .bg-gray-50.sticky { background-color: #1c3358 !important; } .dark thead.bg-gray-50 { background-color: #1c3358 !important; } .dark tbody.bg-white { background-color: #15264a !important; } .dark tr.hover\:bg-gray-50:hover { background-color: rgba(255,255,255,0.04) !important; } /* ── Buttons — secondary / ghost ─────────────────────────── */ .dark .bg-gray-100.text-gray-700 { background-color: #1c3358 !important; color: #c4c9d9 !important; border-color: rgba(255,255,255,0.1) !important; } .dark .bg-gray-100.text-gray-700:hover { background-color: #1e3c6f !important; color: #e8eaf0 !important; } .dark .hover\:bg-gray-200:hover { background-color: #1e3c6f !important; } .dark .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.06) !important; } .dark .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,0.04) !important; } /* ── Tinted card headers ─────────────────────────────────── */ .dark .bg-linear-to-r.from-green-50 { background: linear-gradient(to right, rgba(16,185,129,0.12), rgba(52,211,153,0.06)) !important; } .dark .bg-linear-to-r.from-red-50 { background: linear-gradient(to right, rgba(239,68,68,0.12), rgba(244,114,182,0.06)) !important; } .dark .bg-linear-to-r.from-indigo-50 { background: linear-gradient(to right, rgba(99,102,241,0.12), rgba(59,130,246,0.06)) !important; } .dark .bg-linear-to-r.from-orange-50 { background: linear-gradient(to right, rgba(249,115,22,0.12), rgba(245,158,11,0.06)) !important; } .dark .bg-linear-to-r.from-teal-50 { background: linear-gradient(to right, rgba(20,184,166,0.12), rgba(6,182,212,0.06)) !important; } .dark .bg-linear-to-r.from-purple-50 { background: linear-gradient(to right, rgba(168,85,247,0.12), rgba(236,72,153,0.06)) !important; } /* ── Tinted row / item backgrounds ──────────────────────── */ .dark .bg-red-50 { background-color: rgba(239,68,68,0.1) !important; } .dark .bg-indigo-50 { background-color: rgba(99,102,241,0.1) !important; } .dark .bg-orange-50 { background-color: rgba(249,115,22,0.1) !important; } .dark .bg-green-50 { background-color: rgba(16,185,129,0.1) !important; } .dark .bg-yellow-50 { background-color: rgba(234,179,8,0.1) !important; } .dark .bg-purple-50 { background-color: rgba(168,85,247,0.1) !important; } .dark .bg-blue-50 { background-color: rgba(59,130,246,0.1) !important; } .dark .bg-teal-50 { background-color: rgba(20,184,166,0.1) !important; } /* ── Icon containers ─────────────────────────────────────── */ .dark .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; } .dark .bg-green-100 { background-color: rgba(16,185,129,0.15) !important; } .dark .bg-yellow-100 { background-color: rgba(234,179,8,0.15) !important; } .dark .bg-purple-100 { background-color: rgba(168,85,247,0.15) !important; } .dark .bg-red-100 { background-color: rgba(239,68,68,0.15) !important; } .dark .bg-indigo-100 { background-color: rgba(99,102,241,0.15) !important; } .dark .bg-orange-100 { background-color: rgba(249,115,22,0.15) !important; } .dark .bg-orange-200 { background-color: rgba(249,115,22,0.25) !important; } .dark .bg-red-200 { background-color: rgba(239,68,68,0.25) !important; } .dark .bg-indigo-200 { background-color: rgba(99,102,241,0.25) !important; } /* ── Badges / pills ──────────────────────────────────────── */ .dark .bg-green-100.text-green-800 { background-color: rgba(16,185,129,0.15) !important; color: #6ee7b7 !important; } .dark .bg-blue-100.text-blue-800 { background-color: rgba(59,130,246,0.15) !important; color: #93c5fd !important; } .dark .bg-purple-100.text-purple-800{ background-color: rgba(168,85,247,0.15) !important; color: #d8b4fe !important; } .dark .bg-yellow-100.text-yellow-800{ background-color: rgba(234,179,8,0.15) !important; color: #fde68a !important; } .dark .bg-red-100.text-red-800 { background-color: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; } .dark .bg-indigo-100.text-indigo-700{ background-color: rgba(99,102,241,0.15) !important; color: #a5b4fc !important; } .dark .bg-green-100.text-green-700 { background-color: rgba(16,185,129,0.15) !important; color: #6ee7b7 !important; } .dark .bg-red-100.text-red-700 { background-color: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; } .dark .bg-teal-50.text-teal-700 { background-color: rgba(20,184,166,0.15) !important; color: #5eead4 !important; } .dark .bg-indigo-50.text-indigo-700 { background-color: rgba(99,102,241,0.15) !important; color: #a5b4fc !important; } .dark .bg-purple-50.text-purple-700 { background-color: rgba(168,85,247,0.15) !important; color: #d8b4fe !important; } /* ── Active filter pills (indigo/purple/blue) ─────────────── */ .dark .bg-indigo-100.text-indigo-700 { background-color: rgba(99,102,241,0.18) !important; color: #a5b4fc !important; } .dark .bg-purple-100.text-purple-700 { background-color: rgba(168,85,247,0.18) !important; color: #d8b4fe !important; } .dark .bg-blue-100.text-blue-700 { background-color: rgba(59,130,246,0.18) !important; color: #93c5fd !important; } /* ── Warning / info banners ──────────────────────────────── */ .dark .bg-yellow-50.border-yellow-200 { background-color: rgba(234,179,8,0.08) !important; border-color: rgba(234,179,8,0.25) !important; } .dark .text-yellow-800 { color: #fde68a !important; } .dark .text-yellow-600 { color: #fcd34d !important; } /* ── Danger zone ─────────────────────────────────────────── */ .dark .border-red-200 { border-color: rgba(239,68,68,0.25) !important; } .dark .text-red-900 { color: #fca5a5 !important; } /* ── Hover overrides for indigo-labeled links ─────────────── */ .dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,0.12) !important; } .dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.12) !important; } .dark .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,0.2) !important; } .dark .hover\:bg-red-100:hover { background-color: rgba(239,68,68,0.2) !important; } /* ── History page ────────────────────────────────────────── */ .dark .btn-back { color: #9ca3af; border-color: rgba(255,255,255,0.1); background-color: transparent; } .dark .btn-back:hover { background-color: rgba(255,255,255,0.06); color: #d1d5db; } .dark .pill { background-color: #1c3358; border-color: rgba(255,255,255,0.08); color: #9ca3af; } .dark .pill .num { color: #e8eaf0; } .dark .month-label span:first-child { color: #4b5563; } .dark .month-count { background-color: #1c3358; border-color: rgba(255,255,255,0.06); color: #6b7280; } .dark .record-card { background-color: #15264a; border-color: rgba(255,255,255,0.07); } .dark .record-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.4); } .dark .rec-course { color: #e8eaf0; } .dark .rec-meta { color: #6b7280; } .dark .pagination-wrap { background-color: #1c3358; border-color: rgba(255,255,255,0.07); } .dark .page-info { color: #9ca3af; } .dark .page-info strong { color: #e8eaf0; } .dark .page-btn { background-color: #1c3358; border-color: rgba(255,255,255,0.1); color: #c4c9d9; } .dark .page-btn:hover:not([aria-disabled="true"]) { background-color: #1e3c6f; border-color: rgba(255,255,255,0.15); } .dark .empty-state h2 { color: #9ca3af; } .dark .empty-state p { color: #6b7280; } /* ── Bottom bar (student mobile) — editorial palette ─────── */ .dark .bottom-bar { background: rgba(14, 29, 61, 1) !important; border-top-color: rgba(245, 239, 225, 0.14) !important; } .dark .bar-btn { color: #f5efe1; opacity: 0.55; } .dark .bar-btn.active { color: #60a5fa; opacity: 1; } .dark .bar-btn.active svg { stroke: #60a5fa; } .dark .bar-dropdown { background: #0e1d3d !important; border-color: rgba(245, 239, 225, 0.18) !important; box-shadow: 4px 4px 0 #60a5fa, 0 12px 28px -8px rgba(0, 0, 0, 0.7) !important; } .dark .bar-dropdown-item { color: #f5efe1 !important; } .dark .bar-dropdown-item:hover { background: rgba(96, 165, 250, 0.14) !important; color: #60a5fa !important; } .dark .bar-dropdown-item.danger { color: #f87171 !important; } .dark .bar-dropdown-item.danger:hover { background: rgba(248, 113, 113, 0.14) !important; color: #fca5a5 !important; } .dark .bar-dropdown-divider { border-color: rgba(245, 239, 225, 0.10) !important; } .dark .bar-theme-knob { background: #0e1d3d; } /* ── Login page ──────────────────────────────────────────── */ .dark a.border.border-gray-300:hover { background-color: rgba(255,255,255,0.06) !important; } /* ── Scan page ───────────────────────────────────────────── */ .dark #reader { border-color: rgba(255,255,255,0.1) !important; } .dark details summary { color: #9ca3af !important; } .dark details summary:hover { color: #d1d5db !important; }