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

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

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

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

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

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

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

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

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

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