/* ============================================ EnrichmentHelper — Design System DaisyUI 5, re-skinned with the EH2 teal-console palette. Two theme blocks — [data-theme="dim"] (dark, the default) + [data-theme="light"]. The attribute is owned by the pre-paint theme script in base.html; default dark. Load AFTER daisyui.css so our overrides win the cascade. ============================================ */ /* ----------------------------------------- 1. FONT + BASE ----------------------------------------- */ :root { --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; /* Motion system (ported from the EH2 prototype). Theme-agnostic. --motion-fast/-med drive micro-transitions on interactive chrome (nav, buttons, rows, toggles, chips); --motion-card is the ceiling for the heavier hover affordances. --ease-out is the entrance curve reserved for a later slice. Nothing here should exceed .22s. */ --motion-fast: 0.12s; --motion-med: 0.15s; --motion-card: 0.22s; --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); } /* Accessibility floor: honor the OS "reduce motion" setting globally. Collapses every animation/transition to a near-zero duration so the UI snaps to its end state instead of moving. Kept here, before any component rule, so it can only be beaten by an explicit !important elsewhere (there are none). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; /* Fixed radial wash behind the shell — the EH2 console look. The grad stop colors differ per theme (set below); body paints base-200 under it so a no-grad fallback still reads as the surface. */ background: var(--bg-grad), var(--color-base-200); background-attachment: fixed; } code, kbd, samp, pre { font-family: var(--mono); } /* Tailwind's CDN font-mono utility falls back to the system monospace stack; route it through our IBM Plex Mono token so SKU/EAN/stock and other tabular cells match the rest of the type system. The html prefix lifts specificity above Tailwind's utility, which the browser build injects after app.css. */ html .font-mono { font-family: var(--mono); } /* Re-skin DaisyUI with the EH2 teal-console palette. We override every DaisyUI semantic variable so .btn / .card / .input / .badge / .modal read in the new colors automatically. The dark block also seeds :root so non-DaisyUI rules and the no-JS fallback resolve to dark. Token map (prototype → DaisyUI): surface / surface-2 / surface-3 → base-100 / base-200 / base-300 text → base-content brand / brand-ink → primary / primary-content (+ accent) The prototype's raw --surface-*, --border-*, --text-* and --brand-* tokens are also exposed verbatim for rules ported from EH2 that reference them directly. */ :root, [data-theme="dim"] { color-scheme: dark; /* Prototype raw tokens — dark */ --bg: #0c1015; --surface: #11171f; --surface-2: #151c26; --surface-3: #1b2531; --surface-hover: #19222e; --eh-line: #212b37; --border-soft: #1a232e; --border-strong: #2c3947; --text: #e7edf3; --text-muted: #93a2b2; --text-faint: #5e6e7e; --text-ghost: #43505d; --brand: #2fbfa8; --brand-ink: #061513; --brand-soft: #143029; --brand-line: #1f5046; --bg-grad: radial-gradient(1200px 600px at 78% -8%, #11202a 0%, #0c1015 60%); /* DaisyUI surface ramp ← prototype surfaces */ --color-base-100: var(--surface); --color-base-200: var(--surface-2); --color-base-300: var(--surface-3); --color-base-content: var(--text); /* Brand teal primary + accent; warm secondary kept for legacy spots */ --color-primary: var(--brand); --color-primary-content: var(--brand-ink); --color-secondary: #e6a94e; --color-secondary-content: #1a1206; --color-accent: var(--brand); --color-accent-content: var(--brand-ink); --color-neutral: var(--surface-2); --color-neutral-content: var(--text); /* Semantic ← prototype */ --color-info: #4ea7e6; --color-success: #46c98a; --color-warning: #e6a94e; --color-error: #e76b7a; --color-violet: #9b8cf0; /* Elevation scrim — black reads on both themes, but tuned per theme so light surfaces still get a perceptible (softer) shadow. */ --shadow-ink: 0, 0, 0; --shadow-strength-sm: 0.18; --shadow-strength-md: 0.28; --shadow-strength-lg: 0.35; /* Utility aliases used by the page-level CSS below */ --bc-90: color-mix(in oklch, var(--color-base-content) 92%, transparent); --bc-75: color-mix(in oklch, var(--color-base-content) 78%, transparent); --bc-60: color-mix(in oklch, var(--color-base-content) 62%, transparent); --bc-50: color-mix(in oklch, var(--color-base-content) 50%, transparent); --bc-40: color-mix(in oklch, var(--color-base-content) 36%, transparent); --bc-25: color-mix(in oklch, var(--color-base-content) 20%, transparent); --bc-12: color-mix(in oklch, var(--color-base-content) 10%, transparent); --sidebar-w: 232px; --topbar-h: 56px; /* Avatar palette — deterministic per-user chip colours (see dashboard/_shared.py:avatar_color). 9 muted hues kept around the teal-console family at one consistent saturation/lightness so the people panel reads as a harmonised set, not a rainbow. All carry white initials at >=4.5:1. --eh-avatar-system is the neutral chip for non-person actors. */ --eh-avatar-0: #2f9e8f; /* teal */ --eh-avatar-1: #3d92c4; /* blue */ --eh-avatar-2: #5a7fd6; /* indigo */ --eh-avatar-3: #8169d1; /* violet */ --eh-avatar-4: #a85fb0; /* plum */ --eh-avatar-5: #c75f86; /* rose */ --eh-avatar-6: #c08144; /* amber */ --eh-avatar-7: #4fa46a; /* green */ --eh-avatar-8: #3a9aae; /* cyan */ --eh-avatar-system: var(--surface-3); } [data-theme="light"] { color-scheme: light; /* Prototype raw tokens — light */ --bg: #eef1f5; --surface: #ffffff; --surface-2: #f4f7fa; --surface-3: #eaeff4; --surface-hover: #f0f4f8; --eh-line: #dde4ec; --border-soft: #e8edf3; --border-strong: #c6d1dd; --text: #16202b; --text-muted: #586675; --text-faint: #8b98a6; --text-ghost: #aab5c1; --brand: #138b78; --brand-ink: #ffffff; --brand-soft: #dcf2ec; --brand-line: #a9ddd1; --bg-grad: radial-gradient(1100px 560px at 80% -10%, #e2eef0 0%, #eef1f5 55%); --color-base-100: var(--surface); --color-base-200: var(--surface-2); --color-base-300: var(--surface-3); --color-base-content: var(--text); --color-primary: var(--brand); --color-primary-content: var(--brand-ink); --color-secondary: #b9791a; --color-secondary-content: #ffffff; --color-accent: var(--brand); --color-accent-content: var(--brand-ink); --color-neutral: var(--surface-3); --color-neutral-content: var(--text); --color-info: #2479c4; --color-success: #1f9d63; --color-warning: #b9791a; --color-error: #cf3d52; --color-violet: #6a52d6; /* Lighter surfaces need a softer-but-present scrim. */ --shadow-ink: 30, 41, 59; --shadow-strength-sm: 0.08; --shadow-strength-md: 0.12; --shadow-strength-lg: 0.16; /* Avatar palette — deeper than the dim set so white initials keep >=4.5:1 on the lighter surface. Same hue order, so a given user's chip reads as "the same colour" across themes. */ --eh-avatar-0: #1d8576; /* teal */ --eh-avatar-1: #2476a8; /* blue */ --eh-avatar-2: #3f5fc0; /* indigo */ --eh-avatar-3: #6748c2; /* violet */ --eh-avatar-4: #97419f; /* plum */ --eh-avatar-5: #b53e6b; /* rose */ --eh-avatar-6: #a5662a; /* amber */ --eh-avatar-7: #2f8a51; /* green */ --eh-avatar-8: #21808f; /* cyan */ --eh-avatar-system: var(--surface-3); } /* ----------------------------------------- 1b. ICON SPRITE Shared defs live in the global sprite partial (templates/partials/_icon_sprite.html, included from base.html). Inline SVG references read currentColor + carry the 1.6px stroke baked into each . The .icon class is the universal sizing surface; ad-hoc sizes override width/height inline. The sprite host itself is display:none so it never reflows the page even if the partial is included mid-body. ----------------------------------------- */ .icon-sprite-host { display: none; } .icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; color: currentColor; /* Presentation attributes on the sprite host don't inherit through per SVG spec, so the marks read as filled black blobs unless we re-apply fill:none + stroke here. Stroke-width 1.6 matches the lucide style baked into each . */ fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .icon-sm { width: 13px; height: 13px; } .icon-xs { width: 11px; height: 11px; } .icon-lg { width: 18px; height: 18px; } /* ----------------------------------------- 2. APP SHELL LAYOUT (sidebar + topbar) Layout spec matches Claude Design prototype: 232px sidebar, brand → scrollable nav, no footer. User moved to top-right of topbar, which carries a "Synced Xm ago" live chip. ----------------------------------------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; background: var(--color-base-200); } /* Collapsed icon-rail variant. State is set on (pre-paint script in base.html reads localStorage['eh.sidebar.collapsed'] before first paint). Above the 900px mobile breakpoint only — below that the sidebar is a drawer and ignores the collapse state entirely. */ :root[data-sidebar="collapsed"] .app-shell { grid-template-columns: 56px 1fr; } @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } /* On mobile, ignore the desktop collapse state — the sidebar is a drawer toggled by the topbar hamburger. */ :root[data-sidebar="collapsed"] .app-shell { grid-template-columns: 1fr; } .app-sidebar { display: none; } .app-sidebar.is-open { display: flex; position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60; box-shadow: 0 0 0 100vw rgba(15, 20, 34, 0.42); } } .app-sidebar { background: var(--color-base-300); border-right: 1px solid var(--bc-12); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 10; /* No padding — children carry their own: brand (header height), scroll (its own inset). Keeps the brand bar flush with the topbar. */ padding: 0; } /* Brand — gradient square mark + "EnrichmentHelper" wordmark. Height matches .app-topbar so the top edge reads as a single band. */ .app-sidebar__brand { display: flex; align-items: center; gap: 0.625rem; padding: 0 1.125rem; height: var(--topbar-h); border-bottom: 1px solid var(--bc-12); color: var(--color-base-content); text-decoration: none; flex-shrink: 0; } /* Original brand logo — rendered as-is (no gradient tint box). */ .app-sidebar__logo { width: 28px; height: 28px; flex-shrink: 0; display: block; } /* Theme-swapped brand logos — the cube's pale top facet washes out on a light sidebar, so each theme shows its own recolored variant. Element+class specificity so the toggle wins over .app-sidebar__logo's display. */ img.themed-logo--light { display: none; } [data-theme="light"] img.themed-logo--dark { display: none; } [data-theme="light"] img.themed-logo--light { display: block; } /* Products table selection — EH2 square. The DaisyUI default checkbox border washes out on the teal-console surfaces; draw a clear bordered square that fills brand on check. Scoped to the products table so other checkboxes are untouched. Templates pair this with checkbox-xs — the sole sanctioned size exception, justified by the dense ~50-row product grid; all other form checkboxes use the canonical checkbox-sm. */ .table-products input[type="checkbox"].checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background-color: var(--surface); display: inline-grid; place-items: center; cursor: pointer; transition: background-color .12s, border-color .12s; flex: none; } .table-products input[type="checkbox"].checkbox:hover { border-color: var(--color-primary); } .table-products input[type="checkbox"].checkbox:checked, .table-products input[type="checkbox"].checkbox:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary); } .table-products input[type="checkbox"].checkbox:checked::after { content: ""; width: 4px; height: 8px; border: solid var(--color-primary-content); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .table-products input[type="checkbox"].checkbox:indeterminate::after { content: ""; width: 8px; height: 2px; background-color: var(--color-primary-content); } /* Visible checkbox for forms outside the products table (settings cockpit hide-brand toggle, alias scope, etc.). The bare DaisyUI .checkbox is near-invisible on the dark surface; this mirrors the products-table treatment so a checkbox reads as a checkbox everywhere. */ input[type="checkbox"].checkbox-visible { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background-color: var(--surface); display: inline-grid; place-items: center; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); flex: none; } input[type="checkbox"].checkbox-visible:hover { border-color: var(--color-primary); } input[type="checkbox"].checkbox-visible:checked { background-color: var(--color-primary); border-color: var(--color-primary); } input[type="checkbox"].checkbox-visible:checked::after { content: ""; width: 4px; height: 8px; border: solid var(--color-primary-content); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .app-sidebar__wordmark { font-weight: 600; font-size: 0.86rem; letter-spacing: -0.015em; } .app-sidebar__wordmark em { font-style: normal; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); font-weight: 500; } .app-sidebar__scroll { flex: 1; overflow-y: auto; padding: 0.75rem 0.625rem 1rem; } .app-sidebar__section + .app-sidebar__section { margin-top: 0.875rem; } .section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); font-weight: 600; padding: 0.375rem 0.625rem 0.25rem; } .app-nav-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.45rem 0.625rem; border-radius: 0.45rem; font-size: 0.82rem; line-height: 1.3; color: color-mix(in oklch, var(--color-base-content) 78%, transparent); transition: background-color 0.12s ease, color 0.12s ease; text-decoration: none; font-weight: 500; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; } .app-nav-link:hover { background: color-mix(in oklch, var(--color-base-content) 5%, transparent); color: var(--color-base-content); } .app-nav-link__icon { width: 16px; height: 16px; flex-shrink: 0; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); } .app-nav-link.is-active { background: color-mix(in oklch, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 600; } .app-nav-link.is-active .app-nav-link__icon { color: var(--color-primary); } .app-nav-link__count { margin-left: auto; font-size: 0.69rem; padding: 1px 6px; border-radius: 999px; background: color-mix(in oklch, var(--color-base-content) 10%, transparent); color: color-mix(in oklch, var(--color-base-content) 60%, transparent); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; } .app-nav-link.is-active .app-nav-link__count { background: color-mix(in oklch, var(--color-primary) 18%, transparent); color: var(--color-primary); } /* Sidebar collapse toggle — pinned to the bottom of the rail. Slim chevron button using the same icon/text muted-content tone the nav links use. Two icon variants live inside the button; CSS swaps which one is visible based on collapsed state. */ .app-sidebar__toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; height: 2.25rem; padding: 0 0.75rem; margin: 0.25rem 0.5rem 0.5rem; border: 0; border-radius: 0.4rem; background: transparent; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .app-sidebar__toggle:hover { background: color-mix(in oklch, var(--color-base-content) 5%, transparent); color: var(--color-base-content); } .app-sidebar__toggle-icon { display: block; } .app-sidebar__toggle-icon--expand { display: none; } /* ---------- Collapsed state ---------- */ :root[data-sidebar="collapsed"] .app-sidebar { /* Width follows the grid, but constrain children that escape the 56px rail (e.g. text spans) by clipping. */ overflow-x: hidden; } /* Brand row: hide wordmark, center the logo. */ :root[data-sidebar="collapsed"] .app-sidebar__brand { padding: 0; justify-content: center; } :root[data-sidebar="collapsed"] .app-sidebar__wordmark { display: none; } /* Section labels disappear; the Workspace/System divider survives as a 1px line between the two sections (silent visual break). */ :root[data-sidebar="collapsed"] .section-label { display: none; } :root[data-sidebar="collapsed"] .app-sidebar__section + .app-sidebar__section { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-base-300); } /* Tighten scroll inset so 16px icons sit centred in the 56px rail. */ :root[data-sidebar="collapsed"] .app-sidebar__scroll { padding: 0.5rem 0.375rem 0.75rem; } /* Nav links: icon-only, centred. Hide the label span. Keep relative positioning so the hover tooltip can flyout to the right. */ :root[data-sidebar="collapsed"] .app-nav-link { position: relative; justify-content: center; padding: 0.5rem 0; gap: 0; } :root[data-sidebar="collapsed"] .app-nav-link > span { display: none; } :root[data-sidebar="collapsed"] .app-nav-link__count { display: none; } /* Pure-CSS hover flyout tooltip. Reads data-label from the link and parks itself just to the right of the rail. 200ms delay-in keeps accidental sweeps from flashing labels everywhere. */ :root[data-sidebar="collapsed"] .app-nav-link::after { content: attr(data-label); position: absolute; left: calc(100% + 0.375rem); top: 50%; transform: translateY(-50%); background: var(--color-base-100); color: var(--color-base-content); border: 1px solid var(--color-base-300); border-radius: 0.35rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s ease 0s; z-index: 30; box-shadow: 0 4px 12px rgba(var(--shadow-ink), var(--shadow-strength-md)); } :root[data-sidebar="collapsed"] .app-nav-link:hover::after { opacity: 1; transition-delay: 0.2s; } /* Toggle button in collapsed mode: center it, swap which chevron shows. */ :root[data-sidebar="collapsed"] .app-sidebar__toggle { justify-content: center; padding: 0; margin: 0.25rem 0.375rem 0.5rem; } :root[data-sidebar="collapsed"] .app-sidebar__toggle-icon--collapse { display: none; } :root[data-sidebar="collapsed"] .app-sidebar__toggle-icon--expand { display: block; } .app-main { display: flex; flex-direction: column; min-width: 0; } /* Topbar — sticky band with blur. Layout: [mobile toggle] [breadcrumbs] [synced chip] [enrichment status] [user] */ .app-topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); background: color-mix(in oklch, var(--color-base-100) 82%, transparent); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--bc-12); padding: 0 1.25rem; display: flex; align-items: center; gap: 1rem; } .app-topbar__breadcrumbs { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.82rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); } .app-topbar__breadcrumbs .crumb-current { color: var(--color-base-content); font-weight: 500; } .app-topbar__breadcrumbs a { color: inherit; text-decoration: none; } .app-topbar__breadcrumbs a:hover { color: var(--color-base-content); text-decoration: underline; } .app-topbar__breadcrumbs svg { opacity: 0.55; flex-shrink: 0; } /* Synced chip — live-dot pulse + "Synced Xm ago" text. Sits on the right side of the topbar so it stays visible while the breadcrumbs take any overflow on narrow viewports. */ /* Slot wrapper — pushes the chip to the right even when HTMX hasn't yet populated it, so the topbar layout doesn't jump when the fragment arrives. */ .app-topbar__sync-slot { display: flex; align-items: center; min-height: 24px; flex-shrink: 0; } /* Theme toggle anchors the right-aligned topbar cluster (it's the first element after the breadcrumb, so the auto margin lives here now). The two glyphs are stacked; only the one offering the *other* mode shows. */ .app-topbar__theme-toggle { margin-left: auto; flex-shrink: 0; color: var(--bc-60); transition: color var(--motion-fast) var(--ease-out); } .app-topbar__theme-toggle:hover { color: var(--color-base-content); } .app-topbar__theme-toggle .app-theme-toggle__sun { display: none; } .app-topbar__theme-toggle .app-theme-toggle__moon { display: inline-block; } [data-theme="light"] .app-topbar__theme-toggle .app-theme-toggle__sun { display: inline-block; } [data-theme="light"] .app-topbar__theme-toggle .app-theme-toggle__moon { display: none; } .app-topbar__sync { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); padding: 0.25rem 0.625rem 0.25rem 0.5rem; border-radius: 999px; border: 1px solid var(--color-base-300); background: var(--color-base-200); flex-shrink: 0; } /* Never-synced variant: amber icon+text signals "no Akeneo pull has completed in this workspace yet — trigger one from /products". */ .app-topbar__sync--warn { color: var(--color-warning); border-color: color-mix(in oklch, var(--color-warning) 35%, transparent); background: color-mix(in oklch, var(--color-warning) 10%, var(--color-base-200)); } /* Green pulsing dot — shared with the Activity Feed "Live" meta label. */ @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(87, 178, 138, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(87, 178, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(87, 178, 138, 0); } } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); display: inline-block; animation: live-pulse 2s infinite; flex-shrink: 0; } /* Enriching-batch pill — sits next to the Synced chip in the topbar. Matches the canonical .app-topbar__live design: rounded pill, info pulse-dot on the left, "Enriching N/M" text. Reuses .app-topbar__sync chrome for parity (border, background, padding) so the two chips read as a row, not as competing widgets. */ @keyframes enrich-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } } .app-topbar__live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: color-mix(in oklch, var(--color-base-content) 75%, transparent); padding: 0.25rem 0.625rem 0.25rem 0.5rem; border-radius: 999px; border: 1px solid var(--color-base-300); background: var(--color-base-200); text-decoration: none; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .app-topbar__live:hover { background: color-mix(in oklch, var(--color-base-content) 5%, transparent); color: var(--color-base-content); } .app-topbar__live .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--color-info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 22%, transparent); animation: enrich-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } .app-topbar__live b { color: color-mix(in oklch, var(--color-base-content) 92%, transparent); font-weight: 600; margin-left: 2px; font-variant-numeric: tabular-nums; } .app-topbar__live--failed { color: color-mix(in oklch, var(--color-warning) 90%, var(--color-base-content)); border-color: color-mix(in oklch, var(--color-warning) 35%, var(--color-base-300)); } .app-topbar__live--failed .pulse { background: var(--color-warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 22%, transparent); } /* User pill in topbar: email + avatar; clicking opens the dropdown. */ .app-topbar__user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.25rem 0.2rem 0.6rem; border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--color-base-content); line-height: 1; flex-shrink: 0; transition: background 0.12s ease, border-color 0.12s ease; } .app-topbar__user:hover { background: color-mix(in oklch, var(--color-base-content) 5%, transparent); border-color: var(--color-base-300); } .app-topbar__user-email { font-size: 0.72rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hide the inline email below 1366px — full email + display name still live in the avatar dropdown, so identity is one click away. The 1366 breakpoint matches common 13-14" laptop widths. */ @media (max-width: 1365px) { .app-topbar__user-email { display: none; } } .app-topbar__avatar { width: 28px; height: 28px; border-radius: 50%; --eh-avatar: var(--brand); background: linear-gradient(135deg, color-mix(in oklch, var(--eh-avatar) 82%, black), var(--eh-avatar)); color: white; display: grid; place-items: center; font-size: 0.68rem; font-weight: 600; flex-shrink: 0; letter-spacing: 0; } .app-content { /* Canonical was 1480px; nudged to 1520px (+40px) so dense tables (products, sources) get one extra column of breathing room without pulling the shell off-center on standard laptop displays. Bottom inset stays at 4rem so a long form's last row clears the action- bar's drop-shadow; validate page overrides bottom to 0 below so the sticky action-bar can flush against the viewport edge. */ padding: 1.375rem 1.75rem 2.5rem; width: 100%; max-width: 95rem; /* 1520px */ } /* On the validate page the sticky .action-bar must reach the viewport bottom flush. App-content's bottom padding would otherwise push the sticky's containing block up by that amount, leaving a visible gap. Drop the bottom inset to zero when a validate-shell is present and let the action-bar's own padding be the only spacer. */ .app-content:has(.validate-shell) { padding-bottom: 0; } /* Opt-in narrow column for text-heavy pages (login, profile) that shouldn't stretch edge-to-edge on ultrawide displays. Wrap the page body in
to get the old 1400px cap. */ .app-content-narrow { max-width: 1400px; margin: 0 auto; } .app-mobile-toggle { display: none; } @media (max-width: 900px) { .app-mobile-toggle { display: inline-flex; } .app-content { padding: 1rem 1rem 2.5rem; } /* On narrow viewports collapse the sync chip label — keep the dot so the page still signals that it's live. */ .app-topbar__sync span:not(.live-dot) { display: none; } } /* ----------------------------------------- 3. TABLE POLISH ----------------------------------------- */ .table-zebra tbody tr { transition: background-color 0.15s ease; } .table-zebra tbody tr:hover { background-color: color-mix(in oklch, var(--color-primary) 8%, transparent); } .table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); font-weight: 600; background: color-mix(in oklch, var(--color-base-200) 50%, var(--color-base-100)); border-bottom: 1px solid var(--color-base-300); } /* Memory-viewer scroll container — sticky thead so column meaning stays visible while scrolling through hundreds of memory entries. The opaque background on each matters: without it the scrolled rows show through and make the header unreadable. */ .memory-viewer__sticky-head th { position: sticky; top: 0; z-index: 1; /* Same background used for normal table headers so the sticky row looks identical to the static one until you start scrolling. */ background: color-mix(in oklch, var(--color-base-200) 92%, var(--color-base-100)); } /* ----------------------------------------- 4. GLOBAL TRANSITIONS + COMPONENT RESETS ----------------------------------------- */ .btn, .card, .badge, .input, .select, .textarea, .toggle, .checkbox { transition: all var(--motion-med) var(--ease-out); } /* Modern PIMs use flat cards — no lift. Keep a subtle shadow only on explicit .card-elevated. The old global lift caused jitter on dense review screens. */ .card { box-shadow: none; border: 1px solid var(--color-base-300); background: var(--color-base-100); border-radius: 0.625rem; } .card:hover { transform: none; box-shadow: none; } .card-elevated { box-shadow: 0 1px 2px rgba(15, 20, 34, 0.04), 0 2px 6px rgba(15, 20, 34, 0.04); } /* Buttons: tighten radius, flatten default */ .btn { border-radius: 0.5rem; font-weight: 500; letter-spacing: 0; } .btn-primary { box-shadow: 0 1px 0 color-mix(in oklch, var(--color-primary) 60%, transparent); } /* Inputs / selects: slimmer, more PIM-like */ .input, .select, .textarea { border-radius: 0.5rem; background: var(--color-base-100); } .input-bordered, .select-bordered, .textarea-bordered { border-color: var(--color-base-300); } .input-bordered:focus, .select-bordered:focus, .textarea-bordered:focus { outline: 2px solid color-mix(in oklch, var(--color-primary) 35%, transparent); outline-offset: 1px; border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-base-300)); } /* Smooth link underlines */ a:not(.btn):not(.nav-active):not([class*="menu"]):not(.app-nav-link):not(.app-sidebar__brand) { transition: color 0.15s ease; } /* ----------------------------------------- 5. HTMX SWAP TRANSITIONS ----------------------------------------- */ .htmx-added { animation: htmxFadeIn 0.25s ease-out both; } .htmx-swapping { opacity: 0; transition: opacity 0.15s ease-out; } .htmx-settling { animation: htmxFadeIn 0.2s ease-out both; } @keyframes htmxFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------- 6. MICRO-INTERACTION KEYFRAMES ----------------------------------------- */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes skeletonPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .anim-slide-in-right { animation: slideInRight 0.3s ease-out both; } .anim-slide-up { animation: slideUp 0.3s ease-out both; } .anim-fade-in { animation: fadeIn 0.25s ease-in both; } .anim-skeleton-pulse { animation: skeletonPulse 1.5s ease-in-out infinite; } /* ----------------------------------------- 7. VERTICAL TIMELINE (Trace Viewer) ----------------------------------------- */ .trace-timeline { position: relative; padding-left: 2rem; margin-left: 0.75rem; } .trace-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0.75rem; width: 2px; background-color: var(--color-base-300); } .trace-step { position: relative; padding-bottom: 1.25rem; } .trace-step::before { content: ""; position: absolute; left: -1.6rem; top: 0.35rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--color-primary); border: 2px solid var(--color-base-100); z-index: 1; } .trace-step:last-child { padding-bottom: 0; } .trace-step.active::before { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 30%, transparent); } .trace-step--reasoning::before { background-color: var(--color-base-content); opacity: 0.4; } .trace-step--tool::before { background-color: var(--color-primary); } .trace-step--decision::before { background-color: var(--color-success); } /* ----------------------------------------- 7b. RAIL TIMELINE (V2 search-loop trace) Ported from the EH2 prototype's .tr-*/.trs-* system. EH2's raw --*-soft/-line tokens don't exist here; soft fills are derived from our semantic --color-* tokens via color-mix (the established pattern). ----------------------------------------- */ .tr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .tr-title { font-size: 0.8125rem; font-weight: 600; } .tr-count { font-size: 0.6875rem; color: var(--text-faint); } .tr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 0.5rem; margin-bottom: 0.875rem; } .tr-stat { border: 1px solid var(--eh-line); border-radius: 0.5rem; background: var(--surface-2); padding: 0.625rem 0.5rem; } .tr-stat-v { font-size: 1.25rem; font-weight: 600; line-height: 1.1; } .tr-stat-v.ok { color: var(--color-success); } .tr-stat-v.warn { color: var(--color-warning); } .tr-stat-v.err { color: var(--color-error); } .tr-stat-l { font-size: 0.625rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 0.1875rem; } .tr-steps { padding: 0.25rem 0 0.5rem; } .tr-step { display: flex; gap: 0.75rem; } .tr-step.is-skipped { opacity: 0.55; } .trs-rail { display: flex; flex-direction: column; align-items: center; flex: none; } .trs-dot { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; margin-top: 0.25rem; } .trs-dot .icon { width: 13px; height: 13px; } .trs-line { width: 2px; flex: 1; background: var(--eh-line); margin: 0.1875rem 0; min-height: 8px; } .trs-dot.seed { background: var(--surface-3); color: var(--text-muted); } .trs-dot.tool { background: color-mix(in oklch, var(--color-info) 16%, var(--surface)); color: var(--color-info); } .trs-dot.extract { background: var(--brand-soft); color: var(--color-primary); } .trs-dot.score { background: var(--brand-soft); color: var(--color-primary); } .trs-dot.gate { background: color-mix(in oklch, var(--color-warning) 16%, var(--surface)); color: var(--color-warning); } .trs-dot.memory { background: color-mix(in oklch, var(--color-info) 16%, var(--surface)); color: var(--color-info); } .trs-dot.ok { background: color-mix(in oklch, var(--color-success) 16%, var(--surface)); color: var(--color-success); } .trs-dot.warn { background: color-mix(in oklch, var(--color-warning) 16%, var(--surface)); color: var(--color-warning); } .trs-dot.err { background: color-mix(in oklch, var(--color-error) 16%, var(--surface)); color: var(--color-error); } .trs-body { flex: 1; min-width: 0; padding: 0.25rem 0 0.625rem; } .trs-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .trs-tool { font-size: 0.78125rem; font-weight: 600; } .trs-domain { font-size: 0.6875rem; color: var(--text-faint); } .trs-tier { font-size: 0.5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--eh-line); border-radius: 4px; padding: 0 5px; } .trs-meta { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; } .trs-score { font-size: 0.71875rem; font-weight: 600; color: var(--color-primary); } .trs-faint { font-size: 0.6875rem; color: var(--text-faint); } .trs-res { font-size: 0.625rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.3px; } .trs-res.ok { color: var(--color-success); background: color-mix(in oklch, var(--color-success) 16%, var(--surface)); } .trs-res.extract { color: var(--color-primary); background: var(--brand-soft); } .trs-res.weak { color: var(--color-warning); background: color-mix(in oklch, var(--color-warning) 16%, var(--surface)); } .trs-res.skip { color: var(--text-faint); background: var(--surface-3); } .trs-res.miss, .trs-res.err { color: var(--color-error); background: color-mix(in oklch, var(--color-error) 16%, var(--surface)); } .trs-msg { font-size: 0.78125rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.45; } .trs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.375rem; } .trs-src { font-size: 0.65625rem; color: var(--text-faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trs-fchip { font-size: 0.65625rem; color: var(--color-primary); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 4px; padding: 1px 6px; } .trs-query { font-size: 0.65625rem; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--eh-line); border-radius: 4px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-stopline { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--text-faint); } .tr-stopline.warn { color: var(--color-warning); } .tr-sources { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); } .tr-sources-h { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); margin-bottom: 0.375rem; } .tr-sources-row { display: flex; flex-wrap: wrap; gap: 0.375rem; } /* ----------------------------------------- 8. ACCENT BORDER HELPERS ----------------------------------------- */ .border-l-primary { border-left: 4px solid var(--color-primary); } /* ----------------------------------------- 9. DESIGN SYSTEM — page chrome ----------------------------------------- */ /* Avatar circle (user initial) */ .avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: 9999px; background: color-mix(in oklch, var(--color-primary) 18%, transparent); color: var(--color-primary); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.01em; } /* Content card: shared container for product list table, etc. ``overflow: visible`` lets header-anchored dropdowns (brand/supplier typeahead) escape the card boundary; the body keeps its own clip so the table still respects the rounded bottom corners. */ .content-card { background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: 0.625rem; overflow: visible; } .content-card-header { padding: 0.875rem 1rem; border-bottom: 1px solid var(--color-base-300); background: color-mix(in oklch, var(--color-base-200) 50%, var(--color-base-100)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .content-card-header:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .content-card-body { padding: 0; overflow: hidden; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .content-card-body:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } /* Attention panel — clickable alert rows. Severity sets the left border accent and the icon-square tint. The row links to the relevant workspace; the chevron + hover shading sells "click me". Canonical: 11px 18px padding, 30×30 icon, 13px label, 11.5px hint. */ .attention-row { display: flex; align-items: stretch; border-left: 3px solid transparent; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); position: relative; transition: background 0.12s ease; } .attention-row:last-child { border-bottom: 0; } .attention-row:hover { background: color-mix(in oklch, var(--color-base-content) 6%, transparent); } .attention-row__main { flex: 1; display: flex; align-items: center; gap: 0.75rem; /* 12px */ padding: 0.6875rem 0.5rem 0.6875rem 1.125rem; text-decoration: none; color: inherit; min-width: 0; } .attention-row__dismiss { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; /* 28px */ margin: 0.5rem 0.5rem 0.5rem 0; border-radius: 0.375rem; border: 0; background: transparent; color: color-mix(in oklch, var(--color-base-content) 45%, transparent); cursor: pointer; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease; } .attention-row__dismiss:hover { background: color-mix(in oklch, var(--color-base-content) 10%, transparent); color: var(--color-base-content); } .attention-row__dismiss svg { width: 14px; height: 14px; } .attention-row__icon { width: 1.875rem; /* 30px */ height: 1.875rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .attention-row__icon svg { width: 16px; height: 16px; } .attention-row__body { flex: 1; min-width: 0; } .attention-row__label { font-size: 0.8125rem; /* 13px */ font-weight: 500; color: var(--color-base-content); line-height: 1.35; } .attention-row__hint { font-size: 0.71875rem; /* 11.5px */ color: color-mix(in oklch, var(--color-base-content) 55%, transparent); margin-top: 0.125rem; line-height: 1.4; } .attention-row__chevron { color: color-mix(in oklch, var(--color-base-content) 40%, transparent); margin-left: auto; flex-shrink: 0; width: 14px; height: 14px; } .attention-row--error { border-left-color: var(--color-error); } .attention-row--error .attention-row__icon { background: color-mix(in oklch, var(--color-error) 14%, transparent); color: var(--color-error); } .attention-row--warning { border-left-color: var(--color-warning); } .attention-row--warning .attention-row__icon { background: color-mix(in oklch, var(--color-warning) 18%, transparent); color: var(--color-warning); } .attention-row--info { border-left-color: var(--color-info); } .attention-row--info .attention-row__icon { background: color-mix(in oklch, var(--color-info) 14%, transparent); color: var(--color-info); } /* Attention empty state — green-checkmark + "Nothing needs attention". Tightened to ~11px vertical so it matches the canonical row rhythm instead of feeling like a half-height blank panel. */ .attention-empty { display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem 1.125rem; /* 11px 18px — matches .attention-row */ font-size: 0.8125rem; color: color-mix(in oklch, var(--color-base-content) 78%, transparent); } .attention-empty__icon { width: 1.25rem; /* 20px */ height: 1.25rem; border-radius: 9999px; background: color-mix(in oklch, var(--color-success) 16%, transparent); color: var(--color-success); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .attention-empty__icon svg { width: 12px; height: 12px; } .attention-empty__meta { margin-left: auto; font-size: 0.71875rem; color: color-mix(in oklch, var(--color-base-content) 45%, transparent); } /* ============================ HEALTH CARD ============================== Canonical structure (Downloads/EnrichtmentHelper/app/styles.css L1220): .health-row row container, 10px 0 padding, hairline divider .health-row__main name + detail block, grows .health-row__name 13px / 500 / bc-90 .health-row__detail 11.5px / muted .health-row__bar 140px utilization bar (storage-headline shape) .health-row__count 11.5px tnum, 48px min-width, right aligned Status pill sits at the very end of the row. */ .health-row { display: flex; align-items: center; gap: 0.875rem; /* 14px */ padding: 0.625rem 0; /* 10px 0 — card-body provides 18px sides */ border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent); } .health-row:last-child { border-bottom: 0; } .health-row__main { flex: 1; min-width: 0; } .health-row__name { font-size: 0.8125rem; /* 13px */ font-weight: 500; color: color-mix(in oklch, var(--color-base-content) 92%, transparent); line-height: 1.35; } .health-row__detail { font-size: 0.71875rem; /* 11.5px */ color: color-mix(in oklch, var(--color-base-content) 55%, transparent); margin-top: 0.125rem; line-height: 1.4; } .health-row__bar { width: 140px; flex-shrink: 0; } .health-row__count { font-size: 0.71875rem; /* 11.5px */ color: color-mix(in oklch, var(--color-base-content) 65%, transparent); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; } .health-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; padding: 0.625rem 0 0; margin-top: 0.5rem; border-top: 1px solid color-mix(in oklch, var(--color-base-300) 70%, transparent); } /* Active-now bubble on the People panel — small green dot + label */ .active-now-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 600; color: var(--color-success); padding: 0.1rem 0.5rem; border-radius: 9999px; background: color-mix(in oklch, var(--color-success) 14%, transparent); white-space: nowrap; } .active-now-pill::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--color-success); box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-success) 24%, transparent); animation: active-now-pulse 1.8s ease-in-out infinite; } @keyframes active-now-pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-success) 24%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-success) 12%, transparent); } } /* Section label (validate review, etc) */ .section-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: color-mix(in oklch, var(--color-base-content) 65%, transparent); padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-base-300); margin-bottom: 0.75rem; width: 100%; } .section-label-hint { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 0.7rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent); font-style: italic; } /* Side-by-side field comparison */ .compare-current { border-left: 3px solid color-mix(in oklch, var(--color-info) 45%, transparent); padding-left: 0.75rem; } .compare-enriched { border-left: 3px solid color-mix(in oklch, var(--color-primary) 55%, transparent); padding-left: 0.75rem; } .compare-arrow { display: none; align-items: center; justify-content: center; color: color-mix(in oklch, var(--color-base-content) 35%, transparent); } @media (min-width: 1024px) { .compare-arrow { display: flex; } } /* Hero Approve button */ .btn-approve-hero { font-size: 0.95rem; font-weight: 600; padding: 0 1.25rem; height: 2.5rem; box-shadow: 0 2px 0 color-mix(in oklch, var(--color-primary) 60%, transparent); } /* ----------------------------------------- 9b. SETTINGS / INSIGHTS SUBNAV In-page secondary rail rendered inside .app-content. Not a second sidebar — sticks to the top of the scroll area at topbar height + 16px so it never overlaps the sticky topbar. The host page wraps content in .settings-layout (200px rail | content) and pulls in the partials/_settings_subnav.html partial. Math at 1280px laptop minimum: sidebar 240px (or 56px collapsed) + subnav 200px + .app-content gutters 1.75rem × 2 (56px) + grid gap 1.5rem (24px) = 520px chrome when sidebar is expanded → 760px usable content. Workable for the forms we put in here; tighter sidebar (collapsed) lifts that to 944px. ----------------------------------------- */ .settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; align-items: start; } .subnav { /* Sticky offset = topbar height + 16px breathing room so the section label doesn't kiss the topbar's bottom border. */ position: sticky; top: calc(var(--topbar-h) + 16px); width: 200px; flex-shrink: 0; padding: 0.25rem 0.75rem 1rem 0; border-right: 1px solid var(--color-base-300); /* Sit slightly above the page content so a long form scrolling past can't poke through the right border on subpixel layouts. */ z-index: 1; } .subnav__section + .subnav__section { margin-top: 0.875rem; } .subnav__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); font-weight: 600; padding: 0.375rem 0.625rem 0.5rem; } .subnav__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.45rem 0.625rem; border-radius: 0.45rem; font-size: 0.82rem; line-height: 1.3; color: color-mix(in oklch, var(--color-base-content) 78%, transparent); transition: background-color 0.12s ease, color 0.12s ease; text-decoration: none; font-weight: 500; } .subnav__link:hover { background: color-mix(in oklch, var(--color-base-content) 5%, transparent); color: var(--color-base-content); } .subnav__link:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-primary) 45%, transparent); outline-offset: 1px; } .subnav__link-icon { width: 16px; height: 16px; flex-shrink: 0; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); } .subnav__link.is-active { background: color-mix(in oklch, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 600; } .subnav__link.is-active .subnav__link-icon { color: var(--color-primary); } /* Scrollspy variant of the subnav: identical visual, different active semantics. The active state is toggled by the IntersectionObserver in templates/settings/index.html instead of `request.url.path`. Adding .subnav__link.is-spy hint allows future style divergence without touching the partial. */ .subnav__link.is-spy { cursor: pointer; } /* ----------------------------------------- 9b. SETTINGS LONG PAGE — anchored sections + scrollspy The /settings route is a long single-column document divided into anchored sections (#integrations, #brands, …). The .subnav above highlights the section currently crossing the top 30% of the viewport; anchor jumps via the subnav links scroll-smoothly to each section. ----------------------------------------- */ .settings-section { /* Anchor-jump offset so #brands lands below the sticky topbar instead of being hidden under it. Mirrors the .subnav sticky offset. */ scroll-margin-top: calc(var(--topbar-h) + 16px); padding-top: 0.5rem; margin-top: 1.75rem; } .settings-section:first-of-type { margin-top: 0; } .settings-section__title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-base-300); } /* Smooth-scroll for the page when subnav anchor links are clicked. Scoped to the long page so other routes don't pick up the behaviour (e.g. validate's "scroll to error" jumps should be instant). */ html:has(.settings-long-page) { scroll-behavior: smooth; } /* Lazy-load skeleton inside a settings-section while its HTMX swap is pending. Same look the rest of the app uses, just constrained so the long page doesn't reflow once each section's real content lands. */ .settings-section-skeleton { min-height: 8rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; } /* ----------------------------------------- 9c. SETTINGS — EH2 SECTION RESTYLES (R1a/b/c) Ported from the EH2 prototype (conn-card / tpl-panel / dtable), re-expressed in our token system so both themes resolve. The prototype's raw --surface/--border/--text/--brand tokens are already aliased in the theme blocks above, so most rules read through them directly. ----------------------------------------- */ /* ---- R1a: API connections as cubes ---- */ .conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0.75rem; } .conn-card { display: flex; align-items: center; gap: 0.8125rem; padding: 0.875rem 1rem; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: 0.625rem; text-align: left; width: 100%; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .conn-card:hover { border-color: var(--border-strong); background: var(--surface-hover); } .conn-card.is-open { border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-base-300)); } /* Coloured logo tile — the per-service mark. Background colour is set inline per service (data-driven brand tint); text stays white so the initial reads on any tint in either theme. */ .conn-logo { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; flex: none; letter-spacing: -0.01em; } .conn-card__body { flex: 1; min-width: 0; } .conn-card__name { font-weight: 600; font-size: 0.875rem; color: var(--color-base-content); line-height: 1.3; } .conn-card__kind { font-size: 0.75rem; color: var(--bc-60); margin-top: 1px; } .conn-card__meta { font-family: var(--mono); font-size: 0.71875rem; color: var(--bc-50); margin-top: 0.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conn-card__gear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; border: 0; background: transparent; color: var(--bc-50); transition: transform 0.18s ease, color 0.12s ease; pointer-events: none; } .conn-card.is-open .conn-card__gear { color: var(--color-primary); transform: rotate(90deg); } /* Expanded credential form panel — sits below the card grid, full width of the section so wide forms (Akeneo, GS1) get room. */ .conn-panel { margin-top: 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.625rem; background: var(--color-base-100); padding: 1rem 1.125rem 1.125rem; } .conn-panel__head { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.75rem; margin-bottom: 0.875rem; border-bottom: 1px solid var(--color-base-300); } .conn-panel__head .conn-logo { width: 30px; height: 30px; border-radius: 7px; font-size: 12px; } .conn-panel__title { font-weight: 600; font-size: 0.9rem; } /* ---- R1c: Prompts two-pane (stage list + editor) ---- */ .prompt-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: start; } .prompt-stages { border: 1px solid var(--color-base-300); border-radius: 0.625rem; background: var(--color-base-100); overflow: hidden; } .prompt-stage { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; padding: 0.8125rem 1rem; cursor: pointer; transition: background 0.12s ease; } .prompt-stage:last-child { border-bottom: 0; } .prompt-stage:hover { background: var(--surface-hover); } .prompt-stage.is-active { background: var(--brand-soft); } .prompt-stage__name { font-size: 0.84rem; font-weight: 500; color: var(--color-base-content); } .prompt-stage.is-active .prompt-stage__name { color: var(--color-primary); } .prompt-stage__meta { font-size: 0.72rem; color: var(--bc-60); margin-top: 2px; } .prompt-editor { border: 1px solid var(--color-base-300); border-radius: 0.625rem; background: var(--color-base-100); overflow: hidden; } .prompt-editor__head { display: flex; align-items: center; gap: 0.625rem; padding: 0.8125rem 1rem; border-bottom: 1px solid var(--color-base-300); } .prompt-editor__head h3 { margin: 0; font-size: 0.875rem; font-weight: 600; } /* Template chooser panel (set-default rows) — sits between the editor head and the textarea. Tinted surface to separate it from the editor body the way the prototype's .tpl-panel does. */ .tpl-panel { border-bottom: 1px solid var(--color-base-300); background: var(--color-base-200); } .tpl-panel__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 1rem 0.5rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bc-50); font-weight: 600; } .tpl-list { display: flex; flex-direction: column; gap: 0.375rem; padding: 0 0.75rem 0.75rem; } .tpl-row { display: flex; align-items: flex-start; gap: 0.6875rem; padding: 0.625rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.5rem; background: var(--color-base-100); cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .tpl-row:hover { border-color: var(--border-strong); } .tpl-row.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--brand-soft); } /* Set-default radio — clicking it activates the template (one active per kind). Filled teal + check when this row is the default. */ .tpl-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; display: grid; place-items: center; color: var(--color-primary-content); margin-top: 1px; background: transparent; padding: 0; cursor: pointer; } .tpl-radio.is-on { background: var(--color-primary); border-color: var(--color-primary); } .tpl-radio .icon { width: 11px; height: 11px; stroke-width: 3; } .tpl-row__main { min-width: 0; flex: 1; } .tpl-row__name { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-base-content); } .tpl-row__desc { font-size: 0.75rem; color: var(--bc-50); margin-top: 2px; } .tpl-badge-default { font-size: 0.625rem; font-weight: 600; line-height: 1; padding: 0.1875rem 0.375rem; border-radius: 0.3rem; color: var(--color-success); background: color-mix(in oklch, var(--color-success) 16%, transparent); } .tpl-setdefault { flex: none; align-self: center; font-size: 0.71875rem; font-weight: 600; color: var(--color-primary); padding: 0.1875rem 0.5625rem; border: 1px solid var(--brand-line); border-radius: 0.4rem; background: var(--brand-soft); cursor: pointer; } .tpl-setdefault:hover { background: color-mix(in oklch, var(--color-primary) 22%, transparent); } /* ---- R1a/b: dense data table (dtable) ---- */ .dtable { width: 100%; border-collapse: collapse; } .dtable thead th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--bc-50); padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--color-base-300); background: color-mix(in oklch, var(--color-base-200) 50%, var(--color-base-100)); } .dtable tbody td { padding: 0.6875rem 0.875rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 0.8125rem; } .dtable tbody tr { transition: background 0.1s ease; } .dtable tbody tr:hover { background: var(--surface-hover); } .dtable tbody tr:last-child td { border-bottom: 0; } .dtable .cell-mono { font-family: var(--mono); font-size: 0.78rem; color: var(--bc-75); } /* Verified status cell — green dot + label, reads in both themes. */ .dtable-verified { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--color-success); } .dtable-verified::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 18%, transparent); flex: none; } /* ----------------------------------------- 10. LANDING / HOME TILES ----------------------------------------- */ .launch-tile { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: 0.75rem; text-decoration: none; color: var(--color-base-content); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; } .launch-tile::after { content: ""; position: absolute; inset: auto -2rem -2rem auto; width: 6rem; height: 6rem; background: color-mix(in oklch, var(--color-primary) 10%, transparent); border-radius: 9999px; opacity: 0.6; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; } .launch-tile:hover { border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-base-300)); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(15, 20, 34, 0.06); } .launch-tile:hover::after { transform: scale(1.15); opacity: 0.8; } .launch-tile-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: color-mix(in oklch, var(--color-primary) 14%, transparent); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .launch-tile-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; position: relative; z-index: 1; } .launch-tile-desc { font-size: 0.8rem; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); line-height: 1.4; position: relative; z-index: 1; } .launch-tile-meta { margin-top: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in oklch, var(--color-primary) 70%, var(--color-base-content)); font-weight: 600; position: relative; z-index: 1; } /* Status-pill variant of the meta row. Used on /settings/index where each tile shows a chip ("5/8 providers configured") instead of a call-to-action caret. The pill carries its own typography so we neutralise the uppercase + tracking the default meta applies. */ .launch-tile-meta--status { text-transform: none; letter-spacing: 0; font-weight: 500; color: inherit; display: flex; align-items: center; padding-top: 0.25rem; } /* ----------------------------------------- 11. STATUS TAB STRIP (page-level filter) ----------------------------------------- */ .status-tabs { display: flex; align-items: stretch; gap: 0.25rem; border-bottom: 1px solid var(--color-base-300); margin-bottom: 0.875rem; overflow-x: auto; scrollbar-width: none; } .status-tabs::-webkit-scrollbar { display: none; } .status-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.875rem; font-size: 0.82rem; font-weight: 500; color: color-mix(in oklch, var(--color-base-content) 65%, transparent); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .status-tab:hover { color: var(--color-base-content); } .status-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } .status-tab-count { display: inline-flex; align-items: center; padding: 0 0.45rem; min-width: 1.4rem; height: 1.15rem; border-radius: 9999px; background: color-mix(in oklch, var(--color-base-content) 8%, transparent); color: color-mix(in oklch, var(--color-base-content) 70%, transparent); font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .status-tab.is-active .status-tab-count { background: color-mix(in oklch, var(--color-primary) 18%, transparent); color: var(--color-primary); } /* ----------------------------------------- 12. COMPACT FILTER BAR — claude-design tokens Flat chip-style controls on a base-100 band with hairline borders. Drives the product-list filters; select elements are styled to match the chip look so they visually line up with the search box. ----------------------------------------- */ .filter-bar { /* Canonical (EnrichmentHelper.html line 848): single-line filter row at 1280px+ — flex / gap 10px / wrap as a fallback under laptop width. nowrap above 1280px keeps every filter chip in one band so the user's eye doesn't have to walk a second row. */ display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; width: 100%; min-width: 0; } @media (max-width: 1279px) { .filter-bar { flex-wrap: wrap; } } .filter-bar .search-wrap { position: relative; flex: 0 1 16rem; /* shrinkable, capped at 256px */ min-width: 12rem; max-width: 22rem; height: 32px; display: flex; align-items: center; background: var(--color-base-100); border: 1px solid color-mix(in oklch, var(--color-base-300) 85%, transparent); border-radius: 7px; padding: 0 10px 0 30px; transition: border-color 120ms ease; } .filter-bar .search-wrap:focus-within { border-color: color-mix(in oklch, var(--color-primary) 55%, transparent); } .filter-bar .search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); pointer-events: none; } .filter-bar .search-wrap input { background: transparent; border: 0; outline: 0; flex: 1; font-size: 13px; height: 100%; padding: 0; color: var(--color-base-content); } .filter-bar .search-wrap input::placeholder { color: color-mix(in oklch, var(--color-base-content) 40%, transparent); } /* Selects: flatten daisyUI select look into the chip family. Width is ``auto`` (set inline on combobox triggers) so the chip sizes to its selected label — matches canonical's per-select sizing. */ .filter-bar select.select, .filter-bar button.select { height: 32px; min-height: 32px; padding: 0 28px 0 10px; font-size: 12.5px; font-weight: 500; background-color: var(--color-base-100); border: 1px solid color-mix(in oklch, var(--color-base-300) 85%, transparent); border-radius: 7px; color: color-mix(in oklch, var(--color-base-content) 80%, transparent); transition: border-color 120ms ease, color 120ms ease; flex-shrink: 0; } .filter-bar select.select { width: auto; } .filter-bar select.select:hover { border-color: color-mix(in oklch, var(--color-base-content) 22%, transparent); } .filter-bar select.select:focus { outline: none; border-color: color-mix(in oklch, var(--color-primary) 55%, transparent); color: var(--color-base-content); } .filter-bar .spacer { flex: 1; } /* ----------------------------------------- 13. PRODUCT ROW THUMBNAIL ----------------------------------------- */ .product-thumb { width: 2.25rem; height: 2.25rem; border-radius: 0.45rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; flex-shrink: 0; text-transform: uppercase; border: 1px solid transparent; } .product-thumb-img { object-fit: cover; background: var(--color-base-200); border: 1px solid var(--color-base-300); } /* Eight-color palette cycled by SKU length % 8 */ .thumb-c0 { background: color-mix(in oklch, #2f6fd3 18%, transparent); color: #2f6fd3; } .thumb-c1 { background: color-mix(in oklch, #6c5ce7 18%, transparent); color: #6c5ce7; } .thumb-c2 { background: color-mix(in oklch, #00a884 20%, transparent); color: #008a6d; } .thumb-c3 { background: color-mix(in oklch, #e27d3b 20%, transparent); color: #c95f1a; } .thumb-c4 { background: color-mix(in oklch, #d4487e 18%, transparent); color: #bb2d65; } .thumb-c5 { background: color-mix(in oklch, #2d8ab0 20%, transparent); color: #1f6f91; } .thumb-c6 { background: color-mix(in oklch, #7a6042 22%, transparent); color: #7a6042; } .thumb-c7 { background: color-mix(in oklch, #4a5568 18%, transparent); color: #4a5568; } [data-theme="dim"] .thumb-c0, [data-theme="dim"] .thumb-c1, [data-theme="dim"] .thumb-c2, [data-theme="dim"] .thumb-c3, [data-theme="dim"] .thumb-c4, [data-theme="dim"] .thumb-c5, [data-theme="dim"] .thumb-c6, [data-theme="dim"] .thumb-c7 { color-scheme: dark; filter: brightness(1.15) saturate(1.1); } .product-cell { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .product-cell-body { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; } .product-cell-primary { font-size: 0.82rem; font-weight: 600; color: var(--color-base-content); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .product-cell-secondary { font-size: 0.7rem; color: color-mix(in oklch, var(--color-base-content) 55%, transparent); font-family: var(--mono); line-height: 1.1; } .product-cell-brand { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: color-mix(in oklch, var(--color-base-content) 65%, transparent); font-weight: 500; } /* Enabled/disabled indicator on product thumbnails. Uses a real child rather than ::after — because ::after doesn't render on tags, and using a real element sidesteps any pseudo-element quirks entirely. Green = live in Akeneo, red = disabled. */ .product-thumb-box { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; } .product-thumb-dot { position: absolute; right: -3px; top: -3px; width: 0.6rem; height: 0.6rem; border-radius: 9999px; border: 1.5px solid var(--color-base-100); pointer-events: none; z-index: 1; } .product-thumb-box.is-enabled .product-thumb-dot { background: var(--color-success); } .product-thumb-box.is-disabled .product-thumb-dot { background: var(--color-error); } .product-thumb-box.is-disabled .product-thumb { border-color: color-mix(in oklch, var(--color-error) 45%, transparent); } /* ----------------------------------------- 14. FLOATING SELECTION BAR ----------------------------------------- */ .selection-bar { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(0); display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 0.5rem 1rem; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: 9999px; box-shadow: 0 10px 36px rgba(15, 20, 34, 0.14), 0 2px 8px rgba(15, 20, 34, 0.08); z-index: 40; max-width: calc(100vw - 2rem); min-width: min(560px, 92vw); transition: transform 0.25s ease, opacity 0.25s ease; } .selection-bar.is-hidden { transform: translateX(-50%) translateY(200%); opacity: 0; pointer-events: none; } .selection-bar-count { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-base-content); font-weight: 500; } .selection-bar-count strong { font-weight: 700; font-variant-numeric: tabular-nums; } .selection-bar-divider { width: 1px; height: 1.5rem; background: var(--color-base-300); } /* Data-density table tweaks so product-cell rows breathe right. Styling derives from the claude-design tokens: uppercase micro-type headers on a subtle tinted band, hairline rows, primary-tinted hover. */ .table-products { font-size: 13px; } .table-products thead th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px; color: color-mix(in oklch, var(--color-base-content) 60%, transparent); background: color-mix(in oklch, var(--color-base-200) 50%, var(--color-base-100)); border-bottom: 1px solid color-mix(in oklch, var(--color-base-300) 65%, transparent); } /* Sortable column headers — rendered by the sort_header macro in _table.html. The whole is clickable via the nested ; we keep the link block-level so the hover target matches the cell. */ .sortable-th { padding: 0 !important; } .sortable-th .sort-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 10px 14px; width: 100%; color: inherit; text-decoration: none; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; user-select: none; } .sortable-th.text-right .sort-link { justify-content: flex-end; } .sortable-th .sort-link:hover { background: color-mix(in oklch, var(--color-base-content) 6%, transparent); color: var(--color-base-content); } .sortable-th.is-sorted { color: var(--color-primary); } .sortable-th.is-sorted .sort-link { color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 7%, transparent); } .sort-icon { width: 0.8rem; height: 0.8rem; flex-shrink: 0; } .sort-icon.is-idle { opacity: 0.35; } .sortable-th .sort-link:hover .sort-icon.is-idle { opacity: 0.7; } .table-products tbody td { padding: 10px 14px; vertical-align: middle; } .table-products tbody td.status-cell { /* Wider right padding so the status pill stops hugging the boundary with the (often empty) action column. Higher specificity than a bare Tailwind utility so the override doesn't get silently lost. */ padding-right: 1.75rem; } .table-products tbody tr { border-bottom: 1px solid color-mix(in oklch, var(--color-base-300) 65%, transparent); transition: background 80ms ease; } .table-products tbody tr:last-child { border-bottom: none; } .table-products tbody tr:hover { background: color-mix(in oklch, var(--color-primary) 6%, transparent); } /* Docs column — two small icon chips matching the claude-design filter bar Docs row. Bolt icon = large energy label, doc icon = datasheet. Neutral square by default, success-tinted when the artefact is present. */ .docs-cell { display: inline-flex; gap: 6px; align-items: center; justify-content: center; } .doc-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: color-mix(in oklch, var(--color-base-content) 40%, transparent); background: color-mix(in oklch, var(--color-base-300) 85%, transparent); } .doc-dot svg { width: 11px; height: 11px; } .doc-dot.is-on { color: var(--color-success); background: color-mix(in oklch, var(--color-success) 14%, transparent); } /* Legacy horizontal-nav active indicator (retained for any sub-menus) */ .nav-active { background-color: color-mix(in oklch, var(--color-primary) 12%, transparent); color: var(--color-primary); border-radius: 0.375rem; font-weight: 600; } /* Keep .navbar component usable on auth pages (login form) */ .navbar { background: var(--color-base-100); border-bottom: 1px solid var(--color-base-300); } /* ----------------------------------------- 15. DASHBOARD OPS — stat tiles, pills, source rows, section dividers. Feeds the Activity Feed / People Panel / Pipeline Health / System Health cards. ----------------------------------------- */ .tnum { font-variant-numeric: tabular-nums; } .text-muted { color: color-mix(in oklch, var(--color-base-content) 65%, transparent); } .text-mute2 { color: color-mix(in oklch, var(--color-base-content) 40%, transparent); } /* Page header — matches the prototype's design-system spec. Canonical (app/styles.css line 149-152): title 22px / sub 13px / 18px margin-bottom. We keep rem units so the user's browser zoom scales the page coherently, but the values trace 1:1 to canonical. */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.125rem; /* 18px — canon */ flex-wrap: wrap; } .page-header__title { font-size: 1.375rem; /* 22px — canon */ font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; } .page-header__subtitle { margin: 0.1875rem 0 0; /* 3px — canon */ color: color-mix(in oklch, var(--color-base-content) 60%, transparent); font-size: 0.8125rem; /* 13px — canon */ line-height: 1.5; max-width: 40rem; /* 640px — canon */ } .page-header__actions { display: flex; gap: 0.5rem; flex-shrink: 0; } /* Dashboard multi-column layouts — defined in pure CSS (no Tailwind utility dependency) because the browser-JIT for Tailwind has a visible first-paint delay and we want these to be right on initial render. Shared breakpoint matches the app-shell mobile cutover at 900px; the `lg` variant jumps to a 2-col grid at ≥1024px. */ .dash-stack { display: flex; flex-direction: column; gap: 1.25rem; } /* Paired widgets in .dash-2col — keep both halves the same height so the cost donut card and the trend chart card line up at the bottom even when one has a longer legend. The taller half drives the row height; the shorter card flex-fills its grid cell to match. Targets `> div` only — leaving the trend chart's trailing