/* Same dark theme palette as the desktop app's mobile exports, so the web app feels like the same product rather than a different tool. Light mode (below) is the newer addition — every one of its color values was picked by calculating actual WCAG contrast ratios against its typical background, the same discipline already applied to the link-color rule further down, not eyeballed. */ :root { --bg:#1a1d2e; --panel:#242740; --panel2:#2e3150; --accent:#4fc3f7; --accent2:#7c83fd; --green:#43d6a0; --red:#ff6b6b; --orange:#ffa552; --text:#e8ecf8; --text2:#9ba3c9; --border:#373d5e; --entry-bg:#1e2138; /* Dark text for anything sitting ON TOP of the bright accent color itself (buttons, active pills, checkmarks) — was five repeated literal #0c1120/#0a0c14 values scattered through this file, now one named variable. Flips to white in light mode below, since --accent itself flips from a pale blue (needs dark text) to a deeper, saturated one (needs light text) — confirmed by calculating both options' actual contrast against light mode's own --accent value, not assumed to carry over unchanged. */ --on-accent:#0c1120; --on-accent-muted:rgba(10,12,20,0.65); --green-tint:rgba(67,214,160,0.18); --orange-tint:rgba(255,165,82,0.16); --accent-glow:rgba(79,195,247,0.4); --accent-glow-hover:rgba(79,195,247,0.5); /* These four were the only genuinely theme-dependent hardcoded backgrounds found in this file — everything else already flowed through the variables above. The QR modal's own white background and dark text further down are deliberately NOT included here: a QR code needs real white behind real black to scan reliably, regardless of which theme the rest of the app is in. */ --topbar-bg:#141625; --flash-error-bg:#3a1e22; --flash-success-bg:#1e3a2c; --deload-bg:#3a2c1e; /* Purely decorative section-accent colors, for visually breaking up long scrolling pages — deliberately distinct from red/orange/green above, which already mean something specific (errors, warnings, success) elsewhere in the UI. A section header being teal or rose carries no meaning beyond "a different section than the one above it". */ --sc1:#4fc3f7; --sc2:#a5a9fe; --sc3:#2dd4bf; --sc4:#f78fb3; --sc5:#e8c468; --sc6:#b18cf5; --sc7:#43d6a0; --sc8:#6ec6ff; /* Superset/Circuit group colors — deliberately chosen from the two hue ranges (yellow-green ~60-140deg, violet-magenta ~260-340deg) the 8 category colors above never touch, so a grouped exercise's color is never confusable with its own training-category color. */ --superset1:#cf89e6; --superset2:#4ebe37; --circuit1:#b3dd5f; --circuit2:#ed8294; } /* Light mode — toggled by adding data-theme="light" to (see the toggle script in base.html). Every category/group color below keeps its dark-mode hue exactly, just darkened in HSL space until it clears 4.5:1 against the new light --bg — done programmatically, not by eye, so the same 12 colors stay as visually distinct from each other as they were in dark mode, just legible on a light background instead of a dark one. */ html[data-theme="light"] { --bg:#f5f6fb; --panel:#ffffff; --panel2:#eef0f8; --accent:#0678a3; --accent2:#4f58fc; --green:#0e7d55; --red:#c93650; --orange:#96540d; --text:#1a1d2e; --text2:#565d80; --border:#d9dceb; --entry-bg:#eef0f8; --on-accent:#ffffff; --on-accent-muted:rgba(255,255,255,0.95); --green-tint:rgba(14,125,85,0.12); --orange-tint:rgba(150,84,13,0.14); --accent-glow:rgba(6,120,163,0.3); --accent-glow-hover:rgba(6,120,163,0.4); --topbar-bg:#ffffff; --flash-error-bg:#fdf0f1; --flash-success-bg:#e2f5ec; --deload-bg:#f7e9d8; --sc1:#0878aa; --sc2:#4f57fd; --sc3:#197c70; --sc4:#dd1057; --sc5:#8d6b15; --sc6:#844aef; --sc7:#1b7e5a; --sc8:#0074c0; --superset1:#ad35d4; --superset2:#347f25; --circuit1:#5a7a1a; --circuit2:#da1f3f; } /* Without this, every plain link (every "← Back to..." link, every inline link in a hint note, anywhere a more specific class doesn't already set its own color) fell back to the BROWSER's default link colors — designed for light backgrounds, and confirmed by direct contrast-ratio calculation to score as low as ~1.5:1 against this dark theme (WCAG AA needs 4.5:1 for normal text), with visited links in particular rendering as a barely-visible dark purple. This single rule is an author-stylesheet rule, so it correctly overrides the browser's default even for :visited, without needing a separate override for that specific state. More specific classes elsewhere (.cell-name-link, .msg-body a, etc.) still win where they exist. */ a { color: var(--accent); text-decoration-color: currentColor; } a:hover { color: var(--text); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ── Top bar ── */ .topbar { background: var(--topbar-bg); padding: 12px 20px; border-bottom: 1px solid var(--border); } .brand-row { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .brand { font-weight: 700; color: var(--accent); font-size: 16px; text-decoration: none; } .theme-toggle-btn { background: var(--panel2); border: 1px solid var(--border); color: var(--text); width: 30px; height: 30px; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--accent); } .nav-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 8px; } .who { font-size: 13px; color: var(--text2); white-space: nowrap; } .role-tag { background: var(--panel2); color: var(--accent2); font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; margin-left: 6px; } .logout-link { color: var(--text2); font-size: 13px; text-decoration: none; } .logout-link:hover { color: var(--red); } .nav-link { color: var(--text2); font-size: 13px; text-decoration: none; font-weight: 600; white-space: nowrap; } .nav-link:hover { color: var(--accent); } .bell-link { position: relative; font-size: 16px; padding: 0 4px; } .badge-link { position: relative; padding-right: 14px; } .bell-badge { position: absolute; top: -7px; right: -8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } @media (max-width: 480px) { .topbar { padding: 10px 14px; } .brand { font-size: 14px; } .nav-row { gap: 10px; } .nav-link, .who, .logout-link { font-size: 12px; } .data-table th, .data-table td { padding: 8px 10px; } } /* ── Layout ── */ .content { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; } .page-title { font-size: 22px; color: var(--accent); margin: 0 0 4px; } .program-logo { max-height: 64px; max-width: 220px; display: block; margin: 0 auto 10px auto; border-radius: 6px; } .page-sub { font-size: 13px; color: var(--text2); margin: 0 0 20px; } /* ── Flash messages ── */ .flash-wrap { margin-bottom: 16px; } .flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; } .flash-error { background: var(--flash-error-bg); color: var(--red); } .flash-success { background: var(--flash-success-bg); color: var(--green); } /* ── Login page ── */ .login-wrap { display: flex; justify-content: center; align-items: center; min-height: 90vh; } .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 32px; width: 100%; max-width: 360px; } .login-title { font-size: 17px; color: var(--accent); text-align: center; margin: 0 0 4px; } .login-sub { font-size: 12px; color: var(--text2); text-align: center; margin: 0 0 24px; } /* ── Form fields ── */ .f { margin-bottom: 14px; } .f label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 5px; font-weight: 600; } .help-link { color: var(--accent); text-decoration: none; font-weight: 600; margin-left: 8px; font-size: 11px; } .help-link:hover { text-decoration: underline; } .f input { width: 100%; padding: 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--entry-bg); color: var(--text); font-size: 14px; font-family: inherit; } .f input:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .f textarea { width: 100%; padding: 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--entry-bg); color: var(--text); font-size: 14px; font-family: inherit; resize: vertical; } .f textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .f select { width: 100%; padding: 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--entry-bg); color: var(--text); font-size: 14px; font-family: inherit; } .f select:focus { outline: 2px solid var(--accent); border-color: var(--accent); } /* The dropdown POPUP (the list of options when a select is open) is rendered by the browser using each