/* ==========================================================================
   ontwerp.css : de gedeelde stijlregels en componenten van de herbouw (4 oktober 2026)

   Afgeleid van het goedgekeurde layoutvoorbeeld (docs/reviews/LAYOUT-EN-GEBRUIKERSSCHERMEN.md).
   Eén bron voor kleuren, maten en componenten: navigatie, schermkop, filters, kaarten, tabellen,
   formulieren, statussen en bevestigingen. Een scherm bouwt zijn onderdelen met `NX` (ontwerp.js) en
   schrijft zelf geen kleuren, schaduwen of kaders. Alles hangt onder `.nx`, zodat de oudere schermen
   ongemoeid blijven tot ze zelf aan de beurt zijn; daarna kan style.css/opmaak.css krimpen.
   ========================================================================== */
.nx{--nx-brand:#17353b;--nx-lime:#e8e125;--nx-sand:#e0dac4;--nx-bg:#f5f6f3;--nx-paper:#fff;--nx-text:#17353b;--nx-muted:#53676d;
  --nx-line:#d9e1de;--nx-ok:#24613d;--nx-okbg:#edf5ee;--nx-warn:#865300;--nx-warnbg:#fff5df;--nx-error:#a62c2c;--nx-errorbg:#fbeeee;
  --nx-radius:14px;--nx-raak:44px;
  color:var(--nx-text);font:var(--nx-tekst)/1.5 "Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;
  max-width:none;margin:0;padding:8px 4px 40px;text-align:left}
.nx :is(h1,h2,h3,p,label,th,td,summary,button,select,input,textarea,.eyebrow,.kpi-label){text-transform:none;letter-spacing:normal;font-family:inherit}
.nx :is(p,label,th,td,summary){font-size:inherit;font-weight:inherit;line-height:inherit}
.nx *,.nx *::before,.nx *::after{box-sizing:border-box}
.nx h1,.nx h2,.nx h3,.nx p{margin:0}
.nx h1{font-size:30px;line-height:1.25;letter-spacing:-.035em;font-weight:700}
.nx h2{font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:650}
.nx h3{font-size:var(--nx-tekst);font-weight:650}
.nx p+p{margin-top:12px}
.nx a{color:var(--nx-brand);text-underline-offset:3px}
.nx .muted{color:var(--nx-muted)}.nx .small{font-size:var(--nx-tekst)}.nx .num{text-align:right;white-space:nowrap}
.nx .verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* knoppen: één hoofdactie per context (.primary), de rest rustig */
.nx button{font:inherit;min-height:var(--nx-raak);padding:10px 16px;border:1px solid var(--nx-line);border-radius:9px;background:#fff;
  color:var(--nx-brand);font-weight:600;cursor:pointer;touch-action:manipulation;box-shadow:none}
.nx button:hover{background:#f1f4f0}
.nx button.primary{background:var(--nx-brand);color:#fff;border-color:var(--nx-brand)}
.nx button.primary:hover{background:#234b51}
.nx button.danger{color:var(--nx-error);border-color:#e3b9b9}
.nx button.quiet{border:0;background:transparent;padding:8px 0;text-decoration:underline;min-height:var(--nx-raak)}
.nx button.big{min-height:60px;font-size:18px;padding:16px 22px}
.nx button.full{width:100%}
.nx button[disabled]{opacity:.55;cursor:default}
.nx :is(button,a,input,select,summary,textarea):focus-visible{outline:3px solid var(--nx-brand);outline-offset:3px}

/* statussen: altijd tekst, nooit enkel kleur */
.nx .badge{display:inline-block;padding:4px 10px;border-radius:7px;font-size:var(--nx-tekst);font-weight:600;background:#eef2f0;color:var(--nx-muted)}
.nx .badge.ok{background:var(--nx-okbg);color:var(--nx-ok)}
.nx .badge.warn{background:var(--nx-warnbg);color:var(--nx-warn)}
.nx .badge.error{background:var(--nx-errorbg);color:var(--nx-error)}

/* schermkop en filters */
.nx .heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}
.nx .heading p{margin-top:6px;color:var(--nx-muted)}
.nx .eyebrow{font-size:var(--nx-tekst);font-weight:600;color:var(--nx-muted);margin-bottom:5px}
.nx .filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:24px}
/* lange lijsten (.520): een echte lijst in de pagina, niet in een eigen scrolvak; enkel op een smal scherm schuift de tabel zijwaarts */
.nx .lijstvrij{overflow-x:auto}.nx .lijstvrij table{margin:0}
.nx .lijstbalk{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:8px 0 10px}.nx .lijstbalk .veld{margin:0}
.nx .pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0}
.nx .filters label,.nx .veld{font-size:var(--nx-tekst);display:grid;gap:5px;color:var(--nx-muted)}
.nx :is(select,input,textarea){font:inherit;min-height:var(--nx-raak);background:#fff;border:1px solid var(--nx-line);border-radius:8px;padding:10px 12px;color:var(--nx-text);max-width:100%}
.nx .veld input,.nx .veld select{width:100%}

/* cijferkaarten en vlakken */
.nx .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.nx .kpi{background:var(--nx-paper);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:20px;display:block;color:inherit;text-decoration:none}
.nx a.kpi:hover{border-color:#7d9993}
.nx .kpi-label{font-size:var(--nx-tekst);color:var(--nx-muted);font-weight:600}
.nx .kpi-value{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.04em;margin:10px 0}
.nx .kpi-unit{font-size:var(--nx-tekst);font-weight:500;letter-spacing:0}
.nx .kpi-note{font-size:var(--nx-tekst);color:var(--nx-muted)}
.nx .grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;margin-bottom:24px}
.nx .panel{background:#fff;border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:24px;min-width:0}
.nx .panel+.panel{margin-top:24px}.nx .grid>.panel+.panel{margin-top:0}
.nx .panel-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}
.nx .attention{border:1px solid #e5d6a7;background:var(--nx-warnbg);border-radius:10px;padding:16px 20px;margin-bottom:24px;display:flex;gap:18px;align-items:center;justify-content:space-between}
.nx .attention p{font-size:var(--nx-tekst);color:#67471a;margin-top:4px}
.nx .stack{display:grid;gap:14px}
.nx .action-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--nx-line)}
.nx .action-row:last-child{border:0;padding-bottom:0}
.nx .action-row p{margin-top:4px;font-size:var(--nx-tekst);color:var(--nx-muted)}
.nx .costline{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--nx-line);gap:12px}
.nx .costline:last-child{border:0;font-weight:700}
.nx .meter{background:#e5ece6;border-radius:8px;height:9px;overflow:hidden;margin:10px 0}.nx .meter span{display:block;background:#467d5e;height:100%}
.nx .flow{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.nx .flow-item{padding:12px 15px;background:#f4f6f2;border-radius:9px;flex:1;min-width:130px}
.nx .flow-item strong{display:block;font-size:23px}.nx .flow-item span{font-size:var(--nx-tekst);color:var(--nx-muted)}
.nx .statusbox{border-left:4px solid #e6ab39;padding-left:18px;margin:20px 0}

/* tabellen: kolomkoppen rustig, totaalrij vet, op een smal scherm zijdelings scrollbaar binnen de tabel */
.nx .table-wrap{overflow:auto}
.nx table{width:100%;border-collapse:collapse;font-size:var(--nx-tekst)}
.nx th{font-weight:600;color:var(--nx-muted);text-align:left;background:#f6f8f5}
.nx th,.nx td{padding:13px 12px;border-bottom:1px solid var(--nx-line)}
.nx th:first-child,.nx td:first-child{padding-left:0}.nx th:last-child,.nx td:last-child{padding-right:0}
.nx tr.total td{font-weight:700;border-bottom:0;border-top:2px solid var(--nx-line)}
.nx td.missing{color:var(--nx-muted);font-style:italic}

/* details op aanvraag */
.nx details{margin-top:18px;border-top:1px solid var(--nx-line);padding-top:16px}
.nx summary{font-weight:600;min-height:var(--nx-raak);display:flex;align-items:center;gap:8px;cursor:pointer}
.nx summary::before{content:"+";font-size:20px}.nx details[open] summary::before{content:"−"}
.nx details p{margin:12px 0;color:var(--nx-muted);font-size:var(--nx-tekst)}

/* werkkaart en formulieren voor uitvoerders: grote knoppen, weinig velden */
.nx .worker{max-width:760px;margin:0 auto}
.nx .worker .timer{font-size:64px;font-weight:650;letter-spacing:-.045em;line-height:1.2;margin:20px 0 8px}
.nx .worker .state{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nx .worker .buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.nx .fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nx .confirmation{margin-top:14px;background:var(--nx-okbg);color:var(--nx-ok);padding:14px;border-radius:9px}
.nx .errorbox{margin-top:14px;background:var(--nx-errorbg);color:var(--nx-error);padding:14px;border-radius:9px}

/* bevestigingen: dialoog en melding (staan buiten .nx, in body) */
dialog.nx-dialog{border:1px solid #d9e1de;border-radius:16px;padding:28px;max-width:540px;width:calc(100% - 32px);color:#17353b;font:var(--nx-tekst)/1.5 "Plex Sans",system-ui,sans-serif}
dialog.nx-dialog::backdrop{background:#17353b66}
dialog.nx-dialog p{margin:12px 0;color:#53676d}
dialog.nx-dialog label{display:grid;gap:6px;margin-top:18px;font-size:var(--nx-tekst);color:#53676d}
dialog.nx-dialog input{font:inherit;min-height:44px;border:1px solid #d9e1de;border-radius:8px;padding:10px 12px}
dialog.nx-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
dialog.nx-dialog button{font:inherit;min-height:44px;padding:10px 16px;border:1px solid #d9e1de;border-radius:9px;background:#fff;color:#17353b;font-weight:600;cursor:pointer}
dialog.nx-dialog button.primary{background:#17353b;color:#fff;border-color:#17353b}
.nx-toast{position:fixed;bottom:24px;right:24px;max-width:440px;background:#17353b;color:#fff;padding:16px 22px;border-radius:10px;z-index:2000;box-shadow:0 8px 25px #17353b22;font:var(--nx-tekst)/1.4 "Plex Sans",system-ui,sans-serif}
.nx-toast.fout{background:#a62c2c}

@media(max-width:1150px){.nx .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.nx .grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .nx{--nx-raak:48px;padding-bottom:96px}.nx h1{font-size:26px}
  .nx .heading{flex-wrap:wrap;gap:12px;margin-bottom:20px}.nx .heading>button{width:100%}
  .nx .kpis{gap:12px}.nx .kpi{padding:16px}.nx .kpi-value{font-size:28px}.nx .kpi-note{font-size:var(--nx-tekst)}
  .nx .panel{padding:18px}.nx .grid{gap:18px}
  .nx .attention{padding:16px;align-items:flex-start;flex-direction:column}.nx .attention button{width:100%}
  .nx .filters{gap:10px}.nx .filters label{flex:1;min-width:140px}.nx .filters select{width:100%}
  .nx .worker .timer{font-size:54px}.nx .fieldgrid{grid-template-columns:1fr}.nx .worker .buttons{gap:10px}.nx .worker .buttons button{padding:14px 10px}
  .nx .table-wrap td,.nx .table-wrap th{white-space:nowrap}.nx .panel-head{align-items:flex-start}.nx .flow-item{min-width:105px}
  .nx-toast{bottom:82px;left:16px;right:16px}
  .nx table{font-size:var(--nx-tekst)}.nx .table-wrap td,.nx .table-wrap th{padding:8px 7px}
  /* tabel als kaartjes: elke rij onder elkaar, het label van de kolom boven de waarde */
  .nx .stapel{overflow:visible}.nx .stapel table,.nx .stapel tbody,.nx .stapel tr,.nx .stapel td{display:block;width:100%}
  .nx .stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .nx .stapel tr{border:1px solid var(--nx-line,#dfe5dc);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .nx .stapel td{height:auto;white-space:normal!important;border:0;padding:4px 0;text-align:left!important}
  .nx .stapel td::before{content:attr(data-label);display:block;font-size:var(--nx-tekst);color:var(--nx-muted);margin-bottom:2px}
  .nx .stapel td[data-label=""]::before{display:none}
  .nx .stapel td input,.nx .stapel td button{min-height:var(--nx-raak,48px)}
}
@media(prefers-reduced-motion:reduce){.nx *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.nx .costline>span:last-child{white-space:nowrap;text-align:right}

/* inklapbare panelen */
.nx .panel-head{margin-bottom:0}
.nx .panel:not(.dicht) .panel-head{margin-bottom:20px}
.nx .paneeltoggle{flex:1;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:transparent;padding:0;min-height:var(--nx-raak);color:inherit;font:inherit}
.nx .paneeltoggle:hover{background:transparent}
.nx .paneeltoggle::after{content:"";width:9px;height:9px;border-right:2px solid var(--nx-muted);border-bottom:2px solid var(--nx-muted);transform:rotate(45deg);margin:-4px 0 0 4px;transition:transform .15s}
.nx .panel.dicht .paneeltoggle::after{transform:rotate(-45deg);margin-top:0}
.nx .panel-rechts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nx .panel-body[hidden]{display:none}
/* bronstukken */
.nx a.stuklink{white-space:nowrap}
dialog.nx-dialog .stukken{display:grid;gap:8px;margin-top:12px}
dialog.nx-dialog .stukrij{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid #d9e1de;border-radius:9px;color:#17353b;text-decoration:none}
dialog.nx-dialog .stukrij:hover{background:#f1f4f0}
dialog.nx-dialog .stukrij span{font-size:var(--nx-tekst);color:#53676d}
dialog.nx-dialog h2{text-transform:none;letter-spacing:-.02em;font:650 20px/1.3 "Plex Sans",system-ui,sans-serif;color:#17353b;margin:0}
.nx .grid{align-items:start}

/* de kost van 1 m³ parels: elke regel klapt open op zijn eigen plaats */
.nx .pk{margin:6px 0 10px}
.nx .pk summary,.nx .pk .pk-vlak{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem 5.5rem 7.5rem 8.5rem;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--nx-line);list-style:none}
.nx .pk summary{cursor:pointer}
.nx .pk summary::-webkit-details-marker{display:none}
.nx .pk summary>span:nth-child(n+2),.nx .pk .pk-vlak>span:nth-child(n+2){text-align:right;white-space:nowrap}
.nx .pk .pk-pijl{display:inline-block;width:1em;color:var(--nx-muted,#667)}
.nx .pk .pk-pijl::before{content:"\25B8"}
.nx .pk details[open]>summary .pk-pijl::before{content:"\25BE"}
.nx .pk .pk-kind{padding-left:22px}
.nx .pk .pk-kind .pk-kind{padding-left:22px}
.nx .pk .pk-kind>summary,.nx .pk .pk-kind.pk-vlak{padding-left:0}
.nx .pk .pk-bron{padding:4px 0 14px 22px}
.nx .pk .pk-kop{font-size:var(--nx-tekst);color:var(--nx-muted,#667);border-bottom-width:2px}
.nx .pk .pk-totaal{border-top:2px solid var(--nx-line);border-bottom:0}
@media (max-width:900px){.nx .pk summary,.nx .pk .pk-vlak{grid-template-columns:minmax(0,1fr) 6.5rem 4.5rem 5.5rem 6.5rem;gap:8px;font-size:var(--nx-tekst)}}
/* het globale plusje of minnetje voor een summary zou een extra rastercel worden: in de kostopbouw staat de pijl zelf in de regel */
.nx .pk details>summary::before,.nx .pk details[open]>summary::before{content:none!important;display:none}
.nx .pk summary{min-height:0}
.nx .pk details{margin:0;padding:0;border:0}
.nx .pk summary .small{font-weight:400}
.nx .pk .pk-bron .costline{padding:8px 0}
.nx .pk .pk-bron table{margin:4px 0}
.nx .pk .pk-calc{padding:8px 0}

/* doorklikken op een lijn: klein, naast de naam, zonder de regel te laten springen */
.nx .pk .pk-ga{font-size:var(--nx-tekst);font-weight:400;margin-left:8px;white-space:nowrap;color:var(--nx-brand)}
.nx .pk .pk-acties{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0}
.nx .pk .pk-acties .pk-ga{margin:0;font-size:var(--nx-tekst)}

/* Hoe is dit berekend (blok bij Verwerking, Kosten): op een telefoon staat de naam van een regel over de volle breedte en de vier cijfers (kost, per zak, per m³, stand) daaronder in twee kolommen, zodat niets buiten beeld valt. Enkel in dit blok: andere pk-lijsten blijven zoals ze waren. */
.eb-lijf{overflow-wrap:break-word}
.nx .eb-blok>summary,.nx .eb-deel>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
@media (max-width:600px){
  .nx .eb-blok .pk summary,.nx .eb-blok .pk .pk-vlak{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px}
  .nx .eb-blok .pk summary>span:first-child,.nx .eb-blok .pk .pk-vlak>span:first-child{grid-column:1/-1}
  .nx .eb-blok .pk summary>span:nth-child(n+2),.nx .eb-blok .pk .pk-vlak>span:nth-child(n+2){white-space:normal}
  .nx .eb-blok .pk .pk-kind{padding-left:10px}
  .nx .eb-blok .pk .pk-bron{padding-left:10px}
}

/* ---------- de gedeelde blokken (6 oktober 2026, public/blokken.js) ----------
   Alle pagina's gebruiken de volle beschikbare werkbreedte; hoofdblokken staan onder elkaar, nooit naast elkaar. Op telefoon en tablet volgt elk blok de beschikbare breedte. */
.wrap,.wrap.breed{max-width:none}
@media (min-width:1100px){.wrap{padding:16px 16px 28px}}
.nx .grid,.nxstapel{grid-template-columns:minmax(0,1fr)!important}
.nxblok{min-width:0}
.nxb-balk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.nxb-balk button{min-height:44px;padding:6px 14px;border:1px solid var(--nx-line,#cfd8d4);background:#fff;border-radius:8px;cursor:pointer;font:inherit}
.nxb-balk button[aria-pressed="true"]{background:var(--nx-okbg,#e6f1ea);border-color:#7d9993}
.nxb-acties{display:inline-flex;gap:4px;margin-left:auto;flex:none}
.nxb-acties[hidden],.nxb-balk [hidden]{display:none}
.nxb-acties button{min-width:44px;min-height:44px;border:1px solid var(--nx-line,#cfd8d4);background:#fff;border-radius:8px;cursor:pointer;font:inherit;line-height:1}
.nxb-hand{cursor:grab}
.nxb-oms{color:var(--nx-muted,#5d6d68);font-size:var(--nx-tekst);font-weight:400;margin-left:10px;text-transform:none;letter-spacing:0}
.nxb-oms:empty{display:none}
.nxb-aanpassen .nxblok{outline:1px dashed #9db3ad;outline-offset:3px;margin-bottom:14px}
.nxb-sleept{opacity:.45}
.nxb-voor{box-shadow:0 -4px 0 #467d5e}
.nxb-na{box-shadow:0 4px 0 #467d5e}
/* een gewone kaart die als blok herkend is: eigen kop, inhoud verbergbaar zonder iets te verwijderen */
.nxkaart>.nxb-orig{display:none}
.nxkaart>.nxb-kop{display:flex;align-items:center;gap:10px;margin:-4px 0 10px;flex-wrap:wrap}
.nxkaart .nxb-toggle{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:6px 0;min-height:40px;font:inherit;color:inherit;cursor:pointer}
.nxkaart .nxb-titel{font-size:19px;font-weight:700}
.nxkaart .nxb-pijl{width:9px;height:9px;border-right:2px solid var(--nx-muted,#5d6d68);border-bottom:2px solid var(--nx-muted,#5d6d68);transform:rotate(45deg);flex:none;align-self:center;margin-right:4px}
.nxkaart.nxb-dicht .nxb-pijl{transform:rotate(-45deg)}
.nxkaart.nxb-dicht>*:not(.nxb-kop){display:none}
.nxkaart.nxb-dicht{padding-bottom:6px}
.nxb-wijzig{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:end;margin:8px 0 12px;padding:12px;border:1px solid var(--nx-line,#cfd8d4);border-radius:10px;background:#f7faf8}
.nxb-wijzig label{display:grid;gap:4px;font-size:var(--nx-tekst)}
.nxb-wijzig input{min-height:44px;padding:8px 10px;border:1px solid var(--nx-line,#cfd8d4);border-radius:8px;font:inherit;max-width:100%}
.nxb-wijzig-knoppen,.nxb-wijzig p{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.nxb-wijzig{grid-template-columns:1fr}}

/* ---------- Vandaag › Werven nakijken en Ritten nakijken (nakijken.js) ---------- */
.nklijst{display:block;width:100%}
.nkfilters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:10px}
.nkfilters label{display:flex;flex-direction:column;gap:2px;font-size:var(--nx-tekst)}
.nkrijen{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nkrij{border:1px solid var(--axis,#d4d9e1);border-radius:8px;background:var(--card,#fff);min-width:0}
.nkkop{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:10px 12px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.nkkop .nknaam{overflow-wrap:anywhere}
.nkkop .nkkort{flex:1 1 260px;min-width:0;overflow-wrap:anywhere}
.nkdetail{padding:4px 12px 12px;border-top:1px solid var(--axis,#d4d9e1)}
.nkreden{padding:10px 0;border-bottom:1px dashed var(--axis,#d4d9e1)}
.nkreden:last-of-type{border-bottom:0}
.nkbundel{padding:10px 0;border-bottom:1px dashed var(--axis,#d4d9e1)}
.nkbundel:last-of-type{border-bottom:0}
.nkbundel .nkreden{margin:4px 0 0 10px;padding:6px 0 6px 12px;border-left:3px solid var(--axis,#d4d9e1);border-bottom:0}
[data-nkinfo],[data-ttinfo]{margin-top:8px}
[data-nkinfo] p,[data-ttinfo] p{margin:2px 0}
.nkvelden{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-top:6px}
.nkvelden label{display:flex;flex-direction:column;gap:2px;font-size:var(--nx-tekst);min-width:0}
.nkvelden input,.nkvelden select{max-width:100%;min-width:0}
.nkvelden .nkvink{flex-direction:row;align-items:center;gap:6px}
.nkimpact{flex:1 1 100%;padding:8px 10px;border-radius:6px;background:var(--warnbg,#fff7e0)}
.nknav{display:flex;gap:10px;align-items:center;margin-top:10px}
.nkbron{margin-top:8px}
@media (max-width:640px){.nkvelden{flex-direction:column;align-items:stretch}.nkkop{padding:12px}}

/* ---------- Relaties › Afspraken (afsprakenbeheer.js): rijen en kaarten, geen brede tabellen ---------- */
.afgroep{margin:0 0 18px}
.afkop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.aflijst{display:flex;flex-direction:column;gap:4px;max-height:420px;overflow:auto}
.afrij{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(160px,1fr) minmax(0,2fr);gap:4px 12px;align-items:center;padding:8px 10px;border:1px solid var(--axis,#d4d9e1);border-radius:8px;background:var(--card,#fff);cursor:pointer;min-height:44px}
.afrij input{width:20px;height:20px}
.afnaam{overflow-wrap:anywhere}
.afmeta{overflow-wrap:anywhere}
.aflijst[data-afvragen]{max-height:none}
@media (max-width:900px),(pointer:coarse){label.afrij.afrij{display:grid;grid-template-columns:auto 1fr;align-items:start}label.afrij.afrij .afmeta{grid-column:1/-1}}
.afrij.afvraag{grid-template-columns:minmax(140px,1fr) minmax(0,2fr) auto;cursor:default}
.afrij.afvraag .btn{white-space:nowrap}
.afvorm{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:10px}
.afvorm label{display:flex;flex-direction:column;gap:2px;font-size:var(--nx-tekst);min-width:0}
.afvorm select,.afvorm input{min-height:42px;max-width:100%;min-width:0}
.afknoppen{display:flex;gap:8px;flex-wrap:wrap}
.afknoppen button{min-height:42px}
.afplan{border:1px solid var(--axis,#d4d9e1);border-radius:8px;background:var(--card,#fff);margin-bottom:6px;min-width:0}
.afplankop{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;width:100%;text-align:left;background:none;border:0;padding:12px;cursor:pointer;font:inherit;min-height:44px}
.afdetail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:4px 12px 12px;border-top:1px solid var(--axis,#d4d9e1)}
.afregel{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--axis,#d4d9e1)}
.afregel span:first-child{overflow-wrap:anywhere}
@media (max-width:640px){.afrij.afvraag{grid-template-columns:1fr}.afrij{grid-template-columns:auto 1fr}.afrij .afmeta{grid-column:1/-1}.afvorm{flex-direction:column;align-items:stretch}.afknoppen button{flex:1 1 140px}}

/* Klantenfiche: de lijst staat als blok boven de fiche, in kolommen en met een eigen schuifvak */
.kflijst{max-height:min(56vh,620px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:0 14px;align-content:start}

.nx-dialog p{white-space:pre-line}

/* ---------- Afspraken: de voorgestelde flow, de afsprakenfiche en het rekenvoorbeeld (tariefafspraak.js, TA 3 tot 5) ---------- */
.ta-label-voorstel{background:var(--nx-lime,#e8e125);color:#17353b;border-color:#c9c21a;font-weight:700}
.ta-label-huidig{background:#eef2f0;color:var(--nx-muted,#53676d);font-weight:700}
.ta-scheiding{margin:18px 0 10px;padding:10px 12px;border-left:4px solid var(--nx-line,#d9e1de);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ta-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ta-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.ta-stappen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.ta-stap{border:1px solid var(--nx-line,#d9e1de);border-radius:12px;padding:14px 16px;background:var(--nx-paper,#fff);min-width:0}
.ta-stap.ta-breed{grid-column:1/-1}
.ta-stap h3,.ta-reken h3,.ta-effect h3,.ta-historie h3,.ta-scenario h3,.ta-klaar h3,.ta-werk h3{display:flex;gap:10px;align-items:center;margin:0 0 8px}
.ta-nr{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--nx-brand,#17353b);color:#fff;align-items:center;justify-content:center;font-size:14px;flex:none}
.ta-stap .veld{display:flex;flex-direction:column;gap:3px;margin:8px 0}
.ta-stap .veld :is(input,select){min-height:44px;max-width:100%;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--nx-line,#d9e1de);border-radius:8px}
.ta-hits{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ta-hit{font-weight:500}
.ta-regel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:8px;align-items:end}
.ta-voorbeeld{margin-top:14px;display:grid;gap:14px}
.ta-effect,.ta-reken,.ta-historie,.ta-scenario,.ta-bevestig,.ta-klaar,.ta-werk,.ta-plan{border:1px solid var(--nx-line,#d9e1de);border-radius:12px;padding:14px 16px;background:var(--nx-paper,#fff);min-width:0}
.ta-scenario{background:#f7f8f5}
.ta-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.ta-drie.ta-een{grid-template-columns:minmax(0,1fr)}
.ta-kol{border:1px solid var(--nx-line,#d9e1de);border-radius:10px;padding:10px 12px;min-width:0;background:#fbfcfb}
.ta-kol h4{margin:0 0 6px;font-size:var(--nx-tekst);text-transform:uppercase;letter-spacing:.04em;color:var(--nx-muted,#53676d)}
.ta-onbekend{background:var(--nx-warnbg,#fff5df)}
.ta-lijnen{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px}
.ta-lijnen li{display:flex;flex-direction:column;gap:0;overflow-wrap:anywhere}
.ta-totaal{font-weight:700;margin-top:6px;overflow-wrap:anywhere}
.ta-hoev{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ta-chip{display:inline-block;padding:3px 10px;border-radius:999px;border:1px solid var(--nx-line,#d9e1de);background:#fff;font-size:var(--nx-tekst)}
.ta-chip.ta-mist{background:var(--nx-warnbg,#fff5df);color:var(--nx-warn,#865300);border-color:#e6c98a}
.ta-ontbreekt,.ta-waarschuwing{background:var(--nx-warnbg,#fff5df);color:var(--nx-warn,#865300);border:1px solid #e6c98a;border-radius:10px;padding:8px 12px;margin-top:8px}
.ta-ontbreekt ul{margin:4px 0 4px 18px;padding:0}
.ta-vink{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
.ta-vink input{width:22px;height:22px;flex:none;margin-top:2px}
.ta-bevestig{display:grid;gap:8px;border-color:var(--nx-brand,#17353b)}
.ta-fiche{display:grid;gap:14px}
.ta-koppen{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ta-kern{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 10px}
.ta-kern dt{font-size:var(--nx-tekst);color:var(--nx-muted,#53676d);text-transform:uppercase;letter-spacing:.04em}
.ta-kern dd{margin:2px 0 0;overflow-wrap:anywhere;font-weight:600}
.ta-werk h4{margin:12px 0 4px;font-size:var(--nx-tekst);color:var(--nx-muted,#53676d)}
.ta-klein{margin:4px 0 4px 18px;padding:0;display:grid;gap:4px}
.ta-waarom{background:#f1f4f0;border-radius:8px;padding:8px 12px}
.ta-details{margin-top:10px}
.ta-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.ta-acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
dialog.ta-venster{max-width:min(920px,calc(100vw - 24px));width:calc(100% - 24px);padding:16px}
dialog.ta-venster .nx.ta{padding:0;background:var(--nx-paper,#fff)}
.ta-sluit{display:flex;justify-content:flex-end;margin-bottom:6px}
.ta-gekozen{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){.ta-stappen{grid-template-columns:minmax(0,1fr)}.ta-drie{grid-template-columns:minmax(0,1fr)}.ta-kern{grid-template-columns:repeat(2,minmax(0,1fr))}.ta-regel{grid-template-columns:minmax(0,1fr)}.ta-stap{padding:12px}
  dialog.ta-venster{padding:10px}}
/* AF 1 en AF 2 (15 oktober 2026): beëindigen, vervangen en historisch herstellen in de fiche van de afspraak */
.ah-blok{border:1px solid var(--nx-line,#d9e1de);border-radius:12px;padding:14px 16px;background:var(--nx-paper,#fff);display:grid;gap:10px;min-width:0}
.ah-blok h3,.ah-effect h3,.ah-bevestig h3{margin:0}
.ah-blok h4{margin:8px 0 2px;font-size:var(--nx-tekst);color:var(--nx-muted,#53676d)}
.ah-uitleg{background:var(--nx-warnbg,#fff5df);color:var(--nx-warn,#865300);border:1px solid #e6c98a;border-radius:10px;padding:10px 12px}
.ah-voorstel{background:#f1f4f0;border-radius:10px;padding:10px 12px}
.ah-tabelwrap{overflow-x:auto;max-width:100%}
.ah-tabel{border-collapse:collapse;width:100%;font-size:var(--nx-tekst)}
.ah-tabel th{text-align:left;font-weight:600;color:var(--nx-muted,#53676d);padding:6px 8px;border-bottom:1px solid var(--nx-line,#d9e1de)}
.ah-tabel td{padding:6px 8px;border-bottom:1px solid #eef2f0;vertical-align:top;overflow-wrap:anywhere}
.ah-tabel tr.ah-let-op td{background:#fffaf0}
.ah-acties{align-items:center}
.ah-meer{display:inline-block}
.ah-meer summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--nx-line,#d9e1de);border-radius:10px;list-style:none}
.ah-koppels{display:grid;gap:10px;margin:10px 0}
.ah-koppel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1.4fr);gap:10px;align-items:end;border:1px solid var(--nx-line,#d9e1de);border-radius:10px;padding:10px 12px}
.ah-koppel .veld,.ah-venstercontent .veld{display:flex;flex-direction:column;gap:3px;margin:6px 0}
.ah-venstercontent .veld :is(input,select){min-height:44px;max-width:100%;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--nx-line,#d9e1de);border-radius:8px}
.ah-venstercontent{display:grid;gap:12px}
.ah-keuze{border:1px solid var(--nx-line,#d9e1de);border-radius:10px;padding:8px 12px;display:grid;gap:8px}
.ah-radio{display:flex;gap:10px;align-items:flex-start}
.ah-radio input{width:22px;height:22px;flex:none;margin-top:3px}
.ah-effect{border:1px solid var(--nx-line,#d9e1de);border-radius:12px;padding:14px 16px;background:#fbfcfb}
.ah-bevestig{display:grid;gap:8px}
.ta-niet-gekozen{color:var(--nx-warn,#865300)}
@media (max-width:760px){
  .ah-koppel{grid-template-columns:minmax(0,1fr)}
  .ah-tabel thead{display:none}
  .ah-tabel,.ah-tabel tbody,.ah-tabel tr,.ah-tabel td{display:block;width:100%}
  .ah-tabel tr{border-bottom:1px solid var(--nx-line,#d9e1de);padding:6px 0}
  .ah-tabel td{border:0;padding:2px 0}
  .ah-tabel td[data-label]::before{content:attr(data-label) ": ";color:var(--nx-muted,#53676d);font-size:var(--nx-tekst)}
}
.ah-venstercontent .ta-vink,.ah-venstercontent .ah-radio,.ah-blok .ta-vink{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin:6px 0}
.ah-venstercontent .ta-vink input,.ah-venstercontent .ah-radio input{width:24px;height:24px;flex:none;margin:2px 0 0}
.ah-venstercontent .ta-vink>span,.ah-venstercontent .ah-radio>span{display:block;min-width:0}
dialog.ta-venster label.ta-vink,dialog.ta-venster label.ah-radio{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin:6px 0;font-size:inherit;color:inherit}
dialog.ta-venster label.ta-vink input,dialog.ta-venster label.ah-radio input{width:24px;height:24px;flex:none;margin:2px 0 0}
dialog.ta-venster label.ah-radio>span{display:block;min-width:0}
/* AF 9: de ene lijst van alle afspraken */
.al-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.al-filters .al-zoek{flex:1 1 220px;min-width:0;margin:0}
.al-filters input[type=search]{width:100%;min-height:44px;font:inherit;padding:8px 10px;border:1px solid var(--nx-line,#d9e1de);border-radius:8px}
.al-n{opacity:.75}
.al-tabelbox{overflow-x:auto}
.al-tabel{width:100%;border-collapse:collapse}
.al-tabel th{text-align:left;font-size:var(--nx-tekst);color:var(--nx-muted,#53676d);padding:6px 8px;border-bottom:1px solid var(--nx-line,#d9e1de)}
.al-tabel td{padding:8px;border-bottom:1px solid var(--nx-line,#d9e1de);vertical-align:top}
.al-tabel tr[hidden]{display:none}
.al-controle{margin:6px 0 0;padding-left:16px}
.al-fiche>td{background:#fbfcfb;padding:12px 8px}
.ap-geavanceerd{margin:18px 0;border:1px solid var(--nx-line,#d9e1de);border-radius:12px;padding:6px 14px}
.ap-geavanceerd>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
@media (max-width:760px){
  .al-tabel thead{display:none}
  .al-tabel,.al-tabel tbody,.al-tabel tr,.al-tabel td{display:block;width:100%}
  .al-tabel tr.al-rij{border:1px solid var(--nx-line,#d9e1de);border-radius:10px;padding:8px;margin:8px 0}
  .al-tabel td{border:0;padding:2px 0}
  .al-tabel td[data-label]::before{content:attr(data-label) ": ";color:var(--nx-muted,#53676d);font-size:var(--nx-tekst)}
  .al-tabel td.al-open{padding-top:6px}
  .al-tabel tr.al-fiche{border:0;margin:0}
  .al-tabel tr[hidden]{display:none}
}
.al-zoek .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* het levende effect in elke afsprakenpopup (afspraakherstel.js, live): kort effect, echte controles met oplossingen */
.ahl-blok{display:grid;gap:8px;margin:10px 0}
.ahl-oud{opacity:.55}
.ahl-effect p{margin:4px 0}
.ahl-wijz{margin:4px 0 0;padding-left:18px}
.ahl-meer summary{cursor:pointer;min-height:36px;display:inline-flex;align-items:center}
.ahl-probleem{border-radius:9px;padding:10px 12px;margin:0}
.ahl-probleem p{margin:0 0 6px}
#kvenster .errorbox,.ah-venstercontent .errorbox{background:var(--nx-errorbg,#fdeceb);color:var(--nx-error,#9b1c1c);border-radius:9px;padding:10px 12px;margin:8px 0}
#kvenster .notitie,.ah-venstercontent .notitie{background:var(--nx-warnbg,#fff5df);color:var(--nx-warn,#865300);border-left:3px solid #e6c98a;border-radius:0 8px 8px 0;padding:8px 12px;margin:8px 0}
.ahl-oplossingen{display:flex;flex-wrap:wrap;gap:8px}
.ahl-oplossingen select,.ah-wat select{min-height:44px;max-width:100%;font:inherit;padding:6px 10px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit}
.ahl-oplossingen,.ah-wat{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.ah-datums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ah-koppel-periode{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:640px){.ah-koppel-periode{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){#kvenster .errorbox,.ah-venstercontent .errorbox{background:#3a1a1a;color:#ffb4ab}#kvenster .notitie,.ah-venstercontent .notitie{background:#3a2f12;color:#f3d28a}}