/*
* CASCADE LAYER (B-139, 2026-08-03) — this sheet is wrapped in
* `@layer tav-components` so the precompiled UTILITIES can override it.
*
* Before this, the sheet was UNLAYERED while the utilities sat in
* `@layer tav-precompiled`. Unlayered beats every layer regardless of
* specificity, so `class="tav-input tav-pl-10"` silently lost its indent and
* the search glyph rendered on top of the placeholder. Longhand padding would
* NOT have fixed it — a layered utility loses to an unlayered declaration
* whatever its shape.
*
* The consumer declares the order (`@layer tav-preflight, tav-components,
* tav-utilities;`). The preflight had to be split out of the utilities sheet
* first: it lives in the same file, and putting the whole file last would let
* its element reset (`* { border-width: 0 }`) beat these components — the very
* bug the old unlayered arrangement existed to prevent.
*
* Measured before flipping: of 616 elements carrying a component class, 286
* utility overrides are byte-identical to what the component already sets
* (160 `tav-w-full` against `width:100%`; 126 `text-sm`/`text-xs` against
* type tokens that resolve to the same rem values). ~23 genuinely differ —
* each one an author's intent that used to be discarded.
*/
@layer tav-components {
/*
* tav-components.css — Tavuni UI component layer (ADR-0361).
*
* Hand-authored NATIVE CSS — no preprocessor, no build step. Every component
* reads ONLY `--tav-*` design tokens (ADR-0359), which are injected at runtime
* per brand scope by the `tavuni-common::theme` engine (ADR-0360). There is not
* a single hard-coded colour here: brand colour lives entirely in the runtime
* custom properties, so this one stylesheet themes for every reseller/tenant in
* both light and dark mode without recompilation. (The `check-no-hardcoded-color`
* CI gate enforces the "tokens only" invariant.)
*
* State changes (hover/press) are derived from the role + its on-colour via
* `color-mix` at the `--tav-state-*` opacity, so they track the active theme
* automatically — no per-component hover colour anywhere.
*
* LAYERED by design — see the `@layer tav-components` wrapper at the top of
* this file. This paragraph used to argue the opposite ("unlayered by design"),
* on the grounds that a consumer's preflight is emitted UNLAYERED and unlayered
* beats any `@layer`, so wrapping these components would let `button {
* background: transparent }` / `* { border-width: 0 }` override every tav-*
* control. The premise was real; the conclusion was the wrong fix. Staying
* unlayered to out-rank a reset also out-ranks the consumer's UTILITIES, which
* is what silently discarded `class="tav-input tav-pl-10"`.
*
* The right fix belongs on the consumer: it declares
* `@layer tav-preflight, tav-components, tav-utilities` and puts its reset in
* the bottom layer, so this sheet needs no specificity games. Note that a
* consumer CANNOT do that with `` — that
* attribute is unimplemented in every browser and fails silently. The layer
* must be assigned by an `@layer` block INSIDE the reset stylesheet, exactly as
* this file does. tavuni-workspace shipped that as tav-preflight-r2 /
* tav-utilities-r2 after the unassigned layers cost `.tav-btn-primary` its
* colour (3.25:1 black-on-blue) and its fill.
*
* Do not re-unlayer this sheet to work around a consumer's reset. Fix the
* consumer's layer assignment instead.
*/
:root {
color-scheme: light;
/* Haarlijnen als INKT op het blad, niet als `outline-variant`.
Die rol staat op toon 80 van het merkgekleurde neutrale palet — in het
groene thema een mintgrijs op L* 80, dat op een wit blad een
getekende lijn wordt. Het goedgekeurde ontwerp tekent zijn scheiders
op L* 93 en zijn randen op L* 89, allebei vrijwel zonder tint. Een mengsel van
de tekstkleur met doorzichtig volgt het thema, is in donkere modus
vanzelf een lichte lijn op een donker blad, en draagt geen merktint.
--tav-hairline scheiding binnen een blok (≈ L* 93)
--tav-hairline-strong de rand van een vlak, onder tabs (≈ L* 89) */
--tav-hairline: color-mix(in oklab, var(--tav-on-surface) 8%, transparent);
--tav-hairline-strong: color-mix(in oklab, var(--tav-on-surface) 13%, transparent);
/* De twee tussentinten van het ontwerp, afgeleid van de tekstkleur op
dezelfde manier als de haarlijnen. `on-surface-variant` is toon 30 van
het merkgekleurde palet — donkerder dan de "ink2" van het ontwerp
(L* 41) en met merktint. Deze twee zijn het neutrale grijs dat de fiche
gebruikt voor labels en voetnoten.
--tav-ink-muted label, onderregel, secundaire tekst (≈ L* 41)
--tav-ink-faint sectiekop, tijdstip, lege telling (≈ L* 60)
Gemeten tegen de ink2- en ink3-tinten van het ontwerp op wit. */
--tav-ink-muted: color-mix(in oklab, var(--tav-on-surface) 66%, var(--tav-surface));
--tav-ink-faint: color-mix(in oklab, var(--tav-on-surface) 45%, var(--tav-surface));
}
/* One dark selector for every shell (B-831). This used to read `:root.dark`,
which was true for workspace and portal and false for console and site —
they carried `data-theme="tavuni-dark"`. So this single declaration, the
one that tells the browser to render native controls, scrollbars and form
widgets dark, fired on two of four surfaces. `[data-theme="dark"]` is the
theming engine's own default selector; all four now use it. */
:root[data-theme="dark"] {
color-scheme: dark;
}
.tav-app {
background: var(--tav-surface-1);
color: var(--tav-on-surface);
font-family: var(--tav-font-sans, "Inter", system-ui, sans-serif);
font-size: var(--tav-type-body-size);
line-height: var(--tav-type-body-line);
}
/* Keyboard-only focus ring, theme-coloured. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
outline: 2px solid var(--tav-primary);
outline-offset: 2px;
border-radius: var(--tav-radius-xs);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Buttons ─────────────────────────────────────────────────────── */
/* Structural box rides on the base AND every colour variant / size
modifier. Templates and the btn_* macros apply a single class bare
(`class="tav-btn-primary"`), so padding/shape/flex must sit on the
variant too — not only on `.tav-btn`. A bare variant otherwise sets
colour but inherits the unlayered preflight's stripped box (border:0,
no padding) → a filled label instead of a button. `[class*=…]` is 0-1-0
(same as `.tav-btn`, still beats the `button` preflight 0-0-1) and
covers current + future variants without enumerating them. */
[class*="tav-btn"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
/* B-828: height comes from the shared control rhythm, not from padding
arithmetic. `tav-btn` used to compute to 30px while `tav-input` came
out at 38px, so a button beside a field did not line up — which is
why workspace grew twelve hand-rolled `py-2` buttons next to the real
one, each with its own radius and border colour. Both now sit on
`--tav-control-h`; a shell that raises that token (the consumer
portal, for touch) moves every control together. */
min-height: var(--tav-control-h);
padding: 0.375rem 0.875rem;
border: 1px solid transparent;
border-radius: var(--tav-radius-md);
font-size: var(--tav-type-body-size);
font-weight: var(--tav-type-title-weight);
line-height: 1;
/* A label never breaks inside the word (tavuni-docs issue 2345): "Verplaa/tsen"
in a narrow table cell read as a rendering fault. The cell or the row
gives way, not the control. */
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.15s ease,
color 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
[class*="tav-btn"]:disabled,
[class*="tav-btn"][aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
.tav-btn-primary {
background: var(--tav-primary);
color: var(--tav-on-primary);
}
.tav-btn-primary:hover {
background: color-mix(
in oklab,
var(--tav-primary),
var(--tav-on-primary) calc(var(--tav-state-hover) * 100%)
);
}
/* In dark mode `--tav-primary` is a LIGHT tone: it also has to read as link
text on the dark sheet. As a button fill that light tone looked like the
outlined buttons beside it, and the brand colour was gone
(tavuni-docs issue 2341). The container pair is the deep brand tone with its
own gated on-colour, so the primary action stays the one filled, branded
control in both modes. */
:root[data-theme="dark"] .tav-btn-primary {
background: var(--tav-primary-container);
color: var(--tav-on-primary-container);
}
:root[data-theme="dark"] .tav-btn-primary:hover {
background: color-mix(
in oklab,
var(--tav-primary-container),
var(--tav-on-primary-container) calc(var(--tav-state-hover) * 100%)
);
}
.tav-btn-secondary {
background: var(--tav-surface-1);
color: var(--tav-on-surface);
border-color: var(--tav-outline);
}
.tav-btn-secondary:hover {
background: color-mix(
in oklab,
var(--tav-surface-1),
var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
);
}
/* Destructive action — deliberately LIGHTER than `tav-btn-primary` (B-828).
A filled error beside a filled primary gave "delete" exactly the weight of
the page's main action; a container fill keeps it unmistakably red without
competing for the eye. Contrast is not the trade: on-error-container over
error-container measures 13.3:1 light and 7.2:1 dark, both ABOVE what the
filled variant scored.
When the destructive action IS the main action — the confirm button in a
delete dialog — reach for `tav-btn-danger-strong`. That is the only place
a full error fill belongs. */
.tav-btn-danger {
background: var(--tav-error-container);
color: var(--tav-on-error-container);
border-color: color-mix(in oklab, var(--tav-error) 35%, transparent);
}
.tav-btn-danger-strong {
background: var(--tav-error);
color: var(--tav-on-error);
}
.tav-btn-danger-strong:hover {
background: color-mix(
in oklab,
var(--tav-error),
var(--tav-on-error) calc(var(--tav-state-hover) * 100%)
);
}
.tav-btn-danger:hover {
background: color-mix(
in oklab,
var(--tav-error-container),
var(--tav-on-error-container) calc(var(--tav-state-hover) * 100%)
);
}
/* Same reasoning as `tav-btn-danger`: a warning action is a caution, not a
call to action, so it carries the container fill. */
.tav-btn-warning {
background: var(--tav-warning-container);
color: var(--tav-on-warning-container);
border-color: color-mix(in oklab, var(--tav-warning) 35%, transparent);
}
/* Affirmative action that is NOT the primary one — "approve", "mark paid".
The badge vocabulary has had `success` since day one and the button
vocabulary did not, so templates reached for `btn-primary` and lost the
distinction (B-828). */
.tav-btn-success {
background: var(--tav-success-container);
color: var(--tav-on-success-container);
border-color: color-mix(in oklab, var(--tav-success) 35%, transparent);
}
.tav-btn-success:hover {
background: color-mix(
in oklab,
var(--tav-success-container),
var(--tav-on-success-container) calc(var(--tav-state-hover) * 100%)
);
}
.tav-btn-warning:hover {
background: color-mix(
in oklab,
var(--tav-warning-container),
var(--tav-on-warning-container) calc(var(--tav-state-hover) * 100%)
);
}
.tav-btn-ghost {
background: transparent;
color: var(--tav-on-surface-variant);
}
.tav-btn-ghost:hover {
background: color-mix(
in oklab,
transparent,
var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
);
}
/* ── Badges ──────────────────────────────────────────────────────── */
/* Single-class contract (see buttons): a bare `tav-badge-success` etc.
must carry the pill box, not only `.tav-badge`. */
[class*="tav-badge"] {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: var(--tav-radius-full);
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-label-weight);
line-height: 1.25;
/* A status is one word-shape; "Aangevraa/gd" is two (tavuni-docs issue 2345). */
white-space: nowrap;
}
.tav-badge-success {
background: var(--tav-success-container);
color: var(--tav-on-success-container);
}
.tav-badge-warning {
background: var(--tav-warning-container);
color: var(--tav-on-warning-container);
}
.tav-badge-error {
background: var(--tav-error-container);
color: var(--tav-on-error-container);
}
.tav-badge-info {
background: var(--tav-info-container);
color: var(--tav-on-info-container);
}
.tav-badge-neutral {
background: var(--tav-surface-variant);
color: var(--tav-on-surface-variant);
}
/* ── Card ────────────────────────────────────────────────────────── */
/* NOTE: no `overflow: hidden` (B-827). It was here so a table running to the
card's edge would be clipped by the radius — decoration for the 578 cards
whose content sits inside a padded wrapper, and a trap for the 31 that
hold a dropdown, popover or `x-show` panel: those got silently cut off at
the card's edge, with correct markup and nothing in the console.
That single declaration is also what kept 817 hand-rolled cards in
workspace from being folded into this component at all — every one of
them would have had to be checked by hand for a positioned child, and
"check 817 templates by eye" is not a migration anyone finishes.
Content that genuinely reaches the edge takes `tav-card-flush` below.
Measured: 59 of 651 cards, 57 of them in console. */
/* The card is the white object, the page is the lower ground it lies on
(tavuni-docs issue 2333). It used to be the reverse — a grey card sunk
into a white sheet, with a border AND a shadow — and on a list or a
dashboard every block was the same grey box: nothing stood out, and a
screen of them read as dull and tiring. Every shell now grounds its
scroll area on `surface-1`, as the record fiche already did; the card
needs no shadow to stand off it, the hairline is enough. */
.tav-card {
background: var(--tav-surface);
border: 1px solid var(--tav-outline-variant);
border-radius: var(--tav-radius-md);
}
/* A card whose content runs to its edge — a bare `
`, an image, a
scroll wrapper around either. Clips them to the radius so the corners stay
round. Do NOT reach for this on a card that holds a menu or a tooltip. */
.tav-card-flush {
overflow: hidden;
}
.tav-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid var(--tav-outline-variant);
}
.tav-card-title {
margin: 0;
font-size: var(--tav-type-title-size);
font-weight: var(--tav-type-title-weight);
line-height: var(--tav-type-title-line);
color: var(--tav-on-surface);
}
.tav-card-body {
padding: 1.25rem;
}
/* ── Form field ──────────────────────────────────────────────────── */
.tav-field {
display: grid;
gap: 0.375rem;
}
.tav-label {
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-label-weight);
color: var(--tav-on-surface-variant);
}
.tav-required {
color: var(--tav-error);
}
.tav-input,
.tav-textarea {
width: 100%;
/* Same rhythm as every button (B-828). A textarea grows past it — the
token is a floor, not a fixed height. */
min-height: var(--tav-control-h);
padding: 0.5rem 0.75rem;
/* Faintly brand-tinted edge so form fields carry a hint of the tenant
brand at rest (Style-2 "more accent" feedback) — still reads neutral,
the focus ring below is the full brand statement. */
border: 1px solid color-mix(in oklab, var(--tav-primary) 28%, var(--tav-outline));
border-radius: var(--tav-radius-sm);
background: var(--tav-surface);
color: var(--tav-on-surface);
font-size: var(--tav-type-body-size);
line-height: var(--tav-type-body-line);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.tav-input:focus,
.tav-textarea:focus {
outline: none;
border-color: var(--tav-primary);
box-shadow: 0 0 0 1px var(--tav-primary);
}
.tav-input[aria-invalid="true"],
.tav-textarea[aria-invalid="true"] {
border-color: var(--tav-error);
}
.tav-help {
font-size: var(--tav-type-label-size);
color: var(--tav-on-surface-variant);
}
.tav-error-text {
font-size: var(--tav-type-label-size);
color: var(--tav-error);
}
/* ── Flash / callout ─────────────────────────────────────────────── */
.tav-flash {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: var(--tav-radius-md);
font-size: var(--tav-type-body-size);
}
.tav-flash-success {
background: var(--tav-success-container);
color: var(--tav-on-success-container);
}
.tav-flash-warning {
background: var(--tav-warning-container);
color: var(--tav-on-warning-container);
}
.tav-flash-error {
background: var(--tav-error-container);
color: var(--tav-on-error-container);
}
.tav-flash-info {
background: var(--tav-info-container);
color: var(--tav-on-info-container);
}
/* ── Link ────────────────────────────────────────────────────────── */
.tav-link {
color: var(--tav-primary);
text-decoration: none;
font-weight: var(--tav-type-label-weight);
}
.tav-link:hover {
text-decoration: underline;
}
/* ── Divider ─────────────────────────────────────────────────────── */
.tav-divider {
height: 0;
margin: 1rem 0;
border: 0;
border-top: 1px solid var(--tav-outline-variant);
}
/* ── Keyboard key ────────────────────────────────────────────────── */
.tav-kbd {
display: inline-flex;
align-items: center;
padding: 0.0625rem 0.375rem;
border: 1px solid var(--tav-outline);
border-radius: var(--tav-radius-xs);
background: var(--tav-surface-2);
color: var(--tav-on-surface-variant);
font-family: ui-monospace, monospace;
font-size: 0.6875rem;
line-height: 1.25;
}
/* ── Avatar (initials) ───────────────────────────────────────────── */
.tav-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--tav-radius-full);
background: var(--tav-primary);
color: var(--tav-on-primary);
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-title-weight);
user-select: none;
}
/* ── Breadcrumb ──────────────────────────────────────────────────── */
.tav-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: var(--tav-type-label-size);
color: var(--tav-on-surface-variant);
}
.tav-breadcrumb a {
color: var(--tav-on-surface-variant);
text-decoration: none;
}
.tav-breadcrumb a:hover {
color: var(--tav-primary);
}
.tav-breadcrumb-sep {
color: var(--tav-outline);
}
.tav-breadcrumb-current {
color: var(--tav-on-surface);
font-weight: var(--tav-type-label-weight);
}
/* ── Sidebar link (with active state — workspace audit #1) ───────── */
.tav-sidebar-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: var(--tav-radius-sm);
color: var(--tav-on-surface-variant);
font-size: var(--tav-type-body-size);
font-weight: var(--tav-type-label-weight);
text-decoration: none;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.tav-sidebar-link:hover {
background: color-mix(
in oklab,
transparent,
var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
);
color: var(--tav-on-surface);
}
.tav-sidebar-link.active,
.tav-sidebar-link[aria-current="page"] {
background: var(--tav-primary-container);
color: var(--tav-on-primary-container);
font-weight: var(--tav-type-title-weight);
}
/* ── Tabs ────────────────────────────────────────────────────────── */
.tav-tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--tav-hairline-strong);
}
.tav-tab {
padding: 0.5rem 0.875rem;
border-bottom: 2px solid transparent;
color: var(--tav-on-surface-variant);
font-size: var(--tav-type-body-size);
font-weight: var(--tav-type-label-weight);
text-decoration: none;
cursor: pointer;
}
.tav-tab:hover {
color: var(--tav-on-surface);
}
.tav-tab.active,
.tav-tab[aria-current="page"] {
border-bottom-color: var(--tav-primary);
color: var(--tav-on-surface);
font-weight: var(--tav-type-title-weight);
}
/* De telling naast een tablabel. Mono met tabular-nums, zodat "3" en "12"
in een rij tabs dezelfde breedte per cijfer krijgen en de balk niet
verspringt zodra er een rij bijkomt. */
.tav-tab .tav-badge {
font-family: var(--tav-font-mono);
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0;
}
/* ── Tab count ───────────────────────────────────────────────────
De telling naast een tablabel, zoals het ontwerp hem tekent: een klein
mono-pilletje in de haarlijntint, dat in de accenttint kleurt zodra de
tab open staat. Je weet vóór het klikken of er iets in zit.
.is-zero een lege tab: een grijze 0 zonder vlak — de tab staat er,
en zegt meteen dat er niets in zit
.is-warning de ENE tab waar iets schuurt ("Vloot 104" in oker omdat
een keuring vervalt). Eén gekleurde telling tegelijk,
anders is het weer chip-inflatie. */
.tav-tab-count {
font-family: var(--tav-font-mono);
font-size: 0.6875rem;
font-variant-numeric: tabular-nums;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0;
padding: 0.0625rem 0.375rem;
border-radius: var(--tav-radius-full);
background: var(--tav-hairline);
color: var(--tav-ink-muted);
}
.tav-tab.active .tav-tab-count,
.tav-tab[aria-selected="true"] .tav-tab-count {
background: color-mix(in oklab, var(--tav-primary) 12%, var(--tav-surface));
color: var(--tav-primary);
}
.tav-tab-count.is-zero,
.tav-tab.active .tav-tab-count.is-zero,
.tav-tab[aria-selected="true"] .tav-tab-count.is-zero {
background: none;
color: var(--tav-ink-faint);
}
.tav-tab-count.is-warning {
background: color-mix(in oklab, var(--tav-warning) 14%, var(--tav-surface));
color: var(--tav-warning);
}
/* ── Page head (tavuni-docs#3680) ─────────────────────────────────
The one head every page carries (`m::page_head`): "‹ back" above the
title, the title and its subtitle on the left, the page's actions on
the right of the title. It lives in the app shell's `.app-page-frame`,
which is exactly as wide as the content, so the right-most action
stands above the right edge of what it acts on. */
.tav-page-head {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
}
.tav-page-head-back {
display: inline-flex;
align-items: center;
gap: 0.25rem;
align-self: flex-start;
font-size: 0.875rem;
color: var(--tav-on-surface-variant);
text-decoration: none;
transition: color 120ms ease;
}
.tav-page-head-back:hover {
color: var(--tav-primary);
}
.tav-page-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem 1rem;
flex-wrap: wrap;
}
/* tavuni-docs#3898 — the title keeps a floor. As `min-width: 0;
flex: 1 1 0` it shrank to nothing beside four action buttons at 800 px
("Vandaag" became one glyph, its date three lines); with a basis the
row wraps instead and the actions move under the title. */
.tav-page-head-title {
flex: 1 1 16rem;
min-width: 0;
}
.tav-page-head-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
margin-left: auto;
}
.tav-page-head-actions:empty {
display: none;
}
/* ── Form actions (tavuni-docs#3680) ──────────────────────────────
The foot of every page form (`c::form_actions`): cancel and submit on
the right, sticking to the bottom of the scroll area so the submit of
a long form is always in reach. */
.tav-form-actions {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.5rem;
padding: 0.75rem 0;
border-top: 1px solid var(--tav-hairline);
background: var(--tav-surface);
}
/* ── Record hero ─────────────────────────────────────────────────
De kop van een dossier is één wit vlak: identiteit, kerncijfers en
tabs, met één lijn eronder. Het vlak blijft staan bij elke tab — "de kop
is de constante" — en alles wat eronder ligt, ligt op de ondergrond.
De tabs zitten ÓP die lijn: geen eigen onderrand (de lijn van het vlak
is de snede) en geen ruimte eronder. */
.tav-record-hero .tav-tabs {
margin-top: 0.875rem;
gap: 0.125rem;
border-bottom: 0;
overflow-x: auto;
}
.tav-record-hero .tav-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5625rem 0.875rem 0.6875rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--tav-ink-muted);
background: none;
border-top: 0;
border-left: 0;
border-right: 0;
white-space: nowrap;
}
.tav-record-hero .tav-tab:hover {
color: var(--tav-on-surface);
}
.tav-record-hero .tav-tab.active,
.tav-record-hero .tav-tab[aria-selected="true"] {
color: var(--tav-on-surface);
border-bottom-color: var(--tav-primary);
font-weight: 600;
}
/* ── Toggle / switch ─────────────────────────────────────────────── */
/* The off state has to be a visible control, not an absence of one. Measured
in the light theme: the track was `--tav-surface-variant` at 1.23:1 against
the page and the thumb was `--tav-surface` — the page colour exactly — so
an unchecked switch was very nearly not there. WCAG 1.4.11 asks 3:1 for the
visual information that identifies a control; the border carries that, and
`--tav-outline` measures 4.08:1 light and 5.40:1 dark. `box-sizing:
border-box` from the reset keeps 40x24 the outside size either way. */
.tav-toggle {
position: relative;
display: inline-flex;
align-items: center;
width: 2.5rem;
height: 1.5rem;
flex-shrink: 0;
border: 1px solid var(--tav-outline);
border-radius: var(--tav-radius-full);
background: var(--tav-surface-variant);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tav-toggle::after {
content: "";
position: absolute;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
border-radius: var(--tav-radius-full);
background: var(--tav-surface);
transition: transform 0.15s ease;
}
.tav-toggle[aria-checked="true"] {
border-color: var(--tav-primary);
background: var(--tav-primary);
}
.tav-toggle[aria-checked="true"]::after {
transform: translateX(1rem);
background: var(--tav-on-primary);
}
/* ── Record identity: crest + display title ──────────────────────
De kop van een fiche. Het monogram is een VLAK, geen rondje met een
letter erin: op een lijst van tien dossiers is een vierkant met een
accentvlak het enige dat je van een afstand uit elkaar houdt.
De titel staat in de display-face (Fraunces, optical sizing). Dat is
geen versiering maar het onderscheid dat een fiche nodig heeft: een
naam en een getal staan hier centimeters uit elkaar en mogen niet als
dezelfde soort ding lezen. */
.tav-crest {
width: 3.875rem;
height: 3.875rem;
flex: none;
border-radius: var(--tav-radius-md);
background: var(--tav-primary);
color: var(--tav-on-primary);
display: grid;
place-items: center;
font-family: var(--tav-font-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: 1.5rem;
letter-spacing: -0.02em;
}
.tav-crest-sm {
width: 2.25rem;
height: 2.25rem;
font-size: 0.9375rem;
border-radius: var(--tav-radius-sm);
}
/* Het wapen op een FICHEKOP. Groot genoeg om het dossier te zijn en niet
een icoontje ernaast — op de schets is dit het eerste wat je ziet. */
.tav-crest-lg {
width: 5.25rem;
height: 5.25rem;
font-size: 2rem;
}
@media (max-width: 48rem) {
.tav-crest-lg {
width: 3.25rem;
height: 3.25rem;
font-size: 1.25rem;
}
}
.tav-record-title {
font-family: var(--tav-font-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: var(--tav-type-size-3xl);
line-height: 1.06;
letter-spacing: -0.018em;
color: var(--tav-on-surface);
text-wrap: balance;
}
.tav-record-kind {
margin-top: 0.3125rem;
font-size: 0.84375rem;
line-height: 1.45;
color: var(--tav-ink-muted);
}
/* De scheiding tussen de delen van de onderregel (handelsnaam · sector ·
dossierbeheerder) in de gedempte toon, zodat de punt ordent zonder mee
te lezen. */
.tav-record-kind .tav-record-sep {
color: var(--tav-ink-faint);
margin: 0 0.4375rem;
}
/* De regel BOVEN de naam: soort record + sinds wanneer. Small caps met
ruime letterafstand, zodat hij als kader leest en niet als titel.
Dit was de opmaak van `tav-record-kind`. Die twee stonden omgekeerd:
de subtitel (handelsnaam, sectorcode) werd in kapitalen gezet en de
kaderregel als lopende tekst — waardoor het scherm zijn duiding schreeuwde
en zijn identificatie fluisterde. */
.tav-record-eyebrow {
font-size: 0.6875rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--tav-ink-faint);
font-weight: 600;
margin-bottom: 0.25rem;
}
/* ── Record head ─────────────────────────────────────────────────
De kop als GRID, niet als flexrij: het wapen staat links over de volle
hoogte van de drie tekstregels, de acties rechts op de eerste regel.
Met flex ging het wapen verticaal midden staan en zakte de eyebrow
scheef weg zodra de subtitel afwezig was. */
.tav-record-head {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: start;
gap: 0 1rem;
width: 100%;
}
.tav-record-back {
color: var(--tav-on-surface-variant);
margin-top: 1.25rem;
transition: color 120ms ease;
}
.tav-record-back:hover {
color: var(--tav-primary);
}
.tav-record-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex: none;
margin-top: 0.125rem;
}
/* Een kop zonder wapen: één kolom minder. Niet elk record heeft een naam
waar een monogram iets van maakt — een werkbonnummer of een datum levert
twee betekenisloze tekens op, en dan is het vlak alleen ruis. */
.tav-record-head--nocrest {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.tav-record-head--nocrest .tav-record-back {
margin-top: 0.5rem;
}
/* ── Record hero ─────────────────────────────────────────────────
De kop van een dossier, zoals het contactdossier-ontwerp hem tekent: één
wit vlak met het wapen, de naam, de kerncijfers en de tabs, en één lijn
eronder. Hij staat in de vaste paginakop van de app-shell, dus hij blijft
staan terwijl het dossier eronder scrolt en de tabs wisselen.
Geen terugpijl: het wapen staat op de linkerrand, zodat wapen, kerncijfers
en de eerste tab op één lijn beginnen. Terug is de zijbalk en de browser. */
.tav-record-hero .tav-record-head {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0 1.25rem;
}
.tav-record-hero .tav-record-eyebrow {
margin: 0.0625rem 0 0;
}
.tav-record-hero .tav-record-title {
margin-top: 0.25rem;
font-size: 1.875rem;
}
.tav-record-hero .tav-record-actions {
margin-top: 0;
}
.tav-record-hero .tav-record-kind {
margin: 0.3125rem 0 0;
}
/* On a phone the actions take their own row under the name, and the four
figures wrap two by two instead of pushing the page sideways. */
@media (max-width: 48rem) {
.tav-record-hero .tav-record-head {
grid-template-columns: auto minmax(0, 1fr);
gap: 0 0.875rem;
}
.tav-record-hero .tav-crest {
width: 2.75rem;
height: 2.75rem;
font-size: 1.0625rem;
}
.tav-record-hero .tav-record-title {
font-size: 1.5rem;
}
.tav-record-hero .tav-stat-strip > * {
flex: 1 1 50%;
padding: 0.75rem 1rem 0.75rem 0;
border-right: 0;
}
}
/* Het menu achter ⋯: de uitgangen naar andere schermen die aan deze partij
hangen, en onderaan de ene onomkeerbare actie. Een lijst links, geen
knoppenrij — het zijn plaatsen om naartoe te gaan. */
.tav-record-menu {
position: absolute;
right: 0;
top: 100%;
z-index: 30;
margin-top: 0.375rem;
min-width: 14rem;
padding: 0.375rem;
border: 1px solid var(--tav-hairline-strong);
border-radius: 0.4375rem;
background: var(--tav-surface);
box-shadow: var(--tav-elevation-2);
}
.tav-record-menu > a,
.tav-record-menu button {
display: block;
width: 100%;
padding: 0.4375rem 0.625rem;
border: 0;
border-radius: 0.3125rem;
background: none;
font: inherit;
font-size: 0.84375rem;
text-align: left;
color: var(--tav-on-surface);
text-decoration: none;
cursor: pointer;
}
.tav-record-menu > a:hover,
.tav-record-menu button:hover {
background: var(--tav-surface-1);
}
.tav-record-menu hr {
margin: 0.375rem 0;
border: 0;
border-top: 1px solid var(--tav-hairline);
}
.tav-record-menu .is-danger {
color: var(--tav-error);
}
@media (max-width: 48rem) {
.tav-record-head {
grid-template-columns: auto minmax(0, 1fr);
}
.tav-record-actions {
grid-column: 1 / -1;
margin-top: 0.875rem;
}
.tav-record-back {
display: none;
}
}
/* ── Verdict line ────────────────────────────────────────────────
Het antwoord op de vraag van dit scherm, in één regel, vóór alles
andere. Groter dan de lopende tekst omdat het GELEZEN moet worden en
niet overgeslagen. `tav-verdict-blocking` kleurt hem pas wanneer de
regel een probleem beschrijft — kleur je hem altijd, dan draagt de
kleur geen informatie meer. */
.tav-verdict {
font-size: var(--tav-type-size-lg);
line-height: var(--tav-type-line-lg);
color: var(--tav-on-surface);
font-weight: 500;
letter-spacing: -0.008em;
text-wrap: balance;
}
.tav-verdict-blocking {
color: var(--tav-warning);
font-weight: 600;
}
/* ── Stat strip ──────────────────────────────────────────────────
Kerncijfers als STROOK, niet als kaarten. Vier omkaderde hokjes naast
elkaar lezen als vier losse objecten; vier cellen achter één haarlijn
lezen als één meting van hetzelfde ding. De waarde staat in de
display-face met tabular-nums, zodat een kolom cijfers uitlijnt. */
.tav-stat-strip {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-top: 1.25rem;
border-top: 1px solid var(--tav-hairline);
}
/* Elke cel is een KNOP naar de tab die het detail draagt: een kop die
alleen getallen toont veroudert tot behang, een kop die je ergens brengt
gebruik je. Een cel zonder bestemming blijft een
en krijgt dan ook
geen onderstreping bij hover. */
.tav-stat-strip > * {
padding: 0.875rem 1.625rem 0.9375rem;
border: 0;
border-right: 1px solid var(--tav-hairline);
background: none;
font: inherit;
color: inherit;
text-align: left;
align-self: stretch;
}
.tav-stat-strip > button {
cursor: pointer;
}
.tav-stat-strip > :first-child {
padding-left: 0;
}
.tav-stat-strip > :last-child {
border-right: 0;
}
.tav-stat-strip > button:hover .tav-stat-value {
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.tav-stat-strip .tav-stat-label {
display: block;
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--tav-ink-faint);
}
.tav-stat-strip .tav-stat-value {
display: block;
margin-top: 0.25rem;
font-family: var(--tav-font-display);
font-optical-sizing: auto;
font-weight: 600;
font-size: 1.375rem;
line-height: 1.1;
letter-spacing: -0.016em;
font-variant-numeric: tabular-nums;
color: var(--tav-on-surface);
}
.tav-stat-strip .tav-stat-caption {
display: block;
margin-top: 0.1875rem;
font-size: 0.75rem;
color: var(--tav-ink-muted);
}
/* ── Work row ────────────────────────────────────────────────────
Eén regel werk: wat het is, hoeveel het kost, en de weg ernaartoe.
De gekleurde linkerrand draagt de urgentie — dat is de enige plek waar
kleur op deze rij iets betekent, zodat een lijst van tien in één blik
te sorteren is op wat brandt. */
.tav-work-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0.9375rem;
background: var(--tav-surface-1);
border: 1px solid var(--tav-outline-variant);
border-left-width: 3px;
border-radius: var(--tav-radius-sm);
}
.tav-work-row-due {
border-left-color: var(--tav-error);
}
.tav-work-row-soon {
border-left-color: var(--tav-warning);
}
.tav-work-row-info {
border-left-color: var(--tav-outline-variant);
}
.tav-work-row .tav-work-amount {
font-family: var(--tav-font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--tav-type-size-base);
font-weight: 600;
letter-spacing: -0.015em;
flex: none;
}
/* ── Registration plate ──────────────────────────────────────────
Een kenteken is geen gewone tekst: het is het ding waarop een monteur,
een verzekeraar en een klant elkaar vinden. Het krijgt dus de vorm die
iedereen herkent — omkaderd, mono, uitgelijnd — zodat je het in een
tabel van dertig rijen terugvindt zonder te lezen. */
.tav-plate {
display: inline-block;
font-family: var(--tav-font-mono);
font-size: var(--tav-type-size-xs);
font-weight: 600;
letter-spacing: 0.03em;
border: 1px solid var(--tav-outline);
border-radius: var(--tav-radius-xs);
padding: 0.0625rem 0.375rem;
background: var(--tav-surface);
color: var(--tav-on-surface);
white-space: nowrap;
}
/* ── Timeline ────────────────────────────────────────────────────
Wat er gebeurd is, op één verticale lijn. De bolletjes zitten ÓP de
lijn en niet ernaast, want de lijn is de tijd; een bolletje ernaast is
een opsommingsteken en draagt geen volgorde. */
.tav-timeline {
list-style: none;
margin: 0;
padding: 0 0 0 1.0625rem;
border-left: 1px solid var(--tav-hairline-strong);
display: grid;
gap: 0.9375rem;
}
.tav-timeline > li,
.tav-timeline-item {
position: relative;
font-size: 0.84375rem;
line-height: 1.42;
color: var(--tav-on-surface);
}
/* Het bolletje in de tint van de ONDERGROND, niet van het blad: het zit
op de lijn en snijdt die door, zoals het ontwerp hem tekent. */
.tav-timeline > li::before {
content: "";
position: absolute;
left: -1.3125rem;
top: 0.3125rem;
width: 0.4375rem;
height: 0.4375rem;
border-radius: var(--tav-radius-full);
background: var(--tav-timeline-ring, var(--tav-surface-1));
border: 1.5px solid var(--tav-ink-faint);
}
.tav-timeline > li.tav-timeline-current::before {
background: var(--tav-primary);
border-color: var(--tav-primary);
}
.tav-timeline b {
font-weight: 600;
}
.tav-timeline time {
display: block;
margin-top: 0.125rem;
font-family: var(--tav-font-mono);
font-size: 0.6875rem;
letter-spacing: 0.03em;
color: var(--tav-ink-faint);
}
.tav-timeline p {
margin: 0.1875rem 0 0;
font-size: 0.78125rem;
color: var(--tav-ink-muted);
}
/* ── Stat card ───────────────────────────────────────────────────── */
.tav-stat-card {
padding: 1.25rem;
background: var(--tav-surface-1);
border: 1px solid var(--tav-outline-variant);
border-radius: var(--tav-radius-md);
}
.tav-stat-label {
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-label-weight);
color: var(--tav-on-surface-variant);
}
.tav-stat-value {
margin-top: 0.25rem;
font-size: var(--tav-type-headline-size);
font-weight: var(--tav-type-headline-weight);
line-height: var(--tav-type-headline-line);
color: var(--tav-on-surface);
font-variant-numeric: tabular-nums;
}
.tav-stat-caption {
margin-top: 0.25rem;
font-size: var(--tav-type-label-size);
color: var(--tav-on-surface-variant);
}
/* ── Record ground ───────────────────────────────────────────────
Alles ONDER de kop ligt op de ondergrond: het dossier zelf. De kop (wit,
met de lijn eronder) is het deksel, de inhoud ligt erin.
De ondergrond kleurt het SCROLLVLAK, niet dit element — de app-shell
zet `surface-1` op `.app-scroll`, sinds tavuni-docs issue 2333 op elke
pagina en niet alleen op een fiche. Een
achtergrond op dit element zelf liet links, rechts en onderaan een witte
rand staan, en de negatieve marges die dat moesten verbergen braken op
elke andere schermbreedte. */
.tav-record-ground > * + * {
margin-top: 1.5rem;
}
/* Tab panels are siblings of which only one shows; a sibling margin would
push every panel but the first down. */
.tav-record-ground > [role="tabpanel"] {
margin-top: 0;
}
/* Inside a panel, stacked sections breathe the same way. */
.tav-record-ground [role="tabpanel"] > section + section,
.tav-record-column > * + * {
margin-top: 1.75rem;
}
/* A panel that is ONE reading column (a timeline, a list of notes): a line
of text wider than this is not read, it is scanned. */
.tav-record-column {
max-width: 47.5rem;
}
.tav-record-aside > * + * {
margin-top: 1.5rem;
}
/* Een sectiekop OP de ondergrond, zoals het ontwerp hem tekent: klein,
kapitaal, ruim gespatieerd, gedempt — en ZONDER lijn. De scheiding
tussen velden draagt het ritme; een lijn onder de kop erbovenop maakte
van elke sectie een tabel met een kader. */
.tav-record-ground .tav-section-head,
.tav-record-ground .tav-section-head-row > h2 {
margin: 0 0 0.5rem;
padding: 0;
border: 0;
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: var(--tav-ink-faint);
}
.tav-record-ground .tav-section-head-row {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin: 0 0 0.5rem;
padding: 0;
border: 0;
}
.tav-record-ground .tav-section-head-row > h2 {
margin: 0;
}
.tav-record-ground .tav-section-head-row > a,
.tav-record-ground .tav-section-head-row > button {
margin-left: auto;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 0.8125rem;
font-weight: 500;
color: var(--tav-primary);
text-decoration: none;
cursor: pointer;
}
.tav-record-ground .tav-section-head-row > a:hover,
.tav-record-ground .tav-section-head-row > button:hover {
text-decoration: underline;
}
.tav-section-count {
color: var(--tav-ink-faint);
font-family: var(--tav-font-mono);
letter-spacing: 0;
}
/* ── Record split ────────────────────────────────────────────────
De twee kanten van een dossier: links wat vastligt, rechts wat er
gebeurd is. De rechterkolom heeft een VASTE breedte (316px in het
ontwerp), zodat een tijdlijn met regels van wisselende lengte de
linkerkolom niet meesleurt bij elke nieuwe gebeurtenis. */
.tav-record-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 19.75rem;
gap: 0 2.25rem;
align-items: start;
}
/* De blokken van de linkerkolom staan ONDER elkaar, elk met zijn velden in
twee kolommen. Naast elkaar (drie secties op een breed scherm) lijnden de
velden van de ene sectie niet uit met die van de volgende, en werd het
scherm op elke breedte een ander scherm. */
.tav-record-sections {
display: block;
min-width: 0;
}
.tav-record-sections > * + * {
margin-top: 1.5rem;
}
.tav-record-sections dl,
.tav-record-sections .tav-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 2rem;
margin: 0;
}
.tav-record-aside {
min-width: 0;
}
@media (max-width: 66rem) {
.tav-record-split {
grid-template-columns: minmax(0, 1fr);
gap: 2rem 0;
}
.tav-record-sections dl,
.tav-record-sections .tav-field-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Het blok "Vraagt aandacht" staat bovenaan het overzicht, over de volle
breedte; het raster met de velden volgt eronder. */
.tav-record-split {
margin-top: 1.625rem;
}
.tav-record-ground > .tav-record-split:first-child,
[role="tabpanel"] > .tav-record-split:first-child {
margin-top: 0;
}
/* ── Attention rows ──────────────────────────────────────────────
"Vraagt aandacht": de reden dat je dit scherm opent. Elke rij is werk —
wat het is, waarom, eventueel het bedrag, en de knop die het oplost. De
gekleurde linkerrand draagt de urgentie en is de ENIGE kleur op de rij,
zodat een lijst van tien in één blik te sorteren is op wat brandt.
Een rij is een los object op de ondergrond, dus hier hoort wél een
vlak, een rand en een schaduw bij. */
.tav-attention {
display: grid;
gap: 0.5rem;
}
.tav-attention-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0.9375rem;
background: var(--tav-surface);
border: 1px solid var(--tav-hairline-strong);
border-left-width: 3px;
border-radius: 0.375rem;
box-shadow: var(--tav-elevation-1);
}
.tav-attention-item.is-error {
border-left-color: var(--tav-error);
}
.tav-attention-item.is-warning {
border-left-color: var(--tav-warning);
}
/* Info houdt de gewone lijnkleur: het minst dringende punt heeft geen
eigen categoriekleur nodig, alleen zijn plaats in de lijst. */
.tav-attention-item.is-info {
border-left-color: var(--tav-hairline-strong);
}
.tav-attention-body {
min-width: 0;
flex: 1;
}
.tav-attention-title {
display: block;
margin: 0;
font-size: 0.875rem;
line-height: 1.35;
font-weight: 600;
color: var(--tav-on-surface);
}
.tav-attention-detail {
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--tav-ink-muted);
}
.tav-attention-amount {
font-family: var(--tav-font-mono);
font-variant-numeric: tabular-nums;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--tav-on-surface);
flex: none;
white-space: nowrap;
}
.tav-attention-item.is-error .tav-attention-amount {
color: var(--tav-error);
}
/* De actieknop van een rij: kleiner dan een paginaknop, op het blad. */
.tav-attention-action {
flex: none;
display: inline-flex;
align-items: center;
height: 1.875rem;
padding: 0 0.75rem;
border-radius: 0.3125rem;
border: 1px solid var(--tav-hairline-strong);
background: var(--tav-surface);
color: var(--tav-on-surface);
font: inherit;
font-size: 0.8125rem;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.tav-attention-action:hover {
border-color: var(--tav-ink-faint);
}
/* Geen openstaande punten: het blok krimpt tot één groene regel. Een fiche
zonder gaten zegt dat ook — dat iemand gekeken heeft en het in orde was,
is informatie. */
.tav-attention-clear {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.8125rem 0.9375rem;
border-radius: 0.375rem;
background: color-mix(in oklab, var(--tav-success) 12%, var(--tav-surface));
color: var(--tav-success);
font-size: 0.84375rem;
font-weight: 600;
}
@media (max-width: 40rem) {
.tav-attention-item {
flex-wrap: wrap;
}
.tav-attention-body {
flex: 1 1 100%;
}
.tav-attention-amount {
order: 3;
}
.tav-attention-action {
order: 4;
margin-left: auto;
}
}
/* ── Record panel: toolbar, filter chips ─────────────────────────
Boven een lijst in een tab: zoeken, filteren op wat telt, en rechts de
actie die er iets aan toevoegt. Een chip draagt zijn telling, zodat je
vóór het klikken ziet hoeveel rijen er overblijven. */
.tav-record-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5625rem;
margin-bottom: 0.875rem;
}
.tav-record-toolbar-end {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5625rem;
}
.tav-filter-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
height: 1.875rem;
padding: 0 0.75rem;
border-radius: var(--tav-radius-full);
border: 1px solid var(--tav-hairline-strong);
background: var(--tav-surface);
color: var(--tav-ink-muted);
font: inherit;
font-size: 0.8125rem;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.tav-filter-chip:hover {
border-color: var(--tav-ink-faint);
color: var(--tav-on-surface);
}
.tav-filter-chip[aria-pressed="true"],
.tav-filter-chip.active {
background: color-mix(in oklab, var(--tav-primary) 12%, var(--tav-surface));
border-color: color-mix(in oklab, var(--tav-primary) 30%, var(--tav-surface));
color: var(--tav-primary);
font-weight: 600;
}
.tav-filter-chip.is-warning[aria-pressed="true"],
.tav-filter-chip.is-warning.active {
background: color-mix(in oklab, var(--tav-warning) 14%, var(--tav-surface));
border-color: color-mix(in oklab, var(--tav-warning) 34%, var(--tav-surface));
color: var(--tav-warning);
}
/* ── Record table ────────────────────────────────────────────────
Een lijst in een tab: één omkaderd vlak op de ondergrond, met een
kapitale kop in de zachtste tint en een voetregel die zegt wat je ziet
("1–10 van 104 voertuigen · gesorteerd op keuringsdatum").
Een rij die aandacht vraagt krijgt een smalle kleurstreep links in de
eerste cel — dezelfde taal als de aandachtsrijen op het overzicht, zodat
je de drie keuringen die vervallen in een lijst van honderd terugvindt. */
.tav-record-table {
border: 1px solid var(--tav-hairline-strong);
border-radius: 0.4375rem;
overflow: hidden;
background: var(--tav-surface);
box-shadow: var(--tav-elevation-1);
}
.tav-record-table-scroll {
overflow-x: auto;
}
.tav-record-table table {
width: 100%;
border-collapse: collapse;
}
.tav-record-table thead th {
text-align: left;
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tav-ink-faint);
font-weight: 600;
padding: 0.5625rem 0.875rem;
background: color-mix(in oklab, var(--tav-surface) 50%, var(--tav-surface-1));
border-bottom: 1px solid var(--tav-hairline-strong);
white-space: nowrap;
}
.tav-record-table tbody td {
padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--tav-hairline);
font-size: 0.84375rem;
vertical-align: middle;
color: var(--tav-on-surface);
}
.tav-record-table tbody tr:last-child td {
border-bottom: 0;
}
.tav-record-table tbody tr:hover td {
background: color-mix(in oklab, var(--tav-surface) 50%, var(--tav-surface-1));
}
.tav-record-table tbody tr.is-warning td:first-child {
box-shadow: inset 3px 0 0 var(--tav-warning);
}
.tav-record-table tbody tr.is-error td:first-child {
box-shadow: inset 3px 0 0 var(--tav-error);
}
.tav-record-table tbody tr.is-off td {
color: var(--tav-ink-faint);
}
.tav-record-table td a {
color: var(--tav-primary);
text-decoration: none;
}
.tav-record-table td a:hover {
text-decoration: underline;
}
.tav-record-table-num {
font-family: var(--tav-font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.tav-record-table-foot {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5625rem 0.875rem;
background: color-mix(in oklab, var(--tav-surface) 50%, var(--tav-surface-1));
border-top: 1px solid var(--tav-hairline-strong);
font-size: 0.78125rem;
color: var(--tav-ink-muted);
}
.tav-record-table-foot > :first-child {
flex: 1;
}
/* Een lege lijst: een gestippeld vlak met één zin, geen lege tabel met
alleen een kop. */
.tav-record-empty {
border: 1px dashed var(--tav-hairline-strong);
border-radius: 0.4375rem;
padding: 1.375rem;
text-align: center;
color: var(--tav-ink-faint);
font-size: 0.84375rem;
}
/* Een toelichting onder een lijst ("Klanten krijgen geen account…"). */
.tav-record-footnote {
margin: 0.875rem 0 0;
max-width: 62ch;
font-size: 0.8125rem;
color: var(--tav-ink-faint);
}
/* ── Access row ──────────────────────────────────────────────────
Wie bij dit dossier kan. Medewerkers ROND, teams VIERKANT, externen
(klantlinks, portaalgasten) in oker — drie soorten toegang in één lijst,
aan hun vorm te onderscheiden zonder een legende. */
.tav-access-row {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--tav-hairline);
}
.tav-access-avatar {
width: 2rem;
height: 2rem;
flex: none;
display: grid;
place-items: center;
border-radius: var(--tav-radius-full);
font-size: 0.75rem;
font-weight: 600;
background: color-mix(in oklab, var(--tav-primary) 12%, var(--tav-surface));
color: var(--tav-primary);
}
.tav-access-avatar.is-team {
border-radius: 0.4375rem;
background: var(--tav-hairline);
color: var(--tav-ink-muted);
}
.tav-access-avatar.is-external {
background: color-mix(in oklab, var(--tav-warning) 14%, var(--tav-surface));
color: var(--tav-warning);
}
.tav-access-who {
flex: 1;
min-width: 0;
}
.tav-access-who > b {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--tav-on-surface);
}
.tav-access-who > span {
font-size: 0.78125rem;
color: var(--tav-ink-muted);
}
.tav-access-perm {
flex: none;
text-align: right;
font-size: 0.78125rem;
color: var(--tav-ink-muted);
}
.tav-access-perm > b {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--tav-on-surface);
}
.tav-access-action {
flex: none;
display: inline-flex;
align-items: center;
height: 1.75rem;
padding: 0 0.625rem;
border-radius: 0.3125rem;
border: 1px solid var(--tav-hairline-strong);
background: var(--tav-surface);
color: var(--tav-ink-muted);
font: inherit;
font-size: 0.78125rem;
cursor: pointer;
}
.tav-access-action:hover {
border-color: var(--tav-ink-faint);
color: var(--tav-on-surface);
}
/* ── Record note ─────────────────────────────────────────────────
Een kort feit met zijn uitleg in de zijkolom ("Zichtbaar binnen de eigen
organisatie", "7 jaar na laatste factuur"). De accentstreep links alleen
bij het feit dat iets toestaat; de rest staat neutraal. */
.tav-record-note {
border: 1px solid var(--tav-hairline-strong);
border-left: 3px solid var(--tav-primary);
border-radius: 0.375rem;
padding: 0.8125rem 0.9375rem;
background: var(--tav-surface);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--tav-ink-muted);
}
.tav-record-note.is-quiet {
border-left-color: var(--tav-hairline-strong);
}
.tav-record-note > b {
display: block;
margin-bottom: 0.1875rem;
font-size: 0.84375rem;
color: var(--tav-on-surface);
}
.tav-record-note code {
font-family: var(--tav-font-mono);
font-size: 0.75rem;
color: var(--tav-primary);
}
/* Gekleurde onderregel van een kerncijfer: "1 vervallen" hoort rood te
zijn, "alles afgehandeld" groen. Zonder die kleur draagt de strook vier
getallen en geen enkel oordeel. */
.tav-stat-caption.is-warning {
color: var(--tav-warning);
font-weight: 600;
}
.tav-stat-caption.is-error {
color: var(--tav-error);
font-weight: 600;
}
.tav-stat-caption.is-success {
color: var(--tav-success);
font-weight: 600;
}
/* ── Empty state ─────────────────────────────────────────────────── */
.tav-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
text-align: center;
}
.tav-empty-icon {
width: 3rem;
height: 3rem;
color: color-mix(in oklab, var(--tav-on-surface-variant), transparent 40%);
}
.tav-empty-title {
margin-top: 1rem;
font-size: var(--tav-type-title-size);
font-weight: var(--tav-type-title-weight);
color: var(--tav-on-surface);
}
.tav-empty-text {
margin-top: 0.25rem;
font-size: var(--tav-type-body-size);
color: var(--tav-on-surface-variant);
}
/* ── Pagination ──────────────────────────────────────────────────── */
.tav-pagination {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.25rem;
}
.tav-page-btn {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.625rem;
border: 1px solid var(--tav-outline);
border-radius: var(--tav-radius-sm);
background: var(--tav-surface);
color: var(--tav-on-surface);
font-size: var(--tav-type-label-size);
text-decoration: none;
}
.tav-page-btn:hover {
background: var(--tav-surface-2);
}
.tav-page-btn.active,
.tav-page-btn[aria-current="page"] {
background: var(--tav-primary);
color: var(--tav-on-primary);
border-color: var(--tav-primary);
}
.tav-page-btn[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
/* ── Table ───────────────────────────────────────────────────────── */
.tav-table {
width: 100%;
border-collapse: collapse;
font-size: var(--tav-type-body-size);
}
.tav-table thead {
background: var(--tav-surface-2);
}
/* Dense by default: header and body rows carry the SAME padding so a data
row is no taller than its header. Sentence case, not caps — all-caps
headers shout, cost horizontal room and hurt scanning of Dutch compound
words ("Voertuighistoriek"). Weight + muted colour carry the hierarchy
instead; the tiny positive tracking that made caps legible is gone. */
.tav-table th {
padding: 0.375rem 0.75rem;
text-align: left;
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-title-weight);
color: var(--tav-on-surface-variant);
}
.tav-table td {
padding: 0.375rem 0.75rem;
border-top: 1px solid var(--tav-outline-variant);
color: var(--tav-on-surface);
}
/* The component defaults th to left (browser th-default is center, wrong for
a data table). But an amount/number column marks itself right with a
tav-text-right utility, which a bare `.tav-table th` (0,1,1) would
override back to left. Honour the explicit alignment via an
attribute-selector so a right-aligned header stays right. */
/* An amount or a count never breaks inside the number: "€ 329,7/1" is not
a figure any more (tavuni-docs issue 2345). Numeric cells mark themselves with
`tav-tabular-nums` or the mono face. */
.tav-table td[class*="tav-tabular-nums"],
.tav-table td[class*="tav-font-mono"] {
white-space: nowrap;
}
.tav-table th[class*="tav-text-right"] {
text-align: right;
}
.tav-table th[class*="tav-text-center"] {
text-align: center;
}
/* Opt-in breathing room for tables whose rows carry two lines of content. */
.tav-table-comfortable th,
.tav-table-comfortable td {
padding: 0.625rem 1rem;
}
.tav-table tbody tr:hover {
background: color-mix(
in oklab,
transparent,
var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
);
}
/* Sticky header for tall scrolling tables (workspace audit #19). */
.tav-table-sticky thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--tav-surface-2);
}
/* Sortable column header — the whole label is the sort link and the active
column's direction arrow is tinted. base.html carries the ?sort=&dir=
navigation; this only makes every sortable table LOOK identical instead
of each hand-rolling its own header anchor. */
.tav-table th a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: inherit;
text-decoration: none;
}
.tav-table th a:hover {
color: var(--tav-on-surface);
}
/* Row navigation — a row marked data-row-href IS a link. The keyboard nav
(j/k, focus roving) already lives in base.html; the component only makes
it read as clickable and keeps the focus ring visible. Non-navigation
actions go in the last cell as `.tav-row-actions`, which sits above the
row so it stays independently clickable (the norm: the row navigates,
the action column carries only NON-navigation actions). */
.tav-table tbody tr[data-row-href] {
cursor: pointer;
}
.tav-table tbody tr[data-row-href]:focus-visible {
outline: 2px solid var(--tav-primary);
outline-offset: -2px;
}
.tav-table .tav-row-actions {
position: relative;
z-index: 1;
}
/* ── Modal / dialog shell ────────────────────────────────────────── */
.tav-modal-backdrop {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: color-mix(in oklab, var(--tav-on-surface) 45%, transparent);
}
.tav-modal {
width: 100%;
max-width: 32rem;
background: var(--tav-surface-1);
border: 1px solid var(--tav-outline-variant);
border-radius: var(--tav-radius-md);
box-shadow: var(--tav-elevation-3);
overflow: hidden;
}
/* Responsive table → stacked cards below the small breakpoint
(workspace audit: ~43/48 tables not mobile-safe). Add
`tav-table-responsive` and give every
a `data-label`. */
@media (max-width: 639px) {
.tav-table-responsive thead {
display: none;
}
.tav-table-responsive tr {
display: block;
margin-bottom: 0.75rem;
border: 1px solid var(--tav-outline-variant);
border-radius: var(--tav-radius-sm);
background: var(--tav-surface-1);
}
.tav-table-responsive td {
display: flex;
justify-content: space-between;
gap: 1rem;
border-top: 0;
text-align: right;
}
.tav-table-responsive td::before {
content: attr(data-label);
font-weight: var(--tav-type-label-weight);
color: var(--tav-on-surface-variant);
text-align: left;
}
}
/* Animations live outside the cascade layer (keyframes are not layered).
Both are neutralised by the prefers-reduced-motion rule in `tav-base`. */
@keyframes tav-spin {
to {
transform: rotate(360deg);
}
}
@keyframes tav-pulse {
50% {
opacity: 0.5;
}
}
/* ── Callout (subtle, left-accent — distinct from the filled flash) ── */
/* Single-class contract (see buttons): a bare `tav-callout-info` etc.
must carry the callout box, not only `.tav-callout`. */
[class*="tav-callout"] {
display: flex;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-left: 3px solid var(--tav-outline);
border-radius: var(--tav-radius-sm);
background: var(--tav-surface-1);
color: var(--tav-on-surface);
font-size: var(--tav-type-body-size);
}
.tav-callout-info {
border-left-color: var(--tav-info);
background: color-mix(in oklab, var(--tav-surface-1), var(--tav-info) 8%);
}
.tav-callout-success {
border-left-color: var(--tav-success);
background: color-mix(in oklab, var(--tav-surface-1), var(--tav-success) 8%);
}
.tav-callout-warning {
border-left-color: var(--tav-warning);
background: color-mix(in oklab, var(--tav-surface-1), var(--tav-warning) 8%);
}
.tav-callout-error {
border-left-color: var(--tav-error);
background: color-mix(in oklab, var(--tav-surface-1), var(--tav-error) 8%);
}
/* ── Chip / tag ──────────────────────────────────────────────────── */
.tav-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.1875rem 0.625rem;
border-radius: var(--tav-radius-full);
background: var(--tav-surface-variant);
color: var(--tav-on-surface-variant);
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-label-weight);
}
.tav-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: var(--tav-radius-full);
color: var(--tav-on-surface-variant);
cursor: pointer;
background: transparent;
border: 0;
}
.tav-chip-remove:hover {
background: color-mix(
in oklab,
transparent,
var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
);
}
/* ── Spinner ─────────────────────────────────────────────────────── */
.tav-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--tav-outline-variant);
border-top-color: var(--tav-primary);
border-radius: var(--tav-radius-full);
animation: tav-spin 0.6s linear infinite;
}
/* ── Progress bar ────────────────────────────────────────────────── */
.tav-progress {
width: 100%;
height: 0.5rem;
border-radius: var(--tav-radius-full);
background: var(--tav-surface-variant);
overflow: hidden;
}
.tav-progress-bar {
height: 100%;
border-radius: var(--tav-radius-full);
background: var(--tav-primary);
transition: width 0.2s ease;
}
/* ── Skeleton ────────────────────────────────────────────────────── */
.tav-skeleton {
border-radius: var(--tav-radius-sm);
background: var(--tav-surface-2);
animation: tav-pulse 1.5s ease-in-out infinite;
}
/* ── Dropdown menu (pairs with tavDisclosure) ────────────────────── */
.tav-menu {
min-width: 12rem;
padding: 0.25rem;
border: 1px solid var(--tav-outline-variant);
border-radius: var(--tav-radius-md);
background: var(--tav-surface-1);
box-shadow: var(--tav-elevation-2);
}
.tav-menu-item {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
padding: 0.5rem 0.625rem;
border-radius: var(--tav-radius-sm);
color: var(--tav-on-surface);
font-size: var(--tav-type-body-size);
text-decoration: none;
text-align: left;
background: transparent;
border: 0;
cursor: pointer;
}
.tav-menu-item:hover {
background: color-mix(
in oklab,
transparent,
var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
);
}
.tav-menu-divider {
height: 1px;
margin: 0.25rem 0;
background: var(--tav-outline-variant);
}
/* ── List ────────────────────────────────────────────────────────── */
.tav-list {
list-style: none;
margin: 0;
padding: 0;
}
.tav-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--tav-outline-variant);
}
.tav-list-item:last-child {
border-bottom: 0;
}
/* ── Description list ─────────────────────────────────────────────── */
.tav-dl {
display: grid;
grid-template-columns: minmax(8rem, max-content) 1fr;
gap: 0.5rem 1.5rem;
margin: 0;
}
.tav-dt {
font-size: var(--tav-type-label-size);
font-weight: var(--tav-type-label-weight);
color: var(--tav-on-surface-variant);
}
.tav-dd {
margin: 0;
color: var(--tav-on-surface);
}
/* ── Checkbox / radio — drawn by the library, not by the browser ────
Dirk, 2026-10-13 (tavuni-docs#2636): no native component anywhere. The
element stays an `` (form value, label click, keyboard, x-model
and every `:checked` reader keep working), but `appearance: none` takes
the widget away from the browser and the box, the check, the dot and
the indeterminate bar are painted here. Gradients, not a data: image:
the services do not share one CSP, and `img-src` without `data:` would
blank the check where it applies. Gradients, not `::before`: a
pseudo-element on `` is not rendered in every engine.
THREE STATES THAT NEVER LOOK ALIKE (tavuni-docs#3897). A ticked
"Kinderzitje" next to an unavailable "Winterbanden" read as two grey
boxes: the brand primary of a muted brand is a near-black, and disabled
was the same box at half opacity — a ticked disabled box was a faded
ticked one. Now: unchecked is a 2px on-surface-variant frame on the
sheet; checked is a solid primary fill with a heavy on-primary check;
disabled is its own look, never an opacity — a faintly tinted sheet in
a light frame, ticked or not (ticked shows the check in that frame's
grey, never a fill). WCAG 1.4.11 (3:1 non-text), measured in the
browser on the default theme: checked against unchecked 11.6:1 light /
9.9:1 dark, against disabled 9.7:1 / 8.4:1. For any brand: the theme
keeps a brand's primary only when it reads 4.5:1 as text on the sheet
(`theme/roles.rs`), and the disabled tint is 8 % off that sheet, so
checked against disabled stays above 3.9:1 in both modes. A filled
grey for disabled-and-ticked would not: a mid-tone brand sits at the
same luminance as a 38 % grey. */
.tav-checkbox,
.tav-radio {
--tav-check-ink: var(--tav-on-primary);
appearance: none;
-webkit-appearance: none;
display: inline-block;
flex-shrink: 0;
box-sizing: border-box;
width: 1rem;
height: 1rem;
margin: 0;
vertical-align: middle;
border: 2px solid var(--tav-on-surface-variant);
background-color: var(--tav-surface);
background-repeat: no-repeat;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tav-checkbox {
border-radius: var(--tav-radius-xs);
}
.tav-radio {
border-radius: var(--tav-radius-full);
}
.tav-checkbox:hover:not(:disabled),
.tav-radio:hover:not(:disabled) {
border-color: var(--tav-primary);
}
.tav-checkbox:checked,
.tav-checkbox:indeterminate,
.tav-radio:checked {
border-color: var(--tav-primary);
background-color: var(--tav-primary);
}
/* The check: two strokes, each the diagonal of its own box ("to top
right" puts the 50% line through the top-left and bottom-right
corners, "to bottom right" through the other two). */
.tav-checkbox:checked {
background-image:
linear-gradient(to top right, transparent calc(50% - 1.4px), var(--tav-check-ink) calc(50% - 1.4px) calc(50% + 1.4px), transparent calc(50% + 1.4px)),
linear-gradient(to bottom right, transparent calc(50% - 1.4px), var(--tav-check-ink) calc(50% - 1.4px) calc(50% + 1.4px), transparent calc(50% + 1.4px));
background-size: 40% 40%, 62% 76%;
background-position: 6% 64%, 88% 30%;
}
.tav-checkbox:indeterminate {
background-image: linear-gradient(var(--tav-check-ink), var(--tav-check-ink));
background-size: 64% 2px;
background-position: center;
}
.tav-radio:checked {
background-image: radial-gradient(circle, var(--tav-check-ink) 0 34%, transparent 40%);
}
.tav-checkbox:disabled,
.tav-radio:disabled {
cursor: not-allowed;
border-color: color-mix(in oklab, var(--tav-on-surface) 30%, var(--tav-surface));
background-color: color-mix(in oklab, var(--tav-on-surface) 8%, var(--tav-surface));
}
.tav-checkbox:checked:disabled,
.tav-checkbox:indeterminate:disabled,
.tav-radio:checked:disabled {
--tav-check-ink: color-mix(in oklab, var(--tav-on-surface) 50%, var(--tav-surface));
border-color: color-mix(in oklab, var(--tav-on-surface) 30%, var(--tav-surface));
background-color: color-mix(in oklab, var(--tav-on-surface) 8%, var(--tav-surface));
}
.tav-checkbox[aria-invalid="true"],
.tav-radio[aria-invalid="true"] {
border-color: var(--tav-error);
}
/* ── Inline input — a field that reads as the text it edits ─────────
A label renamed in place (a canvas group title, a sticky note): at
rest it is the text, in its own font and colour; hover shows the
box, focus the brand edge. Works on `` and `