/* ============================================================
   Herbruikbare patronen binnen richting A (ontwerp I en J)
   - StatusLabel: een vaste set statussen, kleur volgt de betekenis
   - Tabel: .tbl met plakkende kop, hover, selectie, rijacties en totaal
   - SelectieBalk: zwevende balk onder de tabel bij een selectie
   - Zijpaneel: bewerken van rechts, met wijzigingenteller en vaste knoppen
   Alleen bestaande tokens; licht en donker via de tokens.
   ============================================================ */

/* ---------------- StatusLabel ---------------- */
/* --stl-c kleurt de stip en het vlak; --stl-t (alleen gezet bij wacht en goed) is de tekstkleur (h137, vraag 346) */
.stl { --stl-c: var(--text-2); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; color: var(--stl-t, var(--stl-c)); background: color-mix(in srgb, var(--stl-c) 11%, transparent); }
.stl > i { width: 6px; height: 6px; border-radius: 50%; background: var(--stl-c); flex-shrink: 0; }
.stl--klein { padding: 2px 8px; font-size: 11px; }
/* betekenisgroepen */
.stl--neutraal { --stl-c: color-mix(in srgb, var(--text-2) 88%, var(--text)); }
/* nog niet begonnen: open ring in plaats van een volle stip */
.stl--neutraal > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--stl-c); }
.stl--wacht { --stl-c: color-mix(in srgb, var(--amber) 70%, var(--text)); --stl-t: var(--amber-tekst); }
.stl--lopend { --stl-c: var(--steel); }
.stl--besluit { --stl-c: var(--brand); }
/* groen blijft groen (beslisvraag 22), maar de tekst mengt licht met de tekstkleur: puur --pos op
   de eigen tint haalde in licht maar 3,7 contrast, nu 4,5 of hoger (DESIGNSYSTEEM-24) */
.stl--goed { --stl-c: color-mix(in srgb, var(--pos) 80%, var(--text)); --stl-t: var(--pos-tekst); }
.stl--fout { --stl-c: var(--neg); }
.stl--gedempt { --stl-c: var(--text-3); }
.stl--gedempt > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--stl-c); }
[data-theme="dark"] .stl--wacht { --stl-c: var(--amber); }
[data-theme="dark"] .stl--goed { --stl-c: var(--pos); }
[data-theme="dark"] .stl--neutraal { --stl-c: var(--text-2); }
[data-theme="dark"] .stl--lopend { --stl-c: color-mix(in srgb, var(--steel) 70%, var(--text)); }
[data-theme="dark"] .stl--besluit { --stl-c: color-mix(in srgb, var(--brand) 55%, var(--text)); }
[data-theme="dark"] .stl { background: color-mix(in srgb, var(--stl-c) 15%, transparent); }
/* op een gekleurde of donkere balk: eigen vlak zodat de tekst leesbaar blijft (contrast 4.5 of hoger) */
.stl.stl--opvlak { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stl-c) 40%, transparent); }

/* ---------------- Tekst in amber of groen (h137, vraag 346) ---------------- */
/* Veel schermen zetten de tekstkleur los in het element (style="color: var(--amber)" of var(--pos)),
   onder meer via Tag, KpiTegel en CerpFormaat.resultaatStand. Die tekst krijgt hier de tekstvariant,
   zodat geen scherm apart aangepast hoeft te worden. Een los svg-icoon houdt de basiskleur. */
:not(svg)[style^="color: var(--amber)"], :not(svg)[style*="; color: var(--amber)"] { color: var(--amber-tekst) !important; }
:not(svg)[style^="color: var(--pos)"], :not(svg)[style*="; color: var(--pos)"] { color: var(--pos-tekst) !important; }

/* ---------------- KpiTegel (patronen.jsx) ---------------- */
/* Toelichting onder het getal; ontbrekende waarde staat hier ("Nog niet beschikbaar"), niet als getal. */
.kpi__toel { font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
.kpi--leeg .kpi__foot { margin-top: 12px; }
/* Nadruktegel (.kpi--accent): de doorschijnende merkvulling mengde met de paginakleur tot grijs en oogde
   uitgeschakeld (DESIGNSYSTEEM-12). Nu het gewone tegelvlak, getal in merkkleur en een merklijn bovenaan. */
.kpi.kpi--accent { background-color: var(--surface); background-image: linear-gradient(180deg, var(--sheen), transparent 42%); border-color: transparent; box-shadow: inset 0 2px 0 var(--brand), var(--shadow); }
.kpi.kpi--accent .kpi__num { text-shadow: none; }
.kpi-strip--raster .kpi.kpi--accent { box-shadow: none; }
/* Gekozen filterstand: merkrand in plaats van een grijze vulling die uitgeschakeld oogt. */
.kpi.is-actief { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow); }
.kpi-strip--raster .kpi.is-actief { box-shadow: inset 0 -2px 0 var(--brand); }
.kpi--clk:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* trendchip breekt niet over drie regels in een smalle tegel */
.kpi__delta { white-space: nowrap; }
/* Tegel met een naam of datum als waarde in plaats van een getal: kleiner getalvlak, zodat de tekst past. */
.kpi--tekst .kpi__num { font-size: 19px !important; }
/* Smalle tegel (zes naast elkaar, of een strook in een smalle kolom): het getal krimpt mee met de
   tegel in plaats van eruit te lopen. De tegel is de maat, niet het scherm. */
.kpi-strip > .kpi { container-type: inline-size; }
@container (max-width: 210px) { .kpi__num { font-size: 23px !important; } .kpi--tekst .kpi__num { font-size: 17px !important; } }
@container (max-width: 170px) { .kpi__num { font-size: 20px !important; } .kpi--tekst .kpi__num { font-size: 15px !important; } }
/* Smalle tegel: de sparkline in de voet krimpt mee (Spark heeft een viewBox), en een lang label van
   een woord krijgt minder letterafstand zodat het niet uit de tegel loopt. */
.kpi__foot { min-width: 0; }
.kpi__foot > svg { flex: 0 1 auto; min-width: 36px; }
@container (max-width: 170px) { .kpi .kpi__label { letter-spacing: .04em; } }
/* Kolomaantal van een tegelstrook. Breed: standaard vijf, .kpi-strip--4 vier, of een eigen aantal
   via style={{ '--kpi-kol': 3 }}. Zet nooit grid-template-columns inline op een strip: een inline
   kolomaantal wint van de smalle-schermregels hieronder. Smal kijken die regels naar het aantal
   tegels, zodat er geen losse tegel op een eigen rij of lege kolom overblijft. */
.kpi-strip { --kpi-n: 5; grid-template-columns: repeat(var(--kpi-kol, var(--kpi-n)), minmax(0, 1fr)); }
.kpi-strip--4 { --kpi-n: 4; }
@media (max-width: 1180px) {
  .kpi-strip.kpi-strip { grid-template-columns: repeat(var(--kpi-smal, 3), minmax(0, 1fr)); }
  .kpi-strip:has(> :last-child:nth-child(1)) { --kpi-smal: 1; }
  .kpi-strip:has(> :last-child:nth-child(2)) { --kpi-smal: 2; }
  .kpi-strip:has(> :last-child:nth-child(4)) { --kpi-smal: 2; }
}
@media (max-width: 760px) { .kpi-strip:has(> :nth-child(3)) { --kpi-smal: 2; } }
@media (max-width: 480px) { .kpi-strip.kpi-strip { --kpi-smal: 1; } }
/* Telefoon: ook een strook van twee of vier kaarttegels gaat naar een tegel per rij. De regels hierboven die
   naar het aantal tegels kijken wegen zwaarder dan de regel van 480 en hielden zo'n strook op twee kolommen;
   een bedrag op de cent liep dan uit de tegel (overzicht financien, tegel Aanneemsom). De rasterstrook houdt
   zijn eigen indeling. */
@media (max-width: 480px) { .kpi-strip.kpi-strip:not(.kpi-strip--raster) { --kpi-smal: 1; } }
/* Rasterstrook over meer rijen: geen lijn links van de eerste tegel van een rij, wel een lijn tussen de rijen. */
@media (max-width: 1180px) and (min-width: 761px) {
  .kpi-strip--raster:has(> :last-child:nth-child(4)) > .kpi:nth-child(3) { border-left: 0; }
  .kpi-strip--raster:has(> :last-child:nth-child(4)) > .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi-strip--raster:has(> :nth-child(5)) > .kpi:nth-child(3n+1) { border-left: 0; }
  .kpi-strip--raster:has(> :nth-child(5)) > .kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
}
/* Rasterstrook op 760 en smaller (twee kolommen): ook hier geen lijn links van de eerste tegel van een rij en wel
   een lijn tussen de rijen. Zonder deze regels stond de lijn links van de tweede rij en ontbrak de lijn ertussen. */
@media (max-width: 760px) {
  .kpi-strip.kpi-strip--raster > .kpi:nth-child(odd) { border-left: 0; }
  .kpi-strip.kpi-strip--raster > .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* Telefoon: een rasterstrook met bedragen op de cent (.kpi-strip--bedragen) gaat naar een tegel per rij. In een
   halve telefoonbreedte brak een bedrag van een miljoen of meer af na het euroteken (projectoverzicht, tegel
   Aanneemsom) en stond een tegel met twee bedragen op drie regels (meer- en minderwerk, tegel Tekengrenzen). Een
   rasterstrook zonder die klasse houdt zijn eigen indeling. Staat een rasterstrook op een kolom (deze klasse, of
   een ander aantal tegels dan twee of vier), dan een lijn tussen de tegels en geen lijn links. */
@media (max-width: 480px) {
  .kpi-strip.kpi-strip--raster.kpi-strip--bedragen { --kpi-smal: 1; }
  .kpi-strip.kpi-strip--raster.kpi-strip--bedragen > .kpi + .kpi,
  .kpi-strip.kpi-strip--raster:not(:has(> :last-child:nth-child(2), > :last-child:nth-child(4))) > .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------- LegeToestand (patronen.jsx) ---------------- */
/* kort: een zin; uitgebreid gebruikt .emptystate (platform.css) met .lt */
.lt-kort { margin: 0; padding: 12px 2px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.lt-kort b { font-weight: 600; color: var(--text); }
.lt .btn:disabled { opacity: .5; cursor: not-allowed; }
/* meer dan een actie: naast elkaar, op een smal scherm onder elkaar */
.lt__acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.lt__acties .btn { margin-top: 0; }
/* met binnenmarge: geen resultaat in een zoekkiezer, een popover of een kaart zonder binnenmarge */
.lt-kort--in { padding: 16px 18px; }
/* kaal: uitgebreide lege toestand binnen een kaart of paneel, zonder eigen rand en vlak */
.emptystate.lt--kaal { border: none; background: transparent; }
/* compact: uitgebreid in een paneel of lijst (detailpaneel, tabelruimte, zijlijst) */
.emptystate.lt--compact { gap: 6px; padding: 30px 18px; }
.lt--compact .emptystate__ic { width: 40px; height: 40px; border-radius: 12px; }
.lt--compact .emptystate__title { font-size: 14px; }
.lt--compact .emptystate__body { font-size: 12.5px; }

/* ---------------- Tabel ---------------- */
/* Kaart met rand. overflow: clip (geen scrollcontainer), zodat de kop kan plakken
   aan .main__scroll. Brede tabellen: zet .tbl--breed, dan scrolt de kaart zelf opzij. */
.tbl { --tbl-kop-top: 0px; --tbl-kop-bg: var(--bg-2); background: var(--surface); border: 1px solid var(--line); border-radius: min(var(--radius), 16px); overflow: clip; }
.tbl--breed { overflow-x: auto; }
/* plakt onder de menubalk van het scherm als die (ingeklapt) bovenaan blijft staan */
.main__scroll:has([data-wb-plak]) .tbl { --tbl-kop-top: 52px; }
.main__scroll:has(.bpl-tabs) .tbl { --tbl-kop-top: 48px; }
/* Onder een zwevende menubalk: de strook boven de plakkende kop in de paginakleur, zodat er geen
   rijen tussen menubalk en kop doorheen schemeren (de kaart knipt de strook op zijn eigen breedte). */
.main__scroll:has([data-wb-plak]) .tbl { --tbl-kop-top: 56px; }
.main__scroll:has([data-wb-plak]) .tbl__kop th:first-child::before { content: ''; position: absolute; left: -1px; bottom: 100%; width: 400vw; height: var(--tbl-kop-top); background: var(--bg); pointer-events: none; }
/* Een brede tabel scrolt zelf opzij en is daarmee zijn eigen scrollvlak: de kop staat daar bovenaan,
   niet 56 px lager over de eerste rijen heen. */
.main__scroll .tbl.tbl--breed { --tbl-kop-top: 0px; }
/* Tabel binnen een kaart zonder binnenmarge (Card pad 0): de kaart geeft rand en hoeken, de tabel
   alleen de lijn boven de kop. Cellen met meerdere regels of knoppen lijnen bovenaan uit. */
.tbl--inkaart { border-width: 1px 0 0; border-radius: 0; background: transparent; }
.tbl--inkaart .tbl__rij > td { vertical-align: top; }
/* Bewerktabel (invoervelden in de cellen): lagere rijen, het veld zelf geeft de hoogte. */
.tbl--bewerk .tbl__rij > td { padding-top: 6px; padding-bottom: 6px; }
.tbl table, table.tbl__t { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl__kop th,
.tbl__kop:not(thead) { position: sticky; top: var(--tbl-kop-top); z-index: 3; background: var(--tbl-kop-bg); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-align: left; white-space: nowrap; }
.tbl__kop th { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.tbl__kop th:first-child { padding-left: 18px; }
.tbl__kop th:last-child { padding-right: 18px; }
.tbl__rij > td { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text); vertical-align: middle; transition: background .12s; }
.tbl__rij:first-child > td { border-top: 0; }
.tbl__rij > td:first-child { padding-left: 18px; }
.tbl__rij > td:last-child { padding-right: 18px; }
.tbl__rij:hover > td { background: color-mix(in srgb, var(--bg-2) 45%, var(--surface)); }
.tbl__rij.is-gekozen > td { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.tbl__rij.is-gekozen:hover > td { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.tbl__sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.tbl__zacht { color: var(--text-2); }
/* getallen: rechts, gelijke cijferbreedte */
.tbl__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* matrixkolom (vinkje, keuze of dag per zone): gecentreerd */
.tbl__mid { text-align: center !important; font-variant-numeric: tabular-nums; }
/* selectiekolom */
.tbl__kies { width: 44px; padding-right: 0 !important; }
[data-theme="dark"] .tbl__kies input, [data-theme="dark"] .zp__vink input { color-scheme: dark; }
.tbl__kies:has(input[type="checkbox"]) { cursor: pointer; } /* h37: hele cel klikbaar, zie patronen.jsx */
.tbl__kies input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
/* rijacties: zichtbaar bij hover, bij focus in de rij en bij een gekozen rij */
.tbl__acties { text-align: right; white-space: nowrap; }
.tbl__acties > * { opacity: 0; transition: opacity .12s; }
.tbl__acties > * + * { margin-left: 6px; }
.tbl__rij:hover .tbl__acties > *,
.tbl__rij:focus-within .tbl__acties > *,
.tbl__rij.is-gekozen .tbl__acties > *,
.tbl__acties > .is-altijd { opacity: 1; }
@media (hover: none) { .tbl__acties > * { opacity: 1; } }
.tbl__actie { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--brand); color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.tbl__actie:hover { filter: brightness(1.08); }
.tbl__actie--rand { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tbl__actie--rand:hover { filter: none; box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.tbl__actie:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.tbl__actie:focus-visible, .tbl__kies input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* totaalregel */
.tbl__totaal td,
.tbl__totaal:not(tfoot):not(tr) { padding: 13px 14px; border-top: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg-2) 40%, var(--surface)); font-size: 13px; font-weight: 500; color: var(--text); }
.tbl__totaal td:first-child { padding-left: 18px; }
.tbl__totaal td:last-child { padding-right: 18px; }
.tbl__totaal .tbl__zacht { font-weight: 400; }
/* alleen voor schermlezers (kopnaam van de actiekolom) */
.tbl__verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl__leeg { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--text-2); }

/* ---------------- SelectieBalk ---------------- */
.selbalk { position: sticky; bottom: 20px; z-index: 20; display: flex; align-items: center; gap: 14px; width: fit-content; max-width: calc(100% - 32px); margin: 14px auto 0; padding: 10px 12px 10px 20px; border-radius: 14px; background: var(--text); color: var(--surface); box-shadow: var(--shadow-lg); font-size: 13px; animation: selbalk-in .16s ease; }
.selbalk__n { font-weight: 500; white-space: nowrap; }
.selbalk__s { color: color-mix(in srgb, var(--surface) 72%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.selbalk__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selbalk__knop { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--surface) 32%, transparent); background: transparent; color: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.selbalk__knop:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 10%, transparent); }
.selbalk__knop--hoofd { border-color: var(--surface); background: var(--surface); color: var(--text); font-weight: 500; }
.selbalk__knop--hoofd:hover:not(:disabled) { background: color-mix(in srgb, var(--surface) 88%, var(--text)); }
.selbalk__knop:disabled { opacity: .5; cursor: not-allowed; }
.selbalk__knop:focus-visible, .selbalk__wis:focus-visible { outline: 2px solid var(--surface); outline-offset: 2px; }
.selbalk__wis { width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 12%, transparent); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.selbalk__wis:hover { background: color-mix(in srgb, var(--surface) 22%, transparent); }
@keyframes selbalk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .selbalk { flex-wrap: wrap; gap: 10px; } }

/* ---------------- Zijpaneel ---------------- */
.zp__laag { position: fixed; inset: 0; z-index: 300; background: color-mix(in srgb, var(--text) 16%, transparent); animation: zp-laag-in .16s ease; }
[data-theme="dark"] .zp__laag { background: rgba(0,0,0,.5); }
.zp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 301; width: 540px; max-width: 100vw; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); animation: zp-in .2s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 720px) { .zp { width: 100vw; border-left: 0; } }
@keyframes zp-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zp-laag-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zp, .zp__laag, .selbalk { animation: none; } }
/* de reviewknop (rechtsonder) mag de knoppenbalk van het paneel niet afdekken */
body:has(.zp) .cerp-rv-knop { right: 556px !important; }
@media (max-width: 720px) { body:has(.zp) .cerp-rv-knop { right: 16px !important; bottom: 80px !important; } }
.zp__kop { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.zp__kopl { flex: 1; min-width: 0; }
.zp__kicker { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.zp__titel { margin: 4px 0 6px; font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.zp__stand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.zp__stand > i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.zp__stand.is-gewijzigd { color: var(--amber-tekst); }
[data-theme="dark"] .zp__stand.is-gewijzigd { color: var(--amber); }
.zp__stand.is-gewijzigd > i { background: var(--amber); }
.zp__x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.zp__x:hover { border-color: var(--brand); color: var(--brand); }
.zp__lijf { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.zp__voet { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 40%, var(--surface)); flex-shrink: 0; }
.zp__hint { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); }
.zp__hint.is-fout { color: var(--neg); }
.zp__knop { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.zp__knop:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.zp__knop--hoofd { padding: 0 18px; border: 0; background: var(--brand); color: #fff; font-weight: 500; }
.zp__knop--hoofd:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
.zp__knop--gevaar { border-color: var(--neg); color: var(--neg); }
.zp__knop--gevaar:hover:not(:disabled) { background: color-mix(in srgb, var(--neg) 10%, var(--surface)); color: var(--neg); border-color: var(--neg); }
.zp__knop:disabled { opacity: .45; cursor: not-allowed; }
.zp__knop:focus-visible, .zp__x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* bevestiging bij sluiten met open wijzigingen, in het paneel zelf */
.zp__bevestig { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 24px; border-top: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); flex-shrink: 0; }
.zp__bevestig p { flex: 1 1 220px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
/* velden */
.zp__sectie { display: flex; flex-direction: column; gap: 12px; }
.zp__sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zp__sectiekop > span { font-size: 12px; font-weight: 600; color: var(--brand); }
[data-theme="dark"] .zp__sectiekop > span { color: color-mix(in srgb, var(--brand) 55%, var(--text)); }
.zp__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .zp__rij { grid-template-columns: 1fr; } }
.zp__veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-2); }
.zp__veldlabel { display: flex; align-items: center; gap: 6px; }
.zp__veldlabel em { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.zp__veld input:not([type="checkbox"]):not([type="radio"]),
.zp__veld select,
.zp__veld textarea { box-sizing: border-box; width: 100%; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.zp__veld textarea { padding: 9px 12px; min-height: 76px; line-height: 1.5; resize: vertical; }
.zp__veld input::placeholder, .zp__veld textarea::placeholder { color: var(--text-3); }
.zp__veld input:focus, .zp__veld select:focus, .zp__veld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.zp__veld.is-gewijzigd input:not([type="checkbox"]), .zp__veld.is-gewijzigd select, .zp__veld.is-gewijzigd textarea { border: 1.5px solid var(--brand); }
.zp__veld.is-fout input:not([type="checkbox"]), .zp__veld.is-fout select, .zp__veld.is-fout textarea { border: 1.5px solid var(--neg); }
.zp__veldfout { font-size: 12px; line-height: 1.4; color: var(--neg); }
.zp__veldhint { font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.zp__vink { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.zp__vink input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.zp__keuzes { display: flex; flex-wrap: wrap; gap: 6px; }
.zp__keuze { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.zp__keuze:hover { border-color: var(--brand); color: var(--brand); }
.zp__keuze[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--text); font-weight: 500; }
.zp__keuze em { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.zp__tekst { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* Termijnstaat (fin-termijnstaat.jsx): btw-grondslag wijkt op smallere schermen, zodat acht kolommen passen. */
@media (max-width: 1360px) { .fts-btwkol { display: none; } }
/* h37: telefoon. Het vinkje staat midden in zijn selectiecel, zodat de hele cel (die klikbaar
   is, zie patronen.jsx) aan beide kanten evenveel tikvlak geeft. */
/* h55: het vinkje in een selectiecel zit in een label (.tbl__kiesvak). Op de desktop doet dat label
   niets (display contents); op de telefoon is het 32 bij 32 px rond het vakje, met negatieve marges
   zodat vakje, cel en regel precies even groot blijven. */
.tbl__kiesvak { display: contents; }
@media (max-width: 600px) {
  .tbl__kies { padding-left: 9px !important; padding-right: 9px !important; text-align: center; }
  .tbl__kiesvak { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px; vertical-align: middle; cursor: pointer; }
}

/* BevestigVenster (patronen.jsx, h135 vraag 501): bevestiging van een handtekening. Alleen tokens,
   dezelfde opbouw als het tekenvenster bij gunningen (cijfers, gevolg, voet met Annuleren en Ja). */
.cmd__overlay.patbev { padding-top: 8vh; }
.patbev__lijf { display: flex; flex-direction: column; gap: 12px; }
/* flex in plaats van grid: een rij die niet vol is rekt op, zodat er geen lege cel overblijft. */
.patbev__cijfers { display: flex; flex-wrap: wrap; gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.patbev__cijfer { flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; background: var(--surface); }
.patbev__cijfer dt { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.patbev__cijfer dd { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.patbev__cijfer dd i { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.patbev__gevolg { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.patbev__gevolg > svg { flex: none; margin-top: 2px; color: var(--text-3); }
.patbev__gevolg > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.patbev__gevolg.is-laatste { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 9%, var(--surface)); color: var(--text); }
.patbev__gevolg.is-laatste > svg { color: var(--amber); }
.patbev__voet { justify-content: space-between; flex-wrap: wrap; }
.patbev__noot { font-size: 12px; color: var(--text-3); }
.patbev__knoppen { display: flex; gap: 10px; margin-left: auto; }
@media (max-width: 600px) {
  .cmd__overlay.patbev { padding-top: 4vh; }
  .patbev__noot { flex-basis: 100%; }
  .patbev__knoppen { width: 100%; }
  .patbev__knoppen .btn { flex: 1 1 0; justify-content: center; }
}