/* EBP – huisstijl voor alle schermen (opname, rekenen, beheer, facturatie, rapport).
   Licht en zakelijk: warm gebroken wit, donkere inkt, één diepe accentkleur (petrol).
   Wordt NA de eigen <style> van elke pagina geladen, zodat deze regels voorgaan. */

:root, :root:root{
  --bg:#f5f3ee;          /* warm gebroken wit */
  --surface:#ffffff;
  --surface2:#faf9f6;
  --fg:#1c2421;          /* inkt */
  --muted:#5e6964;
  --line:#e2ded5;
  --line-strong:#cfc9bd;
  --accent:#0e5a62;      /* petrol */
  --accent-hover:#0a4a51;
  --accent-fg:#ffffff;
  --accent-soft:#e8f0ef;
  --warn:#9a5a06;        /* donker amber, leesbaar op licht */
  --warn-soft:#fbf2e3;
  --bad:#b03a2e;
  --rec:#c2412d;
  --font:"Avenir Next","Avenir","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root, :root:root{
  --bg:#f5f3ee; --surface:#ffffff; --surface2:#faf9f6; --fg:#1c2421; --muted:#5e6964; --line:#e2ded5;
  --accent:#0e5a62; --accent-fg:#ffffff; --accent-soft:#e8f0ef; --warn:#9a5a06; --rec:#c2412d; color-scheme:light } }

body{ background:var(--bg); color:var(--fg); font-family:var(--font); -webkit-font-smoothing:antialiased; }
input, select, textarea, button, .btn, a.btnlink{ font-family:var(--font); }

/* Woordmerk bovenaan: "EBP" met een eigen beeldmerk (huisje), gevolgd door de naam van het scherm */
h1.merk{ display:flex; align-items:center; gap:10px; font-size:1.2rem; font-weight:500; letter-spacing:0; color:var(--fg); white-space:nowrap; }
h1.merk::before{ content:""; width:26px; height:26px; flex:none; background:var(--accent);
  clip-path:polygon(50% 4%, 96% 42%, 96% 96%, 4% 96%, 4% 42%); border-radius:2px; }
h1.merk b{ font-weight:700; color:var(--accent); letter-spacing:.02em; }
h1.merk span{ color:var(--muted); font-weight:500; padding-left:10px; border-left:1px solid var(--line-strong); }
header{ padding-bottom:12px; border-bottom:1px solid var(--line); }

/* Koppen en labels: gewone zinsopbouw in plaats van KLEINE HOOFDLETTERS */
h2{ font-weight:600; letter-spacing:-.005em; }
h3, .lbl, label, th, .kpi span, .stap, .step{
  text-transform:none !important; letter-spacing:0 !important; }
.lbl, label{ font-size:.82rem !important; font-weight:600 !important; color:var(--muted); }
h3{ font-size:.9rem; font-weight:600; color:var(--fg); }
th{ font-size:.8rem !important; font-weight:600 !important; color:var(--muted); }
.stap, .step{ font-size:.8rem !important; font-weight:600 !important; color:var(--accent); }
.kpi span{ font-size:.8rem !important; font-weight:500 !important; color:var(--muted); }

/* Vlakken: rustiger, minder rond, geen kaders-in-kaders */
.panel{ border-radius:8px; border-color:var(--line); box-shadow:0 1px 2px rgba(28,36,33,.04); }
.m-row, .zoekbox, .impact, .kpi, .live-row, .drop{ border-radius:6px; }
.m-row, .zoekbox, .impact{ background:var(--surface2); }
.kpi{ background:transparent; border:0; border-left:3px solid var(--line); border-radius:0; padding:6px 12px; }
.kpi.hoofd{ background:var(--accent-soft); border-left-color:var(--accent); border-radius:0 6px 6px 0; }
.kpi.hoofd b{ color:var(--accent); }
.sec pre{ color:var(--fg); }

/* Knoppen en velden */
button, .btn, a.btnlink{ border-radius:6px; font-weight:600; border-color:var(--line-strong); }
button:hover:not(:disabled), .btn:hover, a.btnlink:hover{ border-color:var(--accent); }
button.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
button.primary:hover:not(:disabled){ background:var(--accent-hover); }
button.danger{ border-color:var(--bad); color:var(--bad); }
input, select, textarea{ background:var(--surface); border-color:var(--line-strong); border-radius:5px; color:var(--fg); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
:focus-visible{ outline-color:var(--accent); }
input[type=checkbox]{ accent-color:var(--accent); }

/* Labels en markeringen zonder "pilletjes" */
.tag{ display:none; }
.pill, .chip{ border-radius:4px; }
.pill.vl, .chip.mist, .banner{ background:var(--warn-soft); }
.pill.uit{ background:#f8e6e3; color:var(--bad); }
.pill.adm{ background:#e6ecf5; color:#2c4f80; }
.banner{ border-radius:6px; border-style:solid; }
.balk{ background:var(--surface); border-color:var(--accent); box-shadow:0 4px 16px rgba(28,36,33,.12); border-radius:8px; }
.consent, .totals{ border-radius:6px; }

/* Opnameknop: rustig rood, geen dikke rand */
#recBtn{ background:var(--rec); border:4px solid #f1d9d4; font-family:var(--font); }
#recBtn.on{ background:var(--surface); color:var(--rec); border-color:var(--rec); }

/* Ringdiagram: kleuren voor een lichte achtergrond */
.impact{ --s0:#a9b1ad; --s1:#2f6fbd; --s2:#c4531f; --s3:#13805c; --s4:#a87000; --s5:#b8436d; --s6:#2d7a1f; }
.impact svg path{ stroke:var(--surface2); }

/* Schakelaar particulier / maatschappelijk vastgoed */
nav[aria-label="Soort plan"]{ background:var(--surface) !important; border-color:var(--line-strong) !important; border-radius:6px !important; font-family:var(--font) !important; }
nav[aria-label="Soort plan"] > *{ border-radius:4px !important; }