/* 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);

  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: geen gecentreerde kolom maar de hele resterende breedte — een tabel
   met acht kolommen heeft die nodig. `min-width: 0` staat hierboven 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: none;
  margin: 0;
  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;
}

.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 {
  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;
}

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

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

.pnl-raster > * {
  min-width: 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;
}

.pnl-stap__balk {
  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;
  }
}

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

  .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);
  }
}

/* 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 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;
}

.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);
}

/* Kop links, terzijde rechts — en op een smal scherm onder elkaar. */
.pnl-stap__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.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;
}

/* Eén opbouwregel: omschrijving, bedrag, weg. Het bedrag heeft een vaste breedte zodat de
   komma's onder elkaar staan; op een telefoon valt de regel om en krijgt alles volle breedte. */
.pnl-regel {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pnl-regel input {
  min-width: 0;
  flex: 1 1 auto;
}

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

.pnl-regel__weg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--pnl-r-rond);
  border: 1px solid var(--pnl-lijn);
  background: var(--pnl-vlak);
  color: var(--pnl-inkt-4);
  cursor: pointer;
  line-height: 1;
}

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

/* 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;
}

@media (max-width: 40rem) {
  .pnl-regel {
    flex-wrap: wrap;
  }

  .pnl-regel__bedrag {
    flex: 1 1 120px;
    text-align: left;
  }
}

/* --- 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));
  }
}

/* --- 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 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);
}