/* ===== Design system refresh (2026-08-09) ===== Modern-SaaS-dashboard pass (Linear/Stripe/Vercel-style polish) over the existing dark theme -- richer contrast between bg/panel layers, a proper elevation scale (shadow tokens) instead of borders doing all the separation work, softer/larger corner radii, an accent that reads as a real brand color (with a hover/active ramp) rather than a flat single blue, and consistent transition timing so hover/active states feel considered rather than instant. Deliberately keeps every existing CSS variable name (--bg/--panel/--text/etc.) so none of the ~20 page-specific stylesheets/inline styles that reference them need to change -- this is a token-value change, not a token-schema change. */ :root { --bg: #0b0d12; --panel: #12151d; --panel2: #1a1e29; --panel3: #232838; --border: #262b3a; --border-strong: #333a4d; --text: #eef0f4; --muted: #8b93a6; --muted-2: #5f6779; --accent: #5b8cff; --accent-hover: #6f9aff; --accent-active: #4a78e6; --accent-soft: rgba(91,140,255,.12); --green: #3fd97f; --red: #f85149; --amber: #e3a53a; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(0,0,0,.24); --shadow: 0 4px 16px rgba(0,0,0,.28); --shadow-lg: 0 12px 32px rgba(0,0,0,.4); --ease: cubic-bezier(.4,0,.2,1); --transition-fast: 120ms var(--ease); --transition: 180ms var(--ease); } /* DASH-CONSOLE-FORENSIC-AUDIT-001 Dark + Light themes (2026-08-17, revised same day -- Night replaced with Light per explicit correction). :root above IS the Dark theme (the existing default, unchanged) -- Light is a second token block overriding the SAME variable names via [data-theme="light"] on , not a duplicate component system. A real light palette (white/near-white surfaces, dark text, deepened accent/status colors for contrast on white), not just an inverted dark theme. */ :root[data-theme="light"] { --bg: #f5f6f8; --panel: #ffffff; --panel2: #eef0f3; --panel3: #e2e5ea; --border: #dde1e7; --border-strong: #c5cbd3; --text: #1a1d24; --muted: #5f6779; --muted-2: #8b93a6; --accent: #3b6fe0; --accent-hover: #578dff; --accent-active: #2f5bc4; --accent-soft: rgba(59,111,224,.10); --green: #1f9d55; --red: #d92d20; --amber: #b7791f; } * { box-sizing: border-box; } html, body { height: 100%; } /* DASH-CONSOLE-FORENSIC-AUDIT-001 responsive fix (2026-08-17): defense- in-depth safety net -- body already has overflow:hidden (below), but real headless Chromium at 375px still found document.documentElement itself 8px wider than the viewport (a help-tooltip disclosure panel's own content width, unrelated to this pass's own changes). Explicit here rather than relying on it being an accidental side effect of body's own rule. */ html { overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* App-shell layout: header row (fixed height) + a flex row filling the rest of the viewport (.shell-body, holding sidebar + main). Only main scrolls -- see .shell-body main below. Matches the fixed-shell/ independently-scrolling-workspace pattern of claude.ai/ChatGPT/ Linear/GitHub/Cursor, not a sticky-position approximation of it. */ display: flex; flex-direction: column; height: 100vh; overflow: hidden; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-hover); } /* Slim, theme-matched scrollbars -- default browser scrollbars are the single biggest "this doesn't look like a real product" tell on a dark UI. Firefox + WebKit both covered. */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius); border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } header.topbar { display: flex; align-items: center; gap: 4px; height: 56px; flex-shrink: 0; box-sizing: border-box; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 100; /* No position:sticky/fixed needed -- the app-shell (html/body height:100%, body overflow:hidden, see below) means the header is simply never inside any scrolling context, the same structural approach claude.ai/ChatGPT/Linear use rather than a sticky-position trick. */ } .shell-sidebar-toggle { background: none; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; margin-right: 4px; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .shell-sidebar-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--panel2); } header.topbar .brand { font-weight: 700; letter-spacing: -.01em; margin-right: 24px; color: var(--text); } .nav-status { font-size: 12px; font-weight: 500; color: var(--text); background: var(--panel2); border: 1px solid var(--border); padding: 4px 11px; border-radius: 999px; margin-right: 16px; white-space: nowrap; } /* Global Factory control (2026-08-07) -- moved off Live Factory into the shared shell so Start/Pause/Resume/Stop/Emergency Stop are reachable from any page, same dropdown-on-click / close-on-outside-click pattern the notification bell already established. */ .shell-factory-control { position: relative; margin-right: 16px; display: flex; align-items: center; gap: 8px; } .factory-status-btn { font-size: 12px; font-weight: 500; color: var(--text); background: var(--panel2); border: 1px solid var(--border); padding: 4px 11px; border-radius: 999px; white-space: nowrap; cursor: pointer; font-family: inherit; transition: border-color var(--transition-fast), background var(--transition-fast); } .factory-status-btn:hover { border-color: var(--border-strong); background: var(--panel3); } /* 2026-08-10: Start/Stop, Pause/Resume, Restart as always-visible icon buttons directly in the top bar -- same "directly clickable, not hidden behind an extra click" affordance as the notification bell next to it, per explicit operator request. Emergency Stop stays out of this row on purpose (still reachable from the dropdown only). */ .shell-factory-actions { display: flex; align-items: center; gap: 4px; } .factory-action-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-family: inherit; padding: 0; transition: border-color var(--transition-fast), background var(--transition-fast); } .factory-action-icon:hover:not(:disabled) { border-color: var(--border-strong); background: var(--panel3); } .factory-action-icon:disabled { opacity: .35; cursor: default; } .factory-dropdown { position: absolute; top: 100%; left: 0; margin-top: 8px; width: 280px; background: var(--panel2); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; font-size: 13px; padding: 12px; animation: dropdown-in .16s var(--ease); } @keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .factory-dropdown, .notif-dropdown { animation: none; } } .factory-dropdown .fd-summary { font-size: 12px; color: var(--muted); margin-bottom: 10px; } .factory-dropdown .fd-restart-progress { font-size: 12px; color: var(--accent, #4a90d9); margin-bottom: 10px; } .factory-dropdown .fd-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .factory-dropdown .fd-actions .btn { font-size: 12px; padding: 5px 10px; } .factory-dropdown .fd-viewonly { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; margin-bottom: 10px; } .factory-dropdown .fd-links { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; } .factory-dropdown .fd-links a { font-size: 12px; } /* DASH-CONTROL-CENTER-IMPL-001 (2026-08-17): fleet dispatch section in the same top-menu dropdown, visually separated from local Factory controls above it -- same fd-summary/fd-actions look, own top border. */ .factory-dropdown .fd-fleet-section { border-top: 1px solid var(--border); padding-top: 8px; margin-bottom: 10px; } .factory-dropdown .fd-fleet-section .fd-summary { margin-bottom: 6px; } .factory-dropdown .fd-fleet-section .fd-actions { margin-bottom: 0; } /* Notification Center bell (Phase 26.1 Sprint 3) */ .shell-bell { position: relative; margin-right: 16px; cursor: pointer; font-size: 18px; user-select: none; } .shell-bell .notif-badge { position: absolute; top: -6px; right: -8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 10px; min-width: 14px; text-align: center; } .notif-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 320px; background: var(--panel2); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; font-size: 13px; animation: dropdown-in .16s var(--ease); } .notif-dropdown .notif-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; } .notif-dropdown .notif-item:last-child { border-bottom: none; } .notif-dropdown .notif-item:hover { background: var(--panel2); } .notif-dropdown .notif-title { font-weight: 600; } .notif-dropdown .notif-time { color: var(--muted); font-size: 11px; } .notif-dropdown .notif-empty { padding: 14px 12px; color: var(--muted); text-align: center; } .notif-dropdown .notif-footer { padding: 8px 12px; text-align: center; border-top: 1px solid var(--border); } .notif-dropdown .notif-footer a { font-size: 12px; } .notif-unread-row { font-weight: 600; } .notif-unread-row td:first-child { color: var(--red); } header.topbar nav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 13px; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); } header.topbar nav a:hover { background: var(--panel2); color: var(--text); } header.topbar nav a.active { background: var(--accent-soft); color: var(--accent); } main { padding: 18px 24px; max-width: 1400px; margin: 0 auto; } .breadcrumb { font-size: 12px; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; } .breadcrumb .bc-sep { color: var(--border); } .breadcrumb .bc-current { color: var(--text); font-weight: 600; } /* ===== App Shell (Operations Console V1, 2026-07-24) ===== Sidebar + header shell, injected at runtime by app.js:injectShell() from one canonical NAV_ITEMS list -- replaces the old per-page hardcoded header.topbar