/* Huisstijl VMK: diep marineblauw als basis, lichtblauw als vlak, middenblauw als accent.
   Groen en rood zijn bewust NIET decoratief: die zijn gereserveerd voor "beter" en
   "slechter dan vorig jaar". Wie ze ook voor knoppen gebruikt, sloopt de signaalwaarde. */

:root {
  --donker: #003448;
  --licht: #a1dcf2;
  --accent: #009ed8;
  --beter: #3f7d2c;
  --slechter: #b03024;
  --papier: #ffffff;
  --rand: #dfe8ec;
  --grijs: #5a6b73;
  --vlak: #f4f8fa;
}

* { box-sizing: border-box; }

/* Het hidden-attribuut wint altijd, ook van display: flex op dezelfde regel. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--donker);
  background: var(--vlak);
  line-height: 1.5;
}

/* --- Kop ---------------------------------------------------------------- */

.kop { background: var(--donker); color: var(--papier); }

.kop-binnen {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}

.kop h1 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.02em; }
.ondertitel { margin: 0.15rem 0 0; color: var(--licht); font-size: 0.85rem; }

.kiezers { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.kiezer { display: flex; flex-direction: column; gap: 0.2rem; }
.kiezer span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--licht); }

.kiezer select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--papier);
  min-width: 11rem;
}

.kiezer select option { color: var(--donker); background: var(--papier); }

/* --- Inhoud ------------------------------------------------------------- */

.inhoud { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 0; }

.kaart {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.kaart-kop { margin-bottom: 0.75rem; }
.kaart h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }

.toelichting { color: var(--grijs); font-size: 0.85rem; margin: 0.35rem 0 0; }

.melding {
  background: #fdf3f2;
  border: 1px solid #f0c9c4;
  color: var(--slechter);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}

/* --- Tabel -------------------------------------------------------------- */

/* Brede tabellen mogen binnen hun eigen kader schuiven; de pagina zelf nooit. */
.tabel-omhulsel { overflow-x: auto; }

table.cijfers {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

table.cijfers th, table.cijfers td { padding: 0.5rem 0.6rem; text-align: left; }

table.cijfers thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grijs);
  font-weight: 600;
  border-bottom: 2px solid var(--rand);
  white-space: nowrap;
}

.getal { text-align: right; white-space: nowrap; }

tr.regel { border-bottom: 1px solid var(--rand); }

tr.niveau-1 > th { font-weight: 600; }
tr.niveau-1[data-actie] { cursor: pointer; }
tr.niveau-1[data-actie]:hover { background: var(--vlak); }

tr.niveau-2 { background: #fbfdfe; cursor: pointer; }
tr.niveau-2 > th { padding-left: 1.9rem; font-weight: 400; }
tr.niveau-2:hover { background: var(--vlak); }

tr.niveau-3 { background: var(--vlak); }
tr.niveau-3 > th { padding-left: 3.2rem; font-weight: 400; color: var(--grijs); }

tr.totaal { border-top: 2px solid var(--donker); border-bottom: none; }
tr.totaal > th, tr.totaal > td { font-weight: 600; padding-top: 0.7rem; }

.pijl { display: inline-block; width: 1.1rem; color: var(--accent); }

.datum { display: inline-block; min-width: 5.5rem; color: var(--grijs); }

.bron {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--grijs);
}

.vlag {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--licht);
  color: var(--donker);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

.leeg { color: #9aa8ae; }

.verschil { font-weight: 600; }
.verschil.beter { color: var(--beter); }
.verschil.slechter { color: var(--slechter); }
.verschil.neutraal { color: var(--grijs); }

/* --- Grafieken ---------------------------------------------------------- */

/* Een brede grafiek mag binnen zijn eigen kader schuiven; de pagina zelf nooit. */
.grafiek-omhulsel { overflow-x: auto; }
.grafiek-omhulsel svg { width: 100%; min-width: 34rem; height: auto; display: block; }

.legenda { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--grijs);
}

/* Deze drie kleuren staan ook in grafiek.js (REEKSEN) en moeten daarmee gelijk blijven.
   Ze staan hier omdat de Content-Security-Policy een inline style-attribuut weigert. */
.legenda-vlak { width: 0.75rem; height: 0.75rem; border-radius: 3px; display: inline-block; }
.legenda-vlak.omzet { background: #1b87be; }
.legenda-vlak.kosten { background: #c97b2e; }
.legenda-vlak.winst { background: #7a5ea6; }

.raster { stroke: var(--rand); stroke-width: 1; }
.nullijn { stroke: var(--grijs); stroke-width: 1.5; }
.aslabel, .maandlabel { font-size: 11px; fill: var(--grijs); font-family: inherit; }
.maandlabel.concept { font-style: italic; }

.staaf { transition: opacity 0.12s ease; }
.staaf:hover { opacity: 0.78; }

/* Klikvlak over de hele maandkolom: een groter doel dan de staven zelf, ook op een
   telefoon te raken. */
.maandvlak { fill: transparent; cursor: pointer; }
.maandvlak:hover { fill: rgba(0, 52, 72, 0.05); }

.hint {
  position: fixed;
  z-index: 10;
  background: var(--donker);
  color: var(--papier);
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}

/* --- Omzetlijn en maandpaneel ------------------------------------------- */

.lijn-huidig { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lijn-vorig { stroke: #7d919b; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.legenda-vlak.vorig { background: #7d919b; }

.peilstreep { stroke: var(--donker); stroke-width: 1; stroke-dasharray: 2 3; }
.lijn-lopend { stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.stip-lopend { fill: var(--papier); stroke-width: 2; }
.stip-vorig { fill: #7d919b; }
.peillabel rect { fill: var(--donker); opacity: 0.95; }
.peiltekst { fill: var(--papier); font-size: 12px; font-family: inherit; }
.peiltekst.kop { font-weight: 700; text-transform: capitalize; }

.vorigstreep { stroke: var(--donker); stroke-width: 2.5; }

.legenda-streep {
  display: inline-block;
  width: 0.95rem;
  height: 0;
  border-top: 2.5px solid var(--donker);
  vertical-align: middle;
}

/* Boekingsregels binnen de kolommenweergave: één brede cel over alle maandkolommen. */
.boekingsregel { color: var(--grijs); font-size: 0.85rem; }
.boekingsregel .boekingsbedrag { float: right; color: var(--donker); font-variant-numeric: tabular-nums; }

/* Het maandpaneel zweeft ín de grafiekkaart, verankerd bij de aangeklikte kolom. */
#staven-omhulsel { position: relative; }

.maand-paneel {
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 17rem;
  max-width: 90%;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 52, 72, 0.16);
  padding: 0.6rem 0.75rem 0.5rem;
  z-index: 5;
}

.maand-paneel-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.paneel-sluit {
  background: none;
  color: var(--grijs);
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  cursor: pointer;
}
.paneel-sluit:hover { background: var(--vlak); color: var(--donker); }

.tabbladen.klein { margin-bottom: 0.25rem; }
.tabbladen.klein .tabblad { font-size: 0.8rem; padding: 0.3rem 0.55rem; }

table.cijfers.klein { font-size: 0.85rem; }
table.cijfers.klein th, table.cijfers.klein td { padding: 0.32rem 0.4rem; }
.klein-vorig { color: var(--grijs); font-size: 0.8rem; }
.paneel-noot { color: var(--grijs); font-weight: 400; font-size: 0.78rem; }

/* --- Filterbalk en kolommenweergave overzicht 3 -------------------------- */

.filterbalk {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0.25rem 0 0.9rem;
}

.filter { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: var(--grijs); }

.filter select {
  font: inherit;
  font-size: 0.88rem;
  color: var(--donker);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  background: var(--papier);
}

.filter.schakel {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--donker);
  padding-bottom: 0.35rem;
  cursor: pointer;
}

.filter.schakel input { accent-color: var(--accent); width: 1rem; height: 1rem; }

/* Vergelijking uit: de kolommen vorig jaar en verschil verdwijnen. */
#wv-tabel.zonder-vergelijk th:nth-child(2), #wv-tabel.zonder-vergelijk td:nth-child(2),
#wv-tabel.zonder-vergelijk th:nth-child(5), #wv-tabel.zonder-vergelijk td:nth-child(5) { display: none; }

#kolommen-tabel .maandkop { border-left: 1px solid var(--rand); }
#kolommen-tabel .jaar-vorig { color: var(--grijs); }
#kolommen-tabel thead th { position: sticky; top: 0; background: var(--papier); }

.tabteller {
  display: inline-block;
  min-width: 1.2rem;
  text-align: center;
  font-size: 0.72rem;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 0 0.3rem;
  margin-left: 0.25rem;
  color: var(--grijs);
}

.tabblad.actief .tabteller { background: var(--licht); color: var(--donker); border-color: var(--licht); }

/* --- Tabbladen ---------------------------------------------------------- */

.tabbladen { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--rand); margin-bottom: 0.5rem; }

.tabblad {
  font: inherit;
  font-size: 0.88rem;
  background: none;
  color: var(--grijs);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.tabblad:hover { background: var(--vlak); color: var(--donker); }

.tabblad.actief {
  color: var(--donker);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

tr.klikbaar { cursor: pointer; }
tr.klikbaar:hover { background: var(--vlak); }

/* --- Vraagposten -------------------------------------------------------- */

.teller {
  display: inline-block;
  background: var(--accent);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.vraagpost { border-bottom: 1px solid var(--rand); }
.vraagpost:last-of-type { border-bottom: 0; }

.vraagpost-kop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0.7rem 0.2rem;
  cursor: pointer;
}

.vraagpost-kop:hover { background: var(--vlak); }

.vraagpost-datum {
  color: var(--grijs);
  font-size: 0.82rem;
  min-width: 4.5rem;
  display: inline-block;
  margin-right: 0.6rem;
}
.vraagpost-tekst { flex: 1; }
.vraagpost-bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; }

.status {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* De statuskleuren staan bewust los van de beter/slechter-kleuren van de cijfers:
   dit gaat over wie aan zet is, niet over of iets goed of slecht gaat. */
.status.wacht { background: #fff4e2; color: #8a5a12; border-color: #f0dcbc; }
.status.bezig { background: #eaf4fa; color: #14607f; border-color: #cfe6f2; }
.status.klaar { background: var(--vlak); color: var(--grijs); border-color: var(--rand); }

.vraagpost-detail { padding: 0.2rem 0.2rem 1rem 5.25rem; }

.berichten, .bestanden { list-style: none; margin: 0.5rem 0; padding: 0; }

.berichten li {
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.berichten li.van-klant { background: #eaf4fa; }
.berichten li.van-kantoor { background: var(--vlak); border: 1px solid var(--rand); }
.afzender { font-weight: 600; margin-right: 0.4rem; }

.bestanden li { font-size: 0.9rem; padding: 0.2rem 0; }
.bestanden a { color: var(--accent); }

.aanleveren { display: flex; flex-direction: column; gap: 0.6rem; max-width: 34rem; margin-top: 0.75rem; }
.veld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--grijs); }

.veld input[type="file"], .veld textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--donker);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  background: var(--papier);
}

.aanleveren button { align-self: flex-start; }

.knoppenrij { display: flex; gap: 0.5rem; flex-wrap: wrap; }

button.tweede {
  background: var(--papier);
  color: var(--accent);
  border: 1px solid var(--accent);
}

button.tweede:hover { background: var(--vlak); color: var(--donker); border-color: var(--donker); }

/* Sleepvak voor uploads. Het hele vak is ook gewoon de bestandskiezer. */
.sleepvak {
  border: 2px dashed var(--rand);
  border-radius: 8px;
  padding: 0.75rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.sleepvak.sleep-actief {
  border-color: var(--accent);
  background: #eaf4fa;
}

.sleepvak-gekozen { font-size: 0.85rem; color: var(--donker); }

.tekstknop {
  background: none;
  color: var(--accent);
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.tekstknop:hover { background: none; color: var(--donker); text-decoration: underline; }

@media (max-width: 40rem) {
  .vraagpost-kop { flex-wrap: wrap; gap: 0.35rem 0.6rem; }
  .vraagpost-tekst { flex-basis: 100%; order: 3; }
  .vraagpost-detail { padding-left: 0.2rem; }
}

/* --- Boekhoudersdashboard ----------------------------------------------- */

.terugkoppeling { color: var(--licht); font-size: 0.85rem; }
.terugkoppeling:hover { color: var(--papier); }

.tegels { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.tegel {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  min-width: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* De eerste tegel is waar de boekhouder vanochtend aan kan beginnen. Die mag opvallen;
   de rest is context. */
.tegel.nadruk { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tegel.let-op { border-color: #f0c9c4; background: #fdf3f2; }

.tegel-getal { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tegel-label { font-size: 0.78rem; color: var(--grijs); }

tr.ingeklapt > td, tr.ingeklapt > th { background: inherit; }
tr.verwerkt { opacity: 0.65; }

.strepen-vak { display: inline-block; margin-right: 0.4rem; }
.strepen { accent-color: var(--accent); width: 0.95rem; height: 0.95rem; vertical-align: middle; cursor: pointer; }

.streep-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #eaf4fa;
  border: 1px solid #cfe6f2;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}

.streep-balk button:disabled { background: var(--rand); color: var(--grijs); cursor: not-allowed; }

.ververs {
  background: none;
  color: var(--accent);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  font-size: 0.95rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.ververs:hover { background: var(--vlak); color: var(--donker); }
.ververs { font-size: 0.8rem; white-space: nowrap; }
.ververs.bezig { animation: pulseer 1s ease-in-out infinite; }
.ververs:disabled { color: var(--grijs); cursor: wait; }

@keyframes pulseer { 50% { opacity: 0.35; } }
tr.niveau-3 .vraagpost-detail { padding: 0.4rem 0 0.9rem 2rem; }

/* --- Beheerscherm ------------------------------------------------------- */

.gebruiker-blok { border-top: 1px solid var(--rand); padding: 0.8rem 0.2rem; }

.gebruiker-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.klein-knop { font-size: 0.78rem; padding: 0.3rem 0.6rem; }

.toewijzing {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--vlak);
  border-radius: 8px;
  align-items: center;
}

.vakje { font-size: 0.85rem; color: var(--donker); display: inline-flex; align-items: center; gap: 0.3rem; }
.vakje input { accent-color: var(--accent); }

.filter input {
  font: inherit;
  font-size: 0.88rem;
  color: var(--donker);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  background: var(--papier);
}

.tekstknop.licht { color: var(--licht); }
.tekstknop.licht:hover { color: var(--papier); }

/* --- Inloggen en 2FA-koppelen ------------------------------------------- */

body.midden {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.inlogkaart {
  width: 100%;
  max-width: 24rem;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 1.75rem;
}

.inlogkop { margin: 0; font-size: 1.3rem; color: var(--donker); }
.inlogkop2 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--donker); }

.inlogstap { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.inlogstap form { display: flex; flex-direction: column; gap: 0.8rem; }

.inlogkaart .veld input {
  font: inherit;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  color: var(--donker);
}

.codeveld {
  font-size: 1.3rem !important;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.qr { display: block; margin: 0.5rem auto; border: 1px solid var(--rand); border-radius: 8px; }

.sleutel {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  background: var(--vlak);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  word-break: break-all;
}

.herstelcodes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  background: var(--vlak);
  border: 1px dashed var(--rand);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--donker);
}

/* Bij afdrukken alleen de herstelcodes, niet de rest van het scherm. */
@media print {
  body.midden * { visibility: hidden; }
  .herstelcodes, .herstelcodes * { visibility: visible; }
  .herstelcodes { position: absolute; top: 1cm; left: 1cm; }
}

/* --- Knop en voet ------------------------------------------------------- */

button {
  font: inherit;
  font-size: 0.85rem;
  background: var(--accent);
  color: var(--papier);
  border: 0;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

button:hover { background: var(--donker); }
button:focus-visible { outline: 3px solid var(--licht); outline-offset: 2px; }

.voet {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  color: var(--grijs);
  font-size: 0.8rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 40rem) {
  .kop-binnen { align-items: stretch; }
  .kiezer select { min-width: 0; width: 100%; }
  .kiezers { width: 100%; }
  .kiezer { flex: 1; }
}

/* --- Kantoorlogo en herinnering-blok ------------------------------------ */

.kop-merk { display: flex; align-items: center; gap: 0.9rem; }

.logo {
  height: 2.4rem;
  max-width: 9rem;
  object-fit: contain;
  background: var(--papier);
  border-radius: 8px;
  padding: 0.2rem 0.4rem;
}

.logo.groot { height: 3.2rem; max-width: 12rem; margin-bottom: 0.5rem; padding: 0; background: none; }

.logo-voorbeeld { height: 3rem; max-width: 10rem; object-fit: contain; border: 1px solid var(--rand); border-radius: 8px; padding: 0.25rem; }

.herinnering-blok { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-weight: 400; font-size: 0.85rem; }
.herinnering-blok .h-interval { width: 3.2rem; }
.herinnering-blok input, .herinnering-blok select {
  font: inherit; font-size: 0.85rem; color: var(--donker);
  border: 1px solid var(--rand); border-radius: 6px; padding: 0.2rem 0.35rem; background: var(--papier);
}

/* --- Kopnavigatie: schakel-tabbladen, naam en uitlogknop ----------------- */

.kop-rechts {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.schakel-tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.2rem;
}

.schakel-tabs .schakel {
  color: var(--licht);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}

.schakel-tabs .schakel:hover { color: var(--papier); }

.schakel-tabs .schakel.actief {
  background: var(--papier);
  color: var(--donker);
  font-weight: 600;
}

.kop-acties { display: flex; align-items: center; gap: 0.9rem; }

.wie-klein { color: var(--licht); font-size: 0.85rem; white-space: nowrap; }

.kop-knop {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--papier);
  padding: 0.32rem 0.9rem;
  cursor: pointer;
}

.kop-knop:hover { background: rgba(255, 255, 255, 0.12); }

/* --- Keuzebalk: administratie en jaar, onder de kop ---------------------- */

.keuzebalk {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  margin-bottom: 1.5rem;
}

.keuzebalk select { min-width: 13rem; }

/* --- PDF-knop in de tabbladenbalk van de cijferkaart --------------------- */

.tabbladen .pdf-knop { margin-left: auto; align-self: center; margin-bottom: 0.3rem; }