/* Componenten: paneel, cijferstrook, tabel, badge, knop, veld, melding, filter, paginering, details, lege toestand,
   definitielijst, signalen, tabs. Panelen zijn wit met haarlijnen, nooit 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: 52px; padding: var(--r-3) var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.paneel-kop h2, details.paneel > summary h2 { font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--inkt); font-stretch: var(--breed-label); overflow-wrap: anywhere; }
.telling { font-size: 12px; 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: 12.5px; color: var(--inkt-3); }
.paneel-kop .meer { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; 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-klein); 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 > 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) ---------- */
.strook { display: grid; grid-template-columns: repeat(var(--kolommen, 5), minmax(0, 1fr)); }
.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-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strook-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strook-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.strook > div { padding: var(--r-5) var(--r-5) var(--r-4); border-left: 1px solid var(--lijn-zacht); min-width: 0; container-type: inline-size; }
.strook > div:first-child { border-left: 0; }
.strook dt { font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--inkt-3); font-stretch: var(--breed-label); }
/* 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(15px, 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(15px, 4.5cqi, 20px); 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-klein); 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-tabel); }
.tabel th {
  text-align: left; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--inkt-3);
  padding: 10px var(--r-3); border-bottom: 1px solid var(--lijn); white-space: nowrap; background: var(--paneel-2); font-stretch: var(--breed-label);
  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: #fafbfc; }
.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: #fbeacb; }
.tabel tr.markeer-slecht td { background: var(--rood-vlak); }
.tabel tr.markeer-slecht:hover td { background: #f9dfe5; }
.tabel tr.verouderd td { color: var(--inkt-3); }
.tabel tr.deze td { background: #f5f8fc; }
.tabel tr.regel-gratis td { background: #f6fbf8; }
.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 details { margin: 0; border: 0; }
.tabel details summary { padding: 2px 0; font-weight: 500; color: var(--inkt-3); font-size: 12.5px; }
.tabel.compact td { height: 34px; }
.rij-links { display: inline-flex; gap: var(--r-4); }
.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: 30px; padding: 0 var(--r-3); font-size: 13px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; vertical-align: middle; background: #eef0f2; color: var(--inkt-2); }
.badge .ic { width: 13px; height: 13px; stroke-width: 2; }
.badge.goed { background: var(--groen-vlak); 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.neutraal { background: #eef0f2; color: var(--inkt-2); }
.badge.rand { background: transparent; 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: 12.5px; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2);
  height: 36px; padding: 0 var(--r-4);
  border-radius: var(--straal-klein); border: 1px solid var(--inkt); background: var(--inkt); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knop:hover { background: #2a2f37; border-color: #2a2f37; }
.knop-rand { background: var(--paneel); color: var(--inkt); border-color: var(--lijn); }
.knop-rand:hover { background: var(--paneel); border-color: var(--lijn-sterk); }
.knop-gevaar { background: var(--rood); border-color: var(--rood); }
.knop-gevaar:hover { background: #8f1230; border-color: #8f1230; }
.knop-zij { height: 32px; padding: 0 var(--r-3); background: #2a3039; border-color: #2a3039; font-size: 12.5px; }
.knop-zij:hover { background: #343b46; border-color: #343b46; }
.knop.klein { height: 30px; padding: 0 var(--r-3); font-size: 13px; }
.knop:disabled { opacity: 0.5; cursor: not-allowed; }
.knop-tekst { background: none; border: 0; color: var(--inkt); font: inherit; font-size: 13px; 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-klein); font-weight: 600; color: var(--inkt-2); }
.veld {
  font: inherit; font-size: 13.5px; color: var(--inkt); background: #fff; border: 1px solid var(--lijn-sterk); border-radius: var(--straal-klein);
  padding: 0 var(--r-3); height: 36px; max-width: 100%;
}
.veld:hover { border-color: var(--inkt-3); }
.veld[readonly] { background: var(--paneel-2); }
select.veld { padding-right: var(--r-2); }
input[type="file"].veld { height: auto; padding: 6px var(--r-2); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--inkt); margin: 0; }
.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: 13.5px; 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; }
.formrij { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: flex-end; }
.formrij .veld-groep { flex: 1 1 12rem; }
.form.breed { max-width: none; }
.code-veld { font-family: var(--mono); font-size: 22px; 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: 30px; font-size: 13px; }
.kopieer-rij { display: flex; gap: var(--r-2); }
.kopieer-rij .veld { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12.5px; }

/* ---------- 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-3); border: 1px solid var(--lijn); border-radius: var(--straal-klein); background: var(--paneel); color: var(--inkt-2); font-size: 13px; 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: #fff; }
.schakel.actief .telling { color: #c8cdd5; }

/* ---------- 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-klein); }
.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-3); border: 1px solid var(--lijn); border-radius: var(--straal-klein); text-decoration: none; background: #fff; font-size: 13px; 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: 13.5px; border: 1px solid var(--lijn); border-left-width: 3px; 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: #f3faf6; border-color: #bfdccd; border-left-color: var(--groen-merk); }
.melding.goed .ic { color: var(--groen); }
.melding.slecht, .blok.slecht { background: #fdf3f5; border-color: #f0c6cf; border-left-color: var(--rood); }
.melding.slecht .ic { color: var(--rood); }
.melding.let, .blok.let { background: #fffaf2; border-color: #f1d9ae; border-left-color: var(--geel-merk); }
.melding.let .ic { color: var(--geel); }
.melding.neutraal, .blok.neutraal { background: #f6f9fc; border-color: #cfdceb; border-left-color: var(--blauw); }
.melding.neutraal .ic { color: var(--blauw); }
.blok { display: block; margin: 0; }
.blok > :first-child { margin-top: 0; }
.blok ul { margin: 4px 0; padding-left: 18px; list-style: disc; }
.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 #f1d9ae; border-left: 3px solid var(--geel-merk); color: var(--geel); border-radius: var(--straal); padding: var(--r-3) var(--r-4); font-size: 13.5px; 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: 13.5px; 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: 12.5px; }
.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: 18px; 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(--paneel-2); border: 1px solid var(--lijn); color: var(--inkt-2); 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-tabel); }
.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-label); text-transform: uppercase; letter-spacing: 0.08em; 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: 12px; color: var(--inkt-3); white-space: nowrap; }
.sig-tekst { min-width: 0; overflow-wrap: anywhere; }
.sig-titel { display: block; font-weight: 620; font-size: 14px; text-decoration: none; }
a.sig-titel:hover { text-decoration: underline; }
.sig-detail { margin-top: 2px; font-size: 13px; 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: 13.5px; 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(--rood); 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); }
.tegel:hover { border-color: var(--lijn-sterk); }
.tegel h2 { font-size: 15px; 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: 13px; }

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

/* ---------- 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(3n+1) { border-left: 0; }
  .strook > div:nth-child(n+4) { border-top: 1px solid var(--lijn-zacht); }
  .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) { padding: var(--r-4); border-left: 0; border-top: 1px solid var(--lijn-zacht); }
  .strook > div:nth-child(even) { border-left: 1px solid var(--lijn-zacht); }
  .strook > div:nth-child(-n+2) { border-top: 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); }
  .strook { --cijfer-max: 24px; }
  .strook .cijfer-groot { --cijfer-max: 34px; }
  .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: 12.5px; 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: 13px; 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: 20px; 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-klein); color: var(--inkt-2); overflow-wrap: anywhere; }
.paneel > .exact-kop { margin-inline: 0; margin-top: 0; }
.paneel > .blok-rand { margin: 0; border-radius: 0; border-width: 1px 0 0 3px; }
.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: transparent; text-transform: none; letter-spacing: 0; font-size: inherit; 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: 10px; background: var(--inkt-3); color: #fff; font-size: 11.5px; 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); }
.meldinglijst li.nieuw { box-shadow: inset 3px 0 0 var(--rood); }
.sig-voet { display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-4); align-items: center; margin-top: var(--r-2); font-size: var(--t-klein); color: var(--inkt-3); }
.sig-voet .rij-acties { margin-left: auto; gap: var(--r-4); }
.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: 12px; 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: #f1f2f4; }
.mailkader.kort { height: 420px; }
.mailtekst { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; 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; }
}