/* JNE Hub - licht, strak, gemaakt om lang naar te kijken.
 *
 * Opzet: vaste zijkolom links (navigatie), een smalle werkbalk erboven, en
 * daaronder een tabel die de hele breedte krijgt. Detail schuift rechts in.
 * Kleur is warm neutraal - papier, geen ziekenhuisgrijs - met een accent in
 * het amber van geolied teak. Kleur betekent iets: amber is aandacht, rood is
 * "klopt niet", groen is "geteld en gelijk". Verder is alles rustig.
 */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* papier en inkt */
  --vel: #f6f5f2;            /* de pagina */
  --wit: #ffffff;            /* kaarten, tabel, lade */
  --wit-dof: #fbfaf8;        /* tabelkop, lichte vlakken */
  --lijn: #e7e4de;           /* gewone scheiding */
  --lijn-hard: #d6d2c9;      /* randen die iets afbakenen */
  --inkt: #1b1a17;           /* koppen en cijfers */
  --inkt-2: #63605a;         /* labels, tweede regel */
  --inkt-3: #8e8a82;         /* hulptekst, eenheden */

  /* het accent: geolied teak */
  --amber: #9a5b00;
  --amber-op: #7d4900;
  --amber-zacht: #fbf1e2;

  /* wat een cijfer betekent */
  --goed: #1a6b46;
  --goed-zacht: #e7f3ec;
  --let: #b3261e;
  --let-zacht: #fbeae9;
  --rust: #63605a;
  --rust-zacht: #f0eeea;

  --zij: 15rem;              /* breedte van de navigatie */
  --balk: 3.5rem;            /* hoogte van de werkbalk */
  --groepkop: 1.625rem;      /* de bovenste, groeperende kopregel */
  --rij: 3rem;               /* hoogte van een tabelrij, comfortabel */
  --raak: 2.5rem;            /* kleinste aanraakvlak */
  --ronding: 6px;
  --ronding-groot: 10px;

  --schaduw-1: 0 1px 2px rgba(27, 26, 23, 0.05), 0 1px 1px rgba(27, 26, 23, 0.04);
  --schaduw-2: 0 2px 4px rgba(27, 26, 23, 0.04), 0 6px 16px rgba(27, 26, 23, 0.06);
  --schaduw-3: 0 4px 8px rgba(27, 26, 23, 0.05), 0 16px 32px rgba(27, 26, 23, 0.09);
  --schaduw-lade: -12px 0 32px rgba(27, 26, 23, 0.10);

  --tekst: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --titel: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --vlot: 150ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

:root[data-dicht="compact"] { --rij: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  :root { --vlot: 1ms linear; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--vel);
  color: var(--inkt);
  font: 400 0.875rem/1.5 var(--tekst);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

::selection { background: var(--amber-zacht); color: var(--amber-op); }

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

* { scrollbar-width: thin; scrollbar-color: #cfcbc2 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cfcbc2;
  border-radius: 99px;
  border: 3px solid var(--vel);
}
::-webkit-scrollbar-thumb:hover { background: #b6b1a6; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.tel { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv05" 1; }

.verborgen { display: none !important; }

/* ---------- raamwerk ---------- */

.hub {
  display: grid;
  grid-template-columns: var(--zij) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ---------- zijkolom ---------- */

.zij {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem 0.625rem;
  background: var(--vel);
  border-right: 1px solid var(--lijn);
}

.merk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem 1rem;
  color: var(--inkt);
  text-decoration: none;
}
.merk svg { width: 1.5rem; height: 1.5rem; color: var(--amber); flex: none; }
.merk b {
  display: block;
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.merk small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--inkt-3);
}

.zij__kop {
  padding: 0.875rem 0.5rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

.zij__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: var(--raak);
  padding: 0 0.625rem;
  border-radius: var(--ronding);
  color: var(--inkt-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  transition: background var(--vlot), color var(--vlot);
}
.zij__link svg { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--inkt-3); }
.zij__link:hover { background: rgba(27, 26, 23, 0.045); color: var(--inkt); }
.zij__link[aria-current="page"] {
  background: var(--amber-zacht);
  color: var(--amber-op);
  font-weight: 600;
}
.zij__link[aria-current="page"] svg { color: var(--amber); }
.zij__link .aantal {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.zij__link[aria-current="page"] .aantal { color: var(--amber); }
.zij__link .aantal[data-let="1"] { color: var(--let); }

/* De dichtheidsknop staat aan of uit; dat moet je zien zonder hem aan te raken. */
.zij__link[aria-pressed="true"] {
  background: rgba(27, 26, 23, 0.06);
  color: var(--inkt);
  font-weight: 600;
}
.zij__link[aria-pressed="true"] svg { color: var(--inkt-2); }

.zij__voet { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--lijn); }

/* Onderin de navigatie: hoever de telronde is. Vult de kolom met iets dat
   telt in plaats van met lucht. */
.voortgang { padding: 0.25rem 0.625rem 0.875rem; }
.voortgang__kop {
  margin-bottom: 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-3);
}
.balkje {
  height: 0.375rem;
  border-radius: 99px;
  background: rgba(27, 26, 23, 0.08);
  overflow: hidden;
}
.balkje i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: var(--amber);
  transform: scaleX(var(--deel, 0));
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
.voortgang__uit {
  margin-top: 0.4375rem;
  font-size: 0.75rem;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.voortgang__uit b { color: var(--inkt-2); font-weight: 600; }
.voortgang__uit span { display: block; color: var(--amber-op); }

.wie {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--ronding);
  text-align: left;
}
.wie:hover { background: rgba(27, 26, 23, 0.045); }
.wie .bol {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--amber-zacht);
  color: var(--amber-op);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.wie b { display: block; font-size: 0.8125rem; font-weight: 600; }
.wie small { display: block; font-size: 0.6875rem; color: var(--inkt-3); }
.wie svg { width: 1rem; height: 1rem; margin-left: auto; color: var(--inkt-3); }

/* ---------- werkbalk ---------- */

.werk { display: flex; flex-direction: column; min-width: 0; background: var(--wit); }

.balk {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: var(--balk);
  padding: 0 1.25rem;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

.opener { display: none; }

.zoekveld { position: relative; flex: 1 1 auto; max-width: 30rem; min-width: 0; }
.zoekveld svg {
  position: absolute;
  left: 0.6875rem;
  top: 50%;
  translate: 0 -50%;
  width: 1rem;
  height: 1rem;
  color: var(--inkt-3);
  pointer-events: none;
}
.zoekveld input {
  width: 100%;
  height: var(--raak);
  padding: 0 2.25rem 0 2.125rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--vel);
  color: var(--inkt);
  caret-color: var(--amber);
  transition: border-color var(--vlot), box-shadow var(--vlot);
}
.zoekveld input::placeholder { color: var(--inkt-3); }
.zoekveld input:focus {
  outline: 0;
  background: var(--wit);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-zacht);
}
.zoekveld kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  translate: 0 -50%;
  padding: 0.0625rem 0.3125rem;
  border: 1px solid var(--lijn-hard);
  border-radius: 4px;
  background: var(--wit-dof);
  color: var(--inkt-3);
  font: 500 0.6875rem/1.4 var(--tekst);
}
.zoekveld input:focus + kbd { display: none; }

.balk__rechts { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.synctijd { font-size: 0.75rem; color: var(--inkt-3); white-space: nowrap; }

/* Loopt er een telronde, dan staat dat in de werkbalk - op elk scherm, niet
   alleen op het telscherm. Wie telt moet kunnen zien waar zijn telling heen gaat. */
.rondelint {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: var(--raak);
  padding: 0 0.75rem;
  border: 1px solid #e7d6b8;
  border-radius: 999px;
  background: var(--amber-zacht);
  color: var(--amber-op);
  font-size: 0.78125rem;
  font-weight: 600;
  white-space: nowrap;
}
.rondelint:hover { border-color: var(--amber); }
.rondelint .kort { display: none; }
.rondelint .stip {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  height: var(--raak);
  padding: 0 0.875rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  color: var(--inkt);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--schaduw-1);
  transition: background var(--vlot), border-color var(--vlot), box-shadow var(--vlot);
}
.knop:hover { background: var(--wit-dof); border-color: #c6c1b6; }
.knop:active { box-shadow: none; }
.knop svg { width: 1rem; height: 1rem; flex: none; }

.knop--hoofd { background: var(--amber); border-color: var(--amber); color: #fff; }
.knop--hoofd:hover { background: var(--amber-op); border-color: var(--amber-op); }

.knop--stil { border-color: transparent; background: transparent; box-shadow: none; }
.knop--stil:hover { background: var(--rust-zacht); border-color: transparent; }

.knop--groot { height: 3rem; padding: 0 1.25rem; font-size: 0.9375rem; }
.knop--icoon { width: var(--raak); padding: 0; }

/* ---------- pagina ---------- */

.vel { padding: 1.125rem 1.25rem 4rem; }

.titelrij {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.3125rem;
}
.titelrij h1 {
  font-family: var(--titel);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.titelrij .hoeveel {
  font-size: 0.8125rem;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.titelrij .duw { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }

.uitleg {
  max-width: 52rem;
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  color: var(--inkt-2);
}

.chips { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.8125rem;
  padding: 0 0.6875rem;
  border: 1px solid var(--lijn-hard);
  border-radius: 99px;
  background: var(--wit);
  color: var(--inkt-2);
  font-size: 0.78125rem;
  font-weight: 500;
  transition: background var(--vlot), border-color var(--vlot), color var(--vlot);
}
.chip:hover { border-color: #c6c1b6; color: var(--inkt); }
.chip[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.chip .aantal { font-variant-numeric: tabular-nums; opacity: 0.65; }

/* ---------- tabel ---------- */

/* De tabel loopt door tot de randen van het werkvlak. Een kaart eromheen zou
   een scrollcontainer zijn, en dan plakt de kop niet meer aan de werkbalk. */
.tabelvak {
  margin: 0 -1.25rem;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}

.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  box-shadow: var(--schaduw-1);
}

.tabel { width: 100%; border-collapse: separate; border-spacing: 0; }

/* De grens tussen twee kolomgroepen: verkoop links, voorraad rechts. */
.tabel .grens { border-left: 1px solid var(--lijn); }

.tabel thead th {
  position: sticky;
  z-index: 2;
  background: var(--wit);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.tabel thead tr:first-child th {
  top: var(--balk);
  height: var(--groepkop);
  padding: 0 0.875rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt-3);
  vertical-align: bottom;
  padding-bottom: 0.1875rem;
}
.tabel thead tr:last-child th {
  top: calc(var(--balk) + var(--groepkop));
  height: 2.25rem;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--lijn-hard);
  font-size: 0.6875rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--inkt-2);
}
.tabel thead th.rechts { text-align: right; }
.tabel thead th button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.tabel thead th.rechts button { flex-direction: row-reverse; }
.tabel thead th button:hover { color: var(--inkt); }
.tabel thead th svg { width: 0.75rem; height: 0.75rem; opacity: 0; }
.tabel thead th[aria-sort] { color: var(--inkt); }
.tabel thead th[aria-sort] svg { opacity: 1; color: var(--amber); }

.tabel tbody tr { height: var(--rij); cursor: pointer; }
.tabel tbody td { border-bottom: 1px solid var(--lijn); transition: background var(--vlot); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: var(--wit-dof); }
.tabel tbody tr[aria-selected="true"] td { background: var(--amber-zacht); }
.tabel tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--amber); }

.tabel td { padding: 0 0.875rem; font-size: 0.84375rem; vertical-align: middle; }
.tabel td.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.tabel td.stil { color: var(--inkt-3); white-space: nowrap; }
.tabel td.sterk { font-weight: 600; }

/* De naamkolom blijft staan als de tabel zijwaarts schuift. */
.tabel .vast {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
.tabel thead .vast { z-index: 3; background: var(--wit); }
.tabel tbody td.vast { background: var(--wit); }
.tabel tbody tr:hover td.vast { background: var(--wit-dof); }
.tabel tbody tr[aria-selected="true"] td.vast { background: var(--amber-zacht); }

/* Een tabel zonder plakkende kopregel mag wel zijwaarts schuiven; de eerste
   kolom schuift dan mee als anker. Dat is iets anders dan de artikelenlijst,
   waar de kop aan de werkbalk hangt en een scrollvlak juist alles sloopt. */
.tabelvak--rol { overflow-x: auto; }
.tabelvak--rol .tabel { min-width: 46rem; }
.tabelvak--rol thead th {
  position: static;
  height: 2.25rem;
  vertical-align: middle;
  padding-bottom: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--inkt-2);
  border-bottom: 1px solid var(--lijn-hard);
}
.tabel tbody tr:not([data-code]) { cursor: default; }
.tabel tbody tr[data-vervallen="1"] td { opacity: 0.5; }

.artikelcel { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.artikelcel .code {
  flex: none;
  width: 3.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.artikelcel .naam { min-width: 0; }
.artikelcel .naam strong {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artikelcel .naam em {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--inkt-3);
}

/* Twaalf maanden verkoop, klein genoeg om ernaast te passen. */
.verloop { display: flex; align-items: flex-end; gap: 1px; width: 4.5rem; height: 1.25rem; }
.verloop i { flex: 1; min-height: 1px; background: #e1dcd3; border-radius: 1px; }
.verloop i[data-nu="1"] { background: var(--amber); }
tr:hover .verloop i { background: #d2ccc1; }
tr:hover .verloop i[data-nu="1"] { background: var(--amber); }

.merkje {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.375rem;
  padding: 0 0.4375rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.merkje--goed { background: var(--goed-zacht); color: var(--goed); }
.merkje--let { background: var(--let-zacht); color: var(--let); }
.merkje--amber { background: var(--amber-zacht); color: var(--amber-op); }
.merkje--rust { background: var(--rust-zacht); color: var(--rust); }

/* Het verschil met Exact, als er een telling is. Getal blijft zwart, het
   verschil krijgt de kleur - zo blijft de kolom een kolom cijfers. */
.afwijk { margin-left: 0.3125rem; font-size: 0.75rem; font-weight: 600; }
.afwijk[data-kant="tekort"] { color: var(--let); }
.afwijk[data-kant="over"] { color: var(--amber-op); }

.rijknop { opacity: 0; transition: opacity var(--vlot); }
tr:hover .rijknop, tr:focus-within .rijknop { opacity: 1; }

/* ---------- lijst op de telefoon ---------- */

.kaartjes { display: none; flex-direction: column; gap: 0.5rem; }
.kaartje {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-1);
  text-align: left;
}
.kaartje b { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.kaartje .onder {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- lade ---------- */

.lade {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 20;
  width: min(34rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border-left: 1px solid var(--lijn-hard);
  box-shadow: var(--schaduw-lade);
  translate: 100% 0;
  transition: translate var(--vlot);
}
.lade[data-open="1"] { translate: 0 0; }

.ladescherm {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(27, 26, 23, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vlot);
}
.ladescherm[data-open="1"] { opacity: 1; pointer-events: auto; }

.lade__kop {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--lijn);
}
.lade__kop h2 {
  font-family: var(--titel);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.lade__kop .sub {
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.lade__lijf { flex: 1; overflow-y: auto; padding: 1.125rem; display: grid; gap: 1.25rem; }
.lade__voet {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--lijn);
  background: var(--wit-dof);
}
.lade__voet .knop { flex: 1; }

.sectie h3 {
  margin-bottom: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

.standblok {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  overflow: hidden;
}
.standblok div { padding: 0.75rem 0.875rem; border-right: 1px solid var(--lijn); }
.standblok div:last-child { border-right: 0; }
.standblok b {
  display: block;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.standblok small { display: block; margin-top: 0.125rem; font-size: 0.6875rem; color: var(--inkt-3); }
.standblok div[data-nadruk="1"] { background: var(--amber-zacht); }
.standblok div[data-nadruk="1"] b { color: var(--amber-op); }
.standblok b[data-kant="tekort"] { color: var(--let); }
.standblok b[data-kant="over"] { color: var(--amber-op); }

.grafiek {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 6rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--lijn);
}
.grafiek i {
  flex: 1 1 0;
  min-height: 1px;
  background: #ded9d0;
  border-radius: 1px 1px 0 0;
  transition: background var(--vlot);
}
.grafiek i:hover { background: var(--amber); }
.grafiek i[data-jaarstart="1"] { background: #cbc4b8; }
.grafiek i[data-jaarstart="1"]::after {
  content: attr(data-jaar);
  position: absolute;
  bottom: 0.1875rem;
  translate: -0.125rem 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}

.feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.875rem 1rem;
}
.feit b { display: block; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.feit small { font-size: 0.6875rem; color: var(--inkt-3); }

/* het logboek als tijdlijn */
.tijdlijn {
  border-left: 1px solid var(--lijn-hard);
  padding-left: 0.9375rem;
  margin-left: 0.3125rem;
}
.tijdlijn li { position: relative; padding-bottom: 0.9375rem; font-size: 0.8125rem; }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before {
  content: "";
  position: absolute;
  left: -1.28125rem;
  top: 0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--wit);
}
.tijdlijn li[data-soort="mutatie"]::before { background: var(--let); }
.tijdlijn li[data-vervallen="1"] { opacity: 0.5; }
.tijdlijn li[data-vervallen="1"] b { text-decoration: line-through; }
.tijdlijn b { font-weight: 650; font-variant-numeric: tabular-nums; }
.tijdlijn time { display: block; font-size: 0.6875rem; color: var(--inkt-3); }
.tijdlijn em { display: block; font-style: normal; font-size: 0.75rem; color: var(--inkt-2); }
.tijdlijn .leeg { color: var(--inkt-3); }

/* ---------- tellen ---------- */

.telscherm {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--vel);
}

.telscherm__kop {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: var(--balk);
  padding: 0 1rem;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.telscherm__lijf {
  overflow-y: auto;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  display: grid;
  gap: 1.125rem;
  align-content: start;
}

/* De eerste vraag in de gang is niet "hoeveel" maar "heb ik deze al gehad".
   Daarom staat het antwoord boven de naam, niet ergens onderaan. */
.telstatus {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ronding);
  background: var(--rust-zacht);
  color: var(--inkt-2);
  font-size: 0.75rem;
  line-height: 1.4;
}
.telstatus b { font-size: 0.8125rem; font-weight: 650; }
.telstatus[data-soort="goed"] { background: var(--goed-zacht); color: var(--goed); }
.telstatus[data-soort="open"] { background: var(--amber-zacht); color: var(--amber-op); }

.telkop h2 {
  font-family: var(--titel);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.telkop .sub {
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}

.invoer {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) 3.75rem;
  align-items: stretch;
  gap: 0.5rem;
}
.invoer input {
  min-width: 0;
  height: 4.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  color: var(--inkt);
  caret-color: var(--amber);
  font-size: 2.5rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: var(--schaduw-1);
}
.invoer input:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-zacht);
}
.invoer input::-webkit-outer-spin-button,
.invoer input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.invoer button {
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  font-size: 1.75rem;
  font-weight: 500;
  box-shadow: var(--schaduw-1);
}
.invoer button:active { background: var(--amber-zacht); border-color: var(--amber); }
.invoer--klein input { height: var(--raak); font-size: 1.25rem; }
.invoer--klein { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
.invoer--klein button { font-size: 1.25rem; }

.oordeel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ronding);
  background: var(--rust-zacht);
  font-size: 0.8125rem;
  color: var(--inkt-2);
}
.oordeel b { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.oordeel[data-oordeel="gelijk"] { background: var(--goed-zacht); color: var(--goed); }
.oordeel[data-oordeel="eerste"] { background: var(--amber-zacht); color: var(--amber-op); }
.oordeel[data-oordeel="anders"] { background: var(--let-zacht); color: var(--let); }

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.veld > span,
.veld label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--inkt-2);
}
.veld input,
.veld select {
  width: 100%;
  height: var(--raak);
  padding: 0 0.625rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  color: var(--inkt);
  caret-color: var(--amber);
}
.veld input:focus,
.veld select:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-zacht);
}
.veld--breed { grid-column: 1 / -1; }

.telscherm__voet {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 0.875rem 1rem;
  padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--lijn);
  background: var(--wit);
}
.telscherm__voet .knop { flex: 1; }

/* Op een groot scherm is een schermvullend telformulier misplaatst: daar is
   het een paneel boven de lijst. Op de telefoon blijft het het hele scherm. */
@media (min-width: 56.0625rem) {
  .telscherm {
    grid-template-rows: auto;
    align-content: center;
    justify-items: center;
    padding: 2rem 0;
    background: rgba(27, 26, 23, 0.32);
  }
  .telscherm__kop,
  .telscherm__lijf,
  .telscherm__voet { width: min(30rem, 100%); }
  .telscherm__kop {
    border-radius: var(--ronding-groot) var(--ronding-groot) 0 0;
    background: var(--wit-dof);
  }
  .telscherm__lijf {
    max-width: none;
    overflow: visible;
    padding: 1.375rem 1.375rem 1.625rem;
    background: var(--wit);
  }
  .telscherm__voet {
    max-width: none;
    border-radius: 0 0 var(--ronding-groot) var(--ronding-groot);
    box-shadow: var(--schaduw-3);
  }
}

/* ---------- erbij of eraf, buiten Exact om ---------- */

.mutatie { display: grid; gap: 0.75rem; }
.redenen { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.redenen button[aria-checked="true"] {
  background: var(--inkt);
  border-color: var(--inkt);
  color: #fff;
}

/* ---------- camera ---------- */

.kijker {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #101010;
}
.kijker__kop {
  grid-area: 1 / 1;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--balk);
  padding: 0 1rem;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.kijker__kop p { flex: 1; font-size: 0.8125rem; color: var(--inkt-2); }
.kijker video { grid-area: 2 / 1; width: 100%; height: 100%; object-fit: cover; }
.kijker__raam {
  grid-area: 2 / 1;
  place-self: center;
  width: min(80vw, 22rem);
  aspect-ratio: 5 / 3;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--ronding);
  box-shadow: 0 0 0 100vmax rgba(16, 16, 16, 0.55);
}

/* ---------- melding ---------- */

.melding {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6875rem 0.6875rem 0.6875rem 1rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  box-shadow: var(--schaduw-3);
  font-size: 0.84375rem;
  animation: opkomen 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
@keyframes opkomen { from { opacity: 0; translate: -50% 0.5rem; } }
.melding[data-soort="let"] { border-color: #f0c5c1; background: var(--let-zacht); color: var(--let); }
.melding[data-soort="goed"] { border-color: #bfe0cd; background: var(--goed-zacht); color: var(--goed); }
.melding button {
  flex: none;
  height: 1.875rem;
  padding: 0 0.625rem;
  border-radius: 5px;
  background: var(--inkt);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- telronde en beheer ---------- */

.kaart--vak { padding: 1.125rem 1.25rem; }
.kaart--vak h3 {
  font-family: var(--titel);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.kaart--vak .uitleg { display: block; margin: 0.25rem 0 0; max-width: 46rem; }

.sectie--los { margin-top: 1.5rem; }
.sectie--los h3 { margin-left: 0; }

.rondekop { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.rondeknoppen { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Een rij invulvelden met de knop aan het eind: de velden rekken mee, de knop
   niet, en op een smal scherm valt alles netjes onder elkaar. */
.regel {
  display: flex;
  align-items: flex-end;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 0.875rem;
}
.regel .veld { flex: 1 1 10rem; min-width: 0; }
.regel .knop { flex: none; }

/* Netto en absoluut staan naast elkaar omdat ze een ander verhaal vertellen:
   netto zegt of het uitkomt, absoluut hoeveel er verkeerd geboekt stond. */
.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin-top: 1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  overflow: hidden;
}
.cijfers div { padding: 0.6875rem 0.875rem; border-right: 1px solid var(--lijn); }
.cijfers div:last-child { border-right: 0; }
.cijfers b {
  display: block;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cijfers small { display: block; margin-top: 0.125rem; font-size: 0.6875rem; color: var(--inkt-3); }
.cijfers b.tekort { color: var(--let); }
.cijfers b.over { color: var(--amber-op); }

p.let { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--let); }
p.let:empty { display: none; }

/* ---------- inslag ---------- */

/* Het vakje waar je het werkelijke aantal in tikt. Smal genoeg om naast de
   paklijst te passen, hoog genoeg om er met een handschoen aan te raken. */
.minivak {
  width: 4.5rem;
  height: 2rem;
  padding: 0 0.4375rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  color: var(--inkt);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  caret-color: var(--amber);
}
.minivak:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-zacht);
}
/* De spinnetjes kosten breedte en niemand klikt ze aan. */
.minivak::-webkit-outer-spin-button,
.minivak::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.minivak[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.kaart--vak textarea {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  color: var(--inkt);
  font: 0.8125rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  tab-size: 12;
  resize: vertical;
  caret-color: var(--amber);
}
.kaart--vak textarea:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-zacht);
}

/* De schakelaar die zegt dat Exact deze container niet boekt. Hij hoort op te
   vallen: hem ten onrechte aanzetten telt een hele lading dubbel. */
.vink {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin-top: 0.875rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--vel);
  cursor: pointer;
}
.vink input { width: 1.0625rem; height: 1.0625rem; margin-top: 0.125rem; flex: none; accent-color: var(--amber); }
.vink span { font-size: 0.8125rem; line-height: 1.5; color: var(--inkt-2); }
.vink b { display: block; color: var(--inkt); font-weight: 600; }
.vink:has(input:checked) { border-color: var(--amber); background: var(--amber-zacht); }

/* Een eerdere container openen is een klik op de hele rij. */
tr[data-inslag-open] { cursor: pointer; }
tr[data-inslag-open]:hover { background: var(--rust-zacht); }

/* De regels van een inslag als kaartjes, voor wie ze op een telefoon naloopt.
   Zelfde markup-truc als de artikelenlijst: beide vormen staan in de pagina en
   de breedte kiest. */
.ikaartjes { display: none; flex-direction: column; gap: 0.5rem; }
.ikaart {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.75rem 0.875rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-1);
}
.ikaart > b { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.ikaart .onder {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--inkt-3);
  font-variant-numeric: tabular-nums;
}
.ikaart .onder b { color: var(--inkt); font-weight: 600; }
.ikaart__vakken {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.125rem;
}
.ikaart__veld { flex: 1 1 0; min-width: 0; }
.ikaart__veld > span {
  display: block;
  margin-bottom: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--inkt-2);
}
.ikaart__veld .minivak { width: 100%; height: 2.75rem; text-align: center; }
.ikaart__vakken .knop { flex: none; height: 2.75rem; min-width: 3.25rem; }

@media (max-width: 56rem) {
  .tabelvak--inslag { display: none; }
  .ikaartjes { display: flex; }
}

/* ---------- inloggen ---------- */

.poort { min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem; }
.poort__kaart {
  width: min(23rem, 100%);
  padding: 1.75rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  box-shadow: var(--schaduw-2);
}
.poort .stap { display: grid; gap: 0.75rem; }
.poort .merk { padding: 0 0 1rem; }
.poort p.intro { font-size: 0.8125rem; color: var(--inkt-2); line-height: 1.45; }
.poort p.intro b { font-weight: 600; color: var(--inkt); font-variant-numeric: tabular-nums; }
.poort input {
  width: 100%;
  height: var(--raak);
  padding: 0 0.75rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--ronding);
  background: var(--wit);
  caret-color: var(--amber);
}
.poort input:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-zacht);
}
.poort .let { min-height: 1.125rem; font-size: 0.8125rem; color: var(--let); }

/* Zes cijfers overtypen uit een sms: groot, ruim uit elkaar, en gecentreerd,
   zodat je met een half oog ziet of je er al genoeg hebt. */
.poort input.code {
  height: 3.25rem;
  font-family: var(--titel);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* De andere manier van inloggen is geen tweede hoofdknop: hij staat er als
   tekst, onder de knop die je normaal gesproken gebruikt. */
.schakel {
  justify-self: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--inkt-2);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  text-decoration-color: var(--lijn-hard);
}
.schakel:hover { color: var(--amber-op); text-decoration-color: currentColor; }
.schakel:disabled { color: var(--inkt-3); text-decoration: none; cursor: default; }
.schakels { display: flex; justify-content: space-between; align-items: center; }
.fluister { font-size: 0.75rem; line-height: 1.45; color: var(--inkt-3); text-align: center; }
.schakels .schakel { justify-self: auto; }

/* ---------- leeg, laden, meer ---------- */

.leegte { padding: 4rem 1.25rem; text-align: center; color: var(--inkt-2); }
.leegte strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--titel);
  font-size: 1rem;
  font-weight: 650;
  color: var(--inkt);
}

.skelet { margin: 0 -1.25rem; border-top: 1px solid var(--lijn); }
.skelet div {
  height: var(--rij);
  border-bottom: 1px solid var(--lijn);
  background: linear-gradient(90deg, var(--wit) 25%, var(--wit-dof) 50%, var(--wit) 75%);
  background-size: 200% 100%;
  animation: schuif 1.4s linear infinite;
}
@keyframes schuif { to { background-position: -200% 0; } }

.meer { display: flex; justify-content: center; padding: 1rem 0 0; }

/* ---------- smaller ---------- */

@media (max-width: 68rem) {
  .weg-smal { display: none; }
}

@media (max-width: 56rem) {
  .hub { grid-template-columns: 1fr; }
  .zij {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    width: var(--zij);
    translate: -100% 0;
    transition: translate var(--vlot);
    box-shadow: var(--schaduw-3);
  }
  .zij[data-open="1"] { translate: 0 0; }
  .opener { display: inline-flex; }
  .tabelvak--lijst { display: none; }
  .kaartjes { display: flex; }
  .tabelvak--rol { margin: 0 -0.875rem; }
  /* In de loods is het lint het aantal; de naam van de ronde past toch niet. */
  .rondelint { padding: 0 0.625rem; }
  .rondelint .lang { display: none; }
  .rondelint .kort { display: inline; }
  .vel { padding: 1rem 0.875rem 5rem; }
  .balk { padding: 0 0.875rem; }
  .synctijd { display: none; }
  .zoekveld kbd { display: none; }
  .lade { width: 100vw; border-left: 0; }
  .werk { background: var(--vel); }
  .uitleg { display: none; }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -0.875rem 0.75rem;
    padding: 0 0.875rem;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

@media (max-width: 30rem) {
  .velden { grid-template-columns: 1fr; }
  .regel .knop { flex: 1 1 100%; height: 2.75rem; }
  .standblok { grid-template-columns: 1fr; }
  .standblok div { border-right: 0; border-bottom: 1px solid var(--lijn); }
  .standblok div:last-child { border-bottom: 0; }
}