/* ============================================================
   VeendamRP — Belastingdienst
   Een kantoor, geen speelscherm. Licht en zakelijk is de normale
   stand; donker kan met de knop rechtsboven en blijft onthouden.

   De kleuren komen uit de Rijkshuisstijl (rijksblauw, lintblauw,
   oranje, rood, groen). Dat is geen toeval: het moet aanvoelen als
   een dienst, niet als een spel.
   ============================================================ */

:root {
  --rijks:      #154273;
  --lint:       #01689b;
  --hemel:      #007bc7;
  --oranje:     #e17000;
  --rood:       #d52b1e;
  --groen:      #39870c;
  --violet:     #42145f;
  --mint:       #76d2b6;

  --rond:   10px;
  --rond-s: 6px;
  --soepel: cubic-bezier(.22,.68,.34,1);
  --zijbreed: 246px;
  --zijsmal:  64px;
  --kopschrift: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

/* --- licht (standaard) --- */
[data-thema="licht"] {
  color-scheme: light;
  --bg:        #eef1f5;
  --bg-2:      #ffffff;
  --vlak:      #ffffff;
  --vlak-op:   #f5f7fa;
  --vlak-diep: #e7ecf2;
  --rand:      #d4dce6;
  --rand-op:   #b6c3d2;
  --tekst:     #12212f;
  --zacht:     #4c5c6e;
  --flauw:     #7d8b9b;
  --schaduw:   0 10px 28px -18px rgba(12,32,56,.45);
  --kop-bg:    var(--rijks);
  --kop-tekst: #ffffff;
}

/* --- donker --- */
[data-thema="donker"] {
  color-scheme: dark;
  --bg:        #0b1017;
  --bg-2:      #10161f;
  --vlak:      #141c27;
  --vlak-op:   #1a2431;
  --vlak-diep: #0d131b;
  --rand:      #24303f;
  --rand-op:   #35455a;
  --tekst:     #e6ecf3;
  --zacht:     #9aa8b8;
  --flauw:     #6b7a8c;
  --schaduw:   0 18px 44px -26px rgba(0,0,0,.9);
  --kop-bg:    #0e1927;
  --kop-tekst: #e6ecf3;
  --rijks:     #2b6cb0;
  --lint:      #3b8fc4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lint); text-decoration: none; }
a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

/* ============================================================
   De schil
   ============================================================ */

.schil { display: flex; min-height: 100vh; }

/* --- zijbalk --- */
.zij {
  width: var(--zijbreed);
  flex: 0 0 var(--zijbreed);
  background: var(--kop-bg);
  color: var(--kop-tekst);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  transition: width .18s var(--soepel), flex-basis .18s var(--soepel);
}
html.smal .zij { width: var(--zijsmal); flex-basis: var(--zijsmal); }

.merk {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  min-height: 68px;
}
.merk-teken {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  background: #fff; color: var(--rijks);
  border-radius: 7px; font-weight: 700; font-size: 17px;
}
[data-thema="donker"] .merk-teken { background: var(--hemel); color: #fff; }
.merk-naam { font-weight: 650; letter-spacing: .2px; line-height: 1.15; }
.merk-naam small { display: block; font-weight: 400; font-size: 11.5px; opacity: .72; }
html.smal .merk-naam { display: none; }

.menu { flex: 1; overflow-y: auto; padding: 10px 8px 16px; }
.menu-groep {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  opacity: .5; padding: 14px 10px 6px; font-weight: 600;
}
html.smal .menu-groep { text-align: center; font-size: 0; padding: 10px 0 4px; }
html.smal .menu-groep::after { content: "···"; font-size: 12px; letter-spacing: 0; }

.menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; margin: 1px 0;
  border-radius: var(--rond-s);
  color: inherit; opacity: .82; font-size: 14px;
  white-space: nowrap;
}
.menu a:hover { background: rgba(255,255,255,.09); opacity: 1; text-decoration: none; }
.menu a.aan { background: rgba(255,255,255,.15); opacity: 1; font-weight: 600; }
.menu a.aan::before {
  content: ""; position: absolute; left: 0; width: 3px; height: 22px;
  background: var(--oranje); border-radius: 0 3px 3px 0;
}
.menu a { position: relative; }
.menu .ic { flex: 0 0 18px; }
html.smal .menu a span.tekst { display: none; }
html.smal .menu a { justify-content: center; }

.bolletje {
  margin-left: auto; background: var(--oranje); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 99px; min-width: 19px; text-align: center;
}
html.smal .bolletje {
  position: absolute; top: 3px; right: 6px; margin: 0;
  padding: 2px 4px; font-size: 9.5px;
}

.zij-voet {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.zij-voet .wie { min-width: 0; flex: 1; }
.zij-voet .wie b { display: block; font-size: 13px; font-weight: 600;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zij-voet .wie small { opacity: .6; font-size: 11px; }
html.smal .zij-voet .wie { display: none; }

/* --- inhoud --- */
.romp { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.balkboven {
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; min-height: 62px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 20;
}
.balkboven h1 {
  font-size: 18px; margin: 0; font-weight: 650; letter-spacing: -.2px;
}
.balkboven .pad { color: var(--flauw); font-size: 13px; }
.balkboven .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.zoekdoos { position: relative; flex: 0 1 320px; }
.zoekdoos input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--rand); border-radius: var(--rond-s);
  background: var(--vlak-op); color: var(--tekst); font-size: 14px;
}
.zoekdoos input:focus { outline: 2px solid var(--hemel); outline-offset: -1px; border-color: transparent; }
.zoekdoos .ic { position: absolute; left: 10px; top: 9px; color: var(--flauw); }
.zoekuit {
  position: absolute; top: calc(100% + 5px); right: 0; left: auto;
  min-width: 400px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--rond-s); box-shadow: var(--schaduw);
  max-height: 340px; overflow-y: auto; z-index: 40;
}
.zoekuit a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  color: var(--tekst); border-bottom: 1px solid var(--rand);
}
.zoekuit a:last-child { border-bottom: 0; }
.zoekuit a:hover, .zoekuit a.aan { background: var(--vlak-op); text-decoration: none; }
.zoekuit .bij { margin-left: auto; color: var(--flauw); font-size: 12px; white-space: nowrap; }
.zoekuit a > span { min-width: 0; overflow: hidden; }
.zoekuit a b, .zoekuit a .klein {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.inhoud { padding: 22px; flex: 1; }

/* ============================================================
   Bouwstenen
   ============================================================ */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.kaart + .kaart { margin-top: 18px; }
.kaart-kop {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--rand);
  background: var(--vlak-op);
}
.kaart-kop h2 { font-size: 14.5px; margin: 0; font-weight: 650; }
.kaart-kop .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kaart-lijf { padding: 16px; }
.kaart-lijf.strak { padding: 0; }

.rooster { display: grid; gap: 18px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.r-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1180px) {
  .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r3, .r-2-1, .r-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .r2, .r4 { grid-template-columns: 1fr; }
}

/* --- de grote cijfers bovenaan --- */
.cijfer {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--rond); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 3px;
  position: relative; overflow: hidden;
}
.cijfer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--lint);
}
.cijfer.let-op::before { background: var(--oranje); }
.cijfer.zwaar::before  { background: var(--rood); }
.cijfer.goed::before   { background: var(--groen); }
.cijfer .kop { font-size: 12px; color: var(--zacht); font-weight: 600;
               text-transform: uppercase; letter-spacing: .05em; }
.cijfer .waarde { font-size: 25px; font-weight: 680; letter-spacing: -.6px; line-height: 1.15; }
.cijfer .bij { font-size: 12.5px; color: var(--flauw); }

/* --- tabellen --- */
table.lijst { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lijst th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--zacht); font-weight: 650;
  padding: 10px 14px; border-bottom: 1px solid var(--rand);
  background: var(--vlak-op); position: sticky; top: 62px; z-index: 5;
}
table.lijst td { padding: 10px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.lijst tr:last-child td { border-bottom: 0; }
table.lijst tbody tr:hover td { background: var(--vlak-op); }
table.lijst td.getal, table.lijst th.getal { text-align: right; font-variant-numeric: tabular-nums; }
table.lijst td.krap { width: 1%; white-space: nowrap; }
table.lijst a.rij { color: inherit; display: block; }

/* --- een rij die openklapt onder een regel ---
   Dit was eerst een zwevend menu boven de tabel, maar dat werd door de
   rand van de kaart afgeknipt: bij de onderste regels zag je de helft
   niet (Michel, 10 sep 2026). Als eigen tabelrij past hij altijd. */
tr.uitklap > td {
  background: var(--vlak-op);
  border-bottom: 2px solid var(--rand-op);
  padding: 12px 14px;
}
.klapform {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.klapform .veld { margin: 0; }

/* --- persoon --- */
.persoon { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rondje {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  color: #fff; letter-spacing: .3px;
}
.rondje.groot { width: 52px; height: 52px; flex-basis: 52px; font-size: 18px; }
.persoon .naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persoon .onder { font-size: 12px; color: var(--flauw); }

/* --- stempels en labels --- */
.stempel {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; padding: 3px 8px;
  border-radius: 99px; border: 1px solid; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
.s-blauw { color: var(--lint);   border-color: color-mix(in srgb, var(--lint) 35%, transparent);
           background: color-mix(in srgb, var(--lint) 10%, transparent); }
.s-oker  { color: var(--oranje); border-color: color-mix(in srgb, var(--oranje) 35%, transparent);
           background: color-mix(in srgb, var(--oranje) 10%, transparent); }
.s-rood  { color: var(--rood);   border-color: color-mix(in srgb, var(--rood) 35%, transparent);
           background: color-mix(in srgb, var(--rood) 10%, transparent); }
.s-groen { color: var(--groen);  border-color: color-mix(in srgb, var(--groen) 35%, transparent);
           background: color-mix(in srgb, var(--groen) 10%, transparent); }
.s-paars { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent);
           background: color-mix(in srgb, var(--violet) 10%, transparent); }
.s-grijs { color: var(--flauw);  border-color: var(--rand); background: var(--vlak-op); }
[data-thema="donker"] .s-paars { color: #b98bff; }

/* het kenmerk van een dossier of aanslag */
.kenmerk {
  font-family: var(--kopschrift); font-size: 12.5px;
  letter-spacing: .02em; color: var(--zacht);
  background: var(--vlak-diep); border: 1px solid var(--rand);
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}

/* --- knoppen --- */
.knop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--rond-s);
  border: 1px solid var(--rand); background: var(--vlak);
  color: var(--tekst); font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.knop:hover { background: var(--vlak-op); text-decoration: none; border-color: var(--rand-op); }
.knop.vol { background: var(--rijks); border-color: var(--rijks); color: #fff; }
.knop.vol:hover { background: color-mix(in srgb, var(--rijks) 85%, #000); }
.knop.waarschuw { background: var(--rood); border-color: var(--rood); color: #fff; }
.knop.waarschuw:hover { background: color-mix(in srgb, var(--rood) 85%, #000); }
.knop.klein { padding: 5px 10px; font-size: 12.5px; }
.knop:disabled { opacity: .45; cursor: not-allowed; }

.knoppenrij { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- formulieren --- */
label.veld { display: block; margin-bottom: 12px; }
label.veld > span {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--zacht); margin-bottom: 4px;
}
input[type=text], input[type=number], input[type=date], input[type=search],
select, textarea {
  width: 100%; padding: 8px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--rand); border-radius: var(--rond-s);
  background: var(--vlak-op); color: var(--tekst);
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--hemel); outline-offset: -1px; border-color: transparent;
}
.hint { font-size: 12px; color: var(--flauw); margin-top: 4px; }

.filterbalk {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rand);
  background: var(--vlak-op);
}
.filterbalk label.veld { margin: 0; }
.filterbalk input, .filterbalk select { min-width: 130px; }

/* --- balkjes --- */
.balk {
  display: block; height: 6px; border-radius: 3px;
  background: var(--vlak-diep); overflow: hidden; min-width: 60px;
}
.balk i { display: block; height: 100%; border-radius: 3px; }
.k-blauw  { background: var(--lint); }
.k-oker   { background: var(--oranje); }
.k-rood   { background: var(--rood); }
.k-groen  { background: var(--groen); }
.k-paars  { background: var(--violet); }
.k-grijs  { background: var(--flauw); }

/* --- de vermogensmeter: bezit tegenover wat je mocht hebben --- */
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter .spoor {
  position: relative; height: 26px; border-radius: var(--rond-s);
  background: var(--vlak-diep); overflow: hidden;
}
.meter .ruimte { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--groen) 22%, transparent); }
.meter .over   { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--rood) 35%, transparent); }
.meter .streep { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tekst); opacity: .55; }
.meter .uitleg {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--flauw); white-space: nowrap;
}
.meter .uitleg b { font-weight: 600; color: var(--zacht); }
table.lijst .meter .spoor { height: 18px; }

/* --- grafiek --- */
.grafiek { width: 100%; height: auto; display: block; }
.grafiek .as { stroke: var(--rand); stroke-width: 1; }
.grafiek .raster { stroke: var(--rand); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.grafiek text { fill: var(--flauw); font-size: 10px; font-family: inherit; }
.grafiek .in  { fill: color-mix(in srgb, var(--groen) 75%, transparent); }
.grafiek .uit { fill: color-mix(in srgb, var(--rood) 65%, transparent); }
.grafiek .lijn { fill: none; stroke: var(--lint); stroke-width: 2; stroke-linejoin: round; }

/* --- tijdlijn (aantekeningen in een dossier) --- */
.tijdlijn { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.tijdlijn::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--rand);
}
.tijdlijn li { position: relative; padding: 0 0 18px 0; }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vlak); border: 2px solid var(--lint);
}
.tijdlijn li.stap::before  { border-color: var(--oranje); }
.tijdlijn li.stuk::before  { border-color: var(--violet); }
.tijdlijn .wanneer { font-size: 12px; color: var(--flauw); }
.tijdlijn .wat { margin-top: 2px; white-space: pre-wrap; }

/* --- feiten (naam/waarde-lijstjes) --- */
.feiten { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 14px; }
.feiten dt { color: var(--zacht); }
.feiten dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.feiten dd.gewoon { font-weight: 400; }
.feiten .streep { grid-column: 1 / -1; border-top: 1px solid var(--rand); margin: 3px 0; }

/* --- leeg --- */
.leeg { text-align: center; padding: 34px 20px; color: var(--flauw); }
.leeg.groot { padding: 70px 20px; }
.leeg-teken {
  font-size: 30px; width: 62px; height: 62px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--vlak-op); display: grid; place-items: center;
  border: 1px solid var(--rand);
}
.leeg h2 { margin: 0 0 6px; font-size: 17px; color: var(--tekst); }

/* --- meldingen --- */
.melding {
  padding: 11px 14px; border-radius: var(--rond-s); margin-bottom: 16px;
  border: 1px solid; font-size: 14px; display: flex; gap: 9px; align-items: flex-start;
}
.m-goed { border-color: color-mix(in srgb, var(--groen) 40%, transparent);
          background: color-mix(in srgb, var(--groen) 9%, transparent); }
.m-fout { border-color: color-mix(in srgb, var(--rood) 40%, transparent);
          background: color-mix(in srgb, var(--rood) 9%, transparent); }
.m-let  { border-color: color-mix(in srgb, var(--oranje) 40%, transparent);
          background: color-mix(in srgb, var(--oranje) 9%, transparent); }

/* --- kleine dingen --- */
.flauw { color: var(--flauw); }
.zacht { color: var(--zacht); }
.klein { font-size: 12.5px; }
.plus  { color: var(--groen); }
.min   { color: var(--rood); }
.dik   { font-weight: 650; }
.getallen { font-variant-numeric: tabular-nums; }
.rechtsuit { text-align: right; }
.midden { text-align: center; }
.nowrap { white-space: nowrap; }
hr.dun { border: 0; border-top: 1px solid var(--rand); margin: 14px 0; }

.ic { flex: none; }

/* de knopjes rechtsboven */
.rondknop {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--rond-s); border: 1px solid var(--rand);
  background: var(--vlak); color: var(--zacht); cursor: pointer;
}
.rondknop:hover { background: var(--vlak-op); color: var(--tekst); }

/* --- inloggen --- */
.inlogscherm {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--bg);
  background-image: radial-gradient(1200px 600px at 50% -10%,
                    color-mix(in srgb, var(--rijks) 18%, transparent), transparent);
  padding: 24px;
}
.inlogdoos {
  width: 100%; max-width: 420px; background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--rond);
  box-shadow: var(--schaduw); padding: 30px; text-align: center;
}
.inlogdoos h1 { margin: 14px 0 4px; font-size: 21px; }
.inlogdoos p { color: var(--zacht); font-size: 14px; margin: 0 0 20px; }
.inlogdoos .merk-teken { width: 52px; height: 52px; margin: 0 auto; font-size: 24px; }

/* --- printen: een dossier moet op papier kunnen --- */
@media print {
  .zij, .balkboven, .knoppenrij, .filterbalk { display: none !important; }
  .inhoud { padding: 0; }
  .kaart { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}

/* --- smalle schermen --- */
@media (max-width: 900px) {
  .zij { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); }
  html.menu-open .zij { transform: none; }
  .romp { width: 100%; }
  .zoekdoos { flex: 1; }

  /* Een brede tabel schuift binnen zijn eigen kaart. Zonder dit gaat
     de hele pagina zijwaarts en raak je het menu kwijt. */
  .kaart { overflow-x: auto; }
  table.lijst { min-width: 620px; }
  table.lijst th { position: static; }
  .inhoud { padding: 14px; }
}