/* ============================================================
   QEET SHELL — de gedeelde schil. Basis + componenten.
   Laadt NA tokens.css en gebruikt uitsluitend var(--...).
   Staat er een rauwe hex in dit bestand, dan is dat een fout.

   Dit is de "gedeelde schil" uit SITE-CONVENTIES paragraaf F.
   Nieuwe pagina's dupliceren nooit meer hun eigen CSS-blok.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: var(--tekst-base);
  line-height: var(--regel-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }

a { color: var(--status-info); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink-1); }

:where(a, button, input, select, summary):focus-visible {
  outline: none;
  box-shadow: var(--focusring);
  border-radius: var(--rond-sm);
}

/* --- Pagina-omhulsel ---------------------------------------- */
.q-pagina { max-width: 1280px; margin: 0 auto; padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-7); }
@media (max-width: 640px) { .q-pagina { padding: var(--ruimte-4) var(--ruimte-3) var(--ruimte-6); } }

/* --- Kop van een pagina -------------------------------------
   EEN terugpad, niet twee. In de oude pagina's stond boven elke
   geneste pagina eerst een tekstlink en daaronder nog eens
   dezelfde link als pil. Hier is het er een.                    */
.q-kruimel { display: flex; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
.q-kruimel a {
  display: inline-flex; align-items: center; gap: var(--ruimte-1);
  font-size: var(--tekst-sm); color: var(--ink-3); text-decoration: none;
}
.q-kruimel a:hover { color: var(--ink-1); text-decoration: underline; }

.q-titel { font-family: var(--font-kop); font-size: var(--tekst-lg); font-weight: var(--gewicht-vet); line-height: var(--regel-strak); }
.q-subtitel { font-size: var(--tekst-sm); color: var(--ink-2); margin-top: var(--ruimte-1); }

/* Het kleine kapitaal-label boven een blok. Dit stond overal op
   een grijs dat WCAG niet haalde; nu op --ink-3 (5.85:1).       */
.q-label {
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Kaart --------------------------------------------------- */
.q-kaart {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--rond-lg);
  padding: var(--ruimte-4);
  box-shadow: var(--diepte-1);
}
.q-kaart + .q-kaart { margin-top: var(--ruimte-4); }
.q-kaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-3); margin-bottom: var(--ruimte-3); }
.q-kaart__titel { font-size: var(--tekst-md); font-weight: var(--gewicht-vet); }

.q-raster { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- KPI-tegel ----------------------------------------------
   Een vaste minimumhoogte, zodat dezelfde tegel op een pagina
   zonder begroting geen half leeg vlak wordt.                   */
.q-kpi {
  background: var(--surface-brand);
  color: var(--ink-op-brand);
  border-radius: var(--rond-lg);
  padding: var(--ruimte-4);
  min-height: 108px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.q-kpi .q-label { color: var(--ink-op-brand-2); }
.q-kpi__waarde {
  font-family: var(--font-cijfers);
  font-size: var(--tekst-xl);
  font-weight: var(--gewicht-vet);
  line-height: var(--regel-strak);
  margin-top: var(--ruimte-2);
}
.q-kpi__bij { font-size: var(--tekst-sm); color: var(--ink-op-brand-2); }
.q-kpi--licht { background: var(--surface-card); color: var(--ink-1); border: 1px solid var(--border); }
.q-kpi--licht .q-label, .q-kpi--licht .q-kpi__bij { color: var(--ink-3); }

/* Het ene grote getal per pagina. Maximaal een per scherm. */
.q-held { font-family: var(--font-kop); font-size: var(--tekst-2xl); font-weight: var(--gewicht-vet); line-height: 1.1; }

/* --- Tabel ---------------------------------------------------
   De brede tabel gaat in een eigen scroller. Alleen de tabel
   schuift, nooit de pagina. Rechts staat een verloop zodat je
   ZIET dat er meer kolommen zijn: op de cashflow-pagina viel het
   bedrag op mobiel buiten beeld zonder enige aanwijzing.         */
.q-tabelwrap { position: relative; }
.q-tabelwrap__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.q-tabelwrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface-card));
}
@media (min-width: 900px) { .q-tabelwrap::after { display: none; } }

.q-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-sm); }
.q-tabel th {
  text-align: left;
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.q-tabel td {
  padding: var(--ruimte-2) var(--ruimte-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-1);
}
.q-tabel tbody tr:hover td { background: var(--surface-sunken); }
.q-tabel .num { text-align: right; font-variant-numeric: tabular-nums; }
.q-tabel__leeg { padding: var(--ruimte-5); text-align: center; color: var(--ink-3); }

/* Eerste kolom vastzetten bij horizontaal schuiven, zodat je
   altijd weet bij welke relatie een bedrag hoort. */
.q-tabel--vast td:first-child, .q-tabel--vast th:first-child {
  position: sticky; left: 0; background: var(--surface-card);
}

/* --- Knop ---------------------------------------------------- */
.q-knop {
  display: inline-flex; align-items: center; gap: var(--ruimte-2);
  font: inherit; font-weight: var(--gewicht-medium);
  padding: var(--ruimte-2) var(--ruimte-4);
  border-radius: var(--rond-md);
  border: 1px solid transparent;
  background: var(--knop-bg);
  color: var(--knop-ink);
  cursor: pointer;
  transition: background var(--duur-snel), color var(--duur-snel);
}
.q-knop:hover { background: var(--knop-bg-hover); }
.q-knop--zacht { background: var(--surface-card); color: var(--ink-1); border-color: var(--border-strong); }
.q-knop--zacht:hover { background: var(--surface-sunken); }
.q-knop--accent { background: var(--accent); color: var(--qeet-groen); }
.q-knop[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Badge / statuspil ---------------------------------------
   Kleur draagt hier NOOIT alleen de betekenis: er staat altijd
   een woord in. In de oude dashboards betekende dezelfde blauwe
   pil op de ene plek "urgentie" en op de andere "profiel Streng".
   Gebruik --tijd-* voor urgentie en --tag voor een kenmerk, en
   meng ze niet in dezelfde kolom.                               */
.q-badge {
  display: inline-flex; align-items: center; gap: var(--ruimte-1);
  font-size: var(--tekst-xs); font-weight: var(--gewicht-vet);
  padding: 2px var(--ruimte-2);
  border-radius: var(--rond-pil);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.q-badge--goed    { color: var(--status-good); }
.q-badge--let-op  { color: var(--status-warn); }
.q-badge--fout    { color: var(--status-danger); }
.q-badge--info    { color: var(--status-info); }
.q-badge--tag     { color: var(--ink-3); }

/* --- Meldingen (een stijl, niet drie) -------------------------
   Er stonden drie verschillende "data kon niet laden"-stijlen op
   de site, waarvan een een rauwe JavaScript-fout toonde. Dit is
   de enige.                                                     */
.q-melding {
  display: flex; gap: var(--ruimte-3);
  padding: var(--ruimte-4);
  border-radius: var(--rond-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font-size: var(--tekst-sm);
}
.q-melding__titel { font-weight: var(--gewicht-vet); color: var(--ink-1); margin-bottom: var(--ruimte-1); }
.q-melding__tekst { color: var(--ink-2); }
.q-melding--fout   { border-color: var(--status-danger-mark); }
.q-melding--fout .q-melding__titel { color: var(--status-danger); }
.q-melding--let-op { border-color: var(--status-warn-mark); }
.q-melding--let-op .q-melding__titel { color: var(--status-warn); }

/* --- Navigatie ------------------------------------------------
   Op mobiel schoof je eerst door vier rijen pillen voor je iets
   van de inhoud zag. Hier schuift de rij horizontaal in plaats
   van door te breken.                                           */
.q-nav { display: flex; gap: var(--ruimte-2); overflow-x: auto; padding-bottom: var(--ruimte-1); margin-bottom: var(--ruimte-4); scrollbar-width: none; }
.q-nav::-webkit-scrollbar { display: none; }
.q-nav a {
  flex: 0 0 auto;
  font-size: var(--tekst-sm); font-weight: var(--gewicht-medium);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--rond-pil);
  border: 1px solid var(--border);
  color: var(--ink-2); text-decoration: none;
  background: var(--surface-card);
}
.q-nav a:hover { border-color: var(--border-strong); color: var(--ink-1); }
/* Een actief-stijl voor de hele site. Niet zwart hier en paars daar. */
.q-nav a[aria-current] { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--ink-op-brand); }

/* --- Grafiek --------------------------------------------------
   De serie-kleuren komen uit tokens.css en staan in vaste
   volgorde. Nooit doorrollen bij meer dan 8 series, en bij
   scatter/bubble/small-multiples niet verder dan serie 3.
   Tekst in een grafiek draagt inkt-tokens, nooit de seriekleur. */
.q-grafiek { background: var(--surface-card); border-radius: var(--rond-md); }
.q-grafiek text { fill: var(--chart-label); font-size: var(--tekst-xs); }
.q-grafiek .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.q-grafiek .as line, .q-grafiek .as path { stroke: var(--chart-axis); stroke-width: 1; }

.q-legenda { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); font-size: var(--tekst-xs); color: var(--ink-2); margin-top: var(--ruimte-3); }
.q-legenda span { display: inline-flex; align-items: center; gap: var(--ruimte-1); }
.q-legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* --- Kleine hulpjes ------------------------------------------- */
.q-stil { color: var(--ink-3); }
.q-cijfer { font-variant-numeric: tabular-nums; }
.q-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}