/* tokens.css — Werkbank ontwerpsysteem (white-label)
   Opgezet naar de systematiek van de Timovolt-kit: grootte, regelhoogte,
   spatiering en gewicht reizen samen in een typestap; elke ruimte is een
   token op een 4px-raster; de radiusladder loopt van chip tot pil.

   Een laag verschilt per klant: --accent (met --accent-ink en --accent-dim).
   De rest van het palet ligt vast, zodat een klantkeuze het contrast nooit
   kan breken. Er is een thema, licht; het halve donkere thema is per
   11-09-2026 verwijderd (het bestond in vier blokken hier en in nul in de
   scanner, waar het volgens de code juist standaard zou zijn).

   Dichtheid: html[data-dichtheid="compact"] schaalt de hele ruimteschaal,
   niet vijf losse paddings zoals voorheen. */

:root {
  /* ── merk: het enige dat per klant verschilt ──────────────────────────── */
  --accent:     #1D4ED8;
  --accent-ink: #FFFFFF;
  --accent-dim: color-mix(in srgb, var(--accent) 11%, transparent);

  /* ── oppervlakken ─────────────────────────────────────────────────────── */
  /* De neutralen dragen een vleugje accent, zoals de kit zijn grijstinten van
     de merkkleur afleidt: absoluut grijs oogt vuil naast een gekleurd vlak.
     Ze volgen --accent automatisch, dus een klantkleur kleurt het hele scherm
     mee zonder dat er een tweede instelling nodig is. */
  --bg:        color-mix(in srgb, var(--accent)  3%, #F7F9FB);
  --panel:     #FFFFFF;
  --panel-2:   color-mix(in srgb, var(--accent)  4%, #F2F5F8);
  --line:      color-mix(in srgb, var(--accent)  7%, #E2E8F0);
  --ink:       #0F172A;
  --ink-dim:   #5A6B81;

  /* ── navigatie: de donkere balk (opzet van MyDockly, kleuren van Werkbank) ─
     Het zijmenu is de enige donkere vlek in het portaal. De tint komt uit de
     inkt met een vleugje accent, zodat een klantkleur ook hier meekleurt zonder
     dat het contrast ooit breekt; de leesbare accentvariant op donker is het
     accent gemengd met wit. */
  --nav-bg:       color-mix(in srgb, var(--accent) 14%, #0F172A);
  --nav-bg-2:     color-mix(in srgb, var(--accent) 24%, #141E33);
  --nav-line:     rgba(255, 255, 255, .09);
  --nav-ink:      #E6ECF5;
  --nav-ink-dim:  rgba(230, 236, 245, .62);
  --nav-active:   color-mix(in srgb, var(--accent) 36%, transparent);
  --nav-accent:   color-mix(in srgb, var(--accent) 52%, #FFFFFF);
  --nav-width:    252px;
  --nav-rail:     68px;

  /* ── semantiek (status; losstaand van het merk) ───────────────────────── */
  --amber:     #A87500;
  --green:     #2E8F58;
  --orange:    #C45A2C;
  --blue:      #3B6FBF;
  --red:       #C24440;

  --amber-dim:  color-mix(in srgb, var(--amber)  12%, transparent);
  --green-dim:  color-mix(in srgb, var(--green)  12%, transparent);
  --orange-dim: color-mix(in srgb, var(--orange) 12%, transparent);
  --blue-dim:   color-mix(in srgb, var(--blue)   12%, transparent);
  --red-dim:    color-mix(in srgb, var(--red)    11%, transparent);
  --grey-dim:   color-mix(in srgb, var(--ink-dim) 12%, transparent);

  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-head: "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Elf stappen. Gebruik de .t-*-klassen: die zetten grootte, regelhoogte,
     spatiering en gewicht in een keer. Een van de vier los herhalen is
     precies hoe de zeventien losse lettergroottes ooit zijn ontstaan. */
  --text-micro:       10px; --leading-micro:      1.4;  --tracking-micro:      .06em;  --weight-micro:      700;
  --text-caption:     11px; --leading-caption:    1.36; --tracking-caption:    .1em;   --weight-caption:    600;
  --text-label:       12px; --leading-label:      1.35; --tracking-label:      .04em;  --weight-label:      600;
  --text-body-sm:     13px; --leading-body-sm:    1.45; --tracking-body-sm:    0;      --weight-body-sm:    400;
  --text-body:        14px; --leading-body:       1.5;  --tracking-body:       0;      --weight-body:       400;
  --text-body-lg:     15px; --leading-body-lg:    1.5;  --tracking-body-lg:    0;      --weight-body-lg:    400;
  --text-title-sm:    17px; --leading-title-sm:   1.4;  --tracking-title-sm:  -.01em;  --weight-title-sm:   700;
  --text-title:       22px; --leading-title:      1.25; --tracking-title:     -.015em; --weight-title:      700;
  --text-heading:     26px; --leading-heading:    1.2;  --tracking-heading:   -.02em;  --weight-heading:    800;
  --text-display:     32px; --leading-display:    1.12; --tracking-display:   -.025em; --weight-display:    800;
  --text-display-lg:  40px; --leading-display-lg: 1.05; --tracking-display-lg:-.03em;  --weight-display-lg: 800;

  /* ── ruimte: 4px-raster, schaalt mee met de dichtheid ─────────────────── */
  --pad: 1;
  --space-1:  calc(4px  * var(--pad));
  --space-2:  calc(8px  * var(--pad));
  --space-3:  calc(12px * var(--pad));
  --space-4:  calc(16px * var(--pad));
  --space-5:  calc(20px * var(--pad));
  --space-6:  calc(24px * var(--pad));
  --space-8:  calc(32px * var(--pad));
  --space-10: calc(40px * var(--pad));
  --space-12: calc(48px * var(--pad));
  --space-16: calc(64px * var(--pad));

  /* ── radius ───────────────────────────────────────────────────────────── */
  --radius-badge: 6px;
  --radius-chip:  8px;
  --radius-field: 14px;
  --radius-panel: 18px;
  --radius-card:  22px;
  --radius-pill:  999px;
  /* aliassen: de bestaande componenten spreken deze twee aan */
  --radius:    var(--radius-field);
  --radius-sm: var(--radius-chip);

  /* ── schaduw: getint met de inkt, nooit neutraal grijs ────────────────── */
  --shadow-raised:  0 2px 6px rgba(15, 23, 42, .05);
  --shadow-panel:   0 14px 44px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-overlay: 0 24px 64px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);
  --shadow: var(--shadow-panel);

  /* ── beweging ─────────────────────────────────────────────────────────── */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --ease-standard: cubic-bezier(.2, 0, .38, .9);

  /* ── focus ────────────────────────────────────────────────────────────── */
  --focus-width:  2px;
  --focus-offset: 2px;

  /* ── stalen locatieplaatjes (de signatuur van het portaal) ────────────── */
  --plate-line:  #C8D2DE;
  --plate-top:   #FBFCFE;
  --plate-bot:   #EDF1F6;
  --plate-shine: rgba(255, 255, 255, .85);
  --plate-rivet-hi: #B9C2CC;
  --plate-rivet:    #97A2AE;
  --plate-rivet-lo: #6B7682;
}

html[data-dichtheid="compact"] { --pad: .8; }

*, *::before, *::after { box-sizing: border-box; }

/* Het attribuut hidden verbergt altijd, ook een element met een eigen
   display-regel: zonder deze regel wint bijvoorbeeld .row { display: flex }
   van de browserregel voor [hidden] (Uren, Vrij bereik; Artikelbewaker,
   Uitstellen tot). De losse regels per klasse mogen blijven staan
   (code-review na PR 81, tests/hidden-globaal.test.mjs). */
[hidden] { display: none !important; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); text-wrap: balance; margin: 0; }

/* ── typestappen: grootte, regelhoogte, spatiering en gewicht in een keer ──
   Vervangt de inline font-size. Wie er een los herhaalt, begint de drift
   opnieuw; tests/css-schaal.test.mjs bewaakt dat. */
.t-micro      { font-size: var(--text-micro);      line-height: var(--leading-micro);      letter-spacing: var(--tracking-micro);      font-weight: var(--weight-micro); }
.t-caption    { font-size: var(--text-caption);    line-height: var(--leading-caption);    letter-spacing: var(--tracking-caption);    font-weight: var(--weight-caption); }
.t-label      { font-size: var(--text-label);      line-height: var(--leading-label);      letter-spacing: var(--tracking-label);      font-weight: var(--weight-label); }
.t-body-sm    { font-size: var(--text-body-sm);    line-height: var(--leading-body-sm);    letter-spacing: var(--tracking-body-sm);    font-weight: var(--weight-body-sm); }
.t-body       { font-size: var(--text-body);       line-height: var(--leading-body);       letter-spacing: var(--tracking-body);       font-weight: var(--weight-body); }
.t-body-lg    { font-size: var(--text-body-lg);    line-height: var(--leading-body-lg);    letter-spacing: var(--tracking-body-lg);    font-weight: var(--weight-body-lg); }
.t-title-sm   { font-size: var(--text-title-sm);   line-height: var(--leading-title-sm);   letter-spacing: var(--tracking-title-sm);   font-weight: var(--weight-title-sm); }
.t-title      { font-size: var(--text-title);      line-height: var(--leading-title);      letter-spacing: var(--tracking-title);      font-weight: var(--weight-title); }
.t-heading    { font-size: var(--text-heading);    line-height: var(--leading-heading);    letter-spacing: var(--tracking-heading);    font-weight: var(--weight-heading); }
.t-display    { font-size: var(--text-display);    line-height: var(--leading-display);    letter-spacing: var(--tracking-display);    font-weight: var(--weight-display); }
.t-display-lg { font-size: var(--text-display-lg); line-height: var(--leading-display-lg); letter-spacing: var(--tracking-display-lg); font-weight: var(--weight-display-lg); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.dim { color: var(--ink-dim); }

/* ── labels / eyebrows ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-head);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── buttons: pillen, zoals de kit ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background   var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    transform    var(--duration-instant);
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-dim); box-shadow: var(--shadow-raised); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.06); }

.btn-danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn-danger:hover { background: var(--red-dim); }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--panel-2); border-color: transparent; box-shadow: none; }

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-label);
  line-height: var(--leading-label);
}

/* ── form fields ───────────────────────────────────────────────────────── */
label.field { display: block; }
label.field > span {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-dim);
}

input[type="text"], input[type="search"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], select, textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-dim); }
input.mono, .mono input { font-family: var(--font-mono); }
input::placeholder, textarea::placeholder { color: var(--ink-dim); opacity: .7; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}

input[type="checkbox"] { accent-color: var(--accent); width: var(--space-4); height: var(--space-4); }

/* ── chips & badges ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) / 2) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-in       { background: var(--green-dim);  color: var(--green); }
.chip-out      { background: var(--orange-dim); color: var(--orange); }
.chip-transfer { background: var(--blue-dim);   color: var(--blue); }
.chip-count    { background: var(--grey-dim);   color: var(--ink-dim); }
.chip-corr     { background: var(--amber-dim);  color: var(--amber); }
.chip-red      { background: var(--red-dim);    color: var(--red); }
.chip-expected { background: var(--blue-dim);   color: var(--blue); }
.chip-partial  { background: var(--amber-dim);  color: var(--amber); }
.chip-received { background: var(--green-dim);  color: var(--green); }
.chip-cancelled{ background: var(--grey-dim);   color: var(--ink-dim); }
.chip-accent   { background: var(--accent-dim); color: var(--accent); }

/* stalen magazijnplaat voor locatiecodes: de signatuur van het portaal */
.loc-plate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius-badge);
  background: linear-gradient(180deg, var(--plate-top) 0%, var(--plate-bot) 100%);
  box-shadow: inset 0 1px 0 var(--plate-shine);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--ink);
  white-space: nowrap;
}
.loc-plate::before {
  /* de klinknagel */
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--plate-rivet-hi) 0%, var(--plate-rivet) 45%, var(--plate-rivet-lo) 100%);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, .7);
  flex: none;
}

/* ── voorraadbalk t.o.v. minimum ───────────────────────────────────────── */
.stockbar {
  position: relative;
  width: 100%;
  min-width: 90px;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.stockbar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: var(--radius-pill);
}
.stockbar > i.ok   { background: var(--green); }
.stockbar > i.warn { background: var(--amber); }
.stockbar > i.low  { background: var(--red); }
.stockbar > b {
  /* minimum-markering op 50% van de balk (balk = 2 × min_stock) */
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--ink-dim);
  opacity: .9;
}

/* ── tabellen ──────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tbl tbody tr:hover { background: var(--panel-2); }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── panelen ───────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.panel > header h3 {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.panel > .panel-body { padding: var(--space-4); }
.panel > .panel-body.flush { padding: 0; }

/* ── modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh var(--space-4) var(--space-4);
  background: rgba(15, 23, 42, .45);
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
}
.modal.modal-wide { max-width: 860px; }
.modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.modal > header h3 {
  font-size: var(--text-title-sm);
  line-height: var(--leading-title-sm);
  font-weight: var(--weight-title-sm);
  letter-spacing: var(--tracking-title-sm);
}
.modal .modal-body { padding: var(--space-5); display: grid; gap: var(--space-4); }
.modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}
.modal .x {
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-dim);
  font-size: var(--text-title);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.modal .x:hover { color: var(--ink); background: var(--panel-2); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

/* ── toasts ────────────────────────────────────────────────────────────── */
#toast-root {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(380px, calc(100vw - var(--space-8)));
}
.toast {
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-dim);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  animation: toast-in var(--duration-base) var(--ease-standard);
}
.toast.ok    { border-left-color: var(--green); }
.toast.err   { border-left-color: var(--red); }
.toast.info  { border-left-color: var(--blue); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ── lege staten ───────────────────────────────────────────────────────── */
.empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--ink-dim);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.empty::before {
  content: "▢";
  display: block;
  font-size: var(--text-title);
  margin-bottom: var(--space-2);
  opacity: .6;
}
.empty.plain::before { content: none; }  /* laadtekst of korte melding zonder teken */

/* ── meldingsbalk: blijft staan waar een toast verdwijnt ───────────────── */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel-2);
  color: var(--ink);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.notice > b { font-weight: 700; }
.notice.ok   { border-color: color-mix(in srgb, var(--green)  35%, var(--line)); background: var(--green-dim); }
.notice.err  { border-color: color-mix(in srgb, var(--red)    35%, var(--line)); background: var(--red-dim); }
.notice.warn { border-color: color-mix(in srgb, var(--amber)  35%, var(--line)); background: var(--amber-dim); }
.notice.info { border-color: color-mix(in srgb, var(--blue)   35%, var(--line)); background: var(--blue-dim); }
.notice[hidden] { display: none; }

/* ── overig ────────────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: var(--space-3); }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }

.skel {
  display: inline-block;
  height: var(--space-3);
  border-radius: var(--radius-badge);
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--line) 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  animation: skel 1.1s infinite linear;
}
@keyframes skel { to { background-position: -200% 0; } }

/* ── ruimte-hulpklassen: vervangen de inline margin en gap ─────────────── */
/* Dit blok staat bewust achteraan: een hulpklasse moet van een component
   met gelijke specificiteit winnen (.row zet zelf een gap, .u-m-0 gaat
   vóór de losse margeklassen zodat 'u-m-0 u-mb-2' netto 0 0 8px geeft). */
.u-m-0  { margin: 0; }
.u-mt-1 { margin-top: var(--space-1); }   .u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }   .u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-1 { margin-bottom: var(--space-1); } .u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); } .u-mb-4 { margin-bottom: var(--space-4); }
.u-gap-1 { gap: var(--space-1); }  .u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }  .u-gap-4 { gap: var(--space-4); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mb-6 { margin-bottom: var(--space-6); } .u-mb-8 { margin-bottom: var(--space-8); }
.u-ml-1 { margin-left: var(--space-1); }  .u-ml-2 { margin-left: var(--space-2); }
.u-mr-1 { margin-right: var(--space-1); } .u-mr-2 { margin-right: var(--space-2); }
.u-p-2 { padding: var(--space-2); } .u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); } .u-p-6 { padding: var(--space-6); }
.u-gap-6 { gap: var(--space-6); }
.u-grid  { display: grid; }
.u-flex  { display: flex; }
.u-block { display: block; }
.u-center { text-align: center; }
.u-ta-r { text-align: right; }  .u-ta-c { text-align: center; }  .u-ta-l { text-align: left; }
.u-nowrap { white-space: nowrap; }
.u-regular { font-weight: 400; } .u-bold { font-weight: 700; }
.u-pointer { cursor: pointer; }
.u-faded { opacity: .55; }
/* kleur op tekst: de statuskleuren, nooit een losse hex in de JS */
.u-red { color: var(--red); }       .u-amber { color: var(--amber); }
.u-green { color: var(--green); }   .u-blue { color: var(--blue); }
.u-orange { color: var(--orange); } .u-accent { color: var(--accent); }
.u-ink { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}