/* DE BOUWDOOS — één stylesheet, vaste waarden
   ============================================================================

   Hier staan de waarden waarmee elk scherm straks herbouwd wordt. Niets anders:
   geen schermspecifieke regels, geen uitzonderingen, geen "even dit ene geval".

   WAAROM ZO WEINIG WAARDEN. De doorlichting vond in de app 41 bestanden met
   eigen kleuren, lettergroottes en radii — 9,5px naast 10,5px, drie radii die
   elkaar tegenspraken, accenten die per scherm verschilden. Dat is niet erg
   omdat het lelijk is, maar omdat je dan niet meer kúnt zien of twee schermen
   hetzelfde bedoelen. Eén ladder, vier lettergroottes, één accent.

   DE WAARDEN ZIJN GEMETEN, NIET GEKOZEN. Ze komen uit de opdracht en sluiten
   aan op wat de app al had (--gray, --primary, --secondary, de ladder
   6/10/16/24/32 uit tests/knophierarchie.test.js). Waar de skill
   ontwerpprincipes iets anders zegt wint de skill — behalve bij deze getallen,
   die zijn bewust zo vastgelegd.

   NIEUWE SCHERMEN GEBRUIKEN ALLEEN VARIABELEN. tests/bouwdoos-waarden.test.js
   bewaakt dat: een letterlijke kleur, font-size, radius of schaduw in een
   stylesheet die niet op de uitzonderingslijst staat, maakt de test rood. Die
   lijst wordt korter bij elk herbouwd scherm en nooit langer.
*/

:root {
  /* ---- Kleur ------------------------------------------------------------
     Eén accent. Verder grijstinten plus drie semantische paren voor pillen.
     Betekenis nooit alleen met kleur: bij elke pil hoort een woord of icoon
     (ontwerpprincipes §4). */
  --achtergrond: #F8F9FA;      /* de pagina; bestond al als --gray */
  --vlak: #FFFFFF;             /* kaarten, zijbalk, panelen */
  --tekst: #17223A;            /* navy, ALLEEN voor tekst — nooit als vlak */
  --tekst-zacht: #6B7280;      /* labels, bijschriften, tabelkoppen */
  --lijn: #E5E7EB;             /* scheidingen; kaarten hebben geen rand */
  --accent: #2864AE;           /* actief, primaire knop, kaartgetal */
  --accent-licht: #EAF1FA;     /* actieve chip, geselecteerde rij */

  /* De drie paren: achtergrond-100 + tekst-800, zodat het contrast klopt. */
  --goed-vlak: #DCFCE7;
  --goed-tekst: #166534;
  --letop-vlak: #FEF3C7;
  --letop-tekst: #92400E;
  --fout-vlak: #FEE2E2;
  --fout-tekst: #991B1B;

  /* ---- Tekst ------------------------------------------------------------
     Systeemfont blijft. Vier maten, plus 24 voor het kaartgetal. Nooit kleiner
     dan 11: 9,5 en 10,5 zijn hiermee verdwenen. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tekst-kop: 20px;
  --tekst-basis: 14px;
  --tekst-tabel: 13px;
  --tekst-bijschrift: 11px;
  --tekst-kaartgetal: 24px;

  /* ---- Afstand ----------------------------------------------------------
     De ladder van de app. Niets ertussen — dat is wat een ladder een ladder
     maakt. */
  --a1: 6px;
  --a2: 10px;
  --a3: 16px;
  --a4: 24px;
  --a5: 32px;

  /* ---- Radius -----------------------------------------------------------
     Twee. De 5, 12 en 14 die er stonden zijn weg. */
  --radius-kaart: 8px;
  --radius-veld: 6px;

  /* ---- Maten ------------------------------------------------------------ */
  --hoogte-veld: 36px;         /* velden, knoppen en chips: één hoogte */
  --rijhoogte: 44px;           /* MINIMUM, geen vaste hoogte: `height` op een
                                  tabelcel werkt als ondergrens. Een artikelregel
                                  met de EAN eronder is gemeten 64px. */
  --zijbalk: 256px;            /* vlak, wit, lijn rechts, niet zwevend */
  --inhoud-max: 1440px;        /* gecentreerd; inhoud rekt niet verder uit */
  --klikdoel: 28px;            /* macOS-maat voor de muis (skill §5b) */

  /* ---- Schaduw ----------------------------------------------------------
     Eén, zacht. Kaarten hebben géén rand: rand én schaduw samen is twee keer
     hetzelfde zeggen. */
  --schaduw: 0 1px 2px rgba(23, 34, 58, 0.04), 0 2px 8px rgba(23, 34, 58, 0.06);
}

/* Op een aanraakscherm (kiosk-tv, tablet, telefoon) is 28px te klein om te
   raken. Dan 44, zoals de skill voorschrijft. */
@media (pointer: coarse) {
  :root { --klikdoel: 44px; }
}

/* ===========================================================================
   DE ONDERDELEN
   Alleen wat public/js/bouwdoos.js daadwerkelijk uitzendt. Elke klasse begint
   met bd- zodat hij nooit botst met de bestaande stylesheet.
   =========================================================================== */

.bd-blok { font-family: var(--font); color: var(--tekst); font-size: var(--tekst-basis); }

/* ---- 1. Schermkop ------------------------------------------------------- */
/* `flex-wrap` is hier geen opsmuk. Zonder wrap weigert de rechterkant
   (bijgewerkt-tijd plus twee knoppen) te krimpen en knijpt hij de titelkolom
   tot bijna nul: op 390 px stond de zin één woord per regel en liep de titel
   onder de tijd door. Gezien op de schermafbeelding van 390 px, niet bedacht.
   De 240 px zorgt dat de tekstkolom liever een eigen regel pakt dan smal wordt. */
.bd-schermkop {
  display: flex; align-items: flex-start; gap: var(--a3); flex-wrap: wrap;
  padding: var(--a4) 0 var(--a3); border-bottom: 1px solid var(--lijn);
  max-width: var(--inhoud-max);
}
.bd-schermkop-tekst { flex: 1; min-width: min(240px, 100%); }
.bd-schermkop h1 { font-size: var(--tekst-kop); margin: 0; font-weight: 600; color: var(--tekst); }
.bd-schermkop-zin { font-size: var(--tekst-basis); color: var(--tekst-zacht); margin-top: var(--a1); }
.bd-schermkop-rechts { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.bd-bijgewerkt { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }

/* ---- Pillen ------------------------------------------------------------- */
.bd-pil {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); border-radius: var(--radius-veld);
  padding: 0 var(--a1); min-height: var(--klikdoel); line-height: 1;
}
.bd-pil--goed  { background: var(--goed-vlak);  color: var(--goed-tekst); }
.bd-pil--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.bd-pil--fout  { background: var(--fout-vlak);  color: var(--fout-tekst); }
.bd-pil--stil  { background: var(--achtergrond); color: var(--tekst-zacht); }

/* ---- Knoppen en velden: één hoogte -------------------------------------- */
.bd-knop, .bd-veld, .bd-chip {
  min-height: var(--hoogte-veld); border-radius: var(--radius-veld);
  font-size: var(--tekst-basis); font-family: var(--font);
  padding: 0 var(--a2); border: 1px solid var(--lijn); background: var(--vlak);
  color: var(--tekst);
}
.bd-knop { cursor: pointer; min-width: var(--klikdoel); }
.bd-knop--primair { background: var(--accent); border-color: var(--accent); color: var(--vlak); font-weight: 600; }
.bd-knop--tekst { border-color: transparent; background: transparent; color: var(--accent); }
.bd-chip { background: var(--vlak); }
.bd-chip--actief { background: var(--accent-licht); border-color: var(--accent); color: var(--accent); }
.bd-veld--zoek { width: 280px; max-width: 100%; }

/* Focus is altijd zichtbaar — ook voor wie met het toetsenbord werkt. */
.bd-blok :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 2. Kaartenrij ------------------------------------------------------ */
.bd-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--a3); margin: var(--a4) 0; max-width: var(--inhoud-max); }
/* Ook als een kaart een KNOP is. Een <button> erft geen lettertype en geen
   kleur van zijn ouder: zonder deze regels valt hij terug op de browserstandaard
   (13,3 px, zwart) en staat er ineens een maat in het scherm die nergens is
   afgesproken. Gemeten op het voorbeeldscherm, niet bedacht. */
.bd-kaart {
  background: var(--vlak); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw); padding: var(--a3); text-align: left;
  font-family: var(--font); font-size: var(--tekst-basis); color: var(--tekst);
  border: 0; width: 100%; cursor: inherit;
}
button.bd-kaart { cursor: pointer; }
.bd-kaart-label { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }
.bd-kaart-getal { font-size: var(--tekst-kaartgetal); font-weight: 600; color: var(--accent);
  display: flex; align-items: center; gap: var(--a1); }
.bd-kaart-eenheid { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }

/* ---- 3. Tabel ----------------------------------------------------------- */
.bd-tabelkader { background: var(--vlak); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw); overflow: hidden; max-width: var(--inhoud-max); }
.bd-tabelscroll { overflow-x: auto; }
.bd-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-tabel); }
.bd-tabel th { font-size: var(--tekst-tabel); font-weight: 600; color: var(--tekst-zacht);
  text-align: left; padding: var(--a2) var(--a3); border-bottom: 1px solid var(--lijn); }
.bd-tabel td { font-size: var(--tekst-tabel); color: var(--tekst); padding: var(--a2) var(--a3);
  border-bottom: 1px solid var(--lijn); height: var(--rijhoogte); }
.bd-tabel .bd-num { text-align: right; font-variant-numeric: tabular-nums; }
.bd-artikel { display: flex; align-items: center; gap: var(--a2); }
.bd-artikel img { width: 32px; height: 32px; border-radius: var(--radius-veld); object-fit: cover; }
.bd-artikel-ean { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }
.bd-naam-onbekend { color: var(--tekst-zacht); }

/* ---- 4. Filterrij ------------------------------------------------------- */
.bd-filterrij { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
  margin: var(--a3) 0; max-width: var(--inhoud-max); }
.bd-filteractie { margin-left: auto; }

/* ---- 5. Detailpaneel ---------------------------------------------------- */
.bd-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: 40%; min-width: 320px;
  background: var(--vlak); box-shadow: var(--schaduw); z-index: 40;
  display: flex; flex-direction: column; }
.bd-paneel-kop { display: flex; align-items: center; gap: var(--a2);
  padding: var(--a3); border-bottom: 1px solid var(--lijn); }
.bd-paneel-kop h2 { font-size: var(--tekst-kop); margin: 0; font-weight: 600; }
.bd-paneel-tabs { display: flex; gap: var(--a1); padding: 0 var(--a3); border-bottom: 1px solid var(--lijn); }
/* De streep onder de actieve tab is een RAND, geen schaduw. Met een schaduw
   zou het scherm twee verschillende schaduwen kennen terwijl er één is
   afgesproken — en dan is "één schaduw" geen regel meer maar een intentie.
   Alle tabs krijgen een doorzichtige rand, zodat de tekst niet verspringt. */
.bd-paneel-tab { min-height: var(--hoogte-veld); border: 0; border-bottom: 2px solid transparent;
  background: transparent; font-family: var(--font);
  font-size: var(--tekst-basis); color: var(--tekst-zacht); cursor: pointer; padding: 0 var(--a2); }
.bd-paneel-tab--actief { color: var(--accent); border-bottom-color: var(--accent); }
.bd-paneel-inhoud { padding: var(--a3); overflow-y: auto; }

/* ---- 11. Tabbalk -------------------------------------------------------- */
/* Zelfde vorm als de tabs in het detailpaneel hierboven: een RAND onder de
   actieve tab, geen schaduw — het scherm kent één schaduw en die is voor
   kaarten. Alle tabs krijgen een doorzichtige rand zodat de tekst niet
   verspringt als je wisselt. */
.bd-tabbalk { display: flex; gap: var(--a1); flex-wrap: wrap;
  border-bottom: 1px solid var(--lijn); max-width: var(--inhoud-max); }
.bd-tab { min-height: var(--hoogte-veld); border: 0; border-bottom: 2px solid transparent;
  background: transparent; font-family: var(--font); font-size: var(--tekst-basis);
  color: var(--tekst-zacht); cursor: pointer; padding: 0 var(--a3);
  display: inline-flex; align-items: center; gap: var(--a1); }
.bd-tab--aan { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.bd-tab-tel { background: var(--accent-licht); color: var(--accent);
  border-radius: var(--radius-kaart); padding: 0 var(--a1); font-size: var(--tekst-bijschrift); }

/* ---- 6. Voorstelregel --------------------------------------------------- */
.bd-voorstel { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a3); display: flex; gap: var(--a3); align-items: center; flex-wrap: wrap;
  max-width: var(--inhoud-max); }
.bd-voorstel-zin { flex: 1; min-width: 240px; font-size: var(--tekst-basis); }
.bd-voorstel-getallen { display: flex; gap: var(--a3); flex-wrap: wrap; }
.bd-voorstel-getal { font-size: var(--tekst-basis); font-weight: 600; }
.bd-voorstel-knoppen { display: flex; gap: var(--a1); align-items: center; }

/* ---- 7. Melding --------------------------------------------------------- */
.bd-melding { display: flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3);
  border-radius: var(--radius-veld); font-size: var(--tekst-basis); max-width: var(--inhoud-max); }
.bd-melding--goed  { background: var(--goed-vlak);  color: var(--goed-tekst); }
.bd-melding--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.bd-melding--fout  { background: var(--fout-vlak);  color: var(--fout-tekst); }
.bd-melding-sluit { margin-left: auto; min-width: var(--klikdoel); min-height: var(--klikdoel);
  background: transparent; border: 0; cursor: pointer; color: inherit; font-size: var(--tekst-basis); }

/* ---- 8. Lege staat, foutstaat, skelet ----------------------------------- */
.bd-leeg, .bd-fout { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a5) var(--a3); text-align: center; max-width: var(--inhoud-max); }
.bd-leeg-zin, .bd-fout-zin { font-size: var(--tekst-basis); color: var(--tekst-zacht); margin-bottom: var(--a2); }
.bd-skelet { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a3); max-width: var(--inhoud-max); }
.bd-skelet-rij { height: var(--a3); border-radius: var(--radius-veld); background: var(--lijn);
  margin-bottom: var(--a2); }

/* ---- 9. Grafiek --------------------------------------------------------- */
.bd-grafiek { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw);
  padding: var(--a3); max-width: var(--inhoud-max); }
.bd-grafiek-as { font-size: var(--tekst-bijschrift); fill: var(--tekst-zacht); }
.bd-grafiek-lijn { stroke: var(--accent); fill: none; stroke-width: 2; }
.bd-grafiek-grid { stroke: var(--lijn); stroke-width: 1; }
.bd-grafiek-perioden { display: flex; gap: var(--a1); margin-bottom: var(--a2); }

/* ---- 10. Instellingenpaneel -------------------------------------------- */
.bd-instelling { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) 0;
  border-bottom: 1px solid var(--lijn); }
.bd-instelling-tekst { flex: 1; min-width: 0; }
.bd-instelling-label { font-size: var(--tekst-basis); font-weight: 600; }
.bd-instelling-zin { font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); margin-top: var(--a1); }
.bd-uitleg-knop { min-width: var(--klikdoel); min-height: var(--klikdoel); border-radius: var(--radius-veld);
  border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst-zacht); cursor: pointer;
  font-family: var(--font); font-size: var(--tekst-basis); }

/* ---- 11. Datakwaliteit -------------------------------------------------- */
.bd-datakwaliteit { display: inline-flex; align-items: center; gap: var(--a1);
  color: var(--letop-tekst); background: var(--letop-vlak);
  border-radius: var(--radius-veld); padding: 0 var(--a1);
  font-size: var(--tekst-bijschrift); min-height: var(--klikdoel); cursor: help; }

/* De container van een bouwdoos-scherm. Zet de basis, zodat een scherm dat
   hierin zit niets van de oude stylesheet meekrijgt wat het niet vroeg. */
.bd-scherm { font-family: var(--font); font-size: var(--tekst-basis); color: var(--tekst); }
.bd-scherm * { font-family: var(--font); }

/* ---- Zijbalk en inhoud -------------------------------------------------- */
.bd-zijbalk { width: var(--zijbalk); background: var(--vlak); border-right: 1px solid var(--lijn);
  min-height: 100%; }
.bd-inhoud { max-width: var(--inhoud-max); margin: 0 auto; padding: 0 var(--a3); }

/* Alleen voor schermlezers: het woord naast de kleur, zonder dat het de
   opmaak verstoort. */
.bd-alleen-voorlezen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Beweging respecteert de systeeminstelling (skill §4). */
@media (prefers-reduced-motion: reduce) {
  .bd-paneel { transition: none; }
}

/* ===========================================================================
   DE WERKVLOER: WAT DE ORDERREGEL MOET ZEGGEN (23-09-2026)
   ===========================================================================
   Deze regels horen bij het WMS en staan hier, niet in style.css, omdat ze
   alleen met variabelen werken. Elke waarde hieronder komt uit :root bovenaan
   dit bestand; er komt geen kleur en geen maat bij.

   Twan, na het zien van het ontwerp: "de x1 x2 enzo moeten ook met kleurcodes
   aangegeven worden zodat je het verschil tussen multi item orders makkelijk
   kan onderscheiden" en "onderscheid tussen de kanalen door een bol of shopify
   logo mis ik volledig".
   =========================================================================== */

/* Eén stuk blijft zoals het was: dat is het normale geval en krijgt geen
   nadruk. Zou alles een kleur krijgen, dan valt niets meer op. */
.verw-qty.qty-twee { background: var(--letop-vlak); color: var(--letop-tekst); }
.verw-qty.qty-meer { background: var(--fout-vlak);  color: var(--fout-tekst); }

/* Een order met meer dan één soort artikel. Het getal hierboven telt stuks;
   dit telt soorten — drie keer dezelfde dop is één locatie, drie verschillende
   artikelen is drie keer lopen. Daarom staat dit er als woorden bij. */
.verw-meer {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); font-weight: 600;
  padding: 2px var(--a2); border-radius: var(--radius-knop);
  background: var(--letop-vlak); color: var(--letop-tekst); white-space: nowrap;
}

/* HOVER OVER DE ARTIKELKOP LICHT DE HELE KAART OP (23-09-2026)
   ---------------------------------------------------------------------------
   Twan: "wanneer ik bij dit over de productinformatie boven de orderregels
   hover moeten alle orderregels ook meegenomen worden want die worden dan
   immers geselecteerd. Zowel bij meerdere orders van die EAN of 1 enkele."

   Een klik op de kop selecteert alles eronder, dus moet je vooraf kunnen zien
   wat dat "alles" is. Twee verschillende tinten, allebei uit een variabele:
   aanwijzen is de pagina-achtergrond, gekozen blijft accent-licht. Zou hover
   dezelfde kleur krijgen als gekozen, dan is niet meer te zien wat er al
   aanstaat. */
.verw-blok:has(.verw-kop.klikbaar:hover) .verw-orij:not(.gekozen) {
  background: var(--achtergrond);
}
.verw-blok:has(.verw-kop.klikbaar:hover) {
  box-shadow: 0 0 0 1px var(--accent), var(--schaduw);
}

/* De knoppenrij in de kop van Verwerken. Eén regel, alles op dezelfde hoogte,
   en de aftelklok mag als enige afwijken omdat het geen knop is. */
.verw-kopknoppen {
  display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap;
}
.verw-kopknoppen > button { min-height: var(--klikdoel); }

/* DE ZES UITKOMSTEN VAN EEN RETOUR (23-09-2026)
   ---------------------------------------------------------------------------
   Twan: "Ook retouren mag je wel verbeteren want dat past momenteel ook niet in
   de verwachte stijl."

   Ze stonden als een flexrij met padding 6px 10px: zes knoppen van elk een
   andere breedte, allemaal even zwaar, en zo laag dat ze eerder als tekst lazen
   dan als keuze. Terwijl dit het zwaarste moment van het scherm is — de uitkomst
   gaat direct naar bol.com en is niet terug te draaien.

   Nu een rooster dat meebuigt met de breedte, dus gelijke knoppen op een rij,
   elk minstens --klikdoel hoog.

   EN DE TWEE DIE GELD KOSTEN ZIJN DE ENIGE MET KLEUR. "Ontvangen" en "Afkeuring
   terugdraaien" betalen de klant terug; de andere vier niet. Die twee dragen in
   de app al de klasse .ok — verwarrend, want ze zijn juist het onomkeerbare
   geval, maar dat hernoemen raakt meer dan dit scherm. Wat telt is dat je ze
   niet per ongeluk raakt. */
.retour-keuzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--a1);
}
.retour-keuze {
  min-height: var(--klikdoel);
  justify-content: center;
  padding: var(--a1) var(--a2);
}
.retour-keuze.ok {
  border-color: var(--letop-vlak);
  background: var(--letop-vlak);
}
.retour-keuze.ok b { color: var(--letop-tekst); }
.retour-keuze.ok:hover { border-color: var(--letop-tekst); }

/* De navigatie door de rij, onder de order die je verwerkt. Stond onderaan de
   rijlijst rechts; die groeit met het aantal orders, dus bij twintig stuks liep
   de knop van het scherm af terwijl je blik bij de order staat. */
.verw-ordernav {
  display: flex; align-items: center; gap: var(--a3);
  margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--lijn);
}
.verw-ordernav > button { min-height: var(--klikdoel); }
.verw-ordernav > button:last-child { margin-left: auto; }

/* Orders die nog niet zijn afgeteld en daarom geen label krijgen. Geen fout,
   wel een grens — dus letop, niet rood. */
.verw-slot {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); font-weight: 600;
  padding: 2px var(--a2); border-radius: var(--radius-veld);
  background: var(--letop-vlak); color: var(--letop-tekst); white-space: nowrap;
}

/* De labelknoppen als er nog iets moet gebeuren. Ze staan er, grijs, met de
   reden ernaast — zonder die knoppen bleef "Verzonden melden zonder track &
   trace" de enige knop op het scherm. */
.wms-label-knoppen {
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
}
.wms-rem {
  display: inline-flex; align-items: center; gap: var(--a1);
  font-size: var(--tekst-bijschrift); font-weight: 600;
  padding: 2px var(--a2); border-radius: var(--radius-veld);
  background: var(--letop-vlak); color: var(--letop-tekst); white-space: nowrap;
}

/* Wat er aan de hand is met deze order, bovenaan in één vorm. Stond verspreid:
   het annuleringsrisico en het ontbrekende land bij het adres, een vastgelopen
   zending onderaan bij Verzenden. Alle drie bepalen of je deze order kunt
   afmaken, dus je wilt ze zien vóór je gaat pakken. */
.wms-aandacht {
  display: flex; gap: var(--a2); align-items: flex-start;
  padding: var(--a2) 14px; border-radius: var(--radius-veld);
  font-size: var(--tekst-tabel); margin-bottom: var(--a1);
}
.wms-aandacht i { flex: 0 0 auto; margin-top: 2px; }
.wms-aandacht b { display: block; }
.wms-aandacht.fout { background: var(--fout-vlak); color: var(--fout-tekst); }
.wms-aandacht.letop { background: var(--letop-vlak); color: var(--letop-tekst); }

/* ===========================================================================
   DE CHIPS BOVEN DE ORDERKAART IN HET VERWERKSCHERM (23-09-2026)
   ===========================================================================
   Bol-deelzending, annuleringsverzoek en samen verzenden gaan over deze order
   in DEZE rij; de orderkaart zelf weet niets van een rij. Ze staan er dus
   boven, op één regel, met dezelfde afstand als de rest van de kaart. */
.verw-ovo-chips{ display:flex; flex-wrap:wrap; gap:var(--a1); margin-bottom:var(--a2); }
.verw-ovo-chips:empty{ display:none; }

/* ===========================================================================
   HET KANAAL OP EEN REGEL (23-09-2026)
   ===========================================================================
   Twan: "Ook onderscheid tussen de kanalen door een bol of shopify logo mis ik
   volledig." Er stond een algemeen winkelicoontje uit Tabler op een gekleurd
   rondje; nu staat er het echte logo op een licht vlak, zoals in het ontwerp.

   Licht en niet gekleurd: het bol-logo is zelf blauw en verdwijnt op een blauw
   vlak. De merkkleur zit in het logo, niet in de achtergrond. */
.kanaal-merk,
.kanaal-chip{
  display:inline-flex; align-items:center; gap:var(--a1);
  padding:2px var(--a2) 2px var(--a1); border-radius:var(--radius-kaart);   /* bij deze hoogte al een pil */
  font-size:var(--tekst-bijschrift); line-height:1.3; white-space:nowrap;
}
.kanaal-merk{ padding:2px var(--a1); }
.kanaal-merk img,
.kanaal-chip img{ display:block; }
.kanaal-bol{ background:var(--accent-licht); color:var(--tekst); }
.kanaal-shop{ background:var(--goed-vlak); color:var(--goed-tekst); }

/* Een dag die boven het bereik van de grafiek valt. Het driehoekje op de
   bovenrand zegt "hier lag iets hogers"; deze regel zegt hoeveel dagen en
   waar de rand ligt. Zonder die twee is een afgekapte grafiek een leugen. */
.verz-buiten-uitleg{
  font-size:var(--tekst-bijschrift); line-height:1.4; color:var(--tekst-uitleg);
  margin-top:var(--a1);
}

/* ===========================================================================
   DE VOORSTELREGEL MET ZIJN ONDERBOUWING (opdracht 9, klus 2, 24-09-2026)
   ===========================================================================
   De bovenste regel komt uit bouwdoos.voorstelregel. Dit is wat eromheen staat:
   de uitklap, wat er gaat gebeuren met oud → nieuw, en de uitkomst.

   De onderbouwing begint dicht. Je leest er tien op een dag; de zin is wat je
   scant en de rest is wat je nakijkt bij twijfel. */
.adv-vs{ margin-bottom: var(--a2); }
.adv-voorstel-onder{
  display:flex; align-items:center; gap: var(--a2); flex-wrap:wrap;
  padding: var(--a1) var(--a3); font-size: var(--tekst-bijschrift);
  color: var(--tekst-zacht);
}
.adv-uitklap{
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--accent); font-size: var(--tekst-bijschrift); font-family: var(--font);
}
.adv-bron{ color: var(--tekst-zacht); }
.adv-wacht-ok{ color: var(--goed-tekst); background: var(--goed-vlak);
  padding:1px var(--a1); border-radius: var(--radius-veld); }

.adv-voorstel-uitleg{
  display:grid; gap: var(--a3); padding: 0 var(--a3) var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.adv-uitleg-kop{ font-size: var(--tekst-bijschrift); color: var(--tekst-zacht);
  margin-bottom: var(--a1); }

.adv-handelingen{ list-style:none; margin:0; padding:0; }
.adv-handeling{ display:flex; align-items:center; gap: var(--a1);
  padding: 2px 0; font-size: var(--tekst-tabel); flex-wrap:wrap; }
/* Uitgevinkt blijft staan en wordt niet verborgen: je moet later kunnen zien
   wat je hebt overgeslagen. */
.adv-handeling.uit{ opacity:0.45; text-decoration: line-through; }
.adv-handeling-wat{ flex:1; min-width:120px; }
.adv-oud{ color: var(--tekst-zacht); }

.adv-zekerheid{ font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); }

.adv-uitkomst{
  padding: var(--a1) var(--a3); font-size: var(--tekst-tabel);
  border-radius: 0 0 var(--radius-kaart) var(--radius-kaart);
}
.adv-uitkomst.goed{ background: var(--goed-vlak); color: var(--goed-tekst); }
.adv-uitkomst.deels{ background: var(--letop-vlak); color: var(--letop-tekst); }
.adv-uitkomst.geweigerd{ background: var(--achtergrond); color: var(--tekst-zacht); }
.adv-fouten{ margin: var(--a1) 0 0; padding-left: var(--a3); }

/* Hoelang geleden de laatste webhook binnenkwam. Oranje boven een uur: een
   aanwijzing, geen storing — bij tien orders per dag is een gat van een uur
   heel normaal, maar het zegt wél iets als je hier kijkt omdat je iets mist. */
.webhook-geleden{ font-weight:500; }
.webhook-geleden.oud{
  background: var(--letop-vlak); color: var(--letop-tekst);
  padding: 1px var(--a1); border-radius: var(--radius-veld);
}

/* ===========================================================================
   DE LIJST VAN VANNACHT EN HET TANDWIEL "REGELS" (opdracht 9, klus B)
   =========================================================================== */
.adv-lijstkop{ display:flex; align-items:center; justify-content:space-between; gap: var(--a2);
  padding: var(--a1) var(--a3) var(--a2); }
.adv-wachtpil{ display:inline-block; margin-left: var(--a1); padding: 1px var(--a1);
  font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); background: var(--achtergrond);
  border-radius: var(--radius-veld); white-space:nowrap; }
.adv-handeling-detail{ flex-basis:100%; font-size: var(--tekst-bijschrift); padding-left: var(--a3); }
.adv-infoblok{ padding: var(--a2) var(--a3); border-top:1px solid var(--border); }
.adv-info{ display:flex; align-items:center; justify-content:space-between; gap: var(--a2);
  padding: var(--a1) 0; font-size: var(--tekst-tabel); }
.adv-info-zin{ flex:1; }
.adv-afgehandeld{ padding: var(--a2) var(--a3); border-top:1px solid var(--border); font-size: var(--tekst-tabel); }
.adv-afgehandeld summary{ cursor:pointer; color: var(--tekst-zacht); }
.adv-tandwiel{ margin-left: var(--a2); text-transform:none; letter-spacing:0; }
.adv-regels{ background: var(--vlak); border:1px solid var(--border); border-radius: var(--radius-kaart);
  margin-bottom: var(--a3); padding: var(--a2) 0; }
.adv-regel{ padding: var(--a2) var(--a3); border-top:1px solid var(--border); }
.adv-regel:first-of-type{ border-top:none; }
.adv-regel-kop{ display:flex; align-items:center; justify-content:space-between; }
.adv-regel-aan{ font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); display:flex; gap: var(--a1); align-items:center; }
.adv-regel-zin{ font-size: var(--tekst-tabel); margin: 2px 0; }
.adv-regel-velden{ display:grid; gap: var(--a2); margin: var(--a2) 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adv-regel-drempel label{ display:block; font-size: var(--tekst-bijschrift); color: var(--tekst-zacht); margin-bottom: 2px; }
.adv-regel-drempel input, .adv-regel-drempel select{ width:100%; max-width:180px; }
.adv-regel-onder{ display:flex; align-items:center; gap: var(--a2); }
.adv-regel-fout{ color: var(--fout-tekst); font-size: var(--tekst-bijschrift); }

/* De drie knoppen van een voorstel: keuze, reden en tegenvoorstel staan inline, onder de regel (klus C). */
.adv-inline{ display:flex; align-items:center; flex-wrap:wrap; gap: var(--a2); padding: var(--a2) var(--a3);
  border-top:1px solid var(--border); font-size: var(--tekst-tabel); }
.adv-inline input[type="text"]{ flex:1; min-width:200px; }
.adv-tegen-rij{ display:flex; align-items:center; gap: var(--a1); }
.adv-tegen-rij input{ width:90px; }

/* ---- Campagnes bewerken in de rij (klus E, 24-09-2026) -------------------
   Schakelaar, inline getal, groepsbalk. Alleen tokens; de schakelaar toont zijn
   staat ook met een woord ernaast (kleur is niet de enige aanwijzing). */
.adv-schakel { position: relative; width: 36px; height: var(--klikdoel); min-height: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; vertical-align: middle; }
.adv-schakel::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 18px; margin-top: -9px;
  border-radius: var(--radius-kaart); background: var(--lijn); }
.adv-schakel.aan::before { background: var(--accent); }
.adv-schakel-knop { position: absolute; top: 50%; left: 2px; width: 14px; height: 14px; margin-top: -7px;
  border-radius: var(--radius-veld); background: var(--vlak); transition: left 150ms; }
.adv-schakel.aan .adv-schakel-knop { left: 20px; }
.adv-schakel:disabled { opacity: 0.5; cursor: default; }
.adv-schakel:focus-visible, .adv-inlinegetal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adv-schakel-tekst { color: var(--tekst-zacht); font-size: var(--tekst-bijschrift); margin-left: var(--a1); }
.adv-schakelcel { white-space: nowrap; }
.adv-inlinegetal { font: inherit; color: var(--accent); background: transparent; border: 0; padding: 0 var(--a1);
  min-height: var(--klikdoel); cursor: pointer; border-bottom: 1px dashed var(--lijn); }
.adv-inlineveld { display: inline-flex; align-items: center; gap: var(--a1); flex-wrap: wrap; justify-content: flex-end; }
.adv-inlineinvoer { font: inherit; height: var(--klikdoel); min-width: 0; width: 88px; padding: 0 var(--a1);
  border: 1px solid var(--lijn); border-radius: var(--radius-veld); }
.adv-inlinefout { flex-basis: 100%; color: var(--fout-tekst); background: var(--fout-vlak); border-radius: var(--radius-veld);
  padding: var(--a1) var(--a2); text-align: left; font-size: var(--tekst-tabel); }
.adv-vinkcel { width: var(--klikdoel); }
.adv-groepsbalk { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
  padding: var(--a2) var(--a3); background: var(--vlak); border-top: 1px solid var(--lijn); box-shadow: var(--schaduw); z-index: 2; }
.adv-groeppaneel { padding: var(--a3); margin-bottom: var(--a2); background: var(--accent-licht); border-radius: var(--radius-kaart); }
.adv-groepkop { display: flex; flex-direction: column; margin-bottom: var(--a2); }
.adv-groepregel { display: flex; gap: var(--a2); align-items: center; min-height: var(--klikdoel); }
.adv-groepknoppen { display: flex; gap: var(--a2); justify-content: flex-end; margin-top: var(--a2); }
.adv-toevoegen { display: flex; flex-direction: column; gap: var(--a2); margin-top: var(--a3); }
.adv-toevoegblok { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a2); }
@media (prefers-reduced-motion: reduce) { .adv-schakel-knop { transition: none; } }
.adv-nieuwknop { margin-left: auto; }
.adv-setkop { display: flex; justify-content: flex-end; margin-bottom: var(--a2); }
.adv-nwveld { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a2); }
.adv-nwveld > label:first-child { min-width: 96px; }
.adv-nwzoek { font: inherit; height: var(--klikdoel); min-width: 240px; padding: 0 var(--a2); border: 1px solid var(--lijn); border-radius: var(--radius-veld); }
.adv-nwchip { display: inline-flex; gap: var(--a1); align-items: center; padding: 0 var(--a2); min-height: var(--klikdoel);
  background: var(--vlak); border-radius: var(--radius-veld); }
.adv-nwx { font: inherit; border: 0; background: transparent; cursor: pointer; min-width: var(--klikdoel); min-height: var(--klikdoel); }