/* ============================================================= Enstructure ICC — Component CSS ============================================================= Reusable, token-driven component styles shared across every ICC document (console + Modal/Icon/Variations specs). Load AFTER tokens.css. Contains ONLY component-level chrome that can't be expressed as a Tailwind utility — never raw colors. ============================================================= */ /* ── Scrollbars — single source (supersedes the old tokens.css copy) ── */ .thin-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .thin-scroll::-webkit-scrollbar-track { background: transparent; } .thin-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; } .thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--content-subtle); } /* ── Utility shims that map to tokens ──────────────────────────────── */ .border-strong { border-color: var(--border-strong) !important; } .text-interactive-primary { color: var(--interactive-primary); } /* ── Default border colour — brand hairline, NOT Tailwind Play's grey #e5e7eb. Preflight defaults every border to grey; the brand wants the navy-tinted --border. Set it once globally so any `border` utility is on-brand without a per-element inline override. Tailwind border-* utilities (border-subtle / -strong / status borders) and inline styles still win via specificity. ── */ *, *::before, *::after { border-color: var(--border); } /* ════════════════════════════════════════════════════════════════════ LAYERED-OS SURFACE LANGUAGE (L0–L5) ════════════════════════════════════════════════════════════════════ */ /* L0 — Desktop backbone: faint blueprint grid + edge-masked bloom behind the whole shell. Sits at z-(-1); chrome/content planes ride above it. */ .os-desktop { position: relative; background-color: var(--desktop); } .os-desktop::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--pattern-grid); background-size: var(--pat-size) var(--pat-size); -webkit-mask-image: radial-gradient(135% 115% at 85% -12%, #000 32%, transparent 82%); mask-image: radial-gradient(135% 115% at 85% -12%, #000 32%, transparent 82%); opacity: 0.9; } .os-desktop > * { position: relative; z-index: 1; } /* ── Enstructure OS shell — the app fills the viewport edge-to-edge ────── (Full-bleed: no desktop margin, no window radius/shadow framing.) */ .os-shell { position: fixed; inset: 0; display: flex; overflow: hidden; padding: 0; background: var(--mat-content); } .os-window { position: relative; z-index: 1; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--mat-content); border-radius: 0; box-shadow: none; } .os-lights { display: inline-flex; align-items: center; gap: 7px; } .os-lights > span { width: 11px; height: 11px; border-radius: var(--radius-full); display: block; } .os-lights > .tl-r { background: #ED6A5E; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12); } .os-lights > .tl-y { background: #F4BE4F; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12); } .os-lights > .tl-g { background: #61C554; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12); } /* L1 — Chrome glass: header + sidebar vibrancy. Degrades gracefully — the fill is opaque enough to stay legible if backdrop-filter is unsupported. */ .mat-header { background: var(--mat-header); backdrop-filter: var(--mat-header-blur); -webkit-backdrop-filter: var(--mat-header-blur); border-bottom: 1px solid rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 1px 0 rgb(0 0 0 / 0.10); position: relative; color: #fff; } /* Enstructure brand pattern — a faint blueprint grid riding over the gradient, fading in from the right (the brighter azure side). */ .mat-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(95deg, transparent 12%, #000 78%); mask-image: linear-gradient(95deg, transparent 12%, #000 78%); } .mat-header > * { position: relative; z-index: 1; } /* The bar is a dark brand surface, so its chrome flips to the on-brand light ramp. (Dark mode is already light-on-dark, so it's scoped to light mode.) */ html:not(.dark) .mat-header { --content-strong: #fff; --content: rgb(255 255 255 / 0.92); --content-muted: rgb(255 255 255 / 0.70); --content-subtle: rgb(255 255 255 / 0.55); --border: rgb(255 255 255 / 0.18); --border-strong: rgb(255 255 255 / 0.32); --secondary: rgb(255 255 255 / 0.12); --surface-sunken: rgb(255 255 255 / 0.12); --surface-raised: rgb(255 255 255 / 0.16); } /* Overlays anchored inside the header (account menu, alerts bell, popovers) reset to the app's light tokens so they stay dark-text-on-white + readable. */ html:not(.dark) .mat-header :is(.mat-thick, [role="menu"], [role="listbox"], [role="dialog"]) { color: var(--color-navy-800); --content-strong: var(--color-navy-900); --content: var(--color-navy-800); --content-muted: var(--color-warm-600); --content-subtle: var(--color-warm-500); --border: rgb(11 30 51 / 0.10); --border-strong: rgb(11 30 51 / 0.18); --secondary: var(--color-warm-100); --surface-sunken: var(--color-warm-200); --surface-raised: #FFFFFF; } .mat-sidebar { background: var(--mat-sidebar); backdrop-filter: var(--mat-sidebar-blur); -webkit-backdrop-filter: var(--mat-sidebar-blur); box-shadow: var(--glass-spec); } /* L5 — Thick glass: overlays, drawers, ⌘K. One consistent hairline edge + float shadow on EVERY floating surface (modal · drawer · popover · menu). */ .mat-thick { background: var(--mat-thick); backdrop-filter: var(--mat-thick-blur, blur(24px) saturate(180%)); -webkit-backdrop-filter: var(--mat-thick-blur, blur(24px) saturate(180%)); border: 1px solid var(--mat-thick-border, var(--border)); box-shadow: var(--shadow-float); } /* L3 — Block elevation: resting card lift + defining hairline ring, and the floating variant for high overlays. The hairline ring inside --shadow-card IS the card edge — so the redundant hard border is neutralized here (matches the reference's borderless cards). Intentional colored borders set inline (success / danger accents) still win over this default. */ .elev-card { box-shadow: var(--shadow-card); border-color: transparent; } .elev-float { box-shadow: var(--shadow-float); border-color: transparent; } /* ── Sunken well — the layer BELOW a card. Tuning controls / credential editors drop into it so elevation reads card (raised) → well (inset). Expresses the layered-OS depth model on detail screens (Detection Point, Camera). */ .os-well { background: var(--surface-sunken); border-radius: var(--radius-panel); box-shadow: inset 0 0 0 1px var(--border-subtle), inset 0 1px 2px rgb(22 34 76 / 0.05); } /* ── Token-driven radius/shadow utilities ───────────────────────────────── Defined as plain CSS because the Tailwind CDN does NOT register the custom borderRadius / boxShadow theme keys at runtime — only its built-in scale generates. Without these, .rounded-panel / .rounded-window / .rounded-control / .rounded-pill resolve to 0px, so cards, buttons, and class-based overlays render with square corners. This maps each class to its design token, the same way .os-window already consumes var(--radius-window). */ .rounded-control { border-radius: var(--radius-control); } .rounded-panel { border-radius: var(--radius-panel); } .rounded-window { border-radius: var(--radius-window); } .rounded-pill { border-radius: var(--radius-pill); } .shadow-card { box-shadow: var(--shadow-card); } .shadow-float { box-shadow: var(--shadow-float); } /* Scene fills — gradient + blueprint grid for heroes / empty states / wall. */ .scene-hero { background-color: var(--color-navy-900); background-image: var(--pattern-grid), var(--gradient-aurora); background-size: var(--pat-size) var(--pat-size), cover; } .scene-mesh { background: var(--gradient-mesh); } /* Blueprint grid overlay for dark brand/hero panels (rides over photography). */ .grid-overlay-light { background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px); background-size: var(--pat-size) var(--pat-size); -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 40%, transparent 85%); mask-image: radial-gradient(120% 100% at 80% 0%, #000 40%, transparent 85%); } /* ── RZM tuning sliders ────────────────────────────────────────────── */ .icc-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: var(--radius-full); background: var(--surface-sunken); outline: none; } .icc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--interactive-primary); cursor: pointer; box-shadow: 0 0 0 3px var(--interactive-primary-surface); } .icc-range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: var(--radius-full); background: var(--interactive-primary); cursor: pointer; } /* ── Selected ring — THE reusable "this card/tile is chosen" treatment ── Replaces the scattered inline `boxShadow:'0 0 0 2px var(--interactive-primary)'` + `borderColor:'transparent'` pairs (PointDetail, CameraPicker, GeofenceEditor, ui2 StatCard…). Toggle with `cn(..., selected && 'ring-selected')`. */ .ring-selected { box-shadow: 0 0 0 2px var(--interactive-primary); border-color: transparent !important; } /* ── Active state for inline filter / view / tool segmented controls ── (GroupToggle "By area", ViewToggle grid/list, editor tool switches.) Quiet accent-TINT, deliberately NOT the solid --interactive-primary fill — that weight is reserved for true CTAs so each view keeps exactly ONE solid-primary affordance. Matches the dominant "selected = accent tint" pattern already used by chips, selected rows, focus pills, Stacklights. */ .ctrl-on { background: var(--interactive-primary-surface); color: var(--interactive-primary); border-color: var(--interactive-primary); } .ctrl-on:hover { background: var(--interactive-primary-surface-hover); } /* ── Quick-Ack — the per-row queue action (LOW/MEDIUM) ─────────────── Quiet outline so a long queue doesn't read as a column of solid azure (the one solid CTA lives in the detail pane's "No issue"). Hover lifts to the primary edge + text — NOT a fill, because the host's button reset forces button backgrounds, so we emphasize via border/colour. */ .ack-quiet { background: transparent; color: var(--content-muted); box-shadow: inset 0 0 0 1px var(--border); } .ack-quiet:hover { color: var(--interactive-primary); box-shadow: inset 0 0 0 1px var(--interactive-primary); } /* ── Interactive card lift — navy-tinted elevation on hover ────────── */ .card-lift { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base); } .card-lift:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); border-color: transparent; } @media (prefers-reduced-motion: reduce) { .card-lift:hover { transform: none; } } /* ── Segmented control — filters / view toggles ────────────────────── */ .seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border); } .seg > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 500; color: var(--content-muted); background: transparent; box-shadow: none; white-space: nowrap; } .seg > button:hover { color: var(--content-strong); } .seg > button[data-active="true"] { background: var(--surface-raised); color: var(--content-strong); box-shadow: var(--shadow-raised); } /* ── Compact segmented filter — sunken track + lifting pill ────────── The inline filter / density / lens rows (Operator Wall, etc.) all shared the same active-pill style object. Centralized here; screens set state with `data-on` and stop re-inlining the lift + shadow. Distinct from .seg above (a fixed-height standalone control); this variant keeps each row's own layout utilities (flex-1, padding) and only owns the segment look. */ .seg-track { background: var(--surface-sunken); } .seg-pill { color: var(--content-muted); transition: color var(--dur-fast) var(--ease-out); } .seg-pill:hover { color: var(--content-strong); } .seg-pill[data-on="true"] { color: var(--content-strong); background: var(--surface-raised); box-shadow: var(--shadow-raised); } /* ── Sidebar nav items — palette via CSS vars set per treatment ────── Resting bg/shadow are declared EXPLICITLY (not left to initial) so the cascade always has a concrete value for both states. State changes are NOT transitioned: animating ANY property (background, box-shadow, OR color) on the de-activated item left it stuck on SPA nav (Chromium paint-invalidation bug — the transition never repaints the previous item, so two items read as active at once). The active pill + color snap instantly, which is crisp and on-brand for a command console (the DS calls for restrained motion). */ .nav-item { position: relative; color: var(--nav-fg); background: transparent; box-shadow: none; border-radius: var(--radius-pill); transition: background-color var(--dur-fast) var(--ease-out); } .nav-item:not([data-active="true"]):hover { background: var(--nav-hover-bg); } /* Active item = colour + weight ONLY. The moving .nav-pill (a sibling element, transform-animated) supplies the pill bg + shadow, so no per-item shadow/colour is ever transitioned on SPA nav — which is exactly what stranded two items as "active" before (Chromium paint-invalidation). Only background-color transitions, and only ever for hover on a NON-active row (the active row has no bg), so the de-activated item never animates anything. */ .nav-item[data-active="true"] { color: var(--nav-active-fg); font-weight: 600; } /* CSS fallback indicator — drawn by the active ROW itself, shown only until the JS pill reports ready (data-pill-ready) or if JS never runs at all. Guarantees the active row is always marked (no flash, no stranded "coloured text only" state). Once the pill is ready it takes over and this hides. Not transitioned, so it never triggers the per-item paint-invalidation bug. */ .nav-rail:not([data-pill-ready]) .nav-item[data-active="true"] { background: var(--nav-active-bg); box-shadow: inset 0 0 0 1px var(--sidebar-item-border-active), var(--shadow-raised); } /* ── Animated selection rail — one shared indicator that slides between rows ── The pill sits at z-index:-1 inside the rail's own stacking context: above the vibrancy glass (parent background), below the row text. Only transform/size/ opacity animate. */ .nav-rail { position: relative; z-index: 0; } .nav-pill { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: var(--radius-pill); /* Blue info-tint pill with an azure hairline (design.md). Lifts off the warm rail without the old glass cast. */ background: var(--nav-active-bg); /* Seated, not floating: the shared --shadow-raised recipe (edge ring + a small ambient) + the azure hairline border. */ box-shadow: inset 0 0 0 1px var(--sidebar-item-border-active), var(--shadow-raised); transition: transform var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), opacity var(--dur-xfast) var(--ease-out); will-change: transform, width; } /* Redundant (non-colour) active cue: a short azure capsule in the rail's LEFT GUTTER — separated from the pill, not crowding the icon (matches the Option A reference). It rides the pill via ::before, so it tracks the active row's Y; its negative left sits it in the nav's 12px padding gutter (x≈2px), clear of the horizontal-overflow clip edge so it never triggers a scrollbar. */ .nav-pill::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: var(--radius-full); background: var(--nav-active-fg); } /* Tweak A/B: "Plain pill" reverts to the opaque floating pill, no tint/bar. */ [data-nav-indicator="plain"] .nav-pill { background: var(--nav-active-bg); box-shadow: var(--shadow-card); } [data-nav-indicator="plain"] .nav-pill::before { display: none; } @media (prefers-reduced-motion: reduce) { .nav-pill { transition: opacity var(--dur-xfast) linear; } .nav-item { transition: none; } } /* ── Sidebar treatments — replaces the inlined `P` palette object ──── */ .sidebar--paper { --sidebar-bg: var(--color-warm-50); --sidebar-fg: var(--content-strong); --sidebar-edge: var(--sidebar-border); --sidebar-brand-bg: var(--color-navy-900); --sidebar-brand-fg: #FFFFFF; --sidebar-eyebrow: var(--content-subtle); --sidebar-sub: var(--content-muted); /* Nav link palette is sourced entirely from the theme sidebar tokens — single source of truth (light + dark + shadcn aliases all agree). */ --nav-fg: var(--sidebar-item-fg); --nav-active-fg: var(--sidebar-item-fg-active); --nav-active-bg: var(--sidebar-item-bg-active); --nav-hover-bg: var(--sidebar-item-bg-hover); --sidebar-track: var(--surface-sunken); --sidebar-cap-label: var(--content-muted); --sidebar-user-bg: var(--surface-sunken); --sidebar-user-fg: var(--content-muted); --sidebar-user-sub: var(--content-subtle); --sidebar-switch: var(--interactive-primary); } /* Active nav = solid brand-navy pill (chosen redesign): white label, gold fill-icon, NO left indicator bar. Scoped to .nav-rail (the Configure rail — the one with the sliding pill) so the operator rail's plain