/*
 * Componenten — STIJLGIDS §2, één blok per component, in de volgorde van de gids.
 * Handgeschreven; geen framework, geen utility-klassen, geen icon-font (iconen zijn inline SVG).
 */

/* ---------- §2.1 Zijnavigatie ---------- */

.nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: var(--nav-w);
  padding: 20px 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-2) var(--sp-5);
}

.nav__logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #FFFFFF;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.nav__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.15; }
.nav__subtitle { font-size: var(--fs-xs); color: var(--ink-3); }

.nav__items { display: flex; flex-direction: column; gap: 2px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--hit);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--ink);
  text-decoration: none;
}

.nav__item:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }

.nav__item.active {
  background: var(--accent-tint);
  color: var(--accent-on);
  font-weight: 600;
}

.nav__item svg { flex: 0 0 auto; }
.nav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav__badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.nav__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.nav__user { padding: 0 var(--sp-2); }
.nav__user-name { font-size: var(--fs-md); font-weight: 500; }
.nav__user-role { font-size: var(--fs-xs); color: var(--ink-3); }

/* Thema-toggle onderaan de zijnavigatie. */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--hit);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.theme-toggle:hover { background: var(--surface-hover); color: var(--ink); }

/* 1024–1279: enkel iconen (§1.6). */
@media (max-width: 1279px) {
  .nav { width: var(--nav-w-collapsed); padding: 20px 8px; align-items: center; }
  .nav__brand { padding: 0 0 var(--sp-5); }
  .nav__title, .nav__subtitle, .nav__label, .nav__user, .theme-toggle span { display: none; }
  .nav__item { justify-content: center; padding: 0; width: var(--hit); }
  .nav__badge { position: absolute; transform: translate(14px, -12px); }
  .nav__item { position: relative; }
  .theme-toggle { justify-content: center; padding: 0; width: var(--hit); }
}

@media (max-width: 768px) {
  .nav { display: none; }
}

/* ---------- §2.2 Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--hit);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}

.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }

.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn--secondary:hover { background: var(--surface-hover); color: var(--ink); }

.btn--tertiary { background: transparent; color: var(--accent-hover); }
.btn--tertiary:hover { background: var(--accent-tint); color: var(--accent-on); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--border);
  border-color: var(--border);
  color: var(--ink-3);
  cursor: not-allowed;
}

.btn:disabled:hover { background: var(--border); color: var(--ink-3); }

.btn--compact { height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* In donkere modus krijgt de primaire knop donkere tekst (§1.2). */
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--primary:hover { color: var(--ink-inverse); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary,
  :root:not([data-theme="light"]) .btn--primary:hover { color: var(--ink-inverse); }
}

@media (max-width: 768px) {
  .btn { height: 52px; border-radius: var(--r-xl); font-size: var(--fs-lg); font-weight: 600; }
  .btn--compact { height: 40px; font-size: var(--fs-md); }
}

/* ---------- §2.3 Velden ---------- */

.field { display: flex; flex-direction: column; gap: var(--sp-1); }

.field__label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }

.field__control,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field select {
  height: var(--hit);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-md);
  width: 100%;
}

.field__control::placeholder { color: var(--ink-3); }

.field__control:focus,
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.field__hint { font-size: var(--fs-xs); color: var(--ink-3); }

.field--error .field__label,
.field--error .field__hint,
.field__error { color: var(--neg); }

.field--error .field__control,
.field--error input { border-color: var(--neg); }

.field__error { font-size: var(--fs-xs); }

/* Bedragveld: euro links, waarde rechts. */
.field--amount { position: relative; }
.field--amount .field__control { padding-left: 28px; text-align: right; }
.field--amount::before {
  content: "€";
  position: absolute;
  left: var(--sp-3);
  bottom: 10px;
  color: var(--ink-3);
  pointer-events: none;
}

.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.checkbox input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input[type="checkbox"]:checked::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid #FFFFFF;
  border-top: 0; border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.checkbox input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- §2.4 Bedragchip ---------- */

.amount {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.amount[data-sign="neg"] { background: var(--neg-tint); color: var(--neg); }
.amount[data-sign="pos"] { background: var(--pos-tint); color: var(--pos); }
.amount[data-sign="zero"] { background: var(--surface-2); color: var(--ink-3); }

.amount--lg { height: var(--hit); padding: 0 var(--sp-3); font-size: var(--fs-h2); font-weight: 600; }

/* Inline-variant voor tabellen: enkel kleur, geen achtergrond. */
.amount--inline {
  height: auto;
  padding: 0;
  background: none !important;
  text-align: right;
}

/* ---------- §2.5 Categoriechip ---------- */

.cat-chip {
  display: inline-flex;
  align-items: stretch;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  max-width: 100%;
}

.cat-chip__main {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cat-chip__sub {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-chip__confidence { display: inline-flex; align-items: center; padding: 0 var(--sp-2); font-weight: 600; }
.cat-chip--certain .cat-chip__confidence { color: var(--pos); }
.cat-chip--suggestion { border-style: dashed; border-color: var(--border-strong); }
.cat-chip--suggestion .cat-chip__confidence { color: var(--warn); }
.cat-chip--none { border-style: dashed; border-color: var(--border-strong); color: var(--ink-3); }
.cat-chip--none .cat-chip__sub {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis; color: var(--ink-3); }

/* Hoofdcategorie-tinten (§1.1). Codes zoals in main_categories.csv. */
.cat-chip__main[data-cat="Food"]           { background: var(--cat-voeding-bg);     color: var(--cat-voeding-fg); }
.cat-chip__main[data-cat="Educational"]    { background: var(--cat-educatief-bg);   color: var(--cat-educatief-fg); }
.cat-chip__main[data-cat="Budget"]         { background: var(--cat-budget-bg);      color: var(--cat-budget-fg); }
.cat-chip__main[data-cat="Bank"]           { background: var(--cat-bank-bg);        color: var(--cat-bank-fg); }
.cat-chip__main[data-cat="Furnishing"]     { background: var(--cat-inrichting-bg);  color: var(--cat-inrichting-fg); }
.cat-chip__main[data-cat="Maintenance"]    { background: var(--cat-onderhoud-bg);   color: var(--cat-onderhoud-fg); }
.cat-chip__main[data-cat="Sales"]          { background: var(--cat-verkoop-bg);     color: var(--cat-verkoop-fg); }
.cat-chip__main[data-cat="Subscription"]   { background: var(--cat-abonnement-bg);  color: var(--cat-abonnement-fg); }
.cat-chip__main[data-cat="Transfer"]       { background: var(--cat-overboeking-bg); color: var(--cat-overboeking-fg); }
.cat-chip__main[data-cat="OpeningBalance"] { background: var(--cat-bank-bg);        color: var(--cat-bank-fg); }

/* Los badge, voor smalle tabellen (§2.5 compact). */
.cat-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cat-badge[data-cat="Food"]           { background: var(--cat-voeding-bg);     color: var(--cat-voeding-fg); }
.cat-badge[data-cat="Educational"]    { background: var(--cat-educatief-bg);   color: var(--cat-educatief-fg); }
.cat-badge[data-cat="Budget"]         { background: var(--cat-budget-bg);      color: var(--cat-budget-fg); }
.cat-badge[data-cat="Bank"]           { background: var(--cat-bank-bg);        color: var(--cat-bank-fg); }
.cat-badge[data-cat="Furnishing"]     { background: var(--cat-inrichting-bg);  color: var(--cat-inrichting-fg); }
.cat-badge[data-cat="Maintenance"]    { background: var(--cat-onderhoud-bg);   color: var(--cat-onderhoud-fg); }
.cat-badge[data-cat="Sales"]          { background: var(--cat-verkoop-bg);     color: var(--cat-verkoop-fg); }
.cat-badge[data-cat="Subscription"]   { background: var(--cat-abonnement-bg);  color: var(--cat-abonnement-fg); }
.cat-badge[data-cat="Transfer"]       { background: var(--cat-overboeking-bg); color: var(--cat-overboeking-fg); border: 1px dashed var(--border-strong); }
.cat-badge[data-cat="OpeningBalance"] { background: var(--cat-bank-bg);        color: var(--cat-bank-fg); }

/* ---------- §2.6 Statuspil ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pill--new       { background: var(--cat-bank-bg); color: var(--ink-2); }
.pill--new::before { background: var(--ink-3); }
.pill--booked    { background: var(--pos-tint); color: var(--pos-on); }
.pill--booked::before { background: var(--pos); }
.pill--ignored   { background: transparent; border-color: var(--border); color: var(--ink-3); }
.pill--ignored::before { display: none; }
.pill--prepared  { background: var(--warn-tint); color: var(--warn-on); }
.pill--prepared::before { background: var(--warn); }
.pill--submitted { background: var(--accent-tint); color: var(--accent-on); }
.pill--submitted::before { background: var(--accent); }
.pill--settled   { background: var(--olive-tint); color: var(--olive-on); }
.pill--settled::before { content: "✓"; width: auto; height: auto; background: none; border-radius: 0; }
.pill--waiting   { background: var(--warn-tint); color: var(--warn-on); }
.pill--waiting::before { display: none; }

/* Betaalwijze-pil (§2.6, S8). */
.pill--pay-project  { background: var(--cat-bank-bg); color: var(--cat-bank-fg); }
.pill--pay-project::before { background: var(--cat-bank-fg); }
.pill--pay-central  { background: var(--cat-budget-bg); color: var(--cat-budget-fg); }
.pill--pay-central::before { background: var(--cat-budget-fg); }
.pill--pay-advance  { background: var(--cat-onderhoud-bg); color: var(--cat-onderhoud-fg); }
.pill--pay-advance::before { background: var(--cat-onderhoud-fg); }
.pill--pay-cash     { background: var(--cat-bank-bg); color: var(--cat-bank-fg); }
.pill--pay-cash::before { background: var(--cat-bank-fg); }

/* Nog niet terugbetaald voorschot (S7). Naast de betaalwijze-pil, niet in de plaats ervan: wie
   voorschoot en of het al terug is, zijn twee dingen. */
.pill--open { background: var(--warn-tint); color: var(--warn-on); margin-left: var(--sp-1); }
.pill--open::before { display: none; }

/* Vlag-pil op een budgetpot (§2.7). */
.flag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.flag--warn { background: var(--warn-tint); color: var(--warn-on); }
.flag--over { background: var(--neg-tint); color: var(--neg); }

/* ---------- §2.7 Voortgangsbalk budgetpot ---------- */

.pot-bar {
  display: flex;
  height: 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
}

.pot-bar__seg { height: 100%; }
.pot-bar__seg--direct { background: var(--accent); }
.pot-bar__seg--settled { background: var(--olive); }
.pot-bar__seg--submitted { background: var(--hatch-olive); }
.pot-bar__seg--torecover { background: var(--hatch-terra); }

.pot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.pot-legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pot-legend__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); }
.pot-legend__swatch--direct { background: var(--accent); }
.pot-legend__swatch--settled { background: var(--olive); }
.pot-legend__swatch--submitted { background: var(--hatch-olive); }
.pot-legend__swatch--torecover { background: var(--hatch-terra); }

@media (max-width: 768px) {
  .pot-bar { height: 8px; }
}

/* ---------- §2.8 Bijlage-thumbnail ---------- */

.thumb {
  position: relative;
  width: 72px; height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.thumb img { width: 100%; height: 100%; object-fit: cover; }

.thumb--lg { width: 96px; height: 96px; }
.thumb--sm { width: 32px; height: 32px; border-radius: var(--r-sm); }

.thumb__badge {
  position: absolute;
  left: 4px; bottom: 4px;
  height: 18px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
  color: #FFFFFF;
}

.thumb__badge--photo { background: var(--ink); }
.thumb__badge--pdf { background: var(--neg); }

/* Op 32 px is er geen plaats voor het type-badge; de kolomkop zegt al wat het is. */
.thumb--sm .thumb__badge { display: none; }

.thumb--add { border: 1px dashed var(--border-strong); background: var(--bg); color: var(--accent); cursor: pointer; }
.thumb--missing { border: 1px dashed var(--border-strong); background: var(--bg); color: var(--warn); }

/* ---------- §2.9 Zoekbare dropdown ---------- */

.combobox { position: relative; }

.combobox__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0; right: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  max-height: 320px;
  overflow-y: auto;
}

.combobox__group {
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.combobox__option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--hit);
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.combobox__option[aria-selected="true"],
.combobox__option:hover { background: var(--accent-tint); }

.combobox__match { font-weight: 600; }

/* ---------- §2.10 Tabel ---------- */

.table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.table__scroll { overflow-x: auto; }

.table table { width: 100%; }

.table thead th {
  height: var(--row-head);
  padding: 0 var(--sp-4);
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
}

.table tbody td {
  height: var(--row);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-hover); }

.table tbody tr[aria-selected="true"],
.table tbody tr:focus-visible {
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
  outline: none;
}

.table th.num, .table td.num { text-align: right; }

/* Groepskop (datum, begrotingscategorie, RecoverFrom). */
.table tbody tr.group td {
  height: 40px;
  background: var(--surface-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.table tbody tr.total td {
  height: 44px;
  background: var(--bg);
  font-weight: 600;
  border-bottom: 0;
}

.table__cell--wide { min-width: 240px; }

/* Een tabel die in haar eigen kader scrollt, mag de pagina niet meesleuren. */
.table__scroll { max-width: 100%; }

/* Het verrichtingenregister (S6) is de breedste tabel van de app: acht kolommen die samen ruim
   1.380 px vragen, terwijl er van een venster van 1440 px maar zo'n 1.119 overblijft: 232 px
   zijnavigatie, 2 × 36 px paginamarge en de schuifbalk. De `max-width: 1600px` op `.page` heeft
   daar geen aandeel — die knijpt pas boven een venster van ~1704 px.

   `overflow-x: auto` alleen lost dat niet op. Er ís een schuifbalk, maar op Windows is die een
   overlay die pas bij het scrollen verschijnt, dus wat je ziet is een tabel die rechts ophoudt —
   en juist rechts staan bedrag en status, de twee kolommen waarvoor je de lijst opent. Daarom
   vallen onder 1500 px het volgnummer en de tegenpartij weg: het volgnummer is een bankreferentie
   die je zelden leest, en de tegenpartij staat meestal ook al in de omschrijving. Beide blijven
   voluit op het detailscherm (S5) staan, en de schuifbalk blijft als vangnet. */
/* De chipkolom heeft een vaste breedte van 340 px in de opmaak; hier mag ze meegeven, want de
   categoriechips knippen zichzelf al netjes af. Dat scheelt op elke breedte. */
/* Breedtes staan hier en niet als `style=` op de kolom: een inline max-width wint van elke
   mediaquery, en dan knijpt de kolom nooit mee. */
.table--register .cell--chips { width: auto; min-width: 190px; }
.table--register .col--desc { max-width: 320px; }
.table--register .col--drop { max-width: 180px; }

/* Boven de drempel staan alle acht kolommen er, en dan moeten ze ook echt passen. Op hun volle
   breedte vraagt de tabel ~1.380 px en zou je pas rond een venster van 1.700 px alles zien — de
   drempel verleggen zonder dit zou het probleem gewoon een maat opschuiven. Omschrijving,
   tegenpartij en de chipkolom knijpen daarom mee; alle drie knippen ze af, en de volledige tekst
   staat in een title of op het detailscherm. Vanaf ~1.720 px venster past de tabel op haar volle
   breedte en houdt het knijpen op. */
@media (min-width: 1500px) and (max-width: 1719px) {
  .table--register .col--drop { max-width: 140px; }
  .table--register .col--desc { max-width: 200px; }
  .table--register .cell--chips { min-width: 0; max-width: 240px; overflow: hidden; }
}

@media (max-width: 1499px) {
  .table--register .col--drop { display: none; }

  /* Met die twee weg moeten omschrijving en chips nog een stuk inleveren voor de laatste kolom —
     status — binnen het kader valt. Beide knippen af met een ellips en dragen hun volledige tekst
     in een title, dus er gaat niets verloren dat je niet kunt aanwijzen.

     De krapste breedte is niet de kleinste: tot 1279 px staat de zijnavigatie ingeklapt en is er
     méér plaats voor de tabel dan op 1280, waar ze weer voluit staat. Deze maten zijn op de band
     1280–1499 gemeten, niet op 1200 alleen. */
  .table--register .cell--chips { min-width: 150px; }
  .table--register .col--desc { max-width: 200px; }
  .table--register thead th,
  .table--register tbody td { padding: 0 var(--sp-3); }
}

@media (max-width: 1279px) {
  .table tbody td { height: 46px; font-size: var(--fs-sm); }

  /* De compacte variant (§2.10) voor brede cijfertabellen zoals het maandoverzicht: krappere
     cellen, en de eerste kolom blijft staan terwijl de rest binnen het kader schuift. Zonder dat
     laatste weet je bij kolom acht niet meer welke maand je leest. */
  .table--compact thead th,
  .table--compact tbody td {
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
  }

  .table--compact thead th:first-child,
  .table--compact tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }

  .table--compact thead th:first-child,
  .table--compact tbody tr.total td:first-child { background: var(--bg); }
  .table--compact tbody tr:hover td:first-child { background: var(--surface-hover); }
}

/* ---------- §2.11 Kaart ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.card--roomy { padding: var(--sp-5); }
.card__title { font-size: var(--fs-lg); font-weight: 600; }

/* Kop-cijferstrip: aaneengesloten kaarten met 1 px scheiding. */
.card-strip {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card-strip > * { background: var(--surface); padding: var(--sp-4); }

/* Fase-2-kaart. */
.card--phase2 { border-style: dashed; border-color: var(--border-strong); color: var(--ink-3); }
.card--phase2 * { color: var(--ink-3); }

.phase2-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ---------- §2.12 Toast ---------- */

.toast-host {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 14px;
  border-radius: 8px;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-float);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}

.toast--ask { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.toast--ask .toast__highlight { color: #E3B9A6; }
.toast--confirm .toast__icon { color: var(--pos); }

/* ---------- §2.13 Lege staat ---------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: var(--hit); height: var(--hit);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-3);
  margin-bottom: var(--sp-1);
}

.empty__icon--done { background: var(--olive-tint); color: var(--olive-on); }
.empty__title { font-size: 15px; font-weight: 500; }
.empty__text { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- §2.14 Filterchips, segmentknoppen, tabs ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover { background: var(--surface-hover); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }

.segment {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}

.segment__btn {
  height: 32px;
  padding: 0 var(--sp-3);
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.segment__btn + .segment__btn { border-left: 1px solid var(--border-strong); }
.segment__btn.active { background: var(--ink); color: var(--ink-inverse); }

.tabs {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.tabs__tab {
  height: var(--hit);
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-md);
  cursor: pointer;
  text-decoration: none;
}

.tabs__tab:hover { color: var(--ink); text-decoration: none; }
.tabs__tab.active { color: var(--accent-on); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 500; }

/* ---------- §2.15 Nog-te-doen-rij ---------- */

.todo-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  height: 56px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  text-decoration: none;
}

.todo-row:last-child { border-bottom: 0; }
.todo-row:hover { background: var(--surface-hover); text-decoration: none; color: var(--ink); }

.todo-row__count {
  display: grid;
  place-items: center;
  width: var(--hit); height: var(--hit);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  background: var(--cat-bank-bg);
  color: var(--ink-2);
}

.todo-row__count--inbox { background: var(--accent-tint); color: var(--accent-on); }
.todo-row__count--missing { background: var(--warn-tint); color: var(--warn-on); }
.todo-row__count--claim { background: var(--olive-tint); color: var(--olive-on); }

.todo-row__title { display: block; font-size: var(--fs-md); font-weight: 500; }
.todo-row__sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- §2.16 Mobiele tabbalk ---------- */

.tabbar { display: none; }

@media (max-width: 768px) {
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    height: 82px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    padding-top: var(--sp-2);
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding-top: var(--sp-2);
    font-size: 11px;
    color: var(--ink-2);
    text-decoration: none;
  }

  .tabbar__item.active { color: var(--accent-on); }
  .tabbar__item:hover { text-decoration: none; }

  .tabbar__center {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: var(--shadow-float);
  }
}

/* ---------- Formulierschermen zonder navigatie (login, setup) ---------- */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--bg);
}

.auth__card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

.alert--error { background: var(--neg-tint); color: var(--neg); }
.alert--ok { background: var(--pos-tint); color: var(--pos-on); }
.alert--warn { background: var(--warn-tint); color: var(--warn-on); }

/* Placeholder voor een scherm dat nog moet komen (fase 1, punten 3 → 9). */
.placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--ink-2);
}

/* ---------- dropzone (S3) ---------- */

/* De onzichtbare InputFile ligt over de hele zone: slepen én klikken werken zo allebei,
   zonder eigen JavaScript. */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 168px;
  padding: var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
}

.dropzone:hover { background: var(--surface-hover); }
.dropzone:focus-within { border-color: var(--accent); box-shadow: var(--focus); }

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone--busy { cursor: progress; color: var(--ink-3); }
.dropzone--busy input[type="file"] { cursor: progress; }

.dropzone__icon { color: var(--accent); }
.dropzone__title { font-size: var(--fs-lg); font-weight: 500; }
.dropzone__hint { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- cijferstrip ---------- */

.figure {
  font-size: 28px;
  font-weight: 600;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  /* Een bedrag mag nooit over twee regels breken: "€" boven "2.000,00" leest als twee cijfers. */
  white-space: nowrap;
}

.figure--lg { font-size: var(--fs-display); }

/* ---------- filterbalk (S6) ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.filters .field { min-width: 150px; }
.filters .field--grow { flex: 1 1 220px; }

/* ---------- restbedrag-indicator (S5) ---------- */

.remainder {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

.remainder--ok { background: var(--pos-tint); color: var(--pos-on); }
.remainder--open { background: var(--warn-tint); color: var(--warn-on); }

/* ---------- gegevensrooster (S5-kop) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3) var(--sp-5);
}

.facts__label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.facts__value { font-size: var(--fs-md); overflow-wrap: anywhere; }

/* Foutstaat op een los veld dat niet in een .field--error staat (STIJLGIDS §2.3). */
.field__control--error { border-color: var(--neg); }

/* Een keuzelijst in een tabelcel (S10). Lager en smaller dan het formulierveld, want
   ze staat naast een bedrag en een datum en niet onder een label. */
.field__control--compact {
  height: 28px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  width: auto;
  max-width: 100%;
}

/* De optie in het paneel zet badge en naam naast elkaar. */
.combobox__option { display: flex; align-items: center; gap: var(--sp-2); }

/* Een kolom die afknipt in plaats van de tabel breder te maken. Samen met een vaste breedte op
   de cel houdt dit de knoppenkolom rechts binnen beeld (STIJLGIDS §2.10: nooit de categoriechip
   afknippen, wel de mededeling). */
.table td.cell--clip,
.table th.cell--clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabel met formuliervelden erin (S5). De gewone .table klipt op haar afgeronde hoeken en
   scrollt horizontaal; een dropdownpaneel dat uit een rij openklapt, verdwijnt daardoor. Hier
   staan alleen invoervelden die zelf afbreken, dus klippen mag weg. */
.table--form,
.table--form .table__scroll,
.table--form tbody td {
  overflow: visible;
}

.table--form tbody td { white-space: normal; }

/* Een kolom met categoriechips: die mogen afbreken naar een tweede regel in plaats van de
   tabel breder te maken. De chip zelf wordt nooit afgeknipt (STIJLGIDS §2.5). */
.table td.cell--chips {
  white-space: normal;
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
}

.table td.cell--chips > * { margin: 2px var(--sp-1) 2px 0; }

/* ---------- S4 Inbox: één rij als CSS-grid (STIJLGIDS §2.10, mockup S4-inbox-1440.png) ----------

   Een tabel met een kolom per veld liep ook op 1440 px buiten beeld: de knoppen Bevestig en Wijzig
   vielen weg en de pagina kreeg een scrollbalk. Hier krimpt enkel de tekstkolom (minmax(0,1fr));
   de chipkolom houdt haar 240 px uit §2.5 en de knoppenkolom staat vast rechts. */

.inbox {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.inbox__group {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--sp-4);
  background: var(--surface-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.inbox__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 104px minmax(240px, 24rem) 168px;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  cursor: default;
}

.inbox__row:last-child { border-bottom: 0; }
.inbox__row:hover { background: var(--surface-hover); }

.inbox__row[aria-selected="true"] {
  background: var(--surface-selected);
  box-shadow: inset 3px 0 0 var(--accent);
}

.inbox__select { justify-self: start; }

.inbox__text { min-width: 0; }

.inbox__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox__sub {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox__amount { text-align: right; font-variant-numeric: tabular-nums; }

.inbox__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.inbox__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* 1024–1279: de compacte chip van §2.5 — hoofdcategorie als los badge, geen omhullende rand —
   zodat de chipkolom smaller mag worden zonder de subcategorie af te knippen. */
@media (max-width: 1279px) {
  .inbox__row {
    grid-template-columns: 24px minmax(0, 1fr) 96px minmax(200px, 18rem) 156px;
    gap: var(--sp-2);
  }

  .inbox .cat-chip {
    height: 26px;
    gap: var(--sp-2);
    border-color: transparent;
    background: transparent;
    overflow: visible;
  }

  .inbox .cat-chip--suggestion,
  .inbox .cat-chip--none { border-color: transparent; }

  .inbox .cat-chip__main {
    align-self: center;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-size: 10px;
  }

  .inbox .cat-chip__sub { padding: 0; max-width: 12rem; }
  .inbox .cat-chip__confidence { padding: 0; }
}

/* ≤768: de kolommen onder elkaar; de knoppen blijven een volle regel breed en dus raakbaar. */
@media (max-width: 768px) {
  .inbox__row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas:
      "select text amount"
      ".      chips chips"
      ".      actions actions";
    row-gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
  }

  .inbox__select { grid-area: select; align-self: start; margin-top: 2px; }
  .inbox__text { grid-area: text; }
  .inbox__amount { grid-area: amount; align-self: start; }
  .inbox__chips { grid-area: chips; }
  .inbox__actions { grid-area: actions; justify-content: flex-start; }
}

/* ---------- S12 Bonnetje toevoegen (STIJLGIDS §2.16) ---------- */

/* Het formulier scrollt boven een vaste voetknop; die 96 px houdt de laatste inhoud vrij.
   De maatvoering is die van een telefoon (390); op een breed scherm blijft de kolom smal in
   plaats van de cameraknop over 1400 px uit te rekken. */
.receipt { max-width: 560px; padding-bottom: 96px; }

/* De onzichtbare InputFile ligt over de hele knop, zodat het hele vlak klikbaar is. */
.camera__input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.camera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 260px;
  padding: var(--sp-6);
  border-radius: 16px;
  background: var(--accent);
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
}

.camera:focus-within { box-shadow: var(--focus); }

.camera__lens {
  width: 64px; height: 64px;
  margin-bottom: var(--sp-3);
  border: 4px solid #FFFFFF;
  border-radius: 50%;
}

.camera__label { font-size: var(--fs-h2); font-weight: 600; }
.camera__hint { font-size: var(--fs-sm); opacity: .85; }

/* Het bedrag is het enige veld dat op een telefoon groot mag zijn (§1.3). */
.receipt__amount .field__control { height: 56px; font-size: 28px; font-weight: 600; }

/* Radiokaart: 48 px, gekozen = accent-tint met een accentrand (§2.3). */
.radio-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}

.radio-card--on { border-color: var(--accent); background: var(--accent-tint); }
.radio-card:focus-within { box-shadow: var(--focus); }
.radio-card span { display: block; }
.radio-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* Vaste voetknop onder het formulier; boven de tabbalk op een telefoon. */
.receipt__foot {
  position: sticky;
  bottom: 0;
  margin-top: var(--sp-5);
  padding: var(--sp-4) 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 24px);
}

@media (max-width: 768px) {
  .receipt { padding-bottom: 160px; }
  .receipt__foot { bottom: 82px; }
}

/* ---------- Bonnenlijst (S12b, en de "bon gevonden"-kaart in S5) ---------- */

.receipt-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

.receipt-list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.receipt-list--cards .receipt-list__item { padding: var(--sp-3) var(--sp-4); }

.receipt-match { border-color: var(--warn); }

@media (max-width: 768px) {
  .receipt-list__item { flex-wrap: wrap; }
}

/* ---------- S11 Bijlagengalerij ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}

.gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

/* De thumbnail is de knop; de knop zelf mag niets aan het beeld toevoegen. */
.gallery__button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.gallery__button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-md); }

/* In de galerij vult de thumbnail haar cel, in plaats van er als vierkantje in te zweven. */
.gallery .thumb { width: 100%; height: 132px; }

.gallery__title,
.gallery__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery__title { font-size: var(--fs-sm); font-weight: 500; }
.gallery__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.gallery__meta--waiting { color: var(--warn-on); }

/* ---------- Lightbox (S11) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(42, 37, 33, .72);
}

.lightbox__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(920px, 100%);
  max-height: 90vh;
  padding: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  overflow: auto;
}

.lightbox__head { display: flex; align-items: center; gap: var(--sp-3); }
.lightbox__image { max-width: 100%; max-height: 70vh; object-fit: contain; align-self: center; }
.lightbox__pdf { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--r-md); }

.lightbox__links { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.lightbox__links li { display: flex; align-items: center; gap: var(--sp-3); }

/* ---------- S2 Dashboard ---------- */

.dash-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: start;
}

/* De boekjaar-selector staat naast de titel en is zo smal als haar inhoud. */
.dash-year { width: auto; height: 32px; padding: 0 var(--sp-2); font-weight: 500; }

/* Kop-cijferstrip: drie kaarten aaneengesloten met 1 px scheiding (STIJLGIDS §2.11). */
.dash-head .card-strip {
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, auto);
  min-width: 620px;
}

/* Twee kolommen: potten links, nog-te-doen en inkomsten rechts (mockup 1440). */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.dash-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* Een kaart die haar eigen padding aan de rijen overlaat (nog-te-doen). */
.card--flush { padding: 0; overflow: hidden; }

/* ---------- budgetpot in de lijst ---------- */

.pot { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-soft); }
.pot:first-child { padding-top: 0; }
.pot:last-of-type { border-bottom: 0; }

.pot__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.pot__name { font-size: var(--fs-md); font-weight: 500; }

.pot__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 120px;
  font-variant-numeric: tabular-nums;
}

.pot__cell--strong { font-weight: 600; }

.pot .pot-bar { margin-bottom: var(--sp-2); }

/* Regel 3 van de mobiele potkaart; op desktop staan die cijfers al in de kop. */
.pot__summary { display: none; }

.num-warn { color: var(--warn); }
.num-strong { color: var(--ink); }

/* ---------- inkomsten per klant ---------- */

.income {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
}

.income__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.income__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.income__bar > span { display: block; height: 100%; background: var(--olive); }

/* ---------- grafieken (inline SVG, geen bibliotheek) ---------- */

.chart { width: 100%; height: 150px; margin-top: var(--sp-3); overflow: visible; }

.chart__bar { fill: var(--accent); }
.chart__bar--soft { fill: var(--accent-tint); }
.chart__area { fill: var(--pos-tint); }
.chart__crest { stroke: var(--pos); stroke-width: 2; }

.chart__average {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* De maandlabels staan als HTML onder de tekening, één kolom per staaf. */
.chart__axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: center;
}

/* ---------- S14 eenmalig wachtwoord ---------- */

/* Het enige moment waarop een wachtwoord leesbaar op het scherm staat (spec 02 S14). Bewust in de
   waarschuwingskleur en bewust in de weg: wie het wegklikt zonder het door te geven, moet opnieuw
   resetten. */
.secret {
  border-color: var(--warn);
  background: var(--warn-tint);
}

.secret .hint,
.secret .card__title { color: var(--warn-on); }

.secret__value {
  margin-top: var(--sp-4);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--warn-on);

  /* Eén klik selecteert het hele wachtwoord: het wordt overgetypt of geplakt, nooit half. */
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---------- 1024–1279: alles onder elkaar (STIJLGIDS §1.6) ---------- */

@media (max-width: 1279px) {
  .dash-head { grid-template-columns: 1fr; }
  .dash-head .card-strip { min-width: 0; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .dash-head .card-strip { grid-auto-flow: row; }

  /* De potkaart van de mobiele mockup: naam + resterend, dan de balk (8 px, §2.7), dan
     "besteed X van Y". De kolommen Toegekend en Besteed passen hier niet naast elkaar en
     herhalen wat de derde regel al zegt. */
  .pot__head {
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: baseline;
    margin-bottom: var(--sp-2);
  }

  .pot__name { flex: 1 1 auto; min-width: 0; }

  /* De vlag-pil is te lang om naast naam en resterend te staan; ze zakt naar een eigen regel,
     want de waarschuwing mag niet enkel in de kleur van het restbedrag zitten (STIJLGIDS §3). */
  .pot__head .flag { order: 10; flex-basis: 100%; }
  .pot__cell--wide { display: none; }

  .pot__cell--strong {
    flex: 0 0 auto;
    min-width: 0;
    font-size: var(--fs-md);
  }

  .pot__cell--strong .label { display: none; }

  .pot .pot-bar { margin-bottom: var(--sp-2); }

  .pot__summary {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ink-3);
  }

  /* De toelichting onder de balk herhaalt op deze breedte alleen maar de derde regel. */
  .pot .hint { display: none; }

  /* Naam plus toelichting plus bedrag naast elkaar knijpt alle drie tot een kolom van tien tekens;
     het bedrag zakt naar zijn eigen regel. */
  .dash-pair .card > .row { flex-wrap: wrap; row-gap: var(--sp-2); }
  .dash-pair .card > .row > div { flex: 1 1 100%; }
  .dash-pair .card > .row > .spacer { display: none; }
  .dash-pair .card > .row > .figure { margin-left: auto; }
}


/* Twee kolommen op S9: links wat klaar ligt, rechts de dossiers (spec 02 S9).
   Onder 1440 px onder elkaar, en niet lager: de krapste band is 1280-1439 px, waar
   de zijnavigatie er weer bij komt en er van het venster ~1.000 px overblijft
   (spec 00 §5i punt 10). Twee tabellen in de helft daarvan zijn twee tabellen die
   geen van beide leesbaar zijn — één brede lijst boven de dossiers wel. */
.claims {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

@media (max-width: 1439px) {
  .claims { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Afdrukken (S10). Eén pagina die op tafel kan liggen bij het gesprek met de
   boekhouding: geen navigatie, geen knoppen, geen kleurvlakken die een
   inktcartridge opeten, en groepen die niet halverwege een pagina breken.

   Op scherm is de kop van het afdrukblad verborgen en de "print-only"-tekst
   ook; op papier verdwijnt alles wat je niet kunt indrukken. Wat blijft is de
   tabel, want dat is waar het gesprek over gaat.
   ========================================================================== */

.print-head { display: none; }
.print-only { display: none; }
.print-only-inline { display: none; }

@media print {
  /* A4 staand met de marges die een tabel van zes kolommen nog laten passen. */
  @page { size: A4 portrait; margin: 14mm 12mm; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  /* De schil valt weg: zijnavigatie, tabbalk, foutbanner. */
  .nav,
  .tabbar,
  #blazor-error-ui,
  .skip-link,
  .no-print,
  .page-header .actions,
  .btn {
    display: none !important;
  }

  .app { display: block; }
  .page { padding: 0; max-width: none; }

  .print-head { display: block; }
  .print-only { display: inline; }
  .print-only-inline { display: inline-flex; }

  /* Een link in de tabel is op papier gewoon tekst; onderstreept blauw suggereert
     iets wat je op een blad niet kunt doen. */
  .no-print-link { color: inherit; text-decoration: none; }

  .section { margin-top: 10mm; }
  .section:first-of-type { margin-top: 0; }

  /* Een groep hoort in haar geheel op één blad, of anders netjes te breken met
     haar kop erboven — een totaal zonder zijn lijnen zegt niets. */
  .recovery-group { break-inside: avoid; page-break-inside: avoid; }
  .recovery-group h2 { break-after: avoid; page-break-after: avoid; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }

  .card,
  .table,
  .card-strip {
    border: none;
    box-shadow: none;
    background: transparent;
  }

  /* De schuifbalk van een tabel bestaat op papier niet; alles moet zichtbaar zijn. */
  .table__scroll { overflow: visible !important; }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: 3pt 4pt; }
  th { border-bottom: 0.5pt solid #000; text-align: left; }
  tr.total td { border-top: 0.5pt solid #000; font-weight: 600; }

  .cell--clip { max-width: none !important; overflow: visible; white-space: normal; }

  .pill {
    border: 0.5pt solid #000;
    background: transparent !important;
    color: #000 !important;
  }
  .pill::before { display: none; }

  .alert {
    border: 0.5pt solid #000;
    background: transparent;
    color: #000;
  }
}

/* Verkoop (S17): de drie downloadknoppen naast elkaar. Ze mogen niet afbreken —
   op 1440 px moet de kolom Documenten volledig zichtbaar zijn zonder horizontaal
   te scrollen (spec 00 §5r). */
/* Verkoop (S17): één maand is twee tabelrijen. De bedragen waar het om gaat staan boven, de
   context eronder in kleiner grijs — acht kolommen op één regel vroegen 1.363 px terwijl er op
   1440 maar 1.115 zijn (gemeten, spec 00 §5r).

   De selectors dragen `.table tbody` mee omdat `.table tbody td` anders wint: die zet de
   celhoogte, de padding én de onderlijn, en zonder die specificiteit bleef er een streep tussen
   de twee rijen staan — precies wat ze weer uit elkaar trekt. */
.sales__docs { white-space: nowrap; }
.sales__docs .btn { padding-inline: 10px; }
.sales__docs .btn + .btn { margin-left: 6px; }

.table tbody tr.sales__main > td {
  border-bottom: 0;
  height: auto;
  padding-top: var(--sp-3);
  padding-bottom: 2px;
}

.table tbody tr.sales__sub > td {
  height: auto;
  padding-top: 0;
  padding-bottom: var(--sp-3);
  padding-left: calc(var(--sp-4) + var(--sp-4));
  font-size: 12px;
  color: var(--ink-3);
  white-space: normal;
}

/* Interpunctie in CSS en niet in de markup: zo staat er nooit een losse punt achter het laatste
   item als een van de blokjes wegvalt. */
.sales__sub span + span::before { content: " · "; }

/* De twee rijen zijn één maand, dus ze lichten samen op. Alleen de bovenste laten oplichten
   maakt van één blok weer twee. */
.table tbody tr.sales__main:hover,
.table tbody tr.sales__main:hover + tr.sales__sub { background: var(--surface-hover); }