/* =========================================================================
   Revotio Finance — Ondernemers-cockpit design tokens & componenten.
   Gedeeld door /finance/ en herbruikbaar door liquiditeit/portfolio/administratie.
   Hi-fi tokens uit de design-handoff (2026-06). Licht = standaard, donker = optioneel.
   ========================================================================= */
:root{
  /* canvas & vlakken */
  --c-canvas:#f3f5f8; --c-card:#ffffff; --c-card2:#f7f9fb;
  --c-line:#e6eaf0; --c-line2:#eef1f5; --c-line3:#f1f3f7;
  /* inkt */
  --c-ink:#17202e; --c-muted:#5c6776; --c-muted2:#8a94a3; --c-hint:#a4adba;
  /* accent / actie (brand oranje) */
  --c-acc:#ea5a1e; --c-acc-hover:#c9430f; --c-acc-soft:#fdeee7;
  /* geld / positief (teal) */
  --c-teal:#0e8a93; --c-teal-soft:#eef6f7; --c-teal-soft2:#e2f1f2;
  /* geboekt / goed */
  --c-good:#1a7f37; --c-good-soft:#e7f4ec;
  /* let op / reserveren (amber) */
  --c-amber:#b47400; --c-amber-soft:#fdf3e0;
  /* risico / rood */
  --c-red:#cf222e; --c-red-soft:#fdeceb;
  /* data-viz extra */
  --c-blue:#2f6fed; --c-purple:#7a5cc0; --c-cost:#e7c9b6;
  /* radii, schaduw, spacing */
  --r-card:16px; --r-card-lg:18px; --r-ctrl:10px; --r-pill:999px;
  --sh-card:0 8px 28px rgba(23,32,46,.06);
  --sh-modal:0 30px 70px rgba(0,0,0,.35);
  --sh-cta:0 6px 16px rgba(234,90,30,.22);
  --font-num:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --c-canvas:#0e1116; --c-card:#171b22; --c-card2:#1b212b;
  --c-line:#2a313c; --c-line2:#232a34; --c-line3:#1e242d;
  --c-ink:#e6edf3; --c-muted:#9aa5b4; --c-muted2:#7d8896; --c-hint:#6e7781;
  --c-acc:#f0703a; --c-acc-hover:#ff8a5c; --c-acc-soft:#3a231a;
  --c-teal:#39c5cf; --c-teal-soft:#132a2c; --c-teal-soft2:#163336;
  --c-good:#3fb950; --c-good-soft:#132a1b;
  --c-amber:#d29922; --c-amber-soft:#332813;
  --c-red:#f85149; --c-red-soft:#3a1a1a;
  --c-blue:#4f9cff; --c-purple:#a78bda; --c-cost:#8a6f5c;
  --sh-card:0 8px 28px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-canvas:#0e1116; --c-card:#171b22; --c-card2:#1b212b;
    --c-line:#2a313c; --c-line2:#232a34; --c-line3:#1e242d;
    --c-ink:#e6edf3; --c-muted:#9aa5b4; --c-muted2:#7d8896; --c-hint:#6e7781;
    --c-acc:#f0703a; --c-acc-hover:#ff8a5c; --c-acc-soft:#3a231a;
    --c-teal:#39c5cf; --c-teal-soft:#132a2c; --c-teal-soft2:#163336;
    --c-good:#3fb950; --c-good-soft:#132a1b;
    --c-amber:#d29922; --c-amber-soft:#332813;
    --c-red:#f85149; --c-red-soft:#3a1a1a;
    --c-blue:#4f9cff; --c-purple:#a78bda; --c-cost:#8a6f5c;
    --sh-card:0 8px 28px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.pos{color:var(--c-good)} .neg{color:var(--c-red)} .teal{color:var(--c-teal)}

/* ---- kaarten ---- */
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);padding:18px}
.card.lg{border-radius:var(--r-card-lg)}
.card-h{font-weight:600;font-size:14px;margin:0 0 14px}
.card-sub{font-size:12.5px;color:var(--c-muted)}

/* ---- KPI ---- */
.kpi{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);padding:16px 17px;position:relative;overflow:hidden}
.kpi .lab{font-size:11.5px;color:var(--c-muted2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.kpi .val{font-family:var(--font-num);font-size:27px;font-weight:600;margin-top:7px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--c-muted2);margin-top:5px}
.kpi .strip{position:absolute;inset:0 0 auto auto;width:4px;height:100%}
.kpi .strip.red{background:var(--c-red)} .kpi .strip.amber{background:var(--c-amber)}
.kpi .strip.teal{background:var(--c-teal)} .kpi .strip.good{background:var(--c-good)}

/* ---- knoppen ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 15px;border-radius:var(--r-ctrl);
  border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.btn:hover{border-color:var(--c-acc);color:var(--c-acc)}
.btn.acc{background:var(--c-acc);border-color:var(--c-acc);color:#fff;box-shadow:var(--sh-cta)}
.btn.acc:hover{background:var(--c-acc-hover);border-color:var(--c-acc-hover);color:#fff}
.btn.good{background:var(--c-good);border-color:var(--c-good);color:#fff}
.btn.good:hover{filter:brightness(1.05);color:#fff}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}

/* ---- pills / badges / chips ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--c-line3);color:var(--c-muted);line-height:1.5}
.pill.acc{background:var(--c-acc);color:#fff}
.pill.red{background:var(--c-red-soft);color:var(--c-red)}
.pill.amber{background:var(--c-amber-soft);color:var(--c-amber)}
.pill.good{background:var(--c-good-soft);color:var(--c-good)}
.pill.teal{background:var(--c-teal-soft2);color:var(--c-teal)}
.pill.blue{background:color-mix(in srgb,var(--c-blue) 15%,transparent);color:var(--c-blue)}

/* ---- inputs ---- */
.in{padding:8px 11px;border:1px solid var(--c-line);border-radius:9px;background:var(--c-card);color:var(--c-ink);font:inherit;font-size:13.5px}
.in:focus{outline:none;border-color:var(--c-acc)}
label.fl{display:block;font-size:10px;color:var(--c-hint);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}

/* ---- progress bar ---- */
.pbar{height:8px;border-radius:var(--r-pill);background:var(--c-line3);overflow:hidden}
.pbar > i{display:block;height:100%;border-radius:var(--r-pill)}

/* ---- lijst-rij met dot + chevron ---- */
.arow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--c-line2);cursor:pointer;text-decoration:none;color:inherit}
.arow:last-child{border-bottom:0}
.arow .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.arow .body{flex:1;min-width:0}
.arow .t{font-weight:600;font-size:13.5px;line-height:1.3}
.arow .s{font-size:12px;color:var(--c-muted2);margin-top:2px}
.arow .chev{color:var(--c-hint);font-size:16px}

.muted{color:var(--c-muted2);font-size:12px}
.callout{border-radius:12px;padding:13px 15px;font-size:12.5px;line-height:1.55}
.callout.teal{background:var(--c-teal-soft);color:var(--c-teal);border:1px solid var(--c-teal-soft2)}
.callout.amber{background:var(--c-amber-soft);color:var(--c-amber)}
.callout.red{background:var(--c-red-soft);color:var(--c-red)}