/* Goedkeurscherm v0. Alleen van de eigen server; geen webfont, geen plaatjes (CSP default-src 'self').
   Beeld: witte grond, bijna zwarte tekst, dunne lijnen als op een technische tekening, één accent (staalblauw)
   voor knop, links en focus. Groen en amber betekenen alleen status, en staan altijd naast een woord. */

:root {
  --grond: #ffffff;          /* pagina en voorstel */
  --vlak: #f6f7f9;           /* het origineel, de regel met focus: koel neutraal */
  --vlak-2: #eceff3;         /* kop en regelnummers van een Excel-bijlage */
  --lijn: #dfe3e8;           /* haarlijnen */
  --lijn-sterk: #78808a;     /* rand van een kiezer: 4,0:1 op wit */
  --inkt: #1d1c1a;
  --inkt-zacht: #555c66;     /* 6,8:1 op wit, 6,3:1 op --vlak */
  --accent: #2c5470;         /* staalblauw: knop, links, focus en de bronrij */
  --accent-donker: #213f54;
  --klopt: #2f6b45;
  --wachtrij: #8a5a00;       /* 5,9:1 op wit */
  --wachtrij-rand: #d99a2b;  /* smalle zijstreep van een onzekere regel; geen vlak (ruling B22) */
  --letter: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rand: 1.5rem;            /* binnenrand van de vakken */
  --streep: 3px;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding: 3rem 0 5.5rem;   /* vaste tabelkop bovenaan, actiebalk onderaan */
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 400 0.9375rem/1.45 var(--letter);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ul, pre { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

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

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

.zacht { color: var(--inkt-zacht); }
.leeg { color: var(--inkt-zacht); padding: 0.75rem 0; }

kbd {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 0.3em;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
  color: var(--inkt);
  background: var(--grond);
  border: 1px solid var(--lijn);
  border-bottom-color: var(--lijn-sterk);
  border-radius: 2px;
}

.sneltoetsen { font-size: 0.8125rem; color: var(--inkt-zacht); }

/* ---------- balk bovenaan ---------- */

.balk {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: 0 var(--rand);
  background: var(--grond);
  border-bottom: 1px solid var(--lijn);
}

.product {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 1rem;
  border-right: 1px solid var(--lijn);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.kruimels {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
}
.kruimels > * { flex: none; }
.kruimels [aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.kruimels .zacht { font-weight: 400; margin-left: 0.25rem; }
.scheiding { color: var(--lijn-sterk); }

.testset {
  flex: none;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--inkt-zacht);
  text-decoration: none;
  border: 1px solid var(--lijn);
  border-radius: 2px;
}
.testset:hover { color: var(--inkt); border-color: var(--lijn-sterk); }

/* ---------- statusmerk: een vierkantje in de statuskleur, altijd met een woord ---------- */

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.merk::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
}
.merk.klopt { color: var(--klopt); }
.merk.wachtrij, .merk.controleer { color: var(--wachtrij); }   /* Wachtrij: de mail; Controleer: een regel of de soort */
.merk.goedgekeurd { color: var(--inkt-zacht); font-weight: 500; }
.merk.goedgekeurd::before {  /* een vinkje van twee lijnen */
  width: 0.3125rem;
  height: 0.5625rem;
  margin: 0 0.0625rem 0.1875rem;
  background: none;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.merk.aangepast { color: var(--inkt); }
.merk.aangepast::before { background: none; border: 1.5px solid currentColor; }  /* open vierkantje: jouw keuze */
.merk.bekeken { color: var(--inkt); }   /* gevuld vierkantje in inkt: onzeker, maar je bent er geweest */
.merk.bezig { color: var(--inkt-zacht); font-weight: 500; }   /* platform: nog geen voorstel, de werker is aan zet */
.merk.bezig::before { background: none; border: 1.5px solid currentColor; }

/* ---------- wachtrij ---------- */

.lijst { padding: 1.75rem var(--rand) 3rem; }

.lijst-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 1.5rem;
  margin-bottom: 1.25rem;
}
.lijst-kop h1 { flex-basis: 100%; }

h1 {
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.tellingen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; }
.kerncijfer {
  margin-right: 0.25rem;
  font-size: 2.25rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
}
.telling-rest { color: var(--inkt-zacht); }
.lijst-kop .sneltoetsen { margin-left: auto; }

/* een koppeling met een storing (platform): een zin boven de mails, in de kleur van wat aandacht vraagt */
.storing {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: var(--wachtrij);
  border-left: var(--streep) solid var(--wachtrij-rand);
}

table.mails {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;   /* zodat de lijn onder de vaste kop meeschuift */
  border-spacing: 0;
}

.mails th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.625rem 0.75rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  color: var(--inkt-zacht);
  white-space: nowrap;
  background: var(--grond);
  border-bottom: 1px solid var(--inkt);
}

.mails td {
  padding: 0.625rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--lijn);
  overflow-wrap: anywhere;
}

.mails th:first-child, .mails td:first-child { padding-left: 0; }
.mails th:last-child, .mails td:last-child { padding-right: 0; }

.mails .getal { text-align: right; }
.mails th.mail { width: 5.5rem; }
.mails th.ontvangen { width: 9rem; }
.mails th.klant { width: 22%; }
.mails th.soort { width: 5.5rem; }
.mails th.regels { width: 4.25rem; }
.mails th.onzeker { width: 5rem; }
.mails th.status { width: 8.5rem; }
.mails th.reden { width: 20%; }

.mail-rij:hover td, .mail-rij:focus-within td { background: var(--vlak); }
.mail-rij .mail a { font-weight: 600; }
.mail-rij .merk { font-size: inherit; }
.mail-rij .ontvangen { white-space: nowrap; }
.mail-rij .onzeker.nul { color: var(--inkt-zacht); }
.mail-rij .reden { font-size: 0.875rem; color: var(--inkt-zacht); }
.mail-rij[data-status="goedgekeurd"] td { color: var(--inkt-zacht); }
.mail-rij[data-status="goedgekeurd"] .mail a { font-weight: 500; }

.voetnoot {
  max-width: 70ch;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--inkt-zacht);
}

@media (max-width: 1099px) {
  .mails .ontvangen { display: none; }
}

@media (max-width: 759px) {  /* elke mail als een blok; de hele rij is de link */
  .lijst-kop .sneltoetsen { display: none; }
  .mails, .mails tbody { display: block; }
  .mails thead { display: none; }
  .mails .ontvangen { display: block; }

  .mail-rij {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--lijn);
  }
  .mail-rij:hover td, .mail-rij:focus-within td { background: none; }
  .mail-rij td { display: block; padding: 0; border: 0; text-align: left; }
  .mail-rij .mail a::after { content: ""; position: absolute; inset: 0; }
  .mail-rij .mail a:focus-visible { outline: none; }
  .mail-rij:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .mail-rij .mail { order: 1; flex: 1 1 auto; }
  .mail-rij .status { order: 2; }
  .mail-rij .onderwerp { order: 3; flex-basis: 100%; font-weight: 500; }
  .mail-rij .klant { order: 4; flex-basis: 100%; }
  .mail-rij .soort { order: 5; }
  .mail-rij .regels { order: 6; }
  .mail-rij .onzeker { order: 7; }
  .mail-rij .ontvangen { order: 8; }
  .mail-rij .reden { order: 9; flex-basis: 100%; }
  .mail-rij .reden:empty { display: none; }
  .mail-rij .soort, .mail-rij .regels, .mail-rij .onzeker, .mail-rij .ontvangen {
    font-size: 0.875rem;
    color: var(--inkt-zacht);
  }
  .mail-rij [data-kop]::before { content: attr(data-kop) " "; }
}

/* ---------- detail: twee vakken ---------- */

.werkvlak {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.vak { padding: 1.5rem var(--rand) 2rem; }

.vak h2 {
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.origineel {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.origineel h2 { margin-bottom: 1rem; }
.origineel:focus-visible { outline-offset: -2px; }

@media (min-width: 1200px) {  /* naast elkaar; elk vak schuift op zichzelf, de balk bovenaan blijft staan */
  .detailpagina {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .werkvlak {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);   /* 1200–1439: het voorstel krijgt de ruimte */
    min-height: 0;
  }
  .origineel, .voorstel {
    position: relative;   /* anders ontsnappen sr-only-spans aan het vak en kan de hele pagina schuiven */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .origineel { border-bottom: 0; border-right: 1px solid var(--lijn); }
  .voorstel { scroll-padding: 3rem 0 5.5rem; }   /* focus nooit onder de tabelkop of de actiebalk */
  .vak { padding-top: 1rem; padding-bottom: 2rem; }
  .voorstel .vak { padding-left: 1.25rem; padding-right: 1.25rem; }
  .voorstel .actiebalk { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 1440px) {   /* origineel 540 px op 1440: de Excel en de pdf blijven leesbaar */
  .werkvlak { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
}

/* ---------- het origineel ---------- */

.kopgegevens {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--lijn);
}
.kopgegevens div { display: contents; }
.kopgegevens dt { color: var(--inkt-zacht); }
.kopgegevens dd { overflow-wrap: anywhere; }

.mailtekst {
  max-width: 72ch;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bijlage { margin-top: 2rem; }

.bijlage-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.625rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.bestandsnaam { font-weight: 400; color: var(--inkt-zacht); overflow-wrap: anywhere; }
.bijlage-kop .open { margin-left: auto; font-weight: 400; }

.tabelvak {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  background: var(--grond);
}
.tabelvak:focus-visible { outline-offset: 1px; }

table.excel {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.excel th, .excel td {   /* tekst breekt af, zodat Aantal ook in een smal vak (1280, 1366) in beeld blijft */
  padding: 0.3125rem 0.625rem;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  border: 1px solid var(--lijn);
}
.excel thead th { font-weight: 600; background: var(--vlak-2); }
.excel .getal { text-align: right; }
.excel .getal, .excel .rijnr { white-space: nowrap; }
.code { white-space: nowrap; }   /* "TG-444217" nooit als "TG-" / "444217"; geen vast koppelteken, dan kopieert hij goed */
.excel .rijnr {
  width: 1%;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
  color: var(--inkt-zacht);
  background: var(--vlak-2);
}
.excel tr.bron { outline: 2px solid var(--accent); outline-offset: -2px; }   /* bron van de regel met focus */

.pdf {
  display: block;
  width: 100%;
  aspect-ratio: 210 / 297;   /* A4 */
  background: var(--grond);
  border: 1px solid var(--lijn);
}

.foto {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--grond);
  border: 1px solid var(--lijn);
}

.bijlage-noot { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--inkt-zacht); }
.tabelvak + .bijlage-noot { margin: 0.5rem 0 0; }

.bijlage-fout {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  background: var(--grond);
  border: 1px dashed var(--lijn-sterk);
}

/* ---------- het voorstel ---------- */

.voorstel form, .voorstel .werk {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.voorstel .vak { flex: 1 0 auto; }

.voorstel-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-bottom: 0.625rem;
}
.al-goedgekeurd { font-size: 0.875rem; color: var(--inkt-zacht); }

.kopblok {  /* als het titelblok van een tekening: cellen met haarlijnen ertussen */
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
}
.kopblok > div {
  min-width: 0;
  padding: 0.4375rem 0.75rem 0.5rem;
  background: var(--grond);
}
.kopblok .breed { grid-column: 1 / -1; }
.kopblok dt {
  margin-bottom: 0.125rem;
  font-size: 0.8125rem;
  color: var(--inkt-zacht);
}
.kopblok dt.met-merk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.625rem; }
.kopblok dt .merk { font-size: 0.8125rem; }   /* "Soort ■ Controleer": op de regel van het label, geen extra hoogte */
.kopblok dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 1.875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.kopblok dd.zacht { font-weight: 400; }
.kopblok .breed { display: flex; align-items: baseline; gap: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.kopblok .breed dt { flex: none; margin: 0; }
.kopblok .breed dd { display: block; max-width: 75ch; min-height: 0; font-size: 0.875rem; font-weight: 400; }
.redenen, .meldingen { margin: 0; padding: 0; list-style: none; }

.regels-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.875rem 0 0.125rem;
}
.regels-titel h3, .regels-titel-los { font-size: 0.9375rem; font-weight: 650; }
.regels-titel-los { margin-top: 1.5rem; }

/* Eén tabelrij per regel (ruling B21). Kolommen met vaste breedte, zodat aantallen, prijzen en totalen
   onder elkaar staan; alleen de tekst van de klant en het artikel rekken mee. */
table.regels {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
  line-height: 1.32;
}
.regels thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.375rem 0.375rem 0.3125rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--inkt-zacht);
  background: var(--grond);
  border-bottom: 1px solid var(--inkt);
}
/* Breedtes gemeten in Chromium, WebKit en Firefox (13 px, systeemletter): "€ 9.999,99" vet 73 px, "Controleer"
   met vierkantje 80 px, "inkoop 120 dagen" (12 px) 103 px; plus 12 px binnenrand. Langere bedragen: .grote-bedragen. */
.regels th.nr { width: 1.5rem; }
.regels th.tekst { width: 14%; }
.regels th.aantal { width: 7.25rem; }
.regels th.prijs { width: 5rem; }
.regels th.totaal { width: 5.5rem; }
.regels th.voorraad { width: 7.25rem; }
.regels th.status { width: 5.75rem; }
.regels.grote-bedragen th.prijs { width: 6.5rem; }    /* "€ 12.345,678": 85 px */
.regels.grote-bedragen th.totaal { width: 9.25rem; }  /* "€ 1.234.567.800,00" vet: 131 px */
.regels .getal { text-align: right; }
.regel .prijs [data-veld], .regel .totaal [data-veld] { white-space: nowrap; }   /* nooit "€" los van het getal */
.regels.grote-bedragen .regel .totaal [data-veld], .regels.grote-bedragen .regel .prijs [data-veld] {
  white-space: normal;   /* nog langer dan het slechtste geval: liever afbreken dan de kolom Voorraad in */
  overflow-wrap: anywhere;
}
.regels .onder { display: block; font-size: 0.75rem; font-weight: 400; color: var(--inkt-zacht); }
.regels .onder:empty { display: none; }
.regels .prijs-onder { display: none; }   /* de prijs per eenheid onder het totaal, als de kolom Prijs weg moet */
@media (min-width: 1200px) and (max-width: 1365px) {
  /* breedte 0 in plaats van weglaten: de rij met de reden overspant nog steeds alle kolommen */
  .regels th.prijs, .regels.grote-bedragen th.prijs { width: 0; padding: 0; font-size: 0; }
  .regel .hoofd > .prijs { padding: 0; font-size: 0; visibility: hidden; }
  .regels .prijs-onder { display: block; }
  .regels .prijs-onder:has([data-veld]:empty) { display: none; }
}

.regels .nr {   /* de eerste cel draagt de zijstreep, ook in de kop, zodat alles uitlijnt */
  padding-left: 0.25rem;
  border-left: var(--streep) solid transparent;
}
.regel.open > tr > .nr { border-left-color: var(--wachtrij-rand); }   /* amber alleen voor wat nog open staat */

.regel .hoofd > * {
  padding: 0.4375rem 0.375rem;
  vertical-align: top;
  border-bottom: 1px solid var(--lijn);
}
.regel .hoofd > .nr { padding-top: 0.6875rem; padding-left: 0.25rem; font-weight: 600; text-align: left; color: var(--inkt-zacht); }
.regel:has(> .noot:not([hidden])) .hoofd > * { padding-bottom: 0.125rem; border-bottom-color: transparent; }
.regel .noot > * {
  padding: 0 0.375rem 0.4375rem;
  border-bottom: 1px solid var(--lijn);
}
.regel .noot > .nr { padding-left: 0.25rem; }
.regel:focus-within > tr > * { background: var(--vlak); }

.regel .tekst, .regel .aantal, .regel .prijs, .regel .totaal, .regel .voorraad, .regel .status { padding-top: 0.6875rem; }
.regel .tekst { overflow-wrap: anywhere; }
.regel [data-veld="aantal"] { font-weight: 500; }
.regel .totaal { font-weight: 600; }
.regel .prijs, .regel .totaal { overflow-wrap: normal; }   /* een bedrag breekt nooit midden in het getal */
.regel .voorraad { overflow-wrap: anywhere; }
.regel [data-veld="voorraadnoot"] { white-space: pre-line; }   /* "nog 3 × doos" en "inkoop 7 dagen" onder elkaar */
.regel .voorraad.tekort [data-veld="voorraad"] { font-weight: 600; }
.regel .status { white-space: nowrap; }
.regel .status .merk { gap: 0.3125rem; font-size: 0.8125rem; }
.regel .status .merk::before { width: 0.4375rem; height: 0.4375rem; }
/* Eén woord per regel: Aangepast (jouw keuze) > Controleer (open) > Bekeken (onzeker, je was er) > Klopt. */
.regel .merk.aangepast, .regel .merk.bekeken { display: none; }
.regel.onzeker:not(.open):not(.gewijzigd) .merk.controleer { display: none; }
.regel.onzeker:not(.open):not(.gewijzigd) .merk.bekeken { display: inline-flex; }
.regel.gewijzigd .merk.klopt, .regel.gewijzigd .merk.controleer { display: none; }
.regel.gewijzigd .merk.aangepast { display: inline-flex; }

/* Zonder JavaScript volgen merk en bedragen een andere keuze niet: dan neutraal, niets wat niet meer klopt.
   option:checked:not([selected]) = de keuze wijkt af van wat de server gaf. */
.zonder-js { display: none; }
html:not(.js) .regel:has(option:checked:not([selected])) .zonder-js,
html:not(.js) form:has(.regel option:checked:not([selected])) .stand .zonder-js {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--inkt-zacht);
}
html:not(.js) .regel:has(option:checked:not([selected])) :is(.aantal, .prijs, .totaal, .voorraad) > *,
html:not(.js) .regel:has(option:checked:not([selected])) .eenheid-noot { visibility: hidden; }
html:not(.js) .regel:has(option:checked:not([selected])) .merk { display: none; }
html:not(.js) .regel:has(option:checked:not([selected])) .merk.aangepast { display: inline-flex; }
html:not(.js) form:has(.regel option:checked:not([selected])) :is(.ordertotaal, .open-telling) { display: none; }

.reden { color: var(--inkt); }
.eenheid-noot { font-weight: 600; }
.reden + .eenheid-noot:not(:empty)::before { content: " · "; font-weight: 400; }

/* ---------- kiezer ---------- */

.kiezer {
  position: relative;
  display: block;
  max-width: 100%;
}
.kiezer.kort { display: inline-block; width: 100%; max-width: 9.5rem; }
.kiezer.kort select { min-height: 1.875rem; padding-top: 0.1875rem; padding-bottom: 0.1875rem; }
.kiezer.kort::after { top: 0.9375rem; }
.kiezer::after {   /* pijltje van twee lijnen; een plaatje mag niet onder de CSP */
  content: "";
  position: absolute;
  top: 0.9375rem;
  right: 0.5625rem;
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid var(--inkt-zacht);
  border-bottom: 1.5px solid var(--inkt-zacht);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 2.125rem;
  padding: 0.3125rem 1.75rem 0.3125rem 0.5rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
  text-overflow: ellipsis;
  background: var(--grond);
  border: 1px solid var(--lijn-sterk);
  border-radius: 2px;
  cursor: pointer;
}
select:hover { border-color: var(--inkt); }
select:focus-visible { outline-offset: 1px; border-color: var(--accent); }

/* Met JavaScript: het gekozen artikel staat als tekst die mag afbreken; de keuzelijst ligt er onzichtbaar
   bovenop, zodat klikken en het toetsenbord gewoon de lijst openen. Zonder JavaScript: de gewone lijst. */
.gekozen { display: none; }
.js .regel .kiezer {
  min-height: 1.875rem;
  padding: 0.25rem 1.375rem 0.25rem 0.4375rem;
  overflow: hidden;   /* WebKit telt de optietekst van de onzichtbare lijst anders mee als breedte (390 px: 469) */
  background: var(--grond);
  border: 1px solid var(--lijn-sterk);
  border-radius: 2px;
}
.js .regel .kiezer select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  border: 0;
}
.js .regel .gekozen { display: block; overflow-wrap: anywhere; }
.js .regel .kiezer:hover { border-color: var(--inkt); }
.js .regel .kiezer:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.gekozen .nummer { font-weight: 600; }
.kiezer.zonder-artikel .gekozen { color: var(--inkt-zacht); }
.regel.gewijzigd .kiezer, .regel.gewijzigd select { border-color: var(--inkt); }

/* ---------- actiebalk ---------- */

.actiebalk {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.5rem;
  padding: 0.625rem var(--rand);
  background: var(--grond);
  border-top: 1px solid var(--lijn);
}

/* Links het totaal met eronder wat nog open staat; rechts de knop. Zo blijft de balk op elke breedte één rij
   hoog en verspringt de knop nooit, ook niet als de zin eronder langer wordt (ruling B24). */
.actiebalk { flex-wrap: nowrap; }
.stand { flex: 1 1 auto; min-width: 0; }
.ordertotaal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.ordertotaal .label { font-size: 0.8125rem; color: var(--inkt-zacht); }
.ordertotaal .bedrag { font-size: 1.375rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; }
.ordertotaal .btw { font-size: 0.8125rem; color: var(--inkt-zacht); }
.open-telling { font-size: 0.8125rem; }
.niet-goedkeuren { font-size: 0.875rem; font-weight: 600; }
.actiebalk .sneltoetsen { flex: none; margin-left: auto; }
.actiebalk button { flex: none; }

button[type="submit"] {
  min-height: 2.5rem;
  padding: 0.5rem 1.375rem;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
button[type="submit"]:hover { background: var(--accent-donker); }
button[type="submit"]:active { background: var(--accent-donker); transform: translateY(1px); }

/* ---------- foutpagina ---------- */

.fout {
  max-width: 40rem;
  padding: 3rem var(--rand);
}
.fout > * + * { margin-top: 0.75rem; }
.foutcode { font-size: 0.8125rem; color: var(--inkt-zacht); }

/* ---------- smal: elke regel een compact blok ---------- */

@media (max-width: 759px) {
  .kopblok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regels-titel .sneltoetsen { display: none; }

  table.regels, .regels tbody, .regels tr { display: block; }
  .regels thead { display: none; }

  .regel .hoofd {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    column-gap: 0.625rem;
    row-gap: 0.375rem;
    padding: 0.75rem 0 0.75rem 0.375rem;
    border-left: var(--streep) solid transparent;
    border-bottom: 1px solid var(--lijn);
  }
  .regel .hoofd > *, .regel .hoofd > .nr { display: block; padding: 0; border: 0; text-align: left; }
  .regel .hoofd > .nr { grid-area: 1 / 1; }
  .regel .hoofd > .tekst { grid-area: 1 / 2; }
  .regel .hoofd > .status { grid-area: 1 / 3; }
  .regel .hoofd > .artikel { grid-area: 2 / 2 / 3 / 4; }
  .regel .hoofd > .aantal { grid-area: 3 / 2; }
  .regel .hoofd > .prijs { grid-area: 3 / 3; text-align: right; }
  .regel .hoofd > .voorraad { grid-area: 4 / 2; }
  .regel .hoofd > .totaal { grid-area: 4 / 3; text-align: right; }
  .regel .hoofd > [data-kop]::before {
    content: attr(data-kop) " ";
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--inkt-zacht);
  }
  .regel .hoofd [data-veld="aantal"], .regel .hoofd [data-veld="voorraad"] { display: inline; }
  .regel .hoofd > td:has(> [data-veld]:first-child:empty) { display: none; }   /* geen artikel: geen lege labels */
  .regel:focus-within > tr { background: var(--vlak); }
  .regel:focus-within > tr > * { background: none; }
  .regel.open .hoofd, .regel.open .noot { border-left-color: var(--wachtrij-rand); }
  .regel:has(> .noot:not([hidden])) .hoofd { padding-bottom: 0.25rem; border-bottom-color: transparent; }

  .regel .noot {
    padding: 0 0 0.75rem 2.25rem;
    border-left: var(--streep) solid transparent;
    border-bottom: 1px solid var(--lijn);
  }
  .regel .noot[hidden] { display: none; }
  .regel .noot > * { display: block; padding: 0; border: 0; }
  .regel .noot > .nr { display: none; }
}

@media (max-width: 599px) {
  :root { --rand: 1rem; }
  html { scroll-padding-bottom: 9.5rem; }   /* de actiebalk is hier twee rijen hoog (132 px): j en k nooit eronder */
  .balk { gap: 0.75rem; }
  .product { padding-right: 0.75rem; }
  .kruimels { gap: 0.375rem; }
  .kruimels .zacht { display: none; }
  .actiebalk .sneltoetsen { display: none; }
  .actiebalk { flex-wrap: wrap; }   /* telefoon: totaal en wat open staat over de hele breedte, de knop eronder */
  .stand { flex-basis: 100%; }
  .actiebalk button { flex: 1 1 100%; }
  /* klikvlakken voor een vinger: minstens 44 px hoog */
  button[type="submit"], .kiezer.kort select { min-height: 2.75rem; }
  .js .regel .kiezer { display: flex; align-items: center; min-height: 2.75rem; }
  .js .regel .kiezer::after, .kiezer.kort::after { top: 50%; }
}