/* Financiële Zaken, het administratieplatform.

   De opmaak volgt financielezaken.nl: dezelfde kleuren, dezelfde lettertypen, dezelfde
   vormtaal (pilknoppen, kaarten met zachte hoeken, een rustige blauwgrijze ondergrond).
   Waar de site ruim is opgezet voor lezers, is dit een werkomgeving: een vaste zijbalk,
   dichtere tabellen, en bovenaan elke cockpit één donkere band waarin de cijfers staan die
   ertoe doen.

   Twee regels die overal doorwerken:
     - er wordt niets van buiten geladen; de lettertypen staan hier zelf;
     - er staat geen enkele stijl in de HTML zelf. De beveiligingskop laat inline stijl niet
       toe, dus alles wat per element verschilt loopt via een klasse of via een SVG-attribuut.
*/

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* ---- 0. Tokens -------------------------------------------------------- */
:root {
  /* Een warme, rustige ondergrond in plaats van koel blauwgrijs: de cijfers staan op wit,
     en het papier eromheen mag zacht zijn. */
  --bg:           #F7F5F1;
  --bg-2:         #F1EEE8;
  --surface:      #F0EDE6;
  --wit:          #FFFFFF;
  --border:       #EAE6DE;
  --border-2:     #D6D1C6;

  --ink:          #0F2231;
  --ink-2:        #2A3B47;
  --ink-3:        #4A5B66;
  --ink-4:        #6B7A84;
  --ink-5:        #9AA6AE;

  --brand:        #1F9E8A;
  --brand-dark:   #188674;
  --brand-ink:    #0F6B5C;
  --brand-tint:   #DDF2EE;
  --brand-knop:   #188473;
  --brand-200:    #7FD6C6;

  --link:         #296EA5;
  --link-tint:    #E7F0F8;

  --signal:       #B04A42;
  --signal-tint:  #F7E7E5;
  --let-op:       #8A5B08;
  --let-op-tint:  #FBF0DC;
  --goed:         #0F6B5C;
  --goed-tint:    #DDF2EE;
  --markering:    #FBF6E3;

  /* Grafiekreeksen op wit. Doorgerekend op onderling verschil, ook bij kleurenblindheid,
     en op contrast met de ondergrond. Een vijfde reeks gaat naar "overig" in grijs. */
  --reeks-1:      #0E9080;
  --reeks-2:      #B57A0A;
  --reeks-3:      #3465D0;
  --reeks-4:      #A83A8C;
  --reeks-rest:   #8A97A8;
  --raster:       #E6ECF3;

  /* Het donkere deel: de zijbalk, en de pagina waarop iemand het pakket voor het eerst ziet.
     Eigen ondergrond, dus eigen reeksen en eigen tekstkleuren. */
  --diep:         #0E1E2B;
  --diep-2:       #0A1722;
  --diep-3:       #13283A;
  --diep-rand:    rgba(255, 255, 255, 0.11);
  --diep-vlak:    rgba(255, 255, 255, 0.055);
  --diep-vlak-2:  rgba(255, 255, 255, 0.09);
  --diep-ink:     #F2F6FA;
  --diep-ink-2:   #C3D2E0;
  --diep-ink-3:   #93A6BC;
  --diep-accent:  #3FD9C0;
  --diep-raster:  rgba(127, 214, 198, 0.13);
  --diep-goed:    #5BE0B5;
  --diep-letop:   #F5B942;
  --diep-signal:  #FF8F87;

  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Bedragen op kaarten staan in de gewone letter met vaste cijferbreedte. Dat leest rustiger
     dan een schrijfmachineletter, en de cijfers blijven toch netjes onder elkaar staan. In
     tabellen blijft de schrijfmachineletter: daar telt het uitlijnen zwaarder dan de toon. */
  --font-getal:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ruimte-1: 4px;  --ruimte-2: 8px;  --ruimte-3: 12px; --ruimte-4: 16px;
  --ruimte-5: 24px; --ruimte-6: 32px; --ruimte-7: 48px;

  --radius-klein: 10px;
  --radius-kaart: 14px;
  --radius-groot: 22px;
  --radius-pil:   999px;
  --schaduw:      0 1px 2px rgba(6, 23, 41, 0.05);
  --schaduw-kaart:0 1px 2px rgba(6, 23, 41, 0.05), 0 8px 22px -14px rgba(6, 23, 41, 0.22);
  --schaduw-hoog: 0 18px 40px rgba(6, 23, 41, 0.10), 0 4px 8px rgba(6, 23, 41, 0.05);
  --zij-breed:    258px;
}

/* ---- 1. Basis --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 var(--ruimte-2); overflow-wrap: break-word;
}
h2 { font-size: 18px; font-weight: 600; color: var(--ink); margin: var(--ruimte-6) 0 var(--ruimte-3); letter-spacing: -0.006em; }
h3 { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: var(--ruimte-5) 0 var(--ruimte-2); }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-weight: 600; }
small, .small { font-size: 13px; }
.muted { color: var(--ink-4); }
.mono { font-family: var(--font-mono); font-size: 0.93em; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.negatief { color: var(--signal); }
.positief { color: var(--goed); }
.narrow { max-width: 680px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand-knop); color: #fff; padding: 10px 16px; border-radius: var(--radius-pil); z-index: 200; font-weight: 600; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--ruimte-5) 0; }
.iconenset { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: block; width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-groot { width: 22px; height: 22px; }
/* Een icoon náást tekst hoort op het optische midden van die tekst te staan, en dat ligt
   iets hoger dan het midden van de regel: de regel loopt door tot onder de staartletters.
   Gemeten verschil is 0,73 pixel; dat is precies genoeg om scheef te lijken. */
.btn .ico, .zij-item .ico, .snel .ico, .kruimel .ico, .opvalt .ico,
.signalen .ico, .acties .ico, .zij-slogan .ico, .voetpunten .ico { transform: translateY(-0.75px); }

/* ---- 2. Kleine hulpklassen -------------------------------------------- */
/* Deze vervangen wat vroeger in style-attributen stond. Ze zijn er alleen voor afstand en
   uitlijning; alles wat met vorm of kleur te maken heeft, heeft een eigen klasse. */
.m0 { margin: 0; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.mt-xs { margin-top: 4px; }
.mt-s { margin-top: 8px; }
.mt-m { margin-top: 12px; }
.mt-l { margin-top: 16px; }
.mt-xl { margin-top: 20px; }
.mt-2xl { margin-top: 28px; }
.mb-xs { margin-bottom: 6px; }
.mb-s { margin-bottom: 8px; }
.mb-m { margin-bottom: 12px; }
.mb-l { margin-bottom: 16px; }
.mb-xl { margin-bottom: 20px; }
.inline { display: inline; }
.rij-dicht { display: flex; gap: 6px; }
.kaal { border: 0; padding: 0; background: none; }
.vlak-blok { border: 0; box-shadow: none; }
.rechts-uit { margin-left: auto; }
.nowrap { white-space: nowrap; }
.links { text-align: left; }
.midden { margin-left: auto; margin-right: auto; }
.groter { font-size: 1.05rem; }
.zacht { opacity: 0.82; }
.min280 { min-width: 280px; }
.max420 { max-width: 420px; }
.max520 { max-width: 520px; }
.k28 { width: 28px; }
.inspring { padding-left: 18px; }
.inspring-l { padding-left: 26px; }
.puntlijst { list-style: disc; padding-left: 20px; margin: 0; }
.scrollijst { max-height: 260px; overflow-y: auto; padding-left: 26px; }
.codeblok { background: var(--surface); padding: 12px 14px; border-radius: var(--radius-klein); overflow-x: auto; }
.veld-markering { background: var(--markering); }
.keuzerij { flex-direction: row; align-items: center; gap: var(--ruimte-2); }
.keuzerij-top { align-items: flex-start; gap: 10px; }
.keuzerij-inline { display: inline-flex; }
.w7 { width: 7%; } .w9 { width: 9%; } .w10 { width: 10%; } .w12 { width: 12%; }
.w13 { width: 13%; } .w14 { width: 14%; } .w15 { width: 15%; } .w16 { width: 16%; }
.w18 { width: 18%; } .w19 { width: 19%; } .w20 { width: 20%; } .w22 { width: 22%; }
.w24 { width: 24%; } .w26 { width: 26%; }

/* ---- 3. De schil: zijbalk en werkblad ---------------------------------- */
.shell { display: flex; min-height: 100vh; align-items: stretch; }

.zijbalk {
  flex: 0 0 var(--zij-breed); width: var(--zij-breed);
  background: linear-gradient(185deg, var(--diep-3) 0%, var(--diep) 34%, var(--diep-2) 100%);
  color: var(--diep-ink-2);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--ruimte-5) var(--ruimte-3) var(--ruimte-4);
  gap: var(--ruimte-4);
}
.zijbalk::-webkit-scrollbar { width: 8px; }
.zijbalk::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 8px; }

/* Het merk zoals op financielezaken.nl: het teken van 30 bij 30 en de naam ernaast in de
   schreefletter van de site, met dezelfde afstand en dezelfde letterafstand. */
.logo-merk { width: 30px; height: 30px; flex: 0 0 auto; }
.logo-merk .vlak { fill: var(--brand-knop); }
.zij-merk { display: flex; align-items: center; gap: 10px; padding: 0 10px var(--ruimte-2); color: #fff; }
.zij-merk:hover { text-decoration: none; }
.zij-merk-tekst { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.zij-merk-tekst b {
  font-family: var(--font-display); font-weight: 400; font-size: 21px;
  letter-spacing: -0.01em; color: #fff; white-space: nowrap;
}
.zij-merk-tekst span { font-size: 11.5px; color: var(--diep-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

/* De administratieschakelaar: het meest gebruikte element van de hele schil. */
.adm-switcher > summary {
  display: flex; align-items: center; gap: var(--ruimte-2);
  padding: 9px 11px; border-radius: var(--radius-klein); cursor: pointer;
  background: var(--diep-vlak); border: 1px solid var(--diep-rand);
  color: var(--diep-ink); font-weight: 600; font-size: 13.5px;
}
.adm-switcher > summary:hover { background: var(--diep-vlak-2); }
.adm-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-switcher .chevron { font-size: 9px; color: var(--diep-ink-3); }
.adm-switcher .badge-code { background: rgba(63, 217, 192, 0.16); color: var(--diep-accent); }
.adm-leeg { color: var(--diep-ink-3); font-weight: 500; }

/* De navigatie: ruim, rustig, en zonder kopjes waar dat kan. Elk item is even hoog, zodat het
   oog er langs glijdt in plaats van te moeten zoeken. */
.zijnav { display: flex; flex-direction: column; gap: 3px; }
.zij-groep {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--diep-ink-3); padding: var(--ruimte-4) 14px var(--ruimte-2);
}
.zij-groep:first-child { padding-top: 0; }
.zij-item {
  display: flex; align-items: center; gap: 13px;
  min-height: 42px; padding: 0 14px; border-radius: var(--radius-klein);
  color: var(--diep-ink-2); font-size: 14.5px; font-weight: 500;
  border: 1px solid transparent;
}
.zij-item:hover { background: var(--diep-vlak); color: #fff; text-decoration: none; }
.zij-item .ico { color: var(--diep-ink-3); width: 20px; height: 20px; }
.zij-item:hover .ico { color: var(--diep-ink-2); }
.zij-item.actief {
  background: linear-gradient(96deg, rgba(31, 158, 138, 0.30) 0%, rgba(31, 158, 138, 0.07) 100%);
  border-color: rgba(63, 217, 192, 0.32);
  color: #fff; font-weight: 600;
}
.zij-item.actief .ico { color: var(--diep-accent); }
.zij-item .teller {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, 0.10); color: var(--diep-ink-2);
  border-radius: var(--radius-pil); padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.zij-item .teller.dringend { background: rgba(255, 143, 135, 0.18); color: var(--diep-signal); }

/* Snelkoppelingen onder een menu-item: dezelfde regel, maar ingesprongen en zonder icoon, zodat
   ze duidelijk bij het item erboven horen en er niet mee concurreren. Het bovenliggende item
   blijft óók oplichten; deze krijgt daarom een rustiger markering dan de volle gradiënt. */
.zij-sub {
  min-height: 34px; margin-left: 16px; padding-left: 16px; font-size: 13.5px; font-weight: 500;
  border-left: 1px solid var(--diep-vlak); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  color: var(--diep-ink-3);
}
.zij-item.zij-sub.actief {
  background: var(--diep-vlak); border-color: transparent;
  border-left: 2px solid var(--diep-accent); padding-left: 15px; color: #fff;
}

/* Onderin de balk: wie er meekijkt, en waar het pakket voor staat. Geen navigatie, wel het
   verschil tussen een kaartenbak en een kantoor dat meedenkt. */
.zij-advies {
  display: flex; align-items: center; gap: 11px; margin-top: auto;
  padding: var(--ruimte-4) 14px var(--ruimte-3); color: var(--diep-ink-2);
  border-top: 1px solid var(--diep-rand);
}
.zij-advies:hover { text-decoration: none; color: #fff; }
.zij-advies .rondje {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--diep-vlak-2); border: 1px solid var(--diep-rand); color: var(--diep-ink-2);
}
.zij-advies .rondje .ico { width: 17px; height: 17px; }
.zij-advies-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.zij-advies-tekst b { font-size: 13.5px; font-weight: 600; color: #fff; }
.zij-advies-tekst span { font-size: 11.5px; color: var(--diep-ink-3); }
.zij-advies .ico-chevron { margin-left: auto; width: 15px; height: 15px; color: var(--diep-ink-3); }
.zij-slogan {
  display: flex; align-items: flex-start; gap: 10px; padding: var(--ruimte-4) 14px 0;
  font-size: 12px; line-height: 1.4; color: var(--diep-ink-3); margin: 0;
}
.zij-slogan .ico { width: 17px; height: 17px; color: var(--diep-accent); flex: 0 0 auto; margin-top: 1px; }

.zij-voet { margin-top: auto; padding-top: var(--ruimte-3); border-top: 1px solid var(--diep-rand); }
.zij-advies + .zij-voet { margin-top: 0; }
.zij-wie { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border-radius: var(--radius-klein); cursor: pointer; }
.zij-wie:hover { background: var(--diep-vlak); }
.zij-wie .avatar { background: rgba(63, 217, 192, 0.16); color: var(--diep-accent); }
.zij-wie-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; }
.zij-wie-tekst b { font-size: 13px; font-weight: 600; color: var(--diep-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zij-wie-tekst span { font-size: 11.5px; color: var(--diep-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.werkblad { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* De smalle kop boven het werkblad: waar je bent, en wat je hier kunt doen. */
/* De kop boven het werkblad: links waar je bent, rechts wie je bent. Geen rand en geen
   eigen kleur — hij hoort bij het papier eronder. */
.werkkop {
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: 64px; padding: var(--ruimte-3) clamp(16px, 2.6vw, 30px);
  background: rgba(247, 245, 241, 0.92); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 40;
}
.kruimel { display: flex; align-items: center; gap: var(--ruimte-3); font-size: 15px; color: var(--ink-4); min-width: 0; }
.kruimel b { color: var(--ink); font-weight: 600; font-size: 15.5px; letter-spacing: -0.012em; }
.kruimel .scheider { color: var(--ink-5); }
.kruimel .badge { font-weight: 500; }
.werkkop-acties { margin-left: auto; display: flex; align-items: center; gap: var(--ruimte-3); }
/* Een kale ronde knop voor meldingen: alleen het teken, geen kader tot je erover gaat. */
.rondknop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; position: relative; flex: 0 0 auto;
}
.rondknop:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.rondknop .ico { width: 19px; height: 19px; }
.rondknop .punt {
  position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 2px var(--bg);
}
/* Het gebruikersblokje rechtsboven: rondje, naam, pijltje. */
.wiemenu > summary { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pil); cursor: pointer; }
.wiemenu > summary:hover { background: var(--bg-2); }
.wiemenu .avatar { background: var(--diep); color: #fff; width: 34px; height: 34px; font-size: 12.5px; }
.wiemenu .wienaam { font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.wiemenu .ico-chevron { width: 15px; height: 15px; color: var(--ink-4); }
@media (max-width: 760px) { .wiemenu .wienaam { display: none; } }
/* De menuknop en het vakje eronder bestaan alleen op een klein scherm; op een groot scherm
   staat de zijbalk er gewoon. Een selectievakje in plaats van script, zodat het menu ook
   werkt als er niets geladen is. */
.zij-schakelaar { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zij-knop {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  flex: 0 0 auto; border-radius: var(--radius-klein); border: 1px solid var(--diep-rand);
  background: var(--diep-vlak); color: var(--diep-ink); cursor: pointer;
}
.zij-knop:hover { background: var(--diep-vlak-2); }
.zij-schakelaar:focus-visible + .zij-knop { outline: 2px solid var(--diep-accent); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- 4. Werkruimte ----------------------------------------------------- */
.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--ruimte-5) clamp(16px, 3vw, 34px) var(--ruimte-7); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ruimte-4); flex-wrap: wrap; margin: 0 0 var(--ruimte-5); }
.page-head h1 { margin: 0; }
.page-head .acties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }
.rapport-kop { margin-bottom: 0; }
.rapport-sub { color: var(--ink-4); font-size: 14px; margin: var(--ruimte-1) 0 var(--ruimte-5); }
/* De doorsnede waarop een rapport gelezen wordt, hoort op te vallen: wie het niet ziet, leest
   een deel van de cijfers aan voor het geheel. */
.rapport-doorsnede {
  font-size: 13px; color: var(--ink-3); margin: calc(-1 * var(--ruimte-2)) 0 var(--ruimte-4);
  padding: var(--ruimte-2) var(--ruimte-3); border-left: 3px solid var(--brand);
  background: var(--brand-tint); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.hint { font-size: 13px; color: var(--ink-4); }
.paginakop-sub { color: var(--ink-4); font-size: 14px; margin: calc(-1 * var(--ruimte-3)) 0 var(--ruimte-5); }

/* ---- 5. Knoppen -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 9px 20px;
  border: 0; border-radius: var(--radius-pil);
  background: var(--brand-knop); color: #fff;
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(0.93); color: #fff; text-decoration: none; }
/* Op een knop staat de tekst in halfvet; een icoon met een dunne lijn valt daarnaast weg. */
.btn .ico { width: 18px; height: 18px; stroke-width: 2.1; }
.btn-primary { background: var(--brand-knop); color: #fff; }
.btn-secondary { background: var(--wit); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-2); }
.btn-secondary:hover { background: var(--surface); color: var(--ink); filter: none; }
/* De open pilknop met een pijl erachter: "Bekijk mutaties →". Hij hoort bij een regel die
   ergens heen wijst, en de pijl zegt dat je daar komt. */
.btn-open {
  background: var(--wit); color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand-200); font-weight: 600;
}
.btn-open:hover { background: var(--brand-tint); color: var(--brand-ink); filter: none; }
.btn-open .ico { width: 15px; height: 15px; stroke-width: 2; }
.btn-klein { min-height: 32px; padding: 5px 14px; font-size: 13px; }
.btn-gevaar { background: var(--signal); }
.btn-block { width: 100%; }
.btn-licht { background: rgba(255, 255, 255, 0.13); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.btn-licht:hover { background: rgba(255, 255, 255, 0.2); filter: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
button.link:hover { text-decoration: underline; }
button.link.small { font-size: 13px; }
button.link.negatief { color: var(--signal); }
.knoppenrij { display: flex; gap: var(--ruimte-3); flex-wrap: wrap; }

.badge-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 21px; padding: 0 7px; border-radius: var(--radius-pil);
  background: var(--brand-tint); color: var(--brand-ink);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-pil); flex: 0 0 auto;
  background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; font-size: 13px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--radius-klein);
  background: var(--brand-knop); color: #fff; font-weight: 700; font-size: 13px;
}
.brand-mark:empty::before { content: "FZ"; }
.chevron { font-size: 9px; color: var(--ink-5); }

/* Uitklapmenu's (schakelaar, gebruikersmenu, "meer") */
details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 244px; max-height: 70vh; overflow-y: auto; padding: var(--ruimte-2);
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  box-shadow: 0 18px 44px rgba(6, 23, 41, 0.22);
}
.menu-panel.menu-rechts { left: auto; right: 0; }
.menu-panel.menu-omhoog { top: auto; bottom: calc(100% + 4px); }
.menu-panel a, .menu-panel button.link {
  display: flex; align-items: center; gap: var(--ruimte-2); width: 100%;
  padding: 8px 11px; border-radius: var(--radius-klein);
  color: var(--ink-2); font-weight: 500; font-size: 14px; text-align: left;
}
.menu-panel a:hover, .menu-panel button.link:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.menu-panel a.actief { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.menu-scheiding { height: 1px; background: var(--border); margin: var(--ruimte-2) var(--ruimte-1); }
.menu-wie { padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; }
.menu-wie small { color: var(--ink-4); }

/* ---- 6. Kaarten en panelen --------------------------------------------- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: var(--ruimte-3); margin-bottom: var(--ruimte-5); }
.kaart, .card {
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw); padding: var(--ruimte-4) var(--ruimte-5);
}
.kaart .label { font-size: 12.5px; color: var(--ink-4); font-weight: 500; }
.kaart .waarde { font-family: var(--font-mono); font-size: 23px; font-weight: 500; color: var(--ink); margin-top: var(--ruimte-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kaart .waarde.negatief { color: var(--signal); }
.kaart .onder { font-size: 12.5px; color: var(--ink-4); margin-top: var(--ruimte-1); }
.kaart .onder .op { color: var(--goed); font-weight: 600; }
.kaart .onder .af { color: var(--signal); font-weight: 600; }
.kaart-breed { grid-column: 1 / -1; }

.blok, .paneel {
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart); padding: var(--ruimte-5); margin-bottom: var(--ruimte-4);
}
.blok > h2, .blok > h3, .paneel > h2, .paneel > h3 { margin-top: 0; }
.blok-kop, .paneel-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ruimte-3); flex-wrap: wrap; margin-bottom: var(--ruimte-4);
}
.blok-kop h2, .blok-kop h3, .paneel-kop h2, .paneel-kop h3 { margin: 0; }
.paneel-kop h3 { font-size: 15.5px; color: var(--ink); }
.paneel-kop .hint { margin: 0; }

/* ---- 7. Tabellen -------------------------------------------------------- */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  overflow: hidden; box-shadow: var(--schaduw); margin-bottom: var(--ruimte-4);
}
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; background: var(--bg); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); font-size: 0.93em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tr.totaal td { border-top: 1px solid var(--border-2); font-weight: 600; color: var(--ink); background: var(--bg); }
.table tr.rubriek td { background: var(--brand-tint); font-weight: 600; color: var(--brand-ink); }
.table .sub td:first-child { padding-left: 30px; }
/* Een kolomkop met een toelichting eronder (welke periode het saldo betreft). */
.table th .kopnoot { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; }
/* Regels die geen rekening zijn maar een uitkomst: het resultaat van het boekjaar op de
   periodebalans, en het verschil dat buiten een doorsnede valt. */
.table tr.resultaatregel td, .table tr.verschilregel td { font-style: italic; }
.table tbody tr:hover td { background: var(--bg); }
.table tbody tr.rubriek:hover td { background: var(--brand-tint); }
.blok > .table:last-child, .paneel > .table:last-child { margin-bottom: 0; }
.regels-tabel input, .regels-tabel select { width: 100%; min-height: 34px; }
.regels-tabel td { padding: 4px 6px; }
.regels-tabel .num input { text-align: right; font-family: var(--font-mono); }
/* Het kruisje om een regel weg te halen. Het staat er alleen als JavaScript meedoet — anders
   zou het een knop zijn die niets doet — en blijft licht tot de muis erboven komt. */
.regel-weg-kop { width: 30px; padding-left: 0 !important; padding-right: 0 !important; }
.regel-weg-cel { width: 30px; text-align: center; vertical-align: middle; padding-left: 0 !important; padding-right: 0 !important; }
.regel-weg {
  color: var(--ink-5); font-size: 18px; line-height: 1;
  padding: 2px 6px !important; border-radius: var(--radius-klein);
}
.regel-weg:hover { color: var(--signal); background: var(--signal-tint); text-decoration: none; }
.scrollbaar { overflow-x: auto; border-radius: var(--radius-kaart); }
/* Een cel met meerdere handelingen naast elkaar: zonder ruimte ertussen lezen ze als één
   woord. */
.table td.rij-acties { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap; }
.maandtabel td, .maandtabel th { padding: 6px 9px; font-size: 12.5px; white-space: nowrap; }
.tweezijdig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-4); align-items: start; }
@media (max-width: 900px) { .tweezijdig { grid-template-columns: 1fr; } }
.leeg {
  padding: var(--ruimte-7) var(--ruimte-5); text-align: center; color: var(--ink-4);
  background: var(--wit); border: 1px dashed var(--border-2); border-radius: var(--radius-kaart); margin-bottom: var(--ruimte-4);
}
.leeg p:last-child { margin-bottom: 0; }

/* Een klant toevoegen midden in het factuurscherm: dicht tenzij je hem nodig hebt, en dan
   een eigen vlak zodat duidelijk is dat deze velden bij elkaar horen. */
.nieuweklant { border: 1px dashed var(--border-2); border-radius: var(--radius-kaart); background: var(--bg-2); margin-bottom: var(--ruimte-4); }
.nieuweklant > summary {
  display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--ink-2); border-radius: var(--radius-kaart);
}
.nieuweklant > summary::-webkit-details-marker { display: none; }
.nieuweklant > summary:hover { color: var(--ink); background: var(--surface); }
.nieuweklant > summary .ico { width: 17px; height: 17px; color: var(--brand-ink); stroke-width: 2; }
.nieuweklant[open] > summary { border-bottom: 1px dashed var(--border-2); border-radius: var(--radius-kaart) var(--radius-kaart) 0 0; }
.nieuweklant-binnen { padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-3); }
.nieuweklant-binnen .form-grid { margin-bottom: var(--ruimte-3); }

/* ---- 8. Formulieren ----------------------------------------------------- */
.filterbar {
  display: flex; gap: var(--ruimte-3); align-items: end; flex-wrap: wrap;
  margin-bottom: var(--ruimte-4); padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
}
.filterbar label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-4); font-weight: 500; }
.filterbar select { max-width: 240px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--ruimte-3) var(--ruimte-4); margin-bottom: var(--ruimte-4); }
.form-grid label, .form > label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; margin-bottom: var(--ruimte-2); }
/* Een veld dat over de hele breedte van het raster loopt: een omschrijving heeft meer plek
   nodig dan een datum, en een halve regel tekst leest slecht. */
.form-grid label.breed { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap; margin-top: var(--ruimte-4); }
input[type=text], input[type=date], input[type=email], input[type=password], input[type=number], input[type=file], input[type=search], select, textarea {
  border: 1px solid var(--border-2); border-radius: var(--radius-klein);
  padding: 8px 12px; font: inherit; font-size: 14.5px;
  background: var(--wit); color: var(--ink); min-height: 40px;
}
input::placeholder, textarea::placeholder { color: var(--ink-5); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-knop); width: 16px; height: 16px; min-height: 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-kaart); padding: var(--ruimte-4); margin: 0 0 var(--ruimte-4); }
legend { padding: 0 var(--ruimte-2); font-weight: 600; color: var(--ink); font-size: 14px; }
.totaalregel {
  display: flex; justify-content: space-between; gap: var(--ruimte-3); align-items: center; flex-wrap: wrap;
  padding: 12px 16px; background: var(--brand-tint); border-radius: var(--radius-klein);
  font-weight: 600; color: var(--brand-ink); margin: var(--ruimte-3) 0;
}
.totaalregel .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.totaalregel .verschil-rechts { display: flex; align-items: center; gap: var(--ruimte-3); }
/* Of de boeking sluit, is het enige wat bij een memoriaal echt telt: dat mag je aan de kleur
   zien zonder het bedrag te lezen. */
.in-evenwicht { color: var(--goed); }
.uit-evenwicht { color: var(--signal); }

/* ---- 8b. Zoekende keuzelijst -------------------------------------------- */
/* Een lange keuzelijst (rekeningschema, relaties) wordt een invoerveld met een lijst eronder
   die meetypt. De <select> eronder blijft bestaan en houdt de waarde vast; zonder JavaScript
   staat die er gewoon, en dan geldt de eerste regel hieronder niet. */
.kiezer { position: relative; display: block; width: 100%; }
.kiezer > select.kiezer-bron { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kiezer-veld { width: 100%; }
.kiezer-veld::placeholder { font-style: italic; }
/* De lijst zweeft los van de pagina: een regeltabel staat op een smal scherm in een schuifbaar
   vak, en een lijst die binnen dat vak valt zou er half achter verdwijnen. Plaats en hoogte
   zet kiezer.js zelf, want die hangen af van waar het veld op dat moment staat. */
.kiezer-lijst {
  position: fixed; z-index: 60;
  max-width: min(460px, calc(100vw - 16px)); overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--wit); border: 1px solid var(--border-2); border-radius: var(--radius-klein);
  box-shadow: 0 12px 28px rgba(14, 30, 43, 0.16);
}
.kiezer-optie {
  display: flex; align-items: baseline; gap: var(--ruimte-2); justify-content: space-between;
  padding: 7px 10px; border-radius: var(--radius-klein);
  font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.kiezer-optie mark { background: var(--markering); color: inherit; font-weight: 600; }
.kiezer-optie.aan { background: var(--brand-tint); color: var(--brand-ink); }
.kiezer-optie .kiezer-groep { font-size: 11.5px; color: var(--ink-5); }
.kiezer-leeg { padding: 9px 10px; font-size: 13.5px; color: var(--ink-4); }
/* In een regeltabel is de cel smal, maar de lijst hoeft dat niet te zijn: de hele naam van een
   rekening moet leesbaar blijven. */
.regels-tabel .kiezer-lijst { min-width: 340px; }
.regels-tabel .kiezer-veld { min-height: 34px; padding: 4px 8px; font-size: 13.5px; }

/* ---- 9. Badges en meldingen --------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius-pil); padding: 3px 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface); color: var(--ink-3); vertical-align: middle;
}
.badge-open, .badge-fs-betaald { background: var(--goed-tint); color: var(--goed); }
.badge-gesloten, .badge-fs-telaat, .badge-fs-gestorneerd { background: var(--signal-tint); color: var(--signal); }
.badge-bron, .badge-fs-open { background: var(--link-tint); color: var(--link); }
.badge-storno, .badge-fs-deels { background: var(--let-op-tint); color: var(--let-op); }
.badge-fs-concept { background: var(--surface); color: var(--ink-4); }
.badge-merk { background: var(--brand-tint); color: var(--brand-ink); }
.badge-oefening { background: var(--let-op-tint); color: var(--let-op); }
.badge-aandacht { background: var(--let-op-tint); color: var(--let-op); }
.badge-fout { background: var(--signal-tint); color: var(--signal); }

.flash { padding: 12px 16px; border-radius: var(--radius-kaart); margin-bottom: var(--ruimte-4); background: var(--wit); border: 1px solid var(--border); color: var(--ink-2); }
.flash-ok { background: var(--goed-tint); border-color: transparent; color: var(--goed); }
.flash-warn { background: var(--let-op-tint); border-color: transparent; color: var(--let-op); }
.flash-info { background: var(--link-tint); border-color: transparent; color: var(--link); }
.flash-fout { background: var(--signal-tint); border-color: transparent; color: var(--signal); }
.flash-invite { background: var(--wit); border-color: var(--border-2); color: var(--ink-2); }
.flash-title { font-weight: 600; margin-bottom: var(--ruimte-1); }
.flash a { color: inherit; text-decoration: underline; }
.copy-row { display: flex; gap: var(--ruimte-2); }
.copy-row input { flex: 1; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 10px);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: var(--radius-pil);
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 90; font-size: 14px; font-weight: 500;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.uitslag-goed, .uitslag-fout { margin: 0 0 var(--ruimte-3); font-weight: 600; padding-left: 14px; border-left: 3px solid; }
.uitslag-goed { color: var(--goed); border-color: var(--goed); }
.uitslag-fout { color: var(--signal); border-color: var(--signal); }
.uitslag-goed:last-child, .uitslag-fout:last-child { margin-bottom: 0; }
.tabel-bevinding td:first-child { white-space: nowrap; vertical-align: top; color: var(--ink-4); }

/* De stroken boven een omgeving die niet echt is. Altijd zichtbaar, nooit te verwarren. */
.demobalk {
  display: flex; align-items: center; justify-content: center; gap: var(--ruimte-3);
  flex-wrap: wrap; padding: 7px 16px;
  background: var(--brand-ink); color: #fff; font-size: 13.5px; font-weight: 500; text-align: center;
}
.demobalk a { color: #fff; text-decoration: underline; }
.oefenbalk { background: var(--let-op); }

/* ---- 10. De kop van een cockpit ------------------------------------------ */
/* Geen band en geen kader: een aanhef op het papier zelf. Een klein opschrift, de naam groot
   in de schreefletter van het merk, en eronder in één regel of de administratie bij is. */
.groetblok {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
  gap: var(--ruimte-5); align-items: start; margin-bottom: clamp(20px, 2.6vw, 30px);
}
@media (max-width: 1040px) { .groetblok { grid-template-columns: 1fr; } }
.groet-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 var(--ruimte-2);
}
.groet-naam {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.02; letter-spacing: -0.022em;
  color: var(--ink); margin: 0; overflow-wrap: break-word;
}
.groet-status {
  display: flex; align-items: flex-start; gap: 10px;
  margin: var(--ruimte-4) 0 0; font-size: 15px; color: var(--ink-3); max-width: 62ch;
}
.groet-status b { color: var(--ink); font-weight: 600; }
.groet-vink {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 25px; height: 25px; border-radius: 50%; background: var(--brand); color: #fff; margin-top: 0;
}
.groet-vink .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.groet-vink.let-op { background: var(--let-op); }
.groet-vink.ernstig { background: var(--signal); }
.groet-acties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; margin-top: var(--ruimte-4); }

/* De kaart naast de aanhef: wie er meekijkt, en wat dat betekent. */
.advieskaart {
  display: flex; align-items: center; gap: var(--ruimte-4); flex-wrap: wrap;
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart); padding: var(--ruimte-4) var(--ruimte-5);
}
.advieskaart-tekst { flex: 1 1 220px; min-width: 0; }
.advieskaart-tekst h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.advieskaart-tekst p { margin: 0; font-size: 13.5px; color: var(--ink-4); line-height: 1.5; }
.advieskaart .btn { flex: 0 0 auto; }
.portret {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-ink) 100%);
  color: #fff; font-family: var(--font-display); font-size: 23px; letter-spacing: 0.01em;
}
.portret-klein { width: 44px; height: 44px; font-size: 17px; }

/* ---- 10a. De kerngetallen ------------------------------------------------ */
/* Vier of vijf kaarten naast elkaar. Elk met een teken, een naam, het bedrag, de verandering
   en onder een streep de zin die zegt wat je eraan hebt. */
.kernrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); }
.kernrij-vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1420px) { .kernrij-vijf { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.kern {
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart); padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-4);
  display: flex; flex-direction: column; min-width: 0;
}
/* De kop krijgt een vaste hoogte: een naam die over twee regels loopt mag het bedrag in die
   ene kaart niet lager zetten dan in alle andere. */
.kern-kop { display: flex; align-items: center; gap: 11px; margin-bottom: var(--ruimte-4); min-height: 38px; }
.kern-teken {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink);
}
.kern-teken .ico { width: 17px; height: 17px; }
.kern-naam { font-size: 14.5px; font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em; line-height: 1.25; }
/* Ook de regel onderaan krijgt een vaste hoogte, zodat de streep in elke kaart op dezelfde
   lijn ligt, of er nu één of twee regels onder staan. */
.kern-voet { min-height: 40px; align-items: flex-start; }
.kern-getal {
  font-family: var(--font-getal); font-size: clamp(22px, 1.9vw, 27px); font-weight: 500;
  color: var(--ink); letter-spacing: -0.028em; font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kern-getal.min { color: var(--signal); }
.kern-delta { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.kern-delta .pijl { display: inline-flex; }
.kern-delta .pijl .ico { width: 14px; height: 14px; stroke-width: 2; }
.kern-delta .waarde { font-weight: 600; }
.kern-delta.op { color: var(--goed); }
.kern-delta.af { color: var(--signal); }
.kern-delta.vlak { color: var(--ink-4); }
.kern-delta .erbij { color: var(--ink-4); font-weight: 400; }
.kern-delta.af .pijl .ico { transform: scaleY(-1); }
.kern-voet {
  margin-top: auto; padding-top: var(--ruimte-4); margin-top: var(--ruimte-4);
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-4); display: flex; align-items: center; gap: var(--ruimte-2);
}
.kern-voet .ico { width: 15px; height: 15px; margin-left: auto; color: var(--ink-5); }
a.kern:hover { border-color: var(--brand-200); text-decoration: none; }
a.kern:hover .kern-voet .ico { color: var(--brand); }
.kern-uit { background: linear-gradient(160deg, #F1F9F7 0%, var(--wit) 58%); border-color: #CFE6DE; }

/* ---- 10b. Wat vandaag aandacht vraagt ------------------------------------ */
/* Een eigen vlak met een zachte tint, zodat het opvalt zonder te schreeuwen. Elke regel is
   een zin plus een knop die precies daarheen gaat. */
.aandacht {
  background: #F1F6F5; border: 1px solid #E2ECE9; border-radius: var(--radius-kaart);
  padding: var(--ruimte-5); margin-bottom: var(--ruimte-4);
}
.aandacht-kop { display: flex; align-items: center; gap: 11px; margin-bottom: var(--ruimte-4); }
.aandacht-kop h3 { margin: 0; font-size: 17.5px; color: var(--ink); letter-spacing: -0.012em; }
.aandacht-kop .kern-teken { background: transparent; color: var(--brand-ink); width: 30px; height: 30px; }
.aandacht-kop .kern-teken .ico { width: 21px; height: 21px; }
.aandacht-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aandacht-rij {
  display: flex; align-items: center; gap: var(--ruimte-3);
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-klein);
  padding: 14px 16px;
}
.aandacht-rij .kern-teken { width: 38px; height: 38px; background: var(--bg-2); color: var(--ink-3); }
.aandacht-tekst { flex: 1 1 auto; min-width: 0; }
.aandacht-tekst strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.aandacht-tekst span { display: block; font-size: 13px; color: var(--ink-4); line-height: 1.45; }
.aandacht-rij .btn { flex: 0 0 auto; }
.aandacht-rij .bedrag { font-family: var(--font-getal); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aandacht-rij.nu .kern-teken { background: var(--signal-tint); color: var(--signal); }
.aandacht-rij.binnenkort .kern-teken { background: var(--let-op-tint); color: var(--let-op); }
.aandacht-rij.goed { background: #E7F3EE; border-color: #CFE6DA; }
.aandacht-rij.goed .kern-teken { background: var(--brand); color: #fff; }
.aandacht-rij.goed .aandacht-tekst strong { color: var(--goed); }
.aandacht-rij.goed .aandacht-tekst span { color: var(--brand-ink); }

/* ---- 10c. Lijstjes: berichten en deadlines ------------------------------- */
.lijstkaart { list-style: none; margin: 0; padding: 0; display: grid; }
.lijstkaart li { display: flex; align-items: center; gap: var(--ruimte-3); padding: 13px 0; border-bottom: 1px solid var(--border); }
.lijstkaart li:last-child { border-bottom: 0; padding-bottom: 0; }
.lijstkaart li:first-child { padding-top: 0; }
.lijstkaart .kern-teken { width: 34px; height: 34px; background: var(--bg); color: var(--ink-3); }
.lijst-tekst { flex: 1 1 auto; min-width: 0; }
.lijst-tekst strong { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
.lijst-tekst span { display: block; font-size: 12.5px; color: var(--ink-4); }
.lijst-datum { font-size: 12.5px; color: var(--ink-5); white-space: nowrap; }

.deadlines { list-style: none; margin: 0; padding: 0; display: grid; }
.deadlines li { display: flex; align-items: center; gap: var(--ruimte-3); padding: 12px 0; border-bottom: 1px solid var(--border); }
.deadlines li:last-child { border-bottom: 0; padding-bottom: 0; }
.deadlines li:first-child { padding-top: 0; }
.deadlines .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
.deadlines li.nu .stip { background: var(--signal); }
.deadlines li.binnenkort .stip { background: var(--let-op); }
.deadlines .wat { flex: 1 1 auto; font-size: 14px; color: var(--ink-2); }
.deadlines .wanneer { font-size: 13px; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- 10d. De strook onderaan -------------------------------------------- */
.voetbanner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ruimte-5);
  align-items: center; margin-top: var(--ruimte-6);
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-groot);
  box-shadow: var(--schaduw-kaart); padding: var(--ruimte-5) clamp(20px, 3vw, 34px);
}
@media (max-width: 1040px) { .voetbanner { grid-template-columns: 1fr; } }
.voetbanner .portret { width: 74px; height: 74px; font-size: 26px; }
.voetbanner-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 var(--ruimte-2); }
.voetbanner h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--ruimte-2); }
.voetbanner p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 58ch; }
.voetbanner-rechts { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }
.voetpunten { list-style: none; margin: 0; padding: 0 0 0 clamp(16px, 3vw, 34px); border-left: 1px solid var(--border); display: grid; gap: 11px; }
.voetpunten li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-3); }
.voetpunten .ico { width: 17px; height: 17px; color: var(--brand); }
@media (max-width: 1040px) { .voetpunten { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: var(--ruimte-4); } }

/* Het hoofdraster van een cockpit: links het beeld, rechts wat er moet gebeuren. De rechter
   kolom loopt door over beide rijen, zodat de aandachtslijst niet halverwege afbreekt. */
.dashraster { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: var(--ruimte-4); align-items: start; margin-bottom: var(--ruimte-4); }
.dash-links, .dash-rechts { display: grid; gap: var(--ruimte-4); align-content: start; min-width: 0; }
.dash-links > .paneel, .dash-rechts > .paneel { margin-bottom: 0; }
@media (max-width: 1180px) { .dashraster { grid-template-columns: 1fr; } }

/* ---- 10e. De grafiekkop met een verschilchip ----------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px;
  border-radius: var(--radius-pil); font-size: 12.5px; font-weight: 600;
  background: var(--brand-tint); color: var(--brand-ink);
}
.chip.af { background: var(--signal-tint); color: var(--signal); }
.chip.vlak { background: var(--surface); color: var(--ink-3); }
.chip-bij { font-size: 12px; color: var(--ink-4); margin-left: var(--ruimte-2); }

/* ---- 10b. Advies: acties, rekensom, kasstroom ---------------------------- */
/* De lijst "wat u nu kunt doen". Elke regel heeft een kop, een uitleg en soms een bedrag:
   een melding zonder uitleg leidt tot een telefoontje in plaats van tot een handeling. */
.acties { list-style: none; margin: 0 0 var(--ruimte-4); padding: 0; display: grid; gap: var(--ruimte-2); }
.acties li {
  display: flex; gap: var(--ruimte-3); align-items: flex-start;
  padding: 13px 16px; border-radius: var(--radius-klein);
  background: var(--bg); border-left: 3px solid var(--border-2);
}
.acties li .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-4); }
.acties .actie-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acties .actie-tekst strong { font-size: 14.5px; color: var(--ink); }
.acties .actie-tekst span { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.acties .erbij { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.acties li.ernstig { background: var(--signal-tint); border-left-color: var(--signal); }
.acties li.ernstig .ico, .acties li.ernstig .actie-tekst strong, .acties li.ernstig .erbij { color: var(--signal); }
.acties li.ernstig .actie-tekst span { color: #7E3B35; }
.acties li.ernstig a { color: inherit; }
.acties li.let-op { background: var(--let-op-tint); border-left-color: var(--let-op); }
.acties li.let-op .ico, .acties li.let-op .actie-tekst strong, .acties li.let-op .erbij { color: var(--let-op); }
.acties li.let-op .actie-tekst span { color: #6B4A12; }
.acties li.let-op a { color: inherit; }
.acties li.goed { background: var(--goed-tint); border-left-color: var(--goed); }
.acties li.goed .ico, .acties li.goed .actie-tekst strong { color: var(--goed); }
.acties li.goed .actie-tekst span { color: var(--brand-ink); }

/* Wat opvalt: observaties, geen taken. Een pijl omhoog of omlaag en verder rustig. */
.opvalt { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-3); }
.opvalt li { display: flex; gap: var(--ruimte-3); align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.opvalt .ico { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; }
.opvalt li.op .ico { color: var(--goed); }
.opvalt li.af .ico { color: var(--let-op); transform: scaleY(-1); }

/* Een rekensom die de klant kan narekenen: labels links, bedragen rechts, de uitkomst
   afgestreept. Geen tabelrand: het is een som, geen overzicht. */
.rekensom { width: 100%; border-collapse: collapse; margin-bottom: var(--ruimte-4); }
.rekensom td { padding: 7px 0; font-size: 14px; color: var(--ink-3); border: 0; }
.rekensom td.num { text-align: right; font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rekensom tr.uitkomst td { border-top: 1px solid var(--border-2); padding-top: 11px; font-weight: 600; color: var(--ink); font-size: 15px; }

.advies {
  background: var(--brand-tint); border-radius: var(--radius-klein);
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-3); margin-bottom: var(--ruimte-3);
}
.advies-getal {
  font-family: var(--font-mono); font-size: clamp(26px, 3vw, 34px); font-weight: 500;
  color: var(--brand-ink); letter-spacing: -0.03em; margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums;
}
/* Staat er geen bedrag maar een oordeel, dan hoort dat niet in cijferletters. */
.advies-oordeel {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 400;
  color: var(--brand-ink); letter-spacing: -0.015em; margin: 0; line-height: 1.15;
}
.advies-tekst { margin: var(--ruimte-2) 0 0; font-size: 13.5px; color: var(--brand-ink); line-height: 1.5; }
.advies-tekst strong { color: var(--brand-ink); }
.advies.tekort { background: var(--let-op-tint); }
.advies.tekort .advies-oordeel, .advies.tekort .advies-tekst, .advies.tekort .advies-tekst strong { color: var(--let-op); }
.paneel-uitgelicht { border-color: var(--brand-200); }

/* De kasstroom van de komende dertig dagen: vijf stappen onder elkaar, met de uitkomst
   apart. Onder elkaar en niet naast elkaar, want het is een optelling. */
.stroomrij { display: grid; gap: 1px; background: var(--border); border-radius: var(--radius-klein); overflow: hidden; }
.stroom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 2px var(--ruimte-3); padding: 11px 14px; background: var(--wit);
}
.stroom-label { font-size: 13.5px; color: var(--ink-3); }
.stroom-getal { font-family: var(--font-mono); font-size: 15px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.stroom-onder { grid-column: 1 / -1; font-size: 12px; color: var(--ink-5); }
.stroom.op .stroom-getal { color: var(--goed); }
.stroom.af .stroom-getal { color: var(--signal); }
.stroom.uitkomst { background: var(--bg); }
.stroom.uitkomst .stroom-label { font-weight: 600; color: var(--ink); }
.stroom.uitkomst .stroom-getal { font-size: 18px; font-weight: 500; }

/* Eén groot getal met zijn verandering ernaast. */
.groot-getal {
  display: flex; align-items: baseline; gap: var(--ruimte-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: clamp(26px, 3vw, 36px); font-weight: 500;
  color: var(--ink); letter-spacing: -0.03em; margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.groot-getal .verschil { font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.groot-getal .verschil.op { color: var(--goed); }
.groot-getal .verschil.af { color: var(--signal); }
.groot-onder { margin: var(--ruimte-2) 0 var(--ruimte-4); font-size: 14px; color: var(--ink-3); }

/* Het bericht zoals de klant het leest, in de proefweergave voor de boekhouder. */
.bericht-proef {
  font-family: var(--font-display); font-size: 18px; line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--brand-200); padding-left: var(--ruimte-4); margin: 0 0 var(--ruimte-4);
}

/* Een tekst om over te nemen (een herinnering, een bericht). */
.overneemvak {
  width: 100%; resize: vertical; font-size: 13px; line-height: 1.6;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-klein);
}

/* ---- 11. Cijferkaarten op wit -------------------------------------------- */
.cijferrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.cijfer {
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw); padding: var(--ruimte-4) var(--ruimte-5); display: flex; flex-direction: column; gap: 2px;
}
.cijfer .titel { font-size: 12.5px; color: var(--ink-4); font-weight: 500; }
.cijfer .getal {
  font-family: var(--font-mono); font-size: clamp(20px, 2.1vw, 25px); font-weight: 500;
  color: var(--ink); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cijfer .getal.min { color: var(--signal); }
.cijfer .toelichting { font-size: 12.5px; color: var(--ink-4); line-height: 1.45; }
.cijfer .verschil { font-size: 12.5px; font-weight: 600; }
.cijfer .verschil.op { color: var(--goed); }
.cijfer .verschil.af { color: var(--signal); }
.cijfer .verschil.vlak { color: var(--ink-4); }
.balkje { display: block; width: 100%; height: 6px; margin-top: var(--ruimte-2); }

/* ---- 12. Grafieken ------------------------------------------------------- */
.paneelrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); align-items: stretch; }
.paneelrij > .paneel, .paneelrij > .blok { display: flex; flex-direction: column; margin-bottom: 0; }
.paneelrij > .paneel > .hint:last-child, .paneelrij > .blok > .hint:last-child { margin-top: auto; padding-top: var(--ruimte-3); margin-bottom: 0; }
.paneelrij-2-1 { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); align-items: start; }
.paneelrij-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); align-items: start; }
@media (max-width: 1080px) { .paneelrij-2-1, .paneelrij-1-2 { grid-template-columns: 1fr; } }
/* Oude naam, nog in gebruik op enkele schermen. */
.grafiekrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); align-items: stretch; }
.grafiekrij.breed { grid-template-columns: 1fr; }
.grafiekrij > .blok { display: flex; flex-direction: column; margin-bottom: 0; }
.grafiekrij > .blok > .hint:last-child { margin-top: auto; padding-top: var(--ruimte-3); margin-bottom: 0; }

.grafiek { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.grafiek text { font-family: var(--font-ui); fill: var(--ink-4); }
.grafiek .as { font-size: 11px; }
.grafiek .waardelabel { font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.grafiek .balklabel { font-family: var(--font-mono); font-size: 11.5px; fill: #fff; font-weight: 500; }
.grafiek .rasterlijn { stroke: var(--raster); stroke-width: 1; }
.grafiek .nullijn { stroke: var(--border-2); }
.grafiek .lijn { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grafiek .punt { stroke: var(--wit); stroke-width: 2; }
.grafiek .ringspoor { stroke: var(--surface); }
/* De tekstgrootte in een ring komt uit het attribuut, want die hangt aan de maat van de ring. */
.grafiek .ringgetal { font-family: var(--font-mono); font-weight: 500; fill: var(--ink); letter-spacing: -0.02em; }
.grafiek .ringonder { fill: var(--ink-4); }
.grafiek .staafje { transition: opacity 0.12s ease; }
.grafiek .staafje:hover { opacity: 0.78; }
.grafiek.spark { width: auto; flex: 0 0 auto; }

.grafiek-donker text { fill: var(--diep-ink-3); }
.grafiek-donker .waardelabel { fill: var(--diep-ink); }
.grafiek-donker .rasterlijn { stroke: var(--diep-raster); }
.grafiek-donker .nullijn { stroke: rgba(255, 255, 255, 0.24); }
.grafiek-donker .punt { stroke: var(--diep); }
.grafiek-donker .ringspoor { stroke: rgba(255, 255, 255, 0.13); }
.grafiek-donker .ringgetal { fill: #fff; }
.grafiek-donker .ringonder { fill: var(--diep-ink-3); }

.legenda { display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-4); margin: 0 0 var(--ruimte-3); font-size: 13px; color: var(--ink-3); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda-vlek { width: 10px; height: 10px; flex: 0 0 auto; display: inline-block; }
.legenda-staand { flex-direction: column; gap: 9px; margin: 0; }
.legenda-donker { color: var(--diep-ink-2); }
.grafiek-leeg { padding: var(--ruimte-6); text-align: center; color: var(--ink-4); font-size: 13.5px; }

.donutrij { display: flex; align-items: center; gap: var(--ruimte-5); flex-wrap: wrap; }
.donutrij .grafiek { width: 190px; flex: 0 0 auto; }
.donutrij .legenda { flex: 1 1 200px; }

/* Liggende balken: naam, bedrag en aandeel boven, de balk eronder. Zo blijft de tekst
   leesbaar en hoeft de balk niet te concurreren met een kolombreedte. */
.balkenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.balkenlijst li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px var(--ruimte-3); align-items: baseline; }
.balk-naam { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balk-bedrag { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.balk-aandeel { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.balk-spoor { grid-column: 1 / -1; display: block; height: 8px; background: var(--surface); border-radius: var(--radius-pil); overflow: hidden; }
.balk { display: block; width: 100%; height: 8px; }
.balkenlijst-dun { gap: 10px; }

/* ---- 13. Signalen en taken ---------------------------------------------- */
.signalen { list-style: none; margin: 0 0 var(--ruimte-4); padding: 0; display: grid; gap: var(--ruimte-2); }
.signalen li {
  display: flex; gap: var(--ruimte-3); align-items: flex-start;
  padding: 12px 15px; border-radius: var(--radius-klein);
  background: var(--bg); font-size: 14px; border-left: 3px solid var(--border-2);
}
.signalen li .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--ink-4); }
.signalen li.let-op { background: var(--let-op-tint); color: var(--let-op); border-left-color: var(--let-op); }
.signalen li.let-op .ico { color: var(--let-op); }
.signalen li.ernstig { background: var(--signal-tint); color: var(--signal); border-left-color: var(--signal); }
.signalen li.ernstig .ico { color: var(--signal); }
.signalen li.goed { background: var(--goed-tint); color: var(--goed); border-left-color: var(--goed); }
.signalen li.goed .ico { color: var(--goed); }
.signalen li strong { color: inherit; }
.signalen li a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.signalen li .erbij { margin-left: auto; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* De takenlijst op de kantoorcockpit. */
.taakgroep { margin-bottom: var(--ruimte-4); }
.taakgroep:last-child { margin-bottom: 0; }
.taakkop { display: flex; align-items: center; gap: var(--ruimte-2); margin: 0 0 var(--ruimte-2); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-4); }
.taakkop .telling { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; background: var(--surface); color: var(--ink-3); border-radius: var(--radius-pil); padding: 1px 8px; font-size: 11.5px; }
.taakkop.nu { color: var(--signal); }
.taakkop.nu .telling { background: var(--signal-tint); color: var(--signal); }
.taakkop.binnenkort { color: var(--let-op); }
.taakkop.binnenkort .telling { background: var(--let-op-tint); color: var(--let-op); }
.taaklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border); border-radius: var(--radius-klein); overflow: hidden; }
.taaklijst li { display: flex; align-items: flex-start; gap: var(--ruimte-3); padding: 11px 14px; background: var(--wit); font-size: 14px; }
.taaklijst li:hover { background: var(--bg); }
.taaklijst .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-5); flex: 0 0 auto; margin-top: 7px; }
.taaklijst li.nu .stip { background: var(--signal); }
.taaklijst li.binnenkort .stip { background: var(--let-op); }
.taaklijst .taak-tekst { min-width: 0; flex: 1; }
.taaklijst .taak-tekst a { color: var(--ink); font-weight: 500; }
.taaklijst .taak-waar { font-size: 12.5px; color: var(--ink-4); }
.taaklijst .taak-bedrag { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Snelkoppelingen: wat je hier het vaakst doet, als knoppenraster. */
.snelrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--ruimte-2); }
.snel {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-klein);
  color: var(--ink-2); font-size: 14px; font-weight: 500;
}
.snel:hover { border-color: var(--brand-200); background: var(--brand-tint); color: var(--brand-ink); text-decoration: none; }
.snel .ico { color: var(--ink-4); }
.snel:hover .ico { color: var(--brand-ink); }

/* ---- 14. Klantportaal ---------------------------------------------------- */
.portaal-kop { background: var(--wit); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.portaal-kop .binnen {
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
  display: flex; align-items: center; gap: var(--ruimte-4); min-height: 64px;
}
.portaal-kop .brand-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.portaal-kop .wie { margin-left: auto; display: flex; align-items: center; gap: var(--ruimte-3); font-size: 13.5px; color: var(--ink-4); white-space: nowrap; }
.portaal-nav { display: flex; gap: var(--ruimte-1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.portaal-nav::-webkit-scrollbar { display: none; }
.portaal-nav a { white-space: nowrap; }
.portaal-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pil); color: var(--ink-3); font-weight: 500; font-size: 14.5px; }
.portaal-nav a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.portaal-nav a.active { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.portaal-nav .ico { width: 17px; height: 17px; }
.portaal-inhoud { max-width: 1180px; margin: 0 auto; padding: var(--ruimte-5) clamp(16px, 4vw, 40px) var(--ruimte-7); }
.portaal-intro { font-size: 16px; color: var(--ink-3); max-width: 65ch; margin: calc(-1 * var(--ruimte-2)) 0 var(--ruimte-5); }

.uploadvak { border: 1px dashed var(--border-2); border-radius: var(--radius-kaart); background: var(--wit); padding: var(--ruimte-5); text-align: center; }
.uploadvak input[type=file] { margin: var(--ruimte-3) 0; }

.vraag { background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart); padding: var(--ruimte-4) var(--ruimte-5); margin-bottom: var(--ruimte-3); }
.vraag.beantwoord { background: var(--bg); }
.vraag .stelling { font-weight: 600; color: var(--ink); margin-bottom: var(--ruimte-1); }
.vraag .herkomst { font-size: 12.5px; color: var(--ink-4); margin-bottom: var(--ruimte-3); }
.vraag .antwoord { background: var(--brand-tint); border-radius: var(--radius-klein); padding: 10px 14px; font-size: 14px; color: var(--brand-ink); }

/* ---- 15. Inloggen, inrichten en de pagina voor wie het pakket bekijkt ----- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ruimte-5); background: var(--bg); }
.auth-card { width: 100%; max-width: 440px; background: var(--wit); border: 1px solid var(--border); border-radius: var(--radius-kaart); box-shadow: var(--schaduw-hoog); padding: var(--ruimte-6); }
.auth-card .form { display: flex; flex-direction: column; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; margin-bottom: var(--ruimte-3); }
.auth-card .btn { width: 100%; margin-top: var(--ruimte-1); }
.auth-card h1 { font-size: 26px; }
.brand-auth { display: flex; align-items: center; gap: var(--ruimte-3); margin-bottom: var(--ruimte-5); color: var(--ink); }
.brand-text { display: flex; flex-direction: column; font-weight: 600; font-size: 16px; line-height: 1.3; }
.brand-text small { color: var(--ink-4); font-weight: 400; }
.auth-onder { margin-top: var(--ruimte-5); padding-top: var(--ruimte-4); border-top: 1px solid var(--border); font-size: 13.5px; color: var(--ink-4); }

/* ---- 15b. De inlogpagina: de voordeur (ontwerp 2.0) ---------------------- */
/* Volgt "Design app 2.0": een diepblauw vlak met het merk linksboven, daaronder een vette
   schreefloze kop, de slogan en een korte uitleg, en het formulier op een witte kaart. De
   blauwtinten zijn uit het ontwerp bemonsterd (#0B2B5F bovenin, #053369 in het midden).
   Dit is bewust géén variant op de proefpagina: die houdt de oude donkerblauwgroene stijl,
   zodat hier te zien is hoe het nieuwe ontwerp staat zonder de rest van de app te verbouwen.

   Over het groen: het ontwerp gebruikt #01B563. Met witte letters erop komt dat op 2,7:1 aan
   contrast en dat is te weinig om prettig te lezen (AA vraagt 4,5:1 voor gewone tekst).
   De knop staat daarom op #0B8544: dezelfde grasgroene familie, maar 4,7:1. Het felle groen
   uit het ontwerp komt terug als accent, op plekken zonder tekst erop. */
.auth-page-inlog {
  display: block; padding: 0; align-items: stretch;
  --d2-groen: #0B8544;
  --d2-groen-op: #096E38;
  --d2-groen-fel: #01B563;
  --d2-blauw: #0B2B5F;
  --d2-blauw-fel: #2B8CFD;
  --d2-ink-2: #C3D6EC;
  --d2-ink-3: #93AECE;
  background-color: var(--d2-blauw); color: var(--d2-ink-2);
  /* Onderin het ontwerp staat een foto van een kantoorpand in de avond. Die afbeelding is er
     nog niet; tot die er is, staat hier alleen het blauwe verloop. Bewust NIET de horizon van
     de proefpagina: die svg heeft een eigen gevuld vlak en trekt een harde streep dwars over
     de pagina, in een teal die met dit blauw vloekt.
     Zodra de foto er is, gaat hij hier als eerste laag bij:
       url('../img/kantoor.jpg') met background-size: cover en position: center bottom,
     met daarboven het donkere verloop zodat de tekst leesbaar blijft. */
  background-image:
    linear-gradient(to bottom, rgba(6, 30, 66, 0) 0%, rgba(5, 24, 54, 0.45) 62%, rgba(4, 18, 42, 0.88) 100%),
    linear-gradient(168deg, #0B2B5F 0%, #073A78 46%, #052A56 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.inlog {
  min-height: 100vh; max-width: 1080px; margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}

/* Het merk linksboven: teken, naam en de slogan eronder, als één blok. */
.inlog-merklock { display: flex; align-items: center; gap: 12px; }
.inlog-merklock .logo-merk { width: 42px; height: 42px; }
/* In het ontwerp is het merkteken blauw, niet groen; groen is er de kleur van de actieknop.
   Dit is nog het bestaande staafjes-teken van financielezaken.nl in de nieuwe kleur — het
   "F"-teken uit het ontwerp is een eigen tekening en moet als bestand worden aangeleverd. */
.inlog-merklock .logo-merk .vlak { fill: var(--d2-blauw-fel); }
.inlog-woordmerk { display: flex; flex-direction: column; line-height: 1.25; }
.inlog-woordmerk b { color: #fff; font-weight: 600; font-size: clamp(19px, 2.4vw, 23px); letter-spacing: -0.01em; }
.inlog-woordmerk span { color: var(--d2-ink-3); font-size: 13.5px; }

/* De kop is in dit ontwerp schreefloos en vet. font-family moet er expliciet bij: de globale
   h1-regel zet de schreefletter (--font-display), en alleen font-weight veranderen laat die
   staan. */
.inlog-titel {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(31px, 4.6vw, 50px); line-height: 1.1; letter-spacing: -0.025em;
  color: #fff; margin: clamp(26px, 4vw, 44px) 0 var(--ruimte-3);
}
.inlog-slogan { font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: #fff; margin: 0 0 var(--ruimte-4); }
.inlog-lead { font-size: 15.5px; line-height: 1.65; color: var(--d2-ink-2); max-width: 40ch; margin: 0; }

.inlog-kaart {
  background: var(--wit); border-radius: var(--radius-groot);
  padding: clamp(24px, 3vw, 34px); color: var(--ink-2);
  box-shadow: 0 30px 70px -28px rgba(2, 14, 34, 0.75);
}
.inlog-kop { margin: 0 0 var(--ruimte-4); font-size: 21px; color: var(--ink); }
.inlog-kaart .form { display: flex; flex-direction: column; }
.inlog-kaart label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; margin-bottom: var(--ruimte-3); }
.inlog-kaart .btn { width: 100%; margin-top: var(--ruimte-1); }
/* De groene knop uit het ontwerp, alleen op deze pagina: de rest van de app houdt haar eigen
   merkgroen tot het nieuwe ontwerp ook daar wordt doorgevoerd. */
.inlog-kaart .btn-primary { background: var(--d2-groen); }
.inlog-kaart .btn-primary:hover { background: var(--d2-groen-op); filter: none; }
.inlog-onder { margin-top: var(--ruimte-4); padding-top: var(--ruimte-4); border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-4); }

/* Op een telefoon wordt het één kolom en leest de pagina als het ontwerp: merk, kop, slogan,
   uitleg, en daaronder het formulier. */
@media (max-width: 860px) {
  .inlog { grid-template-columns: 1fr; align-items: start; gap: var(--ruimte-6); min-height: 0; }
  .inlog-lead { max-width: none; }
}
@media (max-width: 480px) {
  .inlog { padding-bottom: var(--ruimte-7); }
}

/* De proefpagina: links waarom, rechts het formulier. */
/* De horizon houdt hier zijn eigen maat en staat onderaan: met "cover" zou hij op een lang
   scherm tot bergketen worden uitvergroot. Het verloop erboven trekt de onderkant dicht. */
.proef-page {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  background-color: var(--diep); color: var(--diep-ink-2);
  background-image:
    linear-gradient(to bottom, rgba(6, 23, 41, 0.05) 0%, rgba(6, 23, 41, 0.55) 62%, rgba(6, 23, 41, 0.93) 100%),
    url('../img/horizon.svg');
  background-size: cover, 1800px auto;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
}
.proef-binnen { max-width: 1120px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 40px) var(--ruimte-7); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .proef-binnen { grid-template-columns: 1fr; } }
.proef-titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.02em; color: #fff; margin: var(--ruimte-5) 0 var(--ruimte-4); }
.proef-titel em { font-style: italic; color: var(--diep-accent); }
.proef-lead { font-size: 17px; line-height: 1.6; color: var(--diep-ink-2); max-width: 54ch; }
.proef-punten { list-style: none; margin: var(--ruimte-5) 0 0; padding: 0; display: grid; gap: var(--ruimte-3); }
.proef-punten li { display: flex; gap: var(--ruimte-3); align-items: flex-start; font-size: 14.5px; color: var(--diep-ink-2); }
.proef-punten .ico { color: var(--diep-accent); margin-top: 2px; }
.proef-punten b { color: #fff; font-weight: 600; }
.proef-kaart { background: var(--wit); border-radius: var(--radius-groot); padding: clamp(22px, 3vw, 34px); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); color: var(--ink-2); }
.proef-kaart h2 { margin-top: 0; }
.proef-kaart label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; margin-bottom: var(--ruimte-3); }
.proef-kaart .btn { width: 100%; }
.proef-voet { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px) var(--ruimte-6); font-size: 13px; color: var(--diep-ink-3); }
.proef-voet a { color: var(--diep-accent); }
.proef-merk { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.proef-merk:hover { text-decoration: none; }
.proef-merk .brand-mark { background: var(--brand); }
.proef-merk b { font-weight: 600; font-size: 15px; }

/* ---- 16. Verwerken: document naast het formulier -------------------------- */
.verwerk-indeling { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(380px, 1fr); gap: var(--ruimte-4); align-items: start; }
.verwerk-document iframe { width: 100%; height: min(78vh, 900px); border: 1px solid var(--border); border-radius: var(--radius-kaart); background: var(--wit); }
@media (max-width: 1100px) { .verwerk-indeling { grid-template-columns: 1fr; } .verwerk-document iframe { height: 50vh; } }

/* ---- 17. Klein scherm ----------------------------------------------------- */
/* De zijbalk schuift onder de kop weg en komt terug als uitklapmenu. Geen script: een
   <details> doet het werk. */
@media (max-width: 1040px) {
  .shell { display: block; }
  .zijbalk {
    position: relative; width: auto; height: auto; flex: none;
    flex-direction: row; align-items: center; gap: var(--ruimte-3);
    padding: var(--ruimte-2) var(--ruimte-3); overflow: visible;
  }
  .zij-merk-tekst { display: none; }
  .adm-switcher { flex: 1; min-width: 0; }
  .zij-knop { display: inline-flex; }
  .zij-voet { margin-top: 0; padding-top: 0; border-top: 0; }
  .zij-wie-tekst { display: none; }
  .zij-wie .chevron { display: none; }
  .zijnav {
    display: none;
    position: absolute; left: var(--ruimte-3); right: var(--ruimte-3); top: calc(100% - 4px); z-index: 70;
    background: var(--diep-2); border: 1px solid var(--diep-rand); border-radius: var(--radius-kaart);
    padding: var(--ruimte-2); max-height: 74vh; overflow-y: auto;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  }
  .zij-schakelaar:checked ~ .zijnav { display: flex; }
  /* De balk staat nu bovenaan, dus het gebruikersmenu klapt naar beneden open en houdt
     zijn rechterkant binnen het scherm. */
  .zij-voet .menu-panel { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; }
  .zijbalk .menu-panel { max-width: calc(100vw - 24px); }
  .werkkop { top: 0; }
  .content { padding: var(--ruimte-4) var(--ruimte-3) var(--ruimte-6); }
}
@media (max-width: 860px) {
  .portaal-kop .binnen { flex-wrap: wrap; padding-top: var(--ruimte-2); padding-bottom: var(--ruimte-2); }
  .portaal-nav { order: 10; width: 100%; }
}
@media (max-width: 760px) {
  .kop-notitie { display: none; }
  .kop-band { border-radius: var(--radius-kaart); }
  .werkkop .kruimel { display: none; }
  .tweezijdig { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .table th, .table td { padding: 9px 10px; }
  .page-head { align-items: flex-start; }
  .content { padding-left: var(--ruimte-3); padding-right: var(--ruimte-3); }
}

/* ---- 18. Afdrukken -------------------------------------------------------- */
@media print {
  .zijbalk, .werkkop, .portaal-kop, .page-head .acties, .filterbar, .flash, .skip, .hint,
  .demobalk, .kop-acties, .snelrij { display: none !important; }
  .shell { display: block; }
  body { background: #fff; font-size: 11.5px; color: #000; }
  .content, .portaal-inhoud { max-width: none; padding: 0; }
  .kop-band { background: #fff !important; color: #000; border: 1px solid #c8c8c8; box-shadow: none; padding: 12px 0; border-radius: 0; }
  .kop-groet, .kopcijfer .getal { color: #000; }
  .kopcijfer { background: #fff; border-color: #c8c8c8; }
  .kopcijfer .titel, .kopcijfer .toelichting, .kop-kicker, .kop-onder { color: #333; }
  .table, .kaart, .cijfer, .blok, .paneel { box-shadow: none; border-color: #c8c8c8; break-inside: avoid; }
  .table th, .table td { padding: 5px 8px; }
  a { color: inherit; text-decoration: none; }
  h1 { font-size: 20px; }
}