/* Command Center shell. Every --cc-* token (colors + spacing/radii/width) now lives in the unified theme blocks in index.html :root and flips with [data-theme] on , so the whole shell flips light<->dark with the rest of the app. This element just consumes them. The old per-shell token block, the legacy-token remaps, and the dead [data-cc-theme] stub were removed so there is a SINGLE theme mechanism (data-theme). */ .manager-shell { min-height: 100dvh; background: var(--cc-app); color: var(--cc-text); } .manager-shell *, .manager-shell *::before, .manager-shell *::after { box-sizing: border-box; } .manager-shell :is(button, a, input, select, textarea):focus-visible { outline: 2px solid transparent; box-shadow: var(--cc-focus); } .s57-shell { position: relative; display: grid; grid-template-columns: var(--cc-sidebar-width) minmax(0, 1fr); min-height: 100dvh; background: var(--cc-app); } .s57-shell__sidebar-region { min-width: 0; min-height: 100dvh; background: var(--cc-sidebar); } .s57-shell__workspace { min-width: 0; height: 100dvh; overflow: hidden; background: var(--cc-panel); } .s57-shell__main { height: 100%; overflow-x: hidden; overflow-y: auto; padding: var(--cc-space-6); color: var(--cc-text); } .s57-page-content { min-width: 0; } .s57-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; display: flex; flex-direction: column; width: var(--cc-sidebar-width); min-height: 100dvh; overflow: hidden; background: var(--cc-sidebar); color: var(--cc-sidebar-ink); border-right: 1px solid var(--cc-sidebar-border); } .s57-sidebar[hidden] { display: none; } .s57-sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-3); min-height: 72px; padding: var(--cc-space-4); border-bottom: 1px solid var(--cc-sidebar-border); } .s57-sidebar__brand { font-size: 16px; font-weight: 800; letter-spacing: -.02em; } .s57-sidebar__brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: var(--cc-space-3); border-radius: var(--cc-radius-sm); background: var(--cc-blue-strong); color: #fff; } .s57-sidebar__items { flex: 1; overflow-y: auto; padding: var(--cc-space-3) var(--cc-space-2); } .s57-sidebar__item { display: flex; align-items: center; gap: var(--cc-space-3); width: 100%; min-height: 44px; margin-bottom: var(--cc-space-1); padding: 0 var(--cc-space-3); border: 0; border-left: 3px solid transparent; border-radius: 10px; background: var(--cc-clear); color: var(--cc-sidebar-ink-dim); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .s57-sidebar__item:hover { background: var(--cc-sidebar-hover); color: var(--cc-sidebar-ink); } .s57-sidebar__item.is-active { border-left-color: var(--cc-blue); background: var(--cc-sidebar-active); color: var(--cc-sidebar-active-ink); } .s57-sidebar__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; } .s57-sidebar__icon svg { width: 19px; height: 19px; } .s57-sidebar__footer { display: grid; gap: var(--cc-space-2); padding: var(--cc-space-3); border-top: 1px solid var(--cc-sidebar-border); } .s57-sidebar__footer .s57-button { justify-content: flex-start; color: var(--cc-sidebar-ink-dim); border-color: var(--cc-sidebar-border); } .s57-sidebar__close { flex: 0 0 44px; background: var(--cc-sidebar-hover); color: var(--cc-sidebar-ink); border-color: var(--cc-sidebar-border); } .s57-drawer-backdrop { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; border: 0; background: var(--overlay-scrim); cursor: default; } .s57-mobile-header { display: none; position: sticky; top: 0; z-index: 45; align-items: center; gap: var(--cc-space-3); min-height: calc(64px + var(--safe-top)); padding: calc(var(--cc-space-3) + var(--safe-top)) var(--cc-space-4) var(--cc-space-3); background: var(--cc-sidebar); color: var(--cc-sidebar-ink); border-bottom: 1px solid var(--cc-sidebar-border); } .s57-mobile-header__title { display: flex; flex: 1; min-width: 0; flex-direction: column; } .s57-mobile-header__title span { color: var(--cc-sidebar-ink-dim); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .s57-mobile-header__title strong { overflow: hidden; color: var(--cc-sidebar-ink); font-size: 17px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .s57-mobile-header__actions { display: flex; align-items: center; gap: var(--cc-space-2); } .s57-legacy-mobile-header { background: var(--cc-sidebar) !important; color: var(--cc-sidebar-ink) !important; border-bottom-color: var(--cc-sidebar-border) !important; } .s57-legacy-mobile-header :is(h1, p) { color: var(--cc-sidebar-ink) !important; } .s57-legacy-mobile-header button { min-width: 44px; min-height: 44px; border-color: var(--cc-sidebar-border) !important; background: var(--cc-sidebar-hover) !important; color: var(--cc-sidebar-ink) !important; } .s57-icon-button { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm); background: var(--cc-card); color: var(--cc-text); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; } .s57-mobile-header > .s57-icon-button { border-color: var(--cc-sidebar-border); background: var(--cc-sidebar-hover); color: var(--cc-sidebar-ink); } .s57-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cc-space-6); margin: 0 auto var(--cc-space-6); max-width: 1440px; } .s57-page-header__copy { min-width: 0; } .s57-eyebrow { margin: 0 0 var(--cc-space-1); color: var(--cc-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .s57-page-header h1 { margin: 0; color: var(--cc-text); font-size: clamp(24px, 2vw, 32px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; } .s57-page-header__description, .s57-page-header__aside { color: var(--cc-muted); font-size: 13px; } .s57-page-header__description { max-width: 70ch; margin: var(--cc-space-2) 0 0; line-height: 1.55; } .s57-page-header__aside { display: flex; align-items: center; justify-content: flex-end; gap: var(--cc-space-2); flex-wrap: wrap; } .s57-metric, .s57-card, .s57-mobile-card, .s57-photo, .s57-sensor { border: 1px solid var(--cc-border); background: var(--cc-card); color: var(--cc-text); box-shadow: var(--cc-shadow-sm); } .s57-metric { min-width: 0; padding: var(--cc-space-4); border-radius: var(--cc-radius-md); } .s57-metric__top, .s57-photo__heading, .s57-sensor__header { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-2); } /* H-6: the stocking photo wall is a 2-up grid on a phone, so a photo card can be ~150px wide. The status badge is `white-space: nowrap` (correct in a wide row, wrong here) and a label like "detection_failed" ran straight out of the card — invisibly, because .s57-shell__main is overflow-x:hidden. Inside a photo card the badge wraps instead of escaping, and takes its own line when the title needs the width. */ .s57-photo__heading { flex-wrap: wrap; } .s57-photo__heading h3 { min-width: 0; overflow-wrap: anywhere; } .s57-photo__heading .s57-status { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; } .s57-metric__top p, .s57-metric__detail { margin: 0; color: var(--cc-muted); font-size: 11px; } .s57-metric__top p { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .s57-metric__value { display: block; margin: var(--cc-space-2) 0 var(--cc-space-1); font-size: clamp(24px, 3vw, 34px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; } .s57-status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; } .s57-tone--neutral { color: var(--cc-muted); } .s57-tone--info { color: var(--cc-blue); } .s57-tone--success { color: var(--status-success-ink); } .s57-tone--warning { color: var(--status-warning-ink); } .s57-tone--critical { color: var(--status-critical-ink); } .s57-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--cc-space-2); min-height: 44px; padding: 0 var(--cc-space-4); border: 1px solid transparent; border-radius: var(--cc-radius-sm); font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } /* --cc-blue-strong, not --cc-blue: white on the DARK-theme --cc-blue (#3B82F6) measures 3.68:1 against AA's 4.5. The strong token is that same blue one step darker (#2563EB dark / #1D4ED8 light) and gives 5.17 / 6.70. It is a TOKEN, deliberately, not a `[data-theme="dark"] .selector` override: this file forbids per-element theme overrides (see the note near line 1001, and tests/theme-machinery.spec.js:108 which fails the build for one). Theme differences belong in the token values, in one place. */ .s57-button--primary { background: var(--cc-blue-strong); color: #fff; } .s57-button--secondary { background: var(--cc-card); color: var(--cc-text); border-color: var(--cc-border); } .s57-button--quiet { background: transparent; color: var(--cc-muted); border-color: transparent; } .s57-button--success { background: var(--status-success-bg); color: var(--status-success-ink); } .s57-button--warning { background: var(--cc-warning); color: #3A2500; } .s57-button--destructive { background: var(--status-critical-bg); color: var(--status-critical-ink); } .s57-button:disabled { cursor: not-allowed; opacity: .48; } /* H-1/H-5 (2026-08-13): this ONE rule set now backs every sub-tab strip in the manager app — Operations, Settings, Cold Storage, the Staff agenda day picker, and (newly) Pricebook, Review Hub and the Performance period selector, which each used to hand-roll their own geometry. Changes here are felt in all seven places, which is the point. */ .s57-tabs { display: flex; gap: var(--cc-space-2); max-width: 100%; margin-bottom: var(--cc-space-4); overflow-x: auto; overflow-y: hidden; /* Hide the scrollbar in both engines: Firefox showed a chrome-coloured track over the pills, and iOS never renders one at all — so the bar could never be the affordance. The [data-scroll] fade below is the affordance. */ scrollbar-width: none; -webkit-overflow-scrolling: touch; /* A horizontal drag on the strip must not chain into the page's own scroller (or the browser's back-swipe) once the strip hits its end. */ overscroll-behavior-x: contain; scroll-padding-inline: var(--cc-space-4); } .s57-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Edge-fade affordance. PillTabs writes data-scroll = none|start|end|both from a real scrollWidth/scrollLeft measurement, so a side only fades when content is actually hidden on that side. A permanently-masked strip would be decoration; this one is a readout. */ .s57-tabs[data-scroll="end"] { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } .s57-tabs[data-scroll="start"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%); } .s57-tabs[data-scroll="both"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .s57-tabs__tab { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: max-content; min-height: 44px; padding: 0 var(--cc-space-4); border: 1px solid var(--cc-border); border-radius: 999px; background: var(--cc-card); color: var(--cc-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; scroll-snap-align: center; } .s57-tabs__label { white-space: nowrap; } /* Count badge (Pricebook review queue, Review Hub filters). Reads as a secondary number inside the pill, and inverts on the selected pill so it stays legible on --cc-blue. */ .s57-tabs__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--cc-panel); color: var(--cc-muted); font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; line-height: 18px; } .s57-tabs__tab[aria-selected="true"] { border-color: var(--cc-blue); background: var(--cc-blue-strong); color: #fff; } .s57-tabs__tab[aria-selected="true"] .s57-tabs__badge { /* B-27: a 22%-white pill under white 11px digits measured 3.49 light / 2.70 dark — the queue COUNT was the least readable thing on the tab. Inverted so the count sits on near-solid white in the tab's own blue. */ background: rgba(255, 255, 255, .92); color: var(--cc-blue); } /* A tab that is deliberately not yet available (U-8). Not a disabled pill that looks like it should work — muted, default cursor, and it carries a "Soon" chip so the state is stated, not implied. */ .s57-tabs__tab:disabled, .s57-tabs__tab[aria-disabled="true"] { cursor: default; opacity: .55; background: transparent; border-style: dashed; } .s57-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .s57-card { overflow: hidden; border-radius: var(--cc-radius-md); } .s57-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cc-space-4); padding: var(--cc-space-4) var(--cc-space-4) 0; } .s57-card__header h2, .s57-mobile-card h3, .s57-photo h3, .s57-sensor h3 { margin: 0; color: var(--cc-text); font-size: 15px; font-weight: 800; } .s57-card__header p, .s57-mobile-card p { margin: var(--cc-space-1) 0 0; color: var(--cc-muted); font-size: 12px; } .s57-card__body { padding: var(--cc-space-4); } .s57-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-card); } .s57-table { width: 100%; border-collapse: collapse; color: var(--cc-text); font-size: 13px; } .s57-table caption { padding: var(--cc-space-3); text-align: left; font-weight: 800; } .s57-table th, .s57-table td { padding: var(--cc-space-3) var(--cc-space-4); border-bottom: 1px solid var(--cc-border); text-align: left; vertical-align: middle; } .s57-table th { background: var(--bg3); color: var(--cc-muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } .s57-table .is-right { text-align: right; } .s57-table .is-center { text-align: center; } .s57-mobile-card { padding: var(--cc-space-4); border-radius: var(--cc-radius-md); } .s57-mobile-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cc-space-3); } .s57-mobile-card__meta { display: grid; gap: var(--cc-space-2); margin-top: var(--cc-space-3); color: var(--cc-muted); font-size: 12px; } /* H-2 · Pricebook catalog card (mobile). Built on .s57-mobile-card so it inherits the design system's surface, border, radius and shadow; only the internals are pricebook-specific. */ .pb-card__name { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; /* Two lines, then ellipsis — tapping toggles .is-expanded and shows it all. */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .pb-card__name.is-expanded { display: block; -webkit-line-clamp: none; overflow: visible; } .pb-card__name:focus-visible { outline: 2px solid transparent; box-shadow: var(--cc-focus); border-radius: 6px; } .pb-card__price { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; text-align: right; /* The price is the answer this screen exists to give. It never wraps and it is never clipped — the name yields space to it, not the other way round. */ white-space: nowrap; } .pb-card__retail { font-family: var(--mono, monospace); font-size: 17px; font-weight: 800; line-height: 1.1; } .pb-card__margin { min-width: 54px; padding: 2px 8px; border-radius: 7px; font-family: var(--mono, monospace); font-size: 12px; font-weight: 800; text-align: center; } .pb-card__cost { font-family: var(--mono, monospace); font-size: 11px; } .pb-card__meta { display: flex; align-items: center; gap: var(--cc-space-3); min-width: 0; } .pb-card__chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; } .pb-card__chip { padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; } .pb-card__select { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--cc-border); border-radius: 9px; color: var(--cc-muted); font-size: 13px; font-weight: 700; cursor: pointer; } .s57-mobile-card__actions, .s57-photo__actions, .s57-sensor__actions { display: flex; gap: var(--cc-space-2); margin-top: var(--cc-space-4); flex-wrap: wrap; } .s57-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--cc-space-4); background: var(--overlay-scrim); } .s57-dialog, .s57-lightbox { width: min(100%, 680px); max-height: min(90dvh, 900px); overflow: auto; /* H-7: a dialog IS a legitimate scroller, but it sits over the page scroller — without this, hitting its end continues the gesture on the dashboard behind it. */ overscroll-behavior: contain; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); background: var(--cc-card); color: var(--cc-text); box-shadow: var(--cc-shadow-md); } .s57-dialog--sm { max-width: 480px; } .s57-dialog--lg { max-width: 920px; } .s57-dialog__header, .s57-lightbox__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cc-space-4); padding: var(--cc-space-4); border-bottom: 1px solid var(--cc-border); } .s57-dialog__header h2, .s57-lightbox__header h2 { margin: 0; color: var(--cc-text); font-size: 20px; } .s57-dialog__header p { margin: var(--cc-space-1) 0 0; color: var(--cc-muted); font-size: 12px; } .s57-dialog__body { padding: var(--cc-space-4); } .s57-dialog__footer, .s57-lightbox__controls { display: flex; justify-content: flex-end; gap: var(--cc-space-2); padding: var(--cc-space-4); border-top: 1px solid var(--cc-border); } .s57-overlay--lightbox { background: rgba(2, 8, 18, .84); } .s57-lightbox { width: min(96vw, 1200px); background: var(--cc-lightbox-bg); color: #fff; border-color: rgba(255, 255, 255, .15); } .s57-lightbox__header { border-bottom-color: rgba(255, 255, 255, .12); } .s57-lightbox__header h2 { color: #fff; } .s57-lightbox__stage { position: relative; display: grid; place-items: center; min-height: 320px; padding: var(--cc-space-4); } .s57-lightbox__stage img { display: block; width: auto; max-width: 100%; max-height: 72dvh; object-fit: contain; } .s57-lightbox__controls { border-top-color: rgba(255, 255, 255, .12); } .s57-state { display: flex; align-items: center; justify-content: center; gap: var(--cc-space-3); min-height: 120px; padding: var(--cc-space-6); color: var(--cc-muted); text-align: center; } /* U-11: an empty state that owns a CTA has two children on one row. At 320px the row squeezed the button into a 4-line sliver next to the message, so the action stacks under the copy on a phone instead of competing with it. */ @media (max-width: 480px) { .s57-state { flex-direction: column; min-width: 0; } } .s57-state h3, .s57-state p { margin: 0; } .s57-state h3 { color: var(--cc-text); font-size: 15px; } .s57-state p { margin-top: var(--cc-space-1); font-size: 13px; } .s57-state__spinner { width: 20px; height: 20px; border: 2px solid var(--cc-border); border-top-color: var(--cc-blue); border-radius: 50%; animation: s57-spin .8s linear infinite; } .s57-state--error h3 { color: var(--status-critical-ink); } @keyframes s57-spin { to { transform: rotate(360deg); } } .s57-photo, .s57-sensor { overflow: hidden; border-radius: var(--cc-radius-md); } .s57-photo__media, .s57-photo__open { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 0; background: var(--bg3); } .s57-photo__open { min-height: 44px; padding: 0; cursor: zoom-in; } .s57-photo__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .s57-photo__unavailable { display: grid; place-items: center; align-content: center; gap: var(--cc-space-2); width: 100%; height: 100%; color: var(--cc-muted); font-size: 12px; font-weight: 700; } .s57-photo__unavailable span:first-child { font-size: 32px; } .s57-photo__content, .s57-sensor { padding: var(--cc-space-4); } .s57-sensor__temperature { display: block; margin: var(--cc-space-4) 0; font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .s57-sensor dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cc-space-3); margin: 0; } .s57-sensor dt { color: var(--cc-muted); font-size: 11px; } .s57-sensor dd { margin: var(--cc-space-1) 0 0; font-size: 13px; font-weight: 700; } .s57-sensor__alert { margin-top: var(--cc-space-3); padding: var(--cc-space-3); border: 1px solid rgba(239, 68, 68, .28); border-radius: var(--cc-radius-sm); background: var(--status-critical-bg); color: var(--status-critical-ink); font-size: 12px; font-weight: 700; } /* B-4: STALE is not OUT-OF-RANGE. Out-of-range is a measured food-safety alarm and keeps the critical red above. Stale means the feed died — the number on screen may look fine and prove nothing. Warning tone + a dashed edge so the two are distinguishable at a glance and by shape, not by hue alone (colour-blind safe). Tokens only, so both themes follow the existing status palette. */ .s57-sensor__alert--warning { border: 1px dashed var(--status-warning); background: var(--status-warning-bg); color: var(--status-warning-ink); } .s57-sensor--warning { border-color: var(--status-warning); } .s57-sensor--warning .s57-sensor__temperature { opacity: .65; } .s57-mobile-only { display: none !important; } /* Per-element [data-theme="dark"] .manager-shell overrides removed: the base .s57-* rules already consume flip tokens (--cc-*), so inputs and tables theme correctly in BOTH light and dark with no dark-only override needed. */ @media (max-width: 1023px) { .s57-shell { display: block; } .s57-shell__sidebar-region { min-height: 0; } .s57-shell__workspace { height: 100dvh; } .s57-mobile-header { display: flex; } .s57-sidebar--drawer { z-index: 80; width: min(320px, 88vw); box-shadow: var(--cc-shadow-md); } .s57-shell__main { height: calc(100dvh - 64px - var(--safe-top)); padding: var(--cc-space-4); } .s57-legacy-mobile-header { margin: calc(var(--cc-space-4) * -1) calc(var(--cc-space-4) * -1) var(--cc-space-4); } .s57-page-header { align-items: flex-start; } } @media (max-width: 768px) { .s57-shell__main { padding: var(--cc-space-3); } .s57-legacy-mobile-header { margin: calc(var(--cc-space-3) * -1) calc(var(--cc-space-3) * -1) var(--cc-space-3); } .s57-page-header { display: block; margin-bottom: var(--cc-space-4); } .s57-page-header__aside { justify-content: flex-start; margin-top: var(--cc-space-3); } .s57-desktop-only { display: none !important; } .s57-mobile-only { display: block !important; } .s57-dialog { width: 100%; max-height: calc(100dvh - var(--cc-space-4) * 2); } .s57-overlay { align-items: end; padding: var(--cc-space-2); } .s57-tabs { margin-inline: calc(var(--cc-space-3) * -1); padding-inline: var(--cc-space-3); } } @media (prefers-reduced-motion: reduce) { .manager-shell *, .manager-shell *::before, .manager-shell *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .s57-sidebar, .s57-mobile-header, .s57-drawer-backdrop { display: none !important; } .s57-shell, .s57-shell__workspace, .s57-shell__main { display: block; height: auto; overflow: visible; padding: 0; background: #fff; color: #000; } } /* Slice 4 — Staff mobile agenda (rendered only at <=768px in place of the weekly grid) */ .staff-agenda { display: flex; flex-direction: column; gap: var(--cc-space-4); margin-bottom: var(--cc-space-6); } .staff-agenda__coverage { display: flex; flex-direction: column; gap: var(--cc-space-2); } .staff-agenda__coverage-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--cc-text); } .staff-agenda__coverage-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-3); } .staff-agenda__coverage-hours { color: var(--cc-muted); font-size: 13px; font-weight: 600; } .staff-agenda__list { display: flex; flex-direction: column; gap: var(--cc-space-3); } .staff-agenda-card h3 { display: flex; align-items: center; } .staff-agenda-card__avatar { width: 10px; height: 10px; margin-right: var(--cc-space-2); border-radius: 50%; flex: none; } /* Slice 4 — Cold Storage live tiles (Store57UI.SensorCard). Desktop: a responsive card grid that wraps; mobile (<=768px): stacked. */ .s57-sensor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--cc-space-3); } .s57-sensor__header h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s57-sensor__status { display: inline-flex; align-items: center; gap: var(--cc-space-2); flex-shrink: 0; } .s57-sensor__test-badge { padding: 2px 6px; border-radius: 6px; background: var(--status-warning-bg); color: var(--status-warning-ink); font-size: 9px; font-weight: 800; letter-spacing: .04em; } /* Status dot severity derives only from the tile's existing online signal. */ .s57-sensor__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; } .s57-sensor__dot--good { background: var(--cc-success); } .s57-sensor__dot--warn { background: var(--cc-warning); } .s57-sensor__dot--critical { background: var(--cc-critical); } .s57-sensor__dot--neutral { background: var(--cc-muted); } /* Explicit "no reading" placeholder — a muted label beside the em-dash, never a fabricated temperature. */ .s57-sensor__no-reading { display: inline-flex; align-items: baseline; gap: var(--cc-space-2); } .s57-sensor__no-reading-mark { color: var(--cc-muted); } .s57-sensor__no-reading-text { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--cc-muted); } .s57-sensor__meta { display: grid; gap: var(--cc-space-3); } .s57-sensor .s57-sensor__readout { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .s57-sensor__context { margin: 0; color: var(--cc-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .s57-sensor-grid { grid-template-columns: 1fr; } } /* ── Cold Storage readability, 2026-08-24 ──────────────────────────────────── The tile now leads with the EQUIPMENT name ("Upright Cooler (Gatorade)", "Frz/Cooler Drawer 1 (Ice Cream)"), which is far longer than the Govee device names it replaced. The old `white-space: nowrap; text-overflow: ellipsis` on the header turned those into "Frz/Cooler Drawer 1 (Ice C…" on a 390px phone — a title a manager cannot act on. Equipment identity is safety-relevant, so the title wraps to its full content instead of using a line clamp that only moves the silent-truncation threshold. The same applied to __context (now the secondary sensor identity) and to the battery note, which is a whole sentence and must never be clipped to "Battery level not provi…". */ .s57-sensor__header h3 { white-space: normal; overflow-wrap: anywhere; display: block; overflow: visible; text-overflow: clip; line-height: 1.25; } .s57-sensor__context { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; } /* A dd holding a sentence (the battery note, the range caveat) must wrap. */ .s57-sensor dd { overflow-wrap: anywhere; word-break: break-word; } /* Nothing inside a tile may widen the page. minmax(0,…) is the fix for the classic grid overflow where a long unbreakable string forces a track wider than its container and the whole document scrolls sideways. */ .s57-sensor-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); } .s57-sensor, .s57-sensor__header, .s57-sensor__meta { min-width: 0; max-width: 100%; } .s57-sensor .s57-sensor__readout { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); } .s57-sensor__alert { overflow-wrap: anywhere; } /* The header row: schedule copy on the left, Check-now on the right. On a narrow phone they stack instead of squeezing the button to nothing, and the button keeps a 44px touch target. */ .cs-header { max-width: 100%; } @media (max-width: 480px) { .cs-header { flex-direction: column; align-items: stretch !important; } .cs-header > div:last-child { align-items: stretch !important; } .cs-header > div:last-child > button { width: 100%; } .cs-header > div:last-child > p { text-align: left !important; max-width: 100% !important; } } /* Theme control — bottom-left Auto/Dark/Light segmented control in the sidebar footer. Sits on the (flipping) sidebar surface, so it reads its own flip tokens and looks correct in both themes. */ .s57-theme-control { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--cc-sidebar-border); border-radius: 10px; background: var(--cc-sidebar-hover); } .s57-theme-control__opt { flex: 1; min-height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--cc-sidebar-ink-dim); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .s57-theme-control__opt:hover { color: var(--cc-sidebar-ink); } .s57-theme-control__opt.is-active { background: var(--cc-blue-strong); color: #fff; } .s57-theme-control__opt:focus-visible { outline: 2px solid transparent; box-shadow: var(--cc-focus); } /* PHONE TAP TARGET. The segmented control measured 82x34 CSS px on every phone width audited — under the 44px minimum this app holds itself to, and missed by 1.8.82's `min-height:44px` sweep because that rule targets input/select and these are