/* De panelen van DZH Transport: het klantenpaneel (/mijn) en de beheeromgeving
   (admin.dzhtransport.nl/beheer). Eén designtaal, overgenomen uit het ontwerp in `thema/`
   (DZH Mijn DZH.dc.html en DZH Admin.dc.html, 6 september 2026).

   Waarom een eigen bestand naast site.css: de panelen zijn gereedschap, de site is een
   etalage. Ze delen het merk (violet) maar niet de opmaak — een paneel heeft een balk of
   zijbalk, kaarten, tabellen en chips, en die horen de publieke pagina's niet te raken.

   Manrope wordt zelf geserveerd (website/static/site/fonts). Het ontwerp laadde hem bij
   Google; dat mag hier niet: de site laadt geen externe bronnen. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2-variations");
}

.pnl {
  /* Tokens uit het ontwerp; alleen hier gedefinieerd, nergens een los hexgetal in een template. */
  --pnl-grond: #f6f5fa;
  --pnl-vlak: #ffffff;
  --pnl-vlak-zacht: #faf9fd;
  --pnl-inkt: #1b1626;
  --pnl-inkt-2: #3b3450;
  --pnl-inkt-3: #6b6580;
  --pnl-inkt-4: #7b7590;
  --pnl-inkt-5: #9a94ad;
  --pnl-lijn: #e8e5f1;
  --pnl-lijn-zacht: #f0edf6;
  --pnl-lijn-veld: #dcd8e8;
  --pnl-accent: #6d28d9;
  --pnl-accent-fel: #5b21b6;
  --pnl-accent-zacht: #ede9fe;
  --pnl-accent-waas: #f1eefb;
  --pnl-accent-rand: #c4b5fd;
  --pnl-accent-rij: #f6f3ff;
  --pnl-ok: #15803d;
  --pnl-ok-vlak: #dcfce7;
  --pnl-ok-inkt: #14532d;
  --pnl-wacht-vlak: #fef3c7;
  --pnl-wacht-inkt: #92400e;
  --pnl-info-vlak: #dbeafe;
  --pnl-info-inkt: #1e3a8a;
  --pnl-stil-vlak: #e2e8f0;
  --pnl-stil-inkt: #1e293b;
  --pnl-fout: #b91c1c;
  --pnl-fout-vlak: #fee2e2;
  --pnl-fout-inkt: #991b1b;
  --pnl-r-klein: 8px;
  --pnl-r: 10px;
  --pnl-r-kaart: 14px;
  --pnl-r-groot: 16px;
  --pnl-r-rond: 999px;
  --pnl-schaduw: 0 12px 32px rgba(27, 22, 38, 0.14);
  /* De kaartbreedte van het bureau en de rechterkolom van het factuurscherm, uit Leroys mockups
     van 19 september 2026 (kaarten ±1050 px, rechterkolom ±285 px). Rechts 320 en geen 285: de
     mockup schrijft 13,5 px en wij 16 px in invoervelden (iOS), en met minder vallen de korte
     keuzelijsten ("14 dagen", "EUR") weg. */
  --pnl-kolom: 1060px;
  --pnl-kolom-zij: 320px;

  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--pnl-inkt);
  background: var(--pnl-grond);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* De standaardkleur van een link in het paneel — met :where(), dus met de specificiteit van
   alléén `.pnl`. Dat is hier geen stijlvoorkeur maar een noodzaak: zonder :where() is
   `.pnl a` (0,1,1) sterker dan `.pnl-knop` (0,1,0), en dan krijgt élke link die als knop
   is opgemaakt violette tekst op een violette knop — onzichtbaar. Zo gebeurde het op
   6 september 2026 met "Nieuwe offerte aanvragen"; alleen een blik in de browser ving het.
   `a:hover` staat óók binnen de :where(), anders telt die pseudoklasse alsnog mee. */
.pnl :where(a) {
  color: var(--pnl-accent);
  text-decoration: none;
}

.pnl :where(a:hover) {
  color: var(--pnl-accent-fel);
  text-decoration: underline;
}

.pnl input,
.pnl select,
.pnl textarea,
.pnl button {
  font-family: inherit;
}

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

/* Overslaan naar de inhoud: onzichtbaar tot hij focus krijgt. Eigen regel, want het
   paneel laadt site.css niet. */
.pnl-skip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--pnl-r);
  background: var(--pnl-accent);
  color: #fff;
  font-weight: 700;
  transform: translateY(-200%);
}

.pnl-skip:focus {
  transform: none;
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------- kop (klantenpaneel) */

.pnl-kop {
  background: var(--pnl-vlak);
  border-bottom: 1px solid var(--pnl-lijn);
  position: sticky;
  top: 0;
  z-index: 5;
}

.pnl-kop__binnen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 16px 24px;
  min-height: 64px;
  flex-wrap: wrap;
}

.pnl-merk {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pnl-inkt);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.pnl-merk:hover {
  color: var(--pnl-inkt);
  text-decoration: none;
}

.pnl-merk__ruit {
  width: 28px;
  height: 28px;
  border-radius: var(--pnl-r-klein);
  background: var(--pnl-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex: none;
}

.pnl-merk__sub {
  color: var(--pnl-inkt-4);
  font-weight: 600;
}

.pnl-nav {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
}

.pnl-nav__item {
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
  background: transparent;
  color: var(--pnl-inkt-2);
  text-decoration: none;
  min-height: 40px;
}

.pnl-nav__item:hover {
  background: var(--pnl-accent-waas);
  color: var(--pnl-inkt-2);
  text-decoration: none;
}

.pnl-nav__item--aan {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
}

.pnl-nav__badge {
  font-size: 11px;
  background: var(--pnl-accent);
  color: #fff;
  border-radius: var(--pnl-r-rond);
  padding: 1px 6px;
  font-weight: 700;
}

/* PLAK-19 blok 3: een stip zonder getal — Leroys keuze bij vraag 4 ("rood omdat er iets te
   doen is"). Rood en niet accentpaars: dit is het enige plekje in de kop dat om actie van de
   klant vraagt, en dat mag verschillen van de tellers die alleen iets melden. De maat staat
   vast in px en niet in em: hij hangt naast tekst en moet een stip blijven, geen ovaal. */
.pnl-nav__badge--stip {
  background: var(--pnl-fout);
  width: 8px;
  height: 8px;
  padding: 0;
  display: inline-block;
  vertical-align: 2px;
}

/* Uitklapmenu zonder JavaScript: <details>/<summary>. */
.pnl-uitklap {
  position: relative;
}

.pnl-uitklap > summary {
  list-style: none;
}

.pnl-uitklap > summary::-webkit-details-marker {
  display: none;
}

.pnl-uitklap__pijl {
  font-size: 10px;
  opacity: 0.6;
}

.pnl-uitklap__paneel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--pnl-schaduw);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

.pnl-uitklap__paneel .pnl-nav__item {
  justify-content: space-between;
  width: 100%;
}

.pnl-kop__rechts {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.pnl-talen {
  display: flex;
  gap: 2px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r-klein);
  padding: 2px;
}

.pnl-taal {
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pnl-inkt-4);
  text-decoration: none;
}

.pnl-taal:hover {
  background: var(--pnl-accent-waas);
  color: var(--pnl-accent-fel);
  text-decoration: none;
}

.pnl-taal--aan {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
}

.pnl-wie {
  font-size: 12.5px;
  text-align: right;
  line-height: 1.3;
}

.pnl-wie strong {
  display: block;
  font-weight: 700;
}

.pnl-code {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--pnl-accent-fel);
  font-weight: 700;
  font-size: 11.5px;
}

.pnl-uit {
  border: 0;
  background: none;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pnl-inkt-5);
  cursor: pointer;
  min-height: 40px;
}

.pnl-uit:hover {
  color: var(--pnl-fout);
}

/* ------------------------------------------------- zijbalk (DZH-admin, /beheer) */

/* Het klantenpaneel heeft een balk bovenaan, de admin een zijbalk. Dat is geen willekeur:
   de klant heeft negen bestemmingen, de admin dertien in drie groepen, en dertien items
   naast elkaar leest niemand. Onder 900 px klapt de zijbalk terug naar een balk bovenaan
   met horizontaal schuiven — dan is een kolom van 236 px de helft van het scherm. */
.pnl--zij {
  flex-direction: row;
  align-items: stretch;
}

.pnl-zijbalk {
  width: 236px;
  flex: 0 0 236px;
  background: var(--pnl-vlak);
  border-right: 1px solid var(--pnl-lijn);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.pnl-zijbalk__merk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 14px;
  color: var(--pnl-inkt);
}

.pnl-zijbalk__merk:hover {
  color: var(--pnl-inkt);
  text-decoration: none;
}

.pnl-zijbalk__naam {
  display: block;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.pnl-zijbalk__sub {
  display: block;
  font-size: 11px;
  color: var(--pnl-inkt-4);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pnl-zijbalk__nav {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
  flex: 1;
}

.pnl-zijbalk__groep {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pnl-inkt-5);
  padding: 14px 10px 6px;
}

.pnl-zijbalk__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  background: transparent;
  color: var(--pnl-inkt-2);
  text-decoration: none;
  min-height: 40px;
}

.pnl-zijbalk__item:hover {
  background: var(--pnl-accent-waas);
  color: var(--pnl-inkt-2);
  text-decoration: none;
}

.pnl-zijbalk__item--aan {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
  font-weight: 700;
}

.pnl-zijbalk__voet {
  padding: 14px 20px;
  border-top: 1px solid var(--pnl-lijn);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.pnl-zijbalk__wie strong {
  display: block;
  font-weight: 700;
}

.pnl-zijbalk__wie span {
  color: var(--pnl-inkt-4);
}

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

.pnl-inhoud {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 72px;
  flex: 1;
  min-width: 0;
}

/* Naast de zijbalk: een gecentreerde kolom met kaarten van `--pnl-kolom` breed (+ 2 × 36 px
   marge). Tot 19 september 2026 liep de inhoud tot de rechterrand — 1652 px bij een venster van
   1920, een factuurregel van 1286 px — en Leroy vond dat "zo groot en uitgerekt, echt lelijk".
   Hij koos voor dit op het HELE beheer, niet per scherm. Niet terugzetten naar de volle
   breedte: een brede tabel scrollt in zijn eigen `.pnl-scroll`, niet over de pagina.
   `margin` staat hier bewust niet: de basisregel hierboven (`margin: 0 auto`) centreert.
   `min-width: 0` staat ook daar en is geen detail: een flex-item krimpt anders niet onder zijn
   min-content-breedte, en één lange klantnaam duwt dan de hele pagina over de schermrand. */
.pnl-inhoud--breed {
  max-width: calc(var(--pnl-kolom) + 72px);
  padding: 28px 36px 60px;
}

/* Inloggen en registreren: geen menu (er is nog niets om naartoe te gaan), één smalle
   kolom, verticaal gecentreerd zodat het scherm niet leeg oogt. */
.pnl-inhoud--smal {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pnl-kopregel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pnl-kopregel h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  font-family: inherit;
}

.pnl-kopregel p {
  margin: 0;
  color: var(--pnl-inkt-3);
  font-size: 14.5px;
}

/* De uitlegzin onder de titel. Stond op dertien schermen in de HTML zonder één regel CSS —
   gevonden door test_paneel_klassen_bestaan.py. De maximumbreedte is het punt: een zin die
   over de volle breedte van een breed scherm loopt, leest niemand. */
.pnl-kopregel__intro {
  max-width: 68ch;
}

.pnl h2 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------------------------------------------------------------- kaarten en tegels */

.pnl-kaart {
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-groot);
  padding: 20px 24px;
}

.pnl-kaart--plat {
  padding: 0;
  overflow: hidden;
}

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

.pnl-tegels > * {
  min-width: 0;
}

.pnl-tegel {
  display: block;
  text-align: left;
  cursor: pointer;
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-groot);
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
}

.pnl-tegel:hover {
  border-color: var(--pnl-accent-rand);
  color: inherit;
  text-decoration: none;
}

.pnl-tegel__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pnl-inkt-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pnl-tegel__cijfer {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.pnl-tegel__sub {
  font-size: 13px;
  color: var(--pnl-inkt-3);
  margin-top: 2px;
}

/* De donkere banner: openstaande betaling. Het enige donkere vlak op een paneelpagina. */
.pnl-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--pnl-inkt);
  color: #fff;
  border-radius: var(--pnl-r-groot);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.pnl-banner__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pnl-accent-rand);
}

.pnl-banner__titel {
  font-size: 20px;
  font-weight: 800;
  margin-top: 4px;
}

.pnl-banner__sub {
  font-size: 13px;
  color: #b8b2c9;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- lijsten */

.pnl-rij {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--pnl-lijn-zacht);
  padding: 14px 16px;
  cursor: pointer;
  background: var(--pnl-vlak);
  color: inherit;
  text-decoration: none;
}

.pnl-rij:first-child {
  border-top: 0;
}

.pnl-rij:hover {
  background: var(--pnl-vlak-zacht);
  color: inherit;
  text-decoration: none;
}

.pnl-rij--aan {
  background: var(--pnl-accent-rij);
}

.pnl-rij__kop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

/* Een rij met een rechterkolom (status, bedrag, acties) wordt een tweekolommer. Met :has(),
   zodat de rijen zónder rechterkolom gewoon blok blijven en er geen extra klasse door alle
   beheerschermen hoeft. Kent een browser :has() niet, dan stapelt de rechterkolom eronder —
   lelijker, maar volledig leesbaar. */
.pnl-rij:has(> .pnl-rij__rechts) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* Zonder dit duwt één lange e-mail in de linkerkolom de hele rij over de schermrand: een
   flex-kind heeft `min-width: auto` en krimpt niet onder zijn min-content-breedte. Dezelfde
   fout als de mobiele overloop van 7 augustus. */
.pnl-rij:has(> .pnl-rij__rechts) > * {
  min-width: 0;
}

.pnl-rij__rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  flex: none;
}

.pnl-rij__titel {
  font-weight: 800;
  font-size: 14px;
}

.pnl-rij__meta {
  font-size: 12.5px;
  color: var(--pnl-inkt-3);
  margin-top: 4px;
}

.pnl-rij__voet {
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
}

.pnl-leeg {
  padding: 32px 20px;
  text-align: center;
  color: var(--pnl-inkt-4);
  font-size: 13.5px;
}

/* ---------------------------------------------------------------- filterbalk */

/* Tabbladen als filter (Aanvragen, Klanten, Facturen): een lijn onder de balk, de actieve
   tab draagt hem in het violet. Bewust links en geen knoppen — een filter hoort een URL te
   hebben die je kunt bookmarken en delen. */
.pnl-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--pnl-lijn);
  margin-bottom: 18px;
}

/* Tabbladen binnen een kaart in plaats van boven een scherm: minder lucht, geen eigen lijn. */
.pnl-tabs--klein {
  border-bottom: 0;
  margin-bottom: 10px;
}

.pnl-tabs--klein .pnl-tabs__tab {
  padding: 6px 10px;
  font-size: 12.5px;
}

.pnl-tabs__tab {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pnl-inkt-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}

.pnl-tabs__tab:hover {
  color: var(--pnl-accent-fel);
  text-decoration: none;
}

.pnl-tabs__tab--aan {
  color: var(--pnl-accent-fel);
  border-bottom-color: var(--pnl-accent);
}

.pnl-teller {
  font-weight: 600;
  color: var(--pnl-inkt-5);
  margin-left: 3px;
}

/* ---------------------------------------------------------------- chips en knoppen */

.pnl-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--pnl-r-rond);
  white-space: nowrap;
  background: var(--pnl-stil-vlak);
  color: var(--pnl-stil-inkt);
}

/* Een chip die er is maar niet om aandacht vraagt: dezelfde vorm, minder inkt. */
.pnl-chip--stil {
  background: transparent;
  color: var(--pnl-inkt-4);
  border: 1px solid var(--pnl-lijn);
}

.pnl-chip--wacht {
  background: var(--pnl-wacht-vlak);
  color: var(--pnl-wacht-inkt);
}

.pnl-chip--offerte {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
}

.pnl-chip--ok {
  background: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.pnl-chip--info {
  background: var(--pnl-info-vlak);
  color: var(--pnl-info-inkt);
}

.pnl-chip--fout {
  background: var(--pnl-fout-vlak);
  color: var(--pnl-fout-inkt);
}

.pnl-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: var(--pnl-r-rond);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  background: var(--pnl-accent);
  color: #fff;
  cursor: pointer;
  min-height: 44px;
  text-decoration: none;
}

.pnl-knop:hover {
  background: var(--pnl-accent-fel);
  color: #fff;
  text-decoration: none;
}

.pnl-knop--stil {
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
  border: 1px solid var(--pnl-lijn-veld);
}

.pnl-knop--stil:hover {
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
  border-color: var(--pnl-accent);
}

.pnl-knop--ok {
  background: var(--pnl-ok);
}

.pnl-knop--ok:hover {
  background: var(--pnl-ok-inkt);
}

.pnl-knop--kaal {
  background: none;
  color: var(--pnl-inkt-4);
  padding: 12px 10px;
}

.pnl-knop--kaal:hover {
  background: none;
  color: var(--pnl-fout);
}

.pnl-knop--klein {
  padding: 9px 16px;
  font-size: 13.5px;
  min-height: 38px;
}

/* Wit op het donkere vlak: de enige knop die op .pnl-banner leesbaar blijft. */
.pnl-knop--licht {
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
}

.pnl-knop--licht:hover {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
}

.pnl-terug {
  border: 0;
  background: none;
  color: var(--pnl-accent);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  display: inline-block;
}

.pnl-acties {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------------------------------------------------------------- formulieren */

.pnl-vorm {
  display: grid;
  gap: 14px;
}

.pnl-vorm label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pnl-inkt-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* "(verplicht)" / "(optioneel)" achter elk label. Zelfde afspraak als `.veld__verplicht`
   in de etalage (spoedcorrectie offerte, §1): een bezoeker hoort vóór het invullen te
   weten of een veld moet — niet pas ná het versturen, uit een foutmelding. */
.pnl-verplicht {
  font-weight: 600;
  color: var(--pnl-inkt-5);
}

.pnl-vorm input,
.pnl-vorm select,
.pnl-vorm textarea {
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r);
  padding: 11px 12px;
  font-size: 16px;
  font-weight: 500;
  background: var(--pnl-vlak);
  color: var(--pnl-inkt);
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

/* Op het bureau (muis, groot scherm) lagere velden: Leroy wil "kleine vakjes". De letter blijft
   16 px — daaronder zoomt iOS in bij het tikken — dus de dichtheid komt uit de hoogte. `:where()`
   houdt de specificiteit gelijk aan de regel hierboven: `.pnl-vorm .pnl-tabelveld` (Tarieven) en
   `.pnl-vink input` blijven zo hun eigen maat houden. In het 900px-blok komen de 44 px terug. */
:where(.pnl--zij) .pnl-vorm input:not([type=checkbox]):not([type=radio]),
:where(.pnl--zij) .pnl-vorm select {
  min-height: 38px;
  padding: 7px 12px;
}

.pnl-vorm textarea {
  resize: vertical;
}

.pnl-vorm__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.pnl-vorm__paar > * {
  min-width: 0;
}

.pnl-vink {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pnl-inkt-2);
  cursor: pointer;
  flex-direction: row;
}

.pnl-vink input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: var(--pnl-accent);
  flex: none;
}

/* Een vinkje binnen een formulier. `.pnl-vorm label` (0,1,1) wint op specificiteit van
   `.pnl-vink` (0,1,0) en zet daar `flex-direction: column`; het hokje kwam daardoor bóven
   zijn tekst te staan, gecentreerd, op het welkomscherm en bij de bestemming van een nieuwe
   werkorder. Zichtbaar zodra je kijkt, maar geen enkele test die erop afgaat — vandaar deze
   regel met genoeg specificiteit, en niet een aanpassing van `.pnl-vink` zelf (die klopt). */
.pnl-vorm .pnl-vink {
  flex-direction: row;
  align-items: center;
}

.pnl-melding {
  border-radius: var(--pnl-r);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 16px;
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
}

.pnl-melding--ok {
  background: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.pnl-melding--wacht {
  background: var(--pnl-wacht-vlak);
  color: var(--pnl-wacht-inkt);
}

.pnl-melding--fout {
  background: var(--pnl-fout-vlak);
  color: var(--pnl-fout-inkt);
}

/* ---------------------------------------------------------------- adreskaart */

.pnl-adres {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak-zacht);
  border: 1px solid var(--pnl-lijn);
  white-space: pre-line;
}

.pnl-adres__code {
  color: var(--pnl-accent-fel);
}

/* Het adreskaartje van de reshipper-klant: het enige plek waar het straatadres staat.
   Per veld een kopieerknop, want webshops hebben aparte velden in de checkout. */
.pnl-adreskaart {
  background: var(--pnl-vlak);
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-groot);
  padding: 20px 24px;
  margin-top: 20px;
}

.pnl-adreskaart__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pnl-adreskaart__code {
  margin: 0;
  font-size: 12.5px;
  color: var(--pnl-inkt-4);
}

.pnl-adreskaart__code strong {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--pnl-accent-fel);
  font-size: 14px;
}

.pnl-adreskaart__velden {
  margin: 0;
  display: grid;
  gap: 0;
}

.pnl-adreskaart__veld {
  display: grid;
  grid-template-columns: minmax(88px, 150px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--pnl-lijn-zacht);
}

.pnl-adreskaart__veld:first-child {
  border-top: 0;
}

.pnl-adreskaart__veld > dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pnl-inkt-4);
}

.pnl-adreskaart__veld > dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* De regels waar de klantcode in moet: die mag een klant nooit overslaan. */
.pnl-adreskaart__veld--code > dd {
  color: var(--pnl-accent-fel);
}

.pnl-kopieer {
  border: 1px solid var(--pnl-lijn-veld);
  background: var(--pnl-vlak);
  border-radius: var(--pnl-r-rond);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pnl-inkt-3);
  cursor: pointer;
  min-height: 32px;
  white-space: nowrap;
}

.pnl-kopieer:hover {
  border-color: var(--pnl-accent);
  color: var(--pnl-accent-fel);
}

.pnl-kopieer[data-klaar] {
  background: var(--pnl-ok-vlak);
  border-color: var(--pnl-ok-vlak);
  color: var(--pnl-ok-inkt);
}

.pnl-adreskaart__acties {
  margin-top: 16px;
}

/* De instructieregels op een adreskaart: wat de klant bij zijn bestelling moet invullen. */
.pnl-adreskaart__instructies {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pnl-inkt-3);
}

.pnl-adreskaart__waarschuwing {
  margin: 16px 0 0;
  border-radius: var(--pnl-r);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--pnl-wacht-vlak);
  color: var(--pnl-wacht-inkt);
}

.pnl-adreskaart__winkels {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pnl-inkt-2);
}

.pnl-adreskaart__winkel {
  border-top: 1px solid var(--pnl-lijn-zacht);
  font-size: 13px;
}

.pnl-adreskaart__winkel > summary {
  padding: 9px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--pnl-inkt-2);
}

.pnl-adreskaart__winkel > p {
  margin: 0 0 10px;
  color: var(--pnl-inkt-3);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- kleine tekst en lijsten */

.pnl-klein {
  font-size: 13px;
  color: var(--pnl-inkt-3);
  line-height: 1.55;
  margin: 0 0 12px;
}

.pnl-lijst {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--pnl-inkt-3);
}

.pnl-lijst li {
  margin: 2px 0;
}

.pnl-blok + .pnl-blok,
.pnl-kaart + .pnl-kaart,
.pnl-kaart + .pnl-tegels,
.pnl-tegels + .pnl-kaart,
.pnl-banner + .pnl-tegels,
.pnl-raster + .pnl-kaart,
.pnl-kaart + .pnl-raster,
.pnl-raster + .pnl-raster {
  margin-top: 20px;
}

.pnl-kop2 {
  margin: 28px 0 12px;
}

.pnl-fout {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pnl-fout);
  margin: 4px 0 0;
}

/* Uitleg naast een veld: dicht, één tik open. Geen JavaScript. */
.pnl-uitleg {
  font-size: 12.5px;
  color: var(--pnl-inkt-3);
}

.pnl-uitleg > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--pnl-accent);
}

.pnl-uitleg > p {
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- berichtendraad */

.pnl-draad {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pnl-draad__bericht {
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-kaart);
  padding: 12px 16px;
  background: var(--pnl-vlak);
}

.pnl-draad__bericht--dzh {
  background: var(--pnl-accent-waas);
  border-color: var(--pnl-accent-zacht);
}

.pnl-draad__kop {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pnl-inkt-4);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* Het tijdstip in de berichtenkop: hoort bij de regel maar mag hem niet domineren. */
.pnl-draad__tijd {
  font-weight: 400;
  color: var(--pnl-inkt-5);
}

.pnl-draad__tekst {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* De tekst van een binnengekomen mail (Inbox, fase 0b). `pre-wrap` en niet `pre-line`:
   een mail draagt inspringing die betekenis heeft — een geciteerd antwoord, een tabelletje
   met maten, een adresblok — en `pre-line` vouwt die spaties weg. */
.pnl-mailtekst {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- tabellen en rasters */

.pnl-raster {
  display: grid;
  gap: 20px;
  align-items: start;
}

.pnl-raster > * {
  min-width: 0;
}

/* Twee kaarten NAAST elkaar in een raster: de `gap` geeft de ruimte al. De algemene burenregel
   (`.pnl-kaart + .pnl-kaart { margin-top: 20px }`) zette elke rechterkaart 20 px lager dan de
   linker — gemeten op werkorder, klant en factuur. */
.pnl-raster > .pnl-kaart + .pnl-kaart {
  margin-top: 0;
}

.pnl-raster--lijst-detail {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.pnl-raster--twee {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pnl-scroll {
  overflow-x: auto;
}

.pnl-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.pnl-tabel th,
.pnl-tabel td {
  text-align: left;
  padding: 12px 16px;
  border-top: 1px solid var(--pnl-lijn-zacht);
  vertical-align: top;
}

.pnl-tabel th {
  border-top: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--pnl-inkt-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pnl-getal {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* `.pnl-tabel th, .pnl-tabel td` (0,1,1) zet `text-align: left` en wint van `.pnl-getal`
   (0,1,0). Een getalkolom bleef daardoor stil links staan — je ziet het pas als je de cijfers
   onder elkaar wilt vergelijken en ze niet uitlijnen. */
.pnl-tabel .pnl-getal {
  text-align: right;
}

/* ---------------------------------------------------------------- veldenlijst */

.pnl-velden {
  display: grid;
  gap: 0;
}

.pnl-veld {
  display: grid;
  grid-template-columns: minmax(96px, 170px) minmax(0, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--pnl-lijn-zacht);
  font-size: 13.5px;
}

.pnl-veld:first-child {
  border-top: 0;
}

.pnl-veld__naam {
  color: var(--pnl-inkt-4);
  font-weight: 600;
}

.pnl-veld__waarde {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- stappen (zending) */

.pnl-stappen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

/* Het balkje is een lege <span>, dus zonder `display: block` krijgt het geen hoogte en is het
   weg. Tot 14 september 2026 gaf een tweede, verkeerde regel met dezelfde klasse het toevallig
   `display: flex`; die is weg (hij brak het offerteformulier). */
.pnl-stap__balk {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--pnl-lijn);
}

.pnl-stap--gedaan .pnl-stap__balk {
  background: var(--pnl-accent);
}

.pnl-stap__label {
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--pnl-inkt-5);
}

.pnl-stap--gedaan .pnl-stap__label {
  color: var(--pnl-inkt);
}

.pnl-stap__wanneer {
  font-size: 11.5px;
  color: var(--pnl-inkt-5);
}

/* ---------------------------------------------------------------- mobiel */

/* De zijbalk wordt een balk bovenaan zodra 236 px een te grote hap uit het scherm is. */
@media (max-width: 900px) {
  .pnl--zij {
    flex-direction: column;
  }

  .pnl-zijbalk {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--pnl-lijn);
  }

  /* Wél afbreken, níét horizontaal schuiven: dertien items achter elkaar in een schuifbalk
     betekent dat het laatste menu-item vier veegbewegingen ver ligt en dus nooit gebruikt
     wordt. Afgebroken over drie regels staat alles binnen één blik. */
  .pnl-zijbalk__nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    overflow: visible;
    padding: 8px 12px 12px;
  }

  /* `width: auto` overstemt de 100% van de zijbalkvorm: zonder dat neemt elk item een hele
     regel en staat de inhoud van de pagina een scherm lager. */
  .pnl-zijbalk__item {
    flex: none;
    width: auto;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 13px;
    min-height: 36px;
  }

  /* De groepskoppen zijn op één regel geen kop meer maar ruis; de volgorde draagt de
     groepering al. */
  .pnl-zijbalk__groep {
    display: none;
  }

  .pnl-inhoud--breed {
    padding: 24px 16px 56px;
  }

  /* Een aanraakscherm: de vingermaat terug (zie de compacte bureauregel). */
  :where(.pnl--zij) .pnl-vorm input:not([type=checkbox]):not([type=radio]),
  :where(.pnl--zij) .pnl-vorm select {
    min-height: 44px;
    padding: 11px 12px;
  }
}

@media (max-width: 820px) {
  .pnl-kop__binnen {
    padding: 8px 16px;
  }

  /* Het klantblok op een telefoon: één veld per regel (zie de klantblokregels onderaan). */
  .pnl-klantblok .pnl-klantblok__rij {
    grid-template-columns: minmax(0, 1fr);
  }

  .pnl-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .pnl-nav__item {
    flex: none;
  }

  .pnl-inhoud {
    padding: 24px 16px 56px;
  }

  .pnl-kopregel h1 {
    font-size: 24px;
  }

  .pnl-raster--lijst-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .pnl-uitklap__paneel {
    left: auto;
    right: 0;
  }
}

/* Een blok dat laat zien hoe iets er voor de klant uitziet — een citaat van de werkelijkheid,
   dus met een rand eromheen zodat niemand het voor de admin-inhoud zelf aanziet. */
/* --- PLAK-18 stap 3: het offertescherm ------------------------------------------------ */

/* Het drieluik: links wat de klant gaf, midden de offerte, rechts status en berichten.
   Het middenblok is breder omdat daar de brieftekst staat; drie gelijke kolommen geven een
   tekstvak van nog geen veertig tekens breed en dan leest niemand zijn eigen offerte na.
   Onder 68rem valt alles onder elkaar, in dezelfde volgorde als in de HTML — zo klopt de
   tabvolgorde op elk scherm met wat je ziet. `minmax(0, …)` omdat een grid-item anders niet
   onder zijn min-content-breedte krimpt en één brede tabel de pagina uit het scherm duwt. */
.pnl-drieluik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pnl-drieluik__links,
.pnl-drieluik__midden,
.pnl-drieluik__rechts {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

@media (min-width: 68rem) {
  .pnl-drieluik {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

/* De brede blokken onder het drieluik van een aanvraag (13 september 2026): artikelen, kavels,
   de berekening en de bijlagen over de volle breedte — een tabel met tien kolommen in een kolom
   van een derde scherm was precies Leroys "niet passend". */
.pnl-aanvraag-breed {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  min-width: 0;
}
.pnl-aanvraag-breed > .pnl-kaart { min-width: 0; }
/* Een geplakte URL of code in een veld of cel breekt, de kaart niet. */
.pnl-aanvraag-breed .pnl-tabel td,
.pnl-veld__waarde { overflow-wrap: anywhere; }

/* Velden in een breed blok: meerdere naast elkaar in plaats van één lange lijst. */
.pnl-velden--breed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  column-gap: 24px;
}

/* Bijlagen bij een aanvraag: een voorbeeld van een afbeelding, een link voor de rest. */
.pnl-bijlagen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.pnl-bijlage {
  margin: 0;
  max-width: 260px;
  font-size: 13px;
}
.pnl-bijlage img {
  display: block;
  max-width: 260px;
  max-height: 200px;
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak);
}
.pnl-bijlage figcaption { margin-top: 6px; word-break: break-all; }

/* Een kop boven een groepje knoppen. Geen <label>: die hoort bij één veld, en een radiogroep
   heeft er meerdere — een label dat naar het eerste wijst liegt tegen een schermlezer. */
.pnl-veldkop {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pnl-inkt-3);
}

/* Btw en levertijd als knoppen (ontwerp). Radio's onder een label, zoals de diensttegels van
   de calculator: werkt zonder JavaScript, met het toetsenbord en met een schermlezer, en het
   formulier post exact hetzelfde als met een tekstveld. */
.pnl-keuzeknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.pnl-keuzeknop {
  position: relative;
  display: inline-flex;
}

/* Weggeclipt in plaats van display:none: anders verdwijnt de knop uit de tabvolgorde. */
.pnl-keuzeknop input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.pnl-keuzeknop span {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r-klein);
  background: var(--pnl-vlak);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pnl-keuzeknop input:checked + span {
  background: var(--pnl-accent);
  border-color: var(--pnl-accent);
  color: #fff;
}

.pnl-keuzeknop input:focus-visible + span {
  outline: 2px solid var(--pnl-accent);
  outline-offset: 2px;
}

/* Het vrije veld naast de knoppen: gestippeld, want het hoort bij de knop "anders" en is
   geen zelfstandig veld. */
.pnl-keuzeknoppen__vrij {
  min-height: 38px;
  width: 8rem;
  padding: 0 12px;
  border: 1px dashed var(--pnl-lijn-veld);
  border-radius: var(--pnl-r-klein);
  background: var(--pnl-vlak);
  font: inherit;
  font-size: 13px;
}

/* De standaardknop van een formulier: gerenderd maar onzichtbaar (14 september 2026). Een
   browser kiest voor Enter de eerste submitknop in documentvolgorde; deze zet ervoor dat dat
   "Opslaan" is en niet "Versturen". Niet `display: none`: een niet-gerenderde knop slaat Safari
   over als standaardknop. */
.pnl-standaardknop {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Het vrije veld hoort bij de knop "anders", en staat er dus alleen als die aan is (14 september
   2026). Op de telefoon maakt `.pnl-vorm input` het veld schermbreed, en dan stond er onder
   "21 %" een groot leeg vak waarvan niemand wist wat het deed. Alleen opmaak: de server leest het
   veld toch al alleen bij "anders" (`leads._keuze`). Kent een browser :has() niet, dan staat het
   veld er gewoon — zoals vroeger. */
.pnl-keuzeknoppen:has(input[value="anders"]:not(:checked)) > .pnl-keuzeknoppen__vrij {
  display: none;
}

/* De somcontrole onder de opbouw. Groen als het aansluit, amber met het verschil als het
   afwijkt; het blokkeert niets, want soms is er een korting die niet in de regels staat. */
.pnl-som {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 600;
}

.pnl-som--sluit {
  color: var(--pnl-ok);
}

.pnl-som--afwijking {
  color: var(--pnl-wacht-inkt);
}

/* Het voorbeeld zoals de klant het ziet. De HTML komt uit `site/_aanbod_kaart.html` —
   letterlijk hetzelfde bestand als `/offerte/<token>` — maar de CSS niet: het adminpaneel
   laadt alleen paneel.css (`test_alleen_paneel_css_en_geen_wegdek`), want twee tokensets op
   één pagina is precies hoe eerder de witte "Nu"-kaart ontstond. Deze regels geven het
   voorbeeld dus de vorm van het ontwerp in de tokens van het paneel. */
.pnl-voorbeeld {
  border: 1px dashed var(--pnl-lijn);
  border-radius: var(--pnl-r-klein);
  padding: 14px 16px;
  background: var(--pnl-vlak-zacht);
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pnl-voorbeeld .aanbod-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.pnl-voorbeeld .aanbod-kop__label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pnl-inkt-3);
}

.pnl-voorbeeld .aanbod-kop__nummer {
  margin: 0;
  font-size: 20px;
}

.pnl-voorbeeld .aanbod-kop__versie,
.pnl-voorbeeld .aanbod-chip__label {
  font-weight: 400;
  color: var(--pnl-inkt-3);
}

.pnl-voorbeeld .aanbod-chip {
  display: inline-block;
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-klein);
  padding: 6px 10px;
  font-size: 12px;
  background: var(--pnl-vlak);
}

.pnl-voorbeeld .aanbod-kaart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 14px;
  align-items: start;
}

.pnl-voorbeeld .aanbod-brief {
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-klein);
  padding: 14px;
  background: var(--pnl-vlak);
}

/* De brieftekst komt als alinea's binnen; enkele regelafbrekingen daarbinnen horen te
   blijven staan (dit is waar `white-space: pre-line` sinds PLAK-18 thuishoort — op de
   alinea's, niet op het hele voorbeeld). */
.pnl-voorbeeld .aanbod-brief p {
  margin: 0 0 10px;
  white-space: pre-line;
}

.pnl-voorbeeld .aanbod-opbouw {
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-klein);
  overflow: hidden;
  background: var(--pnl-vlak);
}

.pnl-voorbeeld .aanbod-opbouw__kop {
  margin: 0;
  padding: 10px 12px;
  background: var(--pnl-vlak-zacht);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pnl-inkt-3);
}

.pnl-voorbeeld .aanbod-opbouw__lijst {
  padding: 0 12px;
}

.pnl-voorbeeld .aanbod-opbouw__regel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

.pnl-voorbeeld .aanbod-opbouw__regel:last-child {
  border-bottom: 0;
}

.pnl-voorbeeld .aanbod-opbouw__regel--stil,
.pnl-voorbeeld .aanbod-opbouw__btwtekst {
  color: var(--pnl-inkt-3);
}

.pnl-voorbeeld .aanbod-opbouw__totaal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
  font-weight: 700;
}

.pnl-voorbeeld .aanbod-bedrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Een foto bij een pakket (PLAK-13). Vaste hoogte en `object-fit: cover`, zodat een staande
   telefoonfoto en een liggende camerafoto naast elkaar een rustige strook vormen in plaats
   van een trapje; de volledige foto zit één klik verderop. */
.pnl-foto {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--pnl-r);
  border: 1px solid var(--pnl-lijn);
  background: var(--pnl-stil-vlak);
}

/* --- PLAK-17 stap 3: de verzendcalculator in het paneel -------------------------------- */

.pnl-calc {
  display: grid;
  gap: 16px;
}

/* "Van" is geen keuze maar een mededeling: het magazijn ligt vast. Daarom een rustige regel
   op een vlak en geen veld — een invoervak zou suggereren dat er iets te kiezen valt. */
.pnl-calc__van {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 10px 12px;
  background: var(--pnl-vlak-zacht);
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r-klein);
}

.pnl-calc__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 14px;
  align-items: start;
}

.pnl-calc__veld {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pnl-inkt-3);
  min-width: 0;
}

.pnl-calc__veld--breed {
  grid-column: 1 / -1;
}

.pnl-calc__veld input,
.pnl-calc__veld select {
  font: inherit;
  /* 16px, anders zoomt iOS in bij focus — dezelfde regel als de rest van de formulieren. */
  font-size: 16px;
  font-weight: 400;
  color: var(--pnl-inkt);
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r-klein);
  background: var(--pnl-vlak);
  min-width: 0;
}

/* Het getal en zijn eenheid horen bij elkaar en breken samen af op een smal scherm. */
.pnl-calc__meting {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pnl-calc__meting input {
  flex: 1 1 5rem;
  min-width: 0;
}

.pnl-calc__kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* De offerteknop onder de kaarten (20 september 2026): lucht erboven, de uitleg er vlak onder. */
.pnl-calc__offerte {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

/* `display: grid` wint het van het hidden-attribuut; zonder deze regel staat de knop er al vóór
   er iets berekend is. */
.pnl-calc__offerte[hidden] {
  display: none;
}

.pnl-calc__kaart {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak);
  min-width: 0;
}

/* De aanbeveling krijgt de accentrand. Eén kaart, niet drie: zijn ze allemaal gemarkeerd,
   dan is er geen aanbeveling meer. */
.pnl-calc__kaart--beste {
  border-color: var(--pnl-accent-rand);
  box-shadow: 0 0 0 1px var(--pnl-accent-rand);
}

.pnl-calc__kaartkop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pnl-calc__kaartkop h3 {
  margin: 0;
  font-size: 16px;
}

.pnl-calc__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pnl-calc__regel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--pnl-inkt-2);
}

.pnl-calc__regel--totaal {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--pnl-lijn);
  font-weight: 700;
  font-size: 15px;
  color: var(--pnl-inkt);
}

.pnl-calc__bedrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* De kaart waarop de klant al gekozen heeft (PLAK-17 stap 4). Een gevulde rand en niet alleen
   een andere knop: welke keuze er staat moet je zien zonder de knoppen te lezen. Naast
   `--beste` mogelijk — dat is de aanbeveling, dit is wat er gekozen is, en die twee hoeven
   niet dezelfde kaart te zijn. */
.pnl-calc__kaart--gekozen {
  border-color: var(--pnl-accent);
  background: var(--pnl-accent-waas);
}

/* --- PLAK-19 blok 1: de hele rij klikbaar -------------------------------------------------- */

/* De *uitgerekte link*. De facturenlijst wikkelde haar rij al in één `<a class="pnl-rij">` en
   dat is de mooiste vorm — maar het mag niet zodra er een knop of een formulier in de rij
   staat: HTML staat geen interactief element binnen een link toe, en browsers maken er iets
   onvoorspelbaars van.

   Dus: de rij krijgt `position: relative`, de hoofdlink een `::after` die hem helemaal bedekt,
   en de knoppen komen daar met `z-index` bovenuit. Geen JavaScript, een echte link (dus
   rechtsklikken en "openen in een nieuw tabblad" werken gewoon), en precies één link in de
   tabvolgorde in plaats van een rij vol klikdoelen. */
.pnl-rij--open {
  position: relative;
}

.pnl-rij--open .pnl-rij__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Alles wat een eigen actie heeft moet bóven de uitgerekte link liggen. Vergeet je dit, dan
   bedekt de link ze en werkt bijvoorbeeld de ✕-knop in een rij niet meer — en dat merk je pas
   als iemand hem probeert. */
.pnl-rij--open .pnl-rij__acties,
.pnl-rij--open form,
.pnl-rij--open .pnl-knop {
  position: relative;
  z-index: 1;
}

/* De rij reageert op de muis, ook buiten de tekst: zonder dit ziet hij er dood uit terwijl
   hij het niet is. */
.pnl-rij--open:hover .pnl-rij__link {
  text-decoration: underline;
}

/* --- Wat moet er nog? (PLAK-19 blok 3) ---------------------------------------------------
   Leroy: "een klein balkje in de order wat er nog gedaan moet worden". Hij staat BOVEN de
   statusbalk, want dit is het enige op de pagina waar de klant zelf iets mee moet; de
   statusbalk eronder vertelt wat wij doen.

   Bewust een lijst en geen zin: twee taken achter elkaar in één alinea leest als één taak,
   en dan doet hij er één. */
.pnl-todo {
  border-radius: var(--pnl-r);
  border-left: 4px solid var(--pnl-fout);
  background: var(--pnl-fout-vlak);
  color: var(--pnl-fout-inkt);
  padding: 12px 16px;
  margin: 0 0 16px;
}

.pnl-todo__kop {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.pnl-todo__lijst {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 600;
}

/* --- Het offertescherm (PLAK-20) -----------------------------------------------------------
   Leroys mockup "Offertescherm Admin" van 8 september: vier genummerde stappen in plaats van
   één lange kolom velden. Alleen de indeling is overgenomen — gevraagd en beantwoord: het
   donkere crème/goud-palet uit dat mockup niet, want dit scherm hoort bij de rest van de
   admin en zou daar anders als enige uit springen. */

.pnl-offerte {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pnl-stap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Het nummer en de naam van de stap. Kleiner en stiller dan een gewone kop: het is een
   wegwijzer binnen één kaart, geen nieuwe kaart. */
.pnl-stap__kop {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pnl-inkt-3);
}

.pnl-bedrag {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Wat de klant onder aan de streep betaalt. Stond nergens op dit scherm; je moest het
   voorbeeld uitklappen om het te zien. */
.pnl-uitkomst {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak-zacht);
}

.pnl-uitkomst__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pnl-inkt-4);
}

.pnl-uitkomst__bedrag {
  font-size: 22px;
  font-weight: 800;
  color: var(--pnl-accent-fel);
  font-variant-numeric: tabular-nums;
}

/* De opbouw van een offerte (14 september 2026). Eén regel is een raster van één rij:
   omschrijving | bedrag | weg. Een raster en geen flex: `.pnl-vorm input` zet width:100%, en in
   een flexrij met wrap viel een regel op de telefoon uiteen in drie blokken onder elkaar — Leroys
   schermafdruk. Het bedrag heeft een vaste kolom, zodat de komma's onder elkaar staan. De
   wegknop is 44px: de kleinste maat die op een telefoon betrouwbaar raak te tikken is. */
.pnl-regels {
  display: grid;
  gap: 8px;
}

.pnl-regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 44px;
  gap: 8px;
  align-items: center;
}

.pnl-regel__bedrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Factuurregels (18 september 2026; sinds 19 september naar Leroys mockup): omschrijving ·
   aantal · stukprijs · btw % · totaal · ✕. Ongelijke kolommen, want een aantal is hooguit drie
   tekens en een bedrag hooguit acht: het factuurscherm gebruikte eerst `.pnl-vorm__paar`, dat
   gelijke kolommen maakt, en dan is het bedragvak even breed als de omschrijving — precies
   Leroys klacht "de vakken met bedragen zijn MEGA groot". De kolomkop boven de regels
   (`.pnl-kolomkop`) gebruikt dezelfde maten. */
.pnl-regel--aantal {
  grid-template-columns: minmax(0, 1fr) 3.75rem 6rem 4.5rem 6rem 44px;
}

/* Verplicht bij elk meerkoloms raster: een grid-kind heeft `min-width: auto` en krimpt niet
   onder zijn min-content-breedte, dus één lange omschrijving duwt de kaart over de schermrand.
   `overflow: hidden` en `text-overflow` repareren dat niet (zie de toelichting op regel 2302). */
.pnl-regel--aantal > * {
  min-width: 0;
}

.pnl-regel__aantal {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* De QR van een betaallink. Vast vierkant en een witte ondergrond: een QR op een donker paneel
   scant niet, en een vervormde QR ook niet — daarom geen `max-width: 100%` maar een vaste maat
   die op elke schermbreedte past. */
.pnl-qr {
  display: block;
  width: 180px;
  height: 180px;
  margin-top: 12px;
  padding: 8px;
  border-radius: var(--pnl-r);
  background: #fff;
}

.pnl-regel input[aria-invalid="true"] {
  border-color: var(--pnl-fout);
  background: var(--pnl-fout-vlak);
}

.pnl-regel__weg {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--pnl-r-klein);
  background: transparent;
  color: var(--pnl-inkt-4);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.pnl-regel__weg:hover {
  border-color: var(--pnl-fout);
  background: var(--pnl-fout-vlak);
  color: var(--pnl-fout);
}

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

/* Wat er uit de regels volgt, live terwijl je typt: totaal excl. btw, de btw en totaal incl. btw.
   Het eindbedrag dat de klant betaalt (incl. bij een particulier, excl. bij een bedrijf) krijgt de
   accentkleur; de andere twee staan er stil onder. */
.pnl-totaal {
  display: grid;
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r);
  overflow: hidden;
  background: var(--pnl-vlak);
}

.pnl-totaal__rij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--pnl-inkt-2);
}

.pnl-totaal__rij + .pnl-totaal__rij {
  border-top: 1px solid var(--pnl-lijn-zacht);
}

.pnl-totaal__rij--stil {
  color: var(--pnl-inkt-3);
}

.pnl-totaal__rij--eind {
  padding: 12px;
  background: var(--pnl-accent-zacht);
  color: var(--pnl-accent-fel);
  font-size: 15px;
  font-weight: 700;
}

.pnl-totaal__bedrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* De plusknop: een stippellijn, want hij voegt iets toe dat er nog niet is. */
.pnl-knop--stippel {
  background: transparent;
  border: 1px dashed var(--pnl-lijn-veld);
  color: var(--pnl-inkt-2);
}

.pnl-knop--stippel:hover {
  border-color: var(--pnl-accent);
  color: var(--pnl-accent-fel);
  background: var(--pnl-accent-waas);
}

/* De drie knoppen onderaan, met een lijn erboven: hier houdt het formulier op. */
.pnl-acties--balk {
  border-top: 1px solid var(--pnl-lijn);
  padding-top: 16px;
  flex-wrap: wrap;
}

/* --- Kaartbanden (PLAK-21, "Warehouse menu redesign") ---------------------------------------
   Leroys zeven mockups van 8 september dragen een idee, en dat idee komt in vijf ervan terug:
   een kaart is niet langer een gepadde doos maar drie banden. Een KOP met de titel en waar het
   over gaat, een LIJF met de inhoud, en een VOET met de knoppen. Een tabel loopt daarbij tegen
   de kaartrand aan in plaats van in de padding te zweven.

   Ze horen bij `.pnl-kaart--plat` (padding: 0); de banden brengen hun eigen ruimte mee. Zonder
   die combinatie plakt de kop tegen de rand — dat is nu al zo op de plekken waar een h2 in
   een platte kaart staat, en die schermen krijgen het hiermee meteen goed. */

.pnl-kaart__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

/* De uitlegzin in de kop. Niet `.pnl-klein` hergebruiken: die draagt een ondermarge van 12px
   en wordt op dertien schermen gebruikt — hem hier aanpassen zou daar allemaal doorwerken. */
.pnl-kaart__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pnl-inkt-3);
  max-width: 68ch;
}

.pnl-kaart__telling {
  font-size: 13px;
  color: var(--pnl-inkt-4);
  font-variant-numeric: tabular-nums;
}

/* Een tweede kopband midden in een kaart (Schattingen, Btw): hij volgt op inhoud, dus hij heeft
   ook bovenaan een lijn nodig. Zonder die lijn zweeft de titel tussen twee blokken en zegt hij
   niet bij welk van de twee hij hoort. */
.pnl-kaart__lijf + .pnl-kaart__kop,
.pnl-scroll + .pnl-kaart__kop {
  border-top: 1px solid var(--pnl-lijn-zacht);
}

.pnl-kaart__lijf {
  padding: 20px;
}

/* De voet is grijs en heeft een lijn erboven: hier houdt de kaart op en begint de handeling.
   Een element met `margin-right: auto` erin komt links te staan (een teller, een waarschuwing). */
.pnl-kaart__voet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--pnl-vlak-zacht);
  border-top: 1px solid var(--pnl-lijn-zacht);
}

/* Een tweede regel onder een lege lijst: waarom hij leeg is, of wat er komt. Blok, zodat hij
   onder de eerste regel valt in plaats van ernaast. */
.pnl-leeg__sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--pnl-inkt-5);
}

/* Een telling in de voet hoort links: de knoppen staan rechts en de telling gaat over wat
   erboven staat, niet over de knop ernaast. */
.pnl-kaart__voet > .pnl-kaart__telling {
  margin-right: auto;
}

/* --- Benoemde veldgroepen ------------------------------------------------------------------
   Veertien velden onder elkaar zonder een tussenkop vertellen niet waarom ze er staan. In het
   mockup staat links de groepsnaam met een uitlegzin en rechts de velden, met een haarlijn
   ertussen. Op een smal scherm valt dat onder elkaar.

   `min-width: 0` op de kinderen is geen sier: zonder dat duwt een lang label of een lange
   placeholder de hele kaart over de schermrand — dezelfde fout als de mobiele overloop van
   7 augustus, en `overflow: hidden` repareert dat niet. */
.pnl-vormgroep {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  gap: 16px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

.pnl-vormgroep > * {
  min-width: 0;
}

.pnl-vormgroep:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.pnl-vormgroep:first-of-type {
  padding-top: 0;
}

.pnl-vormgroep__naam {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pnl-inkt);
}

.pnl-vormgroep__uitleg {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pnl-inkt-4);
}

.pnl-vormgroep__velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
}

.pnl-vormgroep__velden > * {
  min-width: 0;
}

/* Keuzekaarten staan onder elkaar en niet in kolommen: ze zijn breder dan een veld en hun
   uitlegzin leest als een regel tekst, niet als een label naast een buurveld. */
.pnl-vormgroep__velden--onder {
  grid-template-columns: minmax(0, 1fr);
}

/* Een veld over de volle breedte van zijn groep: een instructiezin van tweehonderd tekens hoort
   niet in een kolom van 190px, waar je hem alleen scrollend kunt teruglezen. */
.pnl-veld--breed {
  grid-column: 1 / -1;
}

/* Een adres leest als een adres: straat breed, huisnummer en postcode smal, plaats breed,
   land smal. Gelijke kolommen maken van "Huisnummer" een veld waar een straatnaam in past. */
.pnl-vormgroep__velden--adres {
  grid-template-columns: 3fr 1fr 1.2fr 3fr 1fr;
}

@media (max-width: 52rem) {
  .pnl-vormgroep {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pnl-vormgroep__velden--adres {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* Op een telefoon krijgt de omschrijving een eigen regel en staan aantal, bedrag en ✕
     eronder. Alle vier naast elkaar persen laat 101px over voor de omschrijving — gemeten op
     375px — en dat is te smal om een factuurregel in te lezen. Bewust in dít blok en niet in
     een nieuw breekpunt: de stylesheet heeft er vier en een vijfde is een bron van verschil. */
  .pnl-regel--aantal {
    grid-template-columns: 3.75rem 6rem 4.5rem minmax(0, 1fr) 44px;
  }

  .pnl-kolomkop {
    display: none;
  }

  .pnl-regel--aantal > :first-child {
    grid-column: 1 / -1;
  }
}

/* --- Een vinkje als keuzekaart --------------------------------------------------------------
   Modifier op `.pnl-vink` en geen eigen naam, zodat de bestaande vinkje-test hem blijft dekken.
   De regel eronder is dezelfde valkuil die daar al beschreven staat: `.pnl-vorm label` (0,1,1)
   zet flex-direction: column en wint van een kale klasse (0,1,0), waardoor het hokje boven zijn
   eigen tekst springt. */
.pnl-vink--kaart {
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r);
  padding: 12px 14px;
  align-items: flex-start;
  max-width: 560px;
}

.pnl-vorm .pnl-vink--kaart {
  flex-direction: row;
}

.pnl-vink--kaart:hover {
  border-color: var(--pnl-accent-rand);
}

.pnl-vink__uitleg {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pnl-inkt-4);
  font-weight: 400;
}

/* --- Een derde tekstregel in een rij --------------------------------------------------------
   `.pnl-rij__meta` is 12,5px en `.pnl-klein` 13px met een ondermarge; een derde regel moet
   kleiner zijn dan de tweede, anders leest de rij als drie even belangrijke dingen. */
.pnl-rij__sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pnl-inkt-5);
}

/* --- Filterband boven een tabel -------------------------------------------------------------
   Velden naast elkaar op een licht vlak, direct onder de kaartkop; op smal breekt hij af. */
.pnl-filterbalk {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--pnl-vlak-zacht);
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

.pnl-filterbalk > * {
  min-width: 0;
}

/* Een invoerveld in een tabelcel: compact en met uitgelijnde cijfers. Bewust een klasse en
   geen `.pnl-tabel input`, want die zou ook de vinkjes in de kolommen Actief en Verzoeken
   raken en die horen hun eigen maat te houden. */
.pnl-tabelveld {
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r-klein);
  background: var(--pnl-vlak);
  font: inherit;
  /* Het mockup zet hier 13px. Toch 16px: onder 16px zoomt iOS in zodra je een veld aantikt, en
     dan staat de tabel scheef in beeld. Dat is dezelfde afspraak als bij de mobiele
     formulierfix van 6 augustus; de dichtheid komt hier van de hoogte, niet van de letter. */
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 100%;
  /* De kolom is zo breed als de tabel hem maakt; zonder bovengrens rekt een veld voor "2" mee
     tot een halve schermbreedte en lijkt het alsof er een zin in moet. */
  max-width: 130px;
  min-width: 0;
}

/* Precies de val van `.pnl-vink`, en op zes tabbladen tegelijk: `.pnl-vorm input` (0,1,1) wint
   van `.pnl-tabelveld` (0,1,0) en zet er 44px hoogte en 11px padding op. Elke tabelrij werd
   daardoor twee keer zo hoog en de cijfers stonden links. */
.pnl-vorm .pnl-tabelveld {
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  text-align: right;
}

/* --- Een bestand kiezen ---------------------------------------------------------------------
   Een stippelvak, dezelfde taal als de plusknop op het offertescherm: wat hier komt bestaat
   nog niet. */
.pnl-bestandsvak {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px dashed var(--pnl-lijn-veld);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak-zacht);
}

/* --- Een toestand onder een veld ------------------------------------------------------------
   "Staat klaar" of "nog leeg", met een stip ervoor. De stip is nooit de enige drager: er staat
   altijd tekst naast, want kleur alleen is voor een deel van de lezers geen informatie. */
.pnl-staat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--pnl-inkt-4);
}

.pnl-staat__stip {
  width: 7px;
  height: 7px;
  border-radius: var(--pnl-r-rond);
  background: currentColor;
  flex: none;
}

.pnl-staat--ok {
  color: var(--pnl-ok);
}

.pnl-staat--uit {
  color: var(--pnl-inkt-5);
}

/* Een opgeslagen waarde die niet de vorm van de sleutel heeft (sleutels.klopt): rood, want er
   moet iets gebeuren. De tekst ernaast zegt wat. */
.pnl-staat--fout {
  color: var(--pnl-fout);
}

/* --- Een veld per regel, met een haarlijn ---------------------------------------------------
   Voor schermen waar elk veld zijn eigen uitleg en toestand heeft (de sleutels): dan horen
   label, veld, uitleg en toestand dichter bij elkaar te staan dan bij het volgende veld. */
.pnl-veldrij {
  padding: 16px 0;
  border-bottom: 1px solid var(--pnl-lijn-zacht);
}

.pnl-veldrij:first-child {
  padding-top: 0;
}

.pnl-veldrij:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- Een code op een neutraal vlak ----------------------------------------------------------
   `.pnl-code` is violet en vet: dat is een kenmerk waar je naar zoekt (een klantcode). Een
   actienaam in het logboek is geen kenmerk maar een categorie, en hoort stiller. */
.pnl-code--vlak {
  background: var(--pnl-lijn-zacht);
  color: var(--pnl-inkt-2);
  font-weight: 500;
}

/* Het logboek heeft kolommen met heel verschillende inhoud; als modifier, zodat de andere
   tabelschermen hun eigen maatvoering houden. */
.pnl-tabel--logboek {
  min-width: 900px;
}

.pnl-tabel--logboek td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Een formulier dat zélf de drie banden draagt: de knoppen horen binnen het `<form>` te
   staan, dus loopt het formulier van kop tot voet. `.pnl-vorm` is een grid met 14px gap en
   zou de banden uit elkaar duwen met een streep wit ertussen; `display: block` geeft de
   banden hun eigen aansluiting terug. Zelfde ingreep als `.pnl-offerte` bij PLAK-20. */
.pnl-vorm--banden {
  display: block;
}

/* De tabelkop op een licht vlak. Staat in alle vier de tabelmockups en scheidt de kop van de
   rijen zonder een extra lijn: `.pnl-tabel td` heeft al een `border-top`, dus een
   `border-bottom` hieronder zou een dubbele haarlijn geven. */
.pnl-tabel thead tr {
  background: var(--pnl-vlak-zacht);
}

/* Foto's bij een pakket, met de schuif "tonen aan klant" eronder (G30, 10 september 2026).
   Het knopje staat ONDER het beeld en niet ernaast: je kijkt eerst naar de foto en beslist dan. */
.pnl-fotorij {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.pnl-fotovak {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* --- Het klantblok "Aan wie" (19 september 2026) --------------------------------------------
   Klantformulier, factuur en offerte delen deze velden (templates/site/beheer/_klantblok.html).
   De kolommen hebben de verhoudingen uit Leroys mockup — een postcode smal, een straat breed —
   en géén gelijke kolommen: daar kwamen de uitgerekte vakken vandaan die hij "echt lelijk" vond.
   Op een telefoon één kolom (820px-blok). */
.pnl-klantblok {
  display: grid;
  gap: 14px;
}

.pnl-klantblok > * {
  min-width: 0;
}

/* Het plakvak is één regel hoog en groeit mee met wat je plakt. Een `<textarea>` en geen
   `<input>`: een invoerveld van één regel gooit de regeleinden van een geplakt adres weg, en
   juist die vertellen de herkenner waar de naam ophoudt en de straat begint. */
.pnl-klantblok__plak {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.pnl-klantblok__plak > label {
  flex: 1;
  min-width: 0;
}

.pnl-klantblok__plak textarea {
  field-sizing: content;
  min-height: 38px;
  max-height: 10lh;
  padding: 7px 12px;
  resize: none;
}

.pnl-klantblok__plak .pnl-knop {
  flex: none;
  min-height: 38px;
}

/* `align-items: end`: loopt één label over twee regels, dan blijven de vakken in de rij toch op
   één lijn. */
.pnl-klantblok__rij {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}

.pnl-klantblok__rij > * {
  min-width: 0;
}

.pnl-klantblok__rij--adres {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 1fr);
}

.pnl-klantblok__rij--contact {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 1fr);
}

.pnl-klantblok__rij--gelijk {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Het adresboek op Klanten (19 september 2026) ------------------------------------------- */
.pnl-filterbalk--adresboek > label:first-of-type {
  flex: 1 1 18rem;
}

.pnl-tabel--adresboek td {
  vertical-align: top;
}

.pnl-tabel--adresboek .pnl-code {
  display: inline-block;
  margin-top: 3px;
}

.pnl-adresboek__naam {
  display: block;
  font-weight: 700;
  color: var(--pnl-inkt);
  text-decoration: none;
}

.pnl-adresboek__naam:hover {
  color: var(--pnl-accent);
}

.pnl-adresboek__sub {
  display: block;
  font-size: 12.5px;
  color: var(--pnl-inkt-4);
}

.pnl-tabel__acties {
  white-space: nowrap;
  text-align: right;
}

.pnl-tabel__acties .pnl-knop + .pnl-knop {
  margin-left: 6px;
}

/* --- Het factuurscherm als tweeluik (19 september 2026) -------------------------------------
   Leroys mockup: links Aan wie, Regels en Status; rechts Factuurgegevens, Betalen, Crediteren.
   Geen nieuw breekpunt: flex-wrap. De linkerkolom krijgt minstens 40rem, dus de twee staan pas
   naast elkaar als er ruimte is voor een leesbare regelomschrijving (±1260 px venster); anders
   staat rechts onder links, in de volgorde van de HTML. */
.pnl-tweeluik {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.pnl-tweeluik__links {
  flex: 999 1 0;
  min-width: min(100%, 40rem);
}

.pnl-tweeluik__rechts {
  flex: 1 1 var(--pnl-kolom-zij);
  min-width: 0;
}

/* In beide kolommen komt de ruimte uit `gap`. De algemene burenregel (`.pnl-kaart + .pnl-kaart`)
   zou daar 20 px bovenop zetten; en het formulier is een `.pnl-vorm`-grid met een eigen gap. */
.pnl-tweeluik__links,
.pnl-tweeluik__rechts,
.pnl-tweeluik__links > form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pnl-tweeluik .pnl-kaart + .pnl-kaart {
  margin-top: 0;
}

/* De kolomkop boven de factuurregels, in dezelfde maten als `.pnl-regel--aantal`. */
.pnl-kolomkop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.75rem 6rem 4.5rem 6rem 44px;
  gap: 8px;
  padding: 0 2px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pnl-inkt-4);
}

.pnl-kolomkop > :nth-child(n + 2) {
  text-align: right;
}

.pnl-regel__btw {
  padding-inline: 8px;
}

.pnl-regel__totaal {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Subtotaal, één regel per btw-tarief, totaal — rechts onder de regels, zoals op papier. */
.pnl-factuurtotaal {
  display: grid;
  gap: 6px;
  width: min(100%, 18rem);
  margin: 16px 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--pnl-lijn-zacht);
  font-variant-numeric: tabular-nums;
}

.pnl-factuurtotaal__rij {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--pnl-inkt-3);
}

.pnl-factuurtotaal__rij--eind {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--pnl-lijn-zacht);
  font-size: 16px;
  font-weight: 800;
  color: var(--pnl-inkt);
}

/* Factuurgegevens in de rechterkolom: twee velden per rij in de verhoudingen van de mockup
   (btw % smal naast een datum, een datum naast een korte termijn). */
.pnl-gegevens {
  display: grid;
  gap: 12px;
}

.pnl-gegevens__rij {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 10px;
}

.pnl-gegevens__rij > * {
  min-width: 0;
}

.pnl-gegevens__rij--eerst-breed {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

/* Opslaan en Sjabloon naast elkaar, zoals in de mockup: de opslagknop mag krimpen, en het
   sjabloonmenu klapt als een uitklapper onder de knop open in plaats van in de smalle kolom. */
.pnl-gegevens__knoppen {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pnl-gegevens__knoppen > .pnl-knop {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 12px;
}

.pnl-sjabloon {
  position: relative;
  flex: none;
}

.pnl-sjabloon > summary {
  list-style: none;
  cursor: pointer;
}

.pnl-sjabloon > summary::-webkit-details-marker {
  display: none;
}

.pnl-sjabloon__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  width: min(18rem, 80vw);
  padding: 12px;
  border: 1px solid var(--pnl-lijn);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak);
  box-shadow: var(--pnl-schaduw);
}

/* De standaardkosten op een nieuwe factuur: vinkje met prijs, en een smal aantal ernaast. */
.pnl-kosten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem;
  gap: 8px 12px;
  align-items: end;
  margin: 10px 0 14px;
}

.pnl-kosten > * {
  min-width: 0;
}

/* Het adres van een factuur die niet meer te bewerken is: de regeleinden zijn het adres. */
.pnl-adresblok {
  margin: 0;
  white-space: pre-line;
}

/* Afwijkend afleveradres: het veld staat alleen open met het vinkje aan. Kent een browser
   `:has()` niet, dan staat het gewoon open — daarom `@supports` en geen standaard `display: none`. */
.pnl-klantblok__extra {
  display: grid;
  gap: 10px;
}

@supports selector(:has(*)) {
  .pnl-klantblok__extra:not(:has(input[name="afwijkend"]:checked)) .pnl-klantblok__aflever {
    display: none;
  }
}

/* --- De douaneaangifte (19 september 2026, werkorders/douane.py) ---------------------------
   De tabel op de werkorder en het bewerkformulier, voor klant en beheer (site/_douane.html).
   Compact: kleine vakjes in een gecentreerde kolom, geen schermbrede velden. */
.pnl-douane {
  margin: 10px 0 0;
}

.pnl-douane tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--pnl-lijn-veld);
}

.pnl-douanevorm {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.pnl-douanegroep {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pnl-douanegroep legend {
  padding: 0;
  font-weight: 700;
  font-size: 14px;
}

.pnl-douanegroep .pnl-knop {
  margin-top: 8px;
}

/* De omschrijving is tekst en geen getal: links uitgelijnd, en breed genoeg om te lezen. */
.pnl-tabelveld--tekst {
  text-align: left;
  max-width: none;
}

.pnl-tabelveld--kort {
  max-width: 64px;
}

/* Land- en HS-code: tekens, geen bedrag. */
.pnl-tabelveld--code {
  text-align: left;
}

/* Het foute veld is rood (Leroys eis: foutregel bovenaan en het veld gemarkeerd, niets leeg). */
.pnl-tabelveld[aria-invalid="true"] {
  border-color: var(--pnl-fout);
  background: var(--pnl-fout-vlak);
}

.pnl-douane .pnl-fout {
  display: block;
  font-weight: 600;
}

/* Elk pakket zijn eigen tabel, maar dezelfde kolommen: anders verspringen de vakjes per pakket. */
.pnl-douanevorm .pnl-douane {
  table-layout: fixed;
  min-width: 700px;
}

.pnl-douanevorm .pnl-douane th:nth-child(2) {
  width: 96px;
}

.pnl-douanevorm .pnl-douane th:nth-child(3) {
  width: 170px;
}

.pnl-douanevorm .pnl-douane th:nth-child(4) {
  width: 110px;
}

.pnl-douanevorm .pnl-douane th:nth-child(5) {
  width: 180px;
}

.pnl-douanevorm .pnl-douane th:nth-child(6) {
  width: 90px;
}

.pnl-douanewis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

/* Op de telefoon is een tabel met vijf invoervelden onwerkbaar: de omschrijving houdt dan een
   paar millimeter over. Daar wordt elke regel een blokje, met de naam van het veld erboven
   (`data-label`), en zijn de vakjes 44 px hoog zodat ze aan te tikken zijn. Het bestaande
   breekpunt van 52rem: een vijfde breedte is een bron van verschil tussen schermen
   (test_factuurscherm). */
@media (max-width: 52rem) {
  .pnl-douanevorm .pnl-douane {
    display: block;
    min-width: 0;
  }

  .pnl-douanevorm .pnl-douane thead {
    display: none;
  }

  .pnl-douanevorm .pnl-douane tbody {
    display: block;
  }

  .pnl-douanevorm .pnl-douane tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--pnl-lijn);
  }

  .pnl-douanevorm .pnl-douane td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .pnl-douanevorm .pnl-douane td:first-child {
    grid-column: 1 / -1;
  }

  .pnl-douanevorm .pnl-douane td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pnl-inkt-3);
  }

  .pnl-douanevorm .pnl-tabelveld {
    max-width: none;
    height: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- Mijn pakketten (20 september 2026)
   Leroys eigen ontwerp. Bovenaan twee kaarten naast elkaar (het adres bij ons breder dan de
   lijst), daaronder het aanmeldformulier in drie banden. Het formulier was tot dan etalage-markup
   (het leende site.css, calculator.css, offerte.css en offerte.js); nu is het paneel, met compacte
   velden zoals de rest van Mijn DZH. */

.pnl-raster--adres {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* Eén kaart in het raster (geen adres bekend): die mag de hele breedte nemen. */
.pnl-raster--adres > :only-child {
  grid-column: 1 / -1;
}

/* De labeltekst met "(verplicht)" erachter op één regel. `.pnl-vorm label` is een kolom-flex, en
   daarin wordt de span een eigen flex-item: zonder deze omhulling staat "(verplicht)" ónder de
   veldnaam in plaats van erachter. */
.pnl-labeltekst {
  display: block;
}

/* In de smalle rechterkaart mag de statuschip afbreken; op één regel liep hij de kaart uit. */
.pnl-raster--adres .pnl-rij__kop {
  flex-wrap: wrap;
}

.pnl-raster--adres .pnl-chip {
  white-space: normal;
}

.pnl-rij__meting {
  color: var(--pnl-inkt-2);
  font-weight: 600;
}

.pnl-rij__datum {
  margin-left: 8px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--pnl-inkt-4);
}

.pnl-rij--zending .pnl-chip {
  margin-left: 8px;
}

.pnl-pakketvorm {
  display: grid;
  gap: 16px;
}

.pnl-pakketvorm__rij {
  display: grid;
  gap: 14px 16px;
}

.pnl-pakketvorm__rij > * {
  min-width: 0;
}

.pnl-pakketvorm__rij--drie {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr);
}

.pnl-pakketvorm__rij--twee {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

/* Een blok binnen het formulier (de aangifte, douane en verzending): een haarlijn erboven, zodat
   de drie delen van één formulier van elkaar te onderscheiden zijn zonder drie kaarten. */
.pnl-pakketvorm__blok {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--pnl-lijn-zacht);
}

.pnl-pakketvorm__blok > h3,
.pnl-pakketvorm__blokkop > h3 {
  margin: 0;
  font-size: 14.5px;
}

.pnl-pakketvorm__blok > .pnl-klein {
  margin: 0;
}

.pnl-pakketvorm__blokkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pnl-pakketvorm__tweeluik {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}

.pnl-pakketvorm__kolom {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Uitleg achter een klik: de lijst met verboden artikelen, wat "gevaarlijk" betekent, wat een
   EORI-nummer is. Geen `.pnl-uitklap`: dat is het menu in de kop. */
.pnl-meerinfo {
  font-size: 12.5px;
  color: var(--pnl-inkt-3);
}

.pnl-meerinfo > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--pnl-accent);
  list-style: none;
}

.pnl-meerinfo > summary::-webkit-details-marker {
  display: none;
}

.pnl-meerinfo > summary:hover {
  text-decoration: underline;
}

.pnl-meerinfo > p {
  margin: 8px 0 0;
  max-width: 72ch;
  line-height: 1.55;
}

.pnl-meerinfo--inline {
  display: inline-block;
  margin-left: 6px;
  font-weight: 400;
}

.pnl-meerinfo[open].pnl-meerinfo--inline {
  display: block;
  margin: 6px 0 0;
}

/* Een artikelkaart: de omschrijving over de volle breedte, daaronder de getallen op één rij. */
.pnl-artikelen {
  display: grid;
  gap: 12px;
}

.pnl-artikel {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px 14px 14px;
  min-width: 0;
  border: 1px solid var(--pnl-lijn-veld);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak-zacht);
}

.pnl-artikel__kop {
  padding: 0;
  float: left;
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pnl-inkt-3);
}

.pnl-artikel__weg {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--pnl-r);
  background: transparent;
  color: var(--pnl-inkt-4);
  font-size: 15px;
  cursor: pointer;
}

.pnl-artikel__weg:hover {
  background: var(--pnl-accent-zacht);
  color: var(--pnl-inkt);
}

.pnl-artikel__hint {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--pnl-inkt-4);
}

.pnl-artikel__rij {
  display: grid;
  grid-template-columns: 4.5rem 7.5rem 5.75rem minmax(0, 1fr) 8.25rem minmax(5.5rem, auto);
  gap: 10px;
  align-items: start;
}

.pnl-artikel__rij > * {
  min-width: 0;
}

.pnl-artikel__som {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pnl-artikel__somnaam {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pnl-inkt-2);
}

.pnl-artikel__som > strong {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  white-space: nowrap;
}

.pnl-rechts {
  text-align: right;
}

.pnl-artikelvoet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pnl-artikeltotaal {
  margin: 0 0 0 auto;
  font-size: 13.5px;
  color: var(--pnl-inkt-2);
  font-variant-numeric: tabular-nums;
}

.pnl-artikeltotaal > strong {
  margin-left: 8px;
  font-size: 15px;
  color: var(--pnl-inkt);
}

/* Een groep vinkjes met een eigen kopje (gevaarlijke goederen, extra's). */
.pnl-vinkgroep {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pnl-vinkgroep > legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pnl-inkt-2);
}

.pnl-vinkrij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pnl-vorm .pnl-vink--pil {
  align-items: center;
  padding: 9px 14px;
  max-width: none;
  font-weight: 500;
}

.pnl-vorm .pnl-vink--vol {
  max-width: none;
  font-weight: 600;
}

@media (max-width: 52rem) {
  .pnl-raster--adres,
  .pnl-pakketvorm__rij--drie,
  .pnl-pakketvorm__rij--twee,
  .pnl-pakketvorm__tweeluik {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Op een telefoon: aantal, prijs en valuta op één rij, daaronder herkomst, HS-code en het
     subtotaal elk op een eigen regel. */
  .pnl-artikel__rij {
    grid-template-columns: 4.5rem minmax(0, 1fr) 5.75rem;
  }

  .pnl-artikel__rij > :nth-child(n + 4) {
    grid-column: 1 / -1;
  }

  .pnl-artikel__som {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .pnl-artikel__som > strong {
    min-height: 0;
  }

  .pnl-artikel__weg {
    width: 44px;
    height: 44px;
    top: 2px;
    right: 2px;
  }
}

/* ---------------------------------------------------------------- wegen en meten op de werkorder
   (beheer, 20 september 2026). Per pakket een uitklap met gewicht, maten en foto's: dicht zodra er
   een meting staat, open zolang die ontbreekt bij een pakket dat binnen is. */
.pnl-meting {
  margin-top: 8px;
  font-size: 13px;
}

.pnl-meting > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--pnl-accent);
}

.pnl-meting__vorm {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--pnl-lijn-zacht);
  border-radius: var(--pnl-r);
  background: var(--pnl-vlak-zacht);
}

.pnl-meting__rij {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 12rem);
  gap: 12px;
}

.pnl-meting__rij > * {
  min-width: 0;
}