:root { color-scheme: light; --border: #d8dee5; --text: #1f2933; --muted: #66717e; /* A visit with no caregiver assigned. Deliberately its own token rather than a mix of --text: in dark mode --text is near-white, so mixing it produced a PALE block -- the opposite of "dark grey" -- while looking correct in light mode. "Dark grey" means darker than the surface it sits on, which is a different colour in each theme. */ --accent: #1565c0; --accent-dark: #0d47a1; --accent-gradient: linear-gradient(135deg, #1976d2, #0d47a1); --danger: #c62828; --bg-subtle: #eaf6fb; --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; /* Being @-tagged is ORANGE, everywhere it shows: the row tag, the Messages nav count, the chat dot, the message bubble. It was the same green as "included", so the two states a reader most needs to tell apart -- somebody asked ME something, versus I am simply on this thread -- looked identical at a glance. Dark enough for white badge ink; a redder orange than --category-patient's gold, so those two stay distinct as well. */ --mention: #c2410c; --mention-bg: #fdece2; /* The canvas sits on -- kept separate from --surface (cards, rows, popovers) even though the two are the same white in light mode, so dark mode can tell "the page" and "a thing raised off the page" apart. Without this, redefining --surface for dark cards would have also repainted the page behind them the exact same colour, and every card would have lost its elevation. */ --page-bg: #fff; /* Elevation scale -- matches fshc-nurse-portal's tokens so raised surfaces (cards, popovers, the sticky topbar, hovered rows/buttons) read consistently across both apps instead of homecare-app looking flatter. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.07); --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.1); --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.18); --ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ---- Surfaces ------------------------------------------------------- The stylesheet had grown eight near-identical off-whites (#fafbfc, #fbfbfc, #fafbfe, #f7f9fa, #f3f6fa, #f4f6f8, #f1f3f5, #f1f2f4) used interchangeably for the same three jobs. Three tokens, one job each. */ --surface: #fff; /* cards, table rows, popovers */ --surface-subtle: #fafbfc; /* zebra rows, table heads, inset panels */ --surface-sunken: #f4f6f8; /* the plane a card sits on */ --surface-hover: #eef1f4; /* hovered row / ghost button */ --border-strong: #c3ccd6; /* input borders, dividers that must read */ /* ---- State scale ---------------------------------------------------- ONE language for every state in the app. Before this, a status badge and a calendar chip said the same thing in different hues: "done" was #226b3a on a badge and #2e7d32 on the calendar, "missing" was #9a2c22 / #c62828 / #b3261e depending on the page, and "entered by hand" was violet on the calendar but amber (status-warn) in the Visits table. Each role has three parts: the line/mark colour, a soft fill, and the ink that sits on that fill. Two notes on the colours themselves, both measured with the dataviz validator against this app's white surface rather than eyeballed: 1. good(green) vs critical(red) is deutan dE 2.8 -- they are indistinguishable to a red-green colourblind reader, and no re-stepping fixes that while keeping red and green meaning bad and good. The mitigation is that a state is NEVER colour alone: every badge carries its text, and calendar chips carry a state glyph (see .cal-chip::before). Do not remove either. 2. manual was #6a3fb5, which sat dE 12.1 from --accent blue in normal vision and 2.7 under deuteranopia -- the worst pair in the app, and gratuitous, since nothing forces "typed in by hand" to be blue-ish. Re-stepped to #8e3a9e: 17.9 normal (clears the >=15 floor), 7.0 deutan (legal given the glyph + label above). */ --state-good: #2e7d32; --state-good-soft: #e6f4ea; --state-good-ink: #226b3a; --state-warn: #c99700; --state-warn-soft: #fff3c4; --state-warn-ink: #6b4e00; --state-critical: #b3261e; /* Cancelled / no-show. Orange, not the critical red: a visit somebody recorded as cancelled is a known, closed outcome, while red is kept for the unstaffed visits that still need someone to act. They read as the same urgency otherwise, separated only by a dashed border. */ --state-missed: #c2570b; --state-missed-soft: #fdeee2; --state-missed-ink: #8a3d06; --state-critical-soft: #fdecea; --state-critical-ink: #9a2c22; --state-info: #1565c0; --state-info-soft: #e8f0fe; --state-info-ink: #0f4c94; --state-neutral: #9aa5ad; --state-neutral-soft: #eceef0; --state-neutral-ink: #5b6470; --state-manual: #8e3a9e; --state-manual-soft: #f5eaf8; --state-manual-ink: #6b2a78; /* ---- Chart ink ------------------------------------------------------ Categorical slots, for the one chart whose parts are identities rather than states (a bill's day/night/mileage/fees composition). Validated all-pairs on white: worst CVD dE 9.2, worst normal-vision dE 16.3. Four is the cap -- a fifth slot does not clear the floors. Anything state-shaped uses the state scale above, never these. */ --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #4a3aa7; --chart-grid: #e6eaef; --chart-axis: #c3ccd6; --chart-track: #eef1f4; /* the unfilled part of a bar or meter */ /* Sequential blue, light->dark, for continuous magnitude (calendar density). Steps 100-700; an ordinal use starts no lighter than 250. */ --seq-100: #e8f1fc; --seq-250: #b7d3f6; --seq-400: #6da7ec; --seq-550: #2a78d6; --seq-700: #14508f; /* Message categories -- was three independent hardcoded copies of the same four hex values (_messages_list.html's CATEGORY_COLORS dict, base.html's nav badges, _provider_nav.html's nav badges), which is exactly the drift risk the state scale above exists to prevent. Kept as their own axis rather than folded into --state-*: these identify WHICH category a thread belongs to, not a status. Values match fshc-nurse-portal's messages.html on purpose -- do not re-step them without checking that app too. tagged/included/audit happen to equal --mention/--accent/--muted already; aliased rather than duplicated. */ --category-patient: #8f6a09; --category-tagged: var(--mention); /* Green, and its own value rather than an alias of --accent: "included" is now a colour in its own right (it used to be the same blue as every other accent in the app, which said nothing), and it is the green --mention gave up when tagging went orange. */ --category-included: #1b7a3d; --category-audit: var(--muted); /* Ink for text sitting ON a solid state/accent fill -- a badge count, the active nav pill, a "today" day number. White in light mode, because those fills are dark there. In dark mode the fills are what lighten (an accent that stayed #1565c0 would vanish against the page), so the ink has to travel the other way or the pair inverts into unreadable white-on-pastel. Measured in a headless browser this time, which is the re-validation the dark state-scale note above asks for: every one of these was between 2.2:1 and 2.8:1. Fills that DON'T shift between themes keep a literal #fff on purpose. */ --badge-ink: #fff; /* Form-builder field a recipient (not the agency) fills in. Its own blue, deliberately not --accent, so the two roles stay tellable apart. */ --field-locked: #2563eb; } /* ---- Dark mode ----------------------------------------------------------- Two copies of the same declarations on purpose, not a CSS bug: the media query covers "OS says dark, no explicit choice on this device", and the attribute selector covers the toggle in the topbar overriding that either way (an explicit light pick beating a dark OS, or vice versa). Nothing outside :root ever references dark mode directly -- every rule in this file already reads a variable, so redefining the variables here is the entire mechanism. Hues keep their light-mode identity; only lightness moves; toward the dark surface for the "soft" tint that used to be a light wash, and toward white for the "ink" that used to be a shade darker than the line color -- the two roles trade places once the surface they sit on flips. Not re-validated against the dataviz tool the light state scale was (no headless renderer in this environment) -- if a pairing looks wrong once you can actually see it, that is the thing to fix, not the reasoning. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --border: #2b3440; --text: #e7ebf0; --muted: #93a0ad; --accent: #5b9bf0; --accent-dark: #3d7dd6; --accent-gradient: linear-gradient(135deg, #2f6fb8, #1e4a86); --danger: #e5675f; --bg-subtle: #17222c; --mention: #fb8b4c; --mention-bg: #2b1a10; --page-bg: #0d1117; --surface: #161b22; --surface-subtle: #1b2129; --surface-sunken: #10141a; --surface-hover: #212a34; --border-strong: #3a4552; --state-good: #57b860; --state-good-soft: #16281d; --state-good-ink: #8fdb9b; --state-warn: #e0b93f; --state-warn-soft: #2c2410; --state-warn-ink: #f0d585; --state-critical: #e5675f; --state-critical-soft: #2c1614; --state-critical-ink: #f2a29c; --state-missed: #f0904a; --state-missed-soft: #2e1d12; --state-missed-ink: #f5b98c; --state-info: #5b9bf0; --state-info-soft: #16222e; --state-info-ink: #a9c9f5; --state-neutral: #8b96a3; --state-neutral-soft: #232830; --state-neutral-ink: #c3ccd4; --state-manual: #c17ad1; --state-manual-soft: #271b2c; --state-manual-ink: #e2b3ec; --chart-1: #5b9bf0; --chart-2: #f08a5b; --chart-3: #3fd19c; --chart-4: #8f7ae0; --chart-grid: #2b3440; --chart-axis: #3a4552; --chart-track: #232830; --seq-100: #1a2733; --seq-250: #1f3550; --seq-400: #2a4e78; --seq-550: #3568a0; --seq-700: #5b9bf0; --category-patient: #d9a63e; --category-included: #4fbd7a; --badge-ink: #0b1220; --field-locked: #7ea9f5; --badge-ink: #0b1220; --field-locked: #7ea9f5; } } :root[data-theme="dark"] { color-scheme: dark; --border: #2b3440; --text: #e7ebf0; --muted: #93a0ad; --accent: #5b9bf0; --accent-dark: #3d7dd6; --accent-gradient: linear-gradient(135deg, #2f6fb8, #1e4a86); --danger: #e5675f; --bg-subtle: #17222c; --mention: #fb8b4c; --mention-bg: #2b1a10; --page-bg: #0d1117; --surface: #161b22; --surface-subtle: #1b2129; --surface-sunken: #10141a; --surface-hover: #212a34; --border-strong: #3a4552; --state-good: #57b860; --state-good-soft: #16281d; --state-good-ink: #8fdb9b; --state-warn: #e0b93f; --state-warn-soft: #2c2410; --state-warn-ink: #f0d585; --state-critical: #e5675f; --state-critical-soft: #2c1614; --state-critical-ink: #f2a29c; --state-missed: #f0904a; --state-missed-soft: #2e1d12; --state-missed-ink: #f5b98c; --state-info: #5b9bf0; --state-info-soft: #16222e; --state-info-ink: #a9c9f5; --state-neutral: #8b96a3; --state-neutral-soft: #232830; --state-neutral-ink: #c3ccd4; --state-manual: #c17ad1; --state-manual-soft: #271b2c; --state-manual-ink: #e2b3ec; --chart-1: #5b9bf0; --chart-2: #f08a5b; --chart-3: #3fd19c; --chart-4: #8f7ae0; --chart-grid: #2b3440; --chart-axis: #3a4552; --chart-track: #232830; --seq-100: #1a2733; --seq-250: #1f3550; --seq-400: #2a4e78; --seq-550: #3568a0; --seq-700: #5b9bf0; --category-patient: #d9a63e; --category-included: #4fbd7a; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--page-bg); } a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--ease); } a:hover { text-decoration: underline; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--page-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; /* color-mix, not a raw rgba(255,255,255,...) literal -- that was opaque to the dark-mode token swap below (a hardcoded white blended right into white --text on top of it, the single worst offender in the "white on white" report). Deriving the translucency from --surface means it goes dark for free whenever --surface does. */ background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); box-shadow: var(--shadow-xs); z-index: 10; } .topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: var(--text); } .topbar-brand:hover { text-decoration: none; } .topbar-logo-img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; flex-shrink: 0; } .topbar-logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--badge-ink); font-size: 1rem; font-weight: 700; line-height: 1; } .topbar-actions { display: flex; align-items: center; gap: 12px; } .topbar-link { font-size: 0.9rem; padding: 6px 4px; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .topbar-link:hover { text-decoration: none; color: var(--accent); } .topbar-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* "Log out" is a POST form rather than a link (see app/routers/auth.py), so the trigger has to be a