/* mijnzone.js — «Mijn zone» (VERWIJZING V2) · alleen tokens.
   Sober met opzet: dit scherm hoort niet te verleiden tot openslaan met de
   klant ernaast. Eén accentregel bovenaan die zegt waarom. */
.mz-sectie { padding: 16px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.mz-sectie:first-of-type { border-top: 0; padding-top: 4px; }
.mz-sectie h3 { margin: 0 0 6px; font: 700 14px/1.3 var(--font-ui); color: var(--c-ink); }
.mz-sub { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; margin: 0 0 10px; }
.mz-nb { margin-top: 8px; font-style: italic; }

/* de reden dat dit achter een eigen ingang staat, in één regel */
.mz-waarschuwing {
  margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius, 8px);
  background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn);
  font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5;
}

.mz-saldo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.mz-saldo__bedrag { font: 700 26px/1.1 var(--font-mono); color: var(--c-ink); }
.mz-saldo__sub { font-size: 12px; color: var(--c-ink-2); }

.mz-rijen { display: flex; flex-direction: column; }
.mz-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn);
}
.mz-rij:first-child { border-top: 0; }
.mz-rij__wat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-rij__wat strong { font: 600 13px/1.35 var(--font-ui); color: var(--c-ink); }
.mz-rij__wat .mz-sub { margin: 0; font-size: 11.5px; }
.mz-rij__bedrag { font: 600 13.5px var(--font-mono); color: var(--c-ink); white-space: nowrap; }
/* een teruggedraaide boeking leest anders dan een opbouw — dat verschil
   hoort zichtbaar te zijn zonder dat je de reden hoeft te lezen */
.mz-rij--retour .mz-rij__bedrag { color: var(--c-rood, var(--c-ink-2)); }

.mz-afmeld { margin-left: auto; }

/* Terugkijken per maand. Alleen maanden waarin voor deze persoon iets
   staat — door lege maanden bladeren helpt niemand. */
.mz-maanden { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mz-maand {
  padding: 5px 11px; border-radius: 99px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme);
  font: 600 12px var(--font-ui); color: var(--c-ink-2);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mz-maand:hover { border-color: var(--c-lijn); color: var(--c-ink); }
.mz-maand:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.mz-maand--nu { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-creme); }
@media (prefers-reduced-motion: reduce) { .mz-maand { transition: none; } }

/* Backoffice in Mijn zone (N1). Compact: dit is geen werkplek maar een
   inhoudsopgave — je komt hier om ergens heen te gaan, niet om te blijven. */
.mz-back { display: flex; flex-direction: column; gap: 12px; }
.mz-backwr strong { display: block; font: 700 12.5px var(--font-ui); color: var(--c-ink); margin-bottom: 5px; }
.mz-backmods { display: flex; flex-wrap: wrap; gap: 5px; }
.mz-backmod {
  border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer;
  padding: 4px 10px; border-radius: 99px; font: 600 11.5px var(--font-ui); color: var(--c-ink-2);
}
.mz-backmod:hover { border-color: var(--accent, var(--c-groen)); color: var(--accent, var(--c-groen)); }
.mz-backmod:focus-visible { outline: 3px solid var(--accent, var(--c-groen)); outline-offset: 1px; }