/* Componenten: paneel, cijferstrook, tabel, badge, knop, veld, melding, filter, paginering, details, lege toestand,
   definitielijst, signalen, tabs. Panelen zijn wit met een haarlijn en een zachte schaduw. */

/* ---------- paneel ---------- */
.paneel { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--straal); min-width: 0; }
.paneel-kop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--r-1) var(--r-3); min-height: 56px; padding: var(--r-3) var(--r-5) 0; border-bottom: 1px solid transparent; }
.paneel-kop h2, details.paneel > summary h2 { font-size: var(--t-kop); letter-spacing: -0.005em; font-weight: 620; color: var(--inkt); font-stretch: 100%; overflow-wrap: anywhere; }
.telling { font-size: var(--t-mini); color: var(--inkt-3); font-variant-numeric: tabular-nums; font-weight: 500; }
h2 .telling { margin-left: var(--r-2); text-transform: none; letter-spacing: 0; }
.paneel-sub { font-size: var(--t-mini); color: var(--inkt-3); }
.paneel-kop .meer { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-ui); font-weight: 550; color: var(--inkt-2); text-decoration: none; }
.paneel-kop .meer:hover { color: var(--inkt); text-decoration: underline; }
.paneel-noot, .aantallen { padding: var(--r-3) var(--r-5); border-top: 1px solid var(--lijn-zacht); font-size: var(--t-mini); color: var(--inkt-3); }
.aantallen strong { color: var(--inkt); font-weight: 620; }
.pagina > .aantallen { padding: 0; border: 0; }
.sep { display: inline-block; width: 1px; height: 0.9em; background: var(--lijn-sterk); margin: 0 var(--r-3); vertical-align: -0.1em; }

/* Inhoud van een paneel buiten tabellen en strook: standaard 20 px ingesprongen met ritme; de "bleed"-onderdelen lopen tot de rand. */
.paneel > * { margin-inline: var(--r-5); }
.paneel > * + * { margin-top: var(--r-3); }
.paneel > .paneel-kop + * { margin-top: var(--r-4); }
.paneel > :last-child { margin-bottom: var(--r-4); }
.paneel > :is(.vergelijk-intro, .paneel-kop, .tabel-wrap, .strook, .pager, .paneel-noot, .aantallen, .signaallijst, .dl, .aandeel, .verdeling, .grafiek-blok, .opbouw-balk, .strip, .leeg, details, .bleed, .melding, .blok-rand) { margin-inline: 0; }
.paneel > :is(.tabel-wrap, .strook, .signaallijst, .dl, .aandeel, .verdeling, .grafiek-blok, .opbouw-balk, .strip, .leeg, details, .bleed) { margin-top: 0; }
.paneel > :is(.paneel-kop + .tabel-wrap, .paneel-kop + .dl, .paneel-kop + .signaallijst, .paneel-kop + .leeg) { margin-top: 0; }
.paneel > :is(.tabel-wrap, .pager, .paneel-noot, .aantallen, .signaallijst, .dl, .aandeel, .strook, .leeg, details, .opbouw-balk, .verdeling, .strip, .grafiek-blok, .bleed):last-child { margin-bottom: 0; }
.paneel > :is(.paneel-noot, .aantallen) { margin-top: 0; }
.paneel > .tabel-wrap + :not(.paneel-noot, .pager, .aantallen, details) { margin-top: var(--r-4); }
.paneel > h3 { margin-top: var(--r-5); }
.paneel > .paneel-kop + h3 { margin-top: var(--r-4); }
.paneel > .tabel-wrap:last-child, .paneel > .pager:last-child { border-radius: 0 0 var(--straal) var(--straal); }
.paneel > .tabel-wrap:first-child { border-radius: var(--straal) var(--straal) 0 0; }
.paneel > ul:not([class]) { padding-left: 18px; list-style: disc; }
.leeg { padding: var(--r-6) var(--r-5); color: var(--inkt-3); }

.raster { display: grid; gap: var(--r-5); }
.raster-hoofd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.raster-artikel { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.raster-gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.kolom { display: grid; gap: var(--r-5); min-width: 0; align-content: start; }

/* ---------- cijferstrook (signatuur) ---------- */
/* cijfers naast elkaar, gescheiden door een haarlijn; geen vak in een vak. Alleen het cijfer zelf kan kleuren. */
.strook { display: grid; grid-template-columns: repeat(var(--kolommen, 5), minmax(0, 1fr)); gap: 0; padding: 0; }
.strook-held { grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr)); }
.strook-artikel { grid-template-columns: 1fr 1.2fr repeat(4, minmax(0, 1fr)); }
.strook-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strook-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strook-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* losse vakken; een vak met een rood, geel of groen cijfer kleurt mee */
.strook > div { padding: var(--r-4) var(--r-5); min-width: 0; container-type: inline-size; }
.strook > div + div { border-left: 1px solid var(--lijn-zacht); }
.strook dt { font-size: var(--t-ui); font-weight: 500; letter-spacing: 0; color: var(--inkt-3); }
/* Het cijfer schaalt met het aantal tekens (klasse cijfer-nN, N = tekens inclusief euroteken) en met de breedte van het vak
   (container query-eenheid cqi): een bedrag als € 12.345,67 past dus altijd, op elk scherm en in elke kolombreedte. */
.strook { --cijfer-max: var(--t-cijfer); --tekens: 8; }
.strook .cijfer-groot { --cijfer-max: var(--t-cijfer-groot); }
.strook .cijfer { display: block; margin-top: var(--r-2); font-size: clamp(var(--t-kop), calc(100cqi / (var(--tekens) * 0.66)), var(--cijfer-max)); line-height: 1.05; font-weight: 520; font-stretch: var(--breed-cijfer); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strook .cijfer-groot { font-weight: 540; }
.strook .cijfer-n4 { --tekens: 4; } .strook .cijfer-n5 { --tekens: 5; } .strook .cijfer-n6 { --tekens: 6; } .strook .cijfer-n7 { --tekens: 7; }
.strook .cijfer-n8 { --tekens: 8; } .strook .cijfer-n9 { --tekens: 9; } .strook .cijfer-n10 { --tekens: 10; } .strook .cijfer-n11 { --tekens: 11; }
.strook .cijfer-n12 { --tekens: 12; } .strook .cijfer-n13 { --tekens: 13; } .strook .cijfer-n14 { --tekens: 14; } .strook .cijfer-n15 { --tekens: 15; } .strook .cijfer-n16 { --tekens: 16; }
.strook .cijfer-klein { font-size: clamp(var(--t-kop), 4.5cqi, var(--t-sectie)); letter-spacing: -0.01em; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.strook .cijfer-rood { color: var(--rood); }
.strook .cijfer-amber { color: var(--geel); }
.strook .cijfer-groen { color: var(--groen); }
.strook .euro { font-size: 0.6em; font-weight: 500; margin-right: 0.12em; vertical-align: 0.42em; letter-spacing: 0; color: var(--inkt-2); }
.strook .cijfer-eenheid { font-size: 0.55em; font-weight: 500; letter-spacing: 0; color: var(--inkt-2); margin-left: 0.1em; }
.strook .onder { display: block; margin-top: var(--r-2); font-size: var(--t-mini); color: var(--inkt-3); line-height: 1.4; }
.strook .onder b { color: var(--inkt-2); font-weight: 600; }
.strook .onder b.k-rood { color: var(--rood); }
.strook .onder b.k-goed { color: var(--groen); }
.strook .onder b.k-let { color: var(--geel); }
.strook .onder { overflow-wrap: anywhere; }
.strook .onder a { display: block; margin-top: 2px; text-underline-offset: 3px; }
.cijfers { margin-bottom: 0; }

/* ---------- tabel ---------- */
.tabel-wrap { overflow-x: auto; max-width: 100%; }
.tabel-wrap:focus-visible { outline-offset: -3px; }
.tabel-wrap.plakkop { max-height: calc(100vh - 11rem); overflow: auto; }
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-ui); }
.tabel th {
  text-align: left; font-size: var(--t-mini); font-weight: 550; letter-spacing: 0; color: var(--inkt-3);
  padding: 10px var(--r-3); border-bottom: 1px solid var(--lijn); white-space: nowrap; background: var(--paneel);
  position: sticky; top: 0; z-index: 2;
}
.tabel td { padding: 6px var(--r-3); height: var(--rij); border-bottom: 1px solid var(--lijn-zacht); vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel th:first-child, .tabel td:first-child { padding-left: var(--r-5); }
.tabel th:last-child, .tabel td:last-child { padding-right: var(--r-5); }
.tabel tbody tr:hover td { background: var(--paneel-2); }
.tabel .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .code { color: var(--inkt-2); white-space: nowrap; }
.tabel .sterk { font-weight: 600; }
.tabel a { text-decoration: none; font-weight: 500; }
.tabel a:hover { text-decoration: underline; }
.tabel th a { color: inherit; font-weight: 600; }
.tabel th[aria-sort] { color: var(--inkt); }
.tabel th.r { text-align: right; }
.tabel .sub { display: block; }
.tabel .kol-naam { min-width: 15rem; }
.tabel .kol-breed { min-width: 16rem; }
.tabel td.uitkomst { min-width: 18rem; max-width: 36rem; overflow-wrap: anywhere; }
.tabel tfoot td { border-top: 1px solid var(--lijn); border-bottom: 0; font-weight: 600; background: var(--paneel-2); }
.tabel tr.markeer td { background: var(--geel-vlak); }
.tabel tr.markeer:hover td { background: color-mix(in srgb, var(--geel-merk) 20%, var(--geel-vlak)); }
.tabel tr.markeer-slecht td { background: var(--rood-vlak); }
.tabel tr.markeer-slecht:hover td { background: color-mix(in srgb, var(--rood) 8%, var(--rood-vlak)); }
.tabel tr.verouderd td { color: var(--inkt-3); }
.tabel tr.deze td { background: color-mix(in srgb, var(--blauw-vlak) 45%, var(--paneel)); }
.tabel tr.regel-gratis td { background: color-mix(in srgb, var(--groen-vlak) 45%, var(--paneel)); }
.tabel tr.resultaat-fout td { background: var(--rood-vlak); }
.tabel .achter { color: var(--rood); font-weight: 650; }
.tabel ul { padding-left: 16px; list-style: disc; }
.tabel .kol-kies { width: 2.2rem; text-align: center; padding-right: 0; }
.tabel ul.voorstellen { list-style: none; padding-left: 0; display: grid; gap: var(--r-2); }
.tabel ul.factuurregels { list-style: none; padding-left: 0; margin: var(--r-1) 0 0; display: grid; gap: 2px; }
.tabel tr.boven td { vertical-align: top; }
.tabel details { margin: 0; border: 0; }
.tabel details summary { padding: 2px 0; font-weight: 500; color: var(--inkt-3); font-size: var(--t-mini); }
.tabel.compact td { height: 34px; }
.rij-links { display: inline-flex; gap: var(--r-4); }
/* De knop aan het eind van een rij om het ding van die rij te openen; de naam in de rij is dezelfde link. */
.tabel .kol-open { width: 1%; padding-left: 0; text-align: right; }
.rij-open { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--straal-klein); color: var(--inkt-3); }
.tabel tr:hover .rij-open, .rij-open:hover, .rij-open:focus-visible { background: var(--accent-vlak); color: var(--accent-sterk); }
.rij-acties { display: flex; flex-wrap: wrap; gap: 4px var(--r-3); align-items: center; }
.rij-acties form { margin: 0; }
.taakkop { display: grid; gap: 2px; max-width: 36rem; }
.tabel .knop { height: 32px; padding: 0 var(--r-3); border-radius: var(--straal-klein); font-size: var(--t-ui); }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--straal-rond); font-size: var(--t-mini); font-weight: 550; white-space: nowrap; line-height: 1; vertical-align: middle; background: var(--lijn-zacht); color: var(--inkt-2); }
.badge .ic { width: 13px; height: 13px; stroke-width: 2; }
/* goed is de gewone toestand: alleen groene tekst, geen vlak. Een afwijking krijgt wel een vlak. */
.badge.goed { background: none; padding-inline: 0; color: var(--groen); }
.badge.let { background: var(--geel-vlak); color: var(--geel); }
.badge.slecht { background: var(--rood-vlak); color: var(--rood); }
.badge.info { background: var(--blauw-vlak); color: var(--blauw); }
.badge.rand { box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt-2); }
.badges { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--r-3); }
.klopt { display: inline-flex; align-items: center; gap: 5px; color: var(--groen); font-weight: 600; font-size: var(--t-mini); }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2);
  height: 38px; padding: 0 var(--r-4);
  border-radius: var(--straal-klein); border: 1px solid var(--accent); background: var(--accent); color: var(--op-kleur);
  font: inherit; font-size: var(--t-ui); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knop:hover { background: var(--accent-sterk); border-color: var(--accent-sterk); }
.knop-rand { background: var(--paneel); color: var(--inkt); border-color: var(--lijn); }
.knop-rand:hover { background: var(--paneel-2); border-color: var(--lijn-sterk); }
.knop-gevaar { background: var(--rood); border-color: var(--rood); box-shadow: none; }
.knop-gevaar:hover { background: var(--rood-sterk); border-color: var(--rood-sterk); }
.knop-zij { padding: 0 var(--r-3); font-size: var(--t-mini); }
.knop.klein { height: 32px; padding: 0 var(--r-3); border-radius: var(--straal-klein); font-size: var(--t-ui); }
.knop:disabled { opacity: 0.5; cursor: not-allowed; }
/* de hoofdactie per rij in een lijst (afvinken): druif als rand en tekst, gevuld bij aanwijzen; een gevulde knop per rij is te druk */
.knop-afvink { background: var(--paneel); color: var(--accent); border-color: var(--accent); }
.knop-afvink:hover { background: var(--accent); color: var(--op-kleur); }
/* een bijzaak met icoon, zonder rand: alleen bij aanwijzen een vlak */
.knop-stil { background: transparent; color: var(--inkt-2); border-color: transparent; }
.knop-stil:hover { background: var(--paneel-2); color: var(--inkt); border-color: transparent; }
.knop .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.knop-tekst { background: none; border: 0; color: var(--inkt); font: inherit; font-size: var(--t-ui); font-weight: 600; cursor: pointer; padding: 4px 2px; text-decoration: underline; text-decoration-color: var(--lijn-sterk); text-underline-offset: 3px; }
.knop-tekst:hover { text-decoration-color: currentColor; }
.knoprij { display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: center; }
.knoprij form { margin: 0; }

/* ---------- velden ---------- */
label { font-size: var(--t-mini); font-weight: 600; color: var(--inkt-2); }
.veld {
  font: inherit; font-size: var(--t-ui); color: var(--inkt); background: var(--paneel); border: 1px solid var(--lijn-sterk); border-radius: var(--straal-klein);
  padding: 0 var(--r-3); height: 38px; max-width: 100%;
}
.veld:hover { border-color: var(--inkt-3); }
.veld:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.veld[readonly] { background: var(--paneel-2); }
select.veld { padding-right: var(--r-2); }
input[type="file"].veld { height: auto; padding: 6px var(--r-2); }
textarea.veld { height: 5rem; min-height: 5rem; padding: var(--r-2) var(--r-3); line-height: 1.5; resize: vertical; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--inkt); margin: 0; }
/* Het keuzeveld: een knop in de vorm van een veld met een eigen keuzelijst (keuzes_controller.js). De echte select ligt
   onzichtbaar onder de knop en houdt de waarde. */
.keuze { position: relative; display: block; min-width: 0; max-width: 100%; }
.keuze > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.keuze-knop { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); width: 100%; padding-right: var(--r-2); text-align: left; cursor: pointer; }
.keuze-knop:disabled { cursor: not-allowed; opacity: 0.6; }
.keuze-knop[aria-expanded="true"] { border-color: var(--accent); }
.keuze-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keuze-leegwaarde .keuze-tekst { color: var(--inkt-2); }
.keuze-pijl { color: var(--inkt-3); }
.keuze-knop[aria-expanded="true"] .keuze-pijl { transform: rotate(180deg); }
.keuze-lijst { position: fixed; inset: auto; margin: 0; width: max-content; max-width: min(26rem, calc(100vw - 16px)); padding: var(--r-1); background: var(--paneel); color: var(--inkt); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw-op); }
.keuze-lijst ul { max-height: 19rem; overflow-y: auto; overscroll-behavior: contain; }
.keuze-lijst li { display: flex; align-items: center; gap: var(--r-2); min-height: 32px; padding: 5px var(--r-3) 5px var(--r-2); border-radius: var(--straal-klein); font-size: var(--t-ui); font-weight: 500; line-height: 1.3; cursor: pointer; }
.keuze-lijst li[hidden] { display: none; }
.keuze-lijst li:hover, .keuze-lijst li:focus-visible { background: var(--paneel-2); }
.keuze-lijst li:focus-visible { outline-offset: -2px; }
.keuze-lijst li[aria-disabled="true"] { color: var(--inkt-3); cursor: not-allowed; }
.keuze-vink { color: transparent; }
.keuze-lijst li[aria-selected="true"] { font-weight: 650; }
.keuze-lijst li[aria-selected="true"] .keuze-vink { color: var(--accent); }
.keuze-zoek { width: 100%; height: 32px; margin-bottom: var(--r-1); padding: 0 var(--r-2); border: 0; border-bottom: 1px solid var(--lijn-zacht); border-radius: 0; background: none; color: var(--inkt); font: inherit; font-size: var(--t-ui); }
.keuze-zoek:focus-visible { outline: 0; border-bottom-color: var(--inkt); }
.keuze-zoek::-webkit-search-cancel-button { display: none; }
.keuze-leeg { padding: var(--r-2) var(--r-3); color: var(--inkt-3); font-size: var(--t-ui); }
.wissel .keuze { flex: 1 1 auto; }

.veld-groep { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.veld-groep.vink { flex-direction: row; align-items: center; gap: var(--r-2); align-self: flex-end; min-height: 36px; }
.veld-groep.vink label { color: var(--inkt); font-size: var(--t-ui); font-weight: 500; }
.veld-groep.acties { flex-direction: row; align-items: flex-end; gap: var(--r-2); flex-wrap: wrap; }
.veld-groep.groot { flex: 3 1 14rem; }
.veld-groep.groot .veld { width: 100%; }
.form { display: flex; flex-direction: column; gap: var(--r-4); max-width: 34rem; }
.paneel .form { max-width: 34rem; }
.form .veld { width: 100%; }
.form-acties { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-4); align-items: center; }
/* Velden in een rij lijnen aan de bovenkant uit, zodat een veld met hulptekst eronder niet omhoog schuift. Een knop of een
   vinkje zonder label erboven zakt een labelhoogte, en staat zo op de lijn van de invoervelden. */
.formrij { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: flex-start; --labelhoogte: calc(var(--t-mini) * 1.5 + 4px); }
.formrij > :is(.knop, .veld-groep.acties, .veld-groep.vink) { margin-top: var(--labelhoogte); align-self: flex-start; }
.formrij .veld-groep { flex: 1 1 12rem; }
.form.breed { max-width: none; }
.code-veld { font-family: var(--mono); font-size: var(--t-sectie); letter-spacing: 0.2em; text-align: center; height: 48px; font-variant-numeric: tabular-nums; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-form .veld { height: 32px; font-size: var(--t-ui); }
.kopieer-rij { display: flex; gap: var(--r-2); }
.kopieer-rij .veld { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: var(--t-mini); }

/* ---------- filterbalk ---------- */
.filterbalk { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: flex-end; }
.paneel > .filterbalk { margin-block: var(--r-4); }
.paneel > .filterbalk + .aantallen { margin-top: 0; }
.paneel > .paneel-kop + .filterbalk { margin-top: var(--r-4); }
.filterbalk.compact { margin-bottom: var(--r-2); }
.spronglijst, .schakelaar { display: flex; flex-wrap: wrap; gap: 6px; }
.spronglijst a, .schakel { display: inline-flex; align-items: center; gap: var(--r-2); height: 32px; padding: 0 var(--r-4); border: 1px solid var(--lijn); border-radius: var(--straal-rond); background: var(--paneel); color: var(--inkt-2); font-size: var(--t-ui); font-weight: 550; text-decoration: none; }
.spronglijst a:hover, .schakel:hover { border-color: var(--lijn-sterk); color: var(--inkt); }
.schakel.actief { background: var(--inkt); border-color: var(--inkt); color: var(--op-kleur); }
.schakel.actief .telling { color: var(--lijn-sterk); }

/* ---------- paginering ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--r-4); flex-wrap: wrap; border-top: 1px solid var(--lijn-zacht); padding: var(--r-3) var(--r-5); }
.pager-tekst { color: var(--inkt-3); font-size: var(--t-mini); }
.pager-knoppen { display: flex; gap: 6px; align-items: center; }
.pager-nr { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--r-4); border: 1px solid var(--lijn); border-radius: var(--straal-rond); text-decoration: none; background: var(--paneel); font-size: var(--t-ui); font-weight: 600; }
a.pager-nr:hover { border-color: var(--lijn-sterk); }
.pager-nr.uit { color: var(--inkt-3); background: var(--paneel-2); border-color: var(--lijn-zacht); font-weight: 500; }

/* ---------- meldingen en blokken ---------- */
.melding, .blok { display: flex; align-items: flex-start; gap: var(--r-3); padding: var(--r-3) var(--r-4); font-size: var(--t-ui); border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--paneel); color: var(--inkt); }
.melding .ic { margin-top: 2px; }
.melding-tekst { min-width: 0; flex: 1 1 auto; }
.melding.goed, .blok.goed { background: var(--groen-vlak); border-color: transparent; }
.melding.goed .ic { color: var(--groen); }
.melding.slecht, .blok.slecht { background: var(--rood-vlak); border-color: transparent; }
.melding.slecht .ic { color: var(--rood); }
.melding.let, .blok.let { background: var(--geel-vlak); border-color: transparent; }
.melding.let .ic { color: var(--geel); }
.melding.neutraal, .blok.neutraal { background: var(--blauw-vlak); border-color: transparent; }
.melding.neutraal .ic { color: var(--blauw); }
.blok { display: block; margin: 0; }
/* een blok in een paneel houdt het ritme van het paneel: lucht boven en onder, ook direct onder een kopje */
.paneel > * + .blok { margin-top: var(--r-3); }
.paneel > .blok + * { margin-top: var(--r-4); }
.paneel > h3 .badge { margin-left: var(--r-2); }
.blok > :first-child { margin-top: 0; }
.blok ul { margin: 4px 0; padding-left: 18px; list-style: disc; }
/* Een lijst met fouten of waarschuwingen in een blok: geen bolletjes, elke regel met een eigen teken in de kleur van het blok. */
.blok ul.waarschuwingen { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--r-2); }
.blok ul.waarschuwingen li { display: flex; align-items: flex-start; gap: var(--r-2); font-weight: 500; }
.blok ul.waarschuwingen li::before { content: "!"; flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid currentColor; border-radius: 50%; font-size: var(--t-label); font-weight: 700; line-height: 1; color: var(--inkt-3); }
.blok.slecht ul.waarschuwingen li::before { color: var(--rood); }
.blok.let ul.waarschuwingen li::before { color: var(--geel); }
.blok p + p { margin-top: var(--r-2); }
.blok .tech { margin-top: 4px; }
.blok .sub { margin-top: 4px; }
.blok a:not(.knop):not(.schakel) { color: inherit; }
.blok .knop-tekst { color: inherit; }
.paneel > .blok { margin-inline: var(--r-5); }
.paneel > .paneel-kop + .blok { margin-top: var(--r-4); }
.blok-in-paneel { margin-inline: var(--r-5); }
.proefbalk { background: var(--geel-vlak); border: 1px solid transparent; color: var(--geel); border-radius: var(--straal); padding: var(--r-3) var(--r-4); font-size: var(--t-ui); display: flex; gap: var(--r-3); align-items: flex-start; }
.proefbalk p { color: var(--inkt); }
.proefbalk strong { display: block; color: var(--geel); }

/* ---------- details ---------- */
details > summary { cursor: pointer; font-weight: 600; font-size: var(--t-ui); padding: var(--r-3) var(--r-5); list-style: none; display: flex; align-items: center; gap: var(--r-2); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.7px solid var(--inkt-3); border-bottom: 1.7px solid var(--inkt-3); transform: rotate(-45deg); transition: transform 0.12s; flex: 0 0 auto; margin-right: 4px; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--inkt); }
.paneel > details { border-top: 1px solid var(--lijn-zacht); }
.paneel > .paneel-kop + details { border-top: 0; }
details > :not(summary) { margin-inline: var(--r-5); }
details > :not(summary) + :not(summary) { margin-top: var(--r-3); }
details > :last-child:not(summary) { margin-bottom: var(--r-4); }
details > .tabel-wrap { margin-inline: 0; }
details.paneel > summary { padding: var(--r-3) var(--r-5); min-height: 52px; }
details.paneel[open] > summary { border-bottom: 1px solid var(--lijn-zacht); margin-bottom: var(--r-4); }
details.paneel > :not(summary) { margin-inline: var(--r-5); }
.tabel details > summary { padding: 0; font-size: var(--t-mini); }
.tabel details > summary::before { margin-right: 2px; }

/* ---------- lege toestand ---------- */
.leeg-blok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--r-2); padding: var(--r-8) var(--r-6); }
.leeg-blok > * { margin-inline: 0; }
.leeg-blok h2 { font-size: var(--t-sectie); font-weight: 640; font-stretch: 104%; }
.leeg-blok p { color: var(--inkt-2); max-width: 46ch; }
.leeg-blok .leeg-teken { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-vlak); border: 1px solid transparent; color: var(--accent); margin-bottom: var(--r-2); }
.leeg-blok .leeg-teken .ic { width: 22px; height: 22px; }
.paneel.leeg-blok > :last-child { margin-bottom: 0; }

/* ---------- definitielijst ---------- */
.dl { display: grid; }
.dl > div, .dl-rij { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--r-3); padding: 10px var(--r-5); border-bottom: 1px solid var(--lijn-zacht); font-size: var(--t-ui); }
.dl > div:last-child { border-bottom: 0; }
.dl dt { color: var(--inkt-3); }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
.dl .code { font-weight: 500; color: var(--inkt); }

/* ---------- signalen ---------- */
.signaallijst li { padding: 14px var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.signaallijst li:last-child { border-bottom: 0; }
.sig-kop { display: flex; align-items: center; gap: var(--r-2); margin-bottom: 4px; }
.sig-soort { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); font-weight: 650; font-stretch: var(--breed-label); }
.sig-soort .ic { width: 14px; height: 14px; stroke-width: 2.1; }
.sig-rood { color: var(--rood); }
.sig-let { color: var(--geel); }
.sig-goed { color: var(--groen); }
.sig-info { color: var(--blauw); }
.sig-neutraal { color: var(--inkt-3); }
.sig-datum { margin-left: auto; font-size: var(--t-mini); color: var(--inkt-3); white-space: nowrap; }
.sig-tekst { min-width: 0; overflow-wrap: anywhere; }
.sig-titel { display: block; font-weight: 620; font-size: var(--t-basis); text-decoration: none; }
a.sig-titel:hover { text-decoration: underline; }
.sig-detail { margin-top: 2px; font-size: var(--t-ui); color: var(--inkt-2); font-variant-numeric: tabular-nums; }

/* ---------- tabs (subnavigatie van Instellingen) ---------- */
.subnav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--lijn); }
.subnav a { text-decoration: none; padding: 10px var(--r-4); color: var(--inkt-2); font-weight: 550; font-size: var(--t-ui); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--inkt); }
.subnav a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--accent); font-weight: 650; }

/* ---------- tegels (Instellingen) ---------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--r-4); }
.tegel { display: block; padding: var(--r-5); text-decoration: none; background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw); transition: transform 0.15s, box-shadow 0.15s; }
.tegel:hover { border-color: var(--lijn-sterk); }
.tegel h2 { font-size: var(--t-kop); font-weight: 640; margin-bottom: 4px; display: flex; align-items: center; gap: var(--r-2); }
.tegel h2 .ic { color: var(--inkt-3); }
.tegel p { color: var(--inkt-3); font-size: var(--t-ui); }

/* ---------- laden ---------- */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--lijn); border-top-color: var(--inkt-2); border-radius: 50%; animation: draai 0.8s linear infinite; vertical-align: -0.2em; }
@keyframes draai { to { transform: rotate(360deg); } }

/* ---------- stappenbalk en stapvoet: een stroom in stappen, elke stap een eigen pagina met een hoofdactie ---------- */
.stappenbalk { container-type: inline-size; margin-bottom: var(--r-2); padding-block: var(--r-3); border-block: 1px solid var(--lijn); }
.stappenbalk-stand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stappenbalk ol { display: flex; align-items: center; }
/* de stappen verdelen de breedte; de lijn na een stap vult de ruimte tot de volgende */
.stappenbalk li { display: flex; align-items: center; flex: 1 1 0; }
.stappenbalk li:last-child { flex: 0 0 auto; }
.stappenbalk li:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 8px; height: 1px; margin-inline: var(--r-2); background: var(--lijn-sterk); }
.stappenbalk .stap-naam { white-space: nowrap; }
.stappenbalk .stap-knop { display: inline-flex; align-items: center; gap: var(--r-2); padding: 3px var(--r-2) 3px 3px; border-radius: var(--straal-rond); font-size: var(--t-ui); color: var(--inkt-3); text-decoration: none; }
.stappenbalk a.stap-knop:hover { background: var(--paneel-2); color: var(--inkt); }
.stap-nr { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--lijn-sterk); background: var(--paneel); font-size: var(--t-mini); font-weight: 600; font-variant-numeric: tabular-nums; }
.stap-nr .ic { width: 14px; height: 14px; }
.stap-klaar .stap-knop { color: var(--inkt-2); }
.stap-klaar .stap-nr { border-color: transparent; background: var(--accent-vlak); color: var(--accent); }
.stap-let .stap-knop { color: var(--inkt-2); }
.stap-let .stap-nr { border-color: var(--geel-merk); background: var(--paneel); color: var(--geel); }
.stap-nu .stap-knop { color: var(--inkt); font-weight: 600; }
.stap-nu .stap-nr { border-color: var(--accent); background: var(--accent); color: var(--op-kleur); }
/* past niet alles naast elkaar (smal scherm, of naast de zijbalk), dan alleen de naam van de huidige stap en "Stap 3 van 5" erboven */
@container (max-width: 760px) {
  .stappenbalk-stand { position: static; width: auto; height: auto; clip: auto; margin-bottom: var(--r-1); font-size: var(--t-mini); color: var(--inkt-3); }
  .stappenbalk li:not(.stap-nu) .stap-naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stappenbalk li:not(:last-child)::after { margin-inline: 6px; }
}
/* onder aan een stap: links terug, rechts de hoofdactie */
.stapvoet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-3); padding-top: var(--r-2); }
.stapvoet .terug { font-size: var(--t-ui); color: var(--inkt-2); }
.stapvoet > :last-child:not(:first-child) { margin-left: auto; }
.stapvoet-rechts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--r-4); }
.stapvoet-rechts .terug { font-size: var(--t-ui); color: var(--inkt-2); }

/* ---------- te doen (startpagina Basis): per module een regel, wat er te doen is en een knop ---------- */
.paneel > .tedoen { margin: 0; }
.tedoen li { display: grid; grid-template-columns: 36px minmax(9rem, 13rem) minmax(0, 1fr) auto; align-items: center; gap: var(--r-4); padding: var(--r-4) var(--r-5); border-top: 1px solid var(--lijn-zacht); }
.tedoen-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--straal-klein); background: var(--paneel-2); color: var(--inkt-2); }
.tedoen .werk .tedoen-ic { background: var(--accent-vlak); color: var(--accent); }
.tedoen-naam { font-weight: 600; }
.tedoen-stand { color: var(--inkt-2); min-width: 0; }
.tedoen-stand strong { color: var(--inkt); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- sleepvlak (Factuur toevoegen): groot, zoals een lege toestand; slepen of klikken ---------- */
.upload { display: grid; gap: var(--r-3); }
.sleepvlak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--r-2); min-height: 340px; font-size: var(--t-basis); font-weight: 400; padding: var(--r-8) var(--r-6); text-align: center; background: var(--paneel); border: 2px dashed var(--lijn-sterk); border-radius: var(--straal); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.sleepvlak:hover { border-color: var(--accent); }
.sleepvlak.sleept { border-color: var(--accent); background: var(--accent-vlak); }
.sleepvlak .leeg-teken { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-vlak); color: var(--accent); margin-bottom: var(--r-2); }
.sleepvlak .leeg-teken .ic { width: 26px; height: 26px; }
.sleepvlak.sleept .leeg-teken { background: var(--paneel); }
.sleepvlak-titel { font-size: var(--t-sectie); font-weight: 640; color: var(--inkt); }
.sleepvlak-sub { color: var(--inkt-2); max-width: 46ch; }
.sleepvlak-stand { margin-top: var(--r-2); color: var(--accent-sterk); font-weight: 600; font-size: var(--t-ui); }
.sleepvlak-stand:empty { display: none; }
.sleepvlak.bezig { cursor: progress; border-style: solid; }
.upload:has(input[type="file"]:focus-visible) .sleepvlak { outline: 2px solid var(--focus); outline-offset: 2px; }
.upload-hulp { text-align: center; max-width: 70ch; margin-inline: auto; }
.upload.met-js .upload-knop { display: none; }

/* ---------- smal scherm ---------- */
@media (max-width: 1180px) {
  .strook-held, .strook-artikel, .strook-5, .strook-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strook > div:nth-child(n+4) { border-top: 1px solid var(--lijn-zacht); }
  :is(.strook-held, .strook-artikel, .strook-5, .strook-6) > div:nth-child(3n+1) { border-left: 0; }
  .raster-hoofd, .raster-artikel, .raster-gelijk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .strook, .strook-held, .strook-artikel, .strook-5, .strook-6, .strook-3 { grid-template-columns: 1fr 1fr; }
  .strook > div, .strook > div:nth-child(n) { border-top: 1px solid var(--lijn-zacht); }
  .strook > div:nth-child(-n+2) { border-top: 0; }
  .strook > div:nth-child(odd) { border-left: 0; }
  .strook-held > div:first-child { grid-column: 1 / -1; }
  .strook-held > div:nth-child(2) { border-top: 1px solid var(--lijn-zacht); }
  .strook-held > div:nth-child(even) { border-left: 0; }
  .strook-held > div:nth-child(odd):not(:first-child) { border-left: 1px solid var(--lijn-zacht); }
  .tedoen li { grid-template-columns: 36px minmax(0, 1fr); gap: var(--r-1) var(--r-3); }
  .tedoen li > :is(.tedoen-stand, .knop) { grid-column: 2; justify-self: start; }
  .strook { --cijfer-max: var(--t-sectie); }
  .strook .cijfer-groot { --cijfer-max: var(--t-cijfer); }
  .paneel-kop, .pager, .paneel-noot, .aantallen, .signaallijst li, .dl > div, details > summary { padding-left: var(--r-4); padding-right: var(--r-4); }
  .paneel > * , details > :not(summary), details.paneel > :not(summary) { margin-inline: var(--r-4); }
  .paneel > :is(.vergelijk-intro, .paneel-kop, .tabel-wrap, .strook, .pager, .paneel-noot, .aantallen, .signaallijst, .dl, .aandeel, .verdeling, .grafiek-blok, .opbouw-balk, .strip, .leeg, details, .bleed) { margin-inline: 0; }
  details > .tabel-wrap { margin-inline: 0; }
  .dl > div, .dl-rij { grid-template-columns: 1fr; gap: 0; }
  .leeg { padding-inline: var(--r-4); }
  .filterbalk .veld-groep { flex: 1 1 100%; }
  .veld-groep.acties { flex: 1 1 100%; }
  .veld-groep.vink { flex: 1 1 100%; align-self: auto; }
  .melding, .blok, .proefbalk { flex-wrap: wrap; }
  .pager { justify-content: flex-start; }

  /* tabellen die kunnen stapelen: regels met hoofdregel (s-1), bedrag (s-2), subregel (s-3) en status (s-4) */
  .stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stapel, .stapel tbody, .stapel tfoot { display: block; }
  .stapel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--r-3); padding: 10px var(--r-4); border-bottom: 1px solid var(--lijn-zacht); }
  .stapel tr:last-child { border-bottom: 0; }
  .stapel td { display: block; height: auto; padding: 0 !important; border: 0; background: transparent !important; white-space: normal; }
  .stapel td.s-1 { grid-column: 1; font-weight: 600; }
  .stapel td.s-2 { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
  .stapel td.s-3 { grid-column: 1; font-size: var(--t-mini); color: var(--inkt-3); }
  .stapel td.s-4 { grid-column: 2; text-align: right; }
  .stapel td.s-x { display: none; }
  .stapel td.s-3 .sterk { font-weight: 500; }
}

/* kleine aanvullingen */
.bet-totaal { margin-left: auto; font-size: var(--t-ui); color: var(--inkt-2); }
.paneel > .akkoordformulier:last-child { margin-bottom: 0; }
.rekenveld { max-width: 18rem; }
.exact-kop { display: flex; align-items: baseline; gap: var(--r-3); padding: var(--r-4) var(--r-5); border-bottom: 1px solid var(--lijn-zacht); flex-wrap: wrap; }
.exact-nr { font-family: var(--mono); font-size: var(--t-sectie); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; }
.exact-nr:hover { text-decoration: underline; }
.exact-oms { font-family: var(--mono); font-size: var(--t-mini); color: var(--inkt-2); overflow-wrap: anywhere; }
.paneel > .exact-kop { margin-inline: 0; margin-top: 0; }
.paneel > .blok-rand { margin: 0; border-width: 1px 0 0 1px; }
.paneel > .blok-rand:last-child { border-radius: 0 0 var(--straal) var(--straal); }
.blok.modus { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: center; }
.paneel > .paneel-kop + .aantallen { border-top: 0; }
.paneel > #exportformulier { margin-inline: 0; margin-top: 0; }
.paneel > #exportformulier:last-child { margin-bottom: 0; }

.tabel.smal th { white-space: normal; vertical-align: bottom; }
.tabel.smal th, .tabel.smal td { padding-inline: var(--r-2); }
.tabel.smal th:first-child, .tabel.smal td:first-child { padding-left: var(--r-5); }
.tabel.smal th:last-child, .tabel.smal td:last-child { padding-right: var(--r-5); }
.tabel td.s-3 .sub, .tabel td.nw .sub { white-space: nowrap; }

.tabel tbody th { position: static; background: var(--paneel); text-transform: none; letter-spacing: 0; font-size: var(--t-mini); font-weight: 600; color: var(--inkt); border-bottom: 1px solid var(--lijn-zacht); padding: 6px var(--r-3); text-align: left; white-space: nowrap; }
.tabel tbody tr:last-child th { border-bottom: 0; }
.tabel tbody th:first-child { padding-left: var(--r-5); }
.paneel > .rekenveld + .tabel-wrap { margin-top: var(--r-4); }
.tabel td .badges { margin-top: 4px; }
.tabel td > .badges:first-child { margin-top: 0; }
.tabel .kol-naam { min-width: 13rem; }
.paneel > .blok + * { margin-top: var(--r-4); }
.paneel > :is(p, h3) + .tabel-wrap { margin-top: var(--r-3); }
.paneel .form:has(.formrij) { max-width: none; }
@media (max-width: 640px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subnav a { white-space: nowrap; flex: 0 0 auto; }
}

/* ---------- meldingen: belletje in de bovenbalk, de lijst en de voorkeurenmatrix ---------- */
.bel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--r-2); color: var(--inkt-2); text-decoration: none; border-radius: var(--straal-klein); }
.bel:hover { color: var(--inkt); background: var(--paneel-2); }
.bel .ic { width: 20px; height: 20px; }
.bel.nieuw { color: var(--inkt); }
.bel-teller { min-width: 20px; padding: 0 6px; border-radius: var(--straal-rond); background: var(--inkt-3); color: var(--op-kleur); font-size: var(--t-label); font-weight: 650; text-align: center; line-height: 20px; font-variant-numeric: tabular-nums; }
.bel.nieuw .bel-teller { background: var(--rood); }
.bel[aria-current="page"] { background: var(--paneel-2); }
.meldinglijst li.klaar .sig-titel, .meldinglijst li.klaar .sig-detail { color: var(--inkt-3); }
/* een melding als kaart (ontwerp B, 30 oktober 2026): links wat er is en wat te doen, rechts voor wie, de stand en de knoppen */
.meldingen-kaarten > .meldinglijst { display: grid; gap: var(--r-4); }
.meldingen-noot { margin: var(--r-4) 0 0; font-size: var(--t-mini); color: var(--inkt-3); }
.mk { display: grid; grid-template-columns: minmax(0, 1fr) 240px; overflow: hidden; background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw); }
.mk-hoofd { display: flex; flex-direction: column; gap: var(--r-4); min-width: 0; padding: var(--r-6) 28px; }
.mk-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: var(--t-ui); color: var(--inkt-3); }
.mk-soort { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.mk-soort .ic { width: 15px; height: 15px; }
.mk-rood { color: var(--rood); }
.mk-let { color: var(--geel); }
.mk-info { color: var(--blauw); }
.mk-stip { width: 3px; height: 3px; border-radius: 50%; background: var(--lijn-sterk); }
.mk-titelblok { display: flex; flex-direction: column; gap: var(--r-1); }
.mk-titel { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--inkt); }
.mk-titel a { color: inherit; text-decoration: none; }
.mk-titel a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.mk-sub { margin: 0; font-size: var(--t-basis); color: var(--inkt-2); }
.mk-sub .mono, .mk-tabel .mono, .mk-code { font-family: var(--mono); font-size: var(--t-ui); }
.mk-tabel-wrap { overflow-x: auto; border: 1px solid var(--lijn-zacht); border-radius: var(--straal-klein); }
.mk-tabel { width: 100%; border-collapse: collapse; font-size: var(--t-basis); font-variant-numeric: tabular-nums; }
.mk-tabel th { padding: var(--r-2) 14px; border-bottom: 1px solid var(--lijn); font-size: var(--t-mini); font-weight: 600; color: var(--inkt-3); text-align: left; white-space: nowrap; }
.mk-tabel td { padding: 10px 14px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: baseline; }
.mk-tabel tbody tr:last-child td { border-bottom: 0; }
.mk-tabel .r { text-align: right; white-space: nowrap; }
.mk-tabel .sterk { font-weight: 650; }
.mk-tabel .stil { color: var(--inkt-3); }
.mk-tabel .mk-code { display: block; font-size: var(--t-mini); color: var(--inkt-3); }
.mk-tabel tr.licht td { background: var(--blauw-vlak); font-weight: 650; }
.mk-tabel tfoot td { border-top: 1px solid var(--lijn); border-bottom: 0; background: var(--paneel-2); font-weight: 650; }
.mk-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--lijn-zacht); border-radius: var(--straal-klein); }
.mk-feit { display: flex; flex-direction: column; gap: var(--r-1); padding: var(--r-3) 14px; border-right: 1px solid var(--lijn-zacht); }
.mk-feit:last-child { border-right: 0; }
.mk-feiten.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-feiten.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-feiten.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-feit dt { font-size: var(--t-mini); color: var(--inkt-3); }
.mk-feit dd { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.mk-feit strong { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mk-feit dd span { font-size: var(--t-mini); color: var(--inkt-3); }
.mk-feit.let { background: var(--geel-vlak); }
.mk-feit.let dt { color: var(--geel); }
.mk-feit.rood { background: var(--rood-vlak); }
.mk-feit.rood dt, .mk-feit.rood dd span { color: var(--rood-sterk); }
.mk-feit.info { background: var(--blauw-vlak); }
.mk-feit.info dt { color: var(--blauw); }
.mk-lijst { display: flex; flex-direction: column; gap: var(--r-1); padding: var(--r-3) 14px; border-radius: var(--straal-klein); background: var(--paneel-2); font-size: var(--t-ui); color: var(--inkt-2); }
.mk-lijst strong { color: var(--inkt); }
.mk-lijst ul { display: grid; gap: 2px; margin: 0; padding-left: 1.1em; }
.mk-uitleg { margin: 0; font-size: var(--t-ui); line-height: 1.5; color: var(--inkt-2); overflow-wrap: anywhere; }
.mk-waarom { margin: 0; font-size: var(--t-mini); color: var(--inkt-3); }
.mk.klaar .mk-titel, .mk.klaar .mk-sub { color: var(--inkt-3); }
.mk-zij { display: flex; flex-direction: column; padding: var(--r-5); background: var(--paneel-2); border-left: 1px solid var(--lijn-zacht); }
.mk-voor { display: flex; flex-direction: column; gap: 10px; padding-bottom: var(--r-4); border-bottom: 1px solid var(--lijn); }
.mk-kopje { font-size: var(--t-mini); font-weight: 600; color: var(--inkt-3); }
.mk-wie { display: flex; align-items: center; gap: 10px; }
.mk-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-vlak); color: var(--accent-sterk); font-size: var(--t-mini); font-weight: 700; }
.mk-avatar.mij { background: var(--accent); color: var(--op-kleur); }
.mk-avatar.vrij { background: transparent; border: 1.5px dashed var(--lijn-sterk); }
.mk-wie-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-naam { font-size: var(--t-basis); font-weight: 600; color: var(--inkt); overflow-wrap: anywhere; }
.mk-wie.mij .mk-naam { color: var(--accent); }
.mk-wie.niemand .mk-naam { font-weight: 400; color: var(--inkt-2); }
.mk-wie-sub { font-size: var(--t-mini); color: var(--inkt-3); }
.mk-briefje { margin: 0; padding: var(--r-2) 10px; border: 1px solid var(--lijn); border-radius: var(--r-2); background: var(--paneel); font-size: var(--t-ui); line-height: 1.4; color: var(--inkt-2); overflow-wrap: anywhere; }
.mk-wie-knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mk-wie-knoppen.een { grid-template-columns: minmax(0, 1fr); }
.mk-wie-knoppen .knop { width: 100%; height: 34px; padding: 0 var(--r-2); }
.doorsturen > summary { list-style: none; }
.doorsturen > summary::-webkit-details-marker { display: none; }
.doorsturen > summary::before { content: none; }
.doorsturen[open] { grid-column: 1 / -1; }
.doorsturen[open] > summary { background: var(--paneel); border-color: var(--lijn-sterk); }
.doorsturen-form { display: grid; gap: var(--r-3); margin-top: var(--r-2); padding: var(--r-3); border: 1px solid var(--lijn); border-radius: var(--straal-klein); background: var(--paneel); }
.doorsturen-form .veld-groep { margin: 0; min-width: 0; }
.doorsturen-form .veld { width: 100%; }
.mk-stand { display: flex; flex-direction: column; gap: var(--r-2); padding: var(--r-4) 0; font-size: var(--t-ui); color: var(--inkt-2); }
.mk-stand .badge { width: fit-content; }
.mk-regel { display: flex; align-items: center; gap: var(--r-2); }
.mk-regel .ic { width: 14px; height: 14px; flex: 0 0 auto; color: var(--inkt-3); }
.mk-nieuw { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); }
.mk-gelezen { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 0; border-radius: var(--r-2); background: transparent; font: inherit; font-size: var(--t-mini); font-weight: 600; color: var(--inkt-2); cursor: pointer; }
.mk-gelezen:hover { background: var(--paneel); color: var(--inkt); }
.mk-gelezen .ic { width: 14px; height: 14px; }
.mk-acties { display: flex; flex-direction: column; gap: var(--r-2); margin-top: auto; }
.mk-acties .knop { width: 100%; height: 40px; }
.mk-acties form .knop { height: 42px; }
@media (max-width: 760px) {
  .mk { grid-template-columns: minmax(0, 1fr); }
  .mk-hoofd { padding: var(--r-5) var(--r-4); }
  .mk-titel { font-size: 19px; }
  .mk-tabel th, .mk-tabel td { padding: var(--r-2) 10px; }
  .mk-tabel td:first-child { min-width: 10rem; }
  .mk-feit { padding: 10px; }
  .mk-feit strong { font-size: var(--t-kop); }
  .mk-feiten.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-feiten.n4 .mk-feit:nth-child(2n) { border-right: 0; }
  .mk-feiten.n4 .mk-feit:nth-child(n + 3) { border-top: 1px solid var(--lijn-zacht); }
  /* op de telefoon eerst afhandelen (besluit 30 oktober 2026), daarna voor wie en de stand */
  .mk-zij { border-left: 0; border-top: 1px solid var(--lijn-zacht); padding: var(--r-4); }
  .mk-acties { order: -1; margin-top: 0; padding-bottom: var(--r-4); border-bottom: 1px solid var(--lijn); }
  .mk-voor { padding-top: var(--r-4); }
}
.verdeling-soort { display: inline-flex; align-items: center; gap: var(--r-2); }
.verdeling-soort .ic { width: 16px; height: 16px; color: var(--inkt-3); }
.verdeling-tabel select.veld { min-width: 14rem; }
.matrix th.midden, .matrix td.midden { text-align: center; }
.matrix .kolkop { display: inline-block; max-width: 7.5rem; line-height: 1.25; text-transform: none; letter-spacing: 0; font-size: var(--t-mini); white-space: normal; }
.matrix input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--inkt); }
.dl-lijst { display: grid; gap: 0; }
.dl-lijst li { display: grid; gap: 2px; padding: var(--r-3) var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.dl-lijst li:last-child { border-bottom: 0; }
.paneel > .dl-lijst { margin-inline: 0; margin-top: 0; }
.mailkader { display: block; width: calc(100% - 2 * var(--r-5)); height: 640px; margin: var(--r-3) var(--r-5); border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--paneel-2); }
.mailkader.kort { height: 420px; }
.mailtekst { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-mini); background: var(--paneel-2); border: 1px solid var(--lijn-zacht); border-radius: var(--straal-klein); padding: var(--r-3); margin: var(--r-2) var(--r-5) var(--r-3); }
.paneel > .uitleg { margin-inline: var(--r-5); }
.taak-acties { display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: center; }
.taak-acties form { margin: 0; }
@media (max-width: 640px) {
  .mailkader { height: 520px; }
  .sig-voet .rij-acties { margin-left: 0; }
  /* op de telefoon: de hoofdactie bovenaan over de hele breedte, de bijzaken eronder naast elkaar; 40px om te tikken */
  .meldinglijst .rij-acties { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .meldinglijst .rij-acties > :has(.knop-afvink) { grid-column: 1 / -1; order: -1; }
  .meldinglijst .rij-acties .knop { width: 100%; height: 40px; }
  .meldinglijst .rij-acties > .doorsturen[open] { grid-column: 1 / -1; }
  .doorsturen-form { flex-direction: column; align-items: stretch; }
  .doorsturen-form .veld-groep { min-width: 0; }
}