/* =========================================================================== Design tokens — extracted from the Parking Survey reference (Codex/carpark_survey: docs/UI_GUIDE.md, app/globals.css, app/layout.tsx) so the two products read as one family. Values come from globals.css, which is the applied system, wherever it and the written guide disagree. TWO deliberate departures, both marked below: 1. The MAP palette is exempt from the "green = success only" rule. Heat bands, rainfall bands and strike colours are NEA's own categories and are verified identical to the myENV app — see frontend/metrics.js. They are data encoding, not UI status, and must not be reskinned. 2. Parking Survey is light-only (`color-scheme: light`). The dark theme here is DERIVED from these tokens, not extracted, because this board is wall-mounted and runs night shifts. =========================================================================== */ /* Vendored locally rather than loaded from a CDN, for the same reason MapLibre and its glyphs are: the on-prem host may block outbound traffic. Variable fonts, so every weight comes from one 70 KB file. Geist is SIL OFL — see vendor/geist/LICENSE.txt. Variable names match the reference project's Next.js font loader output so component CSS can be copied across verbatim. */ @font-face { font-family: "Geist Sans"; src: url("/vendor/geist/Geist-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/vendor/geist/GeistMono-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } :root { --font-geist-sans: "Geist Sans"; --font-geist-mono: "Geist Mono"; /* --- surfaces: lavender canvas, white frame, light-grey content --- */ --canvas: #e9ddfb; --frame: #ffffff; --content: #f9fafb; --surface: var(--frame); --surface-2: var(--content); /* --- text --- */ --ink: #1f2937; --muted: #6b7280; --muted-light: #9ca3af; /* --- lines --- */ --line: #e5e7eb; --line-strong: #d1d5db; --line-soft: #f3f4f6; /* --- accent: orange for active navigation and selection --- */ --accent: #f97316; --accent-strong: #ea580c; --accent-soft: #fff7ed; /* --- semantic UI status. NOT for map data — see note 1 above. --- */ --link: #2563eb; --focus: var(--link); --success: #137c5b; --success-strong: #0b5c42; --success-soft: #e7f6ef; --warning: #9a6700; --warning-soft: #fff4d6; --danger: #b42318; --danger-soft: #fff0ee; --shadow: 0 1px 3px rgb(0 0 0 / 10%); --shadow-overlay: 0 18px 48px rgb(0 0 0 / 18%); /* --- geometry: 12px panels, 8px controls, 6px icon buttons, 16px shell --- */ --radius-shell: 16px; --radius-panel: 12px; --radius-control: 8px; --radius-icon: 6px; /* --- shell metrics --- */ --rail-w: 260px; --rail-collapsed-w: 72px; --topbar-h: 56px; --legend-h: 30px; --panel-w: 340px; } /* Derived dark theme — see note 2. Same hues, surfaces inverted, accent and status colours lifted toward the light end so they stay legible on a dark ground while remaining recognisably the same palette. */ :root[data-theme="dark"] { --canvas: #14121a; --frame: #1c1b22; --content: #17161d; --ink: #e8eaed; --muted: #9aa1ad; --muted-light: #79808c; --line: #2e2d36; --line-strong: #3d3c47; --line-soft: #24232b; --accent: #fb923c; --accent-strong: #fdba74; --accent-soft: #2a1e14; --link: #7fb0ea; --success: #6cc39a; --success-strong: #8fd4b3; --success-soft: #16241d; --warning: #e0a341; --warning-soft: #2a2214; --danger: #e08080; --danger-soft: #2b1a1a; --shadow: 0 1px 3px rgb(0 0 0 / 40%); --shadow-overlay: 0 18px 48px rgb(0 0 0 / 55%); } * { box-sizing: border-box; } html { min-height: 100%; background: var(--canvas); /* Not a static `color-scheme: light` as in the reference: this board has a real dark theme, so the property tracks [data-theme] instead — otherwise native form controls (checkboxes, scrollbars) would keep rendering in light style even after the toggle switches every other token. */ color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } html, body { margin: 0; height: 100%; color: var(--ink); font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; font-size: 14px; letter-spacing: 0; line-height: 1.5; } /* Blue 3px ring at 2px offset, exactly as the reference sets it. Applies to every interactive element, which is the accessibility floor this app was missing — several controls previously had no visible focus state at all. [role="button"] is here for the rail's zone
  • items: giving them tabindex made them focusable, but this selector is what makes that focus visible — without it a keyboard user could tab to a zone with no on-screen indication of where they were. */ :where(a, button, input, select, textarea, [role="button"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } button, input, select, textarea { font: inherit; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* =========================================================================== Framed admin shell — lavender canvas, rounded white frame, sidebar + content. No HTML restructuring: `body` itself becomes the frame (position: relative makes it the containing block every existing absolutely-positioned child already assumed), so #map, #rail, #topbar etc. need only new coordinates, not new markup. Desktop only (min-width 900px) per the agreed scope — this board is not used on mobile or tablet. =========================================================================== */ /* The UA rule for [hidden] is only `display: none` at specificity 0-1-0, so any author rule that sets `display` (#topbar and .login-overlay both set flex) silently beats it. Without this, `el.hidden = true` updates the property but leaves the element on screen — which made a *successful* login still show the password box, indistinguishable from a rejected password. */ [hidden] { display: none !important; } body { position: relative; width: min(1760px, calc(100% - 48px)); height: calc(100vh - 48px); min-height: 0; margin: 24px auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-shell); background: var(--frame); box-shadow: 0 8px 24px rgb(31 41 55 / 8%); } /* --- Sidebar: the zone rail, restyled to the Parking Survey admin-sidebar pattern. Collapse is re-themed but still binary (hide/show) rather than the true icon-rail-with-sector-chips the spec describes — that needs a UX call on what a collapsed chip does (jump to sector? filter it?) that hasn't been made, so it is deferred rather than invented here. --- */ #rail { position: absolute; top: calc(var(--topbar-h) + var(--legend-h)); left: 0; bottom: 0; width: var(--rail-w); z-index: 6; background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); overflow-y: auto; padding: 16px 12px; font-size: 13px; transition: width .15s; } body.rail-collapsed #rail { width: 0; padding: 0; overflow: hidden; border: 0; } body.rail-collapsed #map, body.rail-collapsed #alert-banner { left: 0; } body.rail-collapsed #legend-strip { left: 0; } /* "Every control needs a persistent visible label; placeholders are examples, not labels" — the label lives in index.html as a real