/* * Arrow Fresh Operations Hub - stylesheet. * * THE REPORTING CENTRE'S CHROME, VERBATIM (17 September 2026). Tokens, * type, the sidebar, the head, cards, the account menu, the segmented * control and the scrollbar are the Reporting Centre's own rules * (web/public/css/app.css), under the same class names, so a reader moving * between the two sites through the sidebar link sees one product. The hub * keeps its warm light palette (the Reporting Centre serves dark only); * dark is the Reporting Centre's dark, value for value. * * The hub's older token names (--ground, --ink, --line ...) are kept as * aliases of the Reporting Centre's names so the sign-in screen and the * reserved patterns below need no rewrite. * * Structure, in order: * 1. Theme tokens (light, then dark under the OS setting and the explicit choice) * 2. Base and focus * 3. Shell: sidebar and main * 4. Sidebar: brand, nav groups, account menu, burger * 5. Main: head, cards, states, controls * 6. Reserved: tiles, tables, pills, dispatch entry (unchanged, aliased) * 7. Auth screens * 8. Narrow screens: the sidebar is a drawer * 9. Scrollbar */ /* ================================================================== * * 1. THEME TOKENS * * One attribute on : data-theme="light", data-theme="dark", or * nothing, which means "follow the OS". Light is the base; dark is * declared twice, once under the OS media query guarded so an explicit * light wins, and once under an explicit dark. js/theme.js sets the * attribute and nothing else. * ================================================================== */ :root { color-scheme: light; --surface-page: #F6F8F5; --surface-card: #FFFFFF; --surface-sunken: #EFF2EE; --surface-raised: #EFF2EE; --border-subtle: #E0E5DE; --border-strong: #C9D1C7; --text-primary: #15191A; --text-secondary: #4B5551; --text-tertiary: #66716d; --text-on-accent: #FFFFFF; --accent: #2e63c9; --accent-hover: #2554ad; --accent-subtle: color-mix(in srgb, var(--accent) 10%, transparent); --negative: #983029; --warning: #9C5B08; --neutral: #6A736F; --negative-subtle: color-mix(in srgb, var(--negative) 10%, transparent); --warning-subtle: #FBEEDC; --neutral-subtle: #ECEFEB; --scrollbar-thumb: #707274; --scrollbar-thumb-hover: #525456; --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04); --elevation-overlay: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12); --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --nav-inset: 16px; --content-max: 1500px; --sidebar-width: 244px; --motion-fast: 150ms; --motion-base: 200ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --sans: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* The hub's own names, as aliases. */ --ground: var(--surface-page); --surface: var(--surface-card); --surface-sunk: var(--surface-sunken); --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-3: var(--text-tertiary); --line: var(--border-subtle); --line-strong: var(--border-strong); --accent-ink: var(--text-on-accent); --accent-soft: var(--accent-subtle); --crit: var(--negative); --crit-soft: var(--negative-subtle); --warn: var(--warning); --warn-soft: var(--warning-subtle); --idle: var(--neutral); --idle-soft: var(--neutral-subtle); } /* The Reporting Centre's served dark palette, value for value. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-page: #101010; --surface-card: #1c1c1a; --surface-sunken: #0a0a09; --surface-raised: #272725; --border-subtle: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); --text-primary: #f7f7f5; --text-secondary: #c2c1b9; --text-tertiary: #9b9a91; --text-on-accent: #101010; --accent: #4f95ea; --accent-hover: #6ba8f0; --accent-subtle: color-mix(in srgb, var(--accent) 16%, transparent); --negative: #f07a76; --warning: #f0b429; --neutral: #94938a; --negative-subtle: color-mix(in srgb, var(--negative) 14%, transparent); --warning-subtle: color-mix(in srgb, var(--warning) 16%, transparent); --neutral-subtle: color-mix(in srgb, var(--neutral) 14%, transparent); --scrollbar-thumb: #727270; --scrollbar-thumb-hover: #8e8e8c; --elevation-1: none; --elevation-overlay: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { color-scheme: dark; --surface-page: #101010; --surface-card: #1c1c1a; --surface-sunken: #0a0a09; --surface-raised: #272725; --border-subtle: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); --text-primary: #f7f7f5; --text-secondary: #c2c1b9; --text-tertiary: #9b9a91; --text-on-accent: #101010; --accent: #4f95ea; --accent-hover: #6ba8f0; --accent-subtle: color-mix(in srgb, var(--accent) 16%, transparent); --negative: #f07a76; --warning: #f0b429; --neutral: #94938a; --negative-subtle: color-mix(in srgb, var(--negative) 14%, transparent); --warning-subtle: color-mix(in srgb, var(--warning) 16%, transparent); --neutral-subtle: color-mix(in srgb, var(--neutral) 14%, transparent); --scrollbar-thumb: #727270; --scrollbar-thumb-hover: #8e8e8c; --elevation-1: none; --elevation-overlay: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.55); } /* ================================================================== * * 2. BASE AND FOCUS * ================================================================== */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ================================================================== * * 3. SHELL * ================================================================== */ .shell { min-height: 100vh; } .main { margin-left: var(--sidebar-width); min-width: 0; padding: 0 0 var(--space-7); } body.nav-closed .main { margin-left: 0; } @media (prefers-reduced-motion: no-preference) { .main { transition: margin-left 0.18s ease; } .sidebar { transition: transform 0.18s ease; } } .main-col { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6); } .main-col--head { padding-top: var(--space-5); } /* ================================================================== * * 4. SIDEBAR * ================================================================== */ .sidebar { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) 0; background: var(--surface-card); border-right: 1px solid var(--border-subtle); position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); z-index: 70; overflow-y: auto; overscroll-behavior: contain; } body.nav-closed .sidebar { transform: translateX(-100%); visibility: hidden; } .burger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; margin-left: -6px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; } .burger:hover { background: var(--surface-raised); border-color: var(--border-subtle); } .burger-bars, .burger-bars::before, .burger-bars::after { display: block; width: 17px; height: 1.5px; background: var(--text-secondary); border-radius: 1px; } .burger-bars { position: relative; } .burger-bars::before, .burger-bars::after { content: ''; position: absolute; left: 0; } .burger-bars::before { top: -5.5px; } .burger-bars::after { top: 5.5px; } .nav-backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: color-mix(in srgb, #000 50%, transparent); } /* The identity is typographic. There is no logo mark, by design. */ .sidebar-brand { padding: 0 var(--space-4); } .auth-brand { padding: 0; } .brand-name { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; } .brand-sub { margin-top: 1px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } .nav-groups { position: relative; display: flex; flex-direction: column; flex: 1 0 auto; gap: var(--space-4); } .nav-group { display: grid; gap: 2px; } .nav-group-label { padding-inline: var(--nav-inset); margin-bottom: var(--space-1); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } .nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; } /* Full-bleed rows, no radius: the current one is a 3px accent bar on the leading edge and a tint, exactly as on the Reporting Centre. */ .nav-link { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-4); border-left: 3px solid transparent; font-size: 14.5px; color: var(--text-secondary); text-decoration: none; } .nav-link:hover { background: var(--surface-raised); color: var(--text-primary); } .nav-link.is-current { color: var(--text-primary); font-weight: 600; background: var(--accent-subtle); border-left-color: var(--accent); } .nav-link.is-current:hover { background: var(--accent-subtle); } .nav-soon { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.02em; } .nav-ext { margin-left: auto; color: var(--text-tertiary); display: grid; } .nav-ext svg { width: 12px; height: 12px; } .sidebar-foot { display: grid; gap: var(--space-2); margin: 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); } .user-trigger { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: var(--space-2); text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; } .user-trigger:hover, .user-trigger[aria-expanded="true"] { background: var(--surface-raised); border-color: var(--border-subtle); color: var(--text-primary); } .user-trigger-text { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-trigger .chev { margin: 0; color: var(--text-tertiary); } .user-trigger[aria-expanded="true"] .chev { transform: rotate(45deg); margin-top: 0; margin-bottom: 2px; } .user-menu { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .user-menu-identity { padding: var(--space-1) var(--space-2) 0; } .user-menu-item { width: 100%; min-height: 34px; padding: var(--space-2); text-align: left; font-size: 13px; color: var(--text-primary); background: none; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-xs) var(--radius-xs); cursor: pointer; } .user-menu-item:hover { background: var(--surface-card); } .user-menu-item--signout:hover { color: var(--negative); } .account-email { font-size: 12px; color: var(--text-primary); overflow-wrap: anywhere; } .account-role { font-size: 12px; color: var(--text-tertiary); text-transform: capitalize; } .chev { display: inline-block; flex: none; width: 6px; height: 6px; margin-bottom: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); color: var(--text-tertiary); } .chev--up { margin-bottom: 0; margin-top: 3px; transform: rotate(-135deg); } .chev--tiny { width: 4px; height: 4px; border-width: 1.25px; } /* ================================================================== * * 5. MAIN: HEAD, CARDS, STATES, CONTROLS * ================================================================== */ .main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .main-head-left { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; } .main-head-left .burger { margin-top: -3px; margin-left: -10px; } .main-head-titles { min-width: 0; } .section-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .data-stamp { margin-top: var(--space-1); font-size: 11.5px; color: var(--text-tertiary); } .section-body { display: grid; gap: var(--space-5); } .section-body > * { min-width: 0; } .card { padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--elevation-1); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); } .card-title { font-size: 15px; font-weight: 600; } .card-subtitle { margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); } .state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .state-title { font-weight: 600; } .state-detail { max-width: 46ch; color: var(--text-secondary); font-size: 13px; } /* Preferences: one row per setting, the control on the right. */ .pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .pref-t { font-weight: 600; font-size: 14px; } .pref-s { margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); max-width: 56ch; } /* The Reporting Centre's segmented control. */ .measure-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .measure-option { padding: 4px 11px; font-size: 12px; white-space: nowrap; background: none; border: 0; border-radius: var(--radius-xs); color: var(--text-secondary); cursor: pointer; } .measure-option:hover { background: var(--surface-card); color: var(--text-primary); } .measure-option.is-active { background: var(--surface-card); color: var(--text-primary); font-weight: 600; box-shadow: var(--elevation-1); } /* ================================================================== * * 6. RESERVED * * Nothing below this line is used by a route yet. It is the prototype's * styling for the screens the routes will become: stat tiles, the stock * table, state pills, and the keyboard-first dispatch entry. Kept so the * built screens use these patterns rather than new ones. * ================================================================== */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 15px 16px; display: flex; flex-direction: column; gap: 5px; } .tile .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .tile .v { font-family: var(--mono); font-size: 25px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tile .s { font-size: 12px; color: var(--ink-3); } .scroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 600px; } th { text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); } td { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: baseline; } tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--surface-sunk); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .code { font-family: var(--mono); font-size: 12px; color: var(--ink-2); } .nm { font-weight: 500; } .unit { font-size: 11.5px; color: var(--ink-3); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .p-ok { background: var(--accent-soft); color: var(--accent); } .p-warn { background: var(--warn-soft); color: var(--warn); } .p-crit { background: var(--crit-soft); color: var(--crit); } .p-idle { background: var(--idle-soft); color: var(--idle); } .cover { display: flex; align-items: center; gap: 9px; justify-content: flex-end; } .bar { width: 54px; height: 5px; border-radius: 99px; background: var(--surface-sunk); overflow: hidden; flex: none; } .bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); } .bar.w i { background: var(--warn); } .bar.c i { background: var(--crit); } .status-list { display: flex; flex-direction: column; } .status-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; border-bottom: 1px solid var(--line); } .status-row:last-child { border-bottom: 0; } .status-row .sr-t { font-weight: 600; font-size: 13px; } .status-row .sr-d { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; max-width: 66ch; } .status-row .sr-p { margin-left: auto; flex: none; } /* Dispatch entry: code box, quantity, autocomplete, the lines footer. */ .entry { display: grid; grid-template-columns: 1fr 128px; gap: 10px; align-items: start; } .field { display: flex; flex-direction: column; gap: 5px; position: relative; } .field label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } input, select { font: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; padding: 9px 11px; width: 100%; } input[type="number"] { font-family: var(--mono); text-align: right; } .input--code { font-family: var(--mono); } .ac { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 10px 28px rgba(10, 20, 16, .13); z-index: 20; max-height: 236px; overflow-y: auto; } .ac button { display: flex; gap: 11px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; cursor: pointer; align-items: baseline; border-bottom: 1px solid var(--line); } .ac button:last-child { border-bottom: 0; } .ac button:hover, .ac button.on { background: var(--accent-soft); } .ac .c { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 500; flex: none; width: 170px; } .ac .n { font-size: 13px; flex: 1; min-width: 0; } .ac .u { font-size: 11px; color: var(--ink-3); flex: none; } .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 9px; } kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-sunk); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; } .lines-foot { display: flex; gap: 22px; align-items: baseline; padding: 13px 16px; border-top: 1px solid var(--line); background: var(--surface-sunk); flex-wrap: wrap; } .lines-foot .k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .lines-foot .v { font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } .lines-foot .spacer { flex: 1; } .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 7px; padding: 9px 17px; font-weight: 600; font-size: 13px; cursor: pointer; } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn--block { width: 100%; } .btn-q { background: none; border: 1px solid var(--line-strong); color: var(--ink-2); border-radius: 6px; padding: 4px 9px; font-size: 11.5px; cursor: pointer; } .btn-q:hover { color: var(--ink); border-color: var(--line-strong); } .btn-q--danger:hover { color: var(--crit); border-color: var(--crit); } .link-btn { background: none; border: 0; padding: 0; color: var(--ink-2); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .link-btn:hover { color: var(--ink); } /* ================================================================== * * 7. AUTH SCREENS * * Nothing but one of these is visible until Firebase reports a signed-in * user. A single panel on the ground colour, built from the prototype's * field and button styles. * ================================================================== */ .auth { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; } .auth-panel { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; } .auth-panel .sidebar-brand { padding: 0 0 14px; } .auth-panel h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; } .auth-lead { margin: 0; font-size: 13px; color: var(--ink-2); } .auth-form { display: flex; flex-direction: column; gap: 12px; } .form-error { margin: 0; font-size: 12.5px; color: var(--crit); background: var(--crit-soft); padding: 8px 11px; border-radius: 6px; } .form-notice { margin: 0; font-size: 12.5px; color: var(--accent); background: var(--accent-soft); padding: 8px 11px; border-radius: 6px; } .auth-foot { margin: 0; font-size: 11.5px; color: var(--ink-3); } .auth-actions { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; } /* A spinner drawn in CSS: the boot screen between sign-in and the shell. */ .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ================================================================== * * 8. NARROW SCREENS: THE SIDEBAR IS A DRAWER * * Under 860px the sidebar starts closed and the burger opens it over the * content, with a backdrop that closes it, exactly as on the Reporting * Centre. The open/closed preference is only remembered on wide screens. * ================================================================== */ @media (max-width: 860px) { .main, body.nav-closed .main { margin-left: 0; } .main-col { padding-inline: var(--space-4); } body:not(.nav-closed) .nav-backdrop { display: block; } .entry { grid-template-columns: 1fr; } .ac .c { width: 120px; } } /* ================================================================== * * 9. SCROLLBAR - the Reporting Centre's: thin, always visible, no arrows. * ================================================================== */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } @supports selector(::-webkit-scrollbar) { * { scrollbar-width: auto; scrollbar-color: auto; } } ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-corner { background: transparent; }