/* Shared across BOTH the student portal (public/*.html) and the admin * console (public/admin/*.html) — loaded after each app's own style.css so it * can override that stylesheet's CSS variables for dark mode and add the * handful of components neither stylesheet had: toasts, a confirm modal, * icon-button accessibility, and the theme toggle itself. * * The two apps' stylesheets use different variable NAMES for the same roles * (--accent vs --blue, --muted vs --ink-soft, etc.) — rather than rename * either one, this file overrides both sets. Toggled by data-theme="dark" on * , set by initThemeToggle() in js/ui.js and persisted to * localStorage; falls back to prefers-color-scheme for a first-time visitor * who hasn't chosen explicitly. data-theme="light" opts back out of that * fallback for a visitor whose OS is dark but who picked light here. */ :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* Student portal + admin console variable overrides, both sets in one block since both apply to the same document. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #dce7ee; --ink-heading: #eef5f9; --muted: #93a9b8; --border: #274052; --border-focus: #4db3e8; --bg: #0d1b26; --bg-gradient: radial-gradient(at 8% 0%, rgba(46, 143, 196, 0.12) 0px, transparent 55%), radial-gradient(at 100% 8%, rgba(231, 158, 189, 0.08) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(46, 143, 196, 0.06) 0px, transparent 55%); --card: #142735; --card-border: #274052; --card-glass: rgba(20, 39, 53, 0.92); --accent-light: #17324a; --ok-bg: #0e2c22; --ok-border: #1c5940; --warn-bg: #33270a; --warn-border: #6b4f14; --bad-bg: #34161b; --bad-border: #6e2b36; /* Admin console names, same values, same media query. */ --ink-soft: #93a9b8; --line: #274052; --panel: #142735; --blue-light: #17324a; --green-bg: #0e2c22; --green-border: #1c5940; --red-bg: #34161b; --red-border: #6e2b36; --amber-bg: #33270a; --amber-border: #6b4f14; --gray-bg: #1a2e3d; } } /* Explicit toggle wins over the media query in either direction — same values, just gated by the attribute instead of the OS preference. */ :root[data-theme="dark"] { --ink: #dce7ee; --ink-heading: #eef5f9; --muted: #93a9b8; --border: #274052; --border-focus: #4db3e8; --bg: #0d1b26; --bg-gradient: radial-gradient(at 8% 0%, rgba(46, 143, 196, 0.12) 0px, transparent 55%), radial-gradient(at 100% 8%, rgba(231, 158, 189, 0.08) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(46, 143, 196, 0.06) 0px, transparent 55%); --card: #142735; --card-border: #274052; --card-glass: rgba(20, 39, 53, 0.92); --accent-light: #17324a; --ok-bg: #0e2c22; --ok-border: #1c5940; --warn-bg: #33270a; --warn-border: #6b4f14; --bad-bg: #34161b; --bad-border: #6e2b36; --ink-soft: #93a9b8; --line: #274052; --panel: #142735; --blue-light: #17324a; --green-bg: #0e2c22; --green-border: #1c5940; --red-bg: #34161b; --red-border: #6e2b36; --amber-bg: #33270a; --amber-border: #6b4f14; --gray-bg: #1a2e3d; } /* Body background/text follow automatically — both stylesheets already key off --bg / --ink / --panel-or-card, so no rule needs repeating here. */ /* ── Theme toggle button ─────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: 1.1rem; line-height: 1; } header.site .theme-toggle, header.topbar .theme-toggle { color: inherit; border: 1.5px solid rgba(127, 127, 127, 0.3); } header.site .theme-toggle:hover, header.topbar .theme-toggle:hover { background: rgba(127, 127, 127, 0.12); transform: none; box-shadow: none; } header.topbar .theme-toggle { border-color: rgba(255, 255, 255, 0.35); color: #fff; } /* ── Toasts ──────────────────────────────────────────────────────────── */ #toast-region { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 40px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.25), 0 4px 10px -2px rgba(0, 0, 0, 0.12); background: var(--card, var(--panel, #fff)); color: var(--ink, #16232c); border: 1px solid var(--border, var(--line, #dbe6ec)); animation: toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .toast.success { border-left: 4px solid var(--ok, var(--green, #0d8f5f)); } .toast.error { border-left: 4px solid var(--bad, var(--red, #c23a4b)); } .toast.info { border-left: 4px solid var(--accent, var(--blue, #1c86c0)); } .toast .toast-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.3; } .toast .toast-msg { flex: 1; } .toast .toast-close { background: none; border: none; box-shadow: none; padding: 0 0 0 6px; color: var(--muted, var(--ink-soft, #5c7285)); font-size: 1rem; cursor: pointer; min-width: auto; } .toast .toast-close:hover { color: var(--ink, #16232c); transform: none; box-shadow: none; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } } .toast.leaving { animation: toast-out 0.18s ease forwards; } @media (max-width: 480px) { #toast-region { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* ── Confirm / prompt modal ──────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(9, 20, 28, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1100; animation: modal-fade 0.15s ease; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: var(--card, var(--panel, #fff)); color: var(--ink, #16232c); border-radius: var(--radius-lg, 16px); padding: 1.5rem 1.6rem; max-width: 420px; width: 100%; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4); border: 1px solid var(--border, var(--line, #dbe6ec)); } .modal-box h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.6rem; color: var(--ink-heading); } .modal-box p { margin: 0 0 1rem; color: var(--muted, var(--ink-soft)); font-size: 0.92rem; } .modal-box textarea, .modal-box input { margin-bottom: 0.25rem; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.1rem; } /* ── Icon-only buttons: give them a real accessible label surface ───── */ .icon-btn { display: inline-flex; align-items: center; gap: 6px; } .icon-btn .icon { font-size: 1rem; line-height: 1; } /* Visually-hidden but screen-reader-visible text, for icon buttons whose label is otherwise conveyed only by an emoji. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Skip link ───────────────────────────────────────────────────────── */ .skip-link { position: absolute; left: 8px; top: -48px; background: var(--accent, var(--blue, #1c86c0)); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 1200; transition: top 0.15s ease; font-weight: 600; font-size: 0.9rem; } .skip-link:focus { top: 8px; } /* ── A little more mobile headroom for dense admin tables ───────────── */ @media (max-width: 720px) { main { padding: 1.5rem 1rem 3rem; } .card-grid { grid-template-columns: 1fr; } th, td { padding: 0.6rem 0.65rem; font-size: 0.85rem; } } @media (max-width: 480px) { .wrap { padding: 20px 14px 60px; } header.site { padding: 10px 14px; } h1 { font-size: 1.6rem; } }