/* Potjes. Opbouw, maten, letters en kleuren gemeten in YNAB (12-11-2026), zie
   docs/ynab-onderzoek/ontwerp.md. De hoofdkleur is Kerims teal (voorstel B) in plaats van het
   blauw van YNAB; de zijbalk is donker teal. Pictogrammen zijn zelf getekend in dezelfde stijl. */
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: only light;
  --letter: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wit: #ffffff;
  --tekst: #191818;
  --zacht: #51504d;
  --vaag: #696763;
  --lijn: #dbd7cc;
  --lijn-licht: #ece7da;
  --vlak: #f8f6f2;
  --vlak-2: #f3eee2;
  --neutraal: rgba(199, 196, 189, .24);
  --neutraal-hover: rgba(199, 196, 189, .36);
  --teal: #007c91;
  --teal-actief: #00606f;
  --teal-licht: #d3eef2;
  --teal-zacht: rgba(0, 124, 145, .09);
  --teal-zacht-2: rgba(0, 124, 145, .14);
  --teal-uit: #99cdd6;
  --gekozen: #dcf0f3;
  --zijbalk: #0d3a43;
  --zijbalk-hover: #144a55;
  --zijbalk-actief: #1d6170;
  --zij-knop: rgba(255, 255, 255, .15);
  --zij-knop-hover: rgba(255, 255, 255, .26);
  --pil-geel: #f8d655; --pil-geel-hover: #f6c91d;
  --pil-groen: #aee865; --pil-groen-hover: #93d53e;
  --pil-rood: #faada5; --pil-rood-hover: #e48585;
  --pil-nul: #f3eee2; --pil-nul-tekst: #696763;
  --balk-geel: #f6c91d; --balk-geel-uit: #fdf1c6;
  --balk-groen: #77ba21; --balk-groen-uit: #c2f680;
  --balk-rood: #bf2e3b;
  --rood: #bf2e3b; --rood-actief: #912333; --rood-licht: #feedeb; --rood-tekst: #4c0814;
  --groen-knop: #508316; --groen-knop-actief: #346011;
  --geel-licht: #fdf1c6; --geel-tekst: #362c05;
  --kolom: 147px;
  --snel: .1s;
  --mid: .15s;
  --curve: cubic-bezier(.45, 0, 0, 1);
  /* oude namen, nog gebruikt door enkele onderdelen */
  --achtergrond: var(--vlak);
  --groen: var(--balk-groen);
  --geel: var(--balk-geel);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 500 14px/1.2 var(--letter);
  -webkit-font-smoothing: antialiased;
  color: var(--tekst); background: var(--wit);
  display: grid;
  grid-template-columns: 260px minmax(0, 67fr) minmax(300px, 33fr);
  grid-template-rows: 88px auto minmax(0, 1fr);
  grid-template-areas: "zij kop kop" "zij filters filters" "zij midden inspector";
  height: 100vh; overflow: hidden; caret-color: transparent;
}
body.zijbalk-dicht { grid-template-columns: 0 minmax(0, 67fr) minmax(300px, 33fr); }
body.zijbalk-dicht #zijbalk { display: none; }
input, textarea, select { caret-color: auto; font: inherit; color: var(--tekst); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
svg { flex: none; }
strong, b { font-weight: 600; }
kbd { display: inline-block; font: 600 12px/1.6 ui-monospace, Consolas, monospace; background: var(--wit); border: 1px solid var(--lijn); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; color: var(--tekst); white-space: nowrap; }

/* ---------- zijbalk ---------- */
#zijbalk { grid-area: zij; background: var(--zijbalk); color: #fff; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.merk { display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 16px; }
.merk img { background: var(--wit); border-radius: 6px; padding: 2px; }
.merk strong { display: block; font-size: 19.2px; font-weight: 700; line-height: 1.1; }
.merk span { display: block; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .8); }
.menu { display: grid; gap: 4px; padding: 0 8px; }
.nav { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: 6px; text-decoration: none; color: #fff; font-size: 16px; font-weight: 500; transition: background-color var(--snel); }
.nav .flap { stroke: var(--zijbalk); transition: stroke var(--snel); }
.nav:hover { background: var(--zijbalk-hover); }
.nav:hover .flap { stroke: var(--zijbalk-hover); }
.nav.actief { background: var(--zijbalk-actief); }
.nav.actief .flap { stroke: var(--zijbalk-actief); }
.nav.uit { color: rgba(255, 255, 255, .55); cursor: default; }
.nav.uit:hover { background: none; }
.nav small { margin-left: auto; font-size: 11px; font-weight: 500; }

/* flexibel verschil, opgebouwd zoals de rekeningenlijst van YNAB */
#flexibel { margin-top: 21px; padding: 0 8px; display: grid; gap: 4px; }
.flex-kop { display: flex; align-items: center; gap: 8px; height: 14px; padding: 0 12px; font-size: 12px; font-weight: 500; letter-spacing: 1.36px; text-transform: uppercase; }
.flex-kop svg { color: rgba(255, 255, 255, .8); }
.flex-som { margin-left: auto; letter-spacing: 0; font-size: 14px; }
.flex-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 12px 0 32px; border-radius: 6px; font-size: 14px; font-weight: 500; text-align: left; transition: background-color var(--snel); }
.flex-rij:hover { background: var(--zijbalk-hover); }
.flex-bedrag { font-variant-numeric: tabular-nums; }
.flex-som.min, .flex-bedrag.min { color: var(--wit); background: var(--rood); border-radius: 999px; padding: 1px 6px; }
.zij-knop { display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; margin: 10px 8px 0; padding: 4px 16px; border-radius: 8px; background: var(--zij-knop); color: #fff; font-size: 14px; font-weight: 500; transition: background-color var(--snel), transform var(--snel); }
.zij-knop svg { color: #fff; }
.zij-knop svg path { stroke: var(--zijbalk); }
.zij-knop:hover:not(:disabled) { background: var(--zij-knop-hover); }
.zij-knop:active:not(:disabled) { transform: scale(.98); }
.zij-knop:disabled { opacity: .5; }
.min { color: var(--rood); }
.zij-voet { margin-top: auto; display: flex; justify-content: flex-end; padding: 16px; }
.zijbalk-knop { width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #fff; transition: background-color var(--snel); }
.zijbalk-knop:hover { background: var(--zijbalk-hover); }

/* ---------- knoppen en velden (zoals de knoppen van YNAB) ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 6px 16px; border-radius: 8px; border: 0; background: var(--teal-zacht); color: var(--teal-actief); font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--mid), color var(--mid), transform var(--snel); }
.knop:hover:not(:disabled) { background: var(--teal-zacht-2); }
.knop:active:not(:disabled) { transform: scale(.97); }
.knop.hoofd { background: var(--teal); color: #fff; }
.knop.hoofd:hover:not(:disabled) { background: var(--teal-actief); }
.knop.gevaar { color: var(--rood); background: rgba(191, 46, 59, .09); }
.knop.gevaar:hover:not(:disabled) { background: rgba(191, 46, 59, .15); }
.knop.gevaar.vol { background: var(--rood); color: #fff; }
.knop.gevaar.vol:hover:not(:disabled) { background: var(--rood-actief); }
.knop.klein { height: 28px; padding: 4px 12px; font-size: 14px; }
.knop:disabled { background: var(--lijn); color: #696763; }
.link { color: var(--teal-actief); font-weight: 500; transition: color var(--snel); }
.link:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.veld { width: 100%; height: 35px; padding: 8px; border: 1px solid var(--lijn); border-radius: 4px; background: var(--wit); font-size: 14px; font-weight: 500; transition: border-color var(--snel); }
.veld:hover { border-color: #c7c4bd; }
textarea.veld { height: auto; min-height: 64px; resize: vertical; }
.veld:focus { outline: none; border-color: var(--teal); }
.knop:focus-visible, .pil:focus-visible, .filter:focus-visible, .actie:focus-visible, .link:focus-visible, .toewijs:focus-visible, .activiteit:focus-visible, .potjenaam:focus-visible, .groepnaam:focus-visible,
.maandknop:focus-visible, .maandnotitie:focus-visible, .maandpijl:focus-visible, .verdeelbedrag:focus-visible, .rond-klein:focus-visible, .tab:focus-visible, .auto:focus-visible, .maand-knop:focus-visible,
.flex-rij:focus-visible, .zij-knop:focus-visible, .nav:focus-visible, .klap:focus-visible, .plus-knop:focus-visible, .schakelaar button:focus-visible, .zijbalk-knop:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
#zijbalk :focus-visible { outline-color: #8fe3f0; }
label.lbl { display: block; font-size: 14px; font-weight: 500; color: var(--tekst); margin: 12px 0 6px; }

/* ---------- kop: maand links, nog te verdelen ernaast ---------- */
#kop { grid-area: kop; display: flex; align-items: center; background: var(--wit); min-width: 0; }
.kop-maand { flex: 0 0 30%; display: flex; align-items: center; gap: 0; padding-left: 8px; min-width: 0; }
.maandpijl { width: 40px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--teal); transition: color var(--snel), transform var(--snel); }
.maandpijl:hover:not(:disabled) { color: var(--teal-actief); }
.maandpijl:active:not(:disabled) { transform: scale(.92); }
.maandpijl:disabled { color: var(--lijn); }
.maandnaam { display: grid; justify-items: start; margin: 0 8px; min-width: 111px; max-width: 150px; }
.maandknop { display: inline-flex; align-items: center; gap: 4px; font-size: 21px; font-weight: 700; line-height: 1; white-space: nowrap; border-radius: 4px; }
.maandknop svg { color: var(--teal); }
.maandknop:hover svg { color: var(--teal-actief); }
.maandnotitie { padding-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--zacht); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.maandnotitie:hover { color: var(--tekst); }
.kop-maand .knop.klein { margin-left: 8px; font-size: 13px; }
.kop-totaal { padding: 8px; min-width: 0; }
.verdelen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 62px; padding: 8px 16px 12px; border-radius: 8px; color: #000; transition: background-color var(--mid) var(--curve); }
.verdeelbedrag { text-align: left; border-radius: 6px; }
.verdelen strong { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.verdelen span { display: block; font-size: 14px; font-weight: 500; line-height: 1.2; }
.verdeel-knoppen { display: flex; gap: 8px; align-items: center; }
.verdelen .knop { height: 32px; padding: 4px 16px; font-size: 16px; }
.verdelen.plus { background: var(--balk-groen-uit); }
.verdelen.plus .knop.hoofd { background: var(--groen-knop); }
.verdelen.plus .knop.hoofd:hover { background: var(--groen-knop-actief); }
.verdelen.nul { background: var(--lijn); color: #3c3b39; }
.verdelen.min, .verdelen.rood { background: var(--pil-rood); }
.verdelen.min .knop.hoofd, .verdelen.rood .knop.hoofd { background: var(--rood); color: #fff; }
.verdelen.min .knop.hoofd:hover, .verdelen.rood .knop.hoofd:hover { background: var(--rood-actief); }
.verdelen .knop:not(.hoofd) { background: rgba(255, 255, 255, .55); color: #000; }
.verdelen .knop:not(.hoofd):hover { background: rgba(255, 255, 255, .85); }
.verdelen.rood { box-shadow: inset 0 0 0 2px var(--rood); }

/* ---------- filters ---------- */
#filters { grid-area: filters; padding: 0 15px 12px; border-bottom: 1px solid var(--lijn); background: var(--wit); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { height: 24px; padding: 3px 12px; border-radius: 5px; border: 1px solid transparent; background: var(--neutraal); font-size: 12px; font-weight: 500; line-height: 16px; display: inline-flex; align-items: center; gap: 4px; transition: background-color var(--snel), border-color var(--snel); }
.filter:hover { background: var(--neutraal-hover); }
.filter.aan { background: var(--teal-licht); border-color: var(--teal); }
.filter.aan:hover { background: #b9e3ea; }
.filter.rood { background: var(--pil-rood); color: var(--rood-tekst); }
.filter.rood:hover { background: var(--pil-rood-hover); }
.filter.rood.aan { background: var(--rood-licht); border-color: #ce5e66; }

/* ---------- midden: werkbalk en tabel ---------- */
#midden { grid-area: midden; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--wit); }
#banier { background: var(--geel-licht); color: var(--geel-tekst); padding: 8px 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--lijn); }
#werkbalk { flex: none; min-height: 48px; padding: 0 18px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--lijn); }
.acties { display: flex; flex-wrap: wrap; align-items: center; }
.actie { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--teal); font-size: 14px; font-weight: 500; transition: background-color var(--snel), color var(--snel); }
.actie:hover:not(:disabled) { background: var(--teal-zacht); }
.actie:disabled { color: var(--teal-uit); }
.actie.ikoon { width: 32px; padding: 0; justify-content: center; color: var(--vaag); }
.actie.ikoon[aria-pressed="true"] { background: var(--teal-zacht); color: var(--teal); }
.weergave { display: flex; align-items: center; gap: 4px; }
.schakelaar { display: flex; gap: 0; padding: 2px; border-radius: 8px; background: var(--neutraal); margin-left: 4px; }
.schakelaar button { width: 29px; height: 28px; padding: 4px 8px; border-radius: 6px; color: #acaaa5; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--snel), color var(--snel); }
.schakelaar button.aan { background: var(--wit); color: var(--vaag); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.schakelaar button:hover:not(.aan) { color: var(--vaag); }
#tabel { flex: 1; min-height: 0; overflow-y: auto; scroll-padding-top: 40px; }
.filter-melding { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: var(--vlak); color: var(--zacht); font-size: 14px; border-bottom: 1px solid var(--lijn-licht); }
.rij { display: grid; grid-template-columns: 14px 16px 27px minmax(0, 1fr) var(--kolom) var(--kolom) var(--kolom); align-items: center; padding-right: 16px; border-top: 1px solid var(--lijn-licht); min-height: 44px; background: var(--wit); transition: background-color var(--snel); }
.rij.kopregel { border-top: 0; border-bottom: 1px solid var(--lijn); min-height: 40px; font-size: 12px; font-weight: 500; color: var(--zacht); letter-spacing: .6px; text-transform: uppercase; position: sticky; top: 0; z-index: 3; }
.rij.kopregel > :nth-child(4) { padding-left: 6px; }
.rij.kopregel + .rij { border-top: 0; }
.kopregel [title] { cursor: help; }
.rij.groep { background: var(--vlak); min-height: 40px; font-size: 14px; font-weight: 500; }
.rij.potje { cursor: default; }
.rij.potje:hover { background: #fbfaf8; }
.rij.potje.gekozen, .rij.potje.gekozen:hover { background: var(--gekozen); }
.rij.sleep-boven { box-shadow: inset 0 3px 0 var(--teal); }
.greep { width: 14px; height: 30px; display: flex; align-items: center; justify-content: center; color: #acaaa5; cursor: grab; opacity: 0; transition: opacity var(--snel); }
.rij:hover .greep { opacity: 1; }
.greep.uit { visibility: hidden; }
.rij input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin: 0 2px 0 8px; border: 1px solid #acaaa5; border-radius: 3px; background: var(--wit) center / 11px 11px no-repeat; cursor: pointer; transition: background-color var(--snel), border-color var(--snel); }
.rij input[type="checkbox"]:hover { border-color: var(--teal); }
.rij input[type="checkbox"]:checked { background-color: var(--teal); border-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.rij input[type="checkbox"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.getal { text-align: right; white-space: nowrap; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rij > .getal:nth-child(5) { padding-right: 3px; }
.rij.groep > .getal:nth-child(7) { padding-right: 6px; }
.getal.nul, .toewijs.nul, .activiteit.nul { color: var(--zacht); }
.naamcel { min-width: 0; padding: 0 0 0 2px; }
.naamregel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.potjenaam, .groepnaam { text-align: left; font-size: 16px; font-weight: 500; line-height: 19.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; padding: 2px 4px; transition: background-color var(--snel); }
.potjenaam:hover, .groepnaam:hover { background: rgba(0, 0, 0, .05); }
.groepnaam { font-weight: 600; padding-left: 6px; }
.emoji { margin-right: 4px; }
.potjenaam { flex: 0 1 auto; max-width: 70%; }
.doeltekst { flex: 1 1 0; min-width: 0; text-align: right; font-size: 14px; font-weight: 500; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doeltekst strong { font-weight: 600; }
.balk { display: flex; gap: 2px; position: relative; height: 4px; margin: 2px 4px 2px 6px; }
.vak { display: block; height: 100%; width: 0; flex: 0 1 auto; min-width: 0; transition: width .3s ease-out; }
.vak:first-child { border-radius: 16px 0 0 16px; }
.vak:last-child { border-radius: 0 16px 16px 0; }
.vak:only-child { border-radius: 16px; }
.vak.beschikbaar, .vak.boven { background: var(--balk-groen); }
.vak.uitgegeven { background: var(--balk-groen-uit); }
.balk.geel .vak.beschikbaar, .balk.geel .vak.boven { background: var(--balk-geel); }
.balk.geel .vak.uitgegeven { background: var(--balk-geel-uit); }
.vak.tekort, .vak.rest { background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--lijn-licht); }
.vak.rood { background: var(--balk-rood); }
.streep { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--wit); }
body.compact .balk { display: none; }
body.compact .rij.potje { min-height: 40px; }
.klap { width: 16px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--zacht); transition: color var(--snel); }
.klap:hover { color: var(--tekst); }
.plus-knop { width: 18px; height: 18px; border-radius: 50%; color: var(--teal); display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: 0; transition: opacity var(--snel), transform var(--snel); }
.rij.groep:hover .plus-knop, .plus-knop:focus-visible { opacity: 1; }
.plus-knop:hover { transform: scale(1.12); }
.toewijs, .activiteit { justify-self: end; padding: 3px; border-radius: 4px; border: 1px solid transparent; min-width: 100px; text-align: right; transition: border-color var(--snel), background-color var(--snel); }
.toewijs:hover, .activiteit:hover { border-color: var(--lijn); background: var(--wit); }
.toewijs-veld { justify-self: end; width: 100%; max-width: 124px; height: 28px; text-align: right; border: 1px solid var(--teal); border-radius: 4px; padding: 0 6px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; outline: none; box-shadow: 0 0 0 2px rgba(0, 124, 145, .2); }
.pil { justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 2px 7px; border-radius: 1000px; font-size: 14px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--tekst); transition: background-color var(--snel), transform var(--snel); }
.pil svg { stroke-width: 2; }
.pil.geel { background: var(--pil-geel); }
.pil.groen { background: var(--pil-groen); }
.pil.rood { background: var(--pil-rood); }
.pil.grijs { background: var(--pil-nul); color: var(--pil-nul-tekst); }
.pil.geel:hover:not(:disabled) { background: var(--pil-geel-hover); }
.pil.groen:hover:not(:disabled) { background: var(--pil-groen-hover); }
.pil.rood:hover:not(:disabled) { background: var(--pil-rood-hover); }
.pil:active:not(:disabled) { transform: scale(.96); }
.pil:disabled { cursor: default; }
.leeg { padding: 32px 20px; text-align: center; color: var(--zacht); display: grid; gap: 10px; justify-items: center; font-size: 14px; }
.verborgen-kop { color: var(--zacht); }
.verborgen-acties { padding: 8px 16px; border-top: 1px solid var(--lijn-licht); }

/* ---------- rechts: kaarten op een licht vlak ---------- */
#inspector { grid-area: inspector; overflow-y: auto; min-height: 0; padding: 16px; display: grid; gap: 16px; align-content: start; background: var(--vlak); border-left: 1px solid var(--lijn); color: var(--zacht); }
.kaart { background: var(--wit); border-radius: 8px; padding: 16px; min-width: 0; }
.kaart.let-op { background: var(--rood-licht); }
.kaart h2 { font-size: 14px; font-weight: 600; color: var(--tekst); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kaart h3 { font-size: 14px; font-weight: 600; color: var(--tekst); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.rond-klein { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--zacht); transition: background-color var(--snel), color var(--snel); }
.rond-klein:hover:not(:disabled) { background: var(--vlak); color: var(--tekst); }
.rond-klein:disabled { opacity: .35; }
.kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* inklapbare kaart, zoals "November's Summary" en "Auto-Assign" in YNAB */
.klap-kaart { padding: 0; }
.klap-kaart > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; cursor: pointer; list-style: none; border-radius: 8px; }
.klap-kaart > summary::-webkit-details-marker { display: none; }
.klap-kaart > summary h2 { margin: 0; }
.klap-kaart[open] > summary { border-bottom: 1px solid rgba(0, 0, 0, .1); border-radius: 8px 8px 0 0; }
.klap-kaart .chev { display: inline-flex; color: var(--tekst); transition: transform var(--snel); }
.klap-kaart:not([open]) .chev { transform: rotate(-90deg); }
.kaart-lijf { padding: 16px; }
.kop-bedrag { font-size: 14px; font-weight: 600; color: var(--tekst); font-variant-numeric: tabular-nums; }
.scheiding { border-top: 1px solid rgba(0, 0, 0, .1); margin: 16px 0 20px; }
.kost-titel { font-size: 14px; font-weight: 500; color: var(--tekst); padding-bottom: 16px; }
.kosten-lijst { margin: 4px 0 0; padding-left: 4px; }
.kosten-groep.stil { border-top: 0; padding: 0; }
.kosten-groep.stil > summary { color: var(--zacht); padding: 4px 0; }
.kosten-groep.stil > summary::before { display: none; }
.kosten-groep.stil > summary > span:last-child { font-weight: 600; }
.kosten-groep summary > span:last-child { font-variant-numeric: tabular-nums; }
.knop.breed { width: 100%; margin-top: 16px; }
.grijs-vak { margin: 16px 0 0; padding: 16px; border-radius: 8px; background: var(--vlak-2); color: var(--zacht); text-align: center; font-size: 14px; line-height: 1.3; }
.regel svg { vertical-align: -2px; color: var(--teal); margin-right: 4px; }
.hint { margin: 0 4px; font-size: 13px; color: var(--vaag); }
/* gekozen potje, zoals YNAB: naam groot bovenaan, doel met ring en gele vak */
.insp-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.insp-kop h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doelkop { font-size: 14px; font-weight: 600; line-height: 21px; color: var(--tekst); }
.doelsub { margin: 0; padding-top: 4px; font-size: 14px; color: var(--zacht); }
.ring { margin: 16px 0; }
.wijs { display: block; width: 100%; height: auto; margin: 0 0 12px; padding: 16px; border-radius: 8px; background: rgba(246, 201, 29, .24); color: #000; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; }
.wijs:hover { background: rgba(246, 201, 29, .36); }
.pil-in { display: inline-block; padding: 0 6px; border-radius: 1000px; background: var(--pil-geel); font-weight: 600; font-variant-numeric: tabular-nums; }
.bericht { color: var(--tekst); }
.schakel { color: var(--tekst); margin-top: 16px; }
.schakel input.schuif { -webkit-appearance: none; appearance: none; position: relative; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: var(--lijn); cursor: pointer; transition: background-color var(--mid); }
.schakel input.schuif::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wit); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--mid) var(--curve); }
.schakel input.schuif:checked { background: var(--teal); }
.schakel input.schuif:checked::before { transform: translateX(12px); }
.schakel input.schuif:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.notitieveld { border: 0; padding: 0; min-height: 48px; resize: vertical; color: var(--tekst); }
.notitieveld:focus { box-shadow: none; }
.notitieveld::placeholder { color: var(--zacht); }
.kop-knoppen { display: flex; gap: 2px; }
.regel { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; font-weight: 500; line-height: 16.8px; color: var(--zacht); }
.regel > span:first-child { min-width: 0; }
.regel > span:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.regel small { display: block; color: var(--vaag); font-size: 12px; }
.regel.dik { color: var(--tekst); border-top: 1px solid rgba(0, 0, 0, .1); margin-top: 8px; padding-top: 12px; }
.uitleg { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--zacht); margin: 0 0 10px; }
.doelkop { font-weight: 600; color: var(--tekst); }
.ring { display: grid; justify-items: center; margin: 12px 0; font-size: 12px; color: var(--zacht); }
.ring text { font: 700 15px var(--letter); }
.bericht { font-size: 14px; margin: 0 0 8px; }
.waarschuwing { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; background: var(--geel-licht); color: var(--geel-tekst); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 500; margin-top: 8px; }
.schakel { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; flex-wrap: wrap; color: var(--tekst); }
.schakel input { width: 16px; height: 16px; accent-color: var(--teal); }
.auto-lijst { display: grid; gap: 0; }
.auto { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 4px; text-align: left; font-size: 14px; font-weight: 500; color: var(--zacht); border-top: 1px solid rgba(0, 0, 0, .08); border-radius: 0; transition: background-color var(--snel), color var(--snel); }
.auto:first-child { border-top: 0; }
.auto:hover { background: var(--vlak); color: var(--tekst); }
.auto strong { white-space: nowrap; color: var(--tekst); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--neutraal); border-radius: 8px; padding: 2px; gap: 0; margin-bottom: 4px; }
.tabs.twee-tabs { grid-template-columns: 1fr 1fr; margin: 6px 0 8px; }
.tabs.drie-tabs { grid-template-columns: repeat(3, 1fr); margin: 6px 0 8px; }
.tab { height: 28px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--zacht); transition: background-color var(--snel), color var(--snel), box-shadow var(--snel); }
.tab:hover { color: var(--tekst); }
.tab.aan { background: var(--wit); color: var(--tekst); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.knoppenrij { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.knoppenrij .links { margin-right: auto; }
.twee { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.kostenbalk { display: grid; gap: 6px; margin: 8px 0; }
.kb-rij { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--zacht); }
.kb { display: block; height: 8px; border-radius: 16px; background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--lijn-licht); overflow: hidden; }
.kb-vul { display: block; height: 100%; width: 0; border-radius: 16px; transition: width .3s ease-out; }
.kb-vul.inkomen { background: var(--teal); }
.kb-vul.doelen { background: var(--balk-geel); }
.kosten-groep { border-top: 1px solid rgba(0, 0, 0, .08); padding: 4px 0; }
.kosten-groep summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--tekst); padding: 4px 0; list-style: none; }
.kosten-groep summary::-webkit-details-marker { display: none; }
.kosten-groep summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px; border-right: 2px solid var(--zacht); border-bottom: 2px solid var(--zacht); transform: rotate(-45deg); transition: transform var(--snel); }
.kosten-groep[open] summary::before { transform: rotate(45deg); }
.kosten-groep summary > span:first-child { margin-right: auto; }
.kosten-groep .regel { padding-left: 12px; }

/* ---------- venstertjes, venster en melding ---------- */
#popover { position: fixed; z-index: 50; width: 320px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--wit); border-radius: 6.4px; box-shadow: 0 16px 64px rgba(0, 0, 0, .2); padding: 16px; color: var(--tekst); transform-origin: top left; }
#popover:not([hidden]) { animation: pop-in .15s var(--curve) both; }
#popover h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
#popover .knoppenrij .knop { height: 32px; }
.emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-top: 6px; max-height: 128px; overflow-y: auto; }
.emojis button { height: 32px; border-radius: 6px; font-size: 18px; transition: background-color var(--snel), transform var(--snel); }
.emojis button:hover { background: var(--vlak); transform: scale(1.12); }
.jaar-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.maanden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.maand-knop { height: 36px; border-radius: 8px; border: 1px solid var(--lijn); font-weight: 500; transition: background-color var(--snel), border-color var(--snel); }
.maand-knop:hover:not(:disabled) { background: var(--teal-zacht); border-color: var(--teal); }
.maand-knop.nu { border-color: var(--teal); }
.maand-knop.aan { background: var(--teal); border-color: var(--teal); color: #fff; }
.maand-knop:disabled { color: #acaaa5; background: var(--vlak); border-color: var(--lijn-licht); }
.dag-kop { font-size: 12px; font-weight: 500; color: var(--zacht); letter-spacing: .6px; margin: 12px 0 2px; text-transform: uppercase; }
.zet { padding: 6px 0; border-top: 1px solid var(--lijn-licht); font-size: 14px; }
.dag-kop + .zet { border-top: 0; }
.zet small { display: block; color: var(--zacht); }
.zet.ongedaan { color: #acaaa5; text-decoration: line-through; }
.zet details { margin-top: 2px; }
.zet summary { cursor: pointer; color: var(--teal-actief); font-weight: 500; font-size: 12px; }
.zet .regel { font-size: 12px; padding: 1px 0 1px 10px; }
.betaling { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--lijn-licht); font-size: 14px; }
.betaling small { color: var(--zacht); grid-column: 1; }
#venster { position: fixed; inset: 0; z-index: 70; background: rgba(25, 24, 24, .35); display: grid; place-items: center; padding: 12px; }
#venster:not([hidden]) { animation: vervaag-in .15s ease-out both; }
#venster:not([hidden]) .venster-kaart { animation: pop-in .2s var(--curve) both; }
.venster-kaart { width: min(620px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--wit); border-radius: 8px; box-shadow: 0 16px 64px rgba(0, 0, 0, .2); padding: 20px 22px; }
.venster-kaart h2 { margin: 0; font-size: 19.2px; font-weight: 700; }
.venster-kaart h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.toetsen { display: grid; grid-template-columns: 220px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; align-items: baseline; }
.toetsen kbd { white-space: normal; }
.toetsen dt { margin: 0; }
.toetsen dd { margin: 0; color: var(--zacht); }
#melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; background: var(--tekst); color: #fff; padding: 12px 18px; border-radius: 8px; max-width: min(520px, calc(100vw - 24px)); font-size: 14px; font-weight: 500; box-shadow: 0 16px 64px rgba(0, 0, 0, .2); }
#melding:not([hidden]) { animation: melding-in .3s var(--curve) both; }
#melding.fout { background: var(--rood); }

@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vervaag-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes melding-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- bedragen verbergen ---------- */
body.bedragen-weg .getal, body.bedragen-weg .pil, body.bedragen-weg .verdelen strong, body.bedragen-weg .regel > span:last-child,
body.bedragen-weg .flex-som, body.bedragen-weg .flex-bedrag, body.bedragen-weg .doeltekst,
body.bedragen-weg .auto strong, body.bedragen-weg .ring text, body.bedragen-weg .wijs strong { filter: blur(6px); }

/* ---------- minder beweging als Windows daarom vraagt ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- smallere schermen ---------- */
/* Liggende tablet en kleine laptop: rechterdeel vast 300 px en smallere bedragkolommen, zodat de namen passen. */
@media (max-width: 1400px) and (min-width: 1181px) {
  body { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  body.zijbalk-dicht { grid-template-columns: 0 minmax(0, 1fr) 300px; }
  :root { --kolom: 116px; }
}
@media (max-width: 1180px) {
  body, body.zijbalk-dicht { height: auto; overflow: visible; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "zij kop" "zij filters" "zij midden" "zij inspector"; }
  body.zijbalk-dicht { grid-template-columns: 0 minmax(0, 1fr); }
  #zijbalk { position: sticky; top: 0; height: 100vh; }
  #kop { flex-wrap: wrap; padding: 8px 0; }
  .kop-maand { flex: 1 1 auto; }
  #filters { padding-top: 4px; }
  #midden, #tabel { overflow: visible; }
  #inspector { border-left: 0; border-top: 1px solid var(--lijn); }
  :root { --kolom: 112px; }
}
/* Staande tablet: alles onder elkaar, menu bovenaan, alle drie de bedragkolommen blijven. */
@media (max-width: 900px) {
  body, body.zijbalk-dicht { grid-template-columns: minmax(0, 1fr); grid-template-areas: "zij" "kop" "filters" "midden" "inspector"; }
  body.zijbalk-dicht #zijbalk { display: flex; }
  #zijbalk { position: static; height: auto; padding-bottom: 12px; }
  .zij-voet { display: none; }
  .toetsen { grid-template-columns: 1fr; gap: 2px; }
  .toetsen dd { margin-bottom: 6px; }
  :root { --kolom: 104px; }
  #kop { padding: 8px 4px 0; }
  .verdelen { flex-wrap: wrap; gap: 10px; }
  #filters { padding: 4px 10px 10px; }
  #werkbalk { padding: 4px 8px; }
  #inspector { padding: 12px; }
}
/* Telefoon: kolom Uitgegeven en de doelteksten vallen weg. */
@media (max-width: 600px) {
  :root { --kolom: 96px; }
  .kop-totaal { width: 100%; }
  .rij { grid-template-columns: 0 16px 27px minmax(0, 1fr) var(--kolom) 0 var(--kolom); padding-right: 8px; }
  .rij > :nth-child(1), .rij > :nth-child(6) { visibility: hidden; overflow: hidden; }
  .toewijs, .activiteit { min-width: 0; padding: 3px 2px; }
  .doeltekst { display: none; }
  .potjenaam { max-width: 100%; }
  .pil svg { display: none; }
}