/* ------------------------------------------------------------------------------------------ Platform dashboard design system. Light by default, dark on . Plain (non-scoped) stylesheet, same reasoning as admin.css: these classes are shared by several components and Blazor scoped CSS cannot share a class across components without ::deep gymnastics. Everything is nested under .dash-shell so it cannot leak into the other surfaces — the admin shell (--ad-* in admin.css) and the public site (--ln-* in PublicLayout.razor.css) are untouched by this file. Visual reference: .ai/reference/initial-dasbhoard.png Chart colours are not free choices. The series hue, the status palette and the ink steps below were run through the data-viz validator against this file's own white surface: the series blue, good and critical all clear 3:1; warning is sub-3:1 by design and is therefore never used alone — every status mark ships beside a visible label and count. ------------------------------------------------------------------------------------------ */ .dash-shell { /* surfaces */ --dash-canvas: #f4f6f9; --dash-surface: #ffffff; --dash-surface-2: #f8fafc; --dash-border: #e6eaf0; --dash-border-strong: #d8dee7; /* ink — muted is a darker step than the reference palette's #898781 so small axis text clears 4.5:1 on white (5.18:1) */ --dash-ink: #0b0b0b; --dash-ink-2: #52514e; --dash-muted: #6e6d68; /* series (single hue, light -> dark) */ --dash-accent: #2a78d6; --dash-accent-strong: #256abf; /* Accent behind text (buttons, the brand mark) — a darker step than the series hue, which clears 3:1 as a mark but only 4.42:1 under white text. */ --dash-accent-btn: #256abf; --dash-accent-btn-hover: #1f5aa6; /* The column track is a scale slot, not a value. Kept faint on purpose so an empty period cannot be misread as a small one. */ --dash-accent-track: #f1f6fd; --dash-accent-soft: rgba(42, 120, 214, .08); /* status palette — fixed, never themed, never reused as a series colour */ --dash-good: #0ca30c; --dash-good-ink: #006300; --dash-good-soft: #e7f6e7; --dash-warn: #fab219; --dash-warn-ink: #85560a; --dash-warn-soft: #fdf4de; --dash-serious: #ec835a; --dash-serious-ink: #93441f; --dash-serious-soft: #fdeee7; --dash-critical: #d03b3b; --dash-critical-ink: #a12626; --dash-critical-soft: #fbeaea; --dash-neutral: #b9bec7; --dash-neutral-ink: #5c636e; --dash-neutral-soft: #eef1f5; /* chart chrome */ --dash-grid: #eceff3; --dash-baseline: #d8dee7; /* Ink that sits ON an accent fill, and the tooltip's own surface — both invert with the theme, so neither may be written as a literal in the rules below. */ --dash-on-accent: #ffffff; --dash-tip-bg: #0b0b0b; --dash-tip-ink: #ffffff; --dash-shadow: rgba(11, 11, 11, .08); --dash-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --dash-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace; --dash-radius: 14px; --dash-radius-sm: 8px; display: flex; min-height: 100vh; font-family: var(--dash-sans); color: var(--dash-ink); background-color: var(--dash-canvas); color-scheme: light; } /* ---------------------------------------------------------------- dark theme -------------- */ /* Selected, not flipped. Dark mode is its own set of steps measured against the dark surface, because inverting a light palette lands the marks outside every readable band — the light greens and ambers here sit at 1.8–2.6:1 on white and would sit far too hot on #171b21. Surfaces deliberately match admin.css's dark palette rather than inventing a third one, so the two shells read as one product in either theme. Measured against --dash-surface (#171b21): good 9.9:1, warning 10.4:1, serious 7.6:1, critical 5.3:1, neutral 5.6:1, series blue 6.4:1 — every mark clears 4.5:1, which the light theme cannot manage (its amber is 1.83:1). Critical moves off the light theme's red-orange to a crimson so it separates from "serious": at #f87171 the two were ΔE 10.6 apart in OKLab, below the 15 threshold at which full-colour readers reliably tell neighbours apart. What survives from light: the 4-step status ramp still crowds in the yellow-orange region (worst adjacent pair ΔE 11.2), and green↔amber sits in the 6–8 CVD floor band. That is inherent to a semantic ramp walking one arc of hue space, and it is why every status mark in this dashboard ships with a visible label and count. Colour is never the only channel. */ [data-theme="dark"] .dash-shell { --dash-canvas: #0f1216; --dash-surface: #171b21; --dash-surface-2: #1b1f26; --dash-border: #272d36; --dash-border-strong: #333a45; --dash-ink: #e9ecf1; --dash-ink-2: #a3acb9; --dash-muted: #8d96a3; --dash-accent: #4d9fff; --dash-accent-strong: #74b4ff; /* In dark the series hue is already well clear behind #08101c text (7:1), so the button step is the same blue rather than a darker one. */ --dash-accent-btn: #4d9fff; --dash-accent-btn-hover: #74b4ff; --dash-accent-track: #1d2531; --dash-accent-soft: rgba(77, 159, 255, .12); --dash-good: #4ade80; --dash-good-ink: #4ade80; --dash-good-soft: #1e362e; --dash-warn: #fbbf24; --dash-warn-ink: #fbbf24; --dash-warn-soft: #373221; --dash-serious: #fb923c; --dash-serious-ink: #fb923c; --dash-serious-soft: #372c25; --dash-critical: #f2596b; /* A lighter step for chip text: the mark itself lands at 4.44:1 on its own chip, just under AA; this clears it at 5.17:1. */ --dash-critical-ink: #f4707f; --dash-critical-soft: #36242b; --dash-neutral: #8b93a1; --dash-neutral-ink: #8b93a1; --dash-neutral-soft: #272c33; --dash-grid: #21262e; --dash-baseline: #2c323c; --dash-on-accent: #08101c; /* The tooltip inverts against the surface, so in dark it is light-on-dark's opposite. */ --dash-tip-bg: #e9ecf1; --dash-tip-ink: #0f1216; --dash-shadow: rgba(0, 0, 0, .45); color-scheme: dark; } /* ---------------------------------------------------------------- sidebar ----------------- */ /* The sidebar itself is not styled here. This shell renders AdminNavMenu, the product's one menu, and that component is dressed by the .admin-sidebar block in admin.css — which now wears this dashboard's treatment (black ink, bordered active row) in both shells. The --ad-* tokens it needs are declared on .dash-shell by that same file. */ /* Round initial badge. Still here because PrincipalDashboard uses it for the people it lists, which is what it was drawn for; the sidebar's own avatar is .admin-avatar. */ .dash-avatar { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background-color: var(--dash-accent-track); color: var(--dash-accent-strong); font-size: .75rem; font-weight: 700; } /* ---------------------------------------------------------------- main / topbar ----------- */ .dash-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .dash-topbar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background-color: var(--dash-surface); border-bottom: 1px solid var(--dash-border); position: sticky; top: 0; z-index: 5; } .dash-search { display: flex; align-items: center; gap: .5rem; flex: 0 1 380px; padding: .4375rem .75rem; border-radius: 999px; border: 1px solid var(--dash-border-strong); background-color: var(--dash-surface-2); } .dash-search:focus-within { border-color: var(--dash-accent); box-shadow: 0 0 0 3px var(--dash-accent-soft); } .dash-search svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--dash-muted); } .dash-search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; font-size: .8125rem; color: var(--dash-ink); } .dash-search input:focus { outline: none; } .dash-topbar-spacer { flex: 1 1 auto; } .dash-content { padding: 1.5rem; max-width: 1440px; width: 100%; } /* ---------------------------------------------------------------- page head --------------- */ .dash-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .dash-page-title { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; } .dash-page-sub { margin: .375rem 0 0; font-size: .875rem; color: var(--dash-ink-2); } .dash-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* ---------------------------------------------------------------- buttons ----------------- */ .dash-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .75rem; border-radius: var(--dash-radius-sm); border: 1px solid var(--dash-border-strong); background-color: var(--dash-surface); color: var(--dash-ink-2); font: inherit; font-size: .8125rem; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .dash-btn:hover { background-color: var(--dash-surface-2); color: var(--dash-ink); } .dash-btn svg { width: 14px; height: 14px; color: var(--dash-muted); } /* Not --dash-accent: that is the chart series hue, chosen against the surface behind a mark, where 3:1 is the bar. Behind button text it needs 4.5:1, and the series blue reaches only 4.42:1 under white. The two roles get their own token rather than one being bent to suit the other. */ .dash-btn-primary { background-color: var(--dash-accent-btn); border-color: var(--dash-accent-btn); color: var(--dash-on-accent); } .dash-btn-primary:hover { background-color: var(--dash-accent-btn-hover); border-color: var(--dash-accent-btn-hover); color: var(--dash-on-accent); } .dash-btn-primary svg { color: currentColor; } .dash-btn-block { width: 100%; justify-content: center; } /* Segmented range control — the only chart filter, one row above the charts. */ .dash-segment { display: inline-flex; padding: 2px; border-radius: var(--dash-radius-sm); border: 1px solid var(--dash-border-strong); background-color: var(--dash-surface-2); } .dash-segment button { padding: .3125rem .625rem; border: 0; border-radius: 6px; background: none; color: var(--dash-ink-2); font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; } .dash-segment button:hover { color: var(--dash-ink); } .dash-segment button[aria-pressed="true"] { background-color: var(--dash-surface); color: var(--dash-ink); font-weight: 600; box-shadow: 0 1px 2px var(--dash-shadow); } /* ---------------------------------------------------------------- cards / panels ---------- */ .dash-grid { display: grid; gap: 1rem; } .dash-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dash-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-card { background-color: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: var(--dash-radius); padding: 1rem 1.125rem; } .dash-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; } .dash-card-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--dash-accent); } .dash-card-label { font-size: .8125rem; font-weight: 600; color: var(--dash-ink-2); } .dash-card-info { margin-left: auto; width: 15px; height: 15px; color: var(--dash-muted); cursor: help; } .dash-metric { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* Stat-tile value: proportional figures on purpose — tabular-nums looks loose at this size. */ .dash-metric-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .dash-metric-hint { margin: .5rem 0 0; font-size: .75rem; color: var(--dash-muted); } /* Exactly one hero figure per view. */ .dash-hero { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .dash-panel { background-color: var(--dash-surface); border: 1px solid var(--dash-border); border-radius: var(--dash-radius); padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; min-width: 0; } .dash-panel-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; } .dash-panel-title { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--dash-ink); } .dash-panel-tools { margin-left: auto; display: flex; align-items: center; gap: .375rem; } .dash-panel-rule { border: 0; border-top: 1px solid var(--dash-border); margin: 1rem 0 0; } .dash-delta { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .4375rem; border-radius: 6px; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; } .dash-delta svg { width: 12px; height: 12px; } .dash-delta-up { background-color: var(--dash-good-soft); color: var(--dash-good-ink); } .dash-delta-down { background-color: var(--dash-critical-soft); color: var(--dash-critical-ink); } .dash-delta-flat { background-color: var(--dash-neutral-soft); color: var(--dash-neutral-ink); } .dash-delta-note { font-size: .8125rem; color: var(--dash-ink-2); } /* ---------------------------------------------------------------- column chart ------------ */ .dash-chart { display: flex; flex-direction: column; gap: .5rem; } .dash-chart-body { display: flex; gap: .625rem; min-width: 0; } .dash-chart-yaxis { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 auto; font-size: .6875rem; font-variant-numeric: tabular-nums; color: var(--dash-muted); text-align: right; /* half a line so each tick sits on its gridline */ margin-block: -.4375rem; } .dash-chart-plot { position: relative; flex: 1 1 auto; min-width: 0; height: 190px; border-bottom: 1px solid var(--dash-baseline); } .dash-chart-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; } .dash-chart-lines span { display: block; border-top: 1px solid var(--dash-grid); } .dash-chart-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; /* the surface gap that separates adjacent bars */ gap: 4px; } .dash-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; justify-content: center; align-items: flex-end; background: none; border: 0; padding: 0; font: inherit; cursor: default; } .dash-col-track { position: relative; width: 100%; /* bars are capped, never filling the band — the leftover is air */ max-width: 24px; height: 100%; background-color: var(--dash-accent-track); border-radius: 4px 4px 0 0; } .dash-col-fill { position: absolute; left: 0; right: 0; bottom: 0; background-color: var(--dash-accent); /* 4px rounded data-end, square at the baseline */ border-radius: 4px 4px 0 0; min-height: 3px; } .dash-col:hover .dash-col-fill, .dash-col:focus-visible .dash-col-fill { background-color: var(--dash-accent-strong); } .dash-col-peak .dash-col-fill { background-color: var(--dash-accent-strong); } .dash-col:focus-visible { outline: 2px solid var(--dash-accent); outline-offset: 2px; border-radius: 4px; } /* Hover tooltip. The peak also carries a persistent direct label (see .dash-col-label). */ .dash-col-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: .25rem .4375rem; border-radius: 6px; background-color: var(--dash-tip-bg); color: var(--dash-tip-ink); font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 2; } .dash-col:hover .dash-col-tip, .dash-col:focus-visible .dash-col-tip { opacity: 1; } .dash-col-label { position: absolute; left: 50%; transform: translateX(-50%); padding: .1875rem .375rem; border-radius: 6px; background-color: var(--dash-tip-bg); color: var(--dash-tip-ink); font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .dash-chart-xaxis { display: flex; gap: 4px; font-size: .6875rem; color: var(--dash-muted); } .dash-chart-xaxis span { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--dash-muted); } /* ---------------------------------------------------------------- status bars ------------- */ .dash-bars { display: flex; flex-direction: column; gap: .875rem; } .dash-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem .75rem; align-items: center; } .dash-bar-key { display: flex; align-items: center; gap: .4375rem; min-width: 0; font-size: .8125rem; color: var(--dash-ink-2); } .dash-bar-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 3px; } .dash-bar-value { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dash-ink); } .dash-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background-color: var(--dash-neutral-soft); overflow: hidden; } .dash-bar-fill { height: 100%; border-radius: 4px; min-width: 2px; } /* Status marks. Never carry meaning alone — every row above ships a label and a count. */ .dash-mark-good { background-color: var(--dash-good); } .dash-mark-warn { background-color: var(--dash-warn); } .dash-mark-serious { background-color: var(--dash-serious); } .dash-mark-critical { background-color: var(--dash-critical); } .dash-mark-neutral { background-color: var(--dash-neutral); } .dash-mark-accent { background-color: var(--dash-accent); } /* ---------------------------------------------------------------- feed / list ------------- */ .dash-feed { display: flex; flex-direction: column; } .dash-feed-item { display: flex; align-items: center; gap: .625rem; padding: .625rem 0; border-bottom: 1px solid var(--dash-border); } .dash-feed-item:last-child { border-bottom: 0; } .dash-feed-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; } .dash-feed-text { display: flex; flex-direction: column; min-width: 0; font-size: .8125rem; font-weight: 500; color: var(--dash-ink); } .dash-feed-text span { font-size: .75rem; font-weight: 400; color: var(--dash-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-feed-time { margin-left: auto; flex: 0 0 auto; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--dash-muted); } .dash-empty { margin: 0; font-size: .8125rem; color: var(--dash-muted); } .dash-alert { padding: .75rem 1rem; border-radius: var(--dash-radius-sm); border: 1px solid var(--dash-critical); background-color: var(--dash-critical-soft); color: var(--dash-critical-ink); font-size: .875rem; } .dash-table-note { margin: .75rem 0 0; font-size: .75rem; color: var(--dash-muted); } /* ---------------------------------------------------------------- responsive -------------- */ @media (max-width: 1180px) { .dash-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Stacking the shell is not here: the sidebar folds at 900px and admin.css owns that breakpoint now that the menu is shared. Splitting them would leave a band where the shell had stacked but the sidebar was still a 240px column. */ @media (max-width: 980px) { .dash-grid-2, .dash-grid-3, .dash-grid-4 { grid-template-columns: minmax(0, 1fr); } .dash-page-title { font-size: 1.75rem; } .dash-hero { font-size: 2.25rem; } } @media (max-width: 640px) { .dash-content, .dash-topbar { padding-inline: 1rem; } .dash-search { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .dash-col-tip { transition: none; } }