@import url('/assets/fonts/fonts.css');

/* =========================================================================
   143 Finance — ontwerpsysteem
   Huisstijl van 143.pt: wit vlak, inkt #111, accentrood #c1121f.
   Rood is een merkaccent, geen foutstatus: fouten hebben altijd ook tekst
   en een icoon.
   ========================================================================= */

:root {
  /* Kleur */
  --rood: #c1121f;            /* merkaccent, 6.4:1 op wit */
  --rood-diep: #970d18;
  --rood-zacht: #fdf2f3;
  --rood-rand: #f2ced1;

  --inkt: #111111;
  --inkt-zacht: #5b6068;      /* 6.1:1 op wit */
  --inkt-flauw: #7b818a;      /* alleen voor niet-essentiele tekst */

  --vlak: #ffffff;
  --vlak-2: #f7f8f9;
  --vlak-3: #eef0f2;
  --rand: #e0e4e8;
  --rand-sterk: #c7cdd4;

  --groen: #0f6b4f;
  --groen-zacht: #eef7f3;
  --groen-rand: #c3e0d4;
  --amber: #8a5a00;
  --amber-zacht: #fdf6e8;
  --amber-rand: #eddcb5;
  --blauw: #1c4f7c;
  --blauw-zacht: #eef4f9;
  --blauw-rand: #c6d9e8;

  /* Ruimte — 4px-raster */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px;

  /* Vorm */
  --radius: 6px;
  --radius-s: 4px;
  --lijn: 1px solid var(--rand);
  --schaduw-paneel: 0 1px 2px rgba(17, 17, 17, 0.05);
  --schaduw-zwevend: 0 6px 24px rgba(17, 17, 17, 0.12);

  /* Typografie */
  --tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --kop-hoogte: 52px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--tekst);
  font-size: 15px;
  line-height: 1.5;
  color: var(--inkt);
  background: var(--vlak-2);
  font-feature-settings: 'cv05' 1;
}

/* Financiële getallen altijd uitgelijnd en even breed. */
.cijfers, td.bedrag, th.bedrag, .bedrag, input[inputmode='decimal'], .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a { color: var(--rood); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rood-diep); }

/* Zichtbare focus overal, ook bij toetsenbordbediening. */
:focus-visible {
  outline: 2px solid var(--rood);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--vlak); color: var(--inkt);
  padding: var(--r3) var(--r4); border: 2px solid var(--rood); z-index: 100;
}
.overslaan:focus { left: var(--r3); top: var(--r3); }

.verborgen-tekst {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- logoteken ----------------------------------------------------------- */
/* Exact het teken van 143.pt; niet aanpassen. */
.merkteken {
  font-family: var(--tekst);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rood);
  line-height: 1;
  white-space: nowrap;
}

.merk {
  display: inline-flex; align-items: baseline; gap: var(--r2);
  text-decoration: none; color: var(--inkt);
}
.merk:hover { color: var(--inkt); }
.merk .merkteken { font-size: 1.05rem; }
.merk .product { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }

/* --- kopbalk en navigatie ------------------------------------------------ */
.kopbalk {
  background: var(--vlak);
  border-bottom: var(--lijn);
  height: var(--kop-hoogte);
  display: flex; align-items: center; gap: var(--r4);
  padding: 0 var(--r4);
  position: sticky; top: 0; z-index: 30;
}
.kopbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r3); }
.kopbalk .wie { font-size: 0.85rem; color: var(--inkt-zacht); }

.hoofdnav {
  background: var(--vlak);
  border-bottom: var(--lijn);
  position: sticky; top: var(--kop-hoogte); z-index: 29;
}
.hoofdnav ul {
  display: flex; gap: 0; margin: 0; padding: 0 var(--r3);
  list-style: none; overflow-x: auto; scrollbar-width: thin;
}
.hoofdnav a {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r3) var(--r3); min-height: 44px;
  color: var(--inkt-zacht); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.hoofdnav a:hover { color: var(--inkt); background: var(--vlak-2); }
.hoofdnav a[aria-current='page'] {
  color: var(--inkt); border-bottom-color: var(--rood); font-weight: 600;
}
.hoofdnav .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; font-size: 0.72rem; font-weight: 600;
  background: var(--vlak-3); color: var(--inkt-zacht);
}
.hoofdnav .badge.aandacht { background: var(--rood-zacht); color: var(--rood-diep); }

/* --- periodebalk --------------------------------------------------------- */
.periodebalk {
  background: var(--vlak); border-bottom: var(--lijn);
  padding: var(--r2) var(--r4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2) var(--r3);
  font-size: 0.86rem;
}
.periodebalk .label { color: var(--inkt-zacht); }
.segment { display: inline-flex; border: var(--lijn); border-radius: var(--radius); overflow: hidden; }
.segment button, .segment a {
  border: 0; background: var(--vlak); color: var(--inkt-zacht);
  padding: 7px 12px; min-height: 36px; font: inherit; font-size: 0.84rem;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  border-right: var(--lijn);
}
.segment > *:last-child { border-right: 0; }
.segment button:hover, .segment a:hover { background: var(--vlak-2); color: var(--inkt); }
.segment [aria-pressed='true'], .segment [aria-current='true'] {
  background: var(--inkt); color: #fff; font-weight: 600;
}

/* --- pagina -------------------------------------------------------------- */
main { padding: var(--r5) var(--r4) var(--r7); max-width: 1440px; margin: 0 auto; }

.paginakop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--r3); margin-bottom: var(--r4); }
.paginakop .titels { flex: 1 1 auto; min-width: 0; }
.paginakop .acties { display: flex; flex-wrap: wrap; gap: var(--r2); }

h1 { font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.02rem; font-weight: 600; margin: var(--r5) 0 var(--r2); }
h3 { font-size: 0.92rem; font-weight: 600; margin: var(--r4) 0 var(--r2); }
.onderkop { color: var(--inkt-zacht); font-size: 0.88rem; margin: var(--r1) 0 0; }

.serif { font-family: var(--serif); font-weight: 500; color: var(--rood); }

/* --- panelen ------------------------------------------------------------- */
.paneel {
  background: var(--vlak); border: var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-paneel); margin-bottom: var(--r4);
}
.paneel > .paneel-kop {
  padding: var(--r3) var(--r4); border-bottom: var(--lijn);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3);
}
.paneel > .paneel-kop h2, .paneel > .paneel-kop h3 { margin: 0; }
.paneel > .paneel-body { padding: var(--r4); }
.paneel > .paneel-body.strak { padding: 0; }
.paneel > .paneel-voet {
  padding: var(--r2) var(--r4); border-top: var(--lijn);
  background: var(--vlak-2); font-size: 0.84rem; color: var(--inkt-zacht);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3);
  border-radius: 0 0 var(--radius) var(--radius);
}

.rij { display: grid; gap: var(--r4); }
@media (min-width: 900px) {
  .rij-2 { grid-template-columns: 1fr 1fr; }
  .rij-3 { grid-template-columns: repeat(3, 1fr); }
  .rij-4 { grid-template-columns: repeat(4, 1fr); }
  .werkblad { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); gap: var(--r4); align-items: start; }
  .zijpaneel { position: sticky; top: calc(var(--kop-hoogte) + 56px); max-height: calc(100vh - var(--kop-hoogte) - 76px); overflow-y: auto; }
}

/* --- kengetallen --------------------------------------------------------- */
.kengetal { padding: var(--r3) var(--r4); }
.kengetal .waarde { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kengetal .naam { color: var(--inkt-zacht); font-size: 0.82rem; margin-top: 2px; }
.kengetal .naam a { color: inherit; }
.kengetal.aandacht .waarde { color: var(--rood); }

/* --- tabellen ------------------------------------------------------------ */
.tabelhouder { overflow: auto; max-height: 68vh; -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.86rem; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--vlak-2); color: var(--inkt-zacht);
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase;
  text-align: left; padding: var(--r2) var(--r3); white-space: nowrap;
  border-bottom: 1px solid var(--rand-sterk);
}
thead th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
thead th a:hover { color: var(--inkt); text-decoration: underline; }
tbody td { padding: var(--r2) var(--r3); border-bottom: var(--lijn); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.klikbaar { cursor: pointer; }
tbody tr.klikbaar:hover { background: var(--vlak-2); }
tbody tr[aria-selected='true'] { background: var(--rood-zacht); box-shadow: inset 3px 0 0 var(--rood); }
td.bedrag, th.bedrag { text-align: right; white-space: nowrap; }
td.negatief { color: var(--rood-diep); }
td.nauw, th.nauw { width: 1%; white-space: nowrap; }
.tabel-compact tbody td { padding: 6px var(--r3); }

.leeg {
  padding: var(--r6) var(--r4); text-align: center; color: var(--inkt-zacht);
}
.leeg .leeg-titel { font-weight: 600; color: var(--inkt); margin-bottom: var(--r1); }
.leeg .leeg-actie { margin-top: var(--r4); }

/* --- knoppen ------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 14px;
  font: inherit; font-size: 0.87rem; font-weight: 500; line-height: 1.2;
  border-radius: var(--radius); border: 1px solid var(--rand-sterk);
  background: var(--vlak); color: var(--inkt); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.knop:hover { background: var(--vlak-2); color: var(--inkt); }
.knop:disabled, .knop[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.knop.primair { background: var(--rood); border-color: var(--rood); color: #fff; font-weight: 600; }
.knop.primair:hover { background: var(--rood-diep); border-color: var(--rood-diep); color: #fff; }
.knop.donker { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.knop.donker:hover { background: #2a2a2a; color: #fff; }
.knop.klein { min-height: 32px; padding: 5px 10px; font-size: 0.8rem; }
.knop.stil { border-color: transparent; background: transparent; color: var(--inkt-zacht); }
.knop.stil:hover { background: var(--vlak-3); color: var(--inkt); }
.knop.gevaar { color: var(--rood-diep); border-color: var(--rood-rand); }
.knop.gevaar:hover { background: var(--rood-zacht); }
.knoprij { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center; }

/* --- formulieren --------------------------------------------------------- */
.veld { margin-bottom: var(--r3); }
.veld > label, .veldlabel {
  display: block; font-size: 0.82rem; font-weight: 500;
  color: var(--inkt); margin-bottom: 4px;
}
.veld .hint { display: block; font-size: 0.78rem; color: var(--inkt-zacht); margin-top: 4px; }
input[type='text'], input[type='password'], input[type='email'], input[type='date'],
input[type='number'], input[type='search'], input[type='month'], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 10px;
  font: inherit; font-size: 0.88rem; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--radius);
}
select { min-height: 40px; }
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--inkt-flauw); }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] {
  border-color: var(--rood); background: var(--rood-zacht);
}
.veldfout {
  display: flex; gap: 6px; align-items: flex-start;
  color: var(--rood-diep); font-size: 0.8rem; margin-top: 4px; font-weight: 500;
}
fieldset { border: var(--lijn); border-radius: var(--radius); padding: var(--r3) var(--r4) var(--r4); margin: 0 0 var(--r4); }
legend { font-size: 0.82rem; font-weight: 600; padding: 0 var(--r2); }
.veldgrid { display: grid; gap: var(--r3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .veldgrid.twee { grid-template-columns: 1fr 1fr; } .veldgrid.drie { grid-template-columns: repeat(3, 1fr); } }
.filterbalk { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: flex-end; }
.filterbalk .veld { margin: 0; min-width: 150px; flex: 1 1 150px; }
.filterbalk .veld.smal { flex: 0 0 auto; min-width: 0; }
.keuze { display: flex; align-items: center; gap: var(--r2); min-height: 40px; }
.keuze input[type='checkbox'], .keuze input[type='radio'] { width: 18px; height: 18px; margin: 0; accent-color: var(--rood); }
.keuze label { margin: 0; font-weight: 400; font-size: 0.86rem; }

.wachtwoordveld { position: relative; }
.wachtwoordveld input { padding-right: 84px; }
.wachtwoordveld button {
  position: absolute; right: 4px; top: 4px; min-height: 32px;
  border: 0; background: transparent; color: var(--inkt-zacht);
  font: inherit; font-size: 0.78rem; cursor: pointer; padding: 0 var(--r2); border-radius: var(--radius-s);
}
.wachtwoordveld button:hover { background: var(--vlak-3); color: var(--inkt); }

/* --- actieve filters ----------------------------------------------------- */
.filterchips { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vlak-3); border: var(--lijn); border-radius: 14px;
  padding: 3px 6px 3px 10px; font-size: 0.78rem; color: var(--inkt);
}
.chip a { color: var(--inkt-zacht); text-decoration: none; line-height: 1; padding: 2px 4px; border-radius: 8px; }
.chip a:hover { background: var(--vlak); color: var(--rood); }

/* --- statuslabels -------------------------------------------------------- */
/* Nooit alleen kleur: elk label draagt ook tekst. */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 11px; font-size: 0.76rem; font-weight: 500;
  border: 1px solid var(--rand); background: var(--vlak-2); color: var(--inkt-zacht);
  white-space: nowrap;
}
.status .punt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.goed { background: var(--groen-zacht); border-color: var(--groen-rand); color: var(--groen); }
.status.wacht { background: var(--amber-zacht); border-color: var(--amber-rand); color: var(--amber); }
.status.fout { background: var(--rood-zacht); border-color: var(--rood-rand); color: var(--rood-diep); }
.status.info { background: var(--blauw-zacht); border-color: var(--blauw-rand); color: var(--blauw); }

/* --- meldingen ----------------------------------------------------------- */
.melding {
  display: flex; gap: var(--r3); align-items: flex-start;
  border: 1px solid var(--rand); border-left-width: 3px;
  border-radius: var(--radius); padding: var(--r3) var(--r4);
  margin-bottom: var(--r4); font-size: 0.87rem; background: var(--vlak);
}
.melding .icoon { flex: 0 0 auto; margin-top: 1px; }
.melding .inhoud { min-width: 0; }
.melding .inhoud strong { display: block; margin-bottom: 2px; }
.melding.goed { border-left-color: var(--groen); background: var(--groen-zacht); }
.melding.wacht { border-left-color: var(--amber); background: var(--amber-zacht); }
.melding.fout { border-left-color: var(--rood); background: var(--rood-zacht); }
.melding.info { border-left-color: var(--blauw); background: var(--blauw-zacht); }

/* --- voortgang ----------------------------------------------------------- */
.balk { height: 6px; background: var(--vlak-3); border-radius: 3px; overflow: hidden; }
.balk > span { display: block; height: 100%; background: var(--rood); border-radius: 3px; transition: width 0.3s ease; }

.uploadlijst { list-style: none; margin: var(--r3) 0 0; padding: 0; }
.uploadlijst li {
  display: flex; gap: var(--r3); align-items: center;
  padding: var(--r2) 0; border-bottom: var(--lijn); font-size: 0.85rem;
}
.uploadlijst li:last-child { border-bottom: 0; }
.uploadlijst .naam { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.uploadlijst .toestand { flex: 0 0 auto; }

.sleepzone {
  border: 1.5px dashed var(--rand-sterk); border-radius: var(--radius);
  background: var(--vlak-2); padding: var(--r6) var(--r4); text-align: center;
}
.sleepzone.actief { border-color: var(--rood); background: var(--rood-zacht); }
.sleepzone .sleep-titel { font-weight: 600; margin-bottom: var(--r1); }
.sleepzone .sleep-hint { color: var(--inkt-zacht); font-size: 0.82rem; }

/* --- documentvoorbeeld --------------------------------------------------- */
.bonvoorbeeld {
  background: var(--vlak-3); border: var(--lijn); border-radius: var(--radius);
  padding: var(--r2); text-align: center;
}
.bonvoorbeeld img { max-width: 100%; height: auto; border-radius: var(--radius-s); background: #fff; display: block; margin: 0 auto; }
.miniatuur { width: 40px; height: 40px; object-fit: cover; border: var(--lijn); border-radius: var(--radius-s); background: #fff; }

.gegevenslijst { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--r3); font-size: 0.85rem; }
.gegevenslijst dt { color: var(--inkt-zacht); }
.gegevenslijst dd { margin: 0; overflow-wrap: anywhere; }

.onderbouwing { margin: var(--r1) 0 0; padding-left: var(--r4); font-size: 0.8rem; color: var(--inkt-zacht); }
.onderbouwing li { margin: 2px 0; }

/* --- paginering ---------------------------------------------------------- */
.paginering { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); font-size: 0.84rem; }
.paginering .telling { color: var(--inkt-zacht); margin-right: auto; }

/* --- dialoog ------------------------------------------------------------- */
dialog {
  border: var(--lijn); border-radius: var(--radius); padding: 0;
  box-shadow: var(--schaduw-zwevend); max-width: min(560px, calc(100vw - 32px));
  color: var(--inkt); background: var(--vlak);
}
dialog::backdrop { background: rgba(17, 17, 17, 0.45); }
dialog .dialoog-kop { padding: var(--r4); border-bottom: var(--lijn); font-weight: 600; }
dialog .dialoog-body { padding: var(--r4); }
dialog .dialoog-voet { padding: var(--r3) var(--r4); border-top: var(--lijn); background: var(--vlak-2); display: flex; gap: var(--r2); justify-content: flex-end; }

/* --- diversen ------------------------------------------------------------ */
.zacht { color: var(--inkt-zacht); font-size: 0.84rem; }
.mono { font-family: var(--mono); font-size: 0.8rem; }
.streep { border: 0; border-top: var(--lijn); margin: var(--r4) 0; }
.uitklap summary { cursor: pointer; font-size: 0.86rem; padding: var(--r2) 0; min-height: 40px; display: flex; align-items: center; }
.uitklap summary::marker { color: var(--inkt-zacht); }

.voettekst {
  color: var(--inkt-zacht); font-size: 0.78rem; text-align: center;
  padding: var(--r6) var(--r4) var(--r7); max-width: 640px; margin: 0 auto;
}

/* --- login --------------------------------------------------------------- */
.loginpagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--r4); background: var(--vlak); }
.loginkaart { width: 100%; max-width: 380px; }
.loginkaart .merkblok { text-align: center; margin-bottom: var(--r5); }
.loginkaart .merkblok .merkteken { font-size: 1.6rem; display: block; margin-bottom: var(--r2); }
.loginkaart .merkblok .welkom { font-family: var(--serif); font-weight: 500; color: var(--rood); font-size: 1.1rem; }
.loginkaart .merkblok .product { color: var(--inkt-zacht); font-size: 0.84rem; margin-top: var(--r1); }

/* --- mobiel -------------------------------------------------------------- */
@media (max-width: 899px) {
  main { padding: var(--r4) var(--r3) var(--r7); }
  h1 { font-size: 1.2rem; }
  .kopbalk { padding: 0 var(--r3); }
  .hoofdnav ul { padding: 0 var(--r2); }
  .tabelhouder { max-height: none; }

  /* Tabellen worden kaarten in plaats van een verkleinde desktoptabel. */
  table.stapel thead { display: none; }
  table.stapel, table.stapel tbody, table.stapel tr, table.stapel td { display: block; width: 100%; }
  table.stapel tr {
    border: var(--lijn); border-radius: var(--radius); margin-bottom: var(--r2);
    padding: var(--r3); background: var(--vlak);
  }
  table.stapel tr[aria-selected='true'] { border-color: var(--rood); box-shadow: inset 3px 0 0 var(--rood); }
  table.stapel td { border: 0; padding: 3px 0; }
  table.stapel td[data-label]::before {
    content: attr(data-label) ' ';
    color: var(--inkt-zacht); font-size: 0.76rem; text-transform: uppercase;
    letter-spacing: 0.02em; display: block;
  }
  table.stapel td.bedrag { text-align: left; font-size: 1.05rem; font-weight: 600; }
  table.stapel td.verberg-mobiel { display: none; }

  .knop { min-height: 44px; }
  .filterbalk .veld { flex-basis: 100%; }
  .paneel > .paneel-body { padding: var(--r3); }
}

@media (max-width: 380px) {
  body { font-size: 14px; }
  .kopbalk .wie { display: none; }
}

@media print {
  .kopbalk, .hoofdnav, .periodebalk, .acties, .knop { display: none !important; }
  body { background: #fff; }
  .paneel { border: 0; box-shadow: none; }
}

/* =========================================================================
   Overgangslaag: schermen die nog de oudere opmaakstructuur gebruiken,
   krijgen dezelfde tokens als de rest van het systeem.
   ========================================================================= */
.legacy-paneel { padding: var(--r4); }
.legacy-paneel > h2:first-child,
.legacy-paneel > h3:first-child { margin-top: 0; }
.legacy-paneel > .tabelhouder { margin: 0 calc(var(--r4) * -1) calc(var(--r4) * -1); }
.legacy-paneel > .tabelhouder:not(:last-child) { margin-bottom: var(--r4); }
.legacy-paneel > .tabelhouder table thead th:first-child,
.legacy-paneel > .tabelhouder table tbody td:first-child { padding-left: var(--r4); }
.legacy-paneel > .tabelhouder table thead th:last-child,
.legacy-paneel > .tabelhouder table tbody td:last-child { padding-right: var(--r4); }

.split { display: grid; gap: var(--r4); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); align-items: start; }
}
.raster { display: grid; gap: var(--r4); }
@media (min-width: 900px) {
  .raster-2 { grid-template-columns: 1fr 1fr; }
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
}
.kengetal .waarde { font-size: 1.55rem; }
.kengetal .label { color: var(--inkt-zacht); font-size: 0.82rem; }

.filterbalk > span { display: block; }
.filterbalk label { display: block; font-size: 0.82rem; font-weight: 500; margin-bottom: 4px; }
.filterbalk > span:not(.veld) { flex: 1 1 150px; min-width: 150px; }
.filterbalk > span.veld.smal { flex: 0 0 auto; min-width: 0; }
.filterbalk > span.veld.smal label { white-space: nowrap; }

table.stapel td[data-label] { }
td.negatief, .bedrag.negatief { color: var(--rood-diep); }

.zacht ul, ul.zacht { padding-left: var(--r4); }
pre.mono { background: var(--vlak-2); border: var(--lijn); border-radius: var(--radius); padding: var(--r3); overflow: auto; }

/* =========================================================================
   Hulpklassen. De Content-Security-Policy staat geen inline style-attributen
   toe; alle opmaak staat daarom hier.
   ========================================================================= */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: var(--r1); }
.mt-2 { margin-top: var(--r2); }
.mt-3 { margin-top: var(--r3); }
.mt-4 { margin-top: var(--r4); }
.mb-2 { margin-bottom: var(--r2); }
.mb-3 { margin-bottom: var(--r3); }
.mb-4 { margin-bottom: var(--r4); }
.my-1 { margin: var(--r1) 0; }
.my-2 { margin: var(--r2) 0; }
.mt-auto-links { margin-left: auto; }
.inline { display: inline; }
.nowrap { white-space: nowrap; }
.voltekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.breed { width: 100%; }
.midden { text-align: center; }
.rij-knoppen { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center; }
.rij-knoppen-klein { display: flex; flex-wrap: wrap; gap: var(--r1); align-items: center; }
.kolom-miniatuur { width: 64px; }
.veld-kort { flex: 0 0 6rem !important; min-width: 6rem !important; }
.veld-breed { flex-basis: 100% !important; }
.veld-medium { min-width: 150px; }

/* Verborgen bestandsinvoer met een zichtbaar label als knop. */
.bestandinvoer {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0);
}
.bestandinvoer:focus-visible + label,
label:has(> .bestandinvoer:focus-visible) { outline: 2px solid var(--rood); outline-offset: 2px; }

/* Blokken met een scheidingslijn erboven (koppelingen, kandidaten). */
.blok-lijn { border-top: var(--lijn); padding-top: var(--r3); margin-top: var(--r3); }
.blok-inspring {
  margin: var(--r2) 0 var(--r2) var(--r3);
  padding-left: var(--r3);
  border-left: 3px solid var(--rand);
}
.blok-opmerking { border-bottom: var(--lijn); padding: var(--r2) 0; }
.blok-opmerking:last-child { border-bottom: 0; }

/* Voorbeeldtekst uit een pdf. */
.tekstvoorbeeld {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--vlak-2); border: var(--lijn); border-radius: var(--radius);
  padding: var(--r3); max-height: 22rem; overflow: auto;
  font-family: var(--mono); font-size: 0.78rem;
}

.bon-mini { max-width: 100%; border: var(--lijn); border-radius: var(--radius-s); }
.leeg-klein { padding: var(--r6) var(--r4); }
.kolommen-2 { columns: 2; column-gap: var(--r5); }
@media (max-width: 640px) { .kolommen-2 { columns: 1; } }
.qr { border: var(--lijn); border-radius: var(--radius); background: #fff; }
.mt-5 { margin-top: var(--r5); }
.klein-tekst { font-size: 0.76rem; }
.veld-5 { flex: 0 0 5rem !important; min-width: 5rem !important; }
.veld-7 { flex: 0 0 7rem !important; min-width: 7rem !important; }
.veld-12 { flex: 0 0 12rem !important; min-width: 12rem !important; }
.gecentreerd { justify-content: center; }
.verborgen { display: none !important; }
.aandacht-tekst { color: var(--rood); }
.kandidaatrij { display: flex; gap: var(--r2); align-items: flex-start; padding: var(--r2) 0; border-bottom: var(--lijn); }
.kandidaatrij:last-child { border-bottom: 0; }
.kandidaattekst { flex: 1 1 auto; min-width: 0; }
.verborgen-frame { display: none; width: 0; height: 0; border: 0; }

/* --- mobiele kaartweergave van een transactie ---------------------------- */
@media (max-width: 899px) {
  /* Datum en bron staan als kopregel naast elkaar; omschrijving en bedrag
     krijgen de nadruk. Alleen de minder vanzelfsprekende velden houden een
     label. */
  table.stapel tr { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--r2); align-items: baseline; }
  table.stapel td { grid-column: 1 / -1; }
  table.stapel td.kaart-kop {
    grid-column: auto; font-size: 0.78rem; color: var(--inkt-zacht);
    text-transform: uppercase; letter-spacing: 0.02em; padding: 0;
  }
  table.stapel td.kaart-kop:nth-of-type(2) { justify-self: end; text-align: right; }
  table.stapel td.kaart-titel { font-weight: 500; padding: 2px 0 0; }
  table.stapel td.kaart-bedrag {
    text-align: left; font-size: 1.15rem; font-weight: 600; padding: 2px 0 6px;
  }
  table.stapel td.kaart-merk { grid-column: auto; padding: 0; }
  table.stapel td.kaart-merk::before { content: none; }
}

/* --- taalkeuze op login -------------------------------------------------- */
.taalkeuze {
  display: flex; justify-content: center; gap: var(--r1);
  margin-bottom: var(--r4);
}
.taalkeuze a {
  padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center;
  border: var(--lijn); border-radius: var(--radius);
  color: var(--inkt-zacht); text-decoration: none; font-size: 0.84rem; background: var(--vlak);
}
.taalkeuze a:hover { background: var(--vlak-2); color: var(--inkt); }
.taalkeuze a[aria-current='true'] { background: var(--inkt); border-color: var(--inkt); color: #fff; font-weight: 600; }
.loginkaart .merkblok .product { color: var(--inkt); font-size: 0.95rem; font-weight: 600; margin-top: var(--r2); }
.h-klein { font-size: 1.05rem; font-weight: 600; margin: 0 0 var(--r3); }