/* App-level overrides. BlazorBlueprint's component CSS lives in the `bb` cascade
layer and wins over this file regardless of order, so retheme through
the documented CSS custom properties rather than by restyling elements. */
/* Charcoal dark palette
This is the app's dark theme, not one palette among several. It applies to
every data-base-color on purpose: a value persisted in localStorage from an
earlier session (Slate, say, at chroma 0.042 / hue 264) would otherwise tint
the whole app navy. themes.css defines its dark values at
[data-base-color="x"].dark (specificity 0,2,0), so adding the element type
outranks it whatever x happens to be. Every value below is zero-chroma:
a true charcoal, no tint. Accent colour still comes from --primary. */
html[data-base-color].dark,
html.dark[data-base-color] {
/* Outer chrome — the darkest surface. The inset sidebar sits on this. */
--sidebar: oklch(0.1450 0 0);
--sidebar-border: oklch(0.2400 0 0);
--sidebar-accent: oklch(0.2300 0 0);
--sidebar-accent-foreground: oklch(0.9700 0 0);
--sidebar-foreground: oklch(0.8700 0 0);
--sidebar-ring: oklch(0.4400 0 0);
/* Inset content panel — one step lighter so it reads as a raised surface. */
--background: oklch(0.1850 0 0);
--foreground: oklch(0.9700 0 0);
--card: oklch(0.2100 0 0);
--card-foreground: oklch(0.9700 0 0);
--popover: oklch(0.2100 0 0);
--popover-foreground: oklch(0.9700 0 0);
--secondary: oklch(0.2600 0 0);
--secondary-foreground: oklch(0.9700 0 0);
--muted: oklch(0.2600 0 0);
--muted-foreground: oklch(0.6600 0 0);
--accent: oklch(0.2600 0 0);
--accent-foreground: oklch(0.9700 0 0);
--border: oklch(0.2600 0 0);
--input: oklch(0.2800 0 0);
--ring: oklch(0.4400 0 0);
}
/* The standard icon button for this app: 28px and circular, borderless.
ButtonSize.Icon's own 36px reads oversized in the header row, and a 16px glyph
inside 28px leaves 6px of breathing room. Declared here rather than as Tailwind
utilities so it reliably beats each component's own size/rounded-* classes
(equal specificity, and app.css is linked last). */
.app-icon-circle {
width: 28px;
height: 28px;
min-width: 28px;
padding: 0;
border-radius: 9999px;
border: none;
}
/* Only the account avatar carries a visible ring. */
.app-icon-bordered {
border: 1px solid var(--border);
}
html,
body {
height: 100%;
}
/* The app shell is pinned to the viewport (h-screen) and scrolls internally,
so the document itself never should. */
body {
overflow: hidden;
}
/* Interactivity is not prerendered, so the document paints before Blazor renders
anything. Painting body on the themed background keeps that moment on the
charcoal ground instead of the browser's default white. */
body {
background-color: var(--background);
color: var(--foreground);
}
/* FocusOnNavigate targets the page h1; suppress its focus ring. */
h1:focus {
outline: none;
}
#blazor-error-ui {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: none;
padding: 0.75rem 1.25rem;
background: #ffe8e8;
color: #7a1010;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}
#blazor-error-ui .dismiss {
position: absolute;
top: 0.5rem;
right: 0.75rem;
cursor: pointer;
}
/* Header navigation. Sized to sit inside the 40px header strip without stretching it. */
.app-nav-link {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 0.5rem;
border-radius: 0.375rem;
color: var(--muted-foreground);
text-decoration: none;
transition: color 120ms ease, background-color 120ms ease;
}
.app-nav-link:hover {
color: var(--foreground);
background-color: var(--accent);
}
/* Blazor's NavLink adds .active to the matching route. */
.app-nav-link.active {
color: var(--foreground);
background-color: var(--accent);
font-weight: 500;
}
/* Chart palette.
BlazorBlueprint's chart components read --chart-1..5 (see BbAreaChart et al). themes.css
ships defaults tuned for its own palettes, which read wrong against the charcoal above, so
they are defined here for both schemes. Assignment is semantic, not decorative - keep it
stable so a colour means the same thing on every chart:
1 delivered · 2 failed · 3 quarantined/degraded · 4 pending · 5 other */
/* CareDx brand colours, sampled from caredx.com and cross-checked against the logo files in
wwwroot/icons - #A6192E and #BDD6F6 appear in CDNA.svg, #004762 in CDNA_BIG.svg. Reference
values: use the chart tokens below for data, not these directly. */
:root {
--brand-petrol: #004762; /* headings, footer, buttons. OKLCh L 0.374 C 0.076 H 232 */
--brand-crimson: #A6192E; /* logo mark, top bar. OKLCh L 0.470 C 0.173 H 20 */
--brand-red: #E40032; /* logo highlight. OKLCh L 0.580 C 0.234 H 22 */
--brand-sky: #BDD6F6; /* section band. OKLCh L 0.868 C 0.052 H 255 */
--brand-butter: #EACE86; /* stats band. OKLCh L 0.859 C 0.096 H 89 */
--brand-cream: #F8EFD6; /* section band. OKLCh L 0.953 C 0.034 H 90 */
}
/* Chart palette, derived from those brand hues rather than invented.
The brand only really has three hue families - red ~21, blue 232-255, gold ~89 - so the five
series are separated by lightness as much as by hue: the two blues sit 0.13 apart in L so they
stay distinct even stacked adjacently.
Every colour is pulled to a usable mid-tone. The brand values themselves are unusable as data
colours: petrol at L 0.37 is nearly black on a column, and sky and butter at L 0.86 disappear
against white. Hue is what carries the brand; lightness is what makes it legible.
Create is the calmest, since it carries ~60% of every column and a dominant series should not
also be the loudest. Failed keeps the most chroma - it is a small slice that must be noticed. */
:root {
--chart-1: oklch(0.6200 0.0850 232); /* petrol blue - delivered / Create */
--chart-2: oklch(0.5800 0.1500 21); /* crimson - failed */
--chart-3: oklch(0.7200 0.1050 55); /* amber - quarantined */
--chart-4: oklch(0.7550 0.0700 250); /* sky blue - Complete */
--chart-5: oklch(0.7800 0.0950 89); /* butter gold - Cancel */
}
html[data-base-color].dark,
html.dark[data-base-color] {
/* Lifted so they separate from the charcoal, with chroma trimmed - the same saturation reads
brighter on a dark ground than on white. */
--chart-1: oklch(0.6900 0.0800 232);
--chart-2: oklch(0.6450 0.1350 21);
--chart-3: oklch(0.7700 0.0950 55);
--chart-4: oklch(0.7950 0.0650 250);
--chart-5: oklch(0.8200 0.0850 89);
}
/* Utilities missing from BlazorBlueprint's prebuilt stylesheet.
There is no Tailwind build step in this app - blazorblueprint.css ships pre-compiled and only
contains the utilities BlazorBlueprint itself uses. Anything else, including every arbitrary
value like max-w-[1600px], is simply absent, so the class silently does nothing. That is not
obvious from the markup: it looks like ordinary Tailwind and fails without error.
Declared here with their Tailwind names so existing markup keeps working. Audit with the
snippet in the session notes if spacing ever looks ignored again. */
.mt-1\.5 { margin-top: 0.375rem; }
.pt-5 { padding-top: 1.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.ml-4 { margin-left: 1rem; }
.border-y {
border-top-width: 1px;
border-bottom-width: 1px;
border-style: solid;
}
.max-w-\[1600px\] { max-width: 1600px; }
.max-w-\[280px\] { max-width: 280px; }
.w-\[170px\] { width: 170px; }
.text-\[10px\] { font-size: 10px; line-height: 1; }
.text-muted-foreground\/60 {
color: color-mix(in oklch, var(--muted-foreground) 60%, transparent);
}
/* Responsive variants.
BlazorBlueprint's prebuilt stylesheet carries NO breakpoint variants at all - not one `lg:`
rule anywhere in the file - so every `lg:grid-cols-*` in this app was silently inert and the
grids stayed at their base column count on every screen size. Declared here at Tailwind's own
lg breakpoint (64rem) so the markup means what it says. Add further variants here as markup
needs them rather than reaching for a Tailwind build step for a handful of rules. */
@media (min-width: 64rem) {
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Legend swatch for the hand-rolled chart legends.
Radzen's own legend is switched off on the donut: it wrapped onto two rows inside the plot
area, which both shrank the chart and pushed the pie off-centre, breaking the centred label
overlaid on it. Rendering the legend in the card footer instead costs one class. */
.app-legend-dot {
display: inline-block;
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
flex: none;
}
/* Per-column hover.
Radzen has no notion of highlighting a single data point on a column chart. Its only chart
hover is series-level: AllowSeriesHover adds .rz-chart-series-hover, whose rules highlight the
whole series and dim the others - which on a single-series chart reads as the entire chart
reacting to one bar. That is switched off on the component; this fills the gap.
Only the hovered column changes. Deliberately not dimming the rest: the point is to pick one
bar out, not to repaint the chart every time the pointer crosses it.
Both path and rect are targeted because Radzen's column geometry differs by radius setting. */
.rz-column-series path,
.rz-column-series rect,
.rz-bar-series path,
.rz-bar-series rect {
transition: filter 120ms ease;
}
.rz-column-series path:hover,
.rz-column-series rect:hover,
.rz-bar-series path:hover,
.rz-bar-series rect:hover {
/* Darken on light surfaces: the columns are mid-tones on white, so going down reads as
"active" more clearly than going up. */
filter: brightness(0.88);
cursor: pointer;
}
html[data-base-color].dark .rz-column-series path:hover,
html[data-base-color].dark .rz-column-series rect:hover,
html.dark[data-base-color] .rz-column-series path:hover,
html.dark[data-base-color] .rz-column-series rect:hover {
/* Inverted against charcoal - darkening a bar on a dark ground just makes it disappear. */
filter: brightness(1.2);
}
/* Flat surfaces. BbCard ships shadow-sm; this app reads better as flat panels separated by
borders alone, so the shadow is removed globally rather than per-usage. */
.shadow-sm,
.shadow,
.shadow-md {
box-shadow: none !important;
}
/* Filter select.
Not BbNativeSelect: that component does not write a non-string bound value onto the
underlying