/* Page guard cloak: protected pages add class="cloak" to so nothing
paints until auth.js confirms the session and removes it (or redirects).
Prevents the brief flash of protected content before a redirect. */
html.cloak { visibility: hidden; }
:root {
--white: #FFFFFF; /* literal white — foreground on coloured chrome (button/navbar text). NEVER themed. */
--royal-blue: #002366; /* brand — navbar/primary-button backgrounds + document accents. Stays deep in every theme. */
--royal-blue-dark: #001a4d;
--sky-blue: #87CEEB;
--sky-blue-dark: #6FBCDD;
--sky-blue-light: #D6EFFA;
--royal-blue-hover: #003399;
--text-dark: #1A1A2E;
--text-muted: #5A6A7A;
--border: #D0DCE8;
--danger: #C0392B;
--success: #1A7A4A;
--warning: #D4830A;
--info: #0E7490; /* teal — for info toasts; distinct from the royal-blue navbar + sky-blue page background */
/* ---- Themeable surface tokens (overridden per theme in the THEMES section
at the bottom of this file). Light is the default below. --white/--royal-blue
above stay fixed; these are what dark/other themes repaint. ---- */
--surface: #FFFFFF; /* cards, inputs, dropdowns, dialogs */
--surface-2: #F2F7FB; /* subtle raised/alt surface */
--page-bg: #D6EFFA; /* the page background behind cards */
--accent: var(--royal-blue); /* heading/link/affordance text that must stay readable on themed surfaces */
--font-heading: 'Poppins', sans-serif;
--font-body: 'Inter', sans-serif;
--radius: 8px;
--shadow: 0 2px 12px rgba(0, 35, 102, 0.08);
--shadow-md: 0 4px 24px rgba(0, 35, 102, 0.14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
font-family: var(--font-body);
color: var(--text-dark);
background: var(--page-bg);
line-height: 1.55;
min-height: 100vh;
overflow-x: clip;
max-width: 100%;
}
img, table { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--accent); line-height: 1.25; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--royal-blue-hover); }
/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo .monogram {
width: 40px; height: 40px; border-radius: 50%;
background: var(--white);
object-fit: cover;
flex-shrink: 0;
}
.logo .name { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
padding: 10px 18px; border: none; border-radius: var(--radius);
cursor: pointer; transition: background 0.15s, opacity 0.15s; text-align: center;
}
.btn-primary { background: var(--royal-blue); color: var(--white); }
.btn-primary:hover { background: var(--royal-blue-hover); color: var(--white); }
/* Secondary sits on the fixed light sky-blue in every theme, so its text is a
fixed dark navy (not a themed token that could go light/low-contrast). */
.btn-secondary { background: var(--sky-blue); color: #0d2647; }
.btn-secondary:hover { background: var(--sky-blue-dark); }
.btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-outline:hover { background: var(--royal-blue); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-block { width: 100%; }
/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--text-dark); }
input, select, textarea {
width: 100%; font-family: var(--font-body); font-size: 0.95rem;
padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius);
background: var(--surface); color: var(--text-dark);
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0, 35, 102, 0.12);
}
/* Checkboxes & radios must not inherit the full-width text-input sizing above —
otherwise they stretch across the row. Keep them at their natural size. */
input[type="checkbox"], input[type="radio"] {
width: auto; margin: 0; padding: 0; flex: 0 0 auto; vertical-align: middle;
}
/* Visible keyboard-focus ring on buttons/links (they get none by default here).
:focus-visible so a mouse click doesn't show the ring, only keyboard nav. */
.btn:focus-visible,
.sidebar a:focus-visible,
a.stat-card:focus-visible,
a.assignment-pill:focus-visible,
.password-toggle:focus-visible {
outline: 2px solid var(--royal-blue);
outline-offset: 2px;
}
/* Dark navbar: a white ring for contrast against royal blue. */
.navbar a:focus-visible,
.navbar .btn:focus-visible {
outline: 2px solid var(--white);
outline-offset: 2px;
}
/* Skip-to-content link (injected by auth.js). Off-screen until focused, then it
drops into view as the first tab stop so keyboard/SR users bypass the repeated
navbar + sidebar. Sits above the navbar but below the re-auth/connecting cloaks. */
.skip-link {
position: fixed; top: 8px; left: 8px; z-index: 9998;
transform: translateY(-200%); transition: transform 0.15s ease;
background: var(--royal-blue); color: var(--white);
padding: 10px 16px; border-radius: var(--radius); font-weight: 600;
box-shadow: var(--shadow-md); text-decoration: none;
}
.skip-link:focus { transform: none; outline: 2px solid var(--white); outline-offset: 2px; }
/* Screen-reader-only text (e.g. a label sitting behind a button spinner). */
.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;
}
/* Shared subtitle under auth / result-check card headings (pages override the
bottom margin). Hoisted here so login and check-result can't drift apart. */
.auth-subtitle { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
/* Persistent inline alert banner (login + result-check): stays until the next
attempt and is announced to screen readers, unlike an auto-dismissing toast. */
.auth-alert {
display: none; margin-bottom: 16px; padding: 11px 14px; border-radius: var(--radius);
font-size: 0.88rem; line-height: 1.4;
background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.35);
color: var(--danger);
}
.auth-alert.show { display: block; }
/* Neutral variant — e.g. "results not published yet" is benign, not an error. */
.auth-alert.is-info {
background: rgba(14, 116, 144, 0.08); border-color: rgba(14, 116, 144, 0.35); color: var(--info);
}
/* Show/hide password toggle */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 70px; }
.password-toggle {
position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
background: none; border: none; cursor: pointer; border-radius: 6px;
color: var(--accent); font-family: var(--font-body); font-weight: 600;
font-size: 0.82rem; padding: 4px 8px;
}
.password-toggle:hover { background: var(--sky-blue-light); }
/* Inline field validation (replaces native required popups) */
.field-error { color: var(--danger); font-size: 0.82rem; margin-top: 6px; display: none; }
.form-group.has-error input { border-color: var(--danger); }
.form-group.has-error input:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }
.form-group.has-error .field-error { display: block; }
/* ---------- Cards ---------- */
.card {
background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px;
}
.card h2, .card h3 { margin-bottom: 14px; }
/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.92rem; }
thead th {
/* surface-2 + accent are a themed pair (both flip together per theme), so the
header keeps good contrast in every theme instead of relying on the fixed
sky-blue/royal-blue combo. */
background: var(--surface-2); color: var(--accent);
font-family: var(--font-heading); font-weight: 600; text-align: left;
padding: 11px 14px; white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--sky-blue-light); }
/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge-success { background: #DDF3E7; color: var(--success); }
.badge-danger { background: #FBE4E1; color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--text-muted); }
/* ---------- Utilities ---------- */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gap { gap: 12px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hidden { display: none !important; }
.spinner {
width: 22px; height: 22px; border: 3px solid var(--sky-blue-light);
border-top-color: var(--accent); border-radius: 50%;
animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Toasts ---------- */
#toast-container {
/* Sit below the sticky navbar (its live height, +12px) so toasts never cover
the Logout button even when the navbar wraps to two rows. The 64px fallback
covers pages without the measuring script — they just show a little lower. */
position: fixed; top: calc(var(--nav-h, 64px) + 12px); right: 20px; z-index: 9999;
display: flex; flex-direction: column; gap: 10px;
}
.toast {
min-width: 240px; max-width: 360px; padding: 13px 16px;
border-radius: var(--radius); color: var(--white); box-shadow: var(--shadow-md);
font-weight: 500; font-size: 0.9rem; animation: slideIn 0.2s ease;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--info); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Sticky "Processing…" toast (showProgressToast). The dots animate 1→2→3 in
JS; give them a fixed width so the toast doesn't twitch as the count changes. */
.toast-progress { display: inline-flex; align-items: baseline; }
.toast-dots { display: inline-block; width: 1.5ch; text-align: left; }
.empty-state { text-align: center; color: var(--text-muted); padding: 32px 16px; }
/* ---------- "Connecting to server" overlay ---------- */
/* Shown by api.js when a request is slow (free-tier backend cold-starting).
visibility:visible overrides html.cloak so it appears even on guarded pages
before they un-cloak. */
.server-overlay {
position: fixed; inset: 0; z-index: 10000;
display: none; visibility: visible;
align-items: center; justify-content: center;
padding: 24px; box-sizing: border-box;
background: rgba(0, 35, 102, 0.55);
}
.server-overlay.show { display: flex; }
.server-overlay-box {
background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow-md); padding: 30px 26px;
max-width: 340px; text-align: center;
}
.server-overlay-box .spinner { width: 30px; height: 30px; border-width: 4px; margin-bottom: 14px; }
.server-overlay-title { font-weight: 600; color: var(--accent); margin-bottom: 6px; font-size: 1.02rem; }
.server-overlay-sub { color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; margin: 0; }
/* ---------- Re-authentication cloak ---------- */
/* Injected by auth.js when the session expires mid-task. Sits above everything
(incl. the connecting overlay) and covers the page so in-progress work is
preserved underneath while we ask for the password again. */
.reauth-overlay {
position: fixed; inset: 0; z-index: 10001; visibility: visible;
display: flex; align-items: center; justify-content: center;
padding: 24px; box-sizing: border-box;
background: rgba(0, 35, 102, 0.72);
}
.reauth-box {
background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow-md); padding: 26px 24px;
width: 100%; max-width: 380px; text-align: left;
}
.reauth-title { font-weight: 700; color: var(--accent); margin: 0 0 8px; font-size: 1.15rem; }
.reauth-text { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px; }
.reauth-email { font-size: 0.85rem; color: var(--text-dark); margin: 0 0 12px; }
/* The cloak's error line styles itself (red, like .field-error) rather than
borrowing the .field-error class — that class is display:none until a parent
.form-group gets .has-error, a toggle the cloak never uses, so reusing it here
left every re-auth error invisible (message set, nothing shown). */
.reauth-error { color: var(--danger); font-size: 0.82rem; margin: 6px 0 0; min-height: 1em; }
.reauth-error:empty { display: none; }
.reauth-logout {
display: block; margin: 12px auto 0; padding: 4px 8px;
background: none; border: none; cursor: pointer;
color: var(--text-muted); font: inherit; font-size: 0.85rem; text-decoration: underline;
}
.reauth-logout:hover { color: var(--accent); }
/* ---------- Custom modal dialog (themed confirm / alert) ---------- */
/* Replaces the browser's native confirm()/alert() (see confirmDialog/alertDialog
in utils.js). Defined here in global.css so it works on every page, not only the
principal pages that load principal.css's .modal-backdrop. */
.dialog-backdrop {
position: fixed; inset: 0; z-index: 10002;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(0, 35, 102, 0.55);
}
.dialog {
background: var(--surface); color: var(--text-dark);
border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-md); padding: 22px 22px 18px;
width: 100%; max-width: 400px; animation: dialogIn 0.15s ease;
}
@keyframes dialogIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialog-title { margin: 0 0 8px; font-size: 1.1rem; }
.dialog-msg { margin: 0 0 18px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* ---------- Custom file input ---------- */
/* The native file button is unstyleable and differs per browser, so we hide the
real (via the `hidden` attr) and drive it from a styled .btn label,
with the chosen filename shown alongside (filled in by initFileInputs()). */
.file-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-field .file-btn { margin: 0; cursor: pointer; }
.file-name {
color: var(--text-muted); font-size: 0.85rem;
max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Respect a reduced-motion preference: neutralise animations/transitions and
freeze the spinner as a static ring rather than a frozen mid-rotation frame. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.spinner { animation: none !important; }
}
/* ============================================================================
THEMES
Light is the default (the :root values at the top of this file). theme.js sets
before first paint; each block below repaints only the
themeable tokens. Rules:
• --white stays literal white (foreground on coloured chrome).
• --royal-blue / --accent / --surface(-2) / --page-bg / text / border / shadows
flip per theme.
• thead + secondary keep contrast via the surface-2/accent pairing and a fixed
navy respectively (handled above).
• Result sheets & scratch cards (.sheet/.scard) and ALL printing are forced
back to the official light palette at the bottom of this section.
============================================================================ */
/* ---- DARK : deep slate, light-blue accent ---- */
html[data-theme="dark"] {
--page-bg: #0f1620;
--surface: #1b2533;
--surface-2: #243244;
--text-dark: #e7eef6;
--text-muted: #a3b3c6;
--border: #33425a;
--sky-blue-light: #243244;
--accent: #6fb2f2;
--royal-blue: #1a3a66;
--royal-blue-hover: #224a80;
--shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
--shadow-md: 0 6px 26px rgba(0, 0, 0, 0.6);
}
/* ---- MIDNIGHT : near-black (OLED-friendly) ---- */
html[data-theme="midnight"] {
--page-bg: #05080d;
--surface: #0d141f;
--surface-2: #141e2c;
--text-dark: #e3ebf4;
--text-muted: #94a4b7;
--border: #233044;
--sky-blue-light: #141e2c;
--accent: #5aa6ef;
--royal-blue: #122a4d;
--royal-blue-hover: #18365f;
--shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
--shadow-md: 0 6px 28px rgba(0, 0, 0, 0.72);
}
/* ---- EMERALD : light surfaces, green primary/accent ---- */
html[data-theme="emerald"] {
--page-bg: #e9f5ef;
--surface: #ffffff;
--surface-2: #eef3f1;
--text-dark: #16271f;
--text-muted: #4f6960;
--border: #cfe5da;
--sky-blue-light: #e1f0e9;
--accent: #0f7a52;
--royal-blue: #0f7a52;
--royal-blue-hover: #0b6242;
--shadow: 0 2px 12px rgba(15, 122, 82, 0.12);
--shadow-md: 0 6px 24px rgba(15, 122, 82, 0.18);
}
/* ---- SEPIA : warm paper, brown primary/accent ---- */
html[data-theme="sepia"] {
--page-bg: #f3ece0;
--surface: #fbf7f0;
--surface-2: #f0ebe0;
--text-dark: #2e2a23;
--text-muted: #6b6256;
--border: #ddcfbc;
--sky-blue-light: #efe6d8;
--accent: #6b4e2e;
--royal-blue: #6b4e2e;
--royal-blue-hover: #553d22;
--shadow: 0 2px 12px rgba(107, 78, 46, 0.12);
--shadow-md: 0 6px 24px rgba(107, 78, 46, 0.18);
}
/* ---- HIGH CONTRAST : black surfaces, white text, yellow accent ---- */
html[data-theme="contrast"] {
--page-bg: #000000;
--surface: #000000;
--surface-2: #111111;
--text-dark: #ffffff;
--text-muted: #e6e6e6;
--border: #ffffff;
--sky-blue-light: #1a1a1a;
--accent: #ffd400;
--royal-blue: #0046c0;
--royal-blue-hover: #0057ee;
--shadow: 0 0 0 1px #ffffff;
--shadow-md: 0 0 0 2px #ffffff;
}
/* ---- ALWAYS LIGHT: result sheets & scratch cards ----
These are official documents — they must look identical (and print identical)
in every theme, so re-assert the canonical light palette on their containers.
Custom properties inherit, so this cascades to every element inside.
`color` MUST be re-declared here, not just the token: `color` inherits as a
*computed* value, so 's text colour was already resolved to the active
theme's (light) --text-dark before the cascade reached this island. Children
that don't set their own colour (e.g. plain result-table | s) would inherit
that resolved light colour and stay white on dark/midnight/contrast themes —
only elements that explicitly use var(--text-dark) picked up the override.
Re-asserting `color` re-evaluates the (now light-palette) token at the island
root so every descendant inherits the correct dark navy. Print already looked
right because the @media print block resets the tokens on :root itself. */
.sheet, .scard {
color: var(--text-dark);
--surface: #FFFFFF;
--surface-2: #F2F7FB;
--page-bg: #FFFFFF;
--accent: #002366;
--text-dark: #1A1A2E;
--text-muted: #5A6A7A;
--border: #D0DCE8;
--sky-blue-light: #D6EFFA;
--royal-blue: #002366;
--royal-blue-hover: #003399;
--shadow: 0 2px 12px rgba(0, 35, 102, 0.08);
--shadow-md: 0 4px 24px rgba(0, 35, 102, 0.14);
}
/* ---- PRINT IS ALWAYS LIGHT ----
Whatever theme is on screen, anything sent to paper uses the light palette so
ink/visibility is correct. Overriding the tokens on :root cascades everywhere;
the existing @media print rules in result.css / scratch-card.css still handle
layout. */
@media print {
:root,
html[data-theme] {
--surface: #FFFFFF;
--surface-2: #F2F7FB;
--page-bg: #FFFFFF;
--accent: #002366;
--text-dark: #1A1A2E;
--text-muted: #5A6A7A;
--border: #D0DCE8;
--sky-blue-light: #D6EFFA;
--royal-blue: #002366;
--royal-blue-hover: #003399;
}
}
/* ---- Theme switcher (injected by theme.js) ----
A small floating, draggable icon button on EVERY page. Tap it to open a popup
menu of themes; drag it anywhere and the position is remembered per device. It
lives outside the navbar, so it can never push the Logout button off-screen.
Default resting spot is bottom-right; theme.js flips the menu (up/down, left/
right) so it always stays on-screen wherever the icon is dragged. */
.theme-switch {
position: fixed; right: 16px; bottom: 16px; z-index: 9000;
display: inline-flex; touch-action: none; /* allow pointer-drag on touch */
}
.theme-btn {
width: 44px; height: 44px; padding: 0; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; cursor: grab; font-size: 1.25rem; line-height: 1;
background: var(--surface); color: var(--text-dark);
border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.theme-btn:active { cursor: grabbing; }
/* Long-press tucks the icon off the right edge as a very thin tab; a tap slides
it back. .theme-anim is added one frame after mount so a page that loads
already-hidden shows the tab instantly (no slide-in-from-nowhere flash). */
.theme-switch.theme-anim .theme-btn {
transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease,
opacity 0.2s ease, background 0.2s ease, right 0.2s ease;
}
.theme-switch.theme-hidden { right: 0 !important; left: auto !important; bottom: auto; }
.theme-switch.theme-hidden .theme-menu { display: none !important; }
.theme-switch.theme-hidden .theme-btn {
width: 8px; height: 52px; min-width: 0; padding: 0;
border-radius: 8px 0 0 8px; font-size: 0; /* hide the 🎨 glyph */
background: var(--accent); border-color: var(--accent); color: transparent;
opacity: 0.55;
}
.theme-switch.theme-hidden .theme-btn:hover { width: 12px; opacity: 0.95; }
.theme-menu {
position: absolute; z-index: 9500; min-width: 170px; padding: 6px;
background: var(--surface); color: var(--text-dark);
border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
/* defaults: below the icon, right-aligned. theme.js adds .menu-up / .menu-left. */
top: calc(100% + 8px); right: 0; bottom: auto; left: auto;
}
.theme-menu[hidden] { display: none; }
.theme-switch.menu-up .theme-menu { top: auto; bottom: calc(100% + 8px); }
.theme-switch.menu-left .theme-menu { right: auto; left: 0; }
.theme-opt {
display: flex; align-items: center; gap: 6px; width: 100%;
padding: 8px 10px; border: none; background: transparent; border-radius: 6px;
font: inherit; font-size: 0.88rem; color: var(--text-dark); text-align: left; cursor: pointer;
}
.theme-opt::before { content: ''; display: inline-block; width: 1ch; flex-shrink: 0; } /* checkmark gutter */
.theme-opt:hover { background: var(--sky-blue-light); }
.theme-opt.is-active { font-weight: 700; color: var(--accent); }
.theme-opt.is-active::before { content: '✓'; }
@media print { .theme-switch { display: none !important; } }
|