/* =============================================================================
   MPL Works, stijl
   Industrieel rustig, systeemfonts, geen externe bestanden.
   Tablet-first (10 inch liggend), ook bruikbaar op een PDA van 360 px breed.
   Touch-doelen minstens 48 px. Licht en donker: standaard via prefers-color-scheme,
   per apparaat te kiezen (besluit 484): data-thema="licht" of "donker" op <html>
   (thema-vooraf.js en thema.js). De donkere tokens staan daarom twee keer hieronder,
   letterlijk gelijk (getest): bij een donker apparaat zonder data-thema="licht", en
   bij data-thema="donker".
   Huisstijl Metagro (metagro.com): navy #0c1f3d, blauw #0161f0, knoprand #0040d0,
   lichtblauw #e6effe. Merkblauw is voorbehouden aan merk, knoppen en focus; de
   statuskleur "bezig" is daarom violet, zodat status nooit op merk lijkt.
   ============================================================================= */

:root {
  --bg: #eef0f2;
  --panel: #ffffff;
  --panel-2: #f5f6f8;
  --text: #1c2126;
  --muted: #56606b;
  --line: #d5dae0;
  --line-sterk: #aab2bb;
  --merk-navy: #0c1f3d;
  --merk-blauw: #0161f0;
  --merk-tekst: var(--merk-navy);
  --kop-kleur: var(--merk-navy);
  --accent: var(--merk-blauw);
  --accent-zacht: #e6effe;
  --focus: #0040d0;
  --knop-primair: var(--merk-blauw);

  --gereed: #23733f;
  --gereed-zacht: #e2f1e6;
  --gereed-tekst: #1a5a31;
  --bezig: #7446b8;
  --bezig-zacht: #efe9f9;
  --bezig-tekst: #512a8c;
  --wacht: #7b858f;
  --wacht-zacht: #eceff2;
  --wacht-tekst: #3f4750;
  --rood: #b3261e;
  --rood-zacht: #fbe3e1;
  --rood-tekst: #8c1d17;
  --oranje: #c46a12;
  --oranje-zacht: #fdebd6;
  --oranje-tekst: #7a3e05;
  --groen: #23733f;
  --groen-zacht: #e2f1e6;
  --groen-tekst: #1a5a31;
  --let-op: #7a5200;
  --let-op-zacht: #fff3d1;
  --let-op-rand: #e0b54a;

  --knop-start: #23733f;
  --knop-stop: #b3261e;
  --knop-gereed: var(--knop-primair);

  --schaduw: 0 1px 2px rgba(20, 25, 30, 0.06), 0 2px 8px rgba(20, 25, 30, 0.06);
  --radius: 6px;
  --doel: 48px;
  /* Het vlak achter het plaatje van een bon (0042): licht, ook in donker (de 3D-weergave uit
     Ridder is voor een witte achtergrond gemaakt). */
  --beeld-achter: #ffffff;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Metagro gebruikt Gilroy (geometrisch) voor koppen: benaderd met systeemfonts. */
  --kop: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}

/* Een gekozen uiterlijk geldt ook voor de onderdelen van de browser (keuzelijsten, schuifbalken). */
:root[data-thema="licht"] { color-scheme: light; }
:root[data-thema="donker"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --bg: #15191d;
    --panel: #1d2227;
    --panel-2: #242a30;
    --text: #e6e9ec;
    --muted: #9aa4ae;
    --line: #2e353c;
    --line-sterk: #4b545d;
    --merk-tekst: #eef2f8;
    --kop-kleur: var(--text);
    --accent: #4a8ff5;
    --accent-zacht: #13264a;
    --focus: #8ab8ff;
    --knop-primair: #1a62e0;

    --gereed: #3fa565;
    --gereed-zacht: #16301f;
    --gereed-tekst: #93d9ab;
    --bezig: #a784e8;
    --bezig-zacht: #2a2140;
    --bezig-tekst: #d4c4f6;
    --wacht: #7d8791;
    --wacht-zacht: #262c33;
    --wacht-tekst: #c0c8cf;
    --rood: #e0625a;
    --rood-zacht: #3b1c1a;
    --rood-tekst: #f6b0aa;
    --oranje: #e39342;
    --oranje-zacht: #3a2814;
    --oranje-tekst: #f3c490;
    --groen: #3fa565;
    --groen-zacht: #16301f;
    --groen-tekst: #93d9ab;
    --let-op: #f0c35a;
    --let-op-zacht: #33290f;
    --let-op-rand: #8a6d1f;

    --knop-start: #2a8049;
    --knop-stop: #c0392f;
    --knop-gereed: var(--knop-primair);

    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* Altijd donker als dit apparaat Donker koos: dezelfde waarden als hierboven. */
:root[data-thema="donker"] {
  --bg: #15191d;
  --panel: #1d2227;
  --panel-2: #242a30;
  --text: #e6e9ec;
  --muted: #9aa4ae;
  --line: #2e353c;
  --line-sterk: #4b545d;
  --merk-tekst: #eef2f8;
  --kop-kleur: var(--text);
  --accent: #4a8ff5;
  --accent-zacht: #13264a;
  --focus: #8ab8ff;
  --knop-primair: #1a62e0;

  --gereed: #3fa565;
  --gereed-zacht: #16301f;
  --gereed-tekst: #93d9ab;
  --bezig: #a784e8;
  --bezig-zacht: #2a2140;
  --bezig-tekst: #d4c4f6;
  --wacht: #7d8791;
  --wacht-zacht: #262c33;
  --wacht-tekst: #c0c8cf;
  --rood: #e0625a;
  --rood-zacht: #3b1c1a;
  --rood-tekst: #f6b0aa;
  --oranje: #e39342;
  --oranje-zacht: #3a2814;
  --oranje-tekst: #f3c490;
  --groen: #3fa565;
  --groen-zacht: #16301f;
  --groen-tekst: #93d9ab;
  --let-op: #f0c35a;
  --let-op-zacht: #33290f;
  --let-op-rand: #8a6d1f;

  --knop-start: #2a8049;
  --knop-stop: #c0392f;
  --knop-gereed: var(--knop-primair);

  --schaduw: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------------- basis --- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

body.heeft-laag { overflow: hidden; }

a { color: var(--focus); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bovenregel {
  margin: 0;
  color: var(--muted);
  font: 600 0.72rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sectietitel {
  margin: 0 0 8px;
  color: var(--muted);
  font: 700 0.78rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 4px 0 0;
  color: var(--kop-kleur);
  font-family: var(--kop);
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.laag-titel,
.gm-titel,
.huidig-naam {
  color: var(--kop-kleur);
  font-family: var(--kop);
}

h1:focus { outline: none; }
h1:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ------------------------------------------------------------- kopregel --- */

.kop {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 4px max(24px, env(safe-area-inset-right)) 4px max(24px, env(safe-area-inset-left));
  background: var(--panel);
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--line);
}

/* Tekstmerk METAGRO + MPL Works, als één knop: naar de stationkeuze.
   Eén raakvlak van 48 px, ook als het merk op smalle schermen gestapeld staat. */
.merk {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--doel);
  margin: 0 0 0 -8px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--merk-tekst);
  font: inherit;
  font-family: var(--kop);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.merk:hover .merk-bedrijf { color: var(--focus); }
.merk:active { transform: translateY(1px); }

/* Naar het Metagro-logo: vette kapitalen met een schuine blauwe balk erboven. */
.merk-bedrijf {
  position: relative;
  padding-top: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.merk-bedrijf::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.merk-naam {
  padding-left: 10px;
  border-left: 1px solid var(--line-sterk);
  font-weight: 600;
  line-height: 1.1;
}

.omgeving {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.omgeving-stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Het label in de kopregel volgt wat het scherm toont: Demodata (geel), Live
   (groen, echte orders uit de kluis) of Live en demo (overzicht in de hybride stand). */
body[data-bron] .omgeving {
  padding: 4px 8px;
  border: 1.5px solid var(--line-sterk);
  border-radius: 4px;
  font-weight: 800;
}

body[data-bron="demo"] .omgeving {
  border-color: var(--let-op-rand);
  background: var(--let-op-zacht);
  color: var(--let-op);
}

body[data-bron="demo"] .omgeving-stip { background: var(--let-op-rand); }

body[data-bron="kluis"] .omgeving {
  border-color: var(--groen);
  background: var(--groen-zacht);
  color: var(--groen-tekst);
}

body[data-bron="kluis"] .omgeving-stip { background: var(--groen); }

body[data-bron="gemengd"] .omgeving {
  border-style: dashed;
  background: var(--panel-2);
  color: var(--text);
}

body[data-bron="gemengd"] .omgeving-stip { background: linear-gradient(90deg, var(--groen) 50%, var(--let-op-rand) 50%); }

/* Bron per order en per werklijst: Live (groen) of Demo (geel). Een demo-order
   mag nooit als echt overkomen: het label staat op tegel, detail en gereedmelden. */
.bron-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1.5px solid;
  border-radius: 4px;
  font: 800 0.74rem/1.1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bron-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.bron-label--kluis { border-color: var(--groen); background: var(--groen-zacht); color: var(--groen-tekst); }
.bron-label--demo { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }

.bron-uitleg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 70ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.bron-uitleg--kluis { color: var(--groen-tekst); }
.bron-uitleg--demo { color: var(--let-op); }

.gm-bron { margin: 4px 0 2px; }
.station-tegel .bron-label { margin-bottom: 2px; }

/* De stand uit het werkgeheugen: niet bijgewerkt (met Opnieuw proberen), of wordt bijgewerkt. */
.stand-melding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
}

/* Demostation of overzicht terwijl de kluis niet te lezen is: de melding boven de lijst. */
.werklijst-kluismelding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
}

/* Taalkeuze NL/EN: één knop in de kopregel, de actieve taal omgekeerd gekleurd. */
.taal-knop {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--doel);
  margin-left: auto;
  padding: 4px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--muted);
  font: 700 0.82rem/1 var(--mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.taal-knop:hover { border-color: var(--muted); }
.taal-knop:active { transform: translateY(1px); }

.taal-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 38px;
  padding: 0 4px;
  border-radius: 4px;
}

.taal-code.is-actief {
  background: var(--text);
  color: var(--panel);
}

/* Licht of donker (besluit 485): één knop naast NL/EN, in dezelfde vorm, met het pictogram van
   de keuze van dit apparaat (half, zon of maan). Een tik opent de keuze. */
.thema-knop {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--doel);
  min-height: var(--doel);
  padding: 0;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.thema-knop:hover { border-color: var(--muted); }
.thema-knop:active { transform: translateY(1px); }
.thema-icoon { display: none; width: 22px; height: 22px; }
.thema-knop[data-keuze="auto"] .thema-icoon--auto,
.thema-knop[data-keuze="licht"] .thema-icoon--licht,
.thema-knop[data-keuze="donker"] .thema-icoon--donker { display: block; }

/* Een smal scherm met alleen MPL Works (geen menu, de kopregel loopt niet over twee rijen): daar
   past de knop niet naast het station zonder de naam van het station af te kappen. Dezelfde
   keuze staat dan op de stationkeuze (METAGRO). Tot 600 px (05-11; was 400): tussen 401 en 600 px liep het
   stationknopje rechts buiten het scherm (412 px: 100 px te breed). */
@media (max-width: 600px) {
  body[data-module="mpl"]:not(.met-menu) .thema-knop { display: none; }
}

/* Licht of donker op de stationkeuze (02-11: weg, de kopregel heeft de knop): alleen nog
   precies waar de kopregel hem niet heeft (hierboven: een smal scherm met alleen MPL Works, zonder
   menu), want daar is dit de enige weg. Op elke andere breedte en met het menu: weg. */
.knop.stationkeuze-thema { display: none; }
@media (max-width: 600px) {
  body[data-module="mpl"]:not(.met-menu) .knop.stationkeuze-thema { display: inline-flex; }
}

.station-knop {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: var(--doel);
  min-width: 150px;
  padding: 6px 40px 6px 14px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  line-height: 1.1;
  text-decoration: none;
  position: relative;
}

.station-knop::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}

.station-knop-label {
  color: var(--muted);
  font: 600 0.66rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.station-knop-naam {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="station"] .station-knop {
  border-color: var(--accent);
  background: var(--accent-zacht);
}

/* ------------------------------------------------ poort (loginscherm) --- */

.poort {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--accent);
}

.poort-midden {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.poort-midden > .leeg { width: min(440px, 100%); }

.poort-kaart {
  width: min(440px, 100%);
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--schaduw);
}

/* Tekstmerk zoals in de kopregel, hier zonder knop. */
.poort-merk {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--merk-tekst);
  font-family: var(--kop);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.poort-merk .merk-bedrijf { font-size: 1.15rem; }
.poort-merk .merk-naam { padding-left: 10px; border-left: 1px solid var(--line-sterk); }

/* Merk en NL/EN op één rij bovenaan de loginkaart. */
.poort-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
}

.poort-top .poort-merk { margin: 0; }
.poort-top .poort-taal { margin-left: auto; }

/* Op naam of met e-mail: twee grote knoppen. */
.poort-soort { width: 100%; }
.poort-soort button { flex: 1; min-height: var(--doel); }

.veld-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.poort-intro {
  margin: 6px 0 20px;
  color: var(--muted);
}

.poort-intro--laatste { margin-bottom: 0; }

.poort-form {
  display: grid;
  gap: 16px;
}

.veld label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.veld input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1.1rem/1.2 var(--sans);
  -webkit-appearance: none;
  appearance: none;
}

.veld input:focus { border-color: var(--focus); }
.veld input[aria-invalid="true"] { border-color: var(--rood); }

.poort-meldingen:empty { display: none; }
.poort-meldingen .melding { margin: 0; }

.knop.knop--breed {
  width: 100%;
  min-height: 56px;
  font-size: 1.1rem;
}

.voet.poort-voet { justify-content: center; }

/* ---------------------------------------------------------- inhoud/voet --- */

.inhoud {
  flex: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 24px 32px;
}

.inhoud:focus { outline: none; }

.voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 24px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 0.8rem/1.4 var(--mono);
}

.leeg {
  margin: 0;
  padding: 28px 20px;
  background: var(--panel);
  border: 1px dashed var(--line-sterk);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.leeg--fout {
  border-style: solid;
  border-color: var(--rood);
  color: var(--rood-tekst);
  background: var(--rood-zacht);
}

div.leeg--fout { display: grid; justify-items: center; gap: 12px; }
div.leeg--fout p { margin: 0; }

.melding {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--let-op-rand);
  border-radius: var(--radius);
  background: var(--let-op-zacht);
  color: var(--let-op);
  font-weight: 600;
}

.melding--info {
  margin: 0;
  border-color: var(--line-sterk);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 500;
}

.melding--fout {
  border-color: var(--rood);
  background: var(--rood-zacht);
  color: var(--rood-tekst);
}

/* Samen geklokt voor een snijjob: in de kleur van "bezig". */
.melding--bundel {
  border-color: var(--bezig);
  background: var(--bezig-zacht);
  color: var(--bezig-tekst);
}

.mono { font-family: var(--mono); letter-spacing: 0.02em; }

.terug-onder { margin: 16px 0 0; }

/* --------------------------------------------------------------- knoppen --- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--doel);
  min-width: var(--doel);
  padding: 10px 18px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.knop:hover { border-color: var(--muted); }
.knop:active { transform: translateY(1px); }

.knop[disabled],
.knop.is-uit {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.knop--stil { background: transparent; }

.knop--klein {
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.knop--primair {
  background: var(--knop-primair);
  border-color: var(--knop-primair);
  color: #fff;
}

.knop--groot {
  flex-direction: column;
  gap: 4px;
  min-height: 104px;
  padding: 14px 18px;
  border: 0;
  color: #fff;
}

.knop--groot.knop--stil { color: var(--text); border: 1px solid var(--line-sterk); }

.knop-hoofd {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.knop-sub {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.95;
}

.knop--gevaar {
  background: var(--knop-stop);
  border-color: var(--knop-stop);
  color: #fff;
}

.knop--start { background: var(--knop-start); }
.knop--stop { background: var(--knop-stop); }
.knop--gereed { background: var(--knop-gereed); }

.knop--pdf {
  min-height: 76px;
  min-width: 220px;
  padding: 12px 22px;
  border: 2px solid var(--text);
  background: var(--panel);
  font-size: 1.2rem;
  font-weight: 700;
}

.knop--pdf .icoon { flex: none; }

/* --------------------------------------------------------- badges/chips --- */

.badge {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 4px 10px;
  border: 1.5px solid;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.badge::before {
  content: "";
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.badge-datum { grid-column: 2; }

.badge-rel {
  grid-column: 2;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge--rood { background: var(--rood-zacht); border-color: var(--rood); color: var(--rood-tekst); }
.badge--oranje { background: var(--oranje-zacht); border-color: var(--oranje); color: var(--oranje-tekst); }
.badge--groen { background: var(--groen-zacht); border-color: var(--groen); color: var(--groen-tekst); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  background: var(--wacht-zacht);
  color: var(--wacht-tekst);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.chip::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--wacht);
}

.chip--bezig { background: var(--bezig-zacht); color: var(--bezig-tekst); }
.chip--bezig::before { background: var(--bezig); border-radius: 50%; }
.chip--onderbroken { background: var(--let-op-zacht); color: var(--let-op); border-color: var(--let-op-rand); }
.chip--onderbroken::before { background: var(--let-op-rand); }
.chip--extern { background: transparent; border: 1.5px dashed var(--line-sterk); color: var(--text); }
.chip--machine { background: transparent; border-color: var(--line); color: var(--muted); }
.chip--gereed { background: var(--gereed-zacht); color: var(--gereed-tekst); }
.chip--gereed::before { background: var(--gereed); }

/* ---------------------------------------------------------- paginakop --- */

.paginakop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 28px;
  margin-bottom: 18px;
}

.teller {
  margin: 6px 0 0;
  color: var(--muted);
}

/* Ridder bijgewerkt (0040): een rustige regel onder de teller. */
.ridder-ververst {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Werklijst: wisselen van station in de kop, zonder de stationkeuze. */
.station-wissel { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; min-width: 0; max-width: 100%; }
.station-wissel .gm-veldlabel { white-space: nowrap; }
.station-wissel select { box-sizing: border-box; height: 50px; min-width: 0; max-width: 100%; padding: 8px 12px; border: 2px solid var(--line-sterk); border-radius: var(--radius); background: var(--panel); color: var(--text); font: 600 1rem/1.3 var(--sans); }

.paginakop-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------ werklijst --- */

/* min-width 0 (02-11): op 320 px duwde het zoekveld de pagina 10 px opzij. */
.zoek {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 600px;
}

.zoek-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.zoek-rij {
  display: flex;
  gap: 8px;
}

.zoek-veld {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1.25rem/1.2 var(--mono);
  -webkit-appearance: none;
  appearance: none;
}

.zoek-veld::placeholder {
  color: var(--muted);
  font: 400 1rem/1.2 var(--sans);
}

.zoek-veld:focus { border-color: var(--focus); }

.zoek-wis { min-height: 56px; }

.kaarten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}

.kaarten > li { display: flex; flex-direction: column; }

.kaarten--elders { opacity: 0.9; }

/* Toon meer: de volgende tegels (komen ook vanzelf bij het scrollen). */
.meer-tegels { margin: 16px 0 0; text-align: center; }

.sectietitel + .kaarten,
.kaarten + .sectietitel { margin-top: 0; }

.werklijst .sectietitel { margin-top: 26px; }

.kaart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--lever-kleur, var(--line-sterk));
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  text-decoration: none;
}

.kaart--rood { --lever-kleur: var(--rood); }
.kaart--oranje { --lever-kleur: var(--oranje); }
.kaart--groen { --lever-kleur: var(--groen); }

.kaart:hover { border-color: var(--line-sterk); border-left-color: var(--lever-kleur); }
.kaart:active { background: var(--panel-2); }

.kaart-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wo {
  font: 700 1.8rem/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.kaart-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

/* Ordercategorie: tekstchip in mono. Spoed omgekeerd gekleurd (sterkst), zonder
   rood of oranje, zodat hij nooit op de leverdatum-badge lijkt. Een lange categorie uit
   Ridder ("Intern Metagro enkelstuks") breekt binnen de chip af in plaats van de tegel
   te laten overlopen (0040). */
.categorie {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border: 1.5px solid var(--line-sterk);
  border-radius: 4px;
  color: var(--text);
  font: 700 0.74rem/1.1 var(--mono);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.categorie--spoed { background: var(--text); border-color: var(--text); color: var(--panel); }
.categorie--standaard { color: var(--muted); }
.categorie--project { border-style: dashed; border-color: var(--text); }

/* De klantnaam (besluit 140): één regel, te lang loopt af. */
.kaart-klant {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-klantcode { color: var(--muted); font-family: var(--mono); font-size: 0.9em; }

/* Een lange onderdeelnaam zonder spaties breekt af binnen de tegel (02-11), nooit erbuiten. */
.kaart-onderdeel {
  margin-top: 2px;
  font-size: 1.12rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.rev {
  color: var(--muted);
  font-weight: 500;
}

.kaart-omschrijving {
  color: var(--muted);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* Het plaatje van een bon (0042): de 3D-weergave van het maakdeel, rechts naast de klant, het
   onderdeel en de omschrijving, in een vak met een vaste maat. Er verspringt niets als het plaatje
   binnenkomt of niet lukt (dan blijft het vak leeg). Een tegel zonder afbeelding heeft geen vak. */
.kaart-midden {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kaart-tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bon-beeld {
  flex: none;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--beeld-achter);
}

.bon-beeld--tegel { width: 64px; height: 64px; }
.bon-beeld--detail { float: right; width: 128px; height: 128px; margin: 0 0 10px 14px; }
.bon-beeld-img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 400px) {
  .bon-beeld--tegel { width: 56px; height: 56px; }
  .bon-beeld--detail { width: 96px; height: 96px; }
}

.kaart-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 10px;
}

.aantal { color: var(--muted); }
.aantal strong { color: var(--text); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.aantal-van { font-size: 0.88rem; }

/* Routebalk op de tegel: de hele route als pictogrammen, in volgorde.
   Gedaan gedempt met vinkje, huidige in accentkleur, rest gewoon zichtbaar. */
.routebalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
}

.ri-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ri {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line-sterk);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

/* Verbindingsstreepje naar de vorige stap: de volgorde blijft zichtbaar. */
.ri + .ri::before {
  content: "";
  position: absolute;
  right: calc(100% + 1.5px);
  top: 50%;
  width: 6px;
  height: 2px;
  margin-top: -1px;
  background: var(--line-sterk);
}

.ri--gereed {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--muted);
}

.ri--gereed > .icoon-bewerking { opacity: 0.6; }

.ri--huidig {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent-zacht);
}

.ri-vink {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--gereed);
  color: #fff;
}

.ri-vink svg { width: 10px; height: 10px; }

.ri-nog {
  color: var(--muted);
  font: 600 0.8rem/1.2 var(--mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kaart-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line-sterk);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
}

.tag--let-op { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }
.tag--snijjob { font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.tag--voorlopig { border-style: dashed; color: var(--muted); font-weight: 600; }

/* "voorlopig" naast een kop op het detail (leverdatum, route). */
.voorlopig {
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px dashed var(--line-sterk);
  border-radius: 4px;
  color: var(--muted);
  font: 600 0.68rem/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: none;
}
.tag--samen { border-color: var(--bezig); background: var(--bezig-zacht); color: var(--bezig-tekst); font-weight: 700; }
.tag--fout { border-color: var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); }

/* -------------------------------------------------------- stationkeuze --- */

.intro {
  max-width: 62ch;
  margin: 0 0 20px;
  color: var(--muted);
}

.station-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 14px;
}

.station-tegel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 116px;
  padding: 16px 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.station-tegel:hover { border-color: var(--line-sterk); }
.station-tegel:active { background: var(--panel-2); }

.station-tegel--alles { border-style: dashed; border-color: var(--line-sterk); }

.station-tegel[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-zacht);
}

.station-naam {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
}

.station-sub { color: var(--muted); }

.station-huidig {
  margin-top: 4px;
  color: var(--text);
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- detail --- */

.terug { margin: -6px 0 10px; }
.terug .knop { padding-left: 12px; }

.order-kop {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 16px 28px;
  align-items: start;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.wo-groot {
  font: 700 2.5rem/1.05 var(--mono);
  font-variant-numeric: tabular-nums;
}

.order-onderdeel {
  margin: 8px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.order-omschrijving {
  margin: 2px 0 0;
  color: var(--muted);
}

.order-gegevens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 4px 0 0;
}

.order-gegevens dt {
  color: var(--muted);
  font: 600 0.7rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-gegevens dd {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.order-lever { grid-column: span 2; }

.order-pdf { align-self: stretch; display: flex; }
.order-pdf .knop--pdf { flex: 1; }

.route-sectie { margin-top: 18px; }

.route {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.route-stap {
  --stap-kleur: var(--line-sterk);
  --stap-zacht: transparent;
  position: relative;
  flex: 1 0 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-top: 7px solid var(--stap-kleur);
  border-right: 1px solid var(--line);
  background: var(--stap-zacht);
  scroll-snap-align: start;
}

.route-stap:last-child { border-right: 0; }

.route-stap--gereed { --stap-kleur: var(--gereed); --stap-zacht: var(--gereed-zacht); }
.route-stap--bezig { --stap-kleur: var(--bezig); --stap-zacht: var(--bezig-zacht); }

.route-stap.is-huidig {
  box-shadow: inset 0 0 0 3px var(--text);
}

.route-stap--wacht.is-huidig { --stap-kleur: var(--text); }

.route-nr {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 600 0.7rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-icoon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text);
}

.route-stap--gereed .route-icoon { color: var(--gereed-tekst); }
.route-stap.is-huidig .route-icoon { color: var(--accent); }

.route-naam {
  font-weight: 700;
  line-height: 1.2;
}

.route-status {
  color: var(--muted);
  font-size: 0.88rem;
}

.route-stap--gereed .route-status { color: var(--gereed-tekst); font-weight: 600; }

.route-bundel {
  color: var(--bezig-tekst);
  font: 600 0.72rem/1.25 var(--mono);
}
.route-stap--bezig .route-status { color: var(--bezig-tekst); font-weight: 700; }
.route-stap.is-huidig .route-status { color: var(--text); font-weight: 700; }

.huidig {
  --stap-kleur: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px 28px;
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 8px solid var(--stap-kleur);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.huidig--bezig { --stap-kleur: var(--bezig); }
.huidig--onderbroken { --stap-kleur: var(--let-op-rand); }
.huidig--klaar { --stap-kleur: var(--gereed); }

.huidig-naam {
  margin: 4px 0 6px;
  font-size: 2.1rem;
  line-height: 1.1;
}

.huidig-toelichting {
  margin: 0 0 6px;
  font-weight: 600;
}

.huidig-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.status-stip {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--stap-kleur);
}

.huidig--bezig .status-stip { box-shadow: 0 0 0 4px var(--bezig-zacht); }

@media (prefers-reduced-motion: no-preference) {
  .huidig--bezig .status-stip { animation: puls 1.6s ease-in-out infinite; }
}

@keyframes puls {
  50% { box-shadow: 0 0 0 8px var(--bezig-zacht); }
}

.huidig-aantal {
  margin: 8px 0 0;
  color: var(--muted);
}

.huidig-aantal strong { color: var(--text); font-size: 1.2rem; }

.huidig-acties {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}

.tijden {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.tijden ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.tijden li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 14px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.tijden li:last-child { border-bottom: 0; }
.tijden-duur, .tijden-station { color: var(--muted); }

.tijden-bundel {
  grid-column: 1 / -1;
  color: var(--bezig-tekst);
  font-size: 0.9rem;
  font-weight: 600;
}

.gm-bundel {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 2px 8px;
  border: 1.5px solid var(--bezig);
  border-radius: 4px;
  background: var(--bezig-zacht);
  color: var(--bezig-tekst);
  font: 700 0.8rem/1.3 var(--mono);
}

/* Foto bij eindcontrole */

.foto-blok {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.foto-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.foto-mini {
  flex: none;
  width: 112px;
  height: 84px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  cursor: zoom-in;
}

.foto-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-leeg {
  margin: 0;
  color: var(--muted);
}

.foto-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.foto-knop { min-width: 150px; }

.foto-uitleg {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.foto-vlak {
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.foto-groot {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* ------------------------------------------------------------- lagen --- */

.afwijkingen {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.afwijkingen ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.afwijkingen li {
  padding-left: 14px;
  border-left: 4px solid var(--line-sterk);
}

.afwijkingen .afw--let-op { border-left-color: var(--let-op-rand); }
.afwijkingen .afw--fout { border-left-color: var(--rood); color: var(--rood-tekst); }

/* Een gereedmelding terugdraaien (beheer, migratie 0039): per stap de laatste melding en de knop. */
.terug-blok {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.terug-lijst {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.terug-stap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}

.terug-stap:first-child { border-top: 0; }

.terug-info {
  display: grid;
  flex: 1 1 14rem;
  gap: 2px;
  min-width: 0;
}

.terug-naam { font-weight: 700; }
.terug-waarom { color: var(--let-op); font-size: 0.9rem; font-weight: 600; }
.terug-knop { flex: 0 0 auto; min-height: 48px; }
.route-terug { color: var(--let-op); font-size: 0.78rem; font-weight: 600; }
.tijden-terug { color: var(--let-op); }

.laag-achtergrond {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 14, 18, 0.55);
  overscroll-behavior: contain;
}

.laag {
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.laag:focus { outline: none; }

.laag--midden {
  width: min(600px, 100%);
  padding: 22px;
}

.laag-titel {
  margin: 4px 0 10px;
  font-size: 1.6rem;
  line-height: 1.15;
}

.laag-tekst { margin: 0 0 16px; color: var(--muted); font-size: 1.05rem; }

.laag-voet {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.keuzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.knop--keuze {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 76px;
  padding: 12px 16px;
  border: 2px solid var(--line-sterk);
  background: var(--panel);
  text-align: left;
}

.knop--keuze.knop--primair { background: var(--knop-primair); border-color: var(--knop-primair); color: #fff; }
.knop--keuze.knop--gevaar { background: var(--knop-stop); border-color: var(--knop-stop); color: #fff; }

.keuze-label { font-size: 1.15rem; font-weight: 700; }
.keuze-sub { font-size: 0.9rem; font-weight: 500; opacity: 0.9; }

/* Schermvullend: gereedmelden */

.laag--vol {
  position: fixed;
  inset: 0;
  width: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}

.gm-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.gm-titel {
  margin: 2px 0 0;
  font-size: 1.7rem;
  line-height: 1.15;
}

.gm-sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-family: var(--mono);
}

.gm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 24px;
}

.gm-display {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 18px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gm-display.is-doel,
.stap-waarde.is-doel {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus);
}

.gm-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font: 700 0.75rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-waarde {
  font: 800 3.2rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.gm-eenheid {
  padding-bottom: 6px;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
}

.gm-hint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.88rem;
}

.numpad-doel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 48px;
  margin: 6px 0 0;
  color: var(--muted);
}

.numpad-doel strong { color: var(--text); }

.numpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.numpad button {
  min-height: 66px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  font: 700 1.9rem/1 var(--mono);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.numpad button:active { background: var(--panel-2); transform: translateY(1px); }

.numpad .numpad-functie {
  background: var(--panel-2);
  font: 700 1.1rem/1 var(--sans);
}

.gm-rechts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-klaar { margin: 0; }

.gm-rechts fieldset {
  margin: 0;
  padding: 6px 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.gm-rechts legend {
  padding: 0 6px;
  font-weight: 700;
}

.optioneel {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.afw-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
}

.afw-rij:last-child { border-bottom: 0; }

.afw-rij.heeft-waarde .afw-naam { color: var(--rood-tekst); font-weight: 700; }
.afw-rij.heeft-waarde .stap-waarde { color: var(--rood-tekst); }

.stapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stap-knop {
  width: 50px;
  height: 50px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: 700 1.6rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.stap-knop[disabled] { opacity: 0.4; cursor: not-allowed; }

.stap-waarde {
  min-width: 64px;
  height: 50px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1.4rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

.gm-uitleg {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.segment--tabs { margin-bottom: 4px; }

.segment button {
  min-height: 50px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1.1rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.segment button[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--panel);
}

.gm-som {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gm-som[data-soort="let-op"] { color: var(--rood-tekst); }
.gm-som[data-soort="info"] { color: var(--let-op); }
.gm-som[data-soort="ok"] { color: var(--gereed-tekst); }

.gm-melding {
  min-height: 1.45em;
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.gm-melding[data-soort="let-op"],
.gm-melding[data-soort="fout"] { color: var(--rood-tekst); }

.knop--bevestig {
  min-height: 88px;
  margin-top: auto;
}

/* Schermvullend: werktekening (PDF) als pop-up binnen de app. Zo veel mogelijk
   tekening (besluit 139): de kop is één regel, de knoppen blijven groot. */

.pdf-kop {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px 6px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

/* Bovenregel, titel en werkorder op één regel; te lang loopt af met een beletselteken. */
.pdf-titelblok {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  min-width: 0;
}

.pdf-titel {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--kop-kleur);
  font-family: var(--kop);
  font-size: 1.25rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

.pdf-acties {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px;
}

.pdf-acties .knop { min-height: 56px; }
.pdf-sluit { min-width: 120px; }

.pdf-vlak {
  flex: 1;
  display: flex;
  min-height: 0;
  background: var(--panel-2);
}

/* De pagina's, door de app zelf getekend (pdf.js op canvas): onder elkaar, scrollen
   in beide richtingen. De maat van een pagina zet pdfweergave.js. */
/* Passend is de hele pagina; is hij kleiner dan het vlak, dan staat hij in het midden.
   Met automatische marges, nooit met center-uitlijning: een ingezoomde pagina blijft
   zo tot aan de rand te scrollen. */
.pdf-lijst {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  scrollbar-gutter: stable; /* passend blijft passend, ook als de schuifbalk verschijnt */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--panel-2);
}

.pdf-pagina {
  position: relative;
  flex: none;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.pdf-pagina:first-child { margin-top: auto; }
.pdf-pagina:last-child { margin-bottom: auto; }

.pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Het scherpe stuk in beeld bij ver inzoomen, over het basisbeeld heen. */
.pdf-detail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.pdf-status {
  margin: auto;
  padding: 24px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Zoomen: grote knoppen onderaan, ook met werkhandschoenen goed te raken; de balk
   zelf zo laag als dat toelaat. */
.pdf-zoombalk {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.pdf-zoombalk[hidden] { display: none; }

.pdf-zoombalk .knop {
  flex: 1;
  min-height: 64px;
  font-size: 1.05rem;
}

/* Hele scherm: kop en knoppenbalk weg, in de hoek Knoppen (terug) en Sluiten. */
.pdf-zweef { display: none; }

.laag--pdf[data-volscherm] .pdf-kop,
.laag--pdf[data-volscherm] .pdf-zoombalk { display: none; }

.laag--pdf[data-volscherm] .pdf-zweef {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 2;
  display: flex;
  gap: 8px;
}

.pdf-zweef-knop {
  min-width: 64px;
  min-height: 64px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pdf-terugval {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: min(460px, calc(100% - 32px));
  margin: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}

.pdf-terugval p { margin: 0; font-size: 1.05rem; }

/* Voorbeeldtekening: een brede gele balk boven de tekening, zodat de vloer hem
   nooit als echte tekening leest. */
.pdf-voorbeeld {
  margin: 0;
  padding: 6px 20px;
  border-bottom: 2px solid var(--let-op-rand);
  background: var(--let-op-zacht);
  color: var(--let-op);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Knop van een voorbeeldtekening: gestreepte rand en een regel eronder. */
.knop--pdf.is-voorbeeld { border-style: dashed; border-color: var(--let-op-rand); }

.knop-pdf-tekst { display: grid; gap: 2px; text-align: left; }

.knop-pdf-sub {
  color: var(--let-op);
  font-size: 0.85rem;
  font-weight: 700;
}

/* --------------------------------------------------------------- toast --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 14px 24px;
  border-radius: 8px;
  background: var(--text);
  color: var(--panel);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  font-size: 1.15rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.toast.is-zichtbaar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast[data-soort="ok"]::before { content: "\2713\00a0\00a0"; }
.toast[data-soort="fout"] { background: var(--knop-stop); color: #fff; }

/* Een herkende scan die langer dan 150 ms zoekt (besluit 789, bezigNa in ui.js): een balk bovenin, zonder tussenscherm. */
body.is-scan-bezig::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--accent) 65%, transparent 100%);
  background-size: 200% 100%;
  animation: scan-bezig 0.9s linear infinite;
  pointer-events: none;
}

@keyframes scan-bezig {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

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

/* ----------------------------------------------------- smallere schermen --- */

@media (max-width: 1100px) {
  .order-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .order-pdf { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .huidig { grid-template-columns: minmax(0, 1fr); }
  .gm-body { grid-template-columns: minmax(0, 1fr); }
  .knop--bevestig { position: sticky; bottom: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
}

@media (max-width: 640px) {
  .kop { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .merk { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
  .merk-bedrijf { padding-top: 5px; font-size: 0.8rem; }
  .merk-naam { padding-left: 0; border-left: 0; }
  .omgeving { gap: 5px; font-size: 0.62rem; letter-spacing: 0.04em; }
  .inhoud { padding: 14px 16px 24px; }
  .voet { padding: 8px 16px; }
  .poort-midden { align-items: flex-start; padding: 20px 16px; }
  .poort-kaart { padding: 22px 18px 20px; }
  h1 { font-size: 1.7rem; }
  .order-kop { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .order-gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wo-groot { font-size: 2.1rem; }
  .huidig { padding: 16px; }
  .huidig-naam { font-size: 1.7rem; }
  .tijden li { grid-template-columns: minmax(0, 1fr) auto; }
  .gm-kop { padding: 10px 16px; }
  .pdf-kop { gap: 8px; padding: 6px 8px 6px 14px; }
  .pdf-bovenregel { display: none; }
  .pdf-titelblok { flex-direction: column; align-items: flex-start; }
  .pdf-titel { font-size: 1.05rem; }
  .pdf-sub { font-size: 0.85rem; }
  .pdf-sluit { min-width: 0; padding: 8px 14px; }
  .pdf-acties [data-download] { min-width: 56px; padding: 8px; }
  .pdf-acties [data-download] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pdf-zoombalk { padding: 6px 8px; gap: 6px; }
  .pdf-zoombalk .knop { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 0.85rem; }
  .pdf-voorbeeld { padding: 6px 14px; font-size: 0.9rem; }
  .pdf-lijst { padding: 8px; }
  .gm-titel { font-size: 1.4rem; }
  .gm-body { padding: 14px 16px 16px; }
  .gm-waarde { font-size: 2.8rem; }
  .numpad button { min-height: 60px; }
}

@media (max-width: 400px) {
  .merk-naam { font-size: 1rem; }
  /* Alleen de stip blijft zichtbaar; de tekst blijft er voor schermlezers. */
  .omgeving-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .taal-code { min-width: 28px; padding: 0 2px; }
  .station-knop { min-width: 0; max-width: 48vw; padding-left: 10px; padding-right: 32px; }
  .station-knop::after { right: 12px; }
  .huidig-acties { grid-auto-flow: row; }
  .knop--groot { min-height: 88px; }
  .knop--keuze { min-height: 64px; }
  .wo { font-size: 1.6rem; }
  .kaart-kop { flex-wrap: wrap; }
}

/* =============================================================================
   Metagro Works, de schil met modules (menu en startscherm) en de module
   Engineering. Wie alleen MPL Works heeft, ziet hier niets van: zonder
   body.met-menu blijft de opmaak precies zoals hierboven.
   ============================================================================= */

/* ------------------------------------------------------------ schil/menu --- */

.schil {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-knop {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--doel);
  min-width: var(--doel);
  margin: 0 -4px 0 -8px;
  padding: 0 10px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: 700 0.82rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.menu-knop[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-zacht); }

/* Drie streepjes, met één element en twee schaduwen. */
.menu-streepjes {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.modulemenu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 10px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  font-size: 0.98rem;
}

.modulemenu a {
  display: flex;
  align-items: center;
  min-height: var(--doel);
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.modulemenu a:hover { background: var(--panel-2); }

.menu-start {
  margin-bottom: 6px;
  color: var(--merk-tekst) !important;
  font-family: var(--kop);
  font-weight: 800;
}

.menu-lijst,
.menu-paginas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-lijst { display: grid; gap: 4px; }

.menu-modulekop { font-weight: 700; }

.menu-module.is-open > .menu-modulekop { color: var(--merk-tekst); }

.menu-module.is-open > .menu-modulekop::before {
  content: "";
  flex: none;
  width: 4px;
  height: 20px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--accent);
}

.menu-paginas {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.menu-pagina { color: var(--muted) !important; font-size: 0.95rem; }

.modulemenu a.is-actief {
  background: var(--accent-zacht);
  color: var(--merk-tekst) !important;
  font-weight: 700;
}

/* Breed scherm: een smalle rail links, altijd zichtbaar; geen menuknop. */
@media (min-width: 900px) {
  .menu-knop { display: none; }

  body.met-menu .schil {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }

  body.met-menu .modulemenu {
    position: sticky;
    top: 68px;
    min-height: calc(100vh - 68px);
  }
}

/* Smal scherm: een lade achter de knop Menu, over de inhoud heen. */
@media (max-width: 899.98px) {
  body.met-menu:not(.menu-open) .modulemenu { display: none; }

  body.met-menu.menu-open .modulemenu {
    position: fixed;
    top: 68px;
    left: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 86vw);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }

  body.met-menu.menu-open .schil::after {
    content: "";
    position: fixed;
    inset: 68px 0 0;
    z-index: 25;
    background: rgba(10, 14, 18, 0.35);
  }
}

/* Het label Voorbeeld in de kopregel (Engineering in Voorbeeld, Magazijn): geel, zoals Demodata. */
body[data-bron="nep"] .omgeving,
body[data-bron="voorbeeld"] .omgeving {
  border-color: var(--let-op-rand);
  border-style: dashed;
  background: var(--let-op-zacht);
  color: var(--let-op);
}

body[data-bron="nep"] .omgeving-stip,
body[data-bron="voorbeeld"] .omgeving-stip { background: var(--let-op-rand); }

/* ------------------------------------------------------------ startscherm --- */

/* Het startscherm heeft geen menu: de tegels vullen de volle breedte. */
.module-raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.module-tegel {
  min-height: 150px;
  border-top: 4px solid var(--accent);
  text-decoration: none;
}

.module-tegel .bron-label { margin-top: 6px; }

/* ------------------------------------------------------------ engineering --- */

.eng { display: grid; gap: 18px; }
.eng > .paginakop { margin-bottom: 0; }
.eng > .terug { margin-bottom: -8px; }

.eng-blok {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.eng-komt {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 8px;
  border: 1.5px dashed var(--let-op-rand);
  border-radius: 4px;
  background: var(--let-op-zacht);
  color: var(--let-op);
  font: 800 0.74rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eng-uitleglijst { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.eng-blok > p { max-width: 70ch; margin: 0; }

.eng-teller.is-actief { color: var(--bezig-tekst); font-weight: 700; }

.eng-leeg { margin: 0; color: var(--muted); }
.eng-klein { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; }

.eng-groot {
  margin: 0;
  font: 800 1.9rem/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.eng-groot.is-open { color: var(--oranje-tekst); }

/* Filter op status: knoppen van 48 px, de actieve omgekeerd. */
.eng-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eng-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--doel);
  padding: 0 14px;
  border: 1.5px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 600 0.95rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.eng-filter[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }

.eng-filter-n {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: 700 0.8rem/1.2 var(--mono);
  text-align: center;
}

.eng-filter[aria-pressed="true"] .eng-filter-n { background: var(--panel); }

/* Tabellen (overzicht en lijst): rijen als raster, op een smal scherm gestapeld. */
.eng-tabel {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  overflow: hidden;
}

.eng-tabel-kop,
.eng-tabel-rij {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  padding: 10px 16px;
}

.eng-tabel-kop {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 700 0.74rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eng-tabel-rij {
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.eng-tabel-rij:last-child { border-bottom: 0; }
a.eng-tabel-rij:hover { background: var(--panel-2); }

.eng-kenmerk { font: 700 1.1rem/1.2 var(--mono); }
.eng-cel-klein { color: var(--muted); font-size: 0.92rem; }
.eng-cel-label { display: none; }

/* De uitgerekende lijst: code, omschrijving, aantal, beslist door, actie. */
.eng-lijst .eng-tabel-kop,
.eng-lijst .eng-tabel-rij {
  grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1.8fr) 64px minmax(0, 1.4fr) minmax(130px, auto);
}

.eng-code { font: 700 0.95rem/1.2 var(--mono); }
.eng-beslist { color: var(--muted); font-size: 0.9rem; }
.eng-actie { justify-self: end; }

/* De lagen van de lijst springen in. */
.eng-niveau-2 .eng-omschrijving { padding-left: 18px; }
.eng-niveau-3 .eng-omschrijving { padding-left: 36px; }
.eng-niveau-4 .eng-omschrijving { padding-left: 54px; }
.eng-niveau-1 .eng-omschrijving { font-weight: 700; }

.eng-niveau-2 .eng-omschrijving::before,
.eng-niveau-3 .eng-omschrijving::before,
.eng-niveau-4 .eng-omschrijving::before {
  content: "\2514\00a0";
  color: var(--line-sterk);
}

.eng-regel.is-weg { background: var(--panel-2); }
.eng-regel.is-weg .eng-code,
.eng-regel.is-weg .eng-omschrijving,
.eng-regel.is-weg .eng-cel-klein {
  color: var(--muted);
  text-decoration: line-through;
}

.eng-regel.is-gecorrigeerd { box-shadow: inset 4px 0 0 var(--bezig); }
.eng-regel.is-special { box-shadow: inset 4px 0 0 var(--let-op-rand); background: var(--let-op-zacht); }

.eng-lijst-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: -8px;
}

.eng-lijst-kop .sectietitel { margin: 0; }
.eng-lijst-acties { display: flex; flex-wrap: wrap; gap: 8px; }

/* Aanvinken: links de groepen, rechts de samenvatting die meeloopt. */
.eng-twee {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  align-items: start;
  gap: 18px;
}

.eng-groepen { display: grid; gap: 14px; }

.eng-groep {
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.eng-groep-naam {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  color: var(--kop-kleur);
  font-family: var(--kop);
  font-size: 1.2rem;
  font-weight: 700;
}

fieldset.eng-groep > .eng-groep-naam { float: left; width: 100%; }
fieldset.eng-groep > .eng-groep-naam + * { clear: both; }

.eng-opties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.eng-optie-blok { display: grid; gap: 6px; align-content: start; }

.eng-optie {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 600 1.05rem/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.eng-optie[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); }

.eng-vink {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line-sterk);
  border-radius: 4px;
  background: var(--panel);
}

.eng-optie[aria-pressed="true"] .eng-vink {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--panel);
}

.eng-optie.is-onmogelijk,
.eng-optie[disabled] {
  border-style: dashed;
  background: var(--panel-2);
  color: var(--muted);
  cursor: not-allowed;
}

.eng-reden { margin: 0; color: var(--muted); font-size: 0.86rem; }

/* De vaste vraag onder een gekozen optie: verplicht, geel zolang hij open staat. */
.eng-vraag {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.eng-vraag.is-open { border: 1.5px dashed var(--let-op-rand); background: var(--let-op-zacht); }
.eng-vraag-tekst { font-weight: 700; }

.eng-verplicht {
  color: var(--let-op);
  font: 800 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eng-vraag:not(.is-open) .eng-verplicht { display: none; }

.eng-antwoorden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.eng-antwoord {
  min-height: var(--doel);
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.eng-antwoord[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }

.eng-special,
.veld textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1.05rem/1.35 var(--sans);
  resize: vertical;
}

.eng-special:focus,
.veld textarea:focus { border-color: var(--focus); }
.veld textarea[aria-invalid="true"] { border-color: var(--rood); }

.eng-samenvatting {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.eng-samenvatting .sectietitel { margin: 10px 0 2px; }
.eng-samenvatting .sectietitel:first-child { margin-top: 0; }

.eng-keuzelijst,
.eng-open {
  margin: 0;
  padding-left: 18px;
}

.eng-open { color: var(--oranje-tekst); }
.eng-special-sv { margin: 4px 0 0; }

.eng-knoppen { display: grid; gap: 8px; margin-top: 12px; }

/* Nakijken: keuzes en klok bovenaan, dan de lijst, de correcties en de eindknoppen. */
.eng-kop-rij {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 14px;
}

.eng-special-groot {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 4px solid var(--let-op-rand);
  background: var(--let-op-zacht);
  font-size: 1.05rem;
}

.eng-klok { display: grid; gap: 8px; align-content: start; }
.eng-klok.is-lopend { border-color: var(--bezig); box-shadow: inset 0 4px 0 var(--bezig); }
.eng-klok.is-lopend .eng-groot { color: var(--bezig-tekst); }
.eng-klok-knop { color: #fff; border: 0; }

.eng-correcties { display: grid; gap: 10px; }
.eng-correcties .sectietitel { margin: 0; }

.eng-bakjes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.eng-bakje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1.5px solid;
  border-radius: 4px;
  font: 700 0.85rem/1.3 var(--sans);
  white-space: nowrap;
}

.eng-bakje--1 { border-color: var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); }
.eng-bakje--2 { border-color: var(--bezig); background: var(--bezig-zacht); color: var(--bezig-tekst); }
.eng-bakje--3 { border-color: var(--oranje); background: var(--oranje-zacht); color: var(--oranje-tekst); }

.eng-correctielijst {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eng-correctielijst li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.eng-notitie { display: block; color: var(--muted); font-size: 0.9rem; }

.eng-eindknoppen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* De laag Correctie: het bakje kiezen met drie grote knoppen. */
.eng-bakjekeuze { margin: 0; padding: 0; border: 0; }
.eng-bakjekeuze legend { margin-bottom: 6px; padding: 0; font-weight: 600; }

.eng-bakjeknoppen { display: grid; gap: 8px; }

.eng-bakjeknop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  border: 2px solid;
  border-radius: var(--radius);
  font: 600 1rem/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.eng-bakjeknop strong { font: 800 1.2rem/1 var(--mono); }
.eng-bakjeknop[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--text); }

.laag-voet--twee { justify-content: space-between; gap: 10px; }

@media (max-width: 980px) {
  .eng-twee { grid-template-columns: minmax(0, 1fr); }
  .eng-samenvatting { position: static; }
  .eng-kop-rij { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .eng-tabel-kop { display: none; }

  .eng-tabel-rij,
  .eng-lijst .eng-tabel-rij {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 12px 14px;
  }

  .eng-tabel-rij > :first-child { grid-column: 1; }
  .eng-cel-label { display: inline; }

  .eng-lijst .eng-tabel-rij > .eng-code { grid-column: 1; }
  .eng-lijst .eng-tabel-rij > .eng-omschrijving { grid-column: 1 / -1; }
  .eng-lijst .eng-tabel-rij > .eng-cel-klein { grid-column: 2; grid-row: 1; }
  .eng-lijst .eng-tabel-rij > .eng-beslist { grid-column: 1; }
  .eng-lijst .eng-tabel-rij > .eng-actie { grid-column: 2; }
  .eng-lijst .eng-tabel-rij > .eng-actie:empty { display: none; }

  .eng-eindknoppen { grid-template-columns: minmax(0, 1fr); }
  .eng-correctielijst li { grid-template-columns: auto minmax(0, 1fr); }
  .eng-correctielijst li > .knop { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  .menu-knop-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-knop { padding: 0 14px; }
  .eng-groot { font-size: 1.6rem; }
  .eng-filter { padding: 0 10px; }
}

/* Engineering, na de controle: de lopende klok in het overzicht, en correcties
   die niet (meer) meetellen. */
.eng-klokbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border: 1.5px solid var(--bezig);
  border-radius: var(--radius);
  background: var(--bezig-zacht);
  color: var(--bezig-tekst);
  font-weight: 600;
}

.eng-klokbalk strong { font: 800 1.1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.eng-klokbalk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }

.eng-correctielijst li.is-vervallen {
  border-style: dashed;
  border-color: var(--rood);
  background: var(--panel-2);
}

.eng-correctielijst li.is-vervallen .eng-correctie-tekst > strong,
.eng-correctielijst li.is-vervallen .eng-bakje { opacity: 0.6; }

.eng-vervallen {
  display: block;
  margin-top: 2px;
  color: var(--rood-tekst);
  font-size: 0.88rem;
  font-weight: 700;
}

/* -------------------------------------------- kopregel: module en account --- */

/* Met meer modules: naast METAGRO de naam van de module als knop naar het
   startscherm (ook op een smal scherm). De modulenaam in het merk zelf valt dan weg. */
.module-knop {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--doel);
  padding: 0 12px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-zacht);
  color: var(--merk-tekst);
  font-family: var(--kop);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.module-knop:hover { border-color: var(--focus); }

/* Vier blokjes: het teken voor "modules kiezen". */
.module-knop-icoon {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 8px 8px 0;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 8px 0 0 var(--accent), 0 8px 0 var(--accent), 8px 8px 0 var(--accent);
}

body.met-moduleknop .merk .merk-naam { display: none; }

/* Met welk soort account je bent ingelogd: rustig, naast de taalknop. */
.account {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--line-sterk);
  border-radius: 4px;
  color: var(--muted);
  font: 700 0.7rem/1.1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.account:not([hidden]) ~ .taal-knop { margin-left: 0; }

.account-regel { color: var(--text); }

/* Met het menu (Menu, de moduleknop, Live, het account, taal, thema, station) mag de kopregel tot
   de rail (900 px) over twee rijen, nooit buiten het scherm (02-11: tot dan alleen tot 640 px, en
   op 768 liep het stationknopje er rechts af). De lade en de rail rekenen met de echte hoogte van
   de kopregel (app.js zet --kop-h). Op een smal scherm (640 px) ook kleiner. */
@media (max-width: 899.98px) {
  body.met-menu .kop { flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 640px) {
  .module-knop { padding: 0 10px; font-size: 0.95rem; }
  .account { padding: 3px 6px; font-size: 0.6rem; letter-spacing: 0.03em; }
}

@media (max-width: 899.98px) {
  body.met-menu.menu-open .modulemenu { top: var(--kop-h, 68px); }
  body.met-menu.menu-open .schil::after { inset: var(--kop-h, 68px) 0 0; }
}

@media (min-width: 900px) {
  body.met-menu .modulemenu { top: var(--kop-h, 68px); min-height: calc(100vh - var(--kop-h, 68px)); }
}

/* ------------------------------------------------------- Hier afgerond --- */

.afgerond { margin-top: 28px; }
.afgerond .sectietitel { display: flex; align-items: center; gap: 8px; }

.afgerond-n {
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--groen-zacht);
  color: var(--groen-tekst);
  font-weight: 800;
}

.afgerond-uitleg { max-width: 70ch; margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; }

.afgerond-lijst {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Een regel van Hier afgerond: het bonnummer met Live, het onderdeel, het aantal gereed met het
   moment, en waar de bon nu ligt. Een regel die meeschuift (flex-wrap), geen vast raster: past iets
   er niet meer naast, dan komt het op een eigen regel eronder (op smal het aantal en "Nu bij"
   onder het onderdeel). Een lange naam breekt af binnen zijn eigen vak. Zo ligt er op geen enkele
   breedte iets over elkaar heen (02-11; het raster liet het onderdeel tot nul krimpen, en dan
   liep de naam over het aantal heen). */
.afgerond-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--groen);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}

.afgerond-rij:hover { border-color: var(--line-sterk); border-left-color: var(--groen); }

.afgerond-kop { flex: 0 0 auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: min(150px, 100%); max-width: 100%; }
.afgerond-kop .wo { font: 800 1.1rem/1.1 var(--mono); }
.afgerond-onderdeel { flex: 1 1 12em; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.afgerond-aantal { flex: 0 1 auto; min-width: 0; color: var(--muted); }
.afgerond-aantal strong { color: var(--text); }
.afgerond-moment { margin-left: 4px; font-size: 0.85rem; white-space: nowrap; }
.afgerond-nu { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; }
.afgerond-meer { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Smal scherm met één module (de vloer): het accountlabel komt onder het merk,
   zodat het stationknopje zijn breedte houdt. De kopregel wordt iets hoger. Tot 600 px
   (02-11; was 480): sinds de knop Licht of donker (vanaf 401 px) liep het stationknopje
   tussen 481 en ongeveer 560 px rechts buiten het scherm. */
@media (max-width: 600px) {
  body.met-account:not(.met-menu) .kop { padding-bottom: 16px; }
  body:not(.met-menu) .account {
    position: absolute;
    left: 16px;
    bottom: 3px;
    padding: 0;
    border: 0;
    font-size: 0.55rem;
    line-height: 1;
  }
  body:not(.met-menu) .account:not([hidden]) ~ .taal-knop { margin-left: auto; }
}

/* Nieuwe versie van de app: een rustige balk onder de kopregel, tikken vernieuwt. */
.versie-balk {
  background: var(--accent-zacht);
  border-bottom: 1px solid var(--accent);
}

.versie-knop {
  display: block;
  width: 100%;
  min-height: var(--doel);
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--merk-tekst);
  font: 600 0.95rem/1.3 var(--sans);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

/* Het menu binnen een module: bovenaan terug naar Metagro Works, dan de module en zijn pagina's. */
.modulemenu .menu-terug {
  gap: 6px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.menu-kop {
  margin: 6px 12px 4px;
  color: var(--merk-tekst);
  font-family: var(--kop);
  font-size: 1.05rem;
  font-weight: 800;
}

.modulemenu > .menu-paginas {
  margin: 0;
  padding-left: 0;
  border-left: 0;
  gap: 4px;
}

.modulemenu > .menu-paginas .menu-pagina { color: var(--text) !important; font-size: 1rem; }

/* =============================================================================
   Engineering v2.1: de kruisjeslijst in de indeling van het papier
   ============================================================================= */

/* De standbalk: Voorbeeld (geel) of Live (groen), een bewuste keuze. */
.ek-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border: 1.5px dashed var(--let-op-rand);
  border-radius: var(--radius);
  background: var(--let-op-zacht);
  color: var(--let-op);
}

.ek-stand--live { border: 1.5px solid var(--groen); background: var(--groen-zacht); color: var(--groen-tekst); }
.ek-stand-tekst { flex: 1 1 260px; font-weight: 600; }
.ek-rol { margin-left: 6px; font-weight: 700; white-space: nowrap; }
.ek-begin { flex-basis: 100%; margin: 0; color: var(--rood-tekst); font-weight: 600; }
.veld-fout { margin: 6px 0 0; color: var(--rood-tekst); font-weight: 600; }
.ek-versie { font: 700 0.85rem/1 var(--mono); color: var(--muted); }
.ek-klein { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; }
.ek-tractie { margin: 0; color: var(--muted); }
.ek-ouder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

.ek-twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 18px;
}

.ek-lijst { display: grid; gap: 14px; min-width: 0; }

.ek-zij {
  position: sticky;
  top: calc(var(--kop-h, 68px) + 16px);
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.ek-zij .sectietitel { margin: 10px 0 2px; }
.ek-zij .sectietitel:first-child { margin-top: 0; }
.ek-standnaam { margin: 0; font-weight: 800; font-size: 1.05rem; }
.ek-open, .ek-waarschuwingen, .ek-zinnen { margin: 0; padding-left: 18px; }
.ek-open { color: var(--oranje-tekst); }
.ek-waarschuwingen { color: var(--muted); }

/* De kop van de order: projectnummer (vast patroon), aantal, leverdatum, model. */
.kl-kop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.ek-veldlabel { display: block; margin-bottom: 6px; font-weight: 600; }
.ek-model { display: block; padding: 12px 0; font: 700 1.05rem/1.2 var(--mono); }

/* Een blok van de lijst: Standard, Standard Options, Additional comments. */
.kl-blok {
  padding: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  overflow: hidden;
}

.kl-blokkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding: 8px 16px;
  background: var(--merk-navy);
  color: #fff;
  font: 800 1rem/1.2 var(--kop);
}

.kl-blokkop .ek-versie { color: #fff; }
.kl-opmerking { padding-bottom: 12px; }
.kl-opmerking textarea, .kl-opmerking .veld-hint { margin: 4px 16px 0; width: calc(100% - 32px); }

.kl-opmerking textarea {
  min-height: 72px;
  padding: 10px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1.05rem/1.35 var(--sans);
  resize: vertical;
}

.kl-opmerking textarea:focus { border-color: var(--focus); }

/* Een regel van de lijst: groep, tekst, kruisje, artikelnummer rechts. */
.kl-rij {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 56px minmax(70px, 96px);
  align-items: center;
  gap: 4px 12px;
  min-height: 52px;
  padding: 2px 16px;
  border-bottom: 1px solid var(--line);
}

.kl-groepblok { border-bottom: 2px solid var(--line-sterk); }
.kl-groepblok:last-child { border-bottom: 0; }
.kl-groep { color: var(--kop-kleur); font-weight: 800; }
.kl-kiesEen { display: block; color: var(--muted); font: 600 0.7rem/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.kl-tekst { overflow-wrap: anywhere; }
.kl-opm, .kl-waarde { color: var(--muted); font-style: italic; }
.kl-artikel { justify-self: end; color: var(--muted); font: 600 0.9rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.kl-vak { justify-self: center; }
.kl-std.is-vervallen .kl-naam { color: var(--muted); text-decoration: line-through; }
.kl-vervalt { display: block; color: var(--rood-tekst); font-size: 0.86rem; font-weight: 700; }
.kl-vervalt--misschien { color: var(--muted); font-weight: 600; }
.kl-optie.is-gekozen { background: var(--accent-zacht); }

/* Het kruisje: zoals op het papier, een vak met een kruis. */
.kl-kruisje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--doel);
  height: var(--doel);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.kl-kruisje[disabled] { cursor: not-allowed; opacity: 0.45; }

.kl-kruis {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 2px solid var(--text);
  border-radius: 3px;
  background: var(--panel);
}

.kl-kruis.is-aan::before,
.kl-kruis.is-aan::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--groen);
}

.kl-kruis.is-aan::before { transform: translate(-50%, -50%) rotate(45deg); }
.kl-kruis.is-aan::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Het slotje: vast, zit er altijd bij. */
.kl-slot {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 14px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--muted);
}

.kl-slot::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -9px;
  width: 8px;
  height: 9px;
  border: 2px solid var(--muted);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* Regels inline bij het kruisje, zoals de opmerkingen tussen haakjes op het papier. */
.kl-inline, .kl-altijd {
  display: grid;
  gap: 6px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.kl-melding, .kl-conflict { margin: 0; }
.kl-melding strong { color: var(--let-op); }
.kl-conflict strong { color: var(--rood-tekst); }
.kl-waarom { display: block; color: var(--muted); font-size: 0.86rem; }
.kl-waarom-label { font-weight: 700; }

.kl-vraag {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
}

.kl-vraag.is-open { border-style: dashed; border-color: var(--let-op-rand); background: var(--let-op-zacht); }
.kl-antwoorden { display: flex; flex-wrap: wrap; gap: 8px; }

.kl-antwoord {
  min-width: 96px;
  min-height: var(--doel);
  padding: 0 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.kl-antwoord[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }

.kl-hoortbij {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-left: 4px solid var(--line-sterk);
  border-radius: 4px;
  background: var(--panel);
}

.kl-hoortbij p { margin: 0; }
.kl-hoortbij.is-open { border-left-color: var(--oranje); }
.kl-hoortbij.is-voorstel { border-left-style: dashed; }
.kl-hoortbij.is-voldaan { border-left-color: var(--groen); }
.kl-ok { color: var(--groen-tekst); font-weight: 700; }
.kl-uitweg { color: var(--let-op); }
.kl-aanbod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-reden { display: block; color: var(--muted); font-size: 0.86rem; }

/* Versie 2 van de lijst (05-10): zoeken, subopties, keuzes met dimensies, uitgrijzen met reden, hulp. */
.ek-lijst [hidden] { display: none !important; }
.kl-zoek { display: grid; gap: 6px; }
.kl-zoek label { font-weight: 700; }

.kl-zoek input {
  width: 100%;
  min-height: var(--doel);
  padding: 8px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1.05rem/1.3 var(--sans);
}

.kl-zoek input:focus { border-color: var(--focus); }
.kl-zoek .veld-hint { margin: 0; }
.kl-optie.is-grijs .kl-tekst { color: var(--muted); }
.kl-optie.is-grijs .kl-reden { color: var(--text); }
.kl-sub .kl-optie .kl-tekst, .kl-dimwaarde .kl-tekst { position: relative; padding-left: 24px; }

.kl-sub .kl-optie .kl-tekst::before, .kl-dimwaarde .kl-tekst::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.15em;
  width: 11px;
  height: 0.65em;
  border-left: 2px solid var(--line-sterk);
  border-bottom: 2px solid var(--line-sterk);
}

.kl-dimkop { min-height: 40px; }
.kl-dimnaam { font-weight: 800; }
.kl-uitkomst { background: var(--panel-2); }
.kl-uitkomst-label { color: var(--muted); font-weight: 700; }
.kl-help { display: block; color: var(--muted); font-size: 0.86rem; }

.kl-help::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 0.75em/1 var(--mono);
  vertical-align: 0.1em;
}

.kl-help--rij { padding: 4px 16px 8px; border-bottom: 1px solid var(--line); }
.ek-status--vrij { border-style: solid; border-color: var(--let-op-rand); color: var(--let-op); }

.vel-soort {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--line-sterk);
  border-radius: 3px;
  color: var(--muted);
  font: 700 0.68rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vel-status--vrij { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--text); }
.vel-status--vrij .vel-vrij { margin-top: 4px; }
.vel-tabel tr.vel-sub td:not(.vel-vak, .vel-nr) { padding-left: 26px; }

.ek-status {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed var(--line-sterk);
  border-radius: 4px;
  color: var(--muted);
  font: 700 0.7rem/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ek-status--klopt { border-style: solid; border-color: var(--groen); color: var(--groen-tekst); }
.ek-status--opDeLijst { border-style: solid; }

@media (max-width: 980px) {
  .ek-twee { grid-template-columns: minmax(0, 1fr); }
  .ek-zij { position: static; }
}

@media (max-width: 640px) {
  .kl-rij {
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-areas: "groep groep" "tekst vak" "artikel vak";
    padding: 6px 12px;
  }

  .kl-groep { grid-area: groep; }
  .kl-groep:empty { display: none; }
  .kl-tekst { grid-area: tekst; }
  .kl-vak { grid-area: vak; }
  .kl-artikel { grid-area: artikel; justify-self: start; }
  .kl-artikel:empty { display: none; }
  .kl-inline, .kl-altijd { padding: 8px 12px 10px; }
}

/* =============================================================================
   Engineering v2.1: de afdrukken (ingevulde kruisjeslijst, blad, vragen)
   Op het scherm een vel; bij afdrukken alleen het vel, zwart op wit, A4.
   ============================================================================= */

.ek-afdruk, .ek-alleen-scherm { display: grid; gap: 16px; }

.vel {
  max-width: 820px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--schaduw);
}

.vel-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--kop-kleur);
}

.vel-titel { margin: 0; font: 800 1.4rem/1.2 var(--kop); color: var(--kop-kleur); }
.vel-lijstnaam { margin: 4px 0 0; font-weight: 600; }

.vel-voorbeeld {
  padding: 4px 10px;
  border: 2px dashed var(--let-op-rand);
  border-radius: 4px;
  color: var(--let-op);
  font: 800 0.85rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vel-gegevens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 8px 16px;
  margin: 14px 0;
}

.vel-gegevens div { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.vel-gegevens dt { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.vel-gegevens dd { min-height: 1.4em; margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.vel-gegevens--invul dd { min-height: 2em; }

.vel-tabel { width: 100%; margin: 14px 0 0; border-collapse: collapse; font-size: 0.95rem; }
.vel-tabel caption { padding: 6px 10px; background: var(--merk-navy); color: #fff; font: 800 1rem/1.2 var(--kop); text-align: left; caption-side: top; }
.vel-tabel th, .vel-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vel-tabel thead th { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.vel-tabel tbody th { width: 22%; color: var(--kop-kleur); font-weight: 800; }
.vel-tabel em { color: var(--muted); }
.vel-groep { border-top: 2px solid var(--line-sterk); }
.vel-vak { width: 60px; text-align: center !important; }
.vel-nr { width: 110px; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vel-tabel--blad .vel-nr { width: 120px; }
.vel-tussenkop th { padding-top: 12px; color: var(--kop-kleur); font-weight: 800; }
.vel-tabel tr.is-weg :is(.vel-tekst, td.vel-nr) { color: var(--muted); text-decoration: line-through; }
.vel-tabel tr.is-gekozen td { font-weight: 600; }
.vel-notenrij td { padding-top: 0; border-bottom: 1px solid var(--line); }
.vel-vervalt { display: block; color: var(--rood-tekst); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.vel-vervalt--misschien { color: var(--muted); font-weight: 600; }

.vel-kruis {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  vertical-align: -3px;
}

.vel-kruis.is-aan::before,
.vel-kruis.is-aan::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.vel-kruis.is-aan::before { transform: translate(-50%, -50%) rotate(45deg); }
.vel-kruis.is-aan::after { transform: translate(-50%, -50%) rotate(-45deg); }

.vel-noten { display: grid; gap: 2px; }
.vel-noot { margin: 0; font-size: 0.88rem; }
.vel-antwoord { padding: 0 6px; border: 1px solid var(--line-sterk); border-radius: 3px; font-weight: 700; }

.vel-blok { margin-top: 18px; }
.vel-blokkop { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--kop-kleur); font: 800 1.05rem/1.2 var(--kop); color: var(--kop-kleur); }
.vel-vrij { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vel-lijst { margin: 0; padding-left: 20px; }
.vel-uitleg { margin: 4px 0; color: var(--muted); font-size: 0.9rem; }
.vel-intern { padding: 8px 10px; border: 1.5px dashed var(--line-sterk); border-radius: var(--radius); }

.vel-status { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius); border: 2px solid; }
.vel-status strong { font: 800 1.15rem/1.2 var(--kop); }
.vel-status--compleet { border-color: var(--groen); background: var(--groen-zacht); color: var(--groen-tekst); }
.vel-status--open { border-color: var(--oranje); background: var(--oranje-zacht); color: var(--oranje-tekst); }
.vel-status .vel-lijst { margin-top: 6px; }

.vel-actie { display: inline-block; padding: 1px 8px; border: 1.5px solid var(--line-sterk); border-radius: 3px; font-weight: 800; white-space: nowrap; }
.vel-actie--houden { border-color: var(--groen); color: var(--groen-tekst); }
.vel-actie--wegstrepen { border-color: var(--rood); color: var(--rood-tekst); }
.vel-actie--vervangen { border-color: var(--oranje); color: var(--oranje-tekst); }

.vel-invul { width: 40%; }
.vel-tabel--invul td.vel-invul { border-bottom: 1.5px solid var(--line-sterk); }

.vel-vragen { margin: 10px 0 0; padding-left: 22px; }
.vel-vraag { padding: 10px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.vel-vraagtekst { margin: 0; font-weight: 700; }
.vel-bij { margin: 2px 0 0; color: var(--muted); font-size: 0.88rem; }
.vel-antwoorden { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 8px 0 0; }
.vel-keuze { display: inline-flex; align-items: center; gap: 8px; }
.vel-schrijfregels { display: grid; gap: 26px; padding: 18px 0 6px; }
.vel-schrijfregels span { border-bottom: 1px solid var(--line-sterk); }

.vel-voet { margin: 22px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }

@media (max-width: 640px) {
  .vel { padding: 16px 12px; }
  .vel-tabel { font-size: 0.88rem; }
  .vel-tabel tbody th { width: auto; overflow-wrap: anywhere; }
  .vel-nr { width: auto; white-space: normal; overflow-wrap: anywhere; }
  .vel-vak { width: 40px; }
  .vel-tabel tr.vel-sub td:not(.vel-vak, .vel-nr) { padding-left: 16px; }
}

/* Alleen de schermen van Engineering; afdrukken in MPL Works blijft zoals het was. */
@page vel { size: A4; margin: 14mm 12mm; }

@media print {
  body[data-route^="eng-"] { background: #fff !important; }

  body[data-route^="eng-"] :is(.kop, .versie-balk, .modulemenu, .voet, .toast, .ek-alleen-scherm, .menu-knop, .poort) { display: none !important; }
  body[data-route^="eng-"] :is(.app:not([hidden]), .schil, .inhoud, .view) { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; background: #fff !important; }

  /* Zwart op wit, ook als het scherm donker staat. */
  .vel {
    --text: #000;
    --muted: #333;
    --panel: #fff;
    --panel-2: #fff;
    --line: #999;
    --line-sterk: #555;
    --kop-kleur: #000;
    --merk-navy: #000;
    --groen: #000;
    --groen-zacht: #fff;
    --groen-tekst: #000;
    --rood: #000;
    --rood-tekst: #000;
    --oranje: #000;
    --oranje-zacht: #fff;
    --oranje-tekst: #000;
    --let-op: #000;
    --let-op-rand: #000;
    --let-op-zacht: #fff;
    page: vel;
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
    color: #000;
    font-size: 10.5pt;
  }

  .vel-tabel caption { background: #fff; color: #000; border-bottom: 2px solid #000; padding-left: 0; }
  .vel-tabel tr, .vel-blok, .vel-status, .vel-vraag { break-inside: avoid; }
  .vel-tabel thead { display: table-header-group; }
  .vel-blokkop, .vel-tabel caption { break-after: avoid; }
  .vel-status { border-width: 2px; }
}

/* =============================================================================
   Engineering v2.1: oude order naspelen, vergelijken met wat engineering deed
   ============================================================================= */

.np-rijen { display: grid; }
.np-rij { padding: 8px 16px; border-bottom: 1px solid var(--line); }
.np-rij:last-child { border-bottom: 0; }
.np-rij.is-anders { background: var(--let-op-zacht); }

.np-kop {
  display: grid;
  grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 12px;
}

.np-nr { color: var(--muted); font: 600 0.9rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.np-tekst { overflow-wrap: anywhere; }
.np-actie { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.np-keuze { display: inline-flex; gap: 6px; }

.np-wissel,
.np-bakje {
  min-height: var(--doel);
  min-width: var(--doel);
  padding: 0 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 0.95rem/1.15 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.np-wissel[aria-pressed="true"],
.np-bakje[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }

.np-correctie { display: grid; gap: 6px; margin-top: 8px; }
.np-bakjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 6px; }
.np-bakje { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; }
.np-bakje-nr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font: 800 0.8rem/1 var(--mono); }
.np-bakje-tekst { font-weight: 600; }
.np-notitie-label { font-weight: 600; }

.np-notitie,
.np-erbij input {
  width: 100%;
  min-height: var(--doel);
  padding: 8px 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1rem/1.3 var(--sans);
}

.np-notitie:focus, .np-erbij input:focus { border-color: var(--focus); }
.np-erbij { display: grid; gap: 8px; padding: 12px 16px; }
.np-erbij .knop { justify-self: start; }
.np-tellers { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.np-tellers li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 0.92rem; }

@media (max-width: 640px) {
  .np-rij { padding: 8px 12px; }
  .np-kop { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tekst tekst" "nr nr" "actie keuze"; }
  .np-tekst { grid-area: tekst; }
  .np-nr { grid-area: nr; }
  .np-nr:empty { display: none; }
  .np-actie { grid-area: actie; }
  .np-keuze { grid-area: keuze; }
  .np-erbij { padding: 12px; }
}

/* =============================================================================
   Engineering v2.1: regels en gaten
   ============================================================================= */

.ek-zij--los { position: static; }
.rg-lijst { margin: 0; padding: 0; list-style: none; }
.rg-regel { display: grid; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.rg-regel:last-child { border-bottom: 0; }
.rg-regel .knop { justify-self: start; }
.rg-kop, .rg-zin { margin: 0; }
.rg-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rg-zin { overflow-wrap: anywhere; }

.rg-form { display: grid; gap: 12px; padding: 12px 16px 16px; }
.rg-form .knop { justify-self: start; }
.rg-veld[hidden] { display: none; }

.rg-select,
.rg-form input[type="text"],
.rg-form textarea {
  width: 100%;
  min-height: var(--doel);
  padding: 8px 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1rem/1.3 var(--sans);
}

.rg-form textarea { min-height: 88px; resize: vertical; }
.rg-select:focus, .rg-form input[type="text"]:focus, .rg-form textarea:focus { border-color: var(--focus); }
.rg-fout { margin: 0; padding: 8px 12px; border-left: 4px solid var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); font-weight: 600; }
.rg-fout[hidden] { display: none; }
.rg-alleen-beheer { padding: 12px 16px; }
.rg-zonder, .rg-vragen { font-size: 0.92rem; }

@media (max-width: 640px) {
  .rg-regel, .rg-form { padding-left: 12px; padding-right: 12px; }
}

/* Oude order naspelen: de keuze "testorder" naast de knop (standaard uit). */
.ek-naspelen-acties { flex-wrap: wrap; align-items: center; }
.ek-testkeuze { display: inline-flex; align-items: center; gap: 10px; min-height: var(--doel); max-width: 34ch; font-size: 0.92rem; cursor: pointer; }
.ek-testkeuze input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }

/* --------------------------------------------------------------- beheer --- */
/* Beheer van de indeling (migratie 0008): Stations en Indirect, per regel aan
   of uit en de volgorde. Raakvlakken 48 px, past op 360 px zonder schuiven. */
/* De tabbladen (sinds 0029), achteraan de drie pagina's (besluit 433): drie op een rij, op een telefoon twee. */
.beheer-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; margin-bottom: 14px; }
.beheer-tabs button { padding: 4px 6px; line-height: 1.15; }
/* Te controleren, Opnieuw te maken en Uren per medewerker (besluit 433): achteraan in de rij, in de
   stijl van de tabbladen; elk opent zijn eigen pagina. */
.beheer-tabs a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 50px; padding: 4px 6px; border: 2px solid var(--line-sterk); border-radius: var(--radius); background: var(--panel); color: var(--text); font: 700 1.1rem/1.15 var(--sans); text-align: center; text-decoration: none; touch-action: manipulation; }
@media (max-width: 640px) {
  .beheer-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.beheer-melding { margin-top: 0; }
.beheer .intro { margin-top: 0; }
.beheer .melding { margin: 0 0 12px; }

.beheer-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.beheer-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.beheer-rij:last-child { border-bottom: 0; }
.beheer-rij.is-uit .beheer-naam { color: var(--muted); }

.beheer-tekst { display: grid; gap: 2px; min-width: 0; }
.beheer-naam { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 700; overflow-wrap: anywhere; }
.beheer-sub { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
/* Beheer, Leden (0052): beheer zonder koppeling ziet zijn eigen uren nog. */
.beheer-sub.beheer-waarschuw { color: var(--let-op); }
.beheer-stand { justify-self: start; }

.beheer-acties { display: flex; gap: 6px; }
.beheer-zet { min-width: 104px; }
.beheer-pijl { padding: 10px; font-size: 1.2rem; }

@media (max-width: 640px) {
  .beheer-rij { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
  .beheer-acties { grid-column: 1 / -1; }
  .beheer-zet { flex: 1; }
}
.beheer-melding + .beheer-melding { margin-top: 10px; }

/* Afgemeld in Ridder (migratie 0028): alleen bekijken, zoeken op bonnummer of onderdeel. */
.beheer-afgemeld-zoek { max-width: 600px; margin-bottom: 8px; }
.beheer-afgemeld-rij { grid-template-columns: minmax(0, 1fr) auto; }
.beheer-afgemeld-onderdeel { font-family: var(--mono); font-weight: 400; }

/* Te veel weg en eenmalig opruimen (migratie 0037): de melding bovenaan Beheer, met de knop eronder. */
.beheer-weg { display: grid; justify-items: start; gap: 8px; }
.beheer-weg p { margin: 0; }
.beheer-weg .knop { min-height: var(--doel); }

/* De stand van de imports (migratie 0046): de melding bovenaan Beheer (in de stijl van te veel weg),
   en het tabblad Imports met per import een regel en de stand als chip. */
.beheer-imports { display: grid; justify-items: start; gap: 8px; }
.beheer-imports p { margin: 0; }
.beheer-imports .knop { min-height: var(--doel); }
.beheer-imports-lijst { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-weight: 500; }
.beheer-import-rij { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.beheer-import-reden { font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.beheer-import-rij[data-stand="te_oud"] .beheer-import-reden { color: var(--let-op); }
.beheer-import-rij[data-stand="fout"] .beheer-import-reden { color: var(--rood-tekst); }
.chip.beheer-chip--fout { background: var(--rood-zacht); border-color: var(--rood); color: var(--rood-tekst); }
.chip.beheer-chip--fout::before { background: var(--rood); }

/* Bewerkingen en Medewerkers (migratie 0029): de Ridder-code kiezen, klokkers koppelen. */
.beheer-bewerking, .beheer-koppel-rij { grid-template-columns: minmax(0, 1fr) auto auto; }
.beheer-koppel-rij .beheer-acties { flex-wrap: wrap; justify-content: flex-end; }
/* Indirect (migratie 0032): de knop Ridder-code naast aan of uit en de volgorde. */
.beheer-ridder-code { min-height: var(--doel); }
/* Ridder en de klok (migratie 0043): de code Aanwezig en de standaard eindtijd, onder de posten. */
.beheer-klok { margin: 18px 0 0; }
.beheer-klok-rij { grid-template-columns: minmax(0, 1fr) auto; }
/* Klokkers uit Ridder (migratie 0034): de opruimactie bovenaan, de medewerkers eronder. */
.beheer-opruimen { margin: 0 0 18px; }
.beheer-kop { margin: 0 0 8px; font-size: 1.05rem; }
.beheer-opruim-rij { grid-template-columns: minmax(0, 1fr) auto; }
.beheer-opruim-rij .beheer-acties, .beheer-kloklijst-rij .beheer-acties { flex-wrap: wrap; justify-content: flex-end; }
.beheer-opruim-koppel, .beheer-opruim-oud { min-height: var(--doel); }
@media (max-width: 640px) {
  .beheer-opruim-rij .beheer-acties { justify-content: stretch; }
  .beheer-opruim-rij .beheer-acties .knop { flex: 1 1 calc(50% - 4px); }
}
/* Stations en bewerkingen inrichten (migratie 0036): de knop bovenaan, Wijzigen en Bewerkingen per
   station, en de vinklijst in de laag. Raakvlakken 48 px. */
.beheer-nieuw { display: grid; gap: 6px; justify-items: start; margin: 0 0 12px; }
.beheer-nieuw .beheer-uitleg { margin: 0; }
.beheer-wijzig, .beheer-kies-bewerkingen { min-height: var(--doel); }
.beheer-station .beheer-acties { flex-wrap: wrap; justify-content: flex-end; }
.beheer-vinklijst { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.beheer-vinklijst legend { margin-bottom: 6px; padding: 0; }
.correctie .beheer-vink { display: flex; align-items: center; gap: 12px; min-height: var(--doel); padding: 4px 0; font-weight: 400; }
.correctie .beheer-vink input { flex: none; width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; }
.beheer-vink-tekst { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.beheer-soort { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beheer-soort button { padding: 4px 6px; line-height: 1.15; }
@media (max-width: 640px) {
  .beheer-station .beheer-acties { justify-content: stretch; }
  .beheer-station .beheer-wijzig, .beheer-station .beheer-kies-bewerkingen { flex: 1 1 calc(50% - 4px); }
}

/* ------------------------------------------------- klaar om af te halen --- */
/* Klaar om af te halen (migratie 0038): per plek een lijst, per bon Afgehaald en Andere plek
   (raakvlakken 48 px), Net afgehaald onderaan. Op een telefoon de knoppen onder de bon, naast
   elkaar over de hele breedte. */
.afhaal-melding { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 14px; }
.afhaal-zoek { max-width: 600px; margin: 0 0 6px; }
.afhaal-groep { margin: 18px 0 0; }
.afhaal-plek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: 1.15rem; }
.afhaal-plek-code { color: var(--muted); font-family: var(--mono); font-size: 0.9rem; font-weight: 600; }
.afhaal-plek-aantal { margin-left: auto; padding: 1px 9px; border: 1px solid var(--line-sterk); border-radius: 999px; font-size: 0.9rem; }
.afhaal-lijst { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.afhaal-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.afhaal-rij:last-child { border-bottom: 0; }
.afhaal-tekst { display: grid; gap: 2px; min-width: 0; }
.afhaal-bon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.afhaal-artikel { font-family: var(--mono); overflow-wrap: anywhere; }
.afhaal-omschrijving { color: var(--muted); font-size: 0.95rem; overflow-wrap: anywhere; }
/* Het aantal mag op twee regels ("Aantal goed / onbekend"), zodat het op 320 px het bonnummer niet
   wegdrukt; "40 st goed" past altijd op een regel. */
.afhaal-aantal { max-width: 8em; font-weight: 700; text-align: right; }
.afhaal-was { color: var(--muted); font-size: 0.9rem; }
.afhaal-acties { display: flex; gap: 8px; }
.afhaal-knop { min-height: var(--doel); }
.afhaal-rij--weg .afhaal-bon { color: var(--muted); }
.afhaal-kop-net { margin: 32px 0 6px; font-size: 1.15rem; }
.afhaal-net { opacity: 0.95; }
.beheer-afhaalplek .beheer-acties { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .afhaal-rij { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
  .afhaal-acties { grid-column: 1 / -1; }
  .afhaal-acties .afhaal-knop { flex: 1 1 calc(50% - 4px); }
  .afhaal-was { grid-column: 1 / -1; }
  .beheer-afhaalplek .beheer-acties { flex-wrap: nowrap; justify-content: stretch; }
  .beheer-afhaalplek .beheer-wijzig, .beheer-afhaalplek .beheer-zet { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
}

/* ---------------------------------------------------- werklijst, stap 2 --- */
/* Filterchips (B6, besluit 780): Alles, Te laat, Binnen 10 werkdagen, en Serie, De rest. */
.filterchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: -4px 0 16px;
}

.filterchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--doel);
  padding: 8px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 700 0.98rem/1.1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}

.filterchip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }
.filterchip-n {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font: 700 0.85rem/1.2 var(--mono);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.filterchip[aria-pressed="true"] .filterchip-n { background: var(--panel); color: var(--text); }
.filterchips-uitleg { flex-basis: 100%; color: var(--muted); font-size: 0.9rem; }

/* Twee groepen (besluit 140): leverdatum, en ordersoort met een streep ervoor. */
.filterchips-groep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.filterchips-groep--soort {
  padding-left: 12px;
  border-left: 2px solid var(--line-sterk);
}

/* Op een telefoon: de ordersoort op een eigen regel, zonder streep (past dan op één regel). */
@media (max-width: 640px) {
  .filterchips-groep--soort { flex-basis: 100%; padding-left: 0; border-left: 0; }
}

/* Onder een kaart: naar het overzicht van de hele werkorder. */
.kaart--met-onder { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.kaart-werkorder {
  display: flex;
  align-items: center;
  min-height: var(--doel);
  padding: 6px 16px 6px 18px;
  border: 1px solid var(--line);
  border-top: 1px dashed var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel-2);
  color: var(--focus);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.kaart-werkorder:hover { text-decoration: underline; }
.order-werkorder { margin: 6px 0 0; }
.order-werkorder .kaart-werkorder { display: inline-flex; border-radius: var(--radius); border-top-style: solid; }
.afgerond-fout { margin-top: 20px; }

/* ------------------------------------------------- nestingen (0020) --- */
/* Alleen tonen: het label op de tegel, de keuze Per nesting / Per bon op een
   uitraapstation, de werklijst per nesting en het blok op het detail. De stand
   krijgt een eigen kleur: gesneden groen, aan het snijden violet (zoals bezig),
   fout rood; de rest rustig grijs. */
.tag--nesting { font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.tag--nesting-cut { border-color: var(--gereed); background: var(--gereed-zacht); color: var(--gereed-tekst); }
.tag--nesting-cutting { border-color: var(--bezig); background: var(--bezig-zacht); color: var(--bezig-tekst); }
.tag--nesting-error { border-color: var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); }
.tag-meer { margin-left: 5px; font-weight: 800; }

/* De keuze staat vooraan, met een streep erachter (zoals de groep ordersoort ervoor). */
.filterchips-groep--weergave:not(:last-child) { padding-right: 12px; border-right: 2px solid var(--line-sterk); }

.nesting-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--line-sterk);
  border-radius: 999px;
  background: var(--wacht-zacht);
  color: var(--wacht-tekst);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}
.nesting-status--cut { border-color: var(--gereed); background: var(--gereed-zacht); color: var(--gereed-tekst); }
.nesting-status--cutting { border-color: var(--bezig); background: var(--bezig-zacht); color: var(--bezig-tekst); }
.nesting-status--readytocut { border-color: var(--line-sterk); background: var(--panel); color: var(--text); }
.nesting-status--error { border-color: var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); }

.nesting-groep + .nesting-groep { margin-top: 26px; }
.nesting-groep .sectietitel { display: flex; align-items: center; gap: 8px; }
.nesting-groep-n {
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 800;
}
.nesting-groep--klaar .nesting-groep-n { background: var(--groen-zacht); color: var(--groen-tekst); }
.nesting-groep-uitleg { max-width: 70ch; margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; }

.nesting-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nesting {
  min-width: 0;
  padding: 12px 14px 14px 16px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  scroll-margin-top: 84px; /* in beeld na een scan (Nesting): onder de vaste kopregel */
}
.nesting--cut { border-left-color: var(--gereed); }
.nesting--cutting { border-left-color: var(--bezig); }
.nesting--error { border-left-color: var(--rood); }

.nesting-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nesting-naam { font: 800 1.25rem/1.1 var(--mono); letter-spacing: 0.02em; }
.nesting-platen,
.nesting-sinds { color: var(--muted); font-size: 0.92rem; white-space: nowrap; }

/* In- en uitklappen (02-11): de kop van een job met bonnen is een knop over de hele breedte,
   met rechts het aantal bonnen en een pijltje (naar beneden: dicht, naar boven: open). Dicht
   staan de bonnen verborgen ([hidden]); Start de hele job staat er altijd onder. Past het
   aantal er niet naast (smal scherm, "3 bonnen, 1 niet gekoppeld"), dan schuift het rechts
   onder de kop, nooit over de stand heen. */
.nesting-uitklap {
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(100% + 12px);
  min-height: var(--doel);
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.nesting-uitklap:hover { background: var(--panel-2); }
/* Een open job naast een dichte: de dichte rekt niet mee (geen lege kaart). */
.nesting-lijst { align-items: start; }
.nesting-kop-info { flex: 1 1 10em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.nesting-uitklap-aantal {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.nesting-pijl {
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.nesting-uitklap[aria-expanded="true"] .nesting-pijl { transform: translateY(2px) rotate(-135deg); }
.nesting-uitklap[aria-expanded="true"] .nesting-uitklap-aantal { color: var(--text); }

.nesting-bonnen { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.nesting-bon {
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  min-height: var(--doel);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
}
a.nesting-bon:hover { border-color: var(--line-sterk); }
a.nesting-bon:active { background: var(--panel); }
.nesting-bon .wo { font: 700 1.02rem/1.1 var(--mono); }
.nesting-bon-onderdeel { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nesting-bon-aantal { color: var(--muted); white-space: nowrap; }
.nesting-bon-aantal strong { color: var(--text); font-size: 1.05rem; }
.nesting-bon-stand {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 1px 8px;
  border: 1px solid var(--line-sterk);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.nesting-bon-stand--gereed { border-color: var(--gereed); color: var(--gereed-tekst); }
.nesting-bon.is-los { border-style: dashed; background: transparent; }
.nesting-bon.is-klaar { background: transparent; }
.nesting-bon.is-klaar .wo,
.nesting-bon.is-klaar .nesting-bon-onderdeel { color: var(--muted); }
.nesting-geen-bon { margin: 10px 0 0; color: var(--muted); font-weight: 600; }

/* De hele job (besluit 480): onder een gesneden nesting de knop Start de hele job, in de
   kleur van START, en hoeveel bonnen al lopen. Een bon die loopt, krijgt "loopt" (violet,
   zoals bezig). */
.nesting-job { display: grid; gap: 6px; margin-top: 12px; }
.nesting-job-knop {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 64px;
  border: 0;
  color: #fff;
  text-align: left;
}
.nesting-job-hoofd { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
.nesting-job-sub { font-size: 0.9rem; font-weight: 500; opacity: 0.95; }
.nesting-job-loopt,
.nesting-job-uitleg { margin: 0; color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.nesting-bon-stand--loopt { border-color: var(--bezig); background: var(--bezig-zacht); color: var(--bezig-tekst); }

/* Herstel en niet gekoppeld (0023): een herstel draagt het label "herstel"; een referentie
   uit Ridder die niet aan een bon te koppelen is, staat er als tekst (gestippeld, geen link). */
.nesting-label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border: 1px solid var(--oranje);
  border-radius: 4px;
  background: var(--oranje-zacht);
  color: var(--oranje-tekst);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.nesting-ref { grid-column: 1 / 3; min-width: 0; color: var(--muted); font: 700 1.02rem/1.2 var(--mono); overflow-wrap: anywhere; }

/* Op het detail: onderaan, in welke nesting(en) de bon zit, gepland tegenover genest. */
.nesting-sectie { margin-top: 24px; }
.nesting-regels { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nesting-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nesting-regel-aantal { color: var(--muted); }
.nesting-regel-aantal strong { color: var(--text); }
.nesting-totaal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 14px 0 0;
}
.nesting-totaal dt {
  color: var(--muted);
  font: 600 0.7rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nesting-totaal dd { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; }
.nesting-meer { margin: 10px 0 0; color: var(--muted); }
.nesting-melding { margin-bottom: 12px; }

@media (max-width: 640px) {
  .filterchips-groep--weergave:not(:last-child) { flex-basis: 100%; padding-right: 0; border-right: 0; }
  .nesting-bon { grid-template-columns: minmax(0, 1fr) auto; }
  .nesting-bon-onderdeel { grid-column: 1 / -1; grid-row: 2; }
  .nesting-ref { grid-column: 1; }
  .nesting-totaal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Orderoverzicht "compleet": per bewerking x van y bonnen gereed. */
.wo-bewerkingen {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.wo-bewerking {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(0, 1fr) minmax(90px, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--wacht);
  border-radius: var(--radius);
  background: var(--panel);
}
.wo-bewerking.is-gereed { border-left-color: var(--gereed); }
.wo-bewerking-naam { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.wo-bewerking-stand { color: var(--muted); }
.wo-bewerking-stand strong { color: var(--text); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.wo-bewerking-goed { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

.wo-balk {
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--wacht-zacht);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.wo-balk::-webkit-progress-bar { background: var(--wacht-zacht); border-radius: 999px; }
.wo-balk::-webkit-progress-value { background: var(--gereed); border-radius: 999px; }
.wo-balk::-moz-progress-bar { background: var(--gereed); border-radius: 999px; }

@media (max-width: 760px) {
  .wo-bewerking { grid-template-columns: minmax(0, 1fr) auto; }
  .wo-bewerking-stand { grid-column: 1; }
  .wo-balk { grid-column: 1 / -1; }
  .wo-bewerking-goed { grid-column: 2; grid-row: 1; }
}

/* ------------------------------------------------- klok, stap 3 (0009) --- */
/* De klokbalk (B5, B14): per werkplek wat er loopt, met hoeveel man. Geen persoon. */
.klokbalk {
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bezig);
  border-radius: var(--radius);
  background: var(--panel);
}
.klokbalk--fout { border-left-color: var(--rood); padding: 0; border: 0; background: transparent; }
.klokbalk--fout .klokbalk-fout { margin: 0; }
.detail .klokbalk, .detail [data-klokbalk] .klokbalk--fout { margin: 0 0 16px; }

.klokbalk-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.klokbalk-titel { margin: 0; font: 700 1.05rem/1.2 var(--kop); color: var(--kop-kleur); }
.klokbalk-totaal { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.klokbalk-leeg { margin: 0; color: var(--muted); }
.klokbalk-fout { margin: 10px 0 0; }

.klokbalk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.klokbalk-chips li { min-width: 0; max-width: 100%; }

.klokchip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  max-width: 100%;
  min-height: var(--doel);
  padding: 6px 14px;
  border: 2px solid var(--bezig);
  border-radius: var(--radius);
  background: var(--bezig-zacht);
  color: var(--bezig-tekst);
  font: 600 0.98rem/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.klokchip--indirect { border-color: var(--line-sterk); background: var(--panel-2); color: var(--text); }
.klokchip--controleer { border-color: var(--oranje); background: var(--oranje-zacht); color: var(--oranje-tekst); }
.klokchip-man { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.klokchip-plek { font-weight: 700; }
.klokchip-wat { overflow-wrap: anywhere; }
.klokchip-duur { font-weight: 500; font-variant-numeric: tabular-nums; }
.klokchip--controleer .klokchip-duur { font-weight: 700; }

.klokbalk-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.klokbalk-acties .knop { min-height: var(--doel); }
.klokbalk-einde { border-color: var(--knop-stop); color: var(--rood-tekst); background: var(--panel); }
/* Klokcorrectie (0066): Ongedaan maken op een vaste plek rechts, onzichtbaar op zijn plek zolang er niets ongedaan te
   maken is (niets verspringt). */
.klokbalk-acties--kc .klokbalk-ongedaan { margin-left: auto; }
.klokbalk-ongedaan[data-onzichtbaar] { visibility: hidden; }

/* Op het detail: hoeveel man op deze stap, met -1 man en Erbij (B4). */
.bezetting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--bezig);
  border-radius: var(--radius);
  background: var(--bezig-zacht);
  color: var(--bezig-tekst);
}
.bezetting-tekst { margin: 0; font-size: 1.05rem; }
.bezetting-knoppen { display: flex; gap: 8px; }
.bezetting-knoppen .knop { min-width: 112px; }

/* Te controleren (beheer): wat het vangnet op de grens sloot. */
.controle-lijst { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.controle-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--oranje);
  border-radius: var(--radius);
  background: var(--panel);
}
.controle-tekst { display: grid; gap: 3px; min-width: 0; }
.controle-wat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 700; overflow-wrap: anywhere; }
.controle-sub, .controle-tijd { color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; }
.controle-acties { display: flex; flex-wrap: wrap; gap: 8px; }

.correctie { display: grid; gap: 8px; }
.correctie label { font-weight: 600; }
.correctie input, .correctie textarea {
  width: 100%;
  min-height: var(--doel);
  padding: 10px 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1rem/1.3 var(--sans);
}
.correctie input:focus, .correctie textarea:focus { border-color: var(--focus); }
.correctie input:disabled { opacity: 0.55; cursor: not-allowed; }
.correctie .laag-voet { gap: 10px; }
.correctie-fout { margin: 4px 0 0; }

/* Klokcorrectie (0066): Mijn uren van vandaag (de tablet) en de posten van een dag (Uren per medewerker), in de
   vorm van Te controleren. De knoppen staan vast onder de inhoud (blok Schermformaat); de melding houdt zijn plek. */
.kc-post { border-left-color: var(--line-sterk); }
.kc-post.is-loopt { border-left-color: var(--bezig); }
.laag--kc .kc-voet { padding: 10px 0 2px; background: var(--panel); }
.kc-melding { margin: 10px 0 0; }
.kc-melding[data-leeg] { visibility: hidden; }
.kc-bewerk .controle-wat, .kc-bewerk .controle-sub { margin: 0; }
.kc-bewerk input[type="time"] { max-width: 240px; }
.uren-kc-knop { margin-left: 8px; }

@media (max-width: 640px) {
  .controle-post { grid-template-columns: minmax(0, 1fr); }
  .bezetting-knoppen { width: 100%; }
  .bezetting-knoppen .knop { flex: 1; min-width: 0; }
}

/* --------------------------------- Naar Ridder (0045, alleen beheer) --- */
/* De wachtrij van de uren naar Ridder: de poort, wat aandacht vraagt (fout en onzeker, met de
   knoppen van Te controleren), waarom iets niet kan, en per dag per medewerker de aantallen. */
.naar-ridder > .melding { margin: 12px 0 0; }
.naar-ridder-kop { margin: 24px 0 4px; font-size: 1.1rem; }
.naar-ridder .controle-post[data-stand="fout"] { border-left-color: var(--rood); }
.naar-ridder-melding { color: var(--text); overflow-wrap: anywhere; }
.naar-ridder-redenen, .naar-ridder-dagen, .naar-ridder-mensen { margin: 8px 0 0; padding: 0; list-style: none; }
.naar-ridder-redenen { display: grid; gap: 6px; }
.naar-ridder-redenen li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow-wrap: anywhere;
}
.naar-ridder-dagen { display: grid; gap: 12px; }
.naar-ridder-dag { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.naar-ridder-datum { margin: 0 0 6px; font-size: 1rem; }
.naar-ridder-mensen { display: grid; gap: 6px; }
.naar-ridder-mens { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.naar-ridder-naam { font-weight: 600; overflow-wrap: anywhere; }
.naar-ridder-aantallen { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.naar-ridder-aantal { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; color: var(--muted); }
.naar-ridder-aantal--verstuurd { border-color: var(--groen); color: var(--groen-tekst); }
.naar-ridder-aantal--fout { border-color: var(--rood); color: var(--rood-tekst); }
.naar-ridder-aantal--onzeker, .naar-ridder-aantal--kan_niet { border-color: var(--oranje); color: var(--oranje-tekst); }

@media (max-width: 640px) {
  .naar-ridder-mens { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------- afkeur, stap 4 (0010, 0013) --- */
/* In het gereedmeldscherm twee regels (het gesprek met Metagro): het aantal met de
   datum opnieuw klaar, dan waar het misging en wat er gebeurd is. Geen vaste reden. */
.gm-afkeur-regel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.gm-afkeur-regel + .gm-afkeur-regel, .gm-afkeur-regel + .gm-afkeur-hint { margin-top: 10px; }
/* Regel 1: de teller en het datumveld naast elkaar, elk met het label erboven en de
   invoer op dezelfde hoogte (smal: onder elkaar). */
.gm-afkeur-een { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; }
.gm-afkeur-een .gm-datum { flex: 1 1 160px; min-width: 0; max-width: 240px; }
.gm-afkeur-een .gm-afkeur-veld { display: grid; gap: 6px; align-content: start; }
.gm-afkeur-veld .gm-veldlabel { line-height: 1.4; white-space: nowrap; }
.gm-afkeur-aantal.heeft-waarde .gm-veldlabel, .gm-afkeur-aantal.heeft-waarde .stap-waarde { color: var(--rood-tekst); }
.gm-afkeur-een .gm-datum input { box-sizing: border-box; height: 50px; min-height: 50px; }
.gm-veldlabel { margin: 0; font-weight: 700; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-chip {
  min-height: var(--doel);
  padding: 6px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 700 0.95rem/1.1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}
.gm-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }
.gm-tekst, .gm-datum input {
  width: 100%;
  min-height: var(--doel);
  padding: 8px 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1rem/1.3 var(--sans);
}
.gm-tekst:focus, .gm-datum input:focus { border-color: var(--focus); }
.gm-datum { display: grid; gap: 4px; max-width: 260px; font-weight: 700; }
.gm-datum .optioneel { font-weight: 500; }
.gm-afkeur-hint { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.gm-afkeur-hint.melding--fout { color: var(--rood-tekst); }

/* Opnieuw te maken (beheer). */
.opnieuw-regel { border-left-color: var(--let-op-rand); }
.opnieuw-regel.is-verstreken { border-left-color: var(--rood); }
.opnieuw-aantal { font-weight: 600; }
.opnieuw-toelichting { font-style: italic; }
.opnieuw-verstreken { color: var(--rood-tekst); }
.opnieuw-lever { margin-top: 2px; }
.correctie select {
  width: 100%;
  min-height: var(--doel);
  padding: 8px 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 500 1rem/1.3 var(--sans);
}
.opnieuw-regel { grid-template-columns: minmax(0, 1fr); }
.opnieuw-regel .controle-acties { justify-content: flex-start; }
/* De herstelbon (0053): de delen, de groepen per materiaal en dikte, en de afhandelingen. */
.opnieuw-deel { margin: 24px 0 8px; font-size: 1.15rem; }
.opnieuw-groep { margin: 0 0 16px; }
.opnieuw-groep-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 12px 0 6px; font-size: 1rem; }
.opnieuw-groep-telling { color: var(--muted); font-weight: 500; }
.opnieuw-af { grid-template-columns: minmax(0, 1fr); border-left-color: var(--line-sterk); }
.opnieuw-af .controle-acties { justify-content: flex-start; }
.opnieuw-koppeling { font-weight: 600; color: var(--muted); }
.opnieuw-koppeling.is-in-werklijst, .opnieuw-koppeling.is-gereed { color: var(--groen-tekst); }
.opnieuw-koppeling.is-andere-order { color: var(--rood-tekst); }

/* ------------------------------------ klokken per medewerker (0015) --- */
/* De klokbalk: een chip per persoon draagt de naam in plaats van "n man". */
.klokchip--persoon .klokchip-man { font-weight: 800; }
/* Het detail: wie er op de lopende stap staan, met Erbij. */
.bezetting--personen .bezetting-tekst strong { font-weight: 800; }
/* De knop Nacalculatie onder de tekening (beheer). */
.order-pdf:has(.order-nacalculatie) { flex-direction: column; gap: 8px; }
.order-nacalculatie { justify-content: center; }

/* Beheer, tabblad Klokkers. */
.beheer-hernoem { min-height: var(--doel); }
/* Verwijderen (0018): alleen op een klokker waar nooit op geklokt is; rood omrand, niet vol. */
.beheer-verwijder { min-height: var(--doel); border-color: var(--rood); color: var(--rood-tekst); }
.beheer-uitleg { margin: 10px 0 0; max-width: 70ch; }
/* Pincode (0019): zoals Wijzigen. */
.beheer-pincode { min-height: var(--doel); }
@media (max-width: 640px) {
  /* Met Verwijderen of Pincode erbij: die knoppen samen bovenaan, de rest eronder. */
  .beheer-acties:has(.beheer-verwijder, .beheer-pincode) { flex-wrap: wrap; }
  .beheer-acties:has(.beheer-verwijder, .beheer-pincode) :is(.beheer-hernoem, .beheer-verwijder, .beheer-pincode) { flex: 1 1 calc(33% - 4px); }
}

/* Het pinscherm (0019): stippen in plaats van cijfers, grote toetsen, OK pas vanaf 4 cijfers. */
.laag--pin { width: min(420px, 100%); }
.pin-stippen { display: flex; justify-content: center; gap: 14px; margin: 6px 0 4px; }
.pin-stip {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-sterk);
  border-radius: 50%;
}
.pin-stip.is-gevuld { border-color: var(--text); background: var(--text); }
.pin-stand { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; text-align: center; }
.pin-melding {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 5px solid var(--rood);
  border-radius: 4px;
  background: var(--panel-2);
  font-weight: 600;
}
.pin-melding[hidden] { display: none; }
.pin-numpad button:disabled { opacity: 0.45; cursor: not-allowed; }
.pin-voet { justify-content: space-between; gap: 10px; }
.pin-voet .knop { min-height: 64px; }
.pin-ok { min-width: 140px; min-height: 64px; font-size: 1.2rem; }

/* Wie en pincode in één laag (0063): de namen als keuzetegels en de cijfertoetsen ernaast (de
   maten per scherm staan in het blok Schermformaat). De gekozen naam krijgt de kleur van een
   primaire keuze; OK en de melding houden hun plek, ook als ze er niet zijn. */
.laag--wiepin { width: min(860px, 100%); }
.wiepin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "namen wie" "namen melding" "namen numpad" "namen voet";
  gap: 10px 20px;
}
.wiepin-namen {
  grid-area: namen;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  align-content: start;
  gap: 8px;
  min-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  contain: size;
}
.wiepin-naam { min-height: 56px; padding: 8px 12px; }
.wiepin-naam[aria-pressed="true"] { border-color: var(--knop-primair); background: var(--knop-primair); color: #fff; }
.wiepin-wie { grid-area: wie; position: relative; display: grid; gap: 6px; justify-items: center; }
.wiepin-naam-nu { max-width: 100%; margin: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.wiepin .pin-stippen { margin: 0; }
.wiepin-stand { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wiepin-melding { position: relative; z-index: 1; grid-area: melding; min-height: calc(3 * 1.35em + 20px); margin: 0; line-height: 1.35; }
.wiepin-melding[data-leeg] { visibility: hidden; }
.wiepin-numpad { grid-area: numpad; margin-top: 0; }
.wiepin-voet { grid-area: voet; margin-top: 0; }
.wiepin .pin-ok[data-onzichtbaar] { visibility: hidden; }
.beheer-demo-klok { display: grid; gap: 8px; margin-top: 20px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.beheer-demo-klok .segment { max-width: 360px; }

/* Rapportage voor beheer: Nacalculatie en Uren per medewerker. */
.rapport .paginakop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.rapport-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.rapport-uitleg { margin: 8px 0; color: var(--muted); font-size: 0.92rem; max-width: 80ch; }
.rapport-alleen-print { display: none; }
.rapport-schuif { max-width: 100%; overflow-x: auto; }
.rapport-tabel { width: 100%; max-width: 900px; margin-top: 12px; border-collapse: collapse; background: var(--panel); font-variant-numeric: tabular-nums; }
.rapport-tabel th, .rapport-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rapport-tabel thead th { color: var(--muted); font: 700 0.78rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.rapport-tabel .getal { text-align: right; white-space: nowrap; }
.rapport-tabel tbody th { font-weight: 600; }
.nacalc-bewerking th, .nacalc-bewerking td { border-top: 2px solid var(--line-sterk); font-weight: 700; }
.nacalc-persoon th, .nacalc-persoon td { color: var(--text); font-weight: 500; }
.nacalc-persoon.is-zonder-naam th { color: var(--muted); font-style: italic; }
.nacalc-inspring { display: inline-block; padding-left: 18px; }
.rapport-totaal th, .rapport-totaal td { border-top: 2px solid var(--text); font-weight: 800; }
/* Alle keuzes op één rij, even hoog (Live, Demo, Medewerker, Deze week, Vorige week, Eigen
   bereik); op een smal scherm lopen ze netjes door naar de volgende regel. */
.uren-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0; }
.uren-keuze .segment { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 0; }
.uren-keuze .segment button { min-height: 50px; padding: 0 16px; font-size: 1rem; white-space: nowrap; }
.uren-veld { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.uren-veld .gm-veldlabel { white-space: nowrap; }
.uren-veld select, .uren-veld input { box-sizing: border-box; height: 50px; min-width: 0; max-width: 100%; padding: 8px 12px; border: 2px solid var(--line-sterk); border-radius: var(--radius); background: var(--panel); color: var(--text); font: 500 1rem/1.3 var(--sans); }
.uren-bereik { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.uren-bereik .knop { min-height: 50px; }
/* Alle medewerkers: de naam is een knop naar het detail, maar oogt als tekst met een lijn. */
.uren-naam { min-height: var(--doel); padding: 0; border: 0; background: none; color: var(--focus); font: 700 1rem/1.3 var(--sans); text-align: left; text-decoration: underline; cursor: pointer; touch-action: manipulation; }
.uren-overzicht tbody th, .uren-overzicht tbody td { vertical-align: middle; }
.uren-code { display: block; color: var(--muted); font: 500 0.88rem/1.3 var(--mono); }
.uren-wie { margin: 12px 0 0; }
.uren-dagkop th { padding-top: 14px; border-bottom: 2px solid var(--line-sterk); font-weight: 800; }
.uren-dagtotaal th, .uren-dagtotaal td { color: var(--muted); font-weight: 700; }
.is-niet-geteld th, .is-niet-geteld td { color: var(--muted); }
/* De uren uit Ridder (migratie 0029): een eigen regel per dag, bovenaan. Sinds besluit 431 komen
   de uren uit Ridder, dus de regel en het totaal in de gewone kleur; wat in de app geklokt is, eronder. */
.uren-ridder .knop--klein { margin-left: 6px; }
.uren-ridder-lijst { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.uren-ridder-boeking { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.uren-ridder-boeking.heeft-signaal { border-color: var(--let-op-rand); background: var(--let-op-zacht); }
.uren-ridder-tijd, .uren-ridder-duur { font-variant-numeric: tabular-nums; }
.uren-ridder-tijd { font-weight: 700; }
.uren-ridder-code { color: var(--muted); overflow-wrap: anywhere; }
/* Alle medewerkers met de uren uit Ridder (besluit 431): de kop Geklokt in app mag op twee
   regels, zodat de zes kolommen op een telefoon passen; de labels bij de naam klein. */
.uren-overzicht thead .uren-app-kolom { white-space: normal; }
@media (max-width: 600px) {
  .uren-overzicht thead .uren-app-kolom { width: 4.2em; }
  .rapport-tabel.uren-uit-ridder th, .rapport-tabel.uren-uit-ridder td { padding-left: 4px; padding-right: 4px; }
  .uren-overzicht tbody th .tag { padding: 1px 5px; font-size: 0.72rem; }
}
@media (max-width: 600px) {
  .rapport-tabel th, .rapport-tabel td { padding: 6px 6px; font-size: 0.92rem; }
  .nacalc-inspring { padding-left: 8px; }
  /* Alle medewerkers op een telefoon: de vijf kolommen passen zonder schuiven. */
  .uren-overzicht thead th { letter-spacing: 0; font-size: 0.7rem; }
  .uren-code { font: 500 0.8rem/1.3 var(--sans); }
}

/* Afdrukken: zie css/afdruk-mpl.css (een eigen printblad, alleen voor de rapporten). */

/* ------------------------------------- serie niet compleet (0016) --- */
/* Een signaal, geen blokkade: geel op de tegel en in het detail, met een dikke rand. */
.tag--serie { font-weight: 700; }
.melding--serie { border-left-width: 6px; font-weight: 600; }

/* =============================================================================
   Projecten (besluit 174 tot en met 185): het projectoverzicht, alleen voor beheer.
   In de stijl van Works: paginakop, tegels zoals de stationkeuze, chips zoals de
   werklijst, blokken zoals Engineering. Past op een tablet en een smal scherm,
   raakvlakken minstens 48 px, nooit horizontaal schuiven. Geen inline stijl (de
   voortgang is een <progress>), geen CSS-nesting, geen :has() en geen container
   queries (Android WebView 102).
   ============================================================================= */

.prj {
  display: grid;
  gap: 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.prj > .paginakop { margin-bottom: 0; }
.prj .prj-intro { margin: -6px 0 0; }
.prj > .terug { margin: 0 0 -6px; }

/* De status: een chip met kleur en altijd het woord erbij. */
.prj-status { padding: 3px 9px; font-size: 0.85rem; white-space: nowrap; }
.prj-status--gestart { background: var(--accent-zacht); color: var(--focus); }
.prj-status--gestart::before { background: var(--accent); border-radius: 50%; }
.prj-status--on_hold { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }
.prj-status--on_hold::before { background: var(--let-op-rand); }
.prj-status--idee { background: var(--bezig-zacht); color: var(--bezig-tekst); }
.prj-status--idee::before { background: var(--bezig); }
.prj-status--afgerond { background: var(--gereed-zacht); color: var(--gereed-tekst); }
.prj-status--afgerond::before { background: var(--gereed); }

/* De tellers bovenaan: een knop per status, tik = filter. */
.prj-tellers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 12px;
}

.prj-teller {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 84px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--wacht);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

/* De rand links houdt de kleur van de status, ook bij hover en als filter. */
.prj-teller:hover { border-top-color: var(--line-sterk); border-right-color: var(--line-sterk); border-bottom-color: var(--line-sterk); }
.prj-teller--gestart { border-left-color: var(--accent); }
.prj-teller--on_hold { border-left-color: var(--let-op-rand); }
.prj-teller--idee { border-left-color: var(--bezig); }
.prj-teller[aria-pressed="true"] { border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-zacht); }
.prj-teller-naam { font-weight: 700; }
.prj-teller-n { font: 800 2rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.prj-teller-sub { color: var(--muted); font-size: 0.9rem; }

.prj-notitie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; }
.prj-notitie-label {
  padding: 2px 6px;
  border: 1.5px solid var(--line-sterk);
  border-radius: 4px;
  font: 800 0.72rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prj .prj-grens { margin: 0; }
.prj-zoek { max-width: 600px; }
.prj-zoek-veld { box-sizing: border-box; }

.prj-filterrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.prj-aantal { margin: 0; color: var(--muted); }

/* De tegels: zoals de stationkeuze, met de kleur van de status bovenaan. */
.prj-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 12px; }
.prj-raster-cel { display: flex; min-width: 0; }

.prj-tegel {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  border-top: 4px solid var(--wacht);
  text-decoration: none;
}

.prj-tegel--gestart { border-top-color: var(--accent); }
.prj-tegel--on_hold { border-top-color: var(--let-op-rand); }
.prj-tegel--idee { border-top-color: var(--bezig); }
.prj-tegel--afgerond { border-top-color: var(--gereed); }

.prj-tegel-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  width: 100%;
  margin: 0;
}

.prj-categorie, .prj-veldnaam, .prj-feiten dt {
  color: var(--muted);
  font: 700 0.76rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prj-naam { font-size: 1.3rem; }
.prj-omschrijving { font-size: 0.95rem; }
.prj-code { color: var(--muted); font: 700 0.8rem/1.2 var(--mono); letter-spacing: 0.04em; }

/* De voortgang: een <progress> (geen inline stijl), of een gestippelde lege balk. */
.prj-voortgang {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  width: 100%;
  font-size: 0.9rem;
}

.prj-voortgang-label { color: var(--muted); }
.prj-voortgang-waarde { font-weight: 700; text-align: right; }

.prj-balk {
  display: block;
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--accent);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

progress.prj-balk::-webkit-progress-bar { border-radius: 4px; background: var(--panel-2); }
progress.prj-balk::-webkit-progress-value { border-radius: 4px; background: var(--accent); }
progress.prj-balk::-moz-progress-bar { border-radius: 4px; background: var(--accent); }
.prj-balk--onbekend { border: 1.5px dashed var(--line-sterk); background: transparent; }

.prj-volgende-kort {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: 0.92rem;
}

.prj-volgende-kort--blokkade { background: var(--let-op-zacht); color: var(--let-op); }

.prj-tegel-voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Het detail: twee blokken naast elkaar, op een smal scherm onder elkaar. */
.prj-detail-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: start;
  gap: 16px;
}

.prj-blok {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.prj-blok-kop { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.2rem; }

.prj-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px 16px;
  margin: 0;
}

.prj-feiten dd { margin: 4px 0 0; font-weight: 600; }
.prj-nog { color: var(--muted); font-style: italic; font-weight: 500; }
.prj-veldnaam { margin: 0 0 4px; }
.prj-lang { margin: 0; white-space: pre-line; }

.prj-volgende {
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-zacht);
}

.prj-blokkade { margin: 0; }
.prj-blokkade .prj-veldnaam { color: var(--let-op); }
.prj-wachters ul { margin: 0; padding-left: 20px; }

.prj-link { display: inline-flex; align-items: center; min-height: var(--doel); font-weight: 600; }

.prj-historie { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.prj-historie-regel { display: grid; gap: 4px; padding: 8px 0 8px 14px; border-left: 3px solid var(--line-sterk); }
.prj-moment { color: var(--muted); font: 600 0.82rem/1.2 var(--mono); }

/* Updates en afhankelijkheden: lijsten van aantikbare kaarten. */
.prj-updatelijst, .prj-afhlijst { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.prj-update {
  display: grid;
  gap: 4px;
  min-height: var(--doel);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  text-decoration: none;
}

.prj-update:hover, .prj-afh-kant:hover { border-color: var(--line-sterk); }
.prj-update-project { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 700; }

.prj-afh {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.prj-afh-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.prj-afh-kant {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: var(--doel);
  padding: 6px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.prj-afh-naam { font-weight: 700; }
.prj-afh-pijl { color: var(--muted); font-weight: 600; }
.prj-afh-blokkade { color: var(--let-op); }

/* De laag Project bijwerken: breder dan een gewone laag, de korte velden in een raster. */
.laag--midden.prj-laag { width: min(760px, 100%); }
.prj-formulier-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px 16px;
}

.prj-veld { display: grid; align-content: start; gap: 6px; min-width: 0; }
.prj-veld .beheer-sub { margin: 0; }
.prj-formulier textarea { resize: vertical; }

@media (max-width: 640px) {
  .prj-teller { min-height: 72px; }
  .prj-teller-n { font-size: 1.6rem; }
  .prj-blok { padding: 14px; }
}

/* =============================================================================
   Magazijn (besluit 146 tot en met 161): bulk registreren, pick is de rest.
   Alleen Voorbeeld: alles op het apparaat. Groot en simpel, één hoofdactie per
   scherm; past op een PDA van 360 px breed en op een tablet, raakvlakken
   minstens 48 px, nooit horizontaal schuiven. Geen CSS-nesting, geen :has()
   en geen container queries (Android WebView 102).
   ============================================================================= */

.mag {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mag > .paginakop { margin-bottom: 0; }

/* De gele Voorbeeld-strook bovenaan elk scherm, zoals de Demo- en Voorbeeld-labels. */
.mag-strook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 8px 12px;
  border: 1.5px dashed var(--let-op-rand);
  border-radius: var(--radius);
  background: var(--let-op-zacht);
  color: var(--let-op);
  font-weight: 700;
}

.mag-strook-tekst { flex: 1 1 200px; }

/* De kruimelregel bovenaan elk scherm behalve Start (besluit 190 en 238): waar je bent,
   en direct daaronder Terug (één stap) links, Zoeken en Start kleiner rechts, op één
   rij, ook op 360 px. Hij plakt direct onder de vaste kopregel (app.js zet --kop-h), op
   elke breedte: zo blijft Terug in beeld als een stap naar beneden geschoven is (ook op
   1280 x 800 schuift het cijferpad). De achtergrond is die van de pagina, zodat wat
   eronder doorschuift niet door de balk heen te zien is. */
.mag-nav {
  position: sticky;
  top: var(--kop-h, 68px);
  z-index: 5;
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-top: -4px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mag-nav-rij { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mag-nav-terug { flex: 0 1 auto; min-height: var(--doel); margin-right: auto; padding: 8px 16px; font-weight: 800; }
.mag-nav-knop { flex: none; min-height: var(--doel); padding: 8px 12px; }
.mag-kruimel { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.25; overflow-wrap: anywhere; }

.mag-sub { margin: 6px 0 0; color: var(--muted); font-size: 1.05rem; }

.mag-hint { margin: 0; color: var(--muted); font-size: 0.95rem; }

.mag-artikelregel { display: inline; }
.mag-artikelregel strong { margin-right: 4px; }

/* ------------------------------------------------------------ Start --- */

.mag-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.mag-tegel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "naam teller" "sub teller";
  align-items: center;
  gap: 4px 12px;
  min-height: 120px;
  padding: 16px 20px;
  border: 2px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
}

.mag-tegel:hover { border-color: var(--line-sterk); border-top-color: var(--accent); }
.mag-tegel:active { background: var(--panel-2); }

.mag-tegel-naam {
  grid-area: naam;
  color: var(--kop-kleur);
  font-family: var(--kop);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.mag-tegel-sub { grid-area: sub; color: var(--muted); }

.mag-tegel-teller {
  grid-area: teller;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--accent-zacht);
  color: var(--merk-tekst);
  font: 800 2.2rem/1 var(--mono);
  text-align: center;
}

.mag-ingang { margin: 0; }

.mag-aandacht-knop { gap: 12px; min-height: 56px; padding: 8px 18px; }

.mag-aandacht-teller {
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--wacht-zacht);
  color: var(--wacht-tekst);
  font: 800 1rem/1 var(--mono);
  text-align: center;
}

.mag-aandacht-knop.heeft-aandacht { border-color: var(--rood); }
.mag-aandacht-knop.heeft-aandacht .mag-aandacht-teller { background: var(--rood); color: #fff; }

/* Het uitklapblok Voorbeeld. */
.mag-voorbeeld {
  border: 1.5px dashed var(--let-op-rand);
  border-radius: var(--radius);
  background: var(--panel);
}

.mag-voorbeeld summary {
  display: flex;
  align-items: center;
  min-height: var(--doel);
  padding: 8px 14px;
  color: var(--let-op);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.mag-voorbeeld[open] summary { border-bottom: 1px solid var(--line); }
.mag-voorbeeld > .mag-hint { padding: 10px 14px 0; }

.mag-voorbeeld-knoppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}

.mag-voorbeeld-knoppen .knop { min-height: 56px; text-align: left; justify-content: flex-start; }

/* ------------------------------------------------- lijsten en kaarten --- */

.mag-lijst {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mag-lijst > li { display: grid; min-width: 0; }

.mag-kaart {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
}

.mag-kaart--knop {
  width: 100%;
  min-height: 64px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.mag-kaart--knop:hover { border-color: var(--line-sterk); }
.mag-kaart--knop:active { background: var(--panel-2); }
.mag-kaart--rood { border-left: 6px solid var(--rood); }

.mag-kaart--rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.mag-kaart-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.1rem; }

.mag-kaart-link {
  min-height: var(--doel);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-sterk);
  text-underline-offset: 4px;
}

.mag-kaart-groot { font: 800 1.5rem/1.1 var(--mono); }
.mag-kaart-sub { color: var(--muted); }

.mag-advies { justify-content: flex-start; min-height: 56px; text-align: left; }

.mag-anders { margin: 0; }

/* De status van een artikel: Klopt niet (rood), Aanvullen (oranje), In orde (groen). */
.chip.mag-chip--klopt-niet { background: var(--rood-zacht); border-color: var(--rood); color: var(--rood-tekst); }
.chip.mag-chip--klopt-niet::before { background: var(--rood); }
.chip.mag-chip--aanvullen { background: var(--oranje-zacht); border-color: var(--oranje); color: var(--oranje-tekst); }
.chip.mag-chip--aanvullen::before { background: var(--oranje); border-radius: 50%; }
.chip.mag-chip--in-orde { background: var(--gereed-zacht); color: var(--gereed-tekst); }
.chip.mag-chip--in-orde::before { background: var(--gereed); }

/* De bevestiging na een handeling (ook als toast). */
.mag-bevestiging {
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--groen);
  border-left-width: 6px;
  border-radius: var(--radius);
  background: var(--groen-zacht);
  color: var(--groen-tekst);
}

.mag-bevestiging:focus { outline: none; }
.mag-bevestiging p { margin: 0; }
.mag-bevestiging-hoofd { font-size: 1.25rem; font-weight: 800; }
.mag-bevestiging .mag-bevestiging-let-op { margin-top: 6px; color: var(--let-op); font-weight: 700; }
.mag-bevestiging .mag-bevestiging-extra { margin-top: 6px; font-weight: 600; }
.mag-bevestiging--stil { font-weight: 700; }

.mag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* --------------------------------------------------------- de stappen --- */

.mag-stap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.mag-vraag {
  margin: 0;
  color: var(--kop-kleur);
  font-family: var(--kop);
  font-size: 1.9rem;
  line-height: 1.15;
}

.mag-vraag:focus { outline: none; }
.mag-vraag:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.mag-wat { margin: 0; font-size: 1.2rem; }
.mag-regel { margin: 0; font-size: 1.1rem; font-weight: 600; }
.mag-regel--let-op { color: var(--let-op); }
.mag-vraag-klein { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; }

/* De ene hoofdactie: groot en over de hele breedte. */
.mag-hoofdknop {
  width: 100%;
  min-height: 72px;
  padding: 14px 18px;
  font-size: 1.45rem;
  font-weight: 800;
}

.mag-knop-breed { width: 100%; min-height: 56px; font-size: 1.1rem; }

.mag-annuleer { margin: 0; }

.mag-knoppenrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.mag-knoppenrij .knop { min-height: 56px; }
.mag-knoppenrij .knop[aria-pressed="true"],
.mag-knoppenrij .knop[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-zacht); }

.mag-gekozen {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: 1.05rem;
}

/* Het getal dat met het cijferpad wordt ingetikt. */
.mag-cijferpad { display: grid; gap: 8px; }

.mag-invoer {
  margin: 0;
  min-height: 64px;
  padding: 8px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  font: 800 2.6rem/1.2 var(--mono);
  text-align: right;
}

.mag-invoer-leeg { color: var(--muted); font: 600 1.05rem/2.6 var(--sans); }

/* Plekken kiezen: een raster van grote knoppen. */
.mag-plekken {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr));
  gap: 8px;
}

.mag-plek-knop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 60px;
  padding: 8px 10px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.mag-plek-knop[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); }
.mag-plek-code { font-size: 1.05rem; font-weight: 800; }
.mag-plek-inhoud { max-width: 100%; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }

.mag-doelen { display: grid; gap: 10px; }
.mag-doel { color: var(--text); background: var(--panel); }

/* ------------------------------------------------------- artikelkaart --- */

.mag-status {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-sterk);
  border-left-width: 6px;
  border-radius: var(--radius);
  background: var(--panel);
}

.mag-status p { flex: 1 1 240px; margin: 0; }
.mag-status--kloptNiet { border-color: var(--rood); background: var(--rood-zacht); color: var(--rood-tekst); }
.mag-status--aanvullen { border-color: var(--oranje); background: var(--oranje-zacht); color: var(--oranje-tekst); }
.mag-status--inOrde { border-color: var(--groen); }

.mag-rijen { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.mag-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.mag-rij-plek { display: inline-flex; align-items: center; min-height: var(--doel); min-width: 72px; font-size: 1.1rem; font-weight: 800; }
.mag-rij-aantal { font-weight: 700; }
.mag-rij-datum { color: var(--muted); }

/* Ligt nu op (besluit 239): de pick bovenaan met de opbouw eronder, dan per plek één
   regel; een plek met meer pallets toont het totaal en daaronder de pallets; onderaan
   het totaal, gelijk aan Ridder min wat nog bijgewerkt moet worden. */
.mag-rij--pick { border-color: var(--accent); }
.chip.mag-chip--pick { border-color: var(--accent); background: var(--accent-zacht); color: var(--merk-tekst); }
.chip.mag-chip--pick::before { background: var(--accent); }
.mag-rij-opbouw { color: var(--muted); font-size: 0.92rem; }
.mag-rij-pallets { flex-basis: 100%; padding-bottom: 4px; }
.mag-pallet--gemarkeerd { margin: 0 -8px; padding: 4px 8px; border-radius: var(--radius); outline: 2px solid var(--accent); background: var(--accent-zacht); }
.mag-totaal { margin: 0; font-weight: 700; }

.mag-acties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

/* ------------------------------------------------------------ Aandacht --- */

.mag-sectie { display: grid; gap: 8px; }
.mag-sectie .sectietitel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; }

.mag-sectie-n {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wacht-zacht);
  color: var(--wacht-tekst);
  letter-spacing: 0;
  text-align: center;
}

.mag-kpi { color: var(--muted); font: 600 0.78rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; }

.mag-regels { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.mag-regel-item {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.mag-wanneer { color: var(--muted); font: 600 0.82rem/1.3 var(--mono); }
.mag-toelichting { color: var(--muted); font-style: italic; }
.mag-leeg-klein { margin: 0; color: var(--muted); }

/* -------------------------------------------------------------- Zoeken --- */

.mag-zoek { display: grid; gap: 6px; }
.mag-zoek-label { font-weight: 700; }
.mag-zoek-rij { display: flex; gap: 8px; min-width: 0; }

.mag-zoek-rij input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 8px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1.3rem/1.2 var(--mono);
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}

.mag-zoek-rij input:focus { border-color: var(--focus); outline: none; }
.mag-zoek-rij .knop { flex: none; min-height: 56px; }
.mag-resultaten { display: grid; gap: 10px; }
.mag-resultaten .sectietitel { margin: 8px 0 0; }

/* ------------------------------------------------------- de laag Tellen --- */

.mag-laag { display: grid; gap: 10px; }
.mag-laag .laag-titel { margin-bottom: 0; }
.mag-laag .laag-tekst { margin: 0; }
.mag-laag-voet { flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mag-laag-voet .knop { flex: 1 1 160px; min-height: 56px; }

.mag-keuzerij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}

.mag-keuze { min-height: 56px; }
.mag-keuze[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); color: var(--merk-tekst); }

.mag-veld { display: grid; gap: 6px; font-weight: 600; }

/* De hoofdknop van de laag blijft onderaan in beeld, ook als de laag moet schuiven
   (een PDA, of het toetsenbord bij de toelichting). */
.mag-laag .mag-laag-voet {
  position: sticky;
  bottom: -22px;
  z-index: 1;
  margin: 4px -22px -22px;
  padding: 12px 22px 22px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* Het gevolg van een telling voor de pick (besluit 153). */
.mag-gevolg {
  margin: 0;
  padding: 8px 12px;
  border-left: 4px solid var(--let-op-rand);
  border-radius: var(--radius);
  background: var(--let-op-zacht);
  color: var(--let-op);
  font-weight: 600;
}

/* ------------------------------------------ advies, Nu doen, nog afboeken --- */

/* Van welke plek: het advies (de oudste bulkpallet) bovenaan, met een eigen rand. */
.mag-kaart--advies { border-color: var(--accent); }
.chip.mag-chip--advies { background: var(--accent-zacht); border-color: var(--accent); color: var(--merk-tekst); }
.chip.mag-chip--advies::before { background: var(--accent); }

.mag-kaart--oranje { border-left: 6px solid var(--oranje); }

/* Op Start: rood alleen voor wat open staat; de voorraadcorrecties als kengetal eronder. */
.mag-aandacht-knop { flex-wrap: wrap; }
.mag-kpi-start { flex-basis: 100%; color: var(--muted); font-size: 0.88rem; font-weight: 600; }

/* Aandacht in twee delen: Nu doen (omkaderd) en Geschiedenis. */
.mag-deel { display: grid; gap: 12px; }

.mag-deel--nu {
  padding: 12px 14px 14px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.mag-deel-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  color: var(--kop-kleur);
  font-family: var(--kop);
  font-size: 1.35rem;
  line-height: 1.2;
}

.mag-aandacht-teller.is-open { background: var(--rood); color: #fff; }

/* ------------------------- de feedbackronde van 21-10 (besluit 190 tot en met 198) --- */

/* Start: het vaste zoek- en scanveld bovenaan, naast de tegels. */
.mag-start-zoek { padding: 10px 12px 12px; border: 2px solid var(--line-sterk); border-radius: var(--radius); background: var(--panel); }

/* Ongedaan maken: op Start, in de bevestiging en in de historie. */
.mag-ongedaan { display: grid; gap: 6px; }
.mag-ongedaan .mag-hint { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.mag-ongedaan-knop { min-height: var(--doel); justify-self: start; }
.mag-bevestiging .mag-ongedaan-knop { margin-top: 10px; }

/* De herkomst van een pallet (aanlevernummer en inkooporder). */
.mag-herkomst { color: var(--muted); font: 600 0.88rem/1.35 var(--mono); }
.mag-herkomst--stap { margin: 0; }
.mag-nummer { white-space: nowrap; }
.mag-rij-herkomst { flex-basis: 100%; padding-bottom: 4px; }
.mag-rij--gemarkeerd { border: 2px solid var(--accent); background: var(--accent-zacht); }
.mag-pallets { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mag-pallet { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 4px 0; border-top: 1px solid var(--line); }

/* De historie: per regel de tijd en de soort, wat er gebeurde, de herkomst. */
.mag-hist-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mag-hist-soort { font-weight: 800; }
.mag-regel-item.is-ongedaan { border-style: dashed; color: var(--muted); }
.chip.mag-chip--ongedaan { background: var(--panel-2); border-color: var(--line-sterk); color: var(--muted); }
.mag-meer { justify-self: stretch; }

/* Een plek typen bij wegzetten (onder Andere plek kiezen). */
.mag-typ-plek { padding-bottom: 4px; }

/* ------------------------------ de fixronde van 21-10 (besluit 199 tot en met 204) --- */

/* Een open pickverschil (Aandacht, artikelkaart): wat je nagaat en de twee knoppen. */
.mag-pickpunt { display: grid; gap: 8px; min-width: 0; }
.mag-pickpunt p { margin: 0; }
.mag-pickpunt-kop { font-size: 1.05rem; }
.mag-artikel > .mag-pickpunt { padding: 12px 14px; border: 1.5px solid var(--oranje); border-left-width: 6px; border-radius: var(--radius); background: var(--panel); }
.mag-pick-open { display: block; margin: 0; min-height: var(--doel); color: inherit; }

/* Een gescande pallet die op is: zijn regels in de historie gemarkeerd. */
.mag-regel-item--gemarkeerd { border: 2px solid var(--accent); background: var(--accent-zacht); }

/* Een neutrale melding met een link (een al ontvangen aanlevernummer). */
.mag-melding { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* De uitleg van de pick achter een uitklap, onder de lijst (besluit 204). */
.mag-uitleg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.mag-uitleg summary { display: flex; align-items: center; min-height: var(--doel); padding: 8px 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.mag-uitleg p { margin: 0; padding: 0 14px 12px; }

@media (max-width: 640px) {
  .mag { gap: 12px; }
  .mag-tegel { min-height: 96px; padding: 12px 14px; }
  .mag-tegel-naam { font-size: 1.45rem; }
  .mag-tegel-teller { min-width: 56px; font-size: 1.9rem; }
  .mag-vraag { font-size: 1.6rem; }
  .mag-hoofdknop { min-height: 64px; font-size: 1.3rem; }
  .mag-invoer { min-height: 56px; font-size: 2.2rem; }
  /* De strook in twee regels: het label en de tekst lopen door. */
  .mag-strook { display: block; padding: 6px 10px; font-size: 0.9rem; line-height: 1.35; }
  .mag-strook .bron-label { margin-right: 6px; vertical-align: 1px; }
  .mag-keuzerij { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
}

/* Een PDA (weinig hoogte): het cijferpad, het getal en de hoofdknop passen samen in
   beeld, zodat je met handschoenen niet hoeft te schuiven om de 0 of Verder te raken.
   De raakvlakken blijven minstens 48 px. */
@media (max-height: 720px) {
  .mag { gap: 8px; }
  .mag-stap { gap: 8px; }
  .mag-vraag { font-size: 1.45rem; }
  .mag-wat { font-size: 1.1rem; }
  .mag-regel { font-size: 1rem; }
  .mag-hoofdknop { min-height: 56px; padding: 10px 16px; font-size: 1.25rem; }
  .mag-invoer { min-height: 48px; padding: 4px 12px; font-size: 1.9rem; line-height: 1.2; }
  .mag-invoer-leeg { line-height: 2.2; }
  .mag-cijferpad { gap: 6px; }
  /* Een melding in een stap (zoals "volgens het advies pak je eerst uit ...") compacter. */
  .mag-stap .melding { margin: 0; padding: 6px 10px; font-size: 0.92rem; }
  .mag-cijferpad .numpad,
  .mag-laag .numpad { gap: 6px; margin-top: 0; }
  .mag-cijferpad .numpad button,
  .mag-laag .numpad button { min-height: 50px; font-size: 1.6rem; }
  body[data-module="magazijn"] .laag-achtergrond { padding: 8px; }
  .laag--midden.mag-laag { gap: 8px; padding: 14px 16px; }
  .mag-laag .laag-titel { font-size: 1.35rem; }
  .mag-laag .mag-laag-voet { bottom: -14px; margin: 2px -16px -14px; padding: 8px 16px 14px; }
}

/* Een heel lage PDA: de uitleg in de laag Tellen wijkt, het cijferpad niet. */
@media (max-height: 560px) {
  .mag-laag .mag-hint { display: none; }
}

/* De knoppen van de laag naast elkaar, ook op een smal scherm. */
.mag-laag .mag-laag-voet { flex-wrap: nowrap; }
.mag-laag .mag-laag-voet .knop { flex: 1 1 0; min-width: 0; }

/* =============================================================================
   Ideeën (besluit 215 tot en met 224): de trechter vóór de projecten. Het bord,
   indienen in vier stappen, het detail met het besluitpaneel en de matrix (een
   SVG in de pagina, eigen ontwerp: vier vakken met een actie, het type als vorm
   met een letter, open = inschatting van de indiener, gevuld = vaststelling van
   de beoordelaar). Ronde 3 (besluit 274 tot en met 277): het detail als één
   leesbaar stuk met een smalle kolom ernaast, de schaal per criterium en het
   herbeoordelingspaneel. Past op een tablet en een smal scherm, raakvlakken minstens
   48 px, nooit horizontaal schuiven. Geen inline stijl, geen CSS-nesting, geen
   :has() en geen container queries (Android WebView 102). De kleuren alleen via
   de variabelen, dus licht en donker vanzelf goed.
   ============================================================================= */

.idee-status--ingediend { background: var(--accent-zacht); color: var(--focus); }
.idee-status--ingediend::before { background: var(--accent); border-radius: 50%; }
.idee-status--teruggestuurd { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }
.idee-status--teruggestuurd::before { background: var(--let-op-rand); }
.idee-status--goedgekeurd { background: var(--gereed-zacht); color: var(--gereed-tekst); }
.idee-status--goedgekeurd::before { background: var(--gereed); }
.idee-status--geparkeerd { background: var(--wacht-zacht); color: var(--wacht-tekst); }
.idee-status--afgewezen { background: var(--rood-zacht); color: var(--rood-tekst); }
.idee-status--afgewezen::before { background: var(--rood); }
.idee-status--concept { border: 1.5px dashed var(--line-sterk); background: transparent; color: var(--muted); }

/* Het type: de vorm uit de matrix plus het woord. */
.idee-type { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.idee-type-vorm { flex: none; width: 20px; height: 20px; overflow: visible; }

/* Het vak als label, met de actie in woorden. */
.idee-vak-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1.5px solid var(--line-sterk);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.idee-vak-label--direct { border-color: var(--gereed); background: var(--gereed-zacht); color: var(--gereed-tekst); }
.idee-vak-label--plannen { border-color: var(--accent); background: var(--accent-zacht); color: var(--focus); }
.idee-vak-label--tussendoor { background: var(--panel-2); color: var(--text); }
.idee-vak-label--heroverwegen { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }

/* Het bord. */
.idee-tegel {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  border-top: 4px solid var(--wacht);
  text-decoration: none;
}
.idee-tegel--ingediend { border-top-color: var(--accent); }
.idee-tegel--teruggestuurd { border-top-color: var(--let-op-rand); }
.idee-tegel--goedgekeurd { border-top-color: var(--gereed); }
.idee-tegel--afgewezen { border-top-color: var(--rood); }
.idee-naam { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.idee-tegel-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.idee-project { font-weight: 700; color: var(--gereed-tekst); }
.idee-kwartaal { padding: 1px 6px; border-radius: 4px; background: var(--panel-2); color: var(--text); font: 700 0.8rem/1.4 var(--mono); }
.idee-voor-jou .melding { margin: 0; }
.idee-vraag-open { margin: 0; }
.idee-lijst { display: grid; gap: 2px; margin: 0; padding-left: 20px; }
.idee-filterrij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.idee-filterveld { min-width: min(100%, 200px); }
.idee-vink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--doel);
  font-weight: 600;
  cursor: pointer;
}
.idee-vink input, .idee-keuze input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* Indienen in vier stappen. */
.idee-stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.idee-stap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--doel);
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.idee-stap.is-actief { border-color: var(--accent); background: var(--accent-zacht); font-weight: 700; }
.idee-stap-nr {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-2);
  font: 800 0.9rem/1 var(--mono);
}
.idee-stap.is-actief .idee-stap-nr { background: var(--accent); color: var(--panel); }
.idee-formulier { gap: 14px; }
.idee-stapkop { margin: 0; font-size: 1.3rem; }
.idee-veld label, .idee-keuzes legend { font-weight: 600; }
.idee-verplicht { color: var(--muted); font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.idee-teller { margin: 0; }
.idee-teller--ok { color: var(--gereed-tekst); }
.idee-keuzes { min-width: 0; margin: 0; padding: 0; border: 0; }
.idee-keuzes legend { margin-bottom: 6px; padding: 0; }
.idee-keuze-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.idee-keuze-rij--vink { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.idee-keuze {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--doel);
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}
.idee-keuze-tekst { display: grid; gap: 2px; }
.idee-keuze-naam { font-weight: 600; }
.idee-keuze-uitleg { color: var(--muted); font-size: 0.9rem; }
.idee-onder-keuze { margin: -6px 0 0; }
.idee-inschatten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; gap: 16px; }
.idee-scores { display: grid; gap: 12px; min-width: 0; }
.idee-subkop { margin: 8px 0 0; font-size: 1.1rem; }
.idee-score { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.idee-score legend { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 0 4px; }
.idee-score-naam { font-weight: 700; }
.idee-score-vraag { color: var(--muted); }
/* De vijf niveaus onder elkaar (de uitleg leest als een zin); pas op een breed scherm naast elkaar. */
.idee-score-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.idee-score-keuze {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  min-height: var(--doel);
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  text-align: left;
  cursor: pointer;
}
.idee-score-keuze input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.idee-score-n { font: 800 1.1rem/1 var(--mono); }
.idee-score-uitleg { color: var(--muted); font-size: 0.9rem; line-height: 1.3; }
.idee-mini { position: sticky; top: 12px; }
.idee-mini-uitkomst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.idee-mini-cijfers { color: var(--muted); font-size: 0.9rem; }
.idee-samenvatting .idee-naam { margin: 0; }
.idee-samenvatting p { margin: 0; }
.idee-lijkt { margin: 0; }
.idee-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.idee-nav-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* De matrix: een SVG in de pagina; vakken, assen en punten via klassen. */
.idee-matrix { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; }
.idee-matrix--klein { max-width: 280px; }
.idee-matrix-vlak { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.idee-vak { stroke: none; }
.idee-vak--direct { fill: var(--gereed-zacht); }
.idee-vak--plannen { fill: var(--accent-zacht); }
.idee-vak--tussendoor { fill: var(--panel-2); }
.idee-vak--heroverwegen { fill: var(--let-op-zacht); }
.idee-vak-tekst { fill: var(--text); font: 700 13px var(--sans); }
.idee-matrix--klein .idee-vak-tekst { font-size: 19px; }
.idee-as { stroke: var(--line-sterk); stroke-width: 1.5; stroke-dasharray: 5 4; }
.idee-rand { fill: none; stroke: var(--line-sterk); stroke-width: 1.5; }
.idee-as-tekst { fill: var(--text); font: 700 13px var(--sans); }
.idee-schaal { fill: var(--muted); font: 600 11px var(--mono); }
.idee-punt { stroke-width: 2.5; stroke-linejoin: round; }
.idee-punt--open { fill: var(--panel); }
.idee-punt--stabiliseren { stroke: var(--accent); }
.idee-punt--verbeteren { stroke: var(--gereed); }
.idee-punt--vernieuwen { stroke: var(--bezig); }
.idee-punt--neutraal { stroke: var(--text); }
.idee-punt--vol.idee-punt--stabiliseren { fill: var(--accent); }
.idee-punt--vol.idee-punt--verbeteren { fill: var(--gereed); }
.idee-punt--vol.idee-punt--vernieuwen { fill: var(--bezig); }
.idee-punt--vol.idee-punt--neutraal { fill: var(--text); }
.idee-punt-letter { fill: var(--text); font: 800 11px var(--sans); pointer-events: none; }
.idee-punt-letter--vol { fill: var(--panel); }
.idee-matrix--klein .idee-punt-letter { font-size: 13px; }
.idee-punt-link { cursor: pointer; }
.idee-punt-link:focus { outline: none; }
.idee-punt-link:focus-visible .idee-punt, .idee-punt-link:hover .idee-punt { stroke: var(--focus); stroke-width: 4; }
.idee-legenda { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.idee-matrixfilter .idee-keuze { padding: 8px 10px; }
.idee-lijsttabel, .idee-scoretabel { width: 100%; border-collapse: collapse; }
.idee-lijsttabel caption { margin-bottom: 8px; color: var(--muted); font-weight: 600; text-align: left; }
.idee-lijsttabel th, .idee-lijsttabel td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.idee-lijsttabel thead th { color: var(--muted); font: 700 0.76rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.idee-lijsttabel tbody th { font-weight: 500; }
.idee-getal { font-variant-numeric: tabular-nums; }

/* Het detail (besluit 276): één statusregel, de kerngegevens als strook, links het
   verhaal, rechts de inschatting, de mensen en de geschiedenis. Labels in gewone
   zinsvorm (geen kleine monospace-kapitalen), nooit een woord dat midden breekt. */
.idee-kopregel { justify-content: flex-start; margin: -6px 0 0; }
.idee-statusregel { margin: 0; }
.idee-statuskop { margin: 0 0 4px; font-weight: 700; }
.idee-scheiding { margin: -6px 0 0; color: var(--muted); font-size: 0.88rem; }
.idee-kern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.idee-kern dt, .idee-feiten dt { color: var(--muted); font: 600 0.85rem/1.3 var(--sans); }
.idee-kern dd, .idee-feiten dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: break-word; }
.idee-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 18px; margin: 0; }
.idee-leeg { color: var(--muted); font-weight: 500; }
.idee-voorstel { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.idee-kern .idee-voorstel, .idee-kern .idee-mini-cijfers { display: block; margin-top: 2px; }
.idee-detail-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  align-items: start;
  gap: 16px;
}
.idee-zij { display: grid; gap: 16px; min-width: 0; }
.idee-verhaal { gap: 14px; }
.idee-verhaal-kop { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.idee-stuk { display: grid; gap: 4px; min-width: 0; }
.idee-stuk--accent { padding: 10px 12px; border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--accent-zacht); }
.idee-label { margin: 0; color: var(--muted); font: 600 0.92rem/1.3 var(--sans); }
.idee-besluitpaneel { border-left: 4px solid var(--accent); }
.idee-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.idee-gebeurtenis { margin: 0; font-weight: 700; }
.idee-gebeurtenis-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.idee-historie-regel--herbeoordeeld { border-left-color: var(--accent); }
.idee-goed { margin: 0; }
.idee-rij { gap: 6px; }
.idee-urgentie-label { color: var(--muted); font-size: 0.88rem; font-weight: 600; }

/* De inschatting: per criterium vijf vakjes; gestippelde rand = het voorstel van de
   indiener, gevuld = de vaststelling van de beoordelaar. De uitleg van het niveau
   dat telt verschijnt bij hover of focus. */
.idee-bron { margin: 0; color: var(--muted); font-size: 0.9rem; }
.idee-sk-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0 0; font-size: 1.05rem; }
.idee-sk-gem { color: var(--muted); font: 700 0.95rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.idee-sk-lijst { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.idee-sk-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 4px;
  border-radius: var(--radius);
}
.idee-sk-rij:hover, .idee-sk-rij:focus { background: var(--panel-2); outline: none; }
.idee-sk-rij:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.idee-sk-naam { font-weight: 600; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.idee-sk-schaal { display: inline-grid; grid-template-columns: repeat(5, 24px); gap: 3px; }
.idee-sk-cel {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: 600 0.78rem/1 var(--sans);
}
.idee-sk-cel.is-voorstel { border: 2px dashed var(--text); color: var(--text); font-weight: 800; }
.idee-sk-cel.is-oordeel { border: 2px solid var(--accent); background: var(--accent); color: var(--panel); font-weight: 800; }
.idee-sk-uitleg { display: none; grid-column: 1 / -1; color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.idee-sk-rij:hover .idee-sk-uitleg, .idee-sk-rij:focus .idee-sk-uitleg { display: block; }
.idee-sk-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--muted); font-size: 0.85rem; }
.idee-sk-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.idee-sk-legenda .idee-sk-cel { width: 18px; height: 18px; font-size: 0.7rem; }
.idee-sk-matrix { display: grid; justify-items: center; gap: 6px; }
.idee-sk-matrix .idee-matrix--klein, .idee-herb-mini .idee-matrix--klein { width: 100%; max-width: 320px; }
.idee-pijl { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.idee-pijl-punt { fill: var(--text); }

/* Het herbeoordelingspaneel (besluit 274): de niveaus als grote keuzes, de gekozen
   omgekeerd gekleurd, het voorstel van de indiener gestippeld. */
.idee-herbeoordeling { border-left: 4px solid var(--accent); }
.idee-herb-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.idee-herb-form { display: block; }
.idee-herb-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; gap: 18px; }
.idee-herb-velden { display: grid; gap: 10px; min-width: 0; }
.idee-herb-zij { position: sticky; top: 12px; display: grid; gap: 12px; min-width: 0; }
.idee-herb-rij { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.idee-herb-naam { padding: 0 4px; font-weight: 700; overflow-wrap: normal; word-break: normal; }
.idee-herb-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.idee-herb-knoppen--niveaus { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.idee-herb-keuze { position: relative; display: block; min-width: 0; cursor: pointer; }
.idee-herb-keuze input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.idee-herb-waarde {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--doel);
  padding: 0 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  text-align: center;
}
.idee-herb-keuze.is-voorstel .idee-herb-waarde { border-style: dashed; border-color: var(--text); }
.idee-herb-keuze input:checked + .idee-herb-waarde { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--panel); }
.idee-herb-keuze input:focus-visible + .idee-herb-waarde { outline: 3px solid var(--focus); outline-offset: 2px; }
.idee-herb-uitleg { display: flex; flex-wrap: wrap; gap: 2px 10px; min-height: 1.3em; margin: 0; font-size: 0.9rem; }
.idee-afwijking { color: var(--let-op); font-weight: 700; }
.idee-herb-anker { color: var(--muted); }
.idee-herb-mini { display: grid; justify-items: center; gap: 6px; }
.idee-herb-legenda { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: center; }
.idee-herb-wissel { margin: 0; }
.idee-vaststelling--open { border-color: var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }
.idee-vaststelling--aangepast { border: 1.5px dashed var(--let-op-rand); background: var(--let-op-zacht); color: var(--let-op); }
.idee-vaststelling--klaar { background: var(--gereed-zacht); color: var(--gereed-tekst); }

/* De starttegel: het label Live en de teller. */
.idee-tegel-stand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.idee-teller-badge {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--let-op-zacht);
  color: var(--let-op);
  font: 700 0.8rem/1.4 var(--sans);
}

/* Projecten: het kwartaal op de roadmap op de tegel (uit een goedgekeurd idee). */
.prj-kwartaal { align-self: flex-start; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); color: var(--text); font: 700 0.8rem/1.4 var(--mono); }

@media (max-width: 960px) {
  .idee-detail-raster { grid-template-columns: minmax(0, 1fr); }
  .idee-herb-raster { grid-template-columns: minmax(0, 1fr); }
  .idee-herb-zij { position: static; }
}

@media (max-width: 800px) {
  .idee-inschatten { grid-template-columns: minmax(0, 1fr); }
  .idee-mini { position: static; }
}

@media (max-width: 420px) {
  .idee-sk-rij { grid-template-columns: minmax(0, 1fr); }
  .idee-herb-waarde { padding: 0 6px; }
}

@media (max-width: 640px) {
  .idee-lijsttabel thead { display: none; }
  .idee-lijsttabel tr { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .idee-lijsttabel th, .idee-lijsttabel td { padding: 0; border: 0; }
}

/* =============================================================================
   Ideeën ronde 4 (0035, besluit 396 en verder): de beginpagina met de taken, de labels
   "Wacht op jou" en "Bij inschatting", de interne kosten in stap 3, en de pagina
   Inschatten van beheer. Zelfde regels: raakvlakken minstens 48 px, nooit horizontaal
   schuiven (ook op 375 breed), geen inline stijl, geen :has(), alleen de variabelen
   (licht en donker vanzelf goed).
   ============================================================================= */

.idee-labels { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.idee-wacht { gap: 6px; font-size: 0.88rem; }
.idee-wacht--jou { border-color: var(--knop-primair); background: var(--knop-primair); color: #fff; }
.idee-wacht--jou::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.idee-wacht--schatting { border: 1.5px dashed var(--line-sterk); background: var(--panel-2); color: var(--text); }

.idee-takenblok { display: grid; gap: 10px; }
.idee-taak-uitleg { margin: -4px 0 0; }
.idee-takenlijst { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.idee-taak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  min-height: var(--doel);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.idee-taak-wat { display: grid; flex: 1 1 260px; gap: 4px; min-width: 0; }
.idee-taak-titel { font-weight: 700; overflow-wrap: anywhere; }
.idee-taak-titel .prj-code { margin-right: 6px; }
.idee-taak-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 0.88rem; }
.idee-taak-onder { overflow-wrap: anywhere; }
.idee-taak-knop { flex: 0 0 auto; }
.idee-niets { display: grid; gap: 4px; text-align: center; }
.idee-niets-kop { margin: 0; font-size: 1.25rem; font-weight: 700; }
.idee-naar-taken { margin: 0; }
.idee-aanvullen { margin: 0; }

.idee-intern-kop { margin-top: 6px; }
.idee-intern-blok { display: grid; gap: 12px; margin: 0; min-width: 0; }
.idee-intern-blok legend { padding: 0 4px; }
.idee-getal { display: flex; align-items: center; gap: 8px; max-width: 22rem; }
.idee-getal input { flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.idee-getal-eenheid { flex: 0 0 auto; color: var(--muted); font-weight: 700; }

.idee-schatting { display: grid; gap: 10px; }
.idee-schatting .beheer-sub { margin: 0; }
.idee-wacht-schatting { margin: 0; }
.idee-schat-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.idee-schat-idee { display: grid; gap: 10px; min-width: 0; }
.idee-schat-formulier { display: grid; gap: 12px; min-width: 0; }

@media (max-width: 960px) {
  .idee-schat-raster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .idee-taak { padding: 10px 12px; }
  .idee-taak-knop { flex: 1 1 100%; justify-content: center; }
  .idee-getal { max-width: none; }
}

/* =============================================================================
   Artikelen (besluit 240 tot en met 246): de artikelstam uit Ridder, alleen lezen.
   In de stijl van Works: paginakop, de velden en filters van Projecten, regels als
   aantikbare kaarten. Past op een PDA van 360 x 592 en op een tablet, raakvlakken
   minstens 48 px, nooit horizontaal schuiven. Geen inline stijl, geen CSS-nesting,
   geen :has() en geen container queries (Android WebView 102).
   ============================================================================= */

.art {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.art > .paginakop { margin-bottom: 0; }
.art .art-intro { margin: -6px 0 0; }
.art > .terug { margin: 0 0 -6px; }

.art-tellers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.art-teller { font-weight: 700; }
.art-teller--uit { color: var(--muted); font-weight: 600; }
.art-moment { margin: -8px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Zoeken, de artikelgroep en "ook niet meer in Ridder": onder elkaar op een smal scherm. */
.art-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: end;
  gap: 10px 16px;
}

.art-filterrij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; min-width: 0; }
.art-veld { flex: 1 1 220px; min-width: 0; }
.art-veld select { max-width: 100%; }
.art-zoek-veld { box-sizing: border-box; }
.art-ookuit { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }

.art-aantal { margin: 0 0 8px; color: var(--muted); }

/* De regels: een aantikbare kaart per artikel, nummer en eenheid bovenaan. */
.art-rijen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.art-rij {
  display: grid;
  gap: 4px;
  min-height: var(--doel);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gereed);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
}

.art-rij:hover { border-color: var(--line-sterk); border-left-color: var(--gereed); }
.art-rij:active { background: var(--panel-2); }
.art-rij--uit { border-left-color: var(--let-op-rand); background: var(--panel-2); }
.art-rij--uit:hover { border-left-color: var(--let-op-rand); }

.art-rij-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.art-nummer { font: 700 1.15rem/1.2 var(--mono); letter-spacing: 0.01em; }
.art-eenheid { padding: 1px 7px; border-radius: 4px; background: var(--panel-2); color: var(--text); font: 700 0.8rem/1.4 var(--mono); }
.art-omschrijving { font-size: 0.98rem; }
.art-omschrijving--leeg, .art-nog { color: var(--muted); font-style: italic; font-weight: 500; }
.art-rij-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 0.85rem; }
.art-stand { padding: 2px 8px; font-size: 0.82rem; }

/* De kaart: twee blokken naast elkaar, op een smal scherm onder elkaar. */
.art-kaart-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 16px;
}

.art-blok {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}

.art-blok-rij { margin: 0; }
.art-blok-kop { margin: 0; font-size: 1.2rem; }

.art-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px 16px;
  margin: 0;
}

.art-feiten dt {
  color: var(--muted);
  font: 700 0.76rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-feiten dd { margin: 4px 0 0; font-weight: 600; }
.art-uit-uitleg { margin: 0; }
.art-leeg { margin-top: 4px; }

/* Opzoeken in Ridder (0049): het blok onder geen treffers, en de opgezochte nummers. */
.art-opzoek {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
}

.art-opzoek-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-weight: 600; }
.art-opzoek-uitleg { margin: 0; color: var(--muted); font-size: 0.92rem; }
.art-opzoek-rij { margin: 0; }
.art-opzoek-rij .knop { max-width: 100%; white-space: normal; }
.art-opzoek-fout { margin: 0; color: var(--rood-tekst); font-weight: 600; }

.art-vragen { display: grid; gap: 8px; min-width: 0; }
.art-vragen-kop { margin: 6px 0 0; font-size: 1.1rem; }
.art-vragen-uitleg { margin: -4px 0 0; color: var(--muted); font-size: 0.9rem; }
.art-vragen-lijst { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.art-vraag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.art-vraag-tijd { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 640px) {
  .art-blok { padding: 14px; }
  .art-nummer { font-size: 1.05rem; }
}

/* =============================================================================
   Magazijn, Locaties (besluit 361 en verder): de echte vakken, Live uit de kluis
   mag_works. In de stijl van Magazijn (de kruimelregel met Terug, de kop) en van de
   filters van Artikelen en Engineering. Past op een PDA van 360 x 592 en op een
   tablet, raakvlakken minstens 48 px, nooit horizontaal schuiven. Geen inline stijl,
   geen CSS-nesting, geen :has() en geen container queries (Android WebView 102).
   ============================================================================= */

/* Het label Live naast de titel, de uitleg op een regel eronder (besluit 378). */
.loc-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.loc-titel .bron-label { flex: none; }
.loc-live { margin: -4px 0 0; color: var(--muted); }
.loc-alleen-lezen { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); font-weight: 600; }

/* De tellers zijn meteen het filter op soort. */
.loc-tellers { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.loc-teller { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
.loc-teller--onbekend .eng-filter-n { background: var(--wacht-zacht); color: var(--wacht-tekst); }
.loc-teller--pick .eng-filter-n { background: var(--accent-zacht); color: var(--merk-tekst); }
.loc-teller--bulk .eng-filter-n { background: var(--groen-zacht); color: var(--groen-tekst); }
.loc-teller--uit .eng-filter-n { background: var(--panel-2); color: var(--muted); }
.loc-teller[aria-pressed="true"] .eng-filter-n { background: var(--panel); color: var(--text); }

/* Stelling, niveau en zoeken: naast elkaar op een breed scherm; op een smal scherm stelling
   en niveau naast elkaar en zoeken eronder. De labels zijn er voor de schermlezer (.sr). */
.loc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-width: 0; }
.loc-veld { flex: 1 1 120px; min-width: 0; }
.loc-veld select { width: 100%; max-width: 100%; min-height: var(--doel); }
.loc-veld--zoek { flex: 3 1 260px; }

.loc-aantal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; color: var(--muted); }
/* Waarom net gewijzigde vakken nog in beeld staan (besluit 381(c)). */
.loc-blijft { margin: -4px 0 10px; }
.loc-wis { min-height: var(--doel); }

/* Alle vakken van dit filter in één keer: dicht onder een kopregel van 48 px (besluit 378). */
.loc-bulk { margin: 0 0 10px; padding: 0 12px; border: 1.5px dashed var(--line-sterk); border-radius: var(--radius); background: var(--panel); }
.loc-bulk[open] { padding-bottom: 12px; }
.loc-bulk-kop { display: flex; align-items: center; min-height: var(--doel); font-weight: 600; cursor: pointer; }
.loc-bulk-kop::-webkit-details-marker { display: none; }
.loc-bulk-kop::before { content: "\25B8"; flex: none; margin-right: 8px; }
.loc-bulk[open] .loc-bulk-kop::before { content: "\25BE"; }
.loc-bulk-tekst { margin: 0 0 8px; font-weight: 600; }
.loc-hint { color: var(--muted); font-weight: 500; }
.loc-bulk-zoek { margin: 0 0 10px; }

/* Een vak per regel: de code groot, de soort als label, de knoppen eronder. */
.loc-rijen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.loc-rij {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--wacht);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
  min-width: 0;
}
.loc-rij--pick { border-left-color: var(--accent); }
.loc-rij--bulk { border-left-color: var(--groen); }
.loc-rij--extern { border-left-color: var(--line-sterk); border-left-style: dashed; }
.loc-rij--uit { border-left-color: var(--line); background: var(--panel-2); }
.loc-rij.is-gemarkeerd { outline: 3px solid var(--focus); outline-offset: 2px; }
.loc-code:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.loc-rij-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.loc-code { font: 800 1.3rem/1.2 var(--mono); letter-spacing: 0.02em; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.loc-chip--pick { border-color: var(--accent); background: var(--accent-zacht); color: var(--merk-tekst); }
.chip.loc-chip--pick::before { background: var(--accent); }
.chip.loc-chip--bulk { background: var(--groen-zacht); color: var(--groen-tekst); }
.chip.loc-chip--bulk::before { background: var(--groen); }
.chip.loc-chip--extern { background: transparent; border: 1.5px dashed var(--line-sterk); color: var(--text); }
.chip.loc-chip--uit { background: var(--panel-2); border-color: var(--line-sterk); color: var(--muted); }
.chip.loc-chip--uit::before { background: var(--line-sterk); }

.loc-knoppen { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.loc-knop { flex: 1 1 96px; min-height: var(--doel); padding: 8px 12px; }
.loc-knop[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }
.loc-knop:disabled, .loc-meer:disabled { opacity: 0.55; cursor: default; }
.loc-meer { flex: 0 0 auto; min-height: var(--doel); min-width: 72px; padding: 8px 12px; }

/* Ongedaan maken: onderaan in beeld blijven terwijl de lijst schuift. */
.loc-ongedaan {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 -2px;
  padding: 8px 12px;
  border: 1.5px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schaduw);
}
.loc-ongedaan-tekst { flex: 1 1 180px; margin: 0; font-weight: 600; }
.loc-ongedaan .loc-knop { flex: 0 0 auto; }

/* De melding op Locaties boven de balk Ongedaan maken, nooit eroverheen (besluit 378). */
body[data-route="mag-locaties"] .toast { bottom: 96px; width: max-content; }

/* Op Start: de ingang naar Locaties, met het label Live. */
.mag-locaties-knop { gap: 12px; min-height: 56px; padding: 8px 18px; flex-wrap: wrap; justify-content: flex-start; }

@media (max-width: 640px) {
  .loc-code { font-size: 1.15rem; }
  .loc-rij { padding: 8px 10px; }
  .loc-live { font-size: 0.95rem; }
  .loc-tellers { gap: 6px; }
  /* De balk Ongedaan maken op één regel: de tekst hooguit twee regels naast de knop. */
  .loc-ongedaan { flex-wrap: nowrap; gap: 8px; padding: 6px 8px; }
  .loc-ongedaan-tekst {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .loc-ongedaan .loc-knop { padding: 8px 10px; }
}

/* Beginstand (migratie 0050): per vak tellen. De kop, het label Live en de zoekrij zijn die van
   Locaties en het Voorbeeld; hier alleen de voortgang, de lijsten en de regels van een vak. */
.bst { display: grid; gap: 12px; min-width: 0; }
.bst-kop2 { margin: 8px 0 0; font-size: 1.05rem; }
.bst-voortgang { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.bst-voortgang-kop { margin: 0; font-size: 1.1rem; font-weight: 700; }
.bst-balk { width: 100%; height: 10px; accent-color: var(--groen); }
.bst-melding { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); font-weight: 600; overflow-wrap: anywhere; }
.bst-zoek { display: grid; gap: 4px; min-width: 0; }
.bst-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bst-knop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: var(--doel);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--wacht);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.bst-knop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bst-knop.is-klaar, .bst-vak--klaar, .bst-vak--leeg { border-left-color: var(--groen); }
.bst-vak--bezig { border-left-color: var(--accent); }
.bst-knop-naam { font-weight: 700; }
.bst-knop-sub { color: var(--muted); }
.bst-code { font: 800 1.15rem/1.2 var(--mono); letter-spacing: 0.02em; }
.chip.bst-chip--nog { border-color: var(--wacht); background: var(--wacht-zacht); color: var(--wacht-tekst); }
.chip.bst-chip--bezig { border-color: var(--accent); background: var(--accent-zacht); color: var(--merk-tekst); }
.chip.bst-chip--klaar, .chip.bst-chip--leeg { border-color: var(--groen); background: var(--groen-zacht); color: var(--groen-tekst); }
.chip.bst-chip--niet { border-color: var(--line-sterk); background: var(--panel-2); color: var(--muted); }
.bst-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.bst-regels { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bst-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  min-width: 0;
}
.bst-regel.is-nul { background: var(--panel-2); color: var(--muted); }
.bst-art { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.bst-aantal { flex: none; font-size: 1.2rem; font-weight: 800; }
.bst-hertel { flex: none; min-height: var(--doel); }
.bst-art-regel { margin: 0; overflow-wrap: anywhere; }
/* Zoek op in Ridder (0049) bij een nummer dat niet in Artikelen staat: het blok van Artikelen. */
.bst-opzoek { margin-top: 0; }
.bst-opzoek .art-nummer { min-width: 0; overflow-wrap: anywhere; }
.bst-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.bst-acties .knop { min-height: 56px; flex: 1 1 160px; }
body[data-route="mag-beginstand"] .toast { bottom: 24px; }
/* =============================================================================
   Nesting gereed melden (0067, besluit 775): Hele nesting of Losse bonnen bij Uitrapen
   =============================================================================
   Schermvullend zoals gereedmelden: de kop, de schakelaar en onderaan de telling en de knop staan vast, alleen de
   lijst ertussen scrolt (ook bij 50 bonnen). Een regel waar Goed afwijkt, is oranje; een bon die doorloopt, rustig.
   Raakvlakken minstens 48 px (--doel). De maten per scherm staan in het blok Schermformaat. */
.laag--nesting { overflow: hidden; }
.ng-kop { flex: none; }
.ng-schakel,
.ng-lijst,
.ng-voet { width: 100%; padding-left: max(24px, calc((100% - 1152px) / 2)); padding-right: max(24px, calc((100% - 1152px) / 2)); }
.ng-schakel { flex: none; padding-top: 10px; }
.ng-schakel button { min-height: var(--doel); }
.ng-lijst {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.ng-regel {
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-left-width: 6px;
  border-radius: var(--radius);
  background: var(--panel);
}
.ng-regel.is-afwijkend { border-color: var(--oranje); background: var(--oranje-zacht); }
.ng-regel.is-door { background: var(--panel-2); }
.ng-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "bon nodig goed";
  align-items: center;
  gap: 8px 20px;
}
.ng-lijst--deels .ng-rij { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "af bon nodig goed"; }
.ng-af {
  display: inline-flex;
  grid-area: af;
  align-items: center;
  gap: 8px;
  min-width: var(--doel);
  min-height: var(--doel);
  padding: 0 12px;
  border: 2px solid var(--line-sterk);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}
.ng-vink { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 4px; }
.ng-af[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--panel); }
.ng-af[aria-pressed="true"] .ng-vink::after {
  content: "";
  display: block;
  width: 6px;
  height: 12px;
  margin: 1px auto 0;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.ng-bon { display: grid; grid-area: bon; gap: 2px; min-width: 0; }
.ng-bon .wo { font: 700 1.05rem/1.2 var(--mono); }
.ng-onderdeel { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ng-nodig { display: grid; grid-area: nodig; justify-items: end; gap: 2px; min-width: 56px; }
.ng-nodig strong { font: 700 1.4rem/1 var(--mono); }
.ng-goed,
.ng-door { display: grid; grid-area: goed; justify-items: end; gap: 2px; min-width: 186px; }
.ng-door { align-self: stretch; align-content: center; min-height: 50px; color: var(--muted); font-weight: 700; }
.ng-kopje { color: var(--muted); font: 700 0.75rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ng-waarde { display: inline-flex; align-items: center; justify-content: center; }
.ng-regel.is-afwijkend .ng-waarde { border-color: var(--oranje); color: var(--oranje-tekst); }
.ng-extra:empty { display: none; }
.ng-afw { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--oranje); }
.ng-soort { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ng-soort-uitleg { margin: 0; color: var(--muted); font-size: 0.88rem; }
.ng-meer { margin: 6px 0 0; color: var(--oranje-tekst); font-weight: 700; }
.ng-voet {
  display: grid;
  flex: none;
  gap: 6px;
  padding-top: 10px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.ng-telling { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ng-bevestig { width: 100%; }
/* De nestingkaart: Start de hele job en Nesting gereed melden naast elkaar, de regel eronder over de hele breedte. */
.nesting-job--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nesting-job--twee > .nesting-job-loopt { grid-column: 1 / -1; }

/* Rustige kopregel, stationkeuze en werklijst van Uitrapen, op elke breedte (13-11; besluit 779 deed
   dit op 11-11 alleen tot 600 px; nu op verzoek ook op de tablet en de laptop): elk scherm.
   - Kopregel: weg zijn de moduleknop (naar het startscherm), Live of Demo, het accountlabel en het
     stationknopje. METAGRO (naar de stationkeuze of het startscherm), NL/EN, Licht of donker (waar
     de kopregel hem heeft) en Menu blijven. De ruimte onder de kopregel voor het accountlabel vervalt
     mee, en NL/EN staat rechts (het accountlabel duwde hem daar eerst heen).
   - Stationkeuze: alleen de titel, de knoppen en de tegels. Weg zijn de bovenregel, de regels onder
     de titel, de voetregel en de links Terug naar werklijst (een tegel kiezen doet hetzelfde) en
     Beheer (staat in het menu, en wie Beheer heeft, heeft altijd het menu: views/menu.js, toontMenu).
   - Uitzondering: de link Klaar om af te halen blijft boven 600 px staan. Voor de vloer met alleen
     MPL Works (geen menu, ook het gedeelde tabletaccount) is hij de enige weg naar Klaar om af te
     halen; alleen op een telefoon staand (tot 600 px) is hij weg, zoals besluit 779 vastlegde.
   - Werklijst van Uitrapen (werklijst--uitrapen, views/werklijst.js): weg zijn de telregel, Ridder
     bijgewerkt en de uitleg onder Klaar om uit te rapen (het kopje met het aantal blijft). De werklijsten
     van de andere stations blijven zoals ze waren.
   Gewone selectors, niets van na WebView 102 (de toetsen *-schermen.test.mjs).
   Alleen verbergen: de elementen staan er nog en doen hetzelfde (tests/kopregel-telefoon.test.mjs). */
body .kop > .module-knop,
body .kop > .omgeving,
body .kop > .account,
body .kop > .station-knop { display: none; }
body .kop > .account ~ .taal-knop { margin-left: auto; }
html body.met-account:not(.met-menu) .kop { padding-bottom: 4px; }
body .stationkeuze .paginakop .bovenregel,
body .stationkeuze > .intro,
body .stationkeuze .paginakop-acties > a.knop[href="#/"],
body .stationkeuze .paginakop-acties > a.knop[data-naar-beheer],
body[data-route="station"] .voet [data-voet-tekst] { display: none; }
body .werklijst--uitrapen .paginakop .teller,
body .werklijst--uitrapen .paginakop .ridder-ververst,
body .werklijst--uitrapen .nesting-groep--klaar > .nesting-groep-uitleg { display: none; }
@media (max-width: 600px) {
  body .stationkeuze .paginakop-acties > a.knop[data-naar-afhalen] { display: none; }
}

/* =============================================================================
   Schermformaat (05-11): vaste plekken per schermmaat, niets meer dat wegspringt
   =============================================================================
   Alleen maat, ruimte en raster; kleuren, letters en knopvormen blijven gelijk.
   De vaste breekpunten van de app (tests/schermformaat.test.mjs legt ze vast):
     tot 400 px        6 inch staand, smal (360)
     tot 600 px        6 inch staand (412)
     tot 640 px        telefoonopmaak van de pagina's (een kolom)
     tot 860 px        gereedmelden in een kolom (10,1 inch staand: 800)
     tot 900 px        kopregel van de vloer compact (6 inch liggend 740 tot 915, 10,1 inch staand)
     hoogte tot 500 px liggend telefoonscherm (740x360, 915x412): kopregel scrolt mee, lagen compact
     hoogte tot 700 px liggende tablet van 8 inch (ET40, 960x600) en een laptop in de browser:
                       gereedmelden en wie en pincode passen zonder schuiven (09-11)
     kantoor (1366, 1920): de inhoud blijft op leesbare breedte (.inhoud tot 1320 px, al zo) */

/* Kopregel van de vloer (alleen MPL Works, geen menu): het merk en de knoppen houden hun maat,
   alleen het stationknopje mag smaller (de naam loopt dan af met een beletselteken). Zo loopt
   de kopregel op geen enkele breedte buiten het scherm (412 px liep hij 100 px te breed, 740 px
   ongeveer 50 px). Tot 900 px staat het merk op twee regels. Het accountlabel en het
   stationknopje zijn sinds 13-11 op elke breedte verborgen (het blok hierboven); hun regels
   hieronder blijven voor als ze terugkomen. */
body:not(.met-menu) .kop > * { flex-shrink: 0; }
body:not(.met-menu) .kop > .station-knop { flex: 0 1 auto; min-width: 0; }

@media (max-width: 900px) {
  body:not(.met-menu) .merk { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
  body:not(.met-menu) .merk-bedrijf { padding-top: 5px; font-size: 0.8rem; }
  body:not(.met-menu) .merk-naam { padding-left: 0; border-left: 0; }
  body.met-account:not(.met-menu) .kop { padding-bottom: 16px; }
  body:not(.met-menu) .account {
    position: absolute;
    left: 16px;
    bottom: 3px;
    padding: 0;
    border: 0;
    font-size: 0.55rem;
    line-height: 1;
  }
  body:not(.met-menu) .account:not([hidden]) ~ .taal-knop { margin-left: auto; }
}

@media (max-width: 600px) {
  body:not(.met-menu) .kop { gap: 8px; }
  /* Alleen de stip van Live of Demodata; de tekst blijft er voor schermlezers (zoals tot 400 px). */
  body:not(.met-menu) .omgeving-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Paginakop met knoppen (stationkeuze: Terug naar werklijst, Klaar om af te halen, Licht of
   donker, Uitloggen): op een telefoon een vast raster van twee, in plaats van 1, 2 en 1 per regel. */
@media (max-width: 640px) {
  .paginakop-acties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; width: 100%; }
  .paginakop-acties > .knop { width: 100%; min-width: 0; }
  /* Het tabletaccount (geen Uitloggen, besluit van 08-11): dezelfde twee per rij, maar een knop
     die alleen op zijn rij staat, vult die rij. Zo blijft er geen leeg vak over waar Uitloggen
     stond, ook niet als Licht of donker (tot 600 px) er wel of niet staat. */
  .paginakop-acties--zonder-uitloggen { display: flex; flex-wrap: wrap; }
  .paginakop-acties--zonder-uitloggen > .knop { flex: 1 1 calc(50% - 8px); }
}

/* Filterchips op een telefoon: elke groep op een vaste rij, de chips naast elkaar; een lange
   chip (Binnen 10 werkdagen) breekt binnen zijn eigen vak af in plaats van naar een nieuwe regel. */
@media (max-width: 640px) {
  .filterchips { display: grid; grid-template-columns: minmax(0, 1fr); }
  .filterchips-groep { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; }
  .filterchips .filterchip { justify-content: center; min-width: 0; padding: 6px 12px; text-align: center; }
}
/* 360 px: de buitenste chips op hun eigen breedte, de middelste vult de rest (anders viel
   "werkdagen" met het getal net buiten de chip). De chips 6 px uit elkaar: met 10 px liep
   "Binnen 10 werkdagen" met het getal nog 2 px over de rand van de chip (09-11, 360x640). */
@media (max-width: 400px) {
  .filterchips-groep { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; }
  .filterchips .filterchip { gap: 6px; padding: 6px 10px; }
  /* Besluit 780: Alles staat vooraan, dus nu is de laatste (Binnen 10 werkdagen) de lange;
     Serie en De rest op hun eigen breedte. */
  .filterchips-groep--lever { grid-template-columns: auto auto minmax(0, 1fr); }
  .filterchips-groep--soort { grid-template-columns: auto auto; }
}

/* Gereedmelden: Bevestigen blijft op elke maat in beeld (onderaan, over de inhoud heen), ook
   met twee kolommen op een tablet of pc waar het numpad langer is dan het scherm. */
.laag--vol .knop--bevestig { position: sticky; bottom: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }

/* 6 inch staand, smal (360x740): het numpad iets lager, zodat Bevestigen al zonder scrollen
   helemaal in beeld staat (stond 2 px onder de rand). Toetsen blijven 56 px.
   Op 360x640 (Zebra TC21/TC26) stond Bevestigen dan nog half onder de rand (596 tot 684): de
   knop plakt onderaan, maar komt nooit hoger dan het begin van de rechterhelft, en die begon
   pas onder het numpad. Daarom bij gereedmelden (en Nesting gereed melden, dezelfde kop) de kop
   en het numpad compacter: de kop op een regel per tekst (Annuleren iets smaller), minder ruimte
   rond het aantal en toetsen van 52 px (zoals liggend). De rechterhelft begint nu rond 512 px,
   Bevestigen staat helemaal in beeld (540 tot 628) en ligt nooit over een toets. */
@media (max-width: 400px) {
  .numpad { gap: 8px; }
  .numpad button { min-height: 56px; }
  .gm-kop { gap: 10px; }
  .gm-kop > .knop { padding-left: 12px; padding-right: 12px; }
  .gm-body { row-gap: 12px; padding-top: 10px; }
  .gm-display { padding-top: 6px; padding-bottom: 6px; }
  .gm-body .numpad-doel { margin-top: 2px; }
  .gm-body .numpad { gap: 6px; margin-top: 2px; }
  .gm-body .numpad button { min-height: 52px; }
}

/* Gereedmelden in een kolom (staand tot 860 px breed), 09-11: Bevestigen plakt onderaan het scherm, ook als de
   kop, het aantal en het numpad samen hoger zijn dan het scherm. Eerst plakte hij binnen de rechterhelft, en die
   begon pas onder het numpad: op een Zebra TC21/TC26 (360x568 als app, 360x520 in Chrome met adresbalk) stond hij
   daardoor 30 px of meer onder de rand. De rechterhelft telt hier niet meer als eigen vak (display: contents), zodat
   Bevestigen binnen de hele laag plakt; de inhoud erboven scrolt eronderdoor. De afstanden blijven gelijk: 10 px
   tussen de delen van de rechterhelft, 16 px (tot 400 px breed 12 px) tussen het numpad en de rechterhelft. */
@media (max-width: 860px) and (orientation: portrait) {
  .gm-rechts { display: contents; }
  .gm-body { row-gap: 10px; }
  .gm-klaar { margin-top: 6px; }
}
@media (max-width: 400px) {
  .gm-klaar { margin-top: 2px; }
}

/* Afkeur bij gereedmelden: "Opnieuw klaar op" gaat naar een eigen regel als hij niet naast het
   aantal past, in plaats van 6 px over de rand van het vak te lopen (960x600, ET40 liggend). */
.gm-afkeur-een .gm-datum { min-width: auto; }

/* Meldingen onderaan (toast) op een telefoon of smalle tablet: zo breed als de tekst nodig heeft,
   tot 16 px van de rand. Door left: 50% kreeg hij hooguit de halve breedte (180 px op 360 px), zodat
   een korte zin over zes regels liep. Op een breder scherm blijft hij zoals hij was. */
@media (max-width: 640px) {
  .toast { width: max-content; }
}

/* Waar ging het mis? (afdelingen bij afkeur en herwerk): een vast raster van vakken van gelijke
   breedte (twee naast elkaar op een telefoon, drie of vier op een breder scherm), niet meer vrij
   afbreken. */
.gm-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 6px; }
.gm-chips .gm-chip { min-width: 0; padding: 6px 10px; text-align: center; }

/* Waar gaat het heen? (Werkvoorbereiding of Opnieuw snijden): op een telefoon staand onder
   elkaar, en ook liggend (de rechterkolom is daar even smal), want naast elkaar viel
   "Werkvoorbereiding" op 360 px buiten zijn knop. */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  [data-paneel] .segment { grid-template-columns: minmax(0, 1fr); }
}

/* Liggende tablet van 8 inch (ET40, 960x600; in de app zonder balk 960x528) en een laptop in de
   browser (hoogte tot 700 px), 09-11:
   - Gereedmelden: de onderste rij van het numpad (Wis, 0, wissen) viel onder de rand. Kop en aantal
     iets compacter en toetsen van 52 px (zoals liggend op een telefoon): het numpad eindigt rond 523 px.
   - Wie en pincode: Annuleren viel onder de rand. De indeling van liggend: de namen links met
     Annuleren en OK eronder, de cijfertoetsen rechts over de hele hoogte; de melding ligt over de
     onderkant van de namen. De toetsen houden hun maat.
   Staat voor het blok van de telefoon liggend (tot 500 px), dat daar het laatste woord houdt. */
@media (max-height: 700px) and (orientation: landscape) {
  .gm-kop { padding-top: 8px; padding-bottom: 8px; }
  .gm-body { padding-top: 12px; }
  .gm-display { padding-top: 6px; padding-bottom: 6px; }
  .gm-body .numpad-doel { margin-top: 4px; }
  .gm-body .numpad { gap: 8px; }
  .gm-body .numpad button { min-height: 52px; }
  .laag--wiepin { display: flex; flex-direction: column; height: 100%; }
  .wiepin {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "wie numpad" "namen numpad" "voet numpad";
  }
  .wiepin-namen { min-height: 0; }
  .wiepin-wie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; }
  .wiepin-melding { grid-area: namen; align-self: end; min-height: 0; pointer-events: none; }
  .wiepin-numpad { align-self: end; }
}

/* Liggend telefoonscherm (6 inch, 740x360 of 915x412): de kopregel scrolt mee weg, gereedmelden
   in twee kolommen (numpad links, afwijkingen en Bevestigen rechts) en de lagen compacter. Alle
   raakvlakken blijven minstens 48 px. */
@media (max-height: 500px) and (orientation: landscape) {
  body:not(.met-menu) .kop { position: static; }
  .gm-kop { padding: 6px 16px; }
  .gm-titel { font-size: 1.3rem; }
  .gm-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 10px 16px 12px; }
  .gm-display { padding: 6px 14px; }
  .gm-waarde { font-size: 2.4rem; }
  .numpad-doel { min-height: 0; margin: 4px 0 0; }
  .numpad { gap: 8px; }
  .numpad button { min-height: 52px; }
  .knop--bevestig { min-height: 64px; }
  .laag-achtergrond { padding: 8px; }
  .laag--midden { width: min(720px, 100%); padding: 14px 18px; }
  .laag-titel { margin: 2px 0 6px; font-size: 1.3rem; }
  .laag-tekst { margin-bottom: 10px; }
  .keuzes { gap: 8px; }
  .knop--keuze { min-height: 56px; padding: 8px 14px; }
}

/* Kantoorschermen op een telefoon of smalle tablet (tot 640 px):
   - Uren per medewerker: de keuzes onder elkaar, de periode (Deze week, Vorige week, Eigen
     bereik) en Live of Demo als een vaste rij van even brede knoppen, niet meer vrij afbreken.
   - Te controleren, Opnieuw te maken en Naar Ridder: de tekst boven, de knoppen eronder in een
     vast raster van twee (eerst stonden ze rechts en kneep de tekst samen). */
@media (max-width: 640px) {
  .uren-keuze { display: grid; grid-template-columns: minmax(0, 1fr); }
  .uren-keuze .segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .uren-keuze .segment button { padding: 0 8px; white-space: normal; }
  .uren-veld select { flex: 1 1 auto; }
  .controle-post { grid-template-columns: minmax(0, 1fr); }
  .controle-acties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controle-acties .knop { width: 100%; min-width: 0; }
}

/* Klokcorrectie (0066) op 6 inch staand (tot 600 px): de knoppen onder de chips in een vast raster van twee,
   Einde dienst links en Ongedaan maken rechts op de tweede rij (ook als een van beide er niet staat). */
@media (max-width: 600px) {
  .klokbalk-acties--kc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .klokbalk-acties--kc .knop { min-width: 0; }
  .klokbalk-acties--kc .klokbalk-einde { grid-column: 1; grid-row: 2; }
  .klokbalk-acties--kc .klokbalk-ongedaan { grid-column: 2; grid-row: 2; margin-left: 0; }
}

/* Klokcorrectie (0066), de lagen Mijn uren (tablet) en Posten (kantoor), op elke maat: de knoppen (Terug en
   Opslaan, of Sluiten) staan op een vaste rij onderaan de laag, het formulier of de lijst erboven scrolt in een
   eigen gebied. De titel en de melding scrollen niet mee. Eerst lag de knoppenrij over de onderkant van de inhoud
   (sticky), zodat op 640x360 het Eind-veld en de melding eronder verdwenen tot je scrolde. */
.laag--kc { display: flex; flex-direction: column; }
.laag--kc > * { flex: none; }
.laag--kc > .kc-bewerk, .laag--kc > .kc-lijst { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* Bij het formulier houdt de melding een vaste hoogte, ook leeg (regels van 1.45em, plus rand en ruimte), zodat
   Opslaan niet verspringt als hij verschijnt: twee regels, drie op 360 px. */
.kc-bewerk ~ .kc-melding { min-height: calc(2.9em + 22px); }
@media (max-width: 400px) {
  .kc-bewerk ~ .kc-melding { min-height: calc(4.35em + 22px); }
}
/* Bij de lijst staat de melding in de knoppenrij links van Sluiten en neemt hij leeg geen hoogte: een regel valt
   binnen de 48 px van Sluiten, en een langere melding groeit naar boven (Sluiten blijft onderaan staan), dus er
   verspringt niets. Eerst hield hij tussen de lijst en de knoppen ook leeg 47 px vast, zodat de lijst op 640x360
   maar 124 px hoog was en Aanpassen en Telt niet van de eerste post voor een derde in beeld stonden. */
.kc-voet--lijst { align-items: flex-end; gap: 10px; }
.kc-voet--lijst > .kc-melding { flex: 1 1 auto; min-width: 0; margin: 0; }
.kc-voet--lijst > .knop { flex: none; }

/* Liggend telefoonscherm (640x360, 740x360, 915x412): Begin en Eind naast elkaar op een regel, het label voor
   het veld, zodat het hele formulier met de melding en de knoppen zonder scrollen in beeld staat. */
@media (max-height: 500px) and (orientation: landscape) {
  .kc-bewerk { grid-template-columns: auto minmax(0, 240px) auto minmax(0, 240px); justify-content: start; align-items: center; gap: 8px 12px; }
  .kc-bewerk > p { grid-column: 1 / -1; }
}

/* Waar gaat het heen? in het nestingoverzicht (0067) op 360 px: naast Opnieuw snijden viel
   Werkvoorbereiding buiten zijn knop; de twee knoppen onder elkaar, elk 48 px. Alleen dit overzicht.
   Tot 600 px (09-11), zoals bij gereedmelden: op 412 px viel Werkvoorbereiding nog 2 px buiten zijn knop. */
@media (max-width: 600px) {
  .ng-best { grid-template-columns: minmax(0, 1fr); }
  .ng-best button { min-height: var(--doel); }
}

/* Kantoorlijsten op 6 inch staand, smal (360 px), nagekeken met nepdata:
   - Opnieuw te maken: de twee tabbladen onder elkaar; naast elkaar viel "Werkvoorbereiding (4)"
     12 px buiten zijn knop (tekst 167 px in een knop van 155 px).
   - Beheer, Afgemeld in Ridder en Leden: de stand onder de tekst. Naast een bredere stand (Geen
     vloergegevens, urencontrole) kromp de tekst 40 tot 56 px, zodat het bonnummer of de naam per regel
     en na een rolwissel anders afbrak (WO 2609142.12 op vier regels in plaats van drie). */
@media (max-width: 400px) {
  .opnieuw .segment--tabs { grid-template-columns: minmax(0, 1fr); }
  .beheer-afgemeld-rij, .beheer-lid { grid-template-columns: minmax(0, 1fr); }
}

/* Nesting gereed melden (0067): op 6 inch staand de bon (met af) boven Nodig en Goed, niets loopt buiten de
   regel; liggend (hoogte tot 500 px) de kop, de schakelaar en de knop compact en de knop naast de telling, zodat de
   lijst ruimte houdt. Telling en knop staan buiten de lijst en blijven altijd in beeld. */
@media (max-width: 600px) {
  .ng-kop { padding: 8px 16px; }
  .ng-schakel, .ng-lijst, .ng-voet { padding-left: 16px; padding-right: 16px; }
  .ng-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bon bon" "nodig goed"; column-gap: 12px; }
  .ng-lijst--deels .ng-rij { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "af bon bon" "nodig nodig goed"; }
  .ng-nodig { justify-items: start; }
  .ng-goed, .ng-door { min-width: 0; }
  .nesting-job--twee { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .ng-kop { padding: 4px 16px; }
  .ng-kop .gm-titel { font-size: 1.2rem; }
  .ng-schakel, .ng-lijst, .ng-voet { padding-left: 16px; padding-right: 16px; }
  .ng-schakel { padding-top: 4px; }
  .ng-lijst { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .ng-regel { padding: 4px 10px; }
  .ng-voet { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 16px; padding-top: 6px; padding-bottom: 8px; }
  .ng-voet .ng-telling, .ng-voet .ng-melding { grid-column: 1; }
  .ng-voet .ng-bevestig { grid-column: 2; grid-row: 1 / span 2; width: auto; min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
}

/* Wie en pincode in één laag (0063): naast elkaar is de standaard (10,1 inch staand en liggend,
   pc). 6 inch staand: de cijfertoetsen vast onderaan, de namen erboven (die scrollen). 6 inch
   liggend: de namen links, de cijfertoetsen rechts. Tot 600 px en liggend ligt de melding over
   de onderkant van de namen, zodat er niets verspringt. Toetsen en tegels minstens 48 px. */
@media (max-width: 600px) {
  .laag--wiepin { display: flex; flex-direction: column; height: 100%; padding: 14px 16px; }
  .laag--wiepin .laag-titel { margin: 2px 0 8px; font-size: 1.3rem; }
  .wiepin {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "namen" "wie" "numpad" "voet";
    gap: 8px;
  }
  .wiepin-namen { min-height: 0; }
  .wiepin-melding { grid-area: namen; align-self: end; min-height: 0; pointer-events: none; }
  .wiepin-voet .knop { min-height: 56px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .laag--wiepin { display: flex; flex-direction: column; width: min(860px, 100%); height: 100%; }
  .wiepin {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "wie numpad" "namen numpad" "voet numpad";
    gap: 6px 16px;
  }
  .wiepin-namen { min-height: 0; }
  .wiepin-wie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; }
  .wiepin-melding { grid-area: namen; align-self: end; min-height: 0; pointer-events: none; }
  .wiepin-numpad { align-self: end; gap: 6px; }
  .wiepin-numpad button { min-height: 48px; }
  .wiepin-voet .knop { min-height: 48px; }
}

/* Lage telefoon staand (tot 600 px hoog: Zebra TC21/TC26 als app 360x568, in Chrome met adresbalk 360x520,
   schermtoetsenbord dicht), 09-11:
   - Gereedmelden: kop, aantal en numpad compacter (toetsen van 48 px; de regel "Numpad vult" zonder vaste hoogte,
     zoals liggend) en Bevestigen met minder ruimte binnenin (71 in plaats van 88 px). Op 360x520 eindigt het numpad
     op 434 px en staat Bevestigen op 437 tot 508: helemaal in beeld en niet over een toets.
   - Keuzes (STOP en wat nu, en de andere keuzelagen): compact zoals op een liggende telefoon, zodat alle keuzes en
     Annuleren zonder scrollen in beeld staan (op 360x520 Einde dienst 372 tot 430, Annuleren 440 tot 488).
   Raakvlakken blijven minstens 48 px. */
@media (max-height: 600px) and (orientation: portrait) {
  .gm-kop { padding-top: 4px; padding-bottom: 4px; }
  .gm-titel { font-size: 1.3rem; }
  .gm-body { padding-top: 6px; }
  .gm-display { padding-top: 4px; padding-bottom: 4px; }
  .gm-waarde { font-size: 2.4rem; }
  .gm-body .numpad-doel { min-height: 0; }
  .gm-body .numpad button { min-height: 48px; }
  .laag--vol .knop--bevestig { min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .laag-achtergrond { padding: 8px; }
  .laag--midden { padding: 14px 16px; }
  .laag-titel { margin: 2px 0 6px; font-size: 1.3rem; }
  .laag-tekst { margin-bottom: 10px; }
  .keuzes { gap: 6px; }
  .keuzes .knop--keuze { min-height: 56px; padding: 6px 14px; }
  .keuzes + .laag-voet { margin-top: 10px; }
}