/* scan.css — scanner-PWA: mobile-first (360–430 px), gloves-friendly ≥44 px targets
   Lettergroottes komen uit de typestappen van tokens.css en afstanden uit de
   ruimteschaal; de raakvlakken (min-height, breedtes) blijven in pixels en
   zijn nergens kleiner geworden: handschoenen, één hand, een telefoon. */

/* ── het uiterlijk van Rust (herontwerp 22-10-2026) ──────────────────────
   Sinds 22-10-2026 volgt de scanner richting Rust van het herontwerp
   (docs/mockups/2026-10-herontwerp/), net als de schil van het portaal:
   een kopbalk in de paginakleur met een lijn eronder, een lichte
   blauwgrijze pagina, witte kaarten met een rand van 1 px en radius 12
   zonder schaduw, Figtree voor
   tekst en cijfers en IBM Plex Mono voor codes, allebei zelf gehost in
   assets/fonts (SIL OFL 1.1), zodat de handterminal offline dezelfde letter
   heeft. Het Rust-blauw is het accent en betekent alleen keuze en actie:
   het merkteken, een gekozen chip, een actieve snelknop, de cameraknop en
   de focusring; geen stroom draagt het. De tokens staan op
   body.scan, niet in :root; omgeving.js wordt op de handterminal niet
   geladen, dus er is geen klantaccent.

   Bewuste afwijkingen van Rust (docs/ONTWERPSYSTEEM.md, "Scanner"):
   [AFW-S.1] elke stroom houdt zijn eigen flowkleur: IN groen, UIT de
             amberinkt (#A85A06), VERPLAATSEN en ONTVANGEN het blauwgrijs van
             voor 22-10-2026 (#2B5A73 op #E0EBF1, los van het accent),
             TELLING de tweede inkt. Rust kleurt elke hoofdknop blauw; op de
             handterminal is de kleur het teken van de stroom.
   [AFW-S.2] kaart- en knopranden op #C8D0DB (1,56:1 op wit, even sterk als
             de cockpitlook) in plaats van #E2E6EC: de handterminal hangt
             vaak in fel licht.
   [AFW-S.3] vervallen op 22-10-2026: het woordmerk staat op de typestap
             title-sm, niet meer op een eigen maat.
   [AFW-S.4] raakvlakken 44 tot 104 px in plaats van de 36 tot 52 px van het
             ontwerp; velden op 17 px (iOS-zoomdrempel).
   [AFW-S.5] de kop is een balk (paginakleur, lijn eronder) en geen kop los
             op de pagina zoals in het ontwerp: op Home met de artikelzoeker
             blijft hij boven de lijst staan (sticky). */

/* ── letters (unicode-range zoals Google Fonts ze uitlevert) ────────────── */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens van de scanner ───────────────────────────────────────────────
   Eerst het palet van Rust (--ck-*, de namen van de cockpitlaag zijn
   gebleven), dan de scanner-eigen tokens (--sc-*), dan de gedeelde tokens
   van tokens.css die hier opnieuw gericht worden. Dit is het enige blok met
   kleurwaarden; elke regel hieronder spreekt een token aan. */
body.scan {
  --ck-font: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --ck-num: var(--ck-font);  /* cijfers in Figtree, met tabelcijfers (body.scan) */

  --ck-bg: #F4F6F9;          /* pagina achter de kaarten */
  --ck-panel: #FFFFFF;       /* kaart, rij, lichte knop, veld */
  --ck-panel-2: #EFF2F6;     /* subrij, stepper, ingedrukt */
  --ck-line: #E2E6EC;        /* haarlijn tussen rijen */
  --ck-line-strong: #C8D0DB; /* [AFW-S.2] kaartrand, knoprand */
  --ck-ink: #0F1A2B;
  --ck-ink-2: #3D4A5E;
  --ck-ink-dim: #55637A;
  --ck-pos: #0E7A4B;
  --ck-neg: #B42318;
  --ck-neg-bg: #FDECEA;
  --ck-warn-ink: #A85A06;
  --ck-warn-bg: #FFF3DC;
  --ck-warn-line: #F6DDB0;
  --ck-acc: #1D4ED8;         /* het Rust-blauw: merkteken, keuze, actieve knop, focus */
  --ck-acc-bg: #EAF0FF;
  --ck-wit: #FFFFFF;         /* tekst op een gevuld vlak en op de overlay */

  --ck-shadow-pop: 0 12px 32px rgba(15, 26, 43, .18);
  --ck-r: 8px;               /* knop, veld, chip */
  --ck-r-kaart: 12px;        /* kaart */
  --ck-r-kaart-binnen: 11px; /* kopband binnen de rand van 1 px */

  /* scanner-eigen */
  --sc-transfer: #2B5A73;               /* [AFW-S.1] flowkleur VERPLAATSEN en ONTVANGEN */
  --sc-transfer-bg: #E0EBF1;
  --sc-transfer-line: color-mix(in srgb, var(--sc-transfer) 30%, var(--sc-transfer-bg));
  --sc-pos-bg: color-mix(in srgb, var(--ck-pos) 8%, var(--ck-panel));  /* chip en keuze "op voorraad" */
  --sc-pos-line: color-mix(in srgb, var(--ck-pos) 30%, var(--sc-pos-bg));
  --sc-count: var(--ck-ink-2);          /* flowkleur TELLING */
  --sc-commit-ink: var(--ck-wit);       /* tekst op een gevulde knop */
  --sc-ok-ink: var(--ck-wit);           /* tekst op de groene bevestiging */
  --sc-overlay: color-mix(in srgb, var(--ck-ink) 92%, transparent);  /* camera- en netwerkscherm */
  --sc-overlay-ink: #CBD3DE;            /* hulptekst op de overlay */
  --sc-hairline: var(--ck-line);
  --sc-focus: var(--ck-acc);

  /* gedeelde tokens van tokens.css, hier opnieuw gericht: de componenten uit
     de tokenlaag (.btn, velden, .panel, .empty, .toast) volgen zo vanzelf */
  --bg: var(--ck-bg);
  --panel: var(--ck-panel);
  --panel-2: var(--ck-panel-2);
  --line: var(--ck-line-strong);
  --ink: var(--ck-ink);
  --ink-dim: var(--ck-ink-dim);
  --accent: var(--ck-acc);              /* focusring, .btn-primary en vinkjes (tokens.css) */
  --accent-ink: var(--ck-wit);
  --green: var(--ck-pos);
  --red: var(--ck-neg);
  --amber: var(--ck-warn-ink);
  --orange: var(--ck-warn-ink);         /* [AFW-S.1] flowkleur UIT */
  --blue: var(--sc-transfer);
  --font-head: var(--ck-font);
  --font-body: var(--ck-font);
  --radius: var(--ck-r-kaart);
  --radius-sm: var(--ck-r);
  --radius-panel: var(--ck-r-kaart);
  --radius-card: var(--ck-r-kaart);
  --radius-field: var(--ck-r);
  --radius-chip: var(--ck-r);
  --radius-badge: var(--ck-r);
  --radius-pill: var(--ck-r);           /* .btn wordt de lichte knop van Rust */
  --shadow-raised: none;
  --shadow-panel: none;
  --shadow-overlay: var(--ck-shadow-pop);
  --shadow: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
/* html krijgt in tokens.css height:100% en body min-height:100%: de pagina
   groeit met de inhoud, zodat de statusregel onder de lijst staat en niet
   eroverheen (dat was zo toen body hier ook height:100% kreeg) */
.scan-app {
  width: 100%;
  max-width: 480px;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding:
    var(--space-4)
    calc(var(--space-4) + env(safe-area-inset-right))
    calc(var(--space-4) + env(safe-area-inset-bottom))
    calc(var(--space-4) + env(safe-area-inset-left));
}
.sc-ico { display: block; flex: none; pointer-events: none; }

/* hidden always-focused input that receives DataWedge keystrokes */
#scan-trap {
  position: fixed;
  top: -100px;
  left: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
  pointer-events: none;
}

/* ── kopbalk: de paginakleur met een lijn eronder, over de volle breedte;
   een balk en geen losse kop omdat hij op Home sticky is [AFW-S.5] ──── */
.scan-top {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  background: var(--ck-bg);
  border-bottom: var(--sc-lijn) solid var(--ck-line-strong);
  color: var(--ck-ink);
}
.scan-top-in {
  width: 100%;
  max-width: 480px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 calc(var(--space-4) + env(safe-area-inset-right)) 0 calc(var(--space-4) + env(safe-area-inset-left));
}
/* het woordmerk: het merkteken van het portaal (W op het accent) en de
   naam op title-sm, "Scan" in het accent */
.scan-top h1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--text-title-sm);
  line-height: 1;
  font-weight: var(--weight-title-sm);
  letter-spacing: var(--tracking-title-sm);
  color: var(--ck-ink);
  white-space: nowrap;
}
.scan-top h1 b { color: var(--ck-acc); font-weight: var(--weight-title-sm); }
.scan-merk {
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--ck-r);
  background: var(--ck-acc);
  color: var(--ck-wit);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-heading);
  letter-spacing: 0;
}
.scan-user-wrap { margin-left: auto; position: relative; min-width: 0; }
.scan-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 44px; /* vingerdoel op de handscanner */
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-r);
  background: var(--ck-panel);
  color: var(--ck-ink-2);
  font-family: inherit;
  font-size: var(--text-body-sm);
  line-height: 1;
  cursor: pointer;
}
.scan-user:active { background: var(--ck-panel-2); }
.scan-user b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ck-ink);
  font-size: var(--text-body);
  font-weight: 600;
}
.scan-user .caret { color: var(--ck-ink-dim); transition: transform var(--duration-fast) var(--ease-standard); }
.scan-user[aria-expanded="true"] .caret { transform: rotate(180deg); }
.scan-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 40;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  color: var(--ink);
  text-align: left;
}
.scan-menu-head {
  display: grid;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sc-hairline);
  background: var(--panel-2);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.scan-menu-head b { font-weight: 600; }
.scan-menu-head span { font-size: var(--text-label); color: var(--ink-dim); text-transform: capitalize; }
.scan-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  min-height: 44px; /* vingerdoel */
}
.scan-menu-item .sc-ico { color: var(--ck-ink-2); }
.scan-menu-item:active, .scan-menu-item:hover { background: var(--panel-2); }
.scan-menu-item:disabled { opacity: .6; }
a.scan-menu-item { text-decoration: none; } /* menu-link (wachtwoord wijzigen) */

/* ── home ─────────────────────────────────────────────────────────────── */
.home-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.home-actions.is-enkel { grid-template-columns: 1fr; }
/* de vier stromen: een witte kaart met het icoon in een vlak van de
   flowkleur, zoals de tegels van Rust; titel in zinsvorm */
.action-btn {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--text-title-sm);
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-3) var(--space-4);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.action-btn .sym {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  margin-bottom: var(--space-2);
  border-radius: var(--ck-r);
  background: color-mix(in srgb, var(--accent) 12%, var(--ck-panel));
  color: var(--accent);
  line-height: 1;
}
.action-btn small { font-size: var(--text-label); line-height: var(--leading-label); font-weight: 400; color: var(--ink-dim); }
.action-btn:active { background: var(--panel-2); }
.action-in       { --accent: var(--green); }
.action-out      { --accent: var(--orange); }
.action-transfer { --accent: var(--blue); }
.action-count    { --accent: var(--sc-count); }

/* verwachte leveringen: een kaart met een witte kopregel en een haarlijn */
.panel.scan-expected { overflow: hidden; }
.panel.scan-expected > header {
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--panel);
  border-bottom: 1px solid var(--sc-hairline);
  border-radius: var(--ck-r-kaart-binnen) var(--ck-r-kaart-binnen) 0 0;
}
.panel.scan-expected > header h3 {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  font-weight: var(--weight-title);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.panel.scan-expected .exp-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--sc-hairline);
  cursor: pointer;
}
.panel.scan-expected .exp-line:last-child { border-bottom: 0; }
.panel.scan-expected .exp-line:active { background: var(--panel-2); }
.exp-line .what { min-width: 0; }
.exp-line .what b { display: block; font-size: var(--text-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-line .what span { font-size: var(--text-label); line-height: var(--leading-label); color: var(--ink-dim); }
/* aantallen groot en vet, met tabelcijfers; het bijschrift eronder */
.exp-line .rest, .exp-order .rest, .loc-zone-kop .rest {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--space-1) / 4);
  text-align: right;
  font-family: var(--ck-num);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.exp-line .rest small, .exp-order .rest small, .loc-zone-kop .rest small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 400;
  color: var(--ink-dim);
}

/* verwachte leveringen: kopregel per bestelling + uitgeklapte regels */
.panel.scan-expected .exp-order {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--sc-hairline);
  cursor: pointer;
}
.panel.scan-expected .exp-order:active { background: var(--panel-2); }
.exp-order .chev { display: flex; color: var(--ink-dim); width: 14px; flex: none; }
.exp-order .what { min-width: 0; }
.exp-order .what b { display: block; font-size: var(--text-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-order .what span { font-size: var(--text-label); line-height: var(--leading-label); color: var(--ink-dim); }
.panel.scan-expected .exp-line.exp-sub { padding-left: 38px; background: var(--panel-2); min-height: 48px; }
.panel.scan-expected .exp-line.exp-sub:active { background: var(--ck-line); }
.exp-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  border-top: 1px solid var(--sc-hairline);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.exp-more .sc-ico { color: var(--ck-ink-2); }
.exp-more:active { background: var(--panel-2); }
.exp-more:disabled { opacity: .6; }

/* status line */
.scan-status {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--ink-dim);
}
.scan-status .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); }
.scan-status.offline .dot { background: var(--red); }

/* ── flow screens ─────────────────────────────────────────────────────── */
/* de flowkleur zit in de balk van 3 px links, de titel blijft inkt (zinsvorm) */
.flow-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  box-shadow: inset 3px 0 0 var(--flow-accent, var(--ck-ink-2));
}
.flow-head .back {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.flow-head .back:active { background: var(--panel-2); }
.flow-head h2 {
  min-width: 0;
  font-size: var(--text-title-sm);
  line-height: var(--leading-title-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.flow-head .step-dim { display: block; font-size: var(--text-label); line-height: var(--leading-label); color: var(--ink-dim); font-weight: 400; }

.flow-in       { --flow-accent: var(--green); }
.flow-out      { --flow-accent: var(--orange); }
.flow-transfer { --flow-accent: var(--blue); }
.flow-count    { --flow-accent: var(--sc-count); }
.flow-receive  { --flow-accent: var(--blue); }

/* de scanzone van Rust: een gestippeld vlak in een tint van de flowkleur */
.scan-prompt {
  border: 2px dashed color-mix(in srgb, var(--flow-accent, var(--ck-ink-2)) 40%, var(--ck-panel));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--flow-accent, var(--ck-ink-2)) 6%, var(--ck-panel));
  padding: var(--space-6) var(--space-4);
  text-align: center;
  margin-bottom: var(--space-4);
}
.scan-prompt .big { display: flex; justify-content: center; margin-bottom: var(--space-2); color: var(--flow-accent, var(--ink)); }
.scan-prompt p { margin: 0; color: var(--ck-ink-2); font-size: var(--text-body-sm); }

/* invoervelden op 17px: onder de 16px zoomt iOS Safari bij focus in.
   De veldrand staat op de tweede inkt (3:1 op de kaart), de placeholder
   zonder doorzichtigheid: de handterminal hangt vaak in fel licht. */
body.scan input[type="text"], body.scan input[type="search"], body.scan input[type="number"], body.scan select {
  border-color: var(--ck-ink-2);
}
body.scan input::placeholder { color: var(--ink-dim); opacity: 1; }
/* de eigen wisknop staat naast het veld; het ingebouwde kruisje ging dubbel */
body.scan input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
body.scan label.field > span, body.scan .eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ck-ink-2);
}
.scan-manual { display: grid; gap: var(--space-3); }
.scan-manual input[type="search"] { min-height: 52px; font-size: var(--text-title-sm); }
.btn-cam { min-height: 52px; width: 100%; }

.result-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  width: 100%;
}
.result-item:active { background: var(--panel-2); }
.result-item .mono { color: var(--ink-dim); font-size: var(--text-label); }

/* article card: een witte kaart; de flowkleur staat al in de kop */
.art-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.art-card .sku { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-dim); }
.art-card h3 { font-size: var(--text-title-sm); line-height: var(--leading-title-sm); font-weight: 600; margin: calc(var(--space-1) / 2) 0 var(--space-3); }
.art-card .total { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-dim); margin-top: var(--space-2); }

/* locatiechips: gekozen = gevuld met het accent, zoals een actieve tab in Rust */
.loc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 500;
  cursor: pointer;
}
.loc-chip:active { background: var(--panel-2); }
.loc-chip .q { color: var(--ink-dim); font-size: var(--text-label); }
.loc-chip.sel {
  border-color: var(--ck-acc);
  background: var(--ck-acc);
  color: var(--ck-wit);
  font-weight: 600;
}
.loc-chip.sel .q { color: var(--ck-acc-bg); }

/* locatiekeuze per zone: dezelfde kop als een bestelling in Verwachte
   leveringen (chevron, naam, aantal rechts); de chips eronder klappen in */
.loc-kiezer { display: grid; gap: var(--space-2); }
.loc-voorstel { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: var(--sc-lijn) solid var(--sc-hairline); }
.loc-zone { border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--radius-sm); background: var(--panel); }
.loc-zone-kop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--sc-raakvlak);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.loc-zone-kop:active { background: var(--panel-2); }
.loc-zone-kop .chev { display: flex; color: var(--ink-dim); flex: none; }
.loc-zone-kop b { min-width: 0; font-size: var(--text-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-zone > .loc-chips { padding: 0 var(--space-4) var(--space-3); }

/* qty stepper: grijze knoppen zoals in Rust, het getal groot en vet */
.qty-step {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.qty-step button {
  min-height: 64px;
  font-family: inherit;
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
}
.qty-step button:active { background: var(--ck-line); }
.qty-step input {
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  font-family: var(--ck-num);
  font-size: var(--text-display);
  font-weight: var(--weight-title);
}

/* reference quick chips */
.ref-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ref-chips button {
  min-height: 44px; /* vingerdoel */
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  cursor: pointer;
}
.ref-chips button:active { background: var(--panel-2); }

.flow-field { margin-bottom: var(--space-3); }
.flow-field input, .flow-field select { min-height: 52px; font-size: var(--text-title-sm); }

/* big commit button: de flowkleur gevuld, witte tekst, zinsvorm [AFW-S.1] */
.btn-commit {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--flow-accent, var(--ck-ink));
  color: var(--sc-commit-ink);
  font-family: var(--font-head);
  font-size: var(--text-title-sm);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  margin-top: var(--space-2);
}
.btn-commit:disabled { opacity: .6; }
.btn-commit:active { filter: brightness(1.1); }
/* "Volgende scan" op het successcherm draagt dezelfde flowkleur als de
   boeking ervoor (klasse is-volgende, geen eigen kleur) */

/* de lichte knop uit tokens.css (.btn) op scannermaat: 52 of 56 px hoog,
   17 px tekst, over de volle breedte */
body.scan .btn { font-weight: 500; letter-spacing: 0; }
body.scan .btn:disabled { opacity: .6; }
.btn-scan { min-height: 52px; width: 100%; font-size: var(--text-title-sm); font-weight: 600; }
.btn-scan-lg { min-height: 56px; }

/* count list: per regel naam, aantal en Boek. De naam is een knop: een tik
   klapt de acties uit over de volle breedte (tweede regel), zodat er op
   360 px geen derde knop naast het veld hoeft. Na verwijderen blijft de
   regel als grijs verslag staan (div.what, geen acties). */
.count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  margin-bottom: var(--space-2);
}
.count-row .what {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.count-row div.what { cursor: default; }
.count-row .what b { display: block; font-size: var(--text-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-row .what span { display: block; font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-dim); }
/* de chevron staat rechts in het tikvlak, verticaal in het midden, ook als
   de subregel afbreekt; de knop houdt er ruimte voor vrij */
.count-row button.what { position: relative; padding-right: 22px; }
.count-row .what svg {
  position: absolute;
  right: 0;
  top: 50%;
  color: var(--ck-ink-2);
  transform: translateY(-50%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.count-row.is-open .what svg { transform: translateY(-50%) rotate(180deg); }
.count-row.is-nieuw { box-shadow: inset 3px 0 0 var(--sc-count); }
.count-row.is-actief { border-color: var(--ck-acc); background: var(--panel-2); }
.count-row.is-verwijderd { background: var(--panel-2); color: var(--ink-dim); }
.count-row.is-verwijderd .what b { color: var(--ink-dim); }
.count-row input {
  width: 84px;
  min-height: 52px;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  text-align: center;
  font-family: var(--ck-num);
  font-size: var(--text-title);
  font-weight: 600;
}
.count-row .btn { min-height: 52px; font-size: var(--text-body); font-weight: 600; }
.delta-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-body-sm); font-weight: 600; }
.delta-badge.pos { color: var(--green); }
.delta-badge.neg { color: var(--red); }
.delta-badge.zero { color: var(--ink-dim); }
.delta-badge.is-weg {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
}

/* telling: uitgeklapte acties, bevestiging in de regel, meldingen, zoeken */
.count-acties {
  flex-basis: 100%;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sc-hairline);
}
.count-acties > p { margin: 0; font-size: var(--text-body-sm); color: var(--ink-dim); }
/* de bevestiging staat in de regel; de knoppen onder de redenen, zodat een
   dubbeltik op "Verwijderen van" nooit op de bevestigknop valt */
.count-bevestig { display: grid; gap: var(--space-2); margin-bottom: 0; }
.count-bevestig h4, .count-bevestig p { margin: 0; }
body.scan .count-bevestig .btn-danger { background: var(--red); border-color: var(--red); color: var(--sc-commit-ink); }
.btn-weg {
  min-height: 52px;
  width: 100%;
  background: var(--panel);
  border-color: var(--ck-neg);
  color: var(--ck-neg);
  font-size: var(--text-body);
  font-weight: 600;
}
/* redenen zijn tekst, geen codes: de chip van de locatiekeuze in de broodletter */
.count-redenen .loc-chip {
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}
.count-fout {
  flex-basis: 100%;
  border: 1px solid var(--ck-neg);
  background: var(--ck-neg-bg);
  color: var(--ck-neg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
}
.count-stop { display: grid; gap: var(--space-2); }
.count-stop h4 { margin: 0; }
/* het zoekveld van .scan-search, zonder de paneelrand (twee klassen: wint van .scan-search) */
.scan-search.count-zoek { padding: 0; border-bottom: 0; margin-bottom: var(--space-3); }
.count-teller { margin-bottom: var(--space-2); border-radius: var(--radius-sm); }
#count-add .result-list { margin-top: var(--space-2); margin-bottom: var(--space-3); }
#count-add .result-item > span { min-width: 0; }
#count-add .result-item .sc-ico { flex: none; color: var(--ck-ink-2); }

/* success screen */
.success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-3);
}
.success.is-compact { flex: 0; padding: 0; }
.success .check {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sc-commit-ink);
  background: var(--green);
  animation: pop var(--duration-base) var(--ease-standard);
}
.success.err .check { background: var(--red); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.success h2 { font-size: var(--text-title); line-height: var(--leading-title); font-weight: 600; }
.success p { margin: 0; color: var(--ink-dim); font-size: var(--text-body); }
.success .btns { display: grid; gap: var(--space-3); width: 100%; margin-top: var(--space-4); }

/* error banner in flows */
.flow-error {
  border: 1px solid var(--ck-neg);
  background: var(--ck-neg-bg);
  color: var(--ck-neg);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  margin-bottom: var(--space-3);
}

/* match banner (IN flow, expected match): het blauwgrijs van ONTVANGEN
   [AFW-S.1]; de variant is-waarschuwing draagt de amberwaarschuwing */
.match-banner {
  border: 1px solid var(--sc-transfer-line);
  background: var(--sc-transfer-bg);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.match-banner h4 { font-size: var(--text-body); line-height: var(--leading-body); color: var(--sc-transfer); font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: var(--space-1); }
.match-banner p { margin: 0 0 var(--space-3); font-size: var(--text-body-sm); }
.match-banner p:last-child { margin-bottom: 0; }
.match-banner .result-list { margin-top: 0; }
.match-banner.is-waarschuwing { border-color: var(--ck-warn-line); background: var(--ck-warn-bg); }
.match-banner.is-waarschuwing h4 { color: var(--ck-warn-ink); }
.match-banner.is-kort { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }

/* red flash on failure */
#flash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
}
#flash.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* floating camera button: phone users can scan from every screen. Zodra de
   handterminal zelf een code heeft aangeleverd (DataWedge) verdwijnt hij:
   daar dekte hij de boekknop af en de camera blijft in de flows bereikbaar. */
.cam-fab {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 80;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--ck-acc);
  color: var(--ck-wit);
  cursor: pointer;
  box-shadow: var(--ck-shadow-pop);
  display: grid;
  place-items: center;
}
.cam-fab:active { filter: brightness(.9); transform: scale(.96); }
body.scan.heeft-scanner .cam-fab { display: none; }

/* camera overlay */
#cam-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--sc-overlay);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  gap: var(--space-4);
}
#cam-overlay.open { display: flex; }
#cam-overlay, #offline-overlay { overscroll-behavior: contain; }
#cam-overlay .btn, #offline-overlay .btn { max-width: 420px; }
#qr-reader { width: min(92vw, 420px); }
#qr-reader video { border-radius: var(--radius); }

/* offline blocking overlay */
#offline-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--sc-overlay);
  color: var(--ck-wit);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8);
}
#offline-overlay.open { display: flex; }
#offline-overlay .sym { display: flex; color: var(--ck-wit); }
#offline-overlay h2 { font-size: var(--text-title); line-height: var(--leading-title); font-weight: 600; }
#offline-overlay .dim { color: var(--sc-overlay-ink); }

/* ── zoeken in de lijst Verwachte leveringen ──────────────────────────────
   Eén hand, handschoenen, een telefoon: het zoekveld staat boven de lijst,
   is net zo hoog als de andere invoervelden en houdt zijn plek als de lijst
   leeg wordt. Het scanveld blijft ondertussen gewoon luisteren. */
.scan-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sc-hairline);
}
.scan-search input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  font-size: var(--text-title-sm);
}
.scan-search .wis {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ck-ink-2);
  cursor: pointer;
}
.scan-search .wis:active { background: var(--panel-2); }
.scan-search .wis[hidden] { display: none; } /* eigen display-regel, dus expliciet */
/* de teller bij een zoekterm: de amberwaarschuwing zegt dat je naar een deel van de lijst kijkt */
.scan-telling {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: 500;
  color: var(--ck-warn-ink);
  background: var(--ck-warn-bg);
  border-bottom: 1px solid var(--sc-hairline);
}
body.scan .empty::before { content: none; } /* geen OS-teken op de handterminal */

/* ── groene bevestiging na een gelezen code (scan of handmatige invoer) ───
   Piepen en trillen gaan in een lawaaiige werkplaats verloren; dit is het
   zichtbare bewijs, met de code of het artikel erin. Blokkeert niets: de
   balk vangt geen tikken en verdwijnt vanzelf. */
.scan-ok {
  position: fixed;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 210;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(92vw, 420px);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--green);
  color: var(--sc-ok-ink);
  box-shadow: var(--shadow-overlay);
  pointer-events: none;
  transform: translateX(-50%);
}
.scan-ok .mark { flex: none; display: flex; }
.scan-ok .txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 600;
}
.scan-ok.go { animation: scanok var(--duration-base) var(--ease-standard); }
/* het element werkt met het hidden-attribuut; een eigen display-regel wint
   anders van de browserstandaard en de pil blijft leeg in beeld staan */
.scan-ok[hidden] { display: none; }
@keyframes scanok { from { transform: translateX(-50%) translateY(-12px); opacity: 0; } }

/* ── aanraken en focus ───────────────────────────────────────────────────
   touch-action: manipulation haalt de wachttijd van dubbeltik-zoom weg, wat
   op een handterminal direct voelbaar is. Elke knop die geen <button> van
   tokens.css is krijgt hier zijn eigen zichtbare focusring (het accent,
   zoals in Rust), zodat toetsenbord en schermlezer niet blind door het
   scherm gaan. */
.action-btn, .result-item, .exp-order, .exp-line, .exp-more, .loc-chip, .loc-zone-kop,
.qty-step button, .btn-commit, .cam-fab, .scan-user, .scan-menu-item,
.scan-search .wis, .flow-head .back, .ref-chips button,
.count-row .what, .count-row .btn, .btn-weg,
.artikel-snel button, .artikel-icoonknop, .artikel-rij, .artikel-kort, .artikel-verwacht,
.artikel-meer, .artikel-resultaatkop button, .artikel-geen button, .artikel-begrepen button,
.artikel-acties button, .artikel-wacs button, .artikel-filterblad button {
  touch-action: manipulation;
}
.action-btn:focus-visible, .result-item:focus-visible, .exp-order:focus-visible,
.exp-line:focus-visible, .exp-more:focus-visible, .loc-chip:focus-visible, .loc-zone-kop:focus-visible,
.qty-step button:focus-visible, .btn-commit:focus-visible, .cam-fab:focus-visible,
.scan-user:focus-visible, .scan-menu-item:focus-visible, .scan-search .wis:focus-visible,
.flow-head .back:focus-visible, .ref-chips button:focus-visible,
.count-row .what:focus-visible, .btn-weg:focus-visible,
.artikel-snel button:focus-visible, .artikel-icoonknop:focus-visible, .artikel-rij:focus-visible,
.artikel-kort:focus-visible, .artikel-verwacht:focus-visible, .artikel-meer:focus-visible,
.artikel-resultaatkop button:focus-visible, .artikel-geen button:focus-visible,
.artikel-begrepen button:focus-visible, .artikel-acties button:focus-visible,
.artikel-wacs button:focus-visible, .artikel-filterblad button:focus-visible {
  outline: var(--focus-width) solid var(--sc-focus);
  outline-offset: var(--focus-offset);
}

/* ── minder beweging ─────────────────────────────────────────────────────
   Wie beweging heeft uitgezet, krijgt dezelfde informatie zonder animatie:
   het vinkje, de flits en de stempel verschijnen gewoon direct. */
@media (prefers-reduced-motion: reduce) {
  /* alleen de beweging gaat eruit; de rode foutflits is een korte
     doorzichtigheid zonder verplaatsing en blijft dus staan, anders verdwijnt
     de enige zichtbare foutmelding */
  .scan-ok.go, .success .check { animation: none; }
  .cam-fab:active { transform: none; }
  .scan-user .caret { transition: none; }
  .count-row .what svg { transition: none; }
}

/* Artikelzoeker: bestaande typestappen en ruimteschaal, raakvlak 48 + 4.
   Indeling volgens het ontwerpcanvas "Werkplaats Scan – artikelzoeker";
   kleuren alleen uit het tokenblok hierboven. Een haarlijn is een kwart
   van --space-1, een knop met handschoen minstens 44 (40 + 4). */
body.scan {
  --sc-raakvlak: calc(var(--space-12) + var(--space-1));
  --sc-raakvlak-min: calc(var(--space-10) + var(--space-1));
  --sc-artikelbreedte: calc(var(--space-16) * 7.5);
  --sc-lijn: calc(var(--space-1) / 4);
}
.scan-top:has(.artikel-kop) { flex-direction: column; align-items: center; }
/* Op Home blijven zoekveld en statusregel in beeld bij een lange lijst. */
body.artikel-home .scan-top { position: sticky; top: 0; z-index: 30; }
body.artikel-home .scan-status { position: sticky; bottom: 0; z-index: 20; margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--ck-panel); border-top: var(--sc-lijn) solid var(--ck-line-strong); }
.artikel-kop { width: 100%; max-width: var(--sc-artikelbreedte); padding: 0 var(--space-4) var(--space-3); }
.artikel-kop[hidden] { display: none; }
.artikel-zoekbalk { display: flex; align-items: center; gap: var(--space-2); }
.artikel-zoekbalk .scan-search { position: relative; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.artikel-loep { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ck-ink-2); pointer-events: none; }
.artikel-zoekbalk .wis { position: absolute; right: 0; top: 0; border: 0; background: transparent; }
.artikel-zoekbalk input { min-height: var(--sc-raakvlak); padding-left: var(--space-10); padding-right: var(--space-12); }
/* camera en spraak naast het veld laten op de TC22 weinig ruimte voor de hint */
.artikel-zoekbalk input::placeholder { font-size: var(--text-body); }
.artikel-zoekbalk input:not(:placeholder-shown) { border-color: var(--ck-acc); box-shadow: inset 0 0 0 var(--sc-lijn) var(--ck-acc); }
.artikel-icoonknop { display: grid; place-items: center; min-width: var(--sc-raakvlak); min-height: var(--sc-raakvlak); background: var(--ck-panel); color: var(--ck-ink); border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r); }
.artikel-icoonknop:active { background: var(--ck-panel-2); }
.artikel-icoonknop svg { width: var(--space-6); height: var(--space-6); }
#spraak-status { margin: var(--space-2) 0 0; color: var(--ck-ink-2); font-size: var(--text-body); }
.artikel-home .cam-fab { display: none; }
/* Filters en snelknoppen in de kopbalk, horizontaal scrollbaar; aan = het accent. */
.artikel-snel { display: flex; gap: var(--space-2); overflow-x: auto; margin: var(--space-3) calc(-1 * var(--space-4)) 0; padding: 0 var(--space-4); scrollbar-width: none; }
.artikel-snel::-webkit-scrollbar { display: none; }
.artikel-snel button { flex: none; white-space: nowrap; min-height: var(--sc-raakvlak-min); padding: var(--space-1) var(--space-3); border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r); background: var(--ck-panel); color: var(--ck-ink-2); font: inherit; font-size: var(--text-body); font-weight: 600; }
.artikel-snel button[aria-pressed="true"] { background: var(--ck-acc); border-color: var(--ck-acc); color: var(--ck-wit); }
.artikel-snel button:active { background: var(--ck-panel-2); }
.artikel-snel button[aria-pressed="true"]:active { background: var(--ck-acc); filter: brightness(.85); }
/* tikbevestiging: body.scan zet de tap-highlight van de browser uit */
.artikel-rij:active, .artikel-kort:active, .artikel-verwacht:active, .artikel-resultaatkop button:active, .artikel-geen button:active, .artikel-meer:active, .artikel-acties > div button:not(.is-verplaatsen):active, .artikel-filterblad button:not([aria-pressed="true"]):not(.btn-commit):active { background: var(--ck-panel-2); }
/* gekleurde knoppen houden hun kleur; Verplaatsen en Toon resultaten worden iets
   donkerder (contrast blijft ruim), chips krijgen een rand in hun eigen kleur
   zodat tekst en vlak niet samen donkerder worden */
.artikel-acties > div button.is-verplaatsen:active, .artikel-filterblad .btn-commit:active { filter: brightness(.94); }
.artikel-begrepen button:active { box-shadow: inset 0 0 0 calc(var(--sc-lijn) * 2) currentColor; }
.artikel-begrepen button, .artikel-resultaatkop button, .artikel-geen button, .artikel-meer, .artikel-acties > div button, .artikel-wacs button, .artikel-filterblad button, .artikel-verwacht {
  min-height: var(--sc-raakvlak); padding: var(--space-2) var(--space-3); border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r); background: var(--ck-panel); color: var(--ck-ink); font: inherit;
}
/* Home zonder zoektekst: vier compacte tegels, Laatst bekeken, Verwachte leveringen. */
.artikel-tegels { gap: var(--space-2); }
.artikel-tegels .action-btn { min-height: calc(var(--space-16) + var(--space-3)); flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-color: var(--ck-line-strong); box-shadow: none; font-size: var(--text-body-lg); }
.artikel-tegels .action-btn .sym { flex: none; width: calc(var(--space-8) + var(--space-1)); height: calc(var(--space-8) + var(--space-1)); margin: 0; }
.artikel-tegels .action-btn > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.artikel-tegels .action-btn small { display: block; }
.artikel-sectie { margin: var(--space-5) 0; }
.artikel-sectie h2, .artikel-geen h2 { font-size: var(--text-title-sm); line-height: var(--leading-title-sm); margin: 0 0 var(--space-3); }
.artikel-sectie p { margin: var(--space-2) 0; }
/* Kaart met een witte kopregel en een haarlijn, zoals de panelen in Rust. */
.artikel-kaart { margin: var(--space-4) 0; border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r-kaart); background: var(--ck-panel); overflow: hidden; }
.artikel-kaart > h2 { margin: 0; padding: var(--space-3); background: var(--ck-panel); border-bottom: var(--sc-lijn) solid var(--ck-line); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-title); color: var(--ck-ink); }
.artikel-kaart > p { margin: 0; padding: var(--space-3); }
.artikel-kort { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--sc-raakvlak); padding: var(--space-3); border: 0; border-bottom: var(--sc-lijn) solid var(--ck-line); background: transparent; color: var(--ck-ink); font: inherit; text-align: left; }
.artikel-kort:last-child { border-bottom: 0; }
.artikel-kort-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.artikel-kort-tekst b { font-size: var(--text-body-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artikel-kort-tekst .mono { font-size: var(--text-label); line-height: var(--leading-label); color: var(--ck-ink-dim); overflow-wrap: anywhere; }
.artikel-kort-cijfers { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--space-1) / 2); }
.artikel-kort-cijfers strong { font-family: var(--ck-num); font-size: var(--text-title-sm); line-height: var(--leading-title-sm); white-space: nowrap; }
.artikel-kort-cijfers span { font-size: var(--text-label); line-height: var(--leading-label); font-weight: 600; white-space: nowrap; }
/* Resultaten: rijen in één kaart. */
.artikel-lijst { border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r-kaart); background: var(--ck-panel); overflow: hidden; }
.artikel-rij { display: flex; width: 100%; gap: var(--space-3); text-align: left; padding: var(--space-3); border: 0; border-bottom: var(--sc-lijn) solid var(--ck-line); background: var(--ck-panel); color: var(--ck-ink); font: inherit; }
.artikel-rij:last-child { border-bottom: 0; }
.artikel-omschrijving { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.artikel-omschrijving > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-body-lg); line-height: var(--leading-body-sm); font-weight: 600; overflow-wrap: anywhere; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.artikel-meta .mono, .artikel-leverancier { font-size: var(--text-label); line-height: var(--leading-label); color: var(--ck-ink-2); overflow-wrap: anywhere; }
.artikel-leverancier { color: var(--ck-ink-dim); }
.artikel-loc { display: inline-block; padding: calc(var(--space-1) / 4) var(--space-2); border: var(--sc-lijn) solid var(--ck-line); border-radius: var(--ck-r); background: var(--ck-panel-2); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 600; overflow-wrap: anywhere; }
.artikel-reden { font-size: var(--text-label); line-height: var(--leading-label); font-weight: 600; color: var(--ck-warn-ink); }
.artikel-cijfers { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); max-width: 40%; flex-shrink: 0; }
.artikel-cijfers strong { font-family: var(--ck-num); font-size: var(--text-title); line-height: var(--leading-title); white-space: nowrap; }
.artikel-cijfers > span { font-size: var(--text-label); line-height: var(--leading-label); font-weight: 600; text-align: right; }
.artikel-voorraad { color: var(--ck-pos); }
.artikel-leeg { color: var(--ck-neg); }
.artikel-amber { color: var(--ck-warn-ink); }
.artikel-dim { color: var(--ck-ink-dim); }
/* "Begrepen als": een band direct onder de kopbalk, chips met kruisje. */
.artikel-begrepen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3); padding: var(--space-2) var(--space-4); background: var(--ck-panel); border-bottom: var(--sc-lijn) solid var(--ck-line); font-size: var(--text-label); font-weight: 600; color: var(--ck-ink-dim); }
.artikel-begrepen > div { display: contents; }
.artikel-fout ~ #artikel-resultaten .artikel-begrepen { margin-top: 0; } /* niet over een foutmelding heen */
.artikel-begrepen button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--sc-raakvlak-min); background: var(--ck-acc-bg); border-color: color-mix(in srgb, var(--ck-acc) 30%, var(--ck-acc-bg)); color: var(--ck-acc); font-weight: 600; }
.artikel-begrepen button.is-voorraad { background: var(--sc-pos-bg); border-color: var(--sc-pos-line); color: var(--ck-pos); }
/* Alleen voor schermlezers: het aantal treffers als vaste statusregel. */
.artikel-sr { position: absolute; width: var(--sc-lijn); height: var(--sc-lijn); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.artikel-resultaatkop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-body-sm); color: var(--ck-ink-2); }
.artikel-resultaatkop b { color: var(--ck-ink); }
.artikel-resultaatkop button { min-height: var(--sc-raakvlak-min); font-size: var(--text-body-sm); font-weight: 600; }
.artikel-geen { padding: var(--space-5) var(--space-4); border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r-kaart); background: var(--ck-panel); }
.artikel-geen > p { margin: 0 0 var(--space-3); color: var(--ck-ink-2); }
.artikel-geen > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.artikel-geen button { background: var(--ck-panel-2); font-weight: 600; }
.artikel-geen button:active { background: var(--ck-line); }
/* zoeken buiten het magazijn: de catalogus op de server en een inactief artikel met zijn exacte code */
.artikel-melding { margin: var(--space-2) 0; font-size: var(--text-body-sm); }
.artikel-catalogus h2, .artikel-inactief h2 { color: var(--ck-ink-2); }
.artikel-inactief p.artikel-dim { font-size: var(--text-body-sm); }
.artikel-inactief-melding { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r-kaart); background: var(--ck-panel); font-weight: 600; }
.artikel-meer, .artikel-verwacht { width: 100%; margin-top: var(--space-3); }
.artikel-verwacht { display: flex; justify-content: space-between; align-items: center; text-align: left; border-radius: var(--ck-r-kaart); font-weight: 600; }
.artikel-verwacht .sc-ico { color: var(--ck-ink-2); }
.artikel-buiten .artikel-rij:last-child { border-bottom: 0; }
/* Artikelscherm. */
.artikel-gescand { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--ck-r); background: var(--ck-pos); color: var(--ck-wit); font-size: var(--text-label); font-weight: 700; }
.artikel-detailkop { padding: var(--space-4); }
.artikel-detailkop h1 { font-size: var(--text-title); line-height: var(--leading-title); margin: 0 0 var(--space-1); }
.artikel-kaart.artikel-detailkop > p { margin: calc(var(--space-1) / 2) 0; padding: 0; font-size: var(--text-body-sm); }
.artikel-detailkop p.mono { color: var(--ck-ink-2); }
.artikel-detailkop p.artikel-leeg { font-weight: 600; }
.artikel-totalen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--sc-lijn) solid var(--ck-line); }
.artikel-totalen > div { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.artikel-totalen > div:last-child { align-items: flex-end; text-align: right; }
.artikel-totalen strong { font-family: var(--ck-num); font-size: var(--text-display); line-height: var(--leading-display); }
.artikel-totalen span { color: var(--ck-ink-dim); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-label); }
.artikel-totalen > div:last-child > span:last-child { font-weight: 400; font-size: var(--text-body-sm); }
.artikel-inkoop { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--ck-r); background: var(--ck-panel-2); font-size: var(--text-body-sm); color: var(--ck-ink-2); }
.artikel-inkoop > span:first-of-type { flex: 1; }
.artikel-inkoop b { color: var(--ck-ink); }
.artikel-locatieregel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-bottom: var(--sc-lijn) solid var(--ck-line); }
.artikel-locatieregel:last-of-type { border-bottom: 0; }
.artikel-locatieregel .mono { font-size: var(--text-title-sm); font-weight: 600; }
.artikel-locatieregel b { font-family: var(--ck-num); font-size: var(--text-title-sm); }
.artikel-wacs { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-top: var(--sc-lijn) solid var(--ck-warn-line); background: var(--ck-warn-bg); color: var(--ck-warn-ink); font-size: var(--text-body-sm); }
.artikel-wacs > span { flex: 1; min-width: 0; }
.artikel-wacs button { color: inherit; border-color: currentColor; background: transparent; font-weight: 600; }
.artikel-acties { margin-top: var(--space-4); }
.artikel-acties .btn-commit { width: 100%; margin: 0; }
.artikel-acties > div { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.artikel-acties > div button { flex: 1; font-weight: 700; }
.artikel-acties > div button.is-verplaatsen { background: var(--sc-transfer-bg); border-color: var(--sc-transfer); color: var(--sc-transfer); }
.scan-status.verouderd { color: var(--ck-warn-ink); }
.scan-status.verouderd .dot { background: var(--ck-warn-ink); }
/* Filterblad: een blad van onderen, de knop Toon resultaten blijft in beeld. */
.artikel-filterblad { width: 100%; max-width: var(--sc-artikelbreedte); max-height: 92dvh; margin: auto auto 0; padding: var(--space-4) var(--space-4) 0; border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r-kaart) var(--ck-r-kaart) 0 0; background: var(--ck-panel); color: var(--ck-ink); overflow: auto; }
.artikel-filterblad:focus { outline: none; }
/* rijen in een kaart met overflow: hidden krijgen de ring binnen de rand */
.artikel-rij:focus-visible, .artikel-kort:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
.artikel-filterblad::backdrop { background: var(--sc-overlay); }
.artikel-filterblad header { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: var(--sc-lijn) solid var(--ck-line); }
.artikel-filterblad h2 { flex: 1; font-size: var(--text-title); margin: 0; }
.artikel-filterblad header button { min-width: var(--sc-raakvlak); display: grid; place-items: center; }
.artikel-filterblad header .artikel-link { border: 0; background: transparent; color: var(--ck-acc); font-weight: 600; }
.artikel-filterblad fieldset { border: 0; margin: var(--space-5) 0; padding: 0; min-width: 0; }
.artikel-filterblad legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-label); color: var(--ck-ink-2); }
.artikel-prijsvelden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.artikel-prijsvelden label { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--text-body-sm); color: var(--ck-ink-2); }
.artikel-filterblad input, .artikel-filterblad select { width: 100%; min-height: var(--sc-raakvlak); }
.artikel-filterblad button[aria-pressed="true"] { background: var(--ck-acc); border-color: var(--ck-acc); color: var(--ck-wit); }
.artikel-banden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.artikel-banden button { padding: var(--space-1); font-size: var(--text-body-sm); font-weight: 600; }
.artikel-segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--sc-lijn) solid var(--ck-line-strong); border-radius: var(--ck-r); overflow: hidden; }
.artikel-filterblad .artikel-segment button { border: 0; border-right: var(--sc-lijn) solid var(--ck-line-strong); border-radius: 0; font-weight: 600; }
.artikel-filterblad .artikel-segment button:last-child { border-right: 0; }
.artikel-filterblad .artikel-segment button[data-voorraad=""][aria-pressed="true"] { background: var(--ck-panel-2); color: var(--ck-ink); }
.artikel-filterblad .artikel-segment button[data-voorraad="ja"][aria-pressed="true"] { background: var(--sc-pos-bg); color: var(--ck-pos); }
.artikel-filterblad .artikel-segment button[data-voorraad="nee"][aria-pressed="true"] { background: var(--ck-neg-bg); color: var(--ck-neg); }
.artikel-zones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.artikel-zones button { min-width: var(--sc-raakvlak); font-weight: 600; }
.artikel-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--sc-raakvlak); border-bottom: var(--sc-lijn) solid var(--ck-line); font-size: var(--text-body-lg); }
.artikel-check input[type="checkbox"] { flex: none; width: var(--space-6); height: var(--space-6); min-height: 0; accent-color: var(--ck-acc); }
.artikel-check span:nth-of-type(1) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.artikel-check .mono { color: var(--ck-ink-dim); font-size: var(--text-body-sm); }
#filter-meer-lev { width: 100%; margin-top: var(--space-2); }
#filter-fout { margin: 0 0 var(--space-2); font-weight: 600; }
.artikel-filterblad input[aria-invalid] { border-color: var(--ck-neg); box-shadow: inset 0 0 0 var(--sc-lijn) var(--ck-neg); }
.artikel-filterblad footer { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: var(--sc-lijn) solid var(--ck-line); background: var(--ck-panel); }
.artikel-filterblad .btn-commit { width: 100%; min-height: calc(var(--space-12) + var(--space-3)); margin: 0; background: var(--ck-acc); color: var(--ck-wit); }