/* * REx OS — "Gotham" design system. * * Dual-theme industrial terminal. Deep blue-black canvas, one burnt-orange * signal, Atkinson Hyperlegible Next (headings + UI + prose) and Atkinson * Hyperlegible Mono (all data, IDs, dates, counts, statuses, labels). NO * serif. Brutalist-flat: 0px corners, 1px * hairlines, zero shadows. Depth is tonal layering + hairlines, never elevation. * * Theme is switched with [data-theme] on : dark is the default (bare * :root), light overrides via [data-theme="light"]. "System" is a stored * preference (default) that resolves to one of the two before paint (see the * inline boot script in the layout head). * * Single stylesheet, served as-is by Propshaft. It defines every design token * as a CSS custom property under BOTH the Gotham names and the token names the * existing REx views/components already reference — so the same class names * inherit the new look without markup churn. The retired standard/ + billet/ * trees are gone; nothing here relies on @layer ordering. */ /* ============================================================ Fonts — self-hosted from app/assets/fonts (no CDN). Atkinson Hyperlegible variable fonts: one file each covers weights 200–800. Propshaft rewrites the url()s to digested asset paths. ============================================================ */ @font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/AtkinsonHyperlegibleNext-Variable-264aa1e2.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/assets/AtkinsonHyperlegibleMono-Variable-d810906a.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } /* ============================================================ Theme tokens — dark (default / bare :root) and light. Every token is declared under its Gotham name AND every REx component token name that maps to it, so the existing views re-theme automatically. ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* Brand & accent — burnt orange, the ONLY chromatic brand color. */ --accent: #ff7a1a; --accent-hover: #ff8f3d; --accent-deep: #e86200; --accent-deeper: #c25100; --accent-ink: #1a0c00; /* text on an orange fill */ --accent-soft: rgba(255, 122, 26, 0.12); --accent-line: rgba(255, 122, 26, 0.38); /* Surfaces — deep navy-black ramp, tinted toward the brand anchor. */ --canvas: #05080f; /* page background — near-black blue */ --surface: #090d18; /* default panel / nav / card */ --surface-muted: #0d1322; /* table heads, code, alt bands */ --surface-1: #0d1322; --surface-2: #131b2d; /* hover / raised */ --surface-3: #1b2438; /* active / pressed */ /* Hairlines — visible on dark without glowing */ --hairline: #1c2538; --hairline-mid: #2c3850; --hairline-strong: #46587a; /* Text — cool off-white ramp, navy undertone */ --ink: #eef2f9; /* headings, primary text */ --ink-muted: #9aa7c2; /* secondary text, ≥4.5:1 on canvas */ --ink-subtle: #7787a6; /* tertiary, captions, mono labels */ /* Semantic — tuned for dark */ --success: #3ddc84; --success-soft: rgba(61, 220, 132, 0.13); --warning: #f5b942; --warning-soft: rgba(245, 185, 66, 0.13); --error: #ff5c63; --error-soft: rgba(255, 92, 99, 0.13); /* Category palette — data, not decoration (brightened for dark) */ --commerce: #5cb0ff; --marketing: #ff8f6b; --finance: #3ddc84; --infra: #8b9ec0; /* Selection / focus / overlay */ --selection-bg: rgba(255, 122, 26, 0.28); --scrim: rgba(2, 4, 9, 0.72); /* ---- REx component token names, mapped onto the Gotham ramp ---- */ /* Ink primitive stays theme-constant so print reads ink-on-white. */ --color-ink: #0a1426; --color-paper: #ffffff; /* Surfaces */ --color-surface-primary: var(--surface); --color-surface-secondary: var(--surface-1); --color-surface-tertiary: var(--surface-2); --color-surface-inverse: var(--ink); --color-surface-elevated: var(--surface-1); --color-surface-brand: var(--accent); --color-backdrop: var(--scrim); /* Text */ --color-text-primary: var(--ink); --color-text-secondary: var(--ink-muted); --color-text-tertiary: var(--ink-subtle); --color-text-disabled: var(--ink-subtle); --color-text-inverse: var(--canvas); --color-text-link: var(--accent); --color-text-link-hover: var(--accent-hover); /* Borders */ --color-border-primary: var(--hairline); --color-border-secondary: var(--hairline); --color-border-strong: var(--hairline-mid); --color-border-inverse: var(--hairline-strong); /* Interactive / control surfaces */ --color-interactive-subtle: var(--surface-2); --color-interactive-muted: var(--surface-3); --color-control: var(--surface-1); --color-control-hover: var(--surface-2); --color-control-subtle: var(--surface-3); /* Disabled */ --color-disabled-bg: var(--surface-1); --color-disabled-border: var(--hairline); /* Primary action = orange fill (Gotham §6) */ --color-primary: var(--accent); --color-primary-hover: var(--accent-hover); --color-primary-active: var(--accent-deep); --color-primary-text: var(--accent-ink); /* Brand accent */ --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-bg: var(--accent-soft); --color-accent-text: var(--accent-ink); --accent-subtle: var(--accent-soft); /* MIL-SPEC signal semantics → Gotham status ramp (accent is action/selection only; status carries state) */ --color-critical: var(--error); --color-critical-bg: var(--error-soft); --color-alert: var(--accent); --color-alert-bg: var(--accent-soft); --color-warning: var(--warning); --color-warning-bg: var(--warning-soft); --color-nominal: var(--success); --color-nominal-bg: var(--success-soft); --color-info: var(--commerce); --color-info-bg: rgba(92, 176, 255, 0.13); --color-technical: var(--infra); --color-technical-bg: rgba(139, 158, 192, 0.14); /* Signal aliases still referenced by a few vendored rules */ --signal-critical: var(--error); --signal-warning: var(--warning); --signal-nominal: var(--success); --signal-info: var(--commerce); /* No elevation — hairlines carry the edge instead of shadows. */ --shadow-card: none; --shadow-raised: 0 0 0 1px var(--hairline-mid); --shadow-modal: 0 0 0 1px var(--hairline-mid); } [data-theme="light"] { color-scheme: light; /* Burnt orange — deepened so links clear AA on the lightest surface */ --accent: #b35000; --accent-hover: #d96100; --accent-deep: #984500; --accent-deeper: #733400; --accent-ink: #ffffff; --accent-soft: rgba(179, 80, 0, 0.10); --accent-line: rgba(179, 80, 0, 0.32); /* Surfaces — navy-tinted near-whites */ --canvas: #f7f9fc; --surface: #ffffff; --surface-muted: #eef2f8; --surface-1: #eef2f8; --surface-2: #e2e8f2; --surface-3: #d4dce9; --hairline: #d9e0ec; --hairline-mid: #b3bed1; --hairline-strong: #0c1d37; --ink: #0a1426; --ink-muted: #41506b; --ink-subtle: #5c6a86; --success: #1a8f47; --success-soft: rgba(26, 143, 71, 0.10); --warning: #b07c00; --warning-soft: rgba(176, 124, 0, 0.12); --error: #d61f27; --error-soft: rgba(214, 31, 39, 0.09); --commerce: #2b7fd4; --marketing: #d35a3a; --finance: #1a8f47; --infra: #607394; --selection-bg: rgba(179, 80, 0, 0.18); --scrim: rgba(12, 29, 55, 0.5); --color-info-bg: rgba(43, 127, 212, 0.10); --color-technical-bg: rgba(96, 115, 148, 0.12); --shadow-raised: 0 0 0 1px var(--hairline-mid); --shadow-modal: 0 0 0 1px var(--hairline-mid); } /* ============================================================ Non-theme tokens — geometry, spacing, motion, type. Brutalist-flat by mandate: every radius is 0, every shadow none. ============================================================ */ :root { /* Typography — Atkinson Hyperlegible family, no serif */ --font-sans: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif; --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-serif: var(--font-sans); /* no serif in the system */ --sans: var(--font-sans); --mono: var(--font-mono); /* Font sizes — compact console scale (px, fixed DPI) */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px; --text-4xl: 24px; /* h1 is compact in a console */ --text-5xl: 34px; --text-display: 34px; /* Font weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.8; /* Letter spacing */ --tracking-tightest: -0.02em; --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* Spacing — 4px grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Gotham-named spacing aliases */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; /* Geometry — brutalist-flat. Every radius resolves to 0. */ --radius: 0; --radius-none: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 0; --radius-chip: 0; --radius-button: 0; --radius-input: 0; --radius-card: 0; /* Border widths */ --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 3px; /* Icon / avatar sizes */ --icon-xs: 12px; --icon-sm: 14px; --icon-base: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 40px; --avatar-xs: 24px; --avatar-sm: 32px; --avatar-base: 40px; --avatar-md: 48px; --avatar-lg: 64px; --avatar-xl: 80px; /* Layout dimensions */ --sidebar-width: 248px; --header-height: 48px; --container-max: 1600px; --content-max: 960px; /* Component sizing */ --btn-height-xs: 24px; --btn-height-sm: 32px; --btn-height-base: 38px; --btn-height-lg: 44px; --input-height-sm: 30px; --input-height-base: 38px; --input-height-lg: 44px; --card-padding: var(--space-6); --card-padding-compact: var(--space-3); --table-row-height: 44px; --table-row-height-compact: 34px; --table-header-height: 36px; /* Motion — state-conveying, ~120ms, ease-out-quint */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1); --dur: 0.12s; --duration-instant: 0ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 220ms; --duration-slower: 320ms; /* Chat / side panel reveal (transitions-dev tokens the chat controller reads) */ --panel-open-dur: 220ms; --panel-close-dur: 180ms; --panel-translate-x: 24px; --panel-blur: 1px; --panel-ease: var(--ease); /* Z-index scale */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; } /* ============================================================ Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { text-size-adjust: none; -webkit-text-size-adjust: none; background: var(--canvas); } ul, ol { list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } textarea:not([rows]) { min-height: 10em; } table { border-collapse: collapse; border-spacing: 0; } button { cursor: pointer; background: none; border: none; } button:disabled { cursor: not-allowed; } fieldset { border: none; } :target { scroll-margin-block: 5ex; } /* ============================================================ Base elements ============================================================ */ body { min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-regular); line-height: var(--leading-normal); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* App content scrolls inside .app-main, not the document. */ html, .app-main { scroll-behavior: smooth; } /* Theme transition only when explicitly toggling (class set by JS), so navigation and first paint never animate a bulk color swap. */ .theme-animating, .theme-animating * { transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease) !important; } @media (prefers-reduced-motion: reduce) { html, .app-main { scroll-behavior: auto; } .theme-animating, .theme-animating * { transition: none !important; } } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--font-sans); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tightest); } h2 { font-size: var(--text-lg); letter-spacing: var(--tracking-tighter); } h3 { font-size: var(--text-md); letter-spacing: var(--tracking-tight); } h4 { font-size: var(--text-base); } h5 { font-size: var(--text-sm); } h6 { font-size: var(--text-sm); } p { text-wrap: pretty; } small { font-size: var(--text-sm); } strong, b { font-weight: var(--font-semibold); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { padding: 1px 6px; background: var(--surface-1); border: 1px solid var(--hairline); } pre { overflow-x: auto; white-space: pre; } /* Technical figures align: tabular lining numerals wherever quantities, part numbers, and timestamps stack up. This is the terminal voice. */ tbody, code, kbd, samp, pre { font-variant-numeric: tabular-nums slashed-zero; } /* Mono data utility — numbers, IDs, timestamps, counts. */ .mono, .data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ---------- Links ---------- */ a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--accent-hover); } /* ---------- Selection / focus / scrollbars ---------- */ ::selection { background: var(--selection-bg); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--surface-1); } ::-webkit-scrollbar-thumb { background: var(--hairline-mid); border: 2px solid var(--surface-1); } ::-webkit-scrollbar-thumb:hover { background: var(--hairline-strong); } * { scrollbar-width: thin; scrollbar-color: var(--hairline-mid) var(--surface-1); } /* ---------- Tables (mono uppercase heads, hairline rules) ---------- */ table { width: 100%; } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hairline); } .table th { background: var(--surface-muted); color: var(--ink-subtle); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .table td { color: var(--ink-muted); font-variant-numeric: tabular-nums; } /* Links inside data tables read as ink (orange is reserved for action and selection); the accent returns on hover. */ .table td a { color: var(--ink); font-weight: var(--font-medium); } .table td a:hover { color: var(--accent); } .table tbody tr { transition: background var(--dur) var(--ease); } .table tbody tr:hover td { background: var(--surface-2); } .table-compact th, .table-compact td { padding: var(--space-2) var(--space-3); } .table-striped tbody tr:nth-child(even) td { background: var(--surface-1); } .table-flush tbody tr:last-child td { border-bottom: none; } .table tr.is-selected td { background: var(--accent-soft); } /* Right-align numerics in mono tabular figures. */ .text-right { text-align: right; font-variant-numeric: tabular-nums; } /* Table row actions — icon-only Edit/Delete controls with separation. Edit is muted and goes accent on hover; delete reads error-red at rest so it's unmistakable, with an error wash on hover. */ .row-actions { display: inline-flex; align-items: center; gap: var(--space-3); justify-content: flex-end; } /* Qualified with .row-actions so these win over the generic `.table td a` rule (which would otherwise recolor the icons to ink inside table cells). */ .row-actions .icon-link, a.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid transparent; color: var(--ink-subtle); font-weight: var(--font-regular); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .icon-link svg { width: 16px; height: 16px; } .row-actions .icon-link:hover, a.icon-link:hover { color: var(--accent); background: var(--accent-soft); } .icon-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .row-actions .icon-link-danger, a.icon-link-danger { color: var(--error); } .row-actions .icon-link-danger:hover, a.icon-link-danger:hover { color: var(--error); background: var(--error-soft); } .icon-link-danger:focus-visible { outline: 2px solid var(--error); } /* button_to wraps its control in a form; make the form lay out inline so the delete icon sits in the row-actions flow like a plain link. */ .row-actions form.button_to, .row-actions .button_to { display: inline-flex; margin: 0; } .row-actions button.icon-link { background: transparent; } .row-actions button.icon-link:hover { background: var(--accent-soft); } .row-actions button.icon-link-danger:hover { background: var(--error-soft); } th.text-right, td.text-right { text-align: right; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--hairline); } .table-container .table th, .table-container .table td { white-space: nowrap; } .table-container .table .cell-grow { width: 100%; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-card { background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; } /* Dense plant tables: past-due / critical row tint. */ .table tbody tr.is-past-due td, .table tbody tr.is-critical td { background: var(--error-soft); } /* ============================================================ App shell — full-height rail + content column. Internal-scroll frame (the content column owns its overflow), so dense tables never push the nav off-screen. The .is-drawer-open state is toggled by sidebar_controller on smaller screens. ============================================================ */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; } .app-shell-body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* Main content column — THIS is the app's scrollport, not the document. */ .app-main { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-8) var(--space-10); } .app-main > * { max-width: var(--container-max); margin-inline: auto; } /* Unauthenticated view: no chrome, centered. */ body:not(:has(.app-shell)) .app-main { padding: var(--space-6); } /* ---------- Sidebar (command rail) ---------- */ .app-sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--hairline); overflow: hidden; } .app-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--header-height); padding: 0 var(--space-4); border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .app-sidebar-brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; overflow: hidden; color: var(--ink); } .app-sidebar-brand:hover { color: var(--ink); } /* Brand mark — orange square + wordmark. The ::before is the square badge. */ .navbar-logo { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--font-semibold); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } .navbar-logo::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--accent); } .app-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-2); } .sidebar-section { padding: 0; } .sidebar-section + .sidebar-section { margin-top: var(--space-4); } /* Mono uppercase section labels — the spec-sheet voice. */ .sidebar-section-title { margin: 0; padding: var(--space-2) var(--space-3) var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); } /* Nav rows — ink-muted, go ink on hover; active carries the orange rule. */ .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-3); border-left: 2px solid transparent; color: var(--ink-muted); font-size: 13.5px; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Active is a subtle lift off the rail (surface-1) with the orange signal on its text, icon, and left rule — this is the "you are here" cue. Hover is one further step up the ramp (surface-2), so a hover on the row directly below the active one reads as a distinct, lighter block and never blends in. */ .nav-item:hover { background: var(--surface-2); color: var(--ink); } .app-sidebar .nav-item.is-active { background: var(--surface-1); border-left-color: var(--accent); color: var(--accent); } /* Keep the active row's orange signal even while hovered — don't fall back to the plain ink hover text. */ .app-sidebar .nav-item.is-active:hover { background: var(--surface-2); color: var(--accent); } .nav-item-icon { width: var(--icon-base); height: var(--icon-base); flex-shrink: 0; color: var(--ink-subtle); transition: color var(--dur) var(--ease); } .nav-item:hover .nav-item-icon { color: var(--ink); } .app-sidebar .nav-item.is-active .nav-item-icon, .app-sidebar .nav-item.is-active:hover .nav-item-icon { color: var(--accent); } .nav-item-label { flex: 1; } .app-sidebar-foot { flex-shrink: 0; display: grid; gap: 1px; padding: var(--space-2); border-top: 1px solid var(--hairline); } .app-sidebar-signout { width: 100%; justify-content: flex-start; gap: var(--space-3); } /* ---------- Top bar (48px instrument bar) ---------- */ .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--header-height); padding: 0 var(--space-6); background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .app-topbar-lead { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } /* Page context reads as mono — the terminal breadcrumb. */ .app-topbar-title { font-family: var(--font-mono); font-size: 13px; font-weight: var(--font-medium); letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-topbar-user { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .navbar-user-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-muted); white-space: nowrap; } /* The drawer toggle is desktop-hidden; the mobile breakpoint reveals it. */ .app-topbar-menu.btn { display: none; } .app-topbar .btn-icon { min-width: 44px; width: 44px; height: 44px; } .app-shell-backdrop { display: none; } /* ---------- Mobile: sidebar becomes an off-canvas drawer ---------- */ @media (max-width: 900px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: var(--z-modal); border-right: 1px solid var(--hairline-mid); transform: translateX(-100%); visibility: hidden; transition: transform var(--duration-slow) var(--ease-out), visibility var(--duration-slow); } .app-shell.is-drawer-open .app-sidebar { transform: translateX(0); visibility: visible; } .app-shell.is-drawer-open .app-shell-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: var(--z-modal-backdrop); background: var(--scrim); animation: shell-backdrop-in var(--duration-slow) var(--ease-out) both; } @keyframes shell-backdrop-in { from { opacity: 0; } to { opacity: 1; } } .app-topbar-menu.btn { display: inline-flex; } .app-topbar-user { display: none; } } @media (min-width: 901px) { .app-sidebar .app-sidebar-signout { display: none; } } @media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } } /* ============================================================ Page header ============================================================ */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); } .page-title { font-size: var(--text-2xl); font-weight: var(--font-semibold); letter-spacing: var(--tracking-tightest); color: var(--ink); } .page-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .eyebrow { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .text-muted { color: var(--ink-subtle); font-size: var(--text-sm); } /* ============================================================ Buttons — square, 1px border, Atkinson Hyperlegible Next ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-height-base); min-width: 9rem; padding: 0 var(--space-4); border: 1px solid var(--hairline-mid); background: var(--surface-1); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); letter-spacing: 0.005em; line-height: var(--leading-snug); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--hairline-strong); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled, .btn.is-disabled { background: var(--surface-1); border-color: var(--hairline); color: var(--ink-subtle); cursor: not-allowed; } .btn svg, .btn .icon { width: var(--icon-base); height: var(--icon-base); flex-shrink: 0; } /* Primary — the one orange fill. */ .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--font-semibold); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .btn-primary:active { background: var(--accent-deep); border-color: var(--accent-deep); } /* Secondary — steps up the ramp, no accent. */ .btn-secondary { background: var(--surface-2); border-color: var(--hairline-mid); color: var(--ink); } .btn-secondary:hover { background: var(--surface-3); border-color: var(--hairline-strong); } /* Ghost / link-button — transparent, orange label. */ .btn-ghost, .link-button { background: transparent; border-color: transparent; color: var(--accent); } .btn-ghost:hover, .link-button:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); } .btn-outline { background: transparent; border-color: var(--hairline-mid); color: var(--ink); } .btn-outline:hover { background: var(--surface-2); border-color: var(--hairline-strong); } /* Danger — orange-line border, error label; inverts on hover. */ .btn-danger, .btn-critical { background: transparent; border-color: var(--accent-line); color: var(--error); } .btn-danger:hover, .btn-critical:hover { background: var(--error); border-color: var(--error); color: #fff; } /* Signal buttons carry state. */ .btn-nominal { background: var(--success); border-color: var(--success); color: var(--accent-ink); } .btn-warning { background: var(--warning); border-color: var(--warning); color: var(--accent-ink); } .btn-icon { width: var(--btn-height-base); min-width: auto; padding: 0; } .btn-icon.btn-sm { width: var(--btn-height-sm); } .btn-icon.btn-lg { width: var(--btn-height-lg); } .btn-icon svg, .btn-icon .nav-item-icon { width: var(--icon-base); height: var(--icon-base); } .btn-sm { height: var(--btn-height-sm); min-width: 7rem; padding: 0 var(--space-3); font-size: var(--text-xs); gap: var(--space-1); } .btn-xs { height: var(--btn-height-xs); min-width: 5rem; padding: 0 var(--space-2); font-size: var(--text-xs); gap: var(--space-1); } .btn-lg { height: var(--btn-height-lg); min-width: 11rem; padding: 0 var(--space-5); font-size: var(--text-base); gap: var(--space-2); } .btn-block { display: flex; width: 100%; } /* ============================================================ Badges — square mono chips ============================================================ */ .badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 22px; padding: 0 var(--space-2); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .badge-neutral { background: var(--surface-1); border-color: var(--hairline-mid); color: var(--ink-muted); } .badge-primary, .badge.accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .badge-nominal, .badge-available { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); } .badge-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); } .badge-critical, .badge-sold { background: var(--error-soft); border-color: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); } .badge-info { background: var(--color-info-bg); border-color: color-mix(in srgb, var(--commerce) 40%, transparent); color: var(--commerce); } .badge-sm { height: 18px; padding: 0 6px; font-size: var(--text-2xs); } /* Solid modifier — a filled chip for the rare loud status. */ .badge-solid.badge-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .badge-solid.badge-nominal { background: var(--success); border-color: var(--success); color: var(--accent-ink); } .badge-solid.badge-warning { background: var(--warning); border-color: var(--warning); color: var(--accent-ink); } .badge-solid.badge-critical { background: var(--error); border-color: var(--error); color: #fff; } .badge-solid.badge-info { background: var(--commerce); border-color: var(--commerce); color: var(--accent-ink); } /* Status dot precedes a status word; is-running pulses in the accent. */ .status-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--ink-subtle); } .status-dot.is-ok { background: var(--success); } .status-dot.is-warn { background: var(--warning); } .status-dot.is-error { background: var(--error); } .status-dot.is-running { background: var(--accent); animation: pulse-dot 1.4s var(--ease) infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .status-dot.is-running { animation: none; } } /* ============================================================ Forms — square inputs, mono uppercase labels, orange focus ============================================================ */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } [hidden] { display: none !important; } .field label, .form-label, .field-static-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .input, .select, .textarea, .autocomplete-input, .auth-form input, .search-field input[type="text"], .search-field input[type="search"] { width: 100%; max-width: 32rem; padding: 9px var(--space-3); font-family: var(--font-mono); font-size: var(--text-base); color: var(--ink); background: var(--surface-1); border: 1px solid var(--hairline-mid); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .field input::placeholder, .field textarea::placeholder, .input::placeholder, .textarea::placeholder { color: var(--ink-subtle); } .field input:hover, .field select:hover, .field textarea:hover, .input:hover, .select:hover, .textarea:hover { border-color: var(--hairline-strong); } .field input:focus, .field select:focus, .field textarea:focus, .input:focus, .select:focus, .textarea:focus, .autocomplete-input:focus, .auth-form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); background: var(--surface); } .field textarea, .textarea { min-height: 90px; resize: vertical; } .field input[type="checkbox"], .field input[type="radio"] { width: auto; max-width: none; align-self: flex-start; accent-color: var(--accent); } .compact-field { max-width: 220px; } .form-actions { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); flex-wrap: wrap; } .form-stack { display: grid; gap: var(--space-4); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); } fieldset { margin-bottom: var(--space-5); } legend { padding-bottom: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--ink); border-bottom: 1px solid var(--hairline); width: 100%; } /* Inline filter bar above index tables. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .filter-bar input, .filter-bar select { padding: 8px var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); border: 1px solid var(--hairline-mid); background: var(--surface-1); color: var(--ink); } /* ============================================================ Alerts — flat hairline banners, colored left edge ============================================================ */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline-mid); background: var(--surface-1); color: var(--ink); font-size: var(--text-sm); } .alert-content { flex: 1; } .alert-title { font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .alert-description { color: var(--ink-muted); } .alert-critical { border-color: color-mix(in srgb, var(--error) 45%, var(--hairline-mid)); border-left: 3px solid var(--error); background: var(--error-soft); color: var(--error); } .alert-warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--hairline-mid)); border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--warning); } .alert-nominal { border-color: color-mix(in srgb, var(--success) 45%, var(--hairline-mid)); border-left: 3px solid var(--success); background: var(--success-soft); color: var(--success); } .alert-info { border-color: color-mix(in srgb, var(--commerce) 45%, var(--hairline-mid)); border-left: 3px solid var(--commerce); background: var(--color-info-bg); color: var(--commerce); } /* Alert bodies keep readable ink even when the banner is tinted. */ .alert-critical .alert-content, .alert-warning .alert-content, .alert-nominal .alert-content, .alert-info .alert-content { color: var(--ink); } /* ============================================================ Cards / panels — square, 1px hairline, no shadow ============================================================ */ .card, .panel { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline); } .panel { padding: var(--space-6); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-1); border-bottom: 1px solid var(--hairline); } .card-header-title { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); } .card-body { padding: var(--space-4); flex: 1; } .card-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--hairline); } /* Detail / summary lists. */ .detail-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); align-items: baseline; margin: var(--space-4) 0; } .detail-list dt { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-subtle); } .detail-list dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; } /* ============================================================ Tabs ============================================================ */ .tabs, .content-tabs { display: flex; border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-5); } .content-tabs { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); letter-spacing: 0.005em; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; text-decoration: none; } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--ink); border-bottom-color: var(--accent); } /* ============================================================ Pagination (Pagy) ============================================================ */ nav.pagy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-sm); } nav.pagy a, nav.pagy span { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: 6px var(--space-2); border: 1px solid var(--hairline-mid); color: var(--ink); font-variant-numeric: tabular-nums; text-decoration: none; } nav.pagy a:hover { background: var(--surface-2); border-color: var(--hairline-strong); color: var(--ink); } nav.pagy .current, nav.pagy a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } nav.pagy .gap, nav.pagy [aria-disabled] { border-color: transparent; color: var(--ink-subtle); } /* ============================================================ Sortable table headers ============================================================ */ .sort-link { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; text-decoration: none; white-space: nowrap; } .sort-link:hover { color: var(--accent); } .sort-link.is-sorted { color: var(--ink); font-weight: var(--font-semibold); } .sort-indicator { font-size: var(--text-xs); color: var(--ink-subtle); } /* ============================================================ Autocomplete picker — square popover, hairline border (no shadow) ============================================================ */ .autocomplete { position: relative; } .autocomplete-input { width: 100%; } .autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown); max-height: 16rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; background: var(--surface); border: 1px solid var(--hairline-mid); border-top: 0; } .autocomplete-option, .autocomplete-empty { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--ink); } .autocomplete-option { cursor: pointer; } .autocomplete-option:hover, .autocomplete-option.is-active { background: var(--surface-2); } .autocomplete-empty { color: var(--ink-subtle); } /* ============================================================ Empty states / dividers ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); text-align: center; } .empty-state-icon { margin-bottom: var(--space-4); color: var(--ink-subtle); } .empty-state-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--ink); margin-bottom: var(--space-2); } .empty-state-description { font-size: var(--text-sm); color: var(--ink-muted); max-width: 360px; margin-bottom: var(--space-6); } .empty-state-bordered { border: 1px solid var(--hairline); background: var(--surface-1); } .divider { display: flex; align-items: center; width: 100%; height: 1px; background: var(--hairline); margin: var(--space-4) 0; } /* ============================================================ Utilities ============================================================ */ .sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border-width: 0; } .no-print { /* visible on screen; hidden in @media print below */ } /* ============================================================ Dashboard — the plant command center. Exception strip (signal cells), press load + attention feed, due weeks + shipment feed. The signal strip is Gotham's metric strip: one flush hairline-ruled instrument panel, mono numbers. ============================================================ */ .dash { display: flex; flex-direction: column; gap: var(--space-6); } .dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .dash-subtitle { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); } .dash-as-of { color: var(--ink-subtle); } /* Exception strip — flush ruled cells, not floating tiles. */ .signal-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; } a.signal { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); border-left: 1px solid var(--hairline); text-decoration: none; color: inherit; cursor: pointer; transition: background-color var(--dur) var(--ease); } a.signal:first-child { border-left: none; } a.signal:hover, a.signal:focus-visible { background: var(--surface-2); } a.signal:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } a.signal:hover .signal-value, a.signal:focus-visible .signal-value { color: var(--accent); } a.signal.is-critical:hover .signal-value, a.signal.is-critical:focus-visible .signal-value { color: var(--error); } a.signal.is-warning:hover .signal-value, a.signal.is-warning:focus-visible .signal-value { color: var(--warning); } a.signal.is-nominal:hover .signal-value, a.signal.is-nominal:focus-visible .signal-value { color: var(--success); } @media (prefers-reduced-motion: reduce) { a.signal { transition: none; } } .signal-figure { display: flex; align-items: baseline; gap: var(--space-1); } .signal-value { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--font-medium); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } /* The past-due (primary) cell keeps its wider column and tone, but its value matches the other three so the metric row reads as one even strip. */ .signal.is-primary .signal-value { font-size: var(--text-3xl); } .signal-unit { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); } .signal-label { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--ink-muted); } .signal-context { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); font-variant-numeric: tabular-nums; } .signal.is-nominal .signal-value { color: var(--success); } .signal.is-warning .signal-value { color: var(--warning); } .signal.is-critical .signal-value { color: var(--error); } /* Panel grid: ops left, attention/feed right. */ .dash-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "press attention" "weeks ship"; gap: var(--space-5); align-items: start; } .dash-panel:nth-child(1) { grid-area: press; } .dash-panel:nth-child(2) { grid-area: attention; } .dash-panel:nth-child(3) { grid-area: weeks; } .dash-panel:nth-child(4) { grid-area: ship; } @media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; grid-template-areas: "press" "attention" "weeks" "ship"; } } .dash-panel { display: flex; flex-direction: column; border: 1px solid var(--hairline); background: var(--surface); overflow: hidden; } .dash-panel-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); background: var(--surface-1); } .dash-panel-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); } .dash-panel-link { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; } .dash-panel-link:hover { color: var(--accent-hover); } .dash-empty { padding: var(--space-5) var(--space-4); font-size: var(--text-sm); color: var(--ink-subtle); } .dash-empty-link { display: inline-block; margin-top: var(--space-2); color: var(--accent); text-decoration: none; font-weight: var(--font-medium); } .dash-empty-link:hover { color: var(--accent-hover); } /* Press load — capacity rows with a scaleX load bar. */ .press-loads { display: flex; flex-direction: column; } .press-load { padding: var(--space-4); border-bottom: 1px solid var(--hairline); } .press-load:last-child { border-bottom: none; } .press-load.is-idle { background: var(--surface-1); } .press-load-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .press-load-name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--ink); } .press-load-figure { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink); } .load-bar { margin-top: var(--space-2); height: 8px; background: var(--surface-2); border: 1px solid var(--hairline); overflow: hidden; } .load-bar-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(calc(var(--load-pct, 0%) / 100)); transform-origin: left center; transition: transform var(--duration-slower) var(--ease-out); } .load-bar-fill.is-over { background: var(--warning); } @media (prefers-reduced-motion: reduce) { .load-bar-fill { transition: none; } } .press-load-meta { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); } .press-idle { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ink-muted); } .press-idle-link, .feed-link { color: var(--accent); text-decoration: none; font-weight: var(--font-medium); } .press-idle-link:hover, .feed-link:hover { color: var(--accent-hover); } /* Week list — proportional bars, past-due flips to critical. */ .week-list { margin: 0; padding: 0; list-style: none; } .week-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 6.5rem 3.5rem; align-items: center; column-gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); } .week-row:last-child { border-bottom: none; } .week-date { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); font-weight: var(--font-medium); color: var(--ink); white-space: nowrap; } .week-row.is-past-due .week-date { color: var(--error); } .week-past-due { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--error); } .week-bar { height: 10px; background: var(--surface-2); overflow: hidden; } .week-bar-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(calc(var(--week-pct, 0%) / 100)); transform-origin: left center; } .week-row.is-past-due .week-bar-fill { background: var(--error); } .week-lbs { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; white-space: nowrap; } .week-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-subtle); text-align: right; white-space: nowrap; } .week-count-unit { font-size: var(--text-xs); } /* Feeds — fixed tracks so columns line up row to row. */ .feed { margin: 0; padding: 0; list-style: none; } .feed-row { display: grid; grid-template-columns: 3.25rem 6.5rem minmax(0, 1fr) 6.5rem; align-items: center; column-gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); } .feed-row:last-child { border-bottom: none; } .ship-feed .feed-row { grid-template-columns: 3.25rem 6.5rem minmax(0, 1fr) 8.5rem 5.5rem; } .feed-lead { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--font-medium); color: var(--ink-subtle); white-space: nowrap; } .feed-key { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed-customer { min-width: 0; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feed-figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); text-align: right; white-space: nowrap; } .feed-status { justify-self: end; white-space: nowrap; } .attention-feed .feed-row.is-critical .feed-lead { color: var(--error); font-weight: var(--font-semibold); } .ship-feed .feed-row.is-critical .feed-lead { color: var(--error); } @media (max-width: 640px) { .feed-row, .ship-feed .feed-row { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "lead key figure" "lead customer status"; row-gap: 2px; } .feed-lead { grid-area: lead; align-self: start; } .feed-key { grid-area: key; } .feed-customer { grid-area: customer; } .feed-figure { grid-area: figure; } .feed-status { grid-area: status; } } @media (max-width: 900px) { .signal-row { grid-template-columns: repeat(2, 1fr); } a.signal:nth-child(odd) { border-left: none; } a.signal:nth-child(n + 3) { border-top: 1px solid var(--hairline); } } @media (max-width: 520px) { .signal-row { grid-template-columns: 1fr; } a.signal { border-left: none; border-top: 1px solid var(--hairline); } a.signal:first-child { border-top: none; } .signal.is-primary .signal-value { font-size: var(--text-3xl); } } /* ============================================================ Order cockpit — status row, routing strip, panel grid. ============================================================ */ .status-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .cockpit-section { margin-bottom: var(--space-6); } .cockpit-heading { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); padding-bottom: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); } .cockpit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5) var(--space-8); } /* Routing progress strip — status is border + tint + text label, never color alone. */ .routing-strip { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .routing-step { display: flex; flex-direction: column; gap: 2px; min-width: 88px; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); } .routing-step-code { font-family: var(--font-mono); font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--ink); } .routing-step-detail { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; } .routing-step-status { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.04em; } .routing-step.is-complete { background: var(--success-soft); border-color: var(--success); } .routing-step.is-complete .routing-step-status { color: var(--success); } .routing-step.is-partial { background: var(--warning-soft); border-color: var(--warning); } .routing-step.is-partial .routing-step-status { color: var(--warning); } .routing-step.is-open { background: var(--error-soft); border-color: var(--error); } .routing-step.is-open .routing-step-status { color: var(--error); } /* Order-entry part context (alert / BOM / due-date guidance). */ .part-context { margin-top: var(--space-3); } .part-context-facts { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-3); } .part-context-heading { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-2); } /* Department queue picker. */ .queue-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); } .queue-picker-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); text-decoration: none; color: var(--ink); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .queue-picker-item:hover { background: var(--surface-2); border-color: var(--accent); } .queue-picker-code { font-family: var(--font-mono); font-weight: var(--font-semibold); font-size: var(--text-md); } .queue-picker-name { font-size: var(--text-sm); color: var(--ink-muted); } /* Press schedule. */ .schedule-table td, .schedule-table th { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .schedule-table tr.is-late td { background: var(--error-soft); } .schedule-trials { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .schedule-trial { padding: 2px var(--space-2); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-medium); } .schedule-move .inline { display: inline; } .schedule-inline { display: flex; gap: var(--space-1); } .schedule-comment, .schedule-cut { padding: 2px var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); border: 1px solid transparent; background: transparent; } .schedule-comment { width: 12rem; } .schedule-cut { width: 4rem; } .schedule-comment:hover, .schedule-comment:focus, .schedule-cut:hover, .schedule-cut:focus { border-color: var(--hairline-mid); background: var(--surface); } /* Inline shipment entry. */ .shipment-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); } .shipment-form .field { margin-bottom: 0; } .shipment-form .form-actions { margin: 0; padding-top: 0; } /* ============================================================ Orders — overview metric strip, chart panels, action lists. ============================================================ */ .orders-overview { display: flex; flex-direction: column; gap: var(--space-5); } .order-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--hairline); background: var(--surface); } .order-metric { display: flex; min-height: 112px; flex-direction: column; justify-content: space-between; padding: var(--space-4); border-left: 1px solid var(--hairline); color: inherit; text-decoration: none; transition: background var(--dur) var(--ease); } .order-metric:first-child { border-left: none; } .order-metric:hover { background: var(--surface-2); } .order-metric-value { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); } .order-metric-label { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); } .order-metric-context { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-subtle); } .order-metric.is-critical .order-metric-value { color: var(--error); } .order-metric.is-warning .order-metric-value { color: var(--warning); } .order-overview-grid, .order-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .order-overview-panel { min-width: 0; border: 1px solid var(--hairline); background: var(--surface); overflow: hidden; } .order-overview-panel-wide { grid-column: 1 / -1; } .order-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); background: var(--surface-1); } .order-panel-head h2 { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); } .order-panel-link, .order-action-link { color: var(--accent); font-weight: var(--font-medium); text-decoration: none; } .order-panel-link:hover, .order-action-link:hover { color: var(--accent-hover); } .order-panel-link { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-xs); } .order-chart { padding: var(--space-4); overflow: hidden; } .order-action-list { margin: 0; padding: 0; list-style: none; } .order-action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 44px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); } .order-action-row:last-child { border-bottom: none; } .order-action-main { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); color: var(--ink); } .order-action-main span:last-child { overflow: hidden; font-size: var(--text-sm); color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap; } .order-action-meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); white-space: nowrap; } .order-empty { margin: 0; padding: var(--space-5) var(--space-4); color: var(--ink-subtle); } @media (max-width: 1100px) { .order-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .order-metric:nth-child(3n + 1) { border-left: none; } } @media (max-width: 820px) { .order-metrics, .order-overview-grid, .order-action-grid { grid-template-columns: 1fr; } .order-metric { border-left: none; border-top: 1px solid var(--hairline); } .order-metric:first-child { border-top: none; } } @media (max-width: 560px) { .order-action-row { grid-template-columns: 1fr; } .order-action-meta { justify-content: flex-start; } } /* ============================================================ Reports — past-due banner, inline routing bar, subtotals. ============================================================ */ .past-due-banner { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--error-soft); border: 1px solid var(--error); border-left: 3px solid var(--error); color: var(--error); font-size: var(--text-sm); } .routing-bar { display: inline-flex; gap: 2px; } .routing-cell { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); border: 1px solid transparent; } .routing-cell.is-complete { background: var(--success-soft); border-color: var(--success); color: var(--success); } .routing-cell.is-partial { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } .routing-cell.is-open { background: var(--error-soft); border-color: var(--error); color: var(--error); } .table tr.is-past-due td:nth-child(7) { color: var(--error); font-weight: var(--font-semibold); } .report-subtotal td { font-weight: var(--font-semibold); border-top: 2px solid var(--hairline-mid); background: var(--surface-1); } /* Reports landing menu — a named table of contents. */ .report-menu { margin: 0; border-top: 1px solid var(--hairline); } .report-menu-item { display: grid; grid-template-columns: 14rem 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--hairline); } .report-menu-item dt { margin: 0; font-weight: var(--font-semibold); } .report-menu-item dt a { color: var(--accent); text-decoration: none; } .report-menu-item dt a:hover { color: var(--accent-hover); } .report-menu-item dd { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); } @media (max-width: 640px) { .report-menu-item { grid-template-columns: 1fr; gap: var(--space-1); } } /* ============================================================ Finance — operational finance destination. Server-rendered read model, no client charting dependency. Charts are ruled rows and CSS bars so the screen prints cleanly. ============================================================ */ .finance { display: grid; gap: var(--space-5); min-width: 0; } .finance-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr); gap: var(--space-6); align-items: start; padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); } .finance-hero-main { max-width: 74ch; } .finance-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--ink); letter-spacing: 0; } .finance-lede, .finance-cost-note { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); } .finance-cost-note { padding-left: var(--space-3); border-left: 2px solid var(--warning); color: var(--ink); } .finance-filter { display: grid; gap: var(--space-3); align-self: stretch; padding: var(--space-4); background: var(--surface); border: 1px solid var(--hairline); } .finance-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .finance-filter-field { margin-bottom: 0; } .finance-filter .input { max-width: none; } .finance-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .finance-period { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); } .finance-warning-strip { display: grid; grid-template-columns: 1.25fr 1fr 1fr; border: 1px solid var(--hairline); background: var(--surface); overflow: hidden; } .finance-warning { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border-left: 1px solid var(--hairline); background: var(--warning-soft); } .finance-warning:first-child { border-left: none; } .finance-warning.is-clear { background: var(--surface); } .finance-warning-count { font-family: var(--font-mono); font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--warning); } .finance-warning.is-clear .finance-warning-count { color: var(--success); } .finance-warning h2 { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); } .finance-warning p { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); } .finance-kpis { display: grid; grid-template-columns: 1.35fr 1fr 1fr; border: 1px solid var(--hairline); background: var(--surface); } .finance-kpi { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4); border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline); } .finance-kpi:nth-child(3n + 1) { border-left: none; } .finance-kpi:nth-child(-n + 3) { border-top: none; } .finance-kpi.is-estimate { background: color-mix(in srgb, var(--warning-soft) 45%, transparent); } .finance-kpi-quality { background: var(--surface-1); } .finance-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .finance-kpi-title { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); } .finance-kpi-value { margin: 0; font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.05; } .finance-kpi-context { margin: 0; min-height: 2.5em; color: var(--ink-muted); font-size: var(--text-sm); } .finance-kpi-gaps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--hairline); list-style: none; color: var(--ink-subtle); font-size: var(--text-xs); } .finance-kpi-gaps li { display: inline-flex; align-items: center; gap: 6px; } .finance-chart-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: var(--space-5); align-items: start; } .finance-panel { min-width: 0; background: var(--surface); border: 1px solid var(--hairline); } .finance-panel-wide { grid-row: span 2; } .finance-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-1); border-bottom: 1px solid var(--hairline); } .finance-panel-head h2 { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); } .finance-panel-head p { margin: var(--space-1) 0 0; color: var(--ink-subtle); font-size: var(--text-sm); } .finance-legend { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); white-space: nowrap; } .finance-legend span { display: inline-flex; align-items: center; gap: 6px; } .finance-swatch { display: inline-block; width: 16px; height: 8px; background: var(--finance); } .finance-swatch.is-shipped, .finance-trend-fill.is-shipped { background: var(--finance); } .finance-swatch.is-booked, .finance-trend-fill.is-booked { background: var(--hairline-strong); } .finance-trend-list, .finance-bar-list { display: grid; } .finance-trend-row, .finance-bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 8rem; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); } .finance-trend-row { grid-template-columns: 7.5rem minmax(0, 1fr) 10rem; } .finance-trend-row:last-child, .finance-bar-row:last-child { border-bottom: none; } .finance-chart-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: var(--text-sm); font-weight: var(--font-medium); } .finance-trend-bars { display: grid; gap: 5px; min-width: 0; } .finance-trend-track, .finance-bar-track { display: block; height: 10px; min-width: 0; background: var(--surface-2); overflow: hidden; } .finance-bar-track { height: 12px; } .finance-trend-fill, .finance-bar-fill { display: block; width: var(--bar-width, 0%); height: 100%; background: var(--finance); } .finance-bar-fill.is-critical { background: var(--error); } .finance-bar-fill.is-wip { background: var(--finance); } .finance-chart-value { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; white-space: nowrap; } .finance-chart-note { grid-column: 2 / -1; margin-top: calc(var(--space-2) * -1); color: var(--ink-subtle); font-family: var(--font-mono); font-size: var(--text-xs); } .finance-empty { margin: 0; padding: var(--space-5) var(--space-4); color: var(--ink-subtle); font-size: var(--text-sm); } .finance-open-orders { overflow: hidden; } .finance-orders-table td { vertical-align: top; } .finance-gap-list { display: inline-flex; gap: 6px; flex-wrap: wrap; min-width: 10rem; } @media (max-width: 1040px) { .finance-hero, .finance-chart-grid { grid-template-columns: 1fr; } .finance-panel-wide { grid-row: auto; } } @media (max-width: 820px) { .finance-warning-strip, .finance-kpis { grid-template-columns: 1fr; } .finance-warning, .finance-kpi, .finance-kpi:nth-child(3n + 1), .finance-kpi:nth-child(-n + 3) { border-left: none; border-top: 1px solid var(--hairline); } .finance-warning:first-child, .finance-kpi:first-child { border-top: none; } .finance-filter-fields, .finance-trend-row, .finance-bar-row { grid-template-columns: 1fr; } .finance-chart-value { text-align: left; } .finance-chart-note { grid-column: auto; margin-top: 0; } } @media (max-width: 520px) { .finance { padding-bottom: 5rem; } } /* ============================================================ Work order — print-first traveler. ============================================================ */ .work-order { max-width: 900px; } .wo-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 2px solid var(--ink); } .wo-title { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .wo-so { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; } .wo-header-facts { display: grid; grid-template-columns: repeat(2, auto); gap: var(--space-1) var(--space-5); margin: 0; font-size: var(--text-sm); } .wo-header-facts > div { display: flex; gap: var(--space-2); } .wo-header-facts dt { color: var(--ink-muted); } .wo-header-facts dd { margin: 0; font-weight: var(--font-medium); font-variant-numeric: tabular-nums; } .wo-section { margin-bottom: var(--space-5); break-inside: avoid; } .wo-section-title { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-subtle); padding-bottom: var(--space-1); margin-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); } .wo-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; } .wo-facts > div { display: flex; flex-direction: column; } .wo-facts dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-subtle); } .wo-facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; } /* ============================================================ AI chat — Ask Rex FAB + side drawer. All Stimulus hooks preserved: [data-open], [hidden], .app-shell.is-ai-chat-open, [data-status], targets. Square, hairline, one orange signal (the FAB + focus). ============================================================ */ .ai-chat-fab { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-popover); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 52px; min-height: 52px; height: 52px; padding: 0 var(--space-4); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-semibold); letter-spacing: 0.02em; cursor: pointer; opacity: 1; transform: translateY(0); transition: background-color var(--duration-normal) var(--ease-out), opacity var(--panel-close-dur) var(--panel-ease), transform var(--panel-close-dur) var(--panel-ease); } .ai-chat-fab:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .ai-chat-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ai-chat-fab-icon { width: 22px; height: 22px; flex-shrink: 0; } .ai-chat-fab-label { white-space: nowrap; } .app-shell.is-ai-chat-open .ai-chat-fab { opacity: 0; transform: translateY(8px); pointer-events: none; } @media (max-width: 720px) { .ai-chat-fab-label { display: none; } .ai-chat-fab { padding: 0; width: 52px; min-width: 52px; } } @media (max-width: 520px) { .ai-chat-fab { right: var(--space-4); bottom: var(--space-4); } } .ai-chat-backdrop { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--panel-close-dur) var(--panel-ease); } .ai-chat-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; transition: opacity var(--panel-open-dur) var(--panel-ease); } .ai-chat-drawer { position: fixed; top: 0; right: 0; z-index: var(--z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(420px, 100vw); height: 100vh; height: 100dvh; background: var(--surface); border-left: 1px solid var(--hairline-mid); overflow: hidden; transform: translateX(100%); opacity: 0.96; filter: blur(var(--panel-blur)); pointer-events: none; transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease); will-change: transform, opacity, filter; } .ai-chat-drawer[data-open="true"] { transform: translateX(0); opacity: 1; filter: blur(0); pointer-events: auto; transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease); } .ai-chat-drawer[hidden], .ai-chat-backdrop[hidden] { display: none; } .ai-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); background: var(--surface-1); } .ai-chat-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .ai-chat-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--accent); color: var(--accent-ink); } .ai-chat-brand-icon { width: 24px; height: 24px; } .ai-chat-title { margin: 0; font-size: var(--text-md); line-height: var(--leading-tight); } .ai-chat-status { margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); } .ai-chat-status[data-status="running"] { color: var(--accent); animation: ai-status-pulse 1.6s var(--ease-out) infinite; } .ai-chat-status[data-status="failed"] { color: var(--error); } .ai-chat-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .ai-chat-action-form { margin: 0; display: inline-flex; } .ai-chat-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 1px solid var(--hairline-mid); background: var(--surface-1); color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .ai-chat-icon-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--hairline-strong); } .ai-chat-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .ai-chat-icon-btn-svg { width: 18px; height: 18px; } .ai-chat-messages { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; padding: var(--space-4); overflow-y: auto; background: var(--surface); } .ai-chat-empty { margin: auto 0; padding: var(--space-2) 0; } .ai-chat-empty-lead { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); } .ai-chat-chips { display: flex; flex-direction: column; gap: var(--space-2); } .ai-chat-chip { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .ai-chat-chip:hover, .ai-chat-chip:focus-visible { background: var(--accent-soft); border-color: var(--accent-line); } .ai-chat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .ai-chat-message { max-width: 88%; animation: ai-msg-in var(--duration-slow) var(--ease-out) both; } .ai-chat-message-user { align-self: flex-end; max-width: 80%; padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-line); background: var(--accent-soft); } .ai-chat-message-assistant { align-self: flex-start; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); align-items: start; max-width: 96%; background: transparent; border: none; padding: 0; } .ai-chat-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--surface-3); color: var(--ink); } .ai-chat-avatar-icon { width: 18px; height: 18px; } .ai-chat-bubble { min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); background: var(--surface-1); } .ai-chat-message-meta { margin-bottom: 2px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-subtle); } .ai-chat-message-content { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink); overflow-wrap: anywhere; } .ai-chat-message-content:empty::before { content: "Reading data"; color: var(--ink-subtle); } .ai-chat-message-content p { margin: 0 0 var(--space-2); } .ai-chat-message-content p:last-child { margin-bottom: 0; } .ai-chat-form { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); background: var(--surface-1); } .ai-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; } .ai-chat-input.textarea, .ai-chat-input { box-sizing: border-box; width: 100%; max-width: none; min-height: 44px; max-height: 140px; margin: 0; padding: 10px var(--space-3); resize: none; overflow-y: auto; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-mid); outline: none; transition: border-color var(--dur) var(--ease-out); } .ai-chat-input:hover { border-color: var(--hairline-strong); } .ai-chat-input:focus, .ai-chat-input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; } .ai-chat-submit { box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; align-self: end; } .ai-chat-hint { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); } @keyframes ai-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes ai-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (max-width: 640px) { .ai-chat-drawer { width: 100vw; } } @media (prefers-reduced-motion: reduce) { .ai-chat-fab, .ai-chat-drawer, .ai-chat-backdrop, .ai-chat-message, .ai-chat-status[data-status="running"] { transition: none !important; animation: none !important; filter: none !important; } .ai-chat-drawer { transform: none; opacity: 1; } .app-shell.is-ai-chat-open .ai-chat-fab { opacity: 0; transform: none; } } /* ============================================================ Knowledge base ============================================================ */ .kb { max-width: 72rem; } .kb-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0; align-items: stretch; } .kb-toc { align-self: stretch; border-right: 1px solid var(--hairline); padding-right: var(--space-5); margin-right: var(--space-8); } .kb-toc-sticky { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) 0; } .kb-toc-title { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); } .kb-toc a { display: block; padding: var(--space-1) 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--ink-muted); text-decoration: none; } .kb-toc a:hover { color: var(--ink); } .kb-body { display: flex; flex-direction: column; gap: 0; min-width: 0; } .kb-section { padding: var(--space-10) 0; border-bottom: 1px solid var(--hairline); scroll-margin-top: var(--space-4); } .kb-section:first-child { padding-top: 0; } .kb-section:last-child { border-bottom: none; padding-bottom: var(--space-10); } .kb-section h2 { margin: 0 0 var(--space-4); padding-bottom: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--ink); border-bottom: 1px solid var(--hairline); } .kb-section h3 { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-subtle); } .kb-section p, .kb-section li { font-size: var(--text-sm); line-height: 1.6; color: var(--ink); } .kb-section p { margin: 0 0 var(--space-3); } .kb-section ul, .kb-section ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; list-style: revert; } .kb-section li + li { margin-top: var(--space-2); } .kb-note { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); background: var(--surface-1); font-size: var(--text-sm); color: var(--ink-muted); } .kb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .kb-card { padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); background: var(--surface); } .kb-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: none; letter-spacing: 0; color: var(--ink); } .kb-card p { margin: 0; color: var(--ink-muted); } .kb-search { display: grid; grid-template-columns: minmax(0, 32rem) auto; gap: var(--space-3); align-items: end; margin: var(--space-4) 0; } .kb-search .field { margin: 0; } .kb-section .empty-state { margin-bottom: var(--space-4); } .kb-article-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); } .kb-article-navigation a { display: grid; gap: var(--space-1); } .kb-article-navigation a span { font-size: var(--text-xs); color: var(--ink-muted); } .kb-article-navigation-next { grid-column: 2; text-align: right; } @media (max-width: 600px) { .kb-search { grid-template-columns: 1fr; } } .kb-steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; border: 1px solid var(--hairline); overflow: hidden; } .kb-steps li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); margin: 0; } .kb-steps li:last-child { border-bottom: none; } .kb-steps strong { font-size: var(--text-sm); color: var(--ink); } .kb-steps span { color: var(--ink-muted); } .kb-dl { margin: 0 0 var(--space-4); } .kb-dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); } .kb-dl dt { margin: 0; font-weight: var(--font-semibold); color: var(--ink); } .kb-dl dd { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; } .kb-status { list-style: none; margin: 0 0 var(--space-4); padding: 0; } .kb-status li { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); } .kb-swatch { width: 1rem; height: 1rem; flex-shrink: 0; border: 1px solid var(--hairline); } .kb-swatch.is-critical { background: var(--error); border-color: var(--error); } .kb-swatch.is-warning { background: var(--warning); border-color: var(--warning); } .kb-swatch.is-nominal { background: var(--success); border-color: var(--success); } .kb-swatch.is-neutral { background: var(--surface-3); } .kb-glossary { margin: 0; } .kb-glossary > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); } .kb-glossary dt { margin: 0 0 2px; font-weight: var(--font-semibold); color: var(--ink); } .kb-glossary dd { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); } .kb-glossary code { font-family: var(--font-mono); font-size: 0.9em; } @media (max-width: 900px) { .kb-layout { grid-template-columns: 1fr; gap: var(--space-4); } .kb-toc { border-right: none; border-bottom: 1px solid var(--hairline); padding: 0 0 var(--space-3); margin-right: 0; } .kb-toc-sticky { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-1) var(--space-2); } .kb-toc-title { width: 100%; margin-bottom: var(--space-1); } .kb-toc a { padding: var(--space-1) var(--space-2); background: var(--surface-1); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; } } @media (max-width: 640px) { .kb-steps li { grid-template-columns: 1fr; gap: var(--space-1); } .kb-dl > div { grid-template-columns: 1fr; gap: 2px; } } /* ============================================================ Settings + Appearance theme picker ============================================================ */ .settings { max-width: 40rem; display: flex; flex-direction: column; gap: var(--space-6); } .settings.agent-prompt-settings { max-width: 72rem; } .settings-section { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--hairline); background: var(--surface); } .settings-heading { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-subtle); } .settings-form { display: flex; flex-direction: column; gap: var(--space-6); } .settings-admin-links { display: grid; border: 1px solid var(--hairline); } .settings-admin-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; } .settings-admin-link:last-child { border-bottom: 0; } .settings-admin-link:hover { background: var(--surface-2); } .settings-admin-link span { display: grid; gap: 2px; } .settings-admin-link small { color: var(--ink-muted); } .agent-prompt-textarea { min-height: 26rem; font-family: var(--font-mono); } /* Theme picker — hairline group of three flush option rows. */ .theme-options { display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--hairline); max-width: 560px; } .theme-option { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background var(--dur) var(--ease); } .theme-option:last-child { border-bottom: none; } .theme-option:hover { background: var(--surface-2); } .theme-option:has(input:checked) { background: var(--accent-soft); } .theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; } /* The radio itself is visually hidden; the row + check carry state. */ .theme-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .theme-swatch { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--hairline-mid); color: var(--ink-muted); } .theme-swatch-glyph { font-family: var(--font-mono); font-size: 18px; line-height: 1; } .theme-swatch--dark { background: #05080f; border-color: #1c2538; color: #ff7a1a; } .theme-swatch--light { background: #f7f9fc; border-color: #d9e0ec; color: #b35000; } .theme-swatch--system { background: linear-gradient(105deg, #05080f 0 50%, #f7f9fc 50% 100%); color: var(--accent); } .theme-option-body { display: grid; gap: 2px; min-width: 0; } .theme-option-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--ink); } .theme-option-desc { font-size: var(--text-sm); color: var(--ink-subtle); } .theme-check { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-left: auto; border: 1px solid var(--hairline-mid); color: transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .theme-option:has(input:checked) .theme-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ============================================================ Auth screens ============================================================ */ .auth-screen { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: var(--space-6); } .auth-card { width: 100%; max-width: 380px; padding: var(--space-8); background: var(--surface); border: 1px solid var(--hairline); } .auth-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: var(--font-bold); letter-spacing: -0.01em; color: var(--ink); } .auth-brand::before { content: ""; width: 18px; height: 18px; background: var(--accent); } .auth-form { margin-top: var(--space-5); } .auth-footer { margin-top: var(--space-4); font-size: var(--text-sm); } /* ============================================================ Print — always ink-on-white, chrome hidden. Forces the theme-neutral ink/paper ramp regardless of [data-theme]; the work-order traveler stays clean. ============================================================ */ @media print { :root, [data-theme="dark"], [data-theme="light"] { --canvas: #ffffff; --surface: #ffffff; --surface-muted: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #ffffff; --ink: #000000; --ink-muted: #222222; --ink-subtle: #444444; --hairline: #cccccc; --hairline-mid: #999999; --color-surface-primary: #ffffff; --color-surface-secondary: #ffffff; --color-text-primary: #000000; --color-text-secondary: #222222; --color-text-tertiary: #444444; --color-border-primary: #cccccc; } html, body { background: #ffffff; color: #000000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* App chrome never prints. */ .app-sidebar, .app-topbar, .app-shell-backdrop, .ai-chat-backdrop, .ai-chat-drawer, .ai-chat-fab, .content-tabs, .page-actions, .btn, .no-print { display: none !important; } /* The shell collapses to a single flowing column on paper. */ .app-shell, .app-shell-body { display: block !important; height: auto !important; overflow: visible !important; } .app-main { max-width: none; margin: 0; padding: 0; overflow: visible !important; } .app-main > * { max-width: none; margin-inline: 0; } .table-container { overflow: visible !important; border: 0; } thead { display: table-header-group; } tr, img { break-inside: avoid; } @page { margin: 0.5in; } /* Schedule prints as the floor sheet: inline inputs render as plain text. */ .schedule-comment, .schedule-cut { border: none !important; background: transparent !important; width: auto !important; padding: 0 !important; } .schedule-week { break-inside: avoid; } /* Knowledge base prints without its TOC. */ .kb-toc { display: none; } .kb-layout { grid-template-columns: 1fr; } .kb-section { break-inside: avoid; } }