/* ========================================================================== MONITOR — Flight Dispatch Center Design language: a dispatch desk at night. Dark by function (control-room glare control), not by trend — with an accent language borrowed from runway/annunciator lighting rather than generic UI blue. ========================================================================== */ /* Font tags (with preconnect) live in base.html's — a CSS @import here would block this whole stylesheet on that fetch instead of letting the browser discover and load fonts in parallel with CSS. */ :root { /* -- palette -- */ --ink: #060B0F; /* base background */ --panel: #0D1518; /* card / panel surface */ --panel-alt: #101B1E; /* recessed surface */ --border: #1B2B2E; --text: #E7F1EE; --text-muted: #7C9490; --text-faint: #718A85; --accent: #2DD4BF; /* deep teal — brand / interactive, glass glow */ --accent-dim: rgba(45, 212, 191, .14); --ok: #3DDC84; /* runway green — nominal / online */ --warn: #F5B023; /* taxiway amber — ready (<35 min) */ --urgent: #F2751F; /* beacon orange — urgent (<20 min) */ --crit: #E5484D; /* strobe red — critical (<10 min) */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-scale: 1; /* 4px-grid spacing scale - not applied retroactively everywhere in this pass (that's real, page-by-page work), but every new/touched rule going forward should pull from this instead of a fresh hand-picked value, which is how spacing drifted in the first place. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Elevation scale, derived from the shadow values already in real use across cards/panels/modals (not invented) - just named and consolidated so new surfaces pick one of these instead of a fresh hand-tuned blur/spread. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow-md: 0 6px 22px rgba(0, 0, 0, .16); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .4); --shadow-xl: 0 24px 60px rgba(0, 0, 0, .35); /* Transition durations - existing usage already clustered in this 150-250ms range (matches "subtle, premium, not flashy"); this just gives it a name so it stops drifting between .2s/220ms/.25s for effectively the same intent. */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 250ms ease; /* translucent "glass" surfaces (sidebar, topbar chips, cards, panels) sit over the radial-gradient body background — these must repaint per theme too, so they're variables rather than a bare rgba() literal. */ --glass: rgba(13, 21, 24, .6); --glass-strong: rgba(13, 21, 24, .72); --native-scheme: dark; } :root[data-theme="light"] { --ink: #F3F7F6; --panel: #FFFFFF; --panel-alt: #EEF3F2; --border: #D6E2E0; --text: #0E1B1A; --text-muted: #5B6D6A; --text-faint: #647873; --accent: #0D9488; --accent-dim: rgba(13, 148, 136, .12); --glass: rgba(255, 255, 255, .82); --glass-strong: rgba(255, 255, 255, .92); --native-scheme: light; } * { box-sizing: border-box; } /* Global native checkbox/radio theming - without this, every plain renders with the browser's default (OS) accent color (blue on most platforms), clashing with this theme's teal accent. Confirmed via screenshot: Settings' "Dispatch Alert Sound" toggle rendered as a stock blue checkbox against this dark teal-accented design. .fdc-popover-chip already did this locally; this makes it universal so no checkbox/radio anywhere is missed. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* ============ FORM CONTROL / BUTTON BASELINE ============ Design-system pass: this codebase already has a consistent visual language for form controls (.search, .auth-field input/select) and buttons (.btn-ghost, .btn-filter, .auth-btn) - the SAME background/ border/radius/color/focus values, just each hand-copied onto its own purpose-named class rather than a shared base. Anything not given one of those specific classes (several controls added during tonight's own work included) fell through to the browser's default white/native styling, which is what read as "unfinished" against the dark theme. These base rules extend the SAME established values to every plain input/select/textarea/button by default; the specific classes above still apply on top for their own sizing/context and are unaffected. */ /* Deliberately BARE element selectors here (specificity 0,0,1) - not :not([type=...]) exclusions, which would each add attribute-selector specificity and end up MORE specific than the existing single-class rules (.search is 0,1,0; .auth-field input is 0,1,1), overriding their padding/font-size instead of yielding to them. A bare selector is guaranteed lower specificity than any class-based rule, so this only ever fills gaps, never fights an existing, more deliberate style. Checkbox/radio picking up background/padding/border-radius here is a no-op in every mainstream browser (native checkbox/radio rendering ignores box-model styling), so no exclusion is needed for them. */ input, select, textarea { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font-size: calc(13px * var(--font-scale, 1)); font-family: var(--font-sans); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Global fallback so every interactive element (nav links, icon buttons, the profile trigger, plain tags, etc.) gets the same visible teal ring on keyboard focus instead of each browser's inconsistent default (blue in Chrome, often invisible against dark surfaces in others). More specific :focus-visible rules elsewhere in this file (inputs, toggles, etc.) still win via specificity/order where they differ. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input[type="file"] { padding: 6px; font-size: calc(12.5px * var(--font-scale, 1)); color: var(--text-muted); } input[type="file"]::file-selector-button { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 6px 12px; font-size: calc(12px * var(--font-scale, 1)); font-family: var(--font-sans); cursor: pointer; margin-right: 10px; } input[type="file"]::file-selector-button:hover { border-color: var(--accent); } button, .btn-ghost, .btn-filter, .auth-btn, .btn-preview, .btn-approve { font-family: var(--font-sans); } button:not(.icon-btn):not(.wx-icon-btn):not([class*="btn-"]):not([class*="auth-btn"]) { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 14px; font-size: calc(12.5px * var(--font-scale, 1)); cursor: pointer; } button:not(.icon-btn):not(.wx-icon-btn):not([class*="btn-"]):not([class*="auth-btn"]):hover { border-color: var(--accent); } /* Disabled + active states - previously undefined anywhere in this stylesheet, so a disabled control looked identical to an enabled one (one single spot, _fdc_profile_popover.html, patched this itself via inline JS-set opacity; nowhere else had any treatment at all). */ button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .45; cursor: not-allowed; filter: none; } button:not(:disabled):active { transform: translateY(1px); } /* Form-UX audit: only the CONTROL dimmed on disable, never its label - a bright label sitting directly over a ghosted-out input (e.g. Settings' "Use my saved admin credentials" toggling the username/password fields off) read as a rendering glitch rather than an intentional state. Dims the whole field group together instead. */ .auth-field:has(input:disabled) label { opacity: .45; } /* Dark-themed scrollbars everywhere - previously undefined anywhere in this file, so every scrollable area (page body, .widget-list-scroll, any overflow:auto table wrapper) showed the browser's bright native scrollbar, jarring against this dark theme. Applies globally via `*` rather than to specific containers one at a time, since new scrollable areas are added throughout the app regularly (this session alone added several) and shouldn't each need to remember to opt in. */ * { scrollbar-width: thin; scrollbar-color: var(--border) var(--panel-alt); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--panel-alt); } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 2px solid var(--panel-alt); } *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } *::-webkit-scrollbar-corner { background: var(--panel-alt); } html, body { margin: 0; padding: 0; height: 100%; /* The page itself never scrolls - .content below is the one real scroll container. This is the actual "GitHub/Linear/Vercel app shell" pattern: sidebar and topbar simply sit outside the scrolling area entirely, so there's no position:sticky edge case to fight (a sticky element riding along a single page-level scroll needs its containing block's height to exactly match the content it's next to, which broke twice in a row here). Nothing needs to "follow" scroll if it was never part of what scrolls. */ overflow: hidden; background: radial-gradient(1100px 520px at 82% -8%, rgba(45, 212, 191, .10), transparent 60%), radial-gradient(700px 420px at -6% 12%, rgba(45, 212, 191, .06), transparent 55%), var(--ink); background-attachment: fixed; color: var(--text); font-family: var(--font-sans); font-size: calc(14px * var(--font-scale, 1)); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } a { color: inherit; } /* ============ SHELL / LAYOUT ============ */ .shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; /* Exact height, not min-height: html/body no longer scroll at all (see above), so .shell must never grow taller than the viewport - .content is the one element that scrolls, internally, below. Sidebar and topbar simply sit outside that scrolling area, so they're always visible with no sticky-positioning math involved at all. User-configurable text size (Settings → Appearance) is applied per declaration via font-size: calc(Npx * var(--font-scale, 1)) on every font-size in this file (see the rest of the stylesheet) — NOT via zoom, which used to scale spacing/layout/cards/buttons along with text. At --font-scale: 1 every value below is byte-identical to its original px size. */ } .sidebar { background: var(--glass-strong); backdrop-filter: blur(14px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 16px; /* Fills its grid cell exactly (.shell is exactly 100vh, single row) and never moves - no position:sticky needed since it was never part of any scrolling content to begin with. overflow-y:auto is the one remaining case: if the sidebar's own content (nav items, notifications) ever exceeds one viewport's worth, IT scrolls internally instead of the page needing to. */ height: 100%; overflow-y: auto; } .brand { padding: 0 8px 22px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .brand-mark { font-family: var(--font-mono); font-weight: 700; font-size: calc(20px * var(--font-scale, 1)); letter-spacing: 2px; color: var(--text); } .brand-sub { font-size: calc(10.5px * var(--font-scale, 1)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-size: calc(13.5px * var(--font-scale, 1)); cursor: pointer; } .nav-badge { margin-left: auto; background: var(--warn); color: #1a1206; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: var(--radius-pill); min-width: 16px; text-align: center; } .nav-item.active .nav-badge { background: var(--crit); color: #fff; } .nav-item .nav-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; } .nav-item .nav-icon .icon-fill { fill: currentColor; stroke: none; } .nav-item:hover { background: var(--panel-alt); color: var(--text); } .nav-item.active { background: var(--panel-alt); color: var(--text); } .nav-item.active .nav-icon { stroke: var(--accent); color: var(--accent); opacity: 1; filter: drop-shadow(0 0 4px rgba(45,212,191,.6)); } .sidebar-foot { border-top: 1px solid var(--border); padding-top: 14px; display: flex; align-items: center; justify-content: space-between; } .who-name { font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; /* Real contrast bug: this sits inside a