/* ============================================================ * CMWC — Component primitives * ------------------------------------------------------------ * One class family per component. All values come from tokens.css. * Keep selectors flat: .ui-x, .ui-x--variant, .ui-x__part. * Shared component styles. * ============================================================ */ /* ---------- Button (§7.1) ---------- */ .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: var(--button-h); padding: 0 var(--space-5); border: 1px solid var(--outline); border-radius: var(--radius-2); background: var(--surface-high); color: var(--on-surface); font: inherit; font-size: var(--font-md); font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: background 80ms linear, border-color 80ms linear; } .ui-button:hover { background: var(--surface-highest); } .ui-button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ui-button:disabled { opacity: 0.5; cursor: not-allowed; } .ui-button--primary { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--on-primary); } .ui-button--primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); } .ui-button--secondary { background: var(--surface-high); border-color: var(--outline); color: var(--on-surface); } .ui-button--ghost { background: transparent; border-color: transparent; color: var(--on-surface-dim); } .ui-button--ghost:hover { background: var(--surface-high); color: var(--on-surface); } /* Filled destructive button. Saturated red, white text — demands attention. * Distinct from inline --danger usage (error text, invalid borders). */ .ui-button--danger { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--on-danger); } .ui-button--danger:hover { background: var(--danger-deep); border-color: var(--danger-deep); } /* ---------- Input (§7.3) ---------- */ .ui-input { box-sizing: border-box; width: 100%; height: var(--field-height); padding: 0 var(--space-4); background: var(--surface); color: var(--on-surface); border: 1px solid var(--surface-highest); border-radius: var(--radius-2); font: inherit; font-size: var(--font-md); line-height: var(--font-md-lh); transition: border-color 80ms linear, box-shadow 80ms linear; } .ui-input:hover { border-color: var(--on-surface-mute); } .ui-input:focus-visible { outline: none; border-color: var(--primary-strong); box-shadow: var(--focus-ring); } .ui-input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--surface); } .ui-input--num { text-align: right; font-variant-numeric: tabular-nums; } /* Strip the native number-input spinners — operators type, never click. */ .ui-input[type="number"]::-webkit-outer-spin-button, .ui-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ui-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Force the native calendar/clock popup (and the indicator glyph) to * follow the page theme. `color-scheme` on is supposed to be * inherited by these popups, but Chrome/Safari on macOS drop it for * type=date/time/month, so we set it here explicitly. */ .ui-input[type="date"], .ui-input[type="datetime-local"], .ui-input[type="month"], .ui-input[type="time"], .ui-input[type="week"], input.ui-stepper__hidden-date { color-scheme: dark; } [data-theme="light"] .ui-input[type="date"], [data-theme="light"] .ui-input[type="datetime-local"], [data-theme="light"] .ui-input[type="month"], [data-theme="light"] .ui-input[type="time"], [data-theme="light"] .ui-input[type="week"], [data-theme="light"] input.ui-stepper__hidden-date { color-scheme: light; } .ui-input--invalid, .ui-input--invalid:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); } /* ---------- Select (§7.4) ---------- * Native hidden, custom box drawn alongside. * Wrap an input in a label.ui-checkbox; spec mandates label+box pair. */ .ui-checkbox { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--font-md); color: var(--on-surface); user-select: none; position: relative; } .ui-checkbox__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; } .ui-checkbox__box { box-sizing: border-box; width: 16px; height: 16px; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--surface-highest); border-radius: var(--radius-1); display: inline-flex; align-items: center; justify-content: center; transition: background 80ms linear, border-color 80ms linear; position: relative; pointer-events: none; } .ui-checkbox:hover .ui-checkbox__box { border-color: var(--on-surface-mute); } .ui-checkbox__input:checked + .ui-checkbox__box { background: var(--primary-strong); border-color: var(--primary-strong); } /* Drawn check — two strokes via clip-path so it scales with the box. */ .ui-checkbox__input:checked + .ui-checkbox__box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg) translate(1px, -1px); } .ui-checkbox__input:focus-visible + .ui-checkbox__box { border-color: var(--primary-strong); box-shadow: var(--focus-ring); } .ui-checkbox__input:disabled + .ui-checkbox__box { opacity: 0.5; } .ui-checkbox:has(.ui-checkbox__input:disabled) { cursor: not-allowed; opacity: 0.7; } /* Indeterminate — drawn as a 2px horizontal bar instead of a check. */ .ui-checkbox__input:indeterminate + .ui-checkbox__box { background: var(--primary-strong); border-color: var(--primary-strong); } .ui-checkbox__input:indeterminate + .ui-checkbox__box::after { content: ""; width: 8px; height: 2px; background: var(--on-primary); border: 0; transform: none; } /* Toggle switch — checkbox styled as a track + thumb. * Wrap an in a label. */ .ui-switch { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; font-size: var(--font-md); color: var(--on-surface); } .ui-switch__input { position: absolute; opacity: 0; pointer-events: none; } .ui-switch__track { box-sizing: border-box; position: relative; width: 32px; height: 18px; background: var(--surface-highest); border: 1px solid var(--outline); border-radius: 999px; transition: background 100ms linear, border-color 100ms linear; } .ui-switch__track::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; background: var(--on-surface-dim); border-radius: 50%; transition: transform 120ms ease, background 120ms ease; } .ui-switch__input:checked + .ui-switch__track { background: var(--primary-strong); border-color: var(--primary-strong); } .ui-switch__input:checked + .ui-switch__track::after { transform: translateX(14px); background: var(--on-primary); } .ui-switch__input:focus-visible + .ui-switch__track { box-shadow: var(--focus-ring); } .ui-switch__input:disabled + .ui-switch__track { opacity: 0.5; cursor: not-allowed; } /* Segmented control — 2–3 mutually-exclusive options inline. Renders * as a row of buttons with a single selected; selection is indicated * by the raised surface, not color. Use radio inputs for state. */ .ui-segmented { display: inline-flex; height: var(--button-h); border: 1px solid var(--surface-highest); border-radius: var(--radius-2); background: var(--surface-low); padding: 2px; gap: 2px; } .ui-segmented__opt { display: inline-flex; align-items: center; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-1); background: transparent; color: var(--on-surface-mute); font: inherit; font-size: var(--font-md); font-weight: 500; cursor: pointer; white-space: nowrap; appearance: none; -webkit-appearance: none; } .ui-segmented__opt:hover { color: var(--on-surface); } .ui-segmented__opt[aria-pressed="true"], .ui-segmented__opt.is-selected { background: var(--surface-highest); color: var(--on-surface); } .ui-segmented__opt:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Editable-card footer — sticks at the bottom of a panel and holds * Revert/Cancel + Save. Pairs with .ui-panel. */ .ui-panel__footer { border-top: 1px solid var(--outline-subtle); padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); background: color-mix(in srgb, var(--surface-high) 30%, transparent); } .ui-panel__footer-spacer { margin-right: auto; color: var(--on-surface-mute); font-size: var(--font-sm); } /* Editable table — a .ui-table where some cells contain inputs. * Inputs sit flush in the cell with no extra padding so the row * height stays at --row-default. */ .ui-table--editable td { padding: 0; } .ui-table--editable td.cell-text { padding: 0 var(--space-5); } .ui-table--editable td .ui-input { height: 100%; border: 0; border-radius: 0; background: transparent; padding: 0 var(--space-5); } .ui-table--editable td .ui-input:focus-visible { background: var(--surface-low); box-shadow: inset var(--focus-ring); border: 0; } .ui-table--editable td .ui-input--invalid, .ui-table--editable td .ui-input--invalid:focus-visible { background: var(--danger-surface); box-shadow: inset 0 0 0 1px var(--danger); } /* Modal — native . Open with .showModal(), close with .close(). * Native dialog gives us ESC handling, focus trap, inert background, * and focus restoration for free. We still wire backdrop-click to close. */ dialog.ui-modal { background: var(--surface-low); color: var(--on-surface); border: 1px solid var(--outline); border-radius: var(--radius-3); padding: 0; width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } dialog.ui-modal:not([open]) { display: none; } dialog.ui-modal::backdrop { background: rgba(0, 0, 0, 0.55); } .ui-modal__header { height: var(--panel-header); padding: 0 var(--space-5); border-bottom: 1px solid var(--outline-subtle); display: flex; align-items: center; justify-content: space-between; } .ui-modal__title { margin: 0; font-size: var(--font-lg); line-height: var(--font-lg-lh); font-weight: 600; } .ui-modal__body { padding: var(--space-5); overflow: auto; } .ui-modal__footer { border-top: 1px solid var(--outline-subtle); padding: var(--space-4) var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-3); } /* ---------- Field (§7.6) ---------- */ .ui-field { display: flex; flex-direction: column; gap: var(--space-2); } .ui-field__label { font-size: var(--font-sm); line-height: var(--font-sm-lh); font-weight: 500; color: var(--on-surface-dim); } .ui-field__req { color: var(--danger); } .ui-field__helper { margin: 0; font-size: var(--font-sm); line-height: var(--font-sm-lh); color: var(--on-surface-mute); } .ui-field__error { margin: 0; font-size: var(--font-sm); line-height: var(--font-sm-lh); color: var(--danger); } /* ---------- Key-value table (§7.10) ---------- * Two-column read-only summary: label (th) + value (td). Reads top-to- * bottom unlike .ui-table (which reads left-to-right). Cap at ~8 rows; * past that, switch to a real data table. */ .ui-kv { width: 100%; border-collapse: collapse; font-size: var(--font-md); line-height: var(--font-md-lh); } .ui-kv th { text-align: left; font-weight: 400; color: var(--on-surface-dim); padding: var(--space-3) var(--space-5) var(--space-3) 0; border-bottom: 1px solid var(--outline-subtle); white-space: nowrap; } .ui-kv td { text-align: right; font-variant-numeric: tabular-nums; color: var(--on-surface); padding: var(--space-3) 0; border-bottom: 1px solid var(--outline-subtle); white-space: nowrap; } .ui-kv tr:last-child th, .ui-kv tr:last-child td { border-bottom: 0; } /* Total / emphasis row — bolder rule above, stronger weight. */ .ui-kv tr.is-total th, .ui-kv tr.is-total td { border-top: 1px solid var(--outline); font-weight: 600; color: var(--on-surface); } /* ---------- Discrepancy badge (§7.23) ---------- * Small numeric badge that color-grades a value against a domain * threshold. Variant is decided by the caller (not the component). * Spec rule: sign always visible, never color-only — pair with * sign + magnitude + unit. */ .ui-disc-badge { display: inline-flex; align-items: baseline; gap: 2px; padding: 1px var(--space-3); border: 1px solid var(--outline); border-radius: var(--radius-1); background: var(--surface-high); color: var(--on-surface); font-size: var(--font-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ui-disc-badge__unit { font-weight: 400; color: inherit; opacity: 0.85; margin-left: 2px; } .ui-disc-badge--red { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); } .ui-disc-badge--amber { background: var(--warn-surface); border-color: var(--warn); color: var(--warn); } .ui-disc-badge--green { background: var(--success-surface); border-color: var(--success); color: var(--success); } /* ---------- Empty state (§7.11) ---------- * Shown inside a panel body when there are no records to render. * One sentence, one optional CTA. No decorative illustrations; an * optional 24px-max icon glyph is allowed. */ .ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); color: var(--on-surface-mute); } .ui-empty__icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-surface-mute); } .ui-empty__message { margin: 0; font-size: var(--font-md); line-height: var(--font-md-lh); color: var(--on-surface-dim); max-width: 40ch; } .ui-empty__action { margin-top: var(--space-3); } /* ---------- Hero metric (§7.18) ---------- * One prominent number per page. Value capped at --font-hero (24px) * per the banned-aesthetic rule. No sparkline inside. */ .ui-hero-metric { display: flex; flex-direction: column; gap: var(--space-2); } .ui-hero-metric__value { display: flex; align-items: baseline; gap: var(--space-3); font-variant-numeric: tabular-nums; } .ui-hero-metric__num { font-size: var(--font-hero); line-height: var(--font-hero-lh); font-weight: var(--font-hero-weight); color: var(--on-surface); letter-spacing: -0.01em; } .ui-hero-metric__unit { font-size: var(--font-md); color: var(--on-surface-mute); } .ui-hero-metric__sub { font-size: var(--font-sm); color: var(--on-surface-mute); } .ui-hero-metric__trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-sm); font-weight: 500; font-variant-numeric: tabular-nums; } .ui-hero-metric__trend--up { color: var(--success); } .ui-hero-metric__trend--down { color: var(--danger); } .ui-hero-metric__trend--flat { color: var(--on-surface-mute); } /* ---------- Reading row (§7.19) ---------- * One labeled measurement: name | numeric input | unit. The dominant * data-entry primitive in Plant Entry. Pairs with .ui-field-section * for grouping (no more than 3 rows without a section label above). */ .ui-reading-row { display: grid; grid-template-columns: 1fr 120px 56px; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--outline-subtle); } .ui-reading-row:last-child { border-bottom: 0; } .ui-reading-row__label { font-size: var(--font-md); color: var(--on-surface); } .ui-reading-row__input { /* uses .ui-input + .ui-input--num */ } .ui-reading-row__unit { font-size: var(--font-sm); color: var(--on-surface-mute); text-align: left; } /* Read-only variant — value shown as text in the input slot. */ .ui-reading-row__readout { font-size: var(--font-md); color: var(--on-surface); text-align: right; font-variant-numeric: tabular-nums; padding: 0 var(--space-4); } /* ---------- Field-section label (§7.20) ---------- * Uppercase caption + optional source tag. Groups reading rows or * form fields within a panel without nesting panels. Pairs with the * .ui-pill primitive for the source tag. Spec rule: never use as a * panel title (panel titles are --font-lg). */ .ui-field-section { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--outline-subtle); } .ui-field-section:first-child { margin-top: 0; } .ui-field-section__label { font-size: var(--font-xs); line-height: var(--font-xs-lh); font-weight: var(--font-xs-weight); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-surface-mute); } /* ---------- Shared card shell (§7.6) ---------- */ .ui-card, .ui-panel { background: var(--surface-low); border: 1px solid var(--outline); border-radius: var(--radius-3); display: flex; flex-direction: column; } .ui-card { padding: var(--space-4); } .ui-card--compact { padding: var(--space-3) var(--space-4); } .ui-card--spacious { padding: var(--space-5); } .ui-card--flush { padding: 0; } .ui-card--scroll { overflow: auto; } /* ---------- Panel (§7.7) ---------- */ .ui-panel__header { height: var(--panel-header); padding: 0 var(--space-5); border-bottom: 1px solid var(--outline-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .ui-panel__title { margin: 0; font-size: var(--font-lg); line-height: var(--font-lg-lh); font-weight: var(--font-lg-weight); color: var(--on-surface); } .ui-panel__actions { display: flex; gap: var(--space-3); } .ui-panel__body { padding: var(--space-5); /* Universal containment: long tables inside narrow cards scroll horizontally inside the panel rather than clipping past the card border. Paired with min-width: 0 so the body can shrink below its intrinsic table width inside any flex/grid parent. */ min-width: 0; overflow-x: auto; } .ui-panel__body--scroll { overflow: auto; } .ui-panel__body--scroll .ui-table thead th { position: sticky; top: 0; z-index: 1; } /* ---------- Panel variants (§7.7b) ---------- */ /* Registry-driven panel sizing. Replaces per-card `max-height + overflow-y: auto` patches in page CSS. Card height is computed from the rows it intends to show (one source of truth in the card registry → table_dims.display_rows), so row-mate dead space collapses and "make it scrollable" stops being the silent escape valve. Usage:
...
...
Height math (matches table density tokens): panel-header (40) + body vertical padding (32) + table-header (32) + row-default (32) × rows = 104 + 32 × rows The macro `panel(variant='table', style='--rows: N')` emits the right HTML. Source for --rows lives in the card registry under each card's table_dims.display_rows — never hand-tuned per card. */ .ui-panel--table { --rows: 6; flex: 0 0 auto; height: calc( var(--panel-header) + var(--space-5) * 2 + var(--header-row) + var(--row-default) * var(--rows) ); } .ui-panel--table > .ui-panel__body { overflow-y: hidden; } /* Opt-in escape hatch: when scroll IS the right choice for a specific card, set data-overflow="scroll" on the panel. Must be a deliberate, marked choice — never silent like the old per-card CSS patches. */ .ui-panel--table[data-overflow="scroll"] > .ui-panel__body { overflow-y: auto; } /* ---------- Fill rails (§7.8) ---------- */ /* Shared layout primitive for columns where cards should absorb small amounts of leftover rail height without page CSS inventing per-card stretch rules. The parent supplies the available height; children opt in with .ui-fill-rail__item. */ .ui-fill-rail { display: flex; flex-direction: column; min-height: 0; } .ui-fill-rail__item { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; min-height: 0; } .ui-fill-rail__item--fill { flex: 1 1 auto; } .ui-fill-rail__item--fill > .ui-panel { flex: 1 1 auto; } .ui-fill-rail--balanced > .ui-fill-rail__item { flex-grow: 1; flex-shrink: 0; } .ui-fill-rail--balanced > .ui-fill-rail__item > .ui-panel { flex: 1 1 auto; } .ui-fill-grid { display: grid; min-height: 0; align-items: stretch; } .ui-fill-grid__item { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ui-fill-grid--fill > .ui-fill-grid__item > .ui-panel { flex: 1 1 auto; } /* View ↔ edit mode. Default state is view. Scoped to [data-edit-panel] (the canonical hook wired by pages/accounting/accounting.js) so non-panel hosts like .acct-edit-row also get mode-based hide rules. */ [data-edit-panel][data-mode="view"] .is-edit-only { display: none !important; } [data-edit-panel][data-mode="edit"] .is-view-only { display: none !important; } .ui-field__readout { display: block; height: var(--field-height); line-height: var(--field-height); font-size: var(--font-md); color: var(--on-surface); font-variant-numeric: tabular-nums; } .ui-field__readout--num { text-align: right; font-feature-settings: "tnum"; } .ui-field__readout--empty { color: var(--on-surface-mute); } /* Revert-all button is hidden until the panel has a dirty field. */ [data-edit-panel] [data-revert-all] { display: none; } [data-edit-panel].has-dirty [data-revert-all] { display: inline-flex; } /* ---------- Banner (§7.8) ---------- * Solid filled accent. The button-strong color carries severity, with * on-color text. Reserved for high-priority page-level announcements; * for in-context row hints prefer §7.22 attention strip. */ .ui-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-2); font-size: var(--font-md); line-height: var(--font-md-lh); text-decoration: none; color: inherit; } .ui-banner__icon { flex: 0 0 auto; display: inline-flex; } .ui-banner__title { font-weight: 700; flex: 0 1 auto; min-width: 0; margin-right: var(--space-3); } .ui-banner__detail { flex: 1 1 auto; min-width: 0; opacity: 0.92; } .ui-banner__meta { flex: 0 0 auto; font-size: var(--font-sm); opacity: 0.85; font-variant-numeric: tabular-nums; } .ui-banner__chevron { flex: 0 0 auto; opacity: 0.7; } /* Solid (default) — filled accent surface, on-color text. Reserve for the * one main page-level announcement. */ .ui-banner--info { background: var(--info-strong); color: var(--on-info); } .ui-banner--warn { background: var(--warn-strong); color: var(--on-warn); } .ui-banner--danger { background: var(--danger-strong); color: var(--on-danger); } /* Hairline — neutral surface, 1px accent border, no fill tint. Use for * stacked rows (attention strip), inline hints, or quieter notices. */ .ui-banner--hairline { background: var(--surface-low); border: 1px solid var(--outline); color: var(--on-surface); } .ui-banner--hairline .ui-banner__detail { color: var(--on-surface-dim); opacity: 1; } .ui-banner--hairline .ui-banner__meta { color: var(--on-surface-mute); opacity: 1; } .ui-banner--hairline.ui-banner--info { border-color: var(--info); } .ui-banner--hairline.ui-banner--info .ui-banner__title { color: var(--info); } .ui-banner--hairline.ui-banner--warn { border-color: var(--warn); } .ui-banner--hairline.ui-banner--warn .ui-banner__title { color: var(--warn); } .ui-banner--hairline.ui-banner--danger { border-color: var(--danger); } .ui-banner--hairline.ui-banner--danger .ui-banner__title { color: var(--danger); } a.ui-banner--hairline { transition: background 80ms linear; } a.ui-banner--hairline:hover { background: var(--surface-container); } a.ui-banner--hairline:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ---------- Pill / status (§7.15) ---------- */ .ui-pill { display: inline-block; padding: 1px var(--space-3); border: 1px solid var(--outline); border-radius: var(--radius-1); background: var(--surface-high); font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-surface-mute); white-space: nowrap; } .ui-pill--success { background: var(--success-surface); border-color: var(--success); color: var(--success); } .ui-pill--warn { background: var(--warn-surface); border-color: var(--warn); color: var(--warn); } .ui-pill--danger { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); } .ui-pill--info { background: var(--info-surface); border-color: var(--primary-strong); color: var(--primary); } a.ui-pill--nav { text-decoration: none; } a.ui-pill--nav:hover { color: var(--primary); text-decoration: underline; } a.ui-pill--nav:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Chip — alias of pill. Same primitive, used inside auth flows where * "chip" reads more naturally (e.g. role chip on a login error). Any * pill modifier (--success, --warn, --danger, --info) works on chip. */ .ui-chip { /* shape inherits from .ui-pill; expose as a separate class so call sites don't have to use the pill name in auth copy. Use exactly like .ui-pill. */ display: inline-block; padding: 1px var(--space-3); border: 1px solid var(--outline); border-radius: var(--radius-1); background: var(--surface-high); font-size: var(--font-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-surface-mute); white-space: nowrap; } .ui-chip--success { background: var(--success-surface); border-color: var(--success); color: var(--success); } .ui-chip--warn { background: var(--warn-surface); border-color: var(--warn); color: var(--warn); } .ui-chip--danger { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); } .ui-chip--info { background: var(--info-surface); border-color: var(--primary-strong); color: var(--primary); } /* ---------- Table (§7.9) ---------- */ .ui-table { width: 100%; border-collapse: collapse; font-size: var(--font-md); line-height: var(--font-md-lh); } .ui-table thead th { position: sticky; top: 0; height: var(--header-row); padding: 0 var(--space-5); background: var(--surface-high); border-bottom: 1px solid var(--outline); font-size: var(--font-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-surface-mute); text-align: left; /* Allow header labels to wrap inside narrow card columns instead of forcing the whole table wider than its container. Numeric headers (.num) keep nowrap below so numbers/units don't break across lines. */ white-space: normal; } .ui-table tbody td { height: var(--row-default); padding: 0 var(--space-5); border-bottom: 1px solid var(--outline-subtle); color: var(--on-surface); } .ui-table tbody tr:hover td { background: var(--surface-high); } .ui-table .num, .ui-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ui-table .center, .ui-table th.center { text-align: center; } .ui-table .num--danger, .ui-table .delta--over { color: var(--danger); font-weight: 500; } .ui-table .num--success, .ui-table .delta--under { color: var(--success); font-weight: 500; } .ui-table .num--warn { color: var(--warn); font-weight: 500; } .ui-table .num--changed { color: var(--warn); font-weight: 500; } .ui-table--compact tbody td { height: var(--row-compact); } /* Tinted panel header — for tables/lists living inside a panel. * Pairs with .ui-panel__header. Slightly raised tint distinguishes * the header strip from the table header below. */ .ui-panel__header--tinted { background: color-mix(in srgb, var(--surface-high) 60%, transparent); } /* ---------- Page header (§7.12) ---------- */ .ui-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid var(--outline); margin-bottom: var(--space-6); } .ui-page-header > div:first-child { min-width: 0; flex: 1 1 320px; } .ui-page-header__actions { flex: 0 0 auto; } .ui-breadcrumb { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-sm); color: var(--on-surface-mute); margin-bottom: var(--space-2); } .ui-breadcrumb__sep { color: var(--on-surface-mute); } .ui-breadcrumb__current { color: var(--on-surface-dim); } .ui-page-header__title { margin: 0; font-size: var(--font-xl); line-height: var(--font-xl-lh); font-weight: 600; letter-spacing: -0.01em; color: var(--on-surface); } .ui-page-header__actions { display: flex; align-items: center; gap: var(--space-4); } /* ---------- Stepper (prev / label / next) ---------- */ .ui-stepper { display: inline-flex; align-items: stretch; height: var(--button-h); border: 1px solid var(--surface-highest); border-radius: var(--radius-2); background: var(--surface-low); overflow: hidden; } .ui-stepper__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--button-h); appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--on-surface-dim); font: inherit; font-size: var(--font-lg); cursor: pointer; } .ui-stepper__btn:hover { background: var(--surface-high); color: var(--on-surface); } .ui-stepper__label { display: inline-flex; align-items: center; padding: 0 var(--space-5); border: 0; border-left: 1px solid var(--surface-highest); border-right: 1px solid var(--surface-highest); background: transparent; font: inherit; font-size: var(--font-md); font-weight: 500; color: var(--on-surface); cursor: default; } button.ui-stepper__label { cursor: pointer; } button.ui-stepper__label:hover { background: var(--surface-high); } button.ui-stepper__label:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Title-sized stepper — the picker label reads as the page title. Used by /accounting and /plant headers, replacing a separate

that duplicated the picker's date. */ .ui-stepper--title { height: auto; } .ui-stepper--title .ui-stepper__btn { width: calc(var(--button-h) + var(--space-2)); font-size: var(--font-xl); } .ui-stepper--title .ui-stepper__label { padding: var(--space-2) var(--space-5); font-size: var(--font-xl); line-height: var(--font-xl-lh); font-weight: 600; letter-spacing: -0.01em; } /* Hidden form-value carrier that backs a stepper. The visible UI is * .ui-calendar below; this exists only so a parent
serializes * the chosen date. Native picker is not used. */ .ui-stepper__hidden-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; } /* ---------- Calendar popover ---------- * Custom popup the stepper opens. We don't use the native date picker * because Chrome/Safari on macOS drop `color-scheme` for the popup * shadow root, leaving it permanently light. Tokens-only — flips with * the theme automatically. */ .ui-calendar { position: fixed; z-index: 50; display: none; min-width: 280px; background: var(--surface-low); color: var(--on-surface); border: 1px solid var(--outline); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-4); font-size: var(--font-md); } .ui-calendar.is-open { display: block; } .ui-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .ui-calendar__title { background: transparent; border: 0; border-radius: var(--radius-1); font-weight: 600; color: var(--on-surface); font-size: var(--font-md); cursor: pointer; padding: var(--space-1) var(--space-2); margin-left: calc(var(--space-2) * -1); } .ui-calendar__title:hover { background: var(--surface-high); } .ui-calendar__title:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ui-calendar__nav { display: inline-flex; gap: var(--space-1); } .ui-calendar__nav button { background: transparent; border: 0; color: var(--on-surface-mute); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-1); cursor: pointer; transition: background 80ms linear; } .ui-calendar__nav button:hover { background: var(--surface-high); color: var(--on-surface); } .ui-calendar__nav button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ui-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ui-calendar__dow { text-align: center; font-size: var(--font-xs); font-weight: var(--font-xs-weight, 600); color: var(--on-surface-mute); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: var(--space-2) 0; } .ui-calendar__day { background: transparent; border: 0; color: var(--on-surface); height: 32px; border-radius: var(--radius-1); font-size: var(--font-md); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 80ms linear; } .ui-calendar__day:hover { background: var(--surface-high); } .ui-calendar__day:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ui-calendar__day.is-other { color: var(--on-surface-mute); opacity: 0.5; } .ui-calendar__day.is-today { box-shadow: inset 0 0 0 1px var(--outline); } .ui-calendar__day.is-selected { background: var(--primary-strong); color: var(--on-primary); } .ui-calendar__day.is-selected.is-today { box-shadow: none; } .ui-calendar__grid--months { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); min-width: 248px; } .ui-calendar__month { background: transparent; border: 1px solid transparent; color: var(--on-surface); min-height: 38px; border-radius: var(--radius-1); font-size: var(--font-sm); font-weight: 600; cursor: pointer; transition: background 80ms linear, border-color 80ms linear; } .ui-calendar__month:hover { background: var(--surface-high); border-color: var(--outline-subtle); } .ui-calendar__month:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ui-calendar__month.is-selected { background: var(--primary-strong); color: var(--on-primary); } .ui-calendar__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--outline-subtle); } .ui-calendar__foot button { background: transparent; border: 0; color: var(--primary); font-size: var(--font-sm); cursor: pointer; padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); } .ui-calendar__foot button:hover { background: var(--surface-high); } .ui-calendar__foot button:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ---------- Icon button (§7.2) ---------- * Square 32×32 button for toolbar/row affordances. Always carries * an aria-label — never icon-only without a tooltip. */ .ui-icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--button-h); height: var(--button-h); padding: 0; border: 1px solid var(--outline); border-radius: var(--radius-2); background: var(--surface-high); color: var(--on-surface-dim); cursor: pointer; transition: background 80ms linear, border-color 80ms linear, color 80ms linear; } .ui-icon-button:hover { background: var(--surface-highest); color: var(--on-surface); } .ui-icon-button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ui-icon-button:disabled { opacity: 0.5; cursor: not-allowed; } .ui-icon-button svg, .ui-icon-button .ui-icon-button__glyph { width: 16px; height: 16px; display: block; } .ui-icon-button--danger { color: var(--danger); border-color: var(--outline); } .ui-icon-button--danger:hover { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); } /* ---------- Status dot (§7.14) ---------- * 8px ambient-state dot. Always paired with a text label nearby — * the dot is reinforcement, not the only signal. No size variants, * no animation. */ .ui-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--on-surface-mute); flex-shrink: 0; vertical-align: middle; } .ui-status-dot--green { background: var(--success); } .ui-status-dot--amber { background: var(--warn); } .ui-status-dot--red { background: var(--danger); } .ui-status-dot--grey { background: var(--on-surface-mute); } /* Convenience wrapper for "dot + label" pairings used in panel * headers, table cells, and admin user lists. */ .ui-status { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-sm); color: var(--on-surface-dim); white-space: nowrap; } /* ---------- Side nav (§7.13) ---------- * Fixed 200px sidebar. Flat list of links per group. No collapse, * no nesting in MVP. Active link uses --surface-highest. */ .ui-nav { width: var(--nav-width); flex-shrink: 0; background: var(--surface-low); border-right: 1px solid var(--outline); padding: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-6); height: 100%; overflow-y: auto; } .ui-nav__brand { padding: 0 var(--space-5) var(--space-5); font-size: var(--font-lg); font-weight: 600; color: var(--on-surface); letter-spacing: -0.01em; border-bottom: 1px solid var(--outline-subtle); margin: 0 0 var(--space-2); } .ui-nav__group { display: flex; flex-direction: column; gap: var(--space-1); } .ui-nav__group-label { padding: 0 var(--space-5) var(--space-2); font-size: var(--font-xs); line-height: var(--font-xs-lh); font-weight: var(--font-xs-weight); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-surface-mute); } .ui-nav__link { display: flex; align-items: center; gap: var(--space-3); height: var(--row-default); padding: 0 var(--space-5); color: var(--on-surface-dim); text-decoration: none; font-size: var(--font-md); font-weight: 500; border-left: 2px solid transparent; transition: background 80ms linear, color 80ms linear; } .ui-nav__link:hover { background: var(--surface); color: var(--on-surface); } .ui-nav__link.is-active, .ui-nav__link[aria-current="page"] { background: var(--surface-highest); color: var(--on-surface); border-left-color: var(--primary-strong); } .ui-nav__link:focus-visible { outline: none; box-shadow: inset var(--focus-ring); } /* ---------- Attention strip (§7.22) ---------- * Layout-only stack of hairline banners (§7.8 .ui-banner--hairline). * The banner carries severity, hover, focus, and link styling. This * container only handles spacing and the optional "+N more" footer. */ .ui-attention-strip { display: flex; flex-direction: column; gap: var(--space-2); } /* "+N more" footer when issues exceed the 6-row visible cap. Styled * as a quieter, neutral hairline so it reads as meta, not as another * issue. */ .ui-attention-strip__more { display: block; padding: var(--space-3) var(--space-5); border: 1px solid var(--outline); border-radius: var(--radius-2); background: var(--surface-low); color: var(--on-surface-dim); font-size: var(--font-sm); text-decoration: none; text-align: center; transition: background 80ms linear; } .ui-attention-strip__more:hover { background: var(--surface-container); color: var(--on-surface); } .ui-attention-strip__more:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ---------- Page shell (§5) ---------- * 200px fixed nav rail + main column, no max-width on the main column. * Sidebar uses the existing .ui-nav primitive (§7.13). */ .ui-app { display: grid; grid-template-columns: var(--nav-width) 1fr; min-height: 100vh; } .ui-app > .ui-nav { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--outline); } .ui-main { min-width: 0; /* lets table overflow scroll instead of busting the grid */ padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bot); background: var(--surface); } /* ---------- Grid (§5) ---------- * 12-column grid with --space-5 gap. Children declare span via data-cols * (1–12). Used to arrange panels horizontally without raw CSS. */ .ui-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); } .ui-grid > [data-cols="1"] { grid-column: span 1; } .ui-grid > [data-cols="2"] { grid-column: span 2; } .ui-grid > [data-cols="3"] { grid-column: span 3; } .ui-grid > [data-cols="4"] { grid-column: span 4; } .ui-grid > [data-cols="5"] { grid-column: span 5; } .ui-grid > [data-cols="6"] { grid-column: span 6; } .ui-grid > [data-cols="7"] { grid-column: span 7; } .ui-grid > [data-cols="8"] { grid-column: span 8; } .ui-grid > [data-cols="9"] { grid-column: span 9; } .ui-grid > [data-cols="10"] { grid-column: span 10; } .ui-grid > [data-cols="11"] { grid-column: span 11; } .ui-grid > [data-cols="12"] { grid-column: span 12; } @media (max-width: 900px) { .ui-app { grid-template-columns: 1fr; } .ui-app > .ui-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--outline); } .ui-grid > [data-cols] { grid-column: span 12; } }