/* =========================================================================
   Design4bouw — gedeeld design-systeem (één look over alle pagina's).
   Eén bestand, geserveerd op /d4b-theme.css (static_folder='.').
   Elke pagina linkt dit ALS LAATSTE en gebruikt de .d4b-* componenten.
   Tokens in licht én donker; blueprint-blauw accent; semantiek los van accent.
   ========================================================================= */

:root {
  --d4b-ground:#F7F8FA; --d4b-surface:#FFFFFF; --d4b-raise:#FFFFFF;
  --d4b-ink:#10151C; --d4b-muted:#5A6472; --d4b-faint:#666D78;
  --d4b-line:#E4E8EE; --d4b-line-2:#EEF1F5;
  --d4b-accent:#2B54D4; --d4b-accent-ink:#1E3EA8; --d4b-accent-wash:#EAF0FF; --d4b-accent-btn:#2B54D4;
  --d4b-good:#107D52; --d4b-good-wash:#E5F4EC;
  --d4b-warn:#976419; --d4b-warn-wash:#FBF1DE;
  --d4b-crit:#BA3636; --d4b-crit-wash:#FBE9E9;
  --d4b-shadow:0 1px 2px rgba(16,21,28,.04), 0 6px 20px rgba(16,21,28,.06);
  --d4b-shadow-lg:0 24px 60px rgba(16,21,28,.18);
  --d4b-radius:12px; --d4b-radius-sm:8px; --d4b-radius-lg:16px;
  --d4b-mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",monospace;
  --d4b-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d4b-ground:#0E1116; --d4b-surface:#161A21; --d4b-raise:#1B2029;
    --d4b-ink:#E7EBF1; --d4b-muted:#9AA4B2; --d4b-faint:#848D9A;
    --d4b-line:#262C36; --d4b-line-2:#20252E;
    --d4b-accent:#5B7CFF; --d4b-accent-ink:#8AA1FF; --d4b-accent-wash:#1A2136; --d4b-accent-btn:#506DE0;
    --d4b-good:#34C88A; --d4b-good-wash:#122A22;
    --d4b-warn:#E0A93B; --d4b-warn-wash:#2C2413;
    --d4b-crit:#E5766B; --d4b-crit-wash:#2E1917;
    --d4b-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
    --d4b-shadow-lg:0 24px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --d4b-ground:#0E1116; --d4b-surface:#161A21; --d4b-raise:#1B2029;
  --d4b-ink:#E7EBF1; --d4b-muted:#9AA4B2; --d4b-faint:#848D9A;
  --d4b-line:#262C36; --d4b-line-2:#20252E;
  --d4b-accent:#5B7CFF; --d4b-accent-ink:#8AA1FF; --d4b-accent-wash:#1A2136; --d4b-accent-btn:#506DE0;
  --d4b-good:#34C88A; --d4b-good-wash:#122A22;
  --d4b-warn:#E0A93B; --d4b-warn-wash:#2C2413;
  --d4b-crit:#E5766B; --d4b-crit-wash:#2E1917;
  --d4b-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
  --d4b-shadow-lg:0 24px 60px rgba(0,0,0,.55);
}

/* ---- Basis ---- */
.d4b, .d4b * { box-sizing:border-box; }
.d4b {
  font-family:var(--d4b-sans); background:var(--d4b-ground); color:var(--d4b-ink);
  -webkit-font-smoothing:antialiased; margin:0; line-height:1.5;
}
.d4b-mono { font-family:var(--d4b-mono); font-variant-numeric:tabular-nums; }
.d4b-label { font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--d4b-muted); font-weight:700; }

/* ---- Knoppen ---- */
.d4b-btn {
  font-family:inherit; font-size:14px; font-weight:600; padding:10px 16px;
  border-radius:10px; border:1px solid var(--d4b-line); background:var(--d4b-surface);
  color:var(--d4b-ink); cursor:pointer; display:inline-flex; align-items:center;
  gap:8px; line-height:1.2; transition:background .15s, border-color .15s, transform .05s;
}
.d4b-btn:hover { border-color:var(--d4b-muted); }
.d4b-btn:active { transform:translateY(1px); }
.d4b-btn--primary { background:var(--d4b-accent-btn); border-color:var(--d4b-accent-btn); color:#fff; }
.d4b-btn--primary:hover { background:var(--d4b-accent-ink); border-color:var(--d4b-accent-ink); }
.d4b-btn--good { background:var(--d4b-good); border-color:var(--d4b-good); color:#fff; }
.d4b-btn--ghost { background:transparent; }
.d4b-btn--block { width:100%; justify-content:center; }
.d4b-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ---- Velden ---- */
.d4b-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.d4b-field > label { font-size:13px; font-weight:600; color:var(--d4b-muted); }
.d4b-input, .d4b-select, .d4b-textarea {
  width:100%; padding:11px 14px; border:1px solid var(--d4b-line);
  border-radius:10px; font-size:14.5px; font-family:inherit; color:var(--d4b-ink);
  background:var(--d4b-surface); outline:none; transition:border-color .15s, box-shadow .15s;
}
.d4b-input::placeholder, .d4b-textarea::placeholder { color:var(--d4b-faint); }
.d4b-input:focus, .d4b-select:focus, .d4b-textarea:focus {
  border-color:var(--d4b-accent); box-shadow:0 0 0 3px var(--d4b-accent-wash);
}

/* ---- Kaart / paneel ---- */
.d4b-card {
  background:var(--d4b-surface); border:1px solid var(--d4b-line);
  border-radius:var(--d4b-radius); box-shadow:var(--d4b-shadow);
}
.d4b-card__h { display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--d4b-line-2); font-weight:650; font-size:13px; }
.d4b-card__b { padding:16px; }

/* ---- Pills / status ---- */
.d4b-pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:600; padding:3px 9px; border-radius:999px; line-height:1.4; white-space:nowrap; }
.d4b-pill--good { background:var(--d4b-good-wash); color:var(--d4b-good); }
.d4b-pill--warn { background:var(--d4b-warn-wash); color:var(--d4b-warn); }
.d4b-pill--crit { background:var(--d4b-crit-wash); color:var(--d4b-crit); }
.d4b-pill--neut { background:var(--d4b-line-2); color:var(--d4b-muted); }
.d4b-pill--ac  { background:var(--d4b-accent-wash); color:var(--d4b-accent-ink); }

/* ---- Feedbackregels ---- */
.d4b-alert { padding:10px 14px; border-radius:var(--d4b-radius-sm); font-size:13px;
  line-height:1.45; }
.d4b-alert--err { background:var(--d4b-crit-wash); color:var(--d4b-crit); }
.d4b-alert--ok  { background:var(--d4b-good-wash); color:var(--d4b-good); }

/* ---- Tabel ---- */
.d4b-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.d4b-table th { text-align:left; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--d4b-muted); font-weight:700;
  padding:11px 14px; border-bottom:1px solid var(--d4b-line); }
.d4b-table td { padding:12px 14px; border-bottom:1px solid var(--d4b-line-2); }
.d4b-table tr:hover td { background:var(--d4b-line-2); }

/* ---- App-schil: zijbalk + topbar (voor de dashboardpagina's) ---- */
.d4b-shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.d4b-side { background:var(--d4b-surface); border-right:1px solid var(--d4b-line);
  display:flex; flex-direction:column; gap:2px; padding:18px 14px; position:sticky; top:0; height:100vh; }
.d4b-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 16px; }
.d4b-brand__mark { width:30px; height:30px; border-radius:8px; flex:0 0 auto; color:#fff;
  font-weight:700; font-size:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--d4b-accent),var(--d4b-accent-ink)); }
.d4b-brand__name { font-weight:650; font-size:15px; letter-spacing:-.01em; }
.d4b-brand__sub { font-size:11px; color:var(--d4b-faint); }
.d4b-nav a { display:flex; align-items:center; gap:11px; padding:9px 10px;
  border-radius:var(--d4b-radius-sm); color:var(--d4b-muted); font-size:13.5px;
  font-weight:500; text-decoration:none; }
.d4b-nav a:hover { background:var(--d4b-line-2); color:var(--d4b-ink); }
.d4b-nav a.is-active { background:var(--d4b-accent-wash); color:var(--d4b-accent-ink); font-weight:600; }
.d4b-topbar { display:flex; align-items:center; gap:16px; padding:15px 26px;
  border-bottom:1px solid var(--d4b-line); background:var(--d4b-ground); position:sticky; top:0; z-index:5; }
.d4b-topbar h1 { font-size:18px; font-weight:650; letter-spacing:-.02em; margin:0; }

/* ---- Statustegels ---- */
.d4b-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.d4b-tile { position:relative; overflow:hidden; background:var(--d4b-surface);
  border:1px solid var(--d4b-line); border-radius:var(--d4b-radius); padding:15px 16px; box-shadow:var(--d4b-shadow); }
.d4b-tile__k { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--d4b-muted); font-weight:600; }
.d4b-tile__v { font-family:var(--d4b-mono); font-size:30px; font-weight:600; letter-spacing:-.02em;
  margin-top:8px; line-height:1; font-variant-numeric:tabular-nums; }
.d4b-tile__f { font-size:12px; color:var(--d4b-faint); margin-top:7px; }
.d4b-tile__stripe { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--d4b-accent); }
.d4b-tile--good .d4b-tile__stripe{background:var(--d4b-good)} .d4b-tile--good .d4b-tile__v{color:var(--d4b-good)}
.d4b-tile--warn .d4b-tile__stripe{background:var(--d4b-warn)} .d4b-tile--warn .d4b-tile__v{color:var(--d4b-warn)}
.d4b-tile--crit .d4b-tile__stripe{background:var(--d4b-crit)} .d4b-tile--crit .d4b-tile__v{color:var(--d4b-crit)}

/* ---- Toegankelijkheid ---- */
.d4b :focus-visible, .d4b-btn:focus-visible, .d4b-input:focus-visible { outline:2px solid var(--d4b-accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .d4b *, .d4b { transition:none !important; } }
@media (max-width:860px){ .d4b-shell{ grid-template-columns:1fr; } .d4b-side{ display:none; } }