/* 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: het witte zijmenu (richting Rust, herontwerp 22-10-2026) ──
     Het zijmenu is een wit vlak met een lijn naar de inhoud, net als de
     panelen; alleen het actieve item draagt het accent. De tokens wijzen naar
     het gewone palet, zodat een klantkleur ook hier meekleurt. Tekst en icoon
     van het actieve item staan in --nav-accent: het accent met een vijfde
     inkt, zodat ze ook bij de voorinstellingen Groen en Amber 4,5:1 halen op
     het zachte accentvlak. Tot 22-10-2026 was dit de donkere balk van MyDockly. */
  --nav-bg:       var(--panel);
  --nav-bg-2:     var(--panel-2);
  --nav-line:     var(--line);
  --nav-ink:      var(--ink);
  --nav-ink-dim:  var(--ink-dim);
  --nav-active:   var(--accent-dim);
  --nav-accent:   color-mix(in srgb, var(--accent) 82%, var(--ink));
  --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"], input[type="url"], 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); }
.toast.warn  { border-left-color: var(--amber); }
@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; }
}