/* ---- lettertypen, zelf gehost (23-9-2026) ----
   Stonden bij Fontshare (Switzer, ITF Free Font License) en Google Fonts
   (JetBrains Mono, SIL OFL). Die twee stylesheets hielden samen ~1,6 s de
   eerste weergave tegen op mobiel (Lighthouse, kale URL). Nu van ons eigen
   domein; /assets wordt een jaar gecachet. JetBrains Mono is een variabel
   lettertype: één bestand voor 400 en 500, alleen de Latijnse tekens. */
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/switzer-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =============================================================
   BACKLEBEE · partnerportaal
   Herbouwd 4 augustus 2026 in de huisstijl van de site.

   Uitgangspunt: dezelfde materialen als backlebee.eu, strakker
   gesneden. Zelfde kleuren, zelfde letters, dezelfde knoptaal —
   maar een kleinere schaal en meer informatie per scherm. Een
   portaal is gereedschap, geen landingspagina.

   Volledige onderbouwing: ../../PRD-PORTAAL-HUISSTIJL.md
   Lettertypen staan in de <head> van de drie html-bestanden,
   net als op de site (sneller dan @import).
   ============================================================= */

:root {
  color-scheme: only light;   /* geen geforceerde donkere modus door de browser */

  /* --- overgenomen uit assets/main.css --- */
  --paper:  #FFFFFF;
  --sand:   #F5F1EA;
  --peach:  #FFE7D6;
  --ink:    #16150F;
  --slate:  #5C5A52;   /* 6,1:1 op zand */
  --line:   #E7E2D8;
  --orange: #FF7A2F;
  --orange-ink: #B4460E;

  /* Enige afwijking van de site: daar is --mute #8E8A80, en dat haalt 3,4:1
     op wit en 3,1:1 op zand — onder de 4,5:1 die normale tekst nodig heeft.
     Op de site staat die kleur alleen onder losse bijschriften; hier draagt
     hij échte inhoud (afgevinkte stappen, tijdstippen, kolomlabels), en dan
     mag het niet. #6F6A62 haalt 4,8:1 op zand en 5,4:1 op wit en blijft
     zichtbaar lichter dan --slate.
     ⚠️ Dezelfde grijstint staat nog wél zo op de website — daar moet hij
     ooit ook een tandje donkerder. */
  --mute:   #6F6A62;

  /* --- statuskleuren: semantisch, naast het accent --- */
  --ok:        #1F7A47;  --ok-bg:     #E8F3EC;
  --wacht:     #2B5F8F;  --wacht-bg:  #E7EEF6;
  --let-op:    #B4460E;  --let-op-bg: #FFE7D6;
  --fout:      #A8332A;  --fout-bg:   #FBE9E7;
  --rust:      #6B6559;  --rust-bg:   #EFEDE7;

  --r-card: 20px;
  --r-veld: 12px;
  --pill: 999px;

  --sans: 'Switzer', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --schaduw: 0 2px 6px rgba(22,21,15,.04), 0 18px 44px rgba(22,21,15,.07);

  --balk: 58px;     /* hoogte topbalk */
  --onder: 62px;    /* hoogte onderbalk op de telefoon */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--sand);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; }

/* ---------- letters ----------
   Dik is alleen de náám van een ding en het getal in een meting.
   Alles wat uitlegt hóé je dat leest, is klein, mono en gedempt. */
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
p  { margin: 0 0 12px; }
p.sub { color: var(--slate); margin: 0 0 20px; font-size: 14.5px; }
.muted { color: var(--mute); font-size: 13px; }
.meta, .label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.num, td.num, th.num { font-variant-numeric: tabular-nums; }

/* =============================================================
   1 · CHROOM — topbalk, zijbalk, onderbalk
   ============================================================= */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--balk);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* woordmerk exact als op de site: oranje stip, BEE in oranje-inkt */
.topbar .logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--ink);
}
.topbar .logo::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: var(--orange); margin-right: 9px; flex-shrink: 0;
}
.topbar .logo span, .topbar .logo b { color: var(--orange-ink); font-weight: 700; }
.topbar .logo .rol {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  color: var(--mute); margin-left: 9px; text-transform: uppercase;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13.5px; color: var(--slate); white-space: nowrap; }
.topbar button.linklike {
  background: none; border: 1px solid var(--line); border-radius: var(--pill);
  color: var(--ink); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 6px 15px; white-space: nowrap;
}
.topbar button.linklike:hover { border-color: var(--ink); text-decoration: none; }

.layout { display: flex; min-height: calc(100vh - var(--balk)); align-items: flex-start; }

/* --- zijbalk (bureaublad) --- */
nav.side {
  width: 226px; flex-shrink: 0;
  position: sticky; top: var(--balk);
  /* Vaste hoogte in plaats van max-height: anders hield het witte vlak op
     waar het menu ophield, halverwege elke lange pagina (24-9-2026). */
  height: calc(100vh - var(--balk)); overflow-y: auto;
  padding: 16px 12px 30px;
  background: var(--paper);
  border-right: 1px solid var(--line);
}
nav.side a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; margin-bottom: 2px;
  border-radius: 13px;
  color: var(--slate); font-size: 14.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
nav.side a:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
nav.side a.active { background: var(--sand); color: var(--ink); font-weight: 700; }
nav.side a .nav-ico { width: 19px; height: 19px; flex-shrink: 0; color: var(--mute); transition: color .15s; }
nav.side a:hover .nav-ico { color: var(--slate); }
nav.side a.active .nav-ico { color: var(--orange-ink); }
nav.side .navsep {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--mute);
  margin: 18px 13px 7px;
}
nav.side .navsep:first-child { margin-top: 4px; }
#msgBadge, #reqBadge, #callBadge { margin-left: auto; }

/* --- menu inklappen (26-9-2026) ---
   De knop staat onderaan. Ingeklapt is het menu 68 px breed met alleen de
   pictogrammen; met de muis erboven klapt het over de pagina heen uit (de
   negatieve marge houdt de ruimte op 68 px, dus de inhoud verspringt niet). */
nav.side { display: flex; flex-direction: column; transition: width .18s var(--ease), margin .18s var(--ease), box-shadow .18s; }
nav.side > a, nav.side > .navsep { flex-shrink: 0; }
.zij-knop {
  margin-top: auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border: 0; border-radius: 13px; background: none;
  color: var(--mute); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-align: left; white-space: nowrap;
}
.zij-knop:hover { background: var(--sand); color: var(--ink); }
.zij-knop .nav-ico { width: 19px; height: 19px; flex-shrink: 0; transition: transform .18s var(--ease); }
body.zij-in .zij-knop .nav-ico { transform: scaleX(-1); }
@media (min-width: 900px) {
  body.zij-in nav.side { width: 68px; overflow-x: hidden; }
  body.zij-in nav.side a, body.zij-in nav.side .navsep { white-space: nowrap; }
  body.zij-in nav.side:not(.zij-open) .navsep { color: transparent; border-top: 1px solid var(--line); }
  body.zij-in nav.side:not(.zij-open) a > span:not([id]), body.zij-in nav.side:not(.zij-open) .zij-knop > span { opacity: 0; }
  nav.side a > span:not([id]), .zij-knop > span { transition: opacity .15s; }
  body.zij-in nav.side:not(.zij-open) a { position: relative; }
  body.zij-in nav.side:not(.zij-open) a > span[id] { position: absolute; left: 27px; top: 5px; margin: 0; }
  body.zij-in nav.side:not(.zij-open) a > span[id] .badge { font-size: 0; padding: 0; width: 8px; height: 8px; min-width: 0; border: 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--paper); }
  body.zij-in nav.side.zij-open { width: 226px; margin-right: -158px; z-index: 40; box-shadow: 0 18px 44px rgba(22,21,15,.14); }
}
@media (prefers-reduced-motion: reduce) { nav.side, .zij-knop .nav-ico { transition: none; } }

main.content {
  flex: 1; min-width: 0;
  padding: 26px 30px 70px;
  max-width: 1180px;
  /* De tabel moet omklappen als de ruimte die híj krijgt te klein wordt, niet
     als het venster smal is. Dat verschil is op een tablet groot: op 768 px
     zónder zijbalk heeft een tabel 736 px, met zijbalk maar 510. Een
     vensterbreedte-regel kan dat niet weten en perst de kolommen alsnog. */
  container-type: inline-size;
  container-name: werkblad;
}

/* --- onderbalk (telefoon) ---
   Vijf plekken, altijd zichtbaar, binnen duimbereik. Vervangt de
   hamburger: die verborg wáár je was en zat aan de bovenkant van
   het scherm, de slechtst bereikbare plek op een grote telefoon. */
nav.bottom {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.bottom .rij { display: flex; }
nav.bottom a, nav.bottom button {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--onder); padding: 0 2px;
  background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--mute); text-decoration: none; position: relative;
}
nav.bottom a:hover { text-decoration: none; }
nav.bottom .nav-ico { width: 22px; height: 22px; }
nav.bottom .lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
nav.bottom a.active { color: var(--ink); }
nav.bottom a.active .nav-ico { color: var(--orange-ink); }
/* streepje boven de actieve plek: waar je bent, zonder woorden */
nav.bottom a.active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange);
}
/* ongelezen: een stip op het icoon — een getal past hier niet */
nav.bottom .stip {
  position: absolute; top: 8px; left: 50%; margin-left: 6px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--orange);
  border: 2px solid var(--paper);
}

/* --- het More-blad --- */
.sheet-back {
  position: fixed; inset: 0; z-index: 70; background: rgba(22,21,15,.34);
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; background: var(--paper);
  border-radius: 24px 24px 0 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(22,21,15,.2);
}
.sheet .greep { width: 42px; height: 4px; border-radius: 4px; background: var(--line); margin: 6px auto 12px; }
.sheet a, .sheet button {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 14px 16px; border-radius: 15px;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--ink);
  background: none; border: 0; text-align: left; cursor: pointer;
}
.sheet a:hover, .sheet button:hover { background: var(--sand); text-decoration: none; }
.sheet .nav-ico { width: 21px; height: 21px; color: var(--mute); flex-shrink: 0; }
.sheet .kop {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); padding: 12px 16px 5px;
}
.sheet .afscheider { height: 1px; background: var(--line); margin: 8px 16px; }
.sheet .wie { padding: 2px 16px 10px; font-size: 13.5px; color: var(--slate); }
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: bladIn .28s var(--ease) both; }
  @keyframes bladIn { from { transform: translateY(100%); } }
}

/* =============================================================
   2 · BOUWSTENEN
   ============================================================= */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead .btnrow { margin-top: 0; }
/* De titel met uitleg mag krimpen, zodat de hoofdknop rechts naast de titel
   blijft staan. Bij Packaging viel "+ New component" door de lange uitleg op
   een eigen regel, terwijl hij op elke andere pagina rechtsboven staat. */
.pagehead > div:first-child { flex: 1 1 360px; min-width: 0; }
.secbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.secbar h2 { margin: 0; }
.statusline { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--mute); }
/* Een datum of "70 cl / 40%" hoort niet over twee regels te breken (24-9-2026). */
.nowrap { white-space: nowrap; }
.statusreden { display: inline-block; margin-top: 4px; max-width: 36ch; font-size: 12.5px; line-height: 1.4; color: var(--slate); }

/* --- tegels --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; margin: 18px 0; }
.tile {
  position: relative; display: block; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 18px 20px; cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s var(--ease);
}
.tile:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--schaduw); text-decoration: none; }
.tile .t-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--peach); color: var(--orange-ink); margin-bottom: 14px;
}
.tile .t-ico svg { width: 21px; height: 21px; }
.tile .t-title { font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 2px; }
.tile .t-sub { font-size: 13.5px; color: var(--slate); line-height: 1.4; }
.tile .t-count {
  position: absolute; top: 16px; right: 16px; float: none;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 2px 10px; color: var(--slate);
}

/* --- gegroepeerde tegels (spiegelt de zijbalk) --- */
.tg-wrap { margin: 20px 0; }
.tgroup { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 22px; }
.tg-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--mute);
  margin: 0 2px 10px;
}
.tg-tiles { display: grid; gap: 14px; }
.tg-tiles.cols2 { grid-template-columns: 1fr 1fr; }
.tg-tiles.cols4 { grid-template-columns: repeat(4, 1fr); }
/* Masterdata V1 (3-9-2026): vijf tegels onder My data, drie onder Logistics. */
.tg-tiles.cols3 { grid-template-columns: repeat(3, 1fr); }
.tg-tiles.cols5 { grid-template-columns: repeat(5, 1fr); }
.tg-tiles.one  { grid-template-columns: 1fr; }
.tg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
/* Zonder Logistics (FUNCTIES.orders en .shipments uit): Markets, Reporting en
   Backlebee als één rij van vijf tegels, gelijk met My data erboven. */
.tg-trio { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 16px; margin-top: 16px; }
@media (max-width: 1240px) { .tg-trio { grid-template-columns: 2fr 1fr; } }

/* --- statuspillen --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--pill); padding: 3px 11px; white-space: nowrap;
}
.badge-green  { background: var(--ok-bg);     color: var(--ok); }
.badge-orange { background: var(--let-op-bg); color: var(--let-op); }
.badge-red    { background: var(--fout-bg);   color: var(--fout); }
.badge-blue   { background: var(--wacht-bg);  color: var(--wacht); }
.badge-gray   { background: var(--rust-bg);   color: var(--rust); }
.badge-gold   { background: var(--peach); color: var(--orange-ink); border: 1px solid #F3C9A8; }
/* het sterretje van een gold member is de enige aanduiding in die kolom, dus
   het moet zelf leesbaar zijn: puur oranje haalt maar 2,6:1 op wit */
.gold-star    { color: var(--orange-ink); font-size: 14px; }
.unread-dot { display: inline-block; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; margin-right: 7px; }

/* =============================================================
   3 · TABELLEN
   Op een breed scherm een gewone tabel. Onder 720px klapt elke rij
   om naar een kaart; de kolomkop komt dan als label vóór de waarde
   te staan. Die labels worden na elke render automatisch geplakt
   (zie labelKolommen() in app.js / admin.js), zodat ze niet uit de
   pas kunnen lopen met de koppen.
   ============================================================= */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.data th {
  text-align: left; padding: 0 12px 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mute);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
/* de naam van het ding is het enige dikke in de rij */
table.data td:first-child { font-weight: 700; color: var(--ink); }
table.data td .r-sub { display: block; font-weight: 400; font-size: 13px; color: var(--mute); margin-top: 1px; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--sand); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =============================================================
   4 · FORMULIEREN EN KNOPPEN
   ============================================================= */
form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
form .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 20px; }
label.f { display: block; font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: 14px; }
label.f span.req { color: var(--fout); }
label.f input, label.f select, label.f textarea {
  display: block; width: 100%; margin-top: 5px;
  padding: 11px 13px; font-size: 15px; font-family: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--r-veld);
  background: var(--paper); color: var(--ink);
}
label.f textarea { resize: vertical; min-height: 92px; }
label.f input:focus, label.f select:focus, label.f textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18);
}
label.f input[type=checkbox], label.f input[type=radio] { width: auto; display: inline-block; }

/* Primaire actie = inkt. Oranje blijft voor aandacht en status, zodat
   een afgekeurd etiket niet hoeft te concurreren met een knop. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 20px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--pill);
  font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s, background .18s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #000; }
.btn.honey { background: var(--ink); color: #fff; border-color: var(--ink); }   /* oude naam, zelfde ding */
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.btn.danger { background: var(--fout); color: #fff; border-color: var(--fout); }
.btn.danger:hover { background: #8E2A22; }
.btn.approve { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn.approve:hover { background: #18633A; }
/* Een icoon zonder maat vult zijn hele blok. Elke plek in deze stijl gaf zijn
   eigen iconen een maat — knoppen, tegels, het menu, de tijdlijn — maar er was
   geen vangnet. Waar iemand icon() gebruikte zonder zo'n regel eromheen, groeide
   de svg tot de breedte van de kaart: op de contractpagina stond een vinkje van
   307 bij 307 pixels waar het contractdocument hoort. Gevonden op 16-09-2026,
   door Josh, in een schermafdruk — niet door een test.
   Alle regels hieronder zijn specifieker en winnen dus gewoon. */
.ico { width: 17px; height: 17px; flex-shrink: 0; }
.btn .ico, .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
/* alleen een icoon: vierkant, met de naam in de tooltip. Voor hulpmiddelen
   naast een echte beslissing, zodat vier knoppen in een tabelcel passen. */
.btn.icoon { padding: 0; width: 40px; min-width: 40px; }
.btn.small.icoon { width: 36px; min-width: 36px; height: 36px; }
/* de oranje cirkel met pijl van de site — één keer per scherm, op de hoofdactie */
.btn .circ {
  width: 30px; height: 30px; border-radius: 999px; margin: -6px -12px -6px 0;
  background: var(--orange); color: var(--ink);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.btn .circ svg { width: 15px; height: 15px; }
.btn:hover .circ { transform: rotate(45deg); }
.btnrow { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.filterrow { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filterrow[hidden] { display: none; }   /* anders wint display:flex van het hidden-attribuut */
/* Élke keuzelijst in het portaal, ongeacht waar hij staat. De lijst bij
   "Recipients" viel eerst buiten de opmaak en stond er als kale
   Windows-dropdown; de filters op de partnerpagina hielden hun systeempijltje
   omdat `appearance` niet uit stond. Nu één regel voor allemaal, met een eigen
   pijltje in de huisstijl. */
select, select.veld, .secbar select, .filterrow select, label.f select {
  padding: 9px 36px 9px 14px; border: 1px solid var(--line); border-radius: var(--pill);
  font-family: inherit; font-size: 13.5px; background-color: var(--paper); color: var(--ink);
  min-height: 40px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
}
/* in een formulier is een veld geen pil maar een vak, net als de tekstvelden ernaast */
label.f select { border-radius: var(--r-veld); font-size: 15px; padding: 11px 36px 11px 13px; min-height: 46px; }
select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }

/* Vinkjes stonden in Windows-blauw dwars door de huisstijl heen. */
input[type=checkbox], input[type=radio] { accent-color: var(--orange-ink); width: 17px; height: 17px; }

.filterrow input, .periode input {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--pill);
  font-family: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink); min-height: 40px;
}
.filterrow input:focus, .periode input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }
/* Een datumveld toont zonder woord erbij alleen "dd/mm/yyyy" — twee daarvan
   naast elkaar en niemand ziet dat het om een periode gaat. */
.periode {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--slate); white-space: nowrap;
}
.periode span { font-weight: 400; color: var(--mute); }
.periode input { min-width: 148px; }
.periode input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.periode input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
@media (max-width: 620px) { .periode { flex-wrap: wrap; width: 100%; } .periode input { flex: 1 1 130px; min-width: 0; } }

/* =============================================================
   5 · VOORTGANG EN OP GANG KOMEN
   ============================================================= */
.cmp { display: flex; align-items: center; gap: 10px; }
.cmp-track { flex: 1; height: 8px; background: var(--line); border-radius: var(--pill); overflow: hidden; max-width: 260px; }
.cmp-sm .cmp-track { max-width: 120px; height: 6px; }
.cmp-fill { height: 100%; border-radius: var(--pill); transition: width .3s var(--ease); }
.cmp-label { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cmp-card { text-align: center; }
.cmp-card .gs-head { justify-content: center; margin-bottom: 2px; }
.cmp-ring { position: relative; width: 96px; height: 96px; margin: 10px auto 8px; }
.cmp-ring svg { display: block; }
.cmp-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cmp-ring-num span { font-size: 13px; font-weight: 600; margin-left: 1px; color: var(--mute); }
.cmp-card .missing-box { text-align: left; }

.missing-box {
  background: var(--peach); border: 1px solid #F3C9A8; border-radius: 14px;
  padding: 13px 16px; font-size: 13.5px; margin-top: 12px; color: var(--ink);
}
.missing-box ul { margin: 6px 0 0; padding-left: 18px; }
.missing-box .mb-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font-weight: 700; }
.missing-box .mb-ico { width: 16px; height: 16px; color: var(--orange-ink); flex-shrink: 0; }
.ok-note { color: var(--ok); font-weight: 600; font-size: 13.5px; }

.gs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.gs-head h2 { margin: 0; }
.gs-count {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--orange-ink); background: var(--peach); border-radius: var(--pill); padding: 2px 11px;
}
.gs-list { list-style: none; margin: 6px 0 0; padding: 0; }
.gs-step {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 0; font-size: 15px; border-top: 1px solid var(--line);
}
.gs-step:first-child { border-top: none; }
.gs-step a { color: var(--ink); font-weight: 700; }
.gs-step.done > span:not(.gs-mark) { color: var(--mute); }
.gs-mark {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--paper);
}
.gs-mark.done { border: 1.7px solid var(--ok); color: var(--ok); background: var(--ok-bg); }
.gs-mark.done .gs-check { width: 12px; height: 12px; stroke-width: 2.8; }
.gs-mark.todo { border: 1.7px dashed var(--mute); }

.dash-top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; margin-bottom: 18px; }
.dash-top.one { grid-template-columns: 1fr; max-width: 460px; }
.dash-top > .card { margin-bottom: 0; }

/* =============================================================
   6 · MELDINGEN
   ============================================================= */
.banner {
  border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; font-size: 14.5px;
  border: 1px solid transparent;
}
.banner.info   { background: var(--wacht-bg);  border-color: #CCDCEC; color: #234E75; }
.banner.warn   { background: var(--let-op-bg); border-color: #F3C9A8; color: #7C3007; }
.banner.danger { background: var(--fout-bg);   border-color: #EFC8C4; color: #7E251E; }
/* "Action needed" op het overzicht: wat het is op de eerste regel, waarom op de
   tweede. Stond op één regel met een puntje ertussen, en op een telefoon brak
   de reden dan halverwege af ("· The back" / "label is missing..."). */
.banner ul.aandacht { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 9px; }
.aandacht-why { display: block; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff; padding: 12px 24px; border-radius: var(--pill);
  font-size: 14.5px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .25s; z-index: 200; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { opacity: 1; }

.modal-back {
  position: fixed; inset: 0; background: rgba(22,21,15,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: 0 24px 70px rgba(22,21,15,.28);
  width: 100%; max-width: 640px; padding: 26px 28px;
}
.modal h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }

.empty {
  text-align: center; color: var(--mute); padding: 40px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty .e-ico { width: 34px; height: 34px; color: #C3BCAE; }
.empty .e-ico svg { width: 34px; height: 34px; }

/* =============================================================
   7 · DETAILLIJSTEN, BERICHTEN, SPRINGBALK
   ============================================================= */
.dl-grid { display: grid; grid-template-columns: 190px 1fr; gap: 8px 20px; font-size: 14.5px; }
.dl-grid dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
.dl-grid dd { margin: 0; }

.msgrow { border-bottom: 1px solid var(--line); padding: 14px 0; }
.msgrow:last-child { border-bottom: none; }
.msgrow .m-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; }
.msgrow .m-head .muted { font-weight: 400; }
.msgrow .m-body { color: var(--slate); font-size: 14px; white-space: pre-line; margin-top: 5px; }

.jumprow { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.jumprow .jump {
  font-size: 13px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 7px 15px; cursor: pointer; color: var(--slate); min-height: 36px;
}
.jumprow .jump:hover { border-color: var(--ink); color: var(--ink); }
.card[id] { scroll-margin-top: 74px; }
.rv-link { cursor: pointer; display: inline-block; }
.rv-link:hover .badge { outline: 2px solid var(--orange); outline-offset: 1px; }

/* =============================================================
   8 · ZOEKBALK (beheer)
   ============================================================= */
.gsearch { position: relative; flex: 0 1 400px; min-width: 150px; }
.gsearch input {
  width: 100%; padding: 9px 16px; font-size: 13.5px; font-family: inherit;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--pill); color: var(--ink); min-height: 40px;
}
.gsearch input::placeholder { color: var(--mute); }
.gsearch input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }
.gresults {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--schaduw); z-index: 90; padding: 6px;
}
.gresults .gr {
  display: block; padding: 11px 14px; border-radius: 12px;
  color: var(--ink); text-decoration: none; cursor: pointer; font-size: 14.5px; font-weight: 600;
}
.gresults .gr:hover, .gresults .gr.sel { background: var(--sand); text-decoration: none; }
.gresults .gr .gr-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-ink); display: inline-block; width: 78px; font-weight: 500;
}
.gresults .gr .gr-sub { color: var(--mute); font-size: 12.5px; margin-left: 78px; display: block; font-weight: 400; }
.gresults .gr-empty { padding: 14px 16px; color: var(--mute); font-size: 13.5px; }

/* =============================================================
   9 · E-MAILMODULE (beheer)
   ============================================================= */
.em-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-veld); background: var(--paper); }
.em-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: 14.5px; cursor: pointer; margin: 0; }
.em-row:last-child { border-bottom: none; }
.em-row:hover { background: var(--sand); }
.em-row input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
/* "Select all" boven de lijst: los van de lijst, zodat hij niet
   meescrolt en altijd te zien is (productkaarten, Bernd 22-9). */
.em-alles { border: 1px solid var(--line); border-radius: var(--r-veld); margin: 0 0 8px; background: var(--paper); }
.em-check { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--slate); cursor: pointer; }
.em-check input { width: auto; margin: 0; }
#emEditor { min-height: 190px; font-size: 15px; font-family: var(--sans); background: var(--paper); }
.ql-container.ql-snow { border-color: var(--line); border-radius: 0 0 var(--r-veld) var(--r-veld); font-family: var(--sans); }
.ql-editor.ql-blank::before { color: var(--mute); font-style: normal; left: 15px; right: 15px; }
.ql-editor { padding: 14px 15px; }
/* De globale focusring van 3 px oranje om een tekstvak van 190 px hoog is een
   schreeuw. Een rand plus zachte gloed zegt hetzelfde rustiger. */
.ql-container:focus-within { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }
.ql-editor:focus, .ql-editor:focus-visible { outline: none; }

/* --- eigen werkbalk boven de editor --- */
.em-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-veld) var(--r-veld) 0 0;
  background: var(--sand); padding: 6px 8px;
}
.em-groep { display: flex; gap: 2px; align-items: center; }
.em-groep + .em-groep { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.em-bar button {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--slate); font: inherit; font-size: 15px; cursor: pointer;
}
.em-bar button:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }
.em-bar button.ql-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.em-bar button svg { width: 18px; height: 18px; }
.em-bar button b, .em-bar button i, .em-bar button u { font-size: 15px; line-height: 1; }

/* =============================================================
   10 · BELAFSPRAKEN (beheer)
   ============================================================= */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.picks li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; font-size: 14.5px;
}
.picks li.sel { border-color: var(--ok); background: var(--ok-bg); }
.picks li.empty { color: var(--mute); justify-content: center; padding: 20px; display: flex; }
.picks .n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sand); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--slate);
}
.picks li.sel .n { background: var(--ok); border-color: var(--ok); color: #fff; }
.picks li > :last-child:not(.n) { margin-left: auto; }
.picks .muted { color: var(--mute); }

/* =============================================================
   11 · INLOGSCHERM
   Zand als grond, één witte kaart. De geblurde flessenfoto van de
   oude versie is eruit: die hoorde bij de espresso-stijl en vocht
   met het rustige wit van de site.
   ============================================================= */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 20px; background: var(--sand);
}
.auth-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--schaduw);
  width: 100%; max-width: 440px; padding: 34px 34px 30px;
}
.auth-card .logo {
  display: inline-flex; align-items: center;
  font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: var(--ink); margin-bottom: 2px;
}
.auth-card .logo::before {
  content: ""; width: 10px; height: 10px; border-radius: 999px;
  background: var(--orange); margin-right: 10px;
}
.auth-card .logo b { color: var(--orange-ink); font-weight: 700; }
.auth-card .btnrow .btn { flex: 1 1 auto; }
.demo-hint {
  background: var(--sand); border: 1px dashed var(--line); border-radius: 16px;
  padding: 13px 16px; font-size: 13px; color: var(--slate); margin-top: 18px;
}
.demo-hint code { background: var(--paper); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }
.auth-foot { margin-top: 22px; font-size: 13.5px; color: var(--mute); }

/* =============================================================
   12 · SMALLE SCHERMEN
   ============================================================= */

/* Een knop van 36 px raak je met een duim net niet. Op een aanraakscherm
   groeit ook de kleine variant naar 44. */
@media (max-width: 899px) {
  .btn.small { min-height: 44px; padding: 9px 16px; font-size: 14px; }
  .jumprow .jump { min-height: 44px; }
}

/* --- tabellen worden kaarten zodra het werkblad onder 780 px komt ---
   Dat is bewust ruim: een tabel van zeven kolommen in 736 px (tablet
   staand) breekt "Casa del Ron Ltd." over drie regels. Liever kaarten.
   Kent een browser geen container queries, dan blijft de tabel staan en
   schuift hij horizontaal binnen .tablewrap — lelijker, maar niet stuk. */
@container werkblad (max-width: 780px) {
  .tablewrap { overflow-x: visible; }
  table.data, table.data tbody, table.data tfoot, table.data tr, table.data td { display: block; width: 100%; }
  /* de totaalkaart (tfoot) onderscheidt zich door zijn zandkleur, niet door een rand */
  table.data tfoot tr { background: #FAF7F1; }
  table.data tfoot td:empty { display: none; }
  table.data thead { display: none; }
  table.data tr {
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    padding: 4px 15px 8px; margin-bottom: 10px;
    /* op een tablet zou label en waarde anders een halve meter uit elkaar staan */
    max-width: 640px;
  }
  table.data tr.clickable:hover td { background: transparent; }
  table.data tr.clickable:active { border-color: var(--ink); }
  /* Label bóven de waarde, niet ernaast. Ernaast leek compacter, maar een cel
     met meer dan één ding erin — "Maria Gonzalez" met daaronder het adres —
     bestaat uit losse kinderen, en die spatten in een flexrij naar beide
     uiteinden. Gestapeld klopt het altijd, en een e-mailadres krijgt de volle
     breedte in plaats van dat het door de rand heen loopt. */
  table.data td {
    display: block; padding: 7px 0; border-bottom: 1px solid var(--line);
    text-align: left; overflow-wrap: break-word; min-width: 0;
  }
  /* Getallen zijn altijd kort; die mogen wél naast hun label, anders kost
     één cijfer twee regels. */
  table.data td.num {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    text-align: right;
  }
  table.data td:last-child { border-bottom: none; }
  table.data td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    /* 11,5 en niet 10,5: dit label is het enige wat een waarde betekenis geeft,
       en op een telefoon van 390 px moet je daar niet voor turen */
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
    flex: 0 0 auto; text-align: left;
  }
  table.data td.num::before { display: inline; margin-bottom: 0; padding-top: 2px; }
  table.data td:not([data-label])::before { content: none; }
  /* Eén cel is de titel van de kaart: dik, over de volle breedte, geen label.
     Welke dat is bepaalt `data-kaartkop` op de <th>; chrome.js zet de klasse.
     Zonder markering is het de eerste kolom, zoals het altijd was. Dit is er
     omdat SKU sinds 12 aug de eerste kolom van het productoverzicht is, en een
     kaart die "RA-12" heet in plaats van "Ron Abuela Añejo 12" is onleesbaar. */
  table.data td.kaartkop {
    display: block; font-size: 16px; font-weight: 700; padding: 11px 0 9px;
    text-align: left;
  }
  table.data td.kaartkop::before { content: none; }
  /* De niet-kop-eerste-cel is een gewone cel: dik hoeft daar niet meer. */
  table.data td:first-child:not(.kaartkop) { font-weight: 400; }
  table.data td:first-child:not(.kaartkop) strong { font-weight: 700; }
  /* een cel met alleen een knop erin: knop over de volle breedte onderaan */
  table.data td:empty { display: none; }
}

/* --- chroom: zijbalk eruit, onderbalk erin --- */
@media (max-width: 899px) {
  nav.side { display: none; }
  nav.bottom { display: block; }
  main.content {
    padding: 18px 16px calc(var(--onder) + 34px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar .who, .topbar button.linklike { display: none; }  /* verhuisd naar het More-blad */
  .topbar .logo { font-size: 18px; }
  /* De zoekbalk van het beheerscherm past niet naast het woordmerk: op 390 px
     liep hij het scherm uit. Hij krijgt een eigen regel eronder. */
  .topbar:has(.gsearch) { height: auto; flex-wrap: wrap; padding: 9px 16px; row-gap: 9px; }
  .topbar .gsearch { order: 9; flex: 1 0 100%; }
  #toast { bottom: calc(var(--onder) + 18px + env(safe-area-inset-bottom)); }
  .modal-back { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: 24px 24px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; }
}
@media (min-width: 900px) {
  nav.bottom { display: none !important; }
  #navToggle { display: none !important; }
}

@media (max-width: 1240px) { .tg-tiles.cols5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .tg-tiles.cols4, .tg-tiles.cols5 { grid-template-columns: 1fr 1fr; } .tg-tiles.cols3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .dash-top { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .tg-tiles.cols2, .tg-tiles.cols3, .tg-tiles.cols4, .tg-tiles.cols5 { grid-template-columns: 1fr 1fr; }
  .tg-duo, .tg-trio { grid-template-columns: 1fr; }
  .gsearch { flex: 1 1 auto; }
}
@media (max-width: 620px) {
  h1 { font-size: 23px; }
  .card { padding: 17px 16px; border-radius: 18px; }
  main.content { padding-left: 14px; padding-right: 14px; }
  form .grid2, form .grid3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .btnrow .btn { flex: 1 1 auto; }
  .pagehead { gap: 12px; }
  .pagehead .btnrow { width: 100%; }
  /* Filters op een telefoon: zoeken over de volle breedte, de keuzelijsten
     twee aan twee. Ze stonden er in vier verschillende breedtes onder elkaar
     (24-9-2026). !important wint van de inline breedtes in de opmaak. */
  .filterrow > input[type="search"] { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; order: -1; }
  .filterrow > select { flex: 1 1 calc(50% - 5px) !important; max-width: none !important; min-width: 0 !important; }
  /* "Welcome back, naam · bedrijf" brak midden in de bedrijfsnaam af; op een
     telefoon krijgt het bedrijf een eigen regel. */
  .welkom-sep { display: none; }
  .welkom-bedrijf { display: block; }
}
@media (max-width: 560px) {
  /* 190px labelkolom laat op een telefoon geen ruimte voor de waarde */
  .dl-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .dl-grid dd + dt { margin-top: 12px; }
  .tg-tiles.cols2, .tg-tiles.cols3, .tg-tiles.cols4, .tg-tiles.cols5, .tiles { grid-template-columns: 1fr; }

  /* Tegels kantelen: icoon links, tekst ernaast, teller rechts. Staand koste
     één tegel bijna een derde van het scherm — je zag er twee en moest voor
     de rest scrollen. Liggend passen er vier in beeld en leest het als een
     lijst, zoals in een app. */
  .tile {
    display: grid; align-items: center;
    grid-template-columns: 40px 1fr auto;
    grid-template-areas: "ico titel telling" "ico onder telling";
    column-gap: 14px; padding: 14px 16px;
  }
  .tile .t-ico   { grid-area: ico;     margin-bottom: 0; }
  .tile .t-title { grid-area: titel;   align-self: end; }
  .tile .t-sub   { grid-area: onder;   align-self: start; font-size: 13px; }
  .tile .t-count { grid-area: telling; position: static; align-self: center; }
  .tile:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =============================================================
   13 · HET WERKBLOK OP HET BEHEEROVERZICHT
   Vervangt de zeven gelijkwaardige tegels van april. Die lieten
   een lijst met acht documenten er precies zo uitzien als een
   lege lijst: hetzelfde vlak, hetzelfde cijfer in een grijze pil
   rechtsboven. Josh: "de cijfertjes zijn klein en op de
   achtergrond, dat is geen hiërarchie."

   Nu is het getal het grootste op de regel, staan alleen de
   stapels mét werk in beeld, en zegt de kop in één zin hoeveel
   er ligt. Wat leeg is, zakt naar één regel onderaan.
   ============================================================= */
.werk { margin-bottom: 18px; }
.werk-kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.werk-kop h2 { font-size: 21px; letter-spacing: -.025em; margin: 0; }

.werk-lijst { display: grid; gap: 8px; }
.werk-rij {
  display: grid; align-items: center;
  /* getal, icoon, tekst, pijl. Het icoon stond eerst rechts, met een gat van
     een halve meter tussen de tekst en de rand — daar keek je tegenaan. */
  grid-template-columns: 54px 22px 1fr auto;
  gap: 14px; padding: 15px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s var(--ease);
}
.werk-rij:hover { border-color: var(--ink); text-decoration: none; transform: translateX(2px); }
/* Het aantal is het antwoord op "hoeveel ligt er", dus het is het grootste
   op de regel. Perzik eromheen zodat het een merkteken is, geen los cijfer. */
.werk-n {
  display: grid; place-items: center;
  width: 54px; height: 46px; border-radius: 13px;
  background: var(--peach); color: var(--orange-ink);
  font-size: 22px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.werk-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.werk-naam { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.werk-wat { font-size: 13.5px; color: var(--slate); }
.werk-ico { color: var(--mute); display: grid; place-items: center; }
.werk-ico svg { width: 20px; height: 20px; }
.werk-pijl { color: var(--mute); display: grid; place-items: center; }
.werk-pijl svg { width: 17px; height: 17px; }
.werk-rij:hover .werk-pijl { color: var(--ink); }

.werk-klaar {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 22px; border-radius: 16px;
  background: var(--ok-bg); border: 1px solid #C9E2D3; color: var(--ok);
  font-size: 15.5px; font-weight: 600;
}
.werk-klaar svg { width: 21px; height: 21px; flex-shrink: 0; }

/* de lege stapels: wel benoemen, maar zacht — anders lijkt niets af */
.werk-rustig {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 2px 0; font-size: 13px; color: var(--mute);
}
.werk-rustig svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }

/* ---------- tijdlijn ---------- */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px;
}
.tijdlijn li:first-child { border-top: none; }
.tijdlijn .tl-ico { color: var(--mute); }
.tijdlijn .tl-ico svg { width: 17px; height: 17px; }
.tijdlijn .tl-tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.tijdlijn .tl-tekst a { font-weight: 700; color: var(--ink); }
.tijdlijn .tl-wat { color: var(--slate); }
.tijdlijn .tl-wie { font-size: 13px; color: var(--mute); }
.tijdlijn .tl-reden { flex: 1 0 100%; font-size: 13px; color: var(--mute); }
.tijdlijn .tl-tijd { font-family: var(--mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }
/* iets wat is afgekeurd of teruggestuurd mag opvallen in de geschiedenis */
.tijdlijn li.let-op .tl-wat { color: var(--let-op); font-weight: 600; }
.tijdlijn li.let-op .tl-ico { color: var(--let-op); }

/* ---------- de vijf kengetallen ---------- */
/* Was een kaart met vijf blokken van 22 px cijfers. Josh: "ik snap niet goed
   wat voor relevante info ik hier krijg." Terecht — het is achtergrond, geen
   werk. Eén regel onderaan, met de getallen nog wel aanklikbaar. */
.getallen {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  margin: 6px 2px 0; font-size: 13px; color: var(--mute);
}
.getallen a { color: var(--slate); text-decoration: none; font-variant-numeric: tabular-nums; }
.getallen a:hover { color: var(--ink); text-decoration: underline; }

@container werkblad (max-width: 560px) {
  .werk-rij { grid-template-columns: 46px 1fr auto; gap: 13px; padding: 13px 15px; }
  .werk-ico { display: none; }          /* op een telefoon telt het getal, niet het plaatje */
  .werk-n { width: 46px; height: 42px; font-size: 20px; }
  .tijdlijn li { grid-template-columns: 22px 1fr; }
  .tijdlijn .tl-tijd { grid-column: 2; }
}

/* =============================================================
   14 · AFGEHANDELDE AANVRAGEN
   Een verzoek waar de account al voor is aangemaakt hield alleen
   een rode "Reject" over: de enige knop op een afgeronde kaart,
   en dan ook nog de gevaarlijke. Josh: "ziet er raar uit toch?"

   Nu: geen knoppen meer, één regel dat het klaar is, en een
   ingetogen weg terug voor als het toch fout ging.
   ============================================================= */
.card.afgehandeld { background: transparent; border-style: dashed; }
.card.afgehandeld h2 { color: var(--slate); }
.afgerond {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 14px 0 0; font-size: 14px; color: var(--slate);
}
.afgerond svg { width: 17px; height: 17px; color: var(--ok); flex-shrink: 0; }
.afgerond .btn { margin-left: auto; }

/* Afwijzen is een gewone uitkomst, geen alarm. Rode letters op wit zeggen
   genoeg; een dichtgekleurd rood vlak trekt meer aandacht dan de knop
   ernaast die je meestal wél wilt hebben. */
.btn.weiger { background: var(--paper); color: var(--fout); border-color: var(--line); }
.btn.weiger:hover { border-color: var(--fout); background: var(--fout-bg); }

/* =============================================================
   15 · DE KNOPPENKOLOM IN EEN WACHTRIJ
   Vier knoppen in een cel die zoveel ruimte kreeg als er toevallig
   overbleef: dan wrapt "Review" naar een tweede regel en ziet de
   rechterkant er rommelig uit. Met width:1% geeft de tabel deze
   kolom precies wat hij nodig heeft en krimpt de bestandsnaam —
   die mag over twee regels, een knop niet.
   ============================================================= */
td.acties {
  width: 1%; white-space: nowrap; text-align: right; vertical-align: middle;
}
td.acties > * { display: inline-flex; vertical-align: middle; margin-left: 7px; }
td.acties > *:first-child { margin-left: 0; }
@container werkblad (max-width: 780px) {
  /* in kaartvorm mogen ze juist wél wrappen en de volle breedte pakken */
  td.acties { width: auto; white-space: normal; text-align: left; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 11px; }
  td.acties > * { margin-left: 0; }
  td.acties::before { display: none; }
}

/* =============================================================
   16 · DE RONDE VAN HANS (12 augustus 2026)
   Alles hieronder hoort bij PRD-HANS-PORTAALRONDE.md.
   ============================================================= */

/* --- 16.1 uitlegballonnetjes (C-7) ---------------------------
   Hans vroeg om een "info ballon" bij SKU. Op klik en niet op hoveren:
   hoveren bestaat niet op een telefoon. Eén component, want HS code, EAN,
   LPA en de palletvelden vragen om precies hetzelfde. */
.hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
.hint-knop {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--mute);
  display: inline-flex; border-radius: 50%;
}
.hint-knop:hover { color: var(--orange-ink); }
.hint-ico { width: 15px; height: 15px; }
.hint-bel {
  position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content; max-width: min(300px, 76vw);
  background: var(--ink); color: #FFF; border-radius: 12px;
  padding: 11px 13px; font-size: 13px; line-height: 1.5; font-weight: 400;
  text-transform: none; letter-spacing: 0; text-align: left;
  box-shadow: 0 10px 30px rgba(22,21,15,.28);
}
.hint-bel::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--ink);
}
/* Geen plek boven het icoontje (eerste veld in een venster): eronder,
   en past hij daar ook niet, dan krijgt hij een eigen schuifbalk.
   plaatsHint() in chrome.js beslist dat. */
.hint-bel.onder { bottom: auto; top: calc(100% + 9px); }
.hint-bel.onder::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
.hint-bel[style*="max-height"] { overflow-y: auto; }
/* Vlak bij de rand zou de ballon het scherm uit lopen. */
@media (max-width: 620px) {
  .hint-bel { left: auto; right: -8px; transform: none; }
  .hint-bel::after { left: auto; right: 12px; margin-left: 0; }
}

/* --- 16.2 datumveld met echo (E-4) ---------------------------
   Een <input type="date"> bepaalt zijn notatie uit de taal van de browser.
   Bij Hans kan daar 07/15/2026 staan waar wij 15/07/2026 bedoelen; daar
   helpt geen CSS aan. Deze regel eronder herhaalt wat er gekozen is. */
.datum-echo {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--slate);
}
.datum-echo.leeg { color: var(--mute); opacity: .75; }

/* --- 16.3 vensters met kopjes en een vaste knoppenbalk (C-0) --
   Gemeten: "Edit product" was 720px hoog bij tien velden. Met de zeven
   velden die Hans erbij vroeg wordt dat ~1050px, en dan valt de
   opslaan-knop op een laptop van 900px onder de vouw. */
.modal .veldgroep { margin: 0 0 18px; }
.modal .veldgroep > .vg-kop {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
  padding-bottom: 7px; margin-bottom: 13px; border-bottom: 1px solid var(--line);
}
.btnrow.vast {
  position: sticky; bottom: -26px; z-index: 3;
  background: linear-gradient(to top, var(--paper) 62%, rgba(255,255,255,0));
  padding: 15px 0 4px; margin-top: 18px;
}
@media (max-width: 899px) {
  /* Het venster is daar zelf de scroller (max-height: 92vh) en houdt onderaan
     een veiligheidsmarge aan; die moet de balk ook aanhouden. */
  .btnrow.vast { bottom: calc(-24px - env(safe-area-inset-bottom)); }
}

/* --- 16.4 afgeleide waarden (C-9, C-10, C-12) ----------------
   Wat je zelf invult en wat het portaal uitrekent moeten uit elkaar te
   houden zijn. Vandaar de zachte achtergrond en het =-teken ervoor. */
.dl-grid dt.afgeleid, .dl-grid dd.afgeleid { background: #FAF7F1; }
.dl-grid dt.afgeleid { border-radius: 7px 0 0 7px; padding-left: 7px; margin-left: -7px; }
.dl-grid dd.afgeleid { border-radius: 0 7px 7px 0; padding-right: 7px; }
.dl-grid dt.afgeleid::before { content: "= "; color: var(--mute); font-weight: 400; }
.reken {
  font-family: var(--mono); font-size: 13px; color: var(--slate);
  background: var(--sand); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-top: 8px;
}
.reken b { color: var(--ink); font-weight: 600; }
.veldhulp { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mute); }
.veldhulp button {
  border: 0; background: none; padding: 0; color: var(--orange-ink);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.veldhulp:empty { display: none; }
/* Waarschuwen zonder te blokkeren (barcode, volume): zelfde kleur als
   "nog geen SKU", want het is hetzelfde soort mededeling. */
.veldhulp.let-op { color: var(--let-op); font-weight: 500; }
/* "Use 6.6 kg" is een echte knop (Bernd, 13-9: "hoe werkt deze?"). */
.veldhulp .btn {
  display: inline-flex; padding: 5px 11px; margin: 2px 8px 4px 0;
  font-size: 12.5px; text-decoration: none; border: 1px solid var(--line);
  background: var(--paper, #fff); color: var(--ink); border-radius: 999px;
}
.veldhulp .btn:hover { border-color: var(--orange-ink); color: var(--orange-ink); }

/* --- 16.5 SKU en andere codes --------------------------------
   Een artikelnummer is een code, geen naam. Mono maakt "RA-12" en
   "RAI2" op het oog verschillend, en dat is precies het punt. */
.sku { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.sku-leeg { font-family: var(--sans); font-size: 13px; color: var(--let-op); font-weight: 600; }

/* --- 16.6 productfoto's (C-5) --------------------------------- */
.fotos { display: flex; gap: 10px; margin: 2px 0 0; }
.foto {
  width: 84px; height: 112px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--sand); overflow: hidden; display: block; padding: 0;
  flex: 0 0 auto; position: relative; cursor: zoom-in;
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-leeg {
  border-style: dashed; color: var(--mute); font-size: 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 6px; line-height: 1.3;
}
.foto-leeg:hover { border-color: var(--orange); color: var(--orange-ink); }
.foto-leeg svg { width: 20px; height: 20px; }
.foto-kaart { width: 40px; height: 40px; border-radius: 8px; cursor: default; }
.foto-groot { max-width: 100%; max-height: 68vh; border-radius: 12px; display: block; margin: 0 auto; }
.kop-met-foto { display: flex; gap: 16px; align-items: flex-start; }
@media (max-width: 620px) { .foto { width: 66px; height: 88px; } }

/* --- 16.7 productregels bij een zending (E-5) -----------------
   Het invoerformulier stond altijd open en de knop was grijs, terwijl het
   de belangrijkste handeling op die kaart is. Nu ingeklapt achter één
   oranje knop, met een totaalregel eronder. */
.regel-toevoegen { margin-top: 16px; }
.regel-form {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  background: var(--sand); margin-top: 14px;
}
table.data tfoot td {
  font-weight: 700; border-top: 2px solid var(--line); border-bottom: none;
  padding-top: 12px; background: transparent;
}
table.data tfoot td.lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute); font-weight: 500;
}

/* --- 16.8 ingetrokken documenten (§2.3) ----------------------- */
.ingetrokken-blok { margin-top: 14px; }
.ingetrokken-blok summary {
  cursor: pointer; font-size: 13px; color: var(--mute);
  padding: 7px 0; list-style: none;
}
.ingetrokken-blok summary::-webkit-details-marker { display: none; }
.ingetrokken-blok summary::before { content: "▸ "; }
.ingetrokken-blok[open] summary::before { content: "▾ "; }
.ingetrokken-blok table.data td { opacity: .62; }
.ingetrokken-blok table.data td.kaartkop,
.ingetrokken-blok table.data td:first-child strong { text-decoration: line-through; }

/* --- 16.9 contract met akkoord (A-3) -------------------------- */
.akkoord-blok {
  border: 1px solid var(--orange); border-radius: var(--r-card);
  background: var(--peach); padding: 22px 24px; margin-bottom: 18px;
}
.akkoord-blok h2 { margin-bottom: 6px; }
.akkoord-blok .brief {
  background: var(--paper); border-radius: 12px; padding: 14px 16px;
  margin: 14px 0; white-space: pre-line; font-size: 14.5px;
}
.akkoord-blok .naamveld { max-width: 380px; }
.akkoord-vast {
  font-size: 13.5px; color: var(--ok); background: var(--ok-bg);
  border-radius: 10px; padding: 10px 13px; display: inline-block;
}

/* --- 16.10 berichtenknop naast de status (A-2) ---------------- */
.kop-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.msg-knop {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--pill); padding: 6px 13px; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.msg-knop:hover { border-color: var(--ink); text-decoration: none; }
.msg-knop svg { width: 17px; height: 17px; }
.msg-knop.nieuw { background: var(--peach); border-color: var(--orange); color: var(--orange-ink); }

/* --- 16.11 getting started, ingeklapt (A-1) ------------------- */
.gs-klaar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; font-size: 14.5px;
}
.gs-klaar .ok-bol {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; flex: 0 0 auto;
}
.gs-klaar .ok-bol svg { width: 14px; height: 14px; }
.gs-klaar .gs-tekst { flex: 1 1 220px; min-width: 0; }
.gs-klaar button {
  border: 0; background: none; color: var(--orange-ink); font: inherit;
  font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 0;
}

/* --- 16.12 percentage per tegel (A-4) -------------------------
   Hans: "% complete informatie tonen per data categorie, links van de
   count". Percentage en teller staan dus naast elkaar. Ze zitten samen in
   .t-meta zodat de teller niet meer zelf hoeft te zweven; dat scheelde een
   rechtermarge die je per tegel moest raden. */
.tile .t-meta {
  position: absolute; top: 15px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tile .t-meta .t-count { position: static; }
.t-pct {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--mute);
  display: inline-flex; align-items: center; gap: 4px;
}
.t-pct.vol { color: var(--ok); }
.t-pct .vinkje { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .tile .t-meta { grid-area: telling; position: static; align-self: center; }
  .t-pct { font-size: 11.5px; }
}

/* --- 16.13 filterbalk in het productoverzicht (C-1) ----------- */
th.sorteer { cursor: pointer; user-select: none; }
th.sorteer:hover { color: var(--ink); }
th.sorteer .pijl { opacity: .35; margin-left: 3px; }
th.sorteer[aria-sort] .pijl { opacity: 1; color: var(--orange-ink); }

/* --- 16.14 schuifje Active / Inactive (C-2, C-11) ------------- */
.staat-schuif { display: inline-flex; border: 1px solid var(--line); border-radius: var(--pill); overflow: hidden; }
.staat-schuif button {
  border: 0; background: var(--paper); color: var(--slate); font: inherit;
  font-size: 13.5px; font-weight: 600; padding: 8px 16px; cursor: pointer;
}
.staat-schuif button[aria-pressed="true"] { background: var(--ink); color: #FFF; }
.staat-schuif button:not([aria-pressed="true"]):hover { background: var(--sand); }

/* =============================================================
   17 · MASTERDATA V1 (3 september 2026)
   Verpakkingsonderdelen, het EPR-rapport en de bewijsstukken.
   Onderbouwing: PRD-MASTERDATA-V1.md
   ============================================================= */
/* de drie niveaus krijgen elk een eigen tint, zodat je in een lijst van
   twintig onderdelen in één oogopslag ziet wat er in de doos zit en wat erop */
.badge.lvl-primary   { background: var(--peach);    color: var(--orange-ink); }
.badge.lvl-secondary { background: var(--wacht-bg); color: var(--wacht); }
.badge.lvl-tertiary  { background: var(--rust-bg);  color: var(--rust); }

.bewijs-lijst { display: flex; flex-wrap: wrap; gap: 6px; }

/* Een rapport met acht onderdeelkolommen past niet op 14,5 px. Kleiner en
   dichter, mono in de cijfers, en de kolomkop met het materiaal eronder. */
table.data.compact { font-size: 13px; }
table.data.compact td { padding: 8px 9px; }
table.data.compact th { padding: 0 9px 7px; }
table.data.epr th .epr-mat { display: block; font-size: 9.5px; letter-spacing: .08em; color: #A29D93; text-transform: none; }
table.data tr.epr-subtotaal td { background: #FAF7F1; font-weight: 600; border-bottom: 2px solid var(--line); }
table.data tfoot td { font-weight: 700; background: #FAF7F1; }
table.data td.lbl { color: var(--slate); font-weight: 600; }

.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagehead .btnrow label.f select { min-height: 44px; margin-top: 0; }


/* ---------------- document bekijken in een venster ----------------
   Een pdf of foto opent in het portaal zelf. Het venster is breder dan een
   formuliervenster: een A4 op 640 px leest niet. Op een telefoon schuift het
   van onderen omhoog, net als de andere vensters. */
.modal:has(.viewer) { max-width: 940px; }
.viewer { display: flex; flex-direction: column; gap: 12px; }
.viewer-kop { margin: 0; overflow-wrap: anywhere; }
.viewer-sub { margin: -8px 0 0; }
.viewer-vak {
  background: var(--sand); border: 1px solid var(--line); border-radius: 14px;
  min-height: 220px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
}
.viewer-kader { width: 100%; height: min(66vh, 780px); border: 0; border-radius: 8px; background: #fff; }
.viewer-beeld { max-width: 100%; max-height: min(66vh, 780px); border-radius: 8px; display: block; }
.viewer-geen { text-align: center; color: var(--mute); max-width: 46ch; padding: 26px 12px; }
.viewer-geen p { margin: 0; }
.viewer-knoppen { margin: 0; }
@media (max-width: 780px) {
  .viewer-kader { height: 58vh; }
  .viewer-beeld { max-height: 58vh; }
  .viewer-vak { padding: 6px; border-radius: 10px; }
}

/* In kaartvorm staan View en Download naast elkaar als losse woorden. Zonder
   wat lucht eromheen zijn dat twee kleine trefvlakken op een telefoon. */
@container werkblad (max-width: 780px) {
  td.acties > a { padding: 5px 3px; }
}


/* de schuifhint hoort alleen bij het smalle scherm; basis uit, in de
   container-query hieronder aan */
.epr-schuifhint { display: none; }

/* ---------------- het EPR-detailrapport op een smal scherm ----------------
   De kaartmodus hierboven is goed voor lijsten van tien tot dertig regels. Het
   detailrapport heeft er honderden, met een kolom per verpakkingsonderdeel: op
   een tablet van 768 px werd de pagina 34.673 px hoog (benchmark 9-9, taak 21).
   Onleesbaar, en scrollen hielp niet want je verloor de kop.

   Deze tabel blijft daarom een tabel. Hij krijgt zijn eigen kader met een
   schuifbalk in beide richtingen, een kop die blijft staan, en een eerste kolom
   die meeschuift zodat je altijd ziet bij welke markt je zit. */
@container werkblad (max-width: 780px) {
  .tablewrap:has(table.data.epr) {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
  }
  table.data.epr { display: table; width: max-content; min-width: 100%; }
  table.data.epr thead { display: table-header-group; }
  table.data.epr tbody { display: table-row-group; }
  table.data.epr tfoot { display: table-footer-group; }
  table.data.epr thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--paper); padding: 8px 10px; white-space: nowrap;
  }
  table.data.epr tr {
    display: table-row; background: transparent; border: 0; border-radius: 0;
    padding: 0; margin: 0; max-width: none;
  }
  table.data.epr td {
    display: table-cell; padding: 7px 10px; white-space: nowrap;
    border-bottom: 1px solid var(--line); text-align: right;
  }
  table.data.epr td::before { content: none; }
  table.data.epr td:first-child,
  table.data.epr td:nth-child(2) { text-align: left; }
  table.data.epr td:first-child,
  table.data.epr thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--paper);
    width: 116px; min-width: 116px; max-width: 116px;
  }
  /* vaste breedte, anders is de vastgezette cel smaller dan de kolom en piept
     er een stukje van de kolom erachter langs de rand */
  table.data.epr td:nth-child(2),
  table.data.epr thead th:nth-child(2) {
    position: sticky; left: 116px; z-index: 1; background: var(--paper);
    width: 132px; min-width: 132px; max-width: 132px;
    overflow: hidden; text-overflow: ellipsis;
  }
  table.data.epr thead th:first-child,
  table.data.epr thead th:nth-child(2) { z-index: 3; }
  table.data.epr tfoot tr,
  table.data.epr tr.epr-subtotaal { background: #FAF7F1; }
  /* een vastgezette cel heeft een eigen achtergrond nodig, anders schijnt de
     tabel eronder erdoorheen; in een totaalregel is die achtergrond zand */
  table.data.epr tfoot td:first-child,
  table.data.epr tfoot td:nth-child(2),
  table.data.epr tr.epr-subtotaal td:first-child,
  table.data.epr tr.epr-subtotaal td:nth-child(2) { background: #FAF7F1; }
  table.data.epr tfoot td:empty { display: table-cell; }
  /* het bijschrift onder de tabel gaat over schuiven, niet over rekenen */
  .epr-schuifhint { display: block; }
}


/* ---------------- afwerkronde 9 september 2026 ----------------
   Uit de ontwerpronde: de vensterbalk dekte de laatste velden af, een code
   brak middenin over twee regels, en de kop van het EPR-rapport verdween zodra
   je ging scrollen. */

/* De knoppenbalk onderin een venster: een verloop laat de tekst erdoorheen
   schemeren en dat leest als een fout. Vaste achtergrond, en het formulier
   houdt onderaan ruimte vrij zodat het laatste veld er niet achter valt. */
.btnrow.vast {
  background: var(--paper);
  box-shadow: 0 -10px 14px -12px rgba(22, 21, 15, .35);
  border-top: 1px solid var(--line);
  padding: 14px 0 6px;
}
.modal form > .btnrow.vast { margin-bottom: -4px; }
.modal form { padding-bottom: 2px; }

/* Een SKU of onderdeelcode is één ding; die hoort niet over twee regels te
   breken ("CV-" op de ene regel en "CAC-50" op de volgende). */
.sku { white-space: nowrap; }

/* Ook op een breed scherm: de kop blijft staan, anders lees je kolommen zonder
   te weten welk onderdeel erboven stond. */
table.data.epr thead th {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
}

/* De "niet gevonden"-staat: een leeg scherm met een uitweg in plaats van een
   losse rode balk. */
.leeg-groot {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 46px 28px; text-align: center; max-width: 560px; margin: 10px auto;
}
.leeg-groot h1 { font-size: 22px; margin: 12px 0 6px; }
.leeg-groot p { margin: 0 auto 18px; max-width: 44ch; }
.leeg-groot .e-ico { display: inline-flex; color: var(--mute); }
.leeg-groot .btnrow { justify-content: center; }


/* ---------------- viewer: tekst, tabellen en kaartjes ---------------- */
.viewer-tekstvak {
  width: 100%; max-height: min(66vh, 780px); overflow: auto;
  background: var(--paper); border-radius: 10px; padding: 14px 16px; text-align: left;
}
.viewer-pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink);
}
.viewer-lijst { margin: 8px 0 12px; padding-left: 20px; }
.viewer-lijst li { margin: 2px 0; }
.viewer-tabel table.data { font-size: 13px; }
.viewer-tabel table.data td, .viewer-tabel table.data th { white-space: nowrap; }
.viewer-geen p { margin: 0 0 6px; }
.viewer-geen p:last-child { margin-bottom: 0; }


/* ================= feedback Josh, 9 september 2026 =================
   Drie dingen uit het alfarapport: de knoppen van een venster scrolden weg bij
   een lang document, het EPR-rapport las als losse getallen in het wit, en het
   beoordeelvenster werd rommelig doordat getallen middenin afbraken. */

/* ---- 1. Download en Close (en Approve/Reject) blijven in beeld ----
   Het venster scrolde als geheel mee met de achtergrond, dus bij een lang
   document moest je helemaal naar beneden om te kunnen sluiten. Nu scrollt de
   inhoud binnen het venster en plakt de knoppenbalk onderaan. */
.modal-back {
  align-items: center;
  padding: 4vh 16px;
  overflow: hidden;               /* de achtergrond scrollt niet meer mee */
}
.modal {
  --venster-pad: 26px;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* doorschuiven stopt bij de rand van het venster */
}
.modal > .btnrow:last-child,
.modal form > .btnrow,
.modal .viewer-knoppen {
  position: sticky;
  bottom: calc(-1 * var(--venster-pad));
  margin-bottom: calc(-1 * var(--venster-pad));
  padding: 14px 0 var(--venster-pad);
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 14px -12px rgba(22, 21, 15, .35);
  z-index: 3;
}
/* De kop van het venster blijft ook staan: bij een lange onderdelenlijst wist
   je anders niet meer welk product je aan het beoordelen was. */
.modal > h2:first-child {
  position: sticky; top: calc(-1 * var(--venster-pad)); z-index: 3;
  background: var(--paper);
  margin: calc(-1 * var(--venster-pad)) 0 14px;
  padding: var(--venster-pad) 0 10px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) {
  .modal-back { padding: 0; align-items: flex-end; overflow: hidden; }
  .modal { --venster-pad: 22px; max-height: 92vh; }
  .modal > .btnrow:last-child,
  .modal form > .btnrow,
  .modal .viewer-knoppen {
    bottom: calc(-1 * (var(--venster-pad) + env(safe-area-inset-bottom)));
    margin-bottom: calc(-1 * (var(--venster-pad) + env(safe-area-inset-bottom)));
    padding-bottom: calc(var(--venster-pad) + env(safe-area-inset-bottom));
  }
}

/* ---- 2. Het EPR-rapport: zien bij welke kolom een getal hoort ----
   Een dunne matrix met veel lege vakken. Zonder verticale begrenzing zweeft
   elk getal en tel je met je vinger terug naar de kop. Om en om een heel licht
   oranje tintje maakt van elke kolom een baan die je met je oog volgt. */
table.data.epr th.epr-k,
table.data.epr td.epr-k {
  border-left: 1px solid var(--line);
}
/* Dekkende kleuren, geen rgba: de kop en de vaste kolommen liggen over de
   rijen heen, en door een doorzichtige tint schemerde het getal eronder erdoor. */
table.data.epr td.epr-k-b,
table.data.epr th.epr-k-b { background: #FFF3EA; }
table.data.epr td.epr-k-a,
table.data.epr th.epr-k-a { background: var(--paper); }
/* Op de subtotaal- en totaalregels blijft de baan zichtbaar, maar dan op de
   donkerdere ondergrond van die regel. */
table.data.epr tr.epr-subtotaal td.epr-k-b,
table.data.epr tfoot td.epr-k-b { background: #F6EFE4; }
table.data.epr tr.epr-subtotaal td.epr-k-a,
table.data.epr tfoot td.epr-k-a { background: #FAF7F1; }
/* De laatste kolom is de optelling van de hele rij; die hoort niet bij de
   banen en krijgt daarom een stevigere scheiding. */
table.data.epr th:last-child,
table.data.epr td:last-child { border-left: 2px solid var(--line); }

/* Het aantal flessen hoort bij de vraag "welke rij is dit", net als markt en
   product. Stond die kolom niet vast, dan schoof hij half onder de vaste
   kolommen en las je een halve 4 en een halve 0 naast de productcode. */
@container werkblad (max-width: 780px) {
  table.data.epr td:nth-child(3),
  table.data.epr thead th:nth-child(3) {
    position: sticky; left: 248px; z-index: 1; background: var(--paper);
    width: 62px; min-width: 62px; max-width: 62px;
  }
  table.data.epr thead th:nth-child(3) { z-index: 3; }
  table.data.epr tfoot td:nth-child(3),
  table.data.epr tr.epr-subtotaal td:nth-child(3) { background: #FAF7F1; }
  /* De drie vaste kolommen staan als blok los van de banen erachter. */
  table.data.epr td:nth-child(3),
  table.data.epr thead th:nth-child(3) {
    border-right: 2px solid var(--line);
    box-shadow: 6px 0 8px -8px rgba(22, 21, 15, .45);
  }
}

/* ---- 3. Het beoordeelvenster: getallen breken niet meer middenin ----
   "0.500 kg" stond over twee regels, waardoor de tabel er rommelig uitzag en
   de rijen ongelijk hoog werden. */
.modal table.data td.num,
.modal table.data th.num { white-space: nowrap; }
/* De kolomkop blijft onder de vensterkop staan. Zonder dat las je in het
   beoordeelvenster een rij losse getallen zonder te weten of "1" een aantal is
   of een gewicht. De hoogte van de kop komt uit modal() in chrome.js. */
.modal table.data thead th {
  position: sticky; z-index: 2;
  /* de kop plakt op -26px, dus de tabelkop hoort een venster-padding hoger */
  top: calc(var(--kop-hoogte, 26px) - var(--venster-pad));
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
  /* zonder ruimte bóven de tekst dekt de achtergrond de rij eronder niet af en
     schemert die door de kop heen */
  padding-top: 10px;
}
/* Een venster met een tabel erin heeft meer breedte nodig: bij 640 px viel de
   omschrijving van een onderdeel over drie regels uiteen. */
.modal:has(table.data) { max-width: 880px; }
/* Agentvoorstel beoordelen: zes kolommen, waarvan het bewijs (citaat) en het
   besluit niet mogen wegvallen. Op 880 px viel de besliskolom rechts buiten
   het venster (23-9-2026). */
.modal:has(#vsForm) { max-width: min(1240px, 96vw); }
.modal:has(#vsForm) .tablewrap { overflow-x: auto; }
/* Op een telefoon onder elkaar: per veld een blok, geen tabel die zijwaarts
   schuift en naar het keuzevak springt. */
@media (max-width: 700px) {
  #vsForm table, #vsForm tbody, #vsForm tr, #vsForm td { display: block; width: 100%; }
  #vsForm thead { display: none; }
  #vsForm tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  #vsForm td { padding: 3px 0; border: 0; text-align: left; min-width: 0 !important; }
  #vsForm td.num::before { content: 'Certainty '; color: var(--mute); }
  #vsForm td:nth-child(2)::before { content: 'Proposed: '; color: var(--mute); }
  #vsForm td:nth-child(3)::before { content: 'Now in the portal: '; color: var(--mute); }
}
/* De schuifhoes maakt een eigen scrollgebied, en daarbinnen plakt de kolomkop
   aan iets dat verticaal niet scrollt: dan doet hij niets. In een venster is de
   breedte toereikend, dus daar mag de hoes weg. */
.modal .tablewrap { overflow: visible; }
.modal table.data td { vertical-align: top; }

/* Ook op een breed scherm: met zestig onderdelen schuif je hier net zo goed
   zijwaarts, en dan verdwijnen markt, product en aantal links uit beeld. Op een
   tablet stond dat al vast; hieronder hetzelfde, met wat meer ruimte omdat een
   productnaam op een breed scherm langer mag zijn. */
@container werkblad (min-width: 781px) {
  table.data.epr td:first-child,
  table.data.epr thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--paper);
    width: 130px; min-width: 130px; max-width: 130px;
  }
  table.data.epr td:nth-child(2),
  table.data.epr thead th:nth-child(2) {
    position: sticky; left: 130px; z-index: 1; background: var(--paper);
    width: 190px; min-width: 190px; max-width: 190px;
    overflow: hidden; text-overflow: ellipsis;
  }
  table.data.epr td:nth-child(3),
  table.data.epr thead th:nth-child(3) {
    position: sticky; left: 320px; z-index: 1; background: var(--paper);
    width: 74px; min-width: 74px; max-width: 74px;
    border-right: 2px solid var(--line);
    box-shadow: 6px 0 8px -8px rgba(22, 21, 15, .45);
  }
  table.data.epr thead th:first-child,
  table.data.epr thead th:nth-child(2),
  table.data.epr thead th:nth-child(3) { z-index: 3; }
  /* een vastgezette cel op een totaalregel houdt de kleur van die regel */
  table.data.epr tfoot td:first-child,
  table.data.epr tfoot td:nth-child(2),
  table.data.epr tfoot td:nth-child(3),
  table.data.epr tr.epr-subtotaal td:first-child,
  table.data.epr tr.epr-subtotaal td:nth-child(2),
  table.data.epr tr.epr-subtotaal td:nth-child(3) { background: #FAF7F1; }
}

/* --- 17. Regelgeving: het aftelblok en een signaal ------------------------
   Het getal is het enige dat een lezer in een halve seconde oppikt, dus dat
   krijgt de ruimte. Josh, 16-9: "Ik zie 148 dagen. Maar wat is het? Waar is
   deze deadline voor?" De zin ernaast is het antwoord, en die moet dus naast
   het getal staan en niet eronder in kleine letters. */
.aftel { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.aftel + .aftel { border-top: 1px solid var(--lijn); }
.aftel-getal {
  flex-shrink: 0; min-width: 76px; text-align: center;
  font-size: 30px; font-weight: 600; line-height: 1.05; color: var(--ink);
}
.aftel-getal span { display: block; font-size: 12px; font-weight: 400; color: var(--mute); }
.aftel-dichtbij .aftel-getal { color: var(--orange-ink); }
.aftel-tekst strong { display: block; margin-bottom: 3px; }
.aftel-tekst .sub { margin: 0; }

.sig { padding: 14px 0; }
.sig + .sig { border-top: 1px solid var(--lijn); }
.sig h3 { margin: 0 0 6px; font-size: 17px; }
.sig p { margin: 0 0 6px; }
.sig-meta { color: var(--mute); font-size: 13.5px; }
.sig-meer summary { cursor: pointer; color: var(--mute); font-size: 13.5px; }
.sig-meer p { margin: 6px 0 0; color: var(--mute); font-size: 13.5px; }

/* Het citaat uit een document bij een signaal. Het moet er anders uitzien dan
   de uitleg eromheen, want dit is wat er letterlijk staat en de rest is wat wij
   ervan maken. */
.citaat {
  margin: 8px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--orange);
  background: var(--sand);
  border-radius: 0 var(--r-veld) var(--r-veld) 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.citaat footer {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12px;
}

/* Onder een signaal: de twee waarden naast elkaar, om te kunnen scannen zonder
   de zin te lezen. De zin legt uit, deze regel laat zien. */
.waarom {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate);
}
.waarom b { color: var(--ink); font-weight: 500; }

/* Een afgehandeld signaal: wie, wanneer, en of hij terugkomt. */
.afgehandeld {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--sand);
  border-radius: var(--r-veld);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- bevestiging van een sessie die in de URL stond (R-03, 22-09-2026) ----
   Ligt over alles heen en blokkeert de pagina eronder, want dit is geen
   melding maar een vraag: zolang er niet geantwoord is, is er geen sessie. */
.linksessie {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 21, 15, .62);
  overflow-y: auto;
}
.linksessie .card {
  max-width: 460px;
  width: 100%;
  margin: auto;
}
.linksessie h2 {
  margin-top: 0;
  /* Een adres uit een link kan lang zijn en mag de kaart niet openduwen. */
  overflow-wrap: anywhere;
}
.linksessie .banner {
  overflow-wrap: anywhere;
}

/* Welkomstap na de eerste code (30-9-2026): bedrijfsnaam en contactpersoon. */
.welkom-stap { max-width: 640px; }
.welkom-stap h1 { margin: 0 0 6px; }
.welkom-stap form { margin-top: 18px; }
.welkom-stap > .muted { margin-top: 14px; }