/* Tokens: zie DESIGN.md. Licht is de basis, donker volgt het systeem. */
:root {
  --vlak: oklch(1 0 0);
  --paneel: oklch(0.975 0.004 245);
  --paneel-hover: oklch(0.948 0.006 245);
  --lijn: oklch(0.915 0.006 245);
  --lijn-sterk: oklch(0.85 0.008 245);
  --inkt: oklch(0.22 0.015 250);
  --inkt-zacht: oklch(0.47 0.015 250);
  --accent: oklch(0.52 0.13 240);
  --accent-hover: oklch(0.46 0.13 240);
  --accent-zacht: oklch(0.95 0.025 240);
  --op-accent: oklch(1 0 0);
  --binnen: oklch(0.50 0.12 155);
  --eruit: oklch(0.53 0.17 25);
  --let-op: oklch(0.62 0.13 75);
  --let-op-zacht: oklch(0.96 0.03 80);
  --focus: oklch(0.60 0.14 240);
  /* Grafiekreeksen: blauw/oranje i.p.v. groen/rood, want dat paar valt weg
     bij kleurenblindheid (validate_palette: deutan ΔE 6,1 licht, 2,5 donker;
     blauw/oranje 22,5 en 21,0). Gemeten 11 okt 2026. */
  --reeks: oklch(0.52 0.13 240);
  --reeks-binnen: oklch(0.52 0.13 240);
  --reeks-eruit: oklch(0.66 0.16 55);

  --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-16: 1rem; --t-20: 1.25rem; --t-28: 1.75rem;
  --r: 8px;
  --snel: 160ms cubic-bezier(0.25, 1, 0.5, 1);
  --z-balk: 10;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vlak: oklch(0.165 0.008 250);
    --paneel: oklch(0.195 0.009 250);
    --paneel-hover: oklch(0.235 0.01 250);
    --lijn: oklch(0.285 0.01 250);
    --lijn-sterk: oklch(0.36 0.012 250);
    --inkt: oklch(0.94 0.006 245);
    --inkt-zacht: oklch(0.72 0.01 245);
    --accent: oklch(0.72 0.11 235);
    --accent-hover: oklch(0.78 0.10 235);
    --accent-zacht: oklch(0.27 0.04 240);
    --op-accent: oklch(0.17 0.02 250);
    --binnen: oklch(0.74 0.13 155);
    --eruit: oklch(0.72 0.14 25);
    --let-op: oklch(0.80 0.12 80);
    --let-op-zacht: oklch(0.27 0.04 80);
    --focus: oklch(0.75 0.11 235);
    --reeks: oklch(0.62 0.12 240);
    --reeks-binnen: oklch(0.62 0.12 240);
    --reeks-eruit: oklch(0.67 0.14 58);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--t-14)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--inkt);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--t-20); }
h2 { font-size: var(--t-16); }
h3 { font-size: var(--t-14); }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.zacht { color: var(--inkt-zacht); }
.bedrag { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Knoppen en velden */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  font: 500 var(--t-14)/1 inherit; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r);
  cursor: pointer; transition: background var(--snel), border-color var(--snel);
}
.knop:hover { background: var(--paneel); }
.knop:active { background: var(--paneel-hover); }
.knop:disabled { opacity: 0.55; cursor: progress; }
.knop-hoofd { color: var(--op-accent); background: var(--accent); border-color: transparent; }
.knop-hoofd:hover { background: var(--accent-hover); }
.knop-hoofd:active { background: var(--accent-hover); }
.breed { width: 100%; min-height: 44px; }
.knop-link {
  padding: 4px 0; font: 500 var(--t-13)/1.4 inherit; color: var(--accent);
  background: none; border: 0; cursor: pointer;
}
.knop-link:hover { text-decoration: underline; text-underline-offset: 3px; }
label { display: block; font-size: var(--t-13); font-weight: 500; margin: 0 0 4px; }
input {
  width: 100%; min-height: 40px; padding: 0 12px;
  font: 400 var(--t-16)/1.2 inherit; color: var(--inkt);
  background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r);
  transition: border-color var(--snel), box-shadow var(--snel);
}
input::placeholder { color: var(--inkt-zacht); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); }
.fout { color: var(--eruit); font-size: var(--t-13); }

.merk { width: 40px; height: 40px; }
.merk rect { fill: var(--accent); }
.merk path { stroke: var(--op-accent); stroke-width: 3; stroke-linecap: round; fill: none; }
.merk.klein { width: 22px; height: 22px; }

/* Laden: alleen een dunne balk bovenaan, geen draaiend wiel midden in beeld. */
.laden { position: fixed; inset: 0 0 auto; height: 2px; background: transparent; z-index: var(--z-balk); }
.laden.bezig { background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: laden 1.1s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
@keyframes laden { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Inloggen */
.inloggen { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.inloggen-blok { width: min(340px, 100%); display: grid; gap: 14px; justify-items: start; }
.inloggen-blok h1 { font-size: var(--t-28); margin-top: 6px; }
.inloggen-blok .knop-hoofd { margin-top: 10px; }
.koppel-form { width: 100%; display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.koppel-form label { margin: 0; }
#koppelcode { font-family: ui-monospace, "SF Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }

/* Schil */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100dvh; }
.zijbalk {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px; background: var(--paneel); border-right: 1px solid var(--lijn);
}
.zijbalk-kop { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 600; font-size: var(--t-16); }
.navigatie { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navigatie a {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  color: var(--inkt-zacht); text-decoration: none; font-weight: 500; border-radius: 6px;
  transition: background var(--snel), color var(--snel);
}
.navigatie a:hover { background: var(--paneel-hover); color: var(--inkt); }
.navigatie a[aria-current="page"] { background: var(--accent-zacht); color: var(--accent); }
.navigatie svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.navigatie .tel { margin-left: auto; font-size: var(--t-12); color: var(--inkt-zacht); }
.uitloggen { margin-top: auto; align-self: start; padding-left: 10px; }

.inhoud { padding: 28px 32px 48px; max-width: 1200px; width: 100%; outline: none; }
.paginakop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.paginakop h1 { font-size: var(--t-20); }

/* Stand van zaken: één vlak met scheidslijnen, geen losse kaartjes. */
.stand {
  /* Scheidslijnen via de 1px-tussenruimte: klopt ook als de tegels afbreken. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden;
}
.stand > div { padding: 16px 18px; min-width: 0; background: var(--vlak); }
.stand dt { font-size: var(--t-13); color: var(--inkt-zacht); font-weight: 500; }
.stand dd { margin: 6px 0 0; font-size: var(--t-20); font-weight: 600; }
.stand .bron { margin-top: 4px; font-size: var(--t-12); color: var(--inkt-zacht); }
.stand dd.leeg, .stand .hoofd dd.leeg { color: var(--inkt-zacht); font-weight: 400; font-size: var(--t-14); letter-spacing: 0; }
.stand .hoofd dd { font-size: var(--t-28); letter-spacing: -0.01em; }

.vak { margin-top: 28px; }
.vak > h2 { margin-bottom: 10px; }
.lege-uitleg {
  display: grid; gap: 6px; justify-items: start;
  padding: 20px; border: 1px dashed var(--lijn-sterk); border-radius: var(--r); color: var(--inkt-zacht);
}
.lege-uitleg strong { color: var(--inkt); font-weight: 600; }

/* Koppelingen */
.koppelingen { display: grid; border: 1px solid var(--lijn); border-radius: var(--r); }
.koppeling { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 32px; }
.koppeling + .koppeling { border-top: 1px solid var(--lijn); }
.koppeling-kop { display: flex; align-items: center; gap: 8px; }
.koppeling p { margin-top: 6px; color: var(--inkt-zacht); font-size: var(--t-13); max-width: 60ch; }
.koppeling form { display: grid; gap: 10px; align-content: start; }
.koppeling .acties { display: flex; gap: 10px; align-items: center; }
.koppeling .melding { font-size: var(--t-13); }
.bestand-knop { justify-self: start; margin: 0; font-weight: 500; }
.koppeling .oauth { margin-top: 12px; display: grid; gap: 8px; justify-items: start; }
.koppeling .oauth p { margin: 0; color: var(--inkt); }
.label {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-size: var(--t-12); font-weight: 500; border-radius: 999px;
  color: var(--inkt-zacht); background: var(--paneel);
}
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lijn-sterk); }
.label.aan { color: var(--binnen); }
.label.aan::before { background: var(--binnen); }

/* iPhone: zijbalk wordt een balk onderaan. */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .zijbalk {
    position: fixed; inset: auto 0 0; top: auto; height: auto; z-index: var(--z-balk);
    flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--lijn);
  }
  .zijbalk-kop, .uitloggen { display: none; }
  .navigatie { grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); width: 100%; overflow-x: auto; scrollbar-width: none; }
  .navigatie a { flex-direction: column; gap: 2px; min-height: 48px; padding: 6px 2px; font-size: 10.5px; justify-content: center; }
  .navigatie .tel { display: none; }
  .inhoud { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .stand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stand > div:first-child { grid-column: 1 / -1; }
  .stand .hoofd dd { font-size: var(--t-20); }
  .koppeling { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Fase 1-2: cijfers, tabellen, grafieken ---------- */
.klein { font-size: var(--t-12); }
.knop.klein { min-height: 30px; padding: 0 10px; font-size: var(--t-13); }
.kop-rechts { display: flex; align-items: center; gap: 12px; }
.kop-rechts .bron { margin: 0; font-size: var(--t-13); color: var(--inkt-zacht); }

/* Grote bedragen proportioneel, kolommen tabelcijfers (dataviz-skill). */
.stand dd { font-variant-numeric: normal; }
.stand dd.groot { font-size: var(--t-28); letter-spacing: -0.01em; }
.stand dd a { color: var(--accent); font-weight: 500; }
.bron.fout { color: var(--eruit); }
.verschil { margin-top: 4px; font-size: var(--t-12); font-weight: 600; }
.verschil.binnen { color: var(--binnen); }
.verschil.eruit { color: var(--eruit); }
.verschil .zacht { font-weight: 400; }
.stand.rekeningen { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.vak-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vak-kop h2 { margin: 0; }
.vak > h2 { margin-bottom: 10px; }
.vak-uitleg { margin: -6px 0 8px; }
.tussen { margin-top: 24px; }
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }

.legenda { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; font-size: var(--t-13); color: var(--inkt-zacht); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.sleutel { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--reeks); flex: none; }
.sleutel.binnen { background: var(--reeks-binnen); }
.sleutel.eruit { background: var(--reeks-eruit); }

.tabel { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.tabel th { text-align: left; font-size: var(--t-12); font-weight: 500; color: var(--inkt-zacht); padding: 0 8px 6px; border-bottom: 1px solid var(--lijn); }
.tabel td { padding: 9px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel th:first-child, .tabel td:first-child { padding-left: 0; }
.tabel th:last-child, .tabel td:last-child { padding-right: 0; }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .datum { width: 1%; white-space: nowrap; color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.tabel .getal.binnen { color: var(--binnen); }
.bewegingen .wie { display: grid; gap: 1px; }
.bewegingen .naam { overflow-wrap: anywhere; }
.bewegingen .wie .klein { overflow-wrap: anywhere; }

.zoek { width: min(320px, 100%); min-height: 34px; font-size: var(--t-14); }

.grafiek { position: relative; width: 100%; }
.grafiek svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafiek .raster { stroke: var(--lijn); stroke-width: 1; }
.grafiek .nullijn { stroke: var(--lijn-sterk); stroke-width: 1; }
.grafiek .as { fill: var(--inkt-zacht); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafiek .kolom { fill: var(--reeks); transition: opacity var(--snel); }
.grafiek .kolom.binnen { fill: var(--reeks-binnen); }
.grafiek .kolom.eruit { fill: var(--reeks-eruit); }
.grafiek .raakvlak { fill: transparent; cursor: default; }
.grafiek .kolomgroep:focus { outline: none; }
.grafiek .kolomgroep:focus-visible .raakvlak { stroke: var(--focus); stroke-width: 2; }
.grafiek:has(.kolomgroep.actief) .kolomgroep:not(.actief) .kolom { opacity: 0.45; }
.grafiek .tip {
  position: absolute; top: 4px; z-index: var(--z-balk);
  display: grid; gap: 2px; min-width: 150px; padding: 8px 10px;
  font-size: var(--t-13); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r);
  box-shadow: 0 6px 20px oklch(0 0 0 / 0.12); pointer-events: none; white-space: nowrap;
}
.grafiek .tip span { display: flex; align-items: center; gap: 6px; }
.grafiek .tip b { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { padding: 6px 10px; border-radius: 6px; color: var(--inkt-zacht); text-decoration: none; font-weight: 500; font-size: var(--t-13); }
.tab:hover { background: var(--paneel); color: var(--inkt); }
.tab[aria-current="page"] { background: var(--accent-zacht); color: var(--accent); }
.tabs .zoek { margin-left: auto; }
.facturen .acties-cel { white-space: nowrap; text-align: right; width: 1%; }
.facturen .acties-cel > div { display: flex; gap: 12px; justify-content: flex-end; align-items: baseline; }
.facturen .wie .naam, .facturen .wie .klein { display: block; }
.facturen td.klein { min-width: 9em; }
.zacht-link { color: var(--inkt-zacht); }
/* Popover-menu (native popover-API: ontsnapt aan overflow en z-index). */
.menu[popover] {
  margin: 0; inset: auto; position: fixed; padding: 4px; min-width: 240px;
  background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn-sterk); border-radius: var(--r);
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.16);
}
.menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px;
  font: 400 var(--t-14)/1.3 inherit; color: var(--inkt); background: none; cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--paneel); outline: none; }

@media (max-width: 760px) {
  .tabs .zoek { margin-left: 0; width: 100%; }
  .facturen th:nth-child(4), .facturen td:nth-child(4), .facturen th:nth-child(5), .facturen td:nth-child(5) { display: none; }
  .twee { grid-template-columns: minmax(0, 1fr); }
  .stand dd.groot { font-size: var(--t-20); }
  .paginakop { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.los-blad { max-width: 68ch; margin: 0 auto; padding: 48px 20px 64px; display: grid; gap: 14px; }
.los-blad h1 { font-size: var(--t-28); }
.los-blad h2 { margin-top: 10px; }
.los-blad a { color: var(--accent); }
.inleiding { margin-bottom: 16px; max-width: 65ch; }