/* ============================================================================
   bp.css — BePowered design system (ADR-0010 §2.2 · ADR-0023 · ADR-0045)
   One file, no build step, no CDN.
   De semantische tokenlaag (§1) is het contract; een THEMA is een complete
   waardenset (ADR-0045 §4). Drie first-class thema's:
     · instrument-console (default, géén data-bp-theme-attribuut): het gezicht
       van de werk-laag — ADR-0016, gedeeld met de edge-UIs (bridge.css is de
       sibling; copy-forward, namespace hier .bp-*). Dark-first, mono draagt
       de identiteit, signal-amber als annunciator.
     · bepowered (html[data-bp-theme="bepowered"]): de BePowered-huisstijl
       voor de eindklant-app — licht + donker, zie §1b.
   Spelregels: thema's overriden alléén tokens, nooit component-CSS; elke set
   haalt de contrast-toets (tekst ≥4,5:1, UI/charts ≥3:1); grafiekkleuren
   horen in het contract en blijven 6-digit hex (bp.js plakt alpha als
   string). White-label = later een extra attribuutwaarde + tokenblok.
   Every page styles itself with these tokens + components only; per-page
   <style> blocks are limited to layout glue. No new hex colours in pages.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Design tokens — instrument-console (default-thema)
   --------------------------------------------------------------------------- */
:root {
  /* de --bp-n*-ramp is verwijderd (ADR-0045): een primitieve grijstrap kan
     per definitie niet mee-themen — pagina's gebruiken semantische tokens */

  /* brand: signal-amber annunciator (console-taal, 1-op-1 met bridge.css).
     De oude brand-*-namen blijven bestaan zodat pagina-glue niets breekt. */
  --bp-accent:    #f0a72e;
  --bp-on-accent: #12161c;   /* inkt óp een accent-vulling (knop.primary, seg.on) */
  --bp-brand-600: #f0a72e;
  --bp-brand-500: #f0a72e;
  --bp-brand-100: color-mix(in srgb, var(--bp-accent) 12%, transparent);

  /* semantics */
  --bp-ok:      #3fb56a;  --bp-ok-bg:      color-mix(in srgb, #3fb56a 14%, transparent);
  --bp-warn:    #f0a72e;  --bp-warn-bg:    color-mix(in srgb, #f0a72e 12%, transparent);
  --bp-err:     #e5484d;  --bp-err-bg:     color-mix(in srgb, #e5484d 14%, transparent);
  --bp-info:    #4a9eff;  --bp-info-bg:    color-mix(in srgb, #4a9eff 14%, transparent);
  --bp-muted:   #7d8b9c;  --bp-muted-bg:   #1a222d;

  /* surfaces & text */
  --bp-bg:            #0d1117;
  --bp-surface:       #141b24;   /* panel */
  --bp-surface-2:     #1a222d;   /* panel-2 */
  --bp-border:        #232c38;   /* hairline */
  --bp-border-strong: #33404f;
  --bp-text:          #dce3ec;
  --bp-text-dim:      #7d8b9c;
  --bp-link:          #4a9eff;
  --bp-rail:          #3a4757;
  --bp-shell-bg:      #141b24;   /* topbar = solid panel, geen blur */
  --bp-shell-text:    #dce3ec;

  /* shape & elevation */
  --bp-r-sm: 7px;
  --bp-r-md: 9px;
  --bp-r-lg: 13px;
  --bp-shadow-1: 0 1px 3px rgba(0, 0, 0, .25);
  --bp-shadow-2: 0 8px 30px rgba(0, 0, 0, .35);
  --bp-scrim: rgba(0, 0, 0, .45);   /* backdrop achter dialogen/mobiele nav */

  /* type — system stacks; mono draagt de identiteit (waarden, ID's, labels) */
  --bp-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bp-font-display: var(--bp-font);
  --bp-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* chart series (CVD-gevalideerd; het accent is nóóit een seriekleur) */
  --ch-sun:  #d9a827;
  --ch-use:  #33915a;
  --ch-net:  #4a86d6;
  --ch-use3: #c2637f;
  --ch-use4: #8a63c9;
  --ch-lime: #8fbf4d;
}

@media (prefers-color-scheme: light) {
  :root {
    --bp-bg:            #eef1f5;
    --bp-surface:       #ffffff;
    --bp-surface-2:     #f5f7fa;
    --bp-border:        #e0e5ec;
    --bp-border-strong: #ccd4de;
    --bp-text:          #16202b;
    --bp-text-dim:      #5d6b7a;
    --bp-link:          #2b7de0;
    --bp-rail:          #b3bfcc;
    --bp-shell-bg:      #ffffff;
    --bp-shell-text:    #16202b;
    --bp-accent:    #b9791a;
    --bp-brand-600: #b9791a;
    --bp-brand-500: #b9791a;
    --bp-ok:   #1f9d57;  --bp-ok-bg:   color-mix(in srgb, #1f9d57 12%, transparent);
    --bp-warn: #b9791a;  --bp-warn-bg: color-mix(in srgb, #b9791a 12%, transparent);
    --bp-err:  #cf3439;  --bp-err-bg:  color-mix(in srgb, #cf3439 12%, transparent);
    --bp-info: #2b7de0;  --bp-info-bg: color-mix(in srgb, #2b7de0 12%, transparent);
    --bp-muted: #5d6b7a; --bp-muted-bg: #f5f7fa;
    --bp-shadow-1: 0 1px 3px rgba(22, 32, 43, .10);
    --bp-shadow-2: 0 8px 30px rgba(22, 32, 43, .16);
    /* charts op wit: de donkere set haalde hier de 3:1 niet (zon 1,9:1);
       zelfde hues, donkerder gestapt — gevalideerd (CVD + contrast, ADR-0045) */
    --ch-sun:  #b8820a;
    --ch-use:  #2a7a4b;
    --ch-net:  #366bb8;
    --ch-use3: #b8506e;
    --ch-use4: #6a4ab3;
    --ch-lime: #5f7d1e;
  }
}

/* ---------------------------------------------------------------------------
   1b. Thema "bepowered" — de BePowered-huisstijl (ADR-0045 §4), voor de
   eindklant-app (renderShell zet het attribuut per audience; bp.setTheme()
   is de preview-haak). Bron: docs/portal/huisstijl-legacy/
   bepowered-foundation.scss — informatief, eigen invulling:
     · accent = brand-accent-600 #106b3f (donkergroen): wit-op-mint-500 haalt
       maar ~2:1 en mint-als-tekst op wit ~1,9:1 (Barts besluit 2026-08-16).
       Mint #15cd72 blijft de identiteitskleur (--bp-brand-500): decoratie,
       spinner-achtige momenten — nooit tekst op een licht vlak.
     · hover/selectie-tint = mint (het accent-50-gebaar uit de legacy-app).
     · radii 4/8/12 en de zachte foundation-schaduwen; typo = Inter
       (variable, lokaal gevendored), mono blijft voor waarden/ID's.
     · alle waarden gevalideerd: tekst ≥4,5:1, UI/charts ≥3:1 (ook de
       -bg-tinten), chartset door de CVD-validator.
   --------------------------------------------------------------------------- */
@font-face {
  /* alleen gedownload wanneer een thema 'Inter' ook echt gebruikt */
  font-family: 'Inter';
  src: url('/static/vendor/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html[data-bp-theme="bepowered"] {
  /* licht (light-first — dit thema leeft standaard in de zon) */
  --bp-bg:            #f8fcff;   /* system-background-0 */
  --bp-surface:       #ffffff;
  --bp-surface-2:     #f2f6f4;
  --bp-border:        #e4eae6;
  --bp-border-strong: #c6d0c9;
  --bp-text:          #2f2f2f;   /* shades-0 */
  --bp-text-dim:      #636363;   /* shades-4 */
  --bp-link:          #0b5fc0;   /* blauw, zoals legacy (focus/links); groen-link
                                    botste bovendien met lime in het chartpalet */
  --bp-rail:          #b9c4bd;
  --bp-shell-bg:      #ffffff;
  --bp-shell-text:    #2f2f2f;

  --bp-accent:    #106b3f;
  --bp-on-accent: #ffffff;
  --bp-brand-600: #106b3f;
  --bp-brand-500: #15cd72;
  --bp-brand-100: color-mix(in srgb, var(--bp-brand-500) 16%, transparent);

  --bp-ok:      #26723f;  --bp-ok-bg:      color-mix(in srgb, #26723f 12%, transparent);
  --bp-warn:    #8a5203;  --bp-warn-bg:    color-mix(in srgb, #8a5203 12%, transparent);
  --bp-err:     #ba0517;  --bp-err-bg:     color-mix(in srgb, #ba0517 12%, transparent);
  --bp-info:    #0b5fc0;  --bp-info-bg:    color-mix(in srgb, #0b5fc0 12%, transparent);
  --bp-muted:   #636363;  --bp-muted-bg:   #f0f4f1;

  --bp-r-sm: 4px;
  --bp-r-md: 8px;
  --bp-r-lg: 12px;
  --bp-shadow-1: 0 3px 3px rgba(0, 0, 0, .05);    /* foundation "subtle" */
  --bp-shadow-2: 0 2px 20px rgba(0, 0, 0, .25);   /* foundation "prominent" */
  --bp-scrim: rgba(0, 0, 0, .5);

  --bp-font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

  --ch-sun:  #b8820a;
  --ch-use:  #2a7a4b;
  --ch-net:  #366bb8;
  --ch-use3: #b8506e;
  --ch-use4: #6a4ab3;
  --ch-lime: #5f7d1e;
}

@media (prefers-color-scheme: dark) {
  html[data-bp-theme="bepowered"] {
    /* donker — eigen ontwerp (legacy kende geen dark): neutrale vlakken met
       een subtiele groenzweem; hiér mag mint wél het accent zijn (op donker
       haalt #15cd72 ruim 8:1) met donkergroene inkt erbovenop */
    --bp-bg:            #0f1512;
    --bp-surface:       #161d19;
    --bp-surface-2:     #1c2420;
    --bp-border:        #263029;
    --bp-border-strong: #37453d;
    --bp-text:          #e2eae5;
    --bp-text-dim:      #8fa198;
    --bp-link:          #5aa6f8;
    --bp-rail:          #3e4b44;
    --bp-shell-bg:      #161d19;
    --bp-shell-text:    #e2eae5;

    --bp-accent:    #15cd72;
    --bp-on-accent: #0c2b1b;
    --bp-brand-600: #15cd72;
    --bp-brand-500: #15cd72;
    --bp-brand-100: color-mix(in srgb, var(--bp-brand-500) 12%, transparent);

    --bp-ok:      #48b56e;  --bp-ok-bg:      color-mix(in srgb, #48b56e 14%, transparent);
    --bp-warn:    #ddab1f;  --bp-warn-bg:    color-mix(in srgb, #ddab1f 14%, transparent);
    --bp-err:     #fe5c4c;  --bp-err-bg:     color-mix(in srgb, #fe5c4c 14%, transparent);
    --bp-info:    #5aa6f8;  --bp-info-bg:    color-mix(in srgb, #5aa6f8 14%, transparent);
    --bp-muted:   #8fa198;  --bp-muted-bg:   #1c2420;

    --bp-shadow-1: 0 1px 3px rgba(0, 0, 0, .3);
    --bp-shadow-2: 0 8px 30px rgba(0, 0, 0, .4);
    --bp-scrim: rgba(0, 0, 0, .55);

    /* zelfde seriekleuren als de console-dark-set: één serie-identiteit
       over werk-laag en app heen (CVD + contrast gevalideerd op dit vlak) */
    --ch-sun:  #d9a827;
    --ch-use:  #33915a;
    --ch-net:  #4a86d6;
    --ch-use3: #c2637f;
    --ch-use4: #8a63c9;
    --ch-lime: #8fbf4d;
  }
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: var(--bp-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bp-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 11px; font-weight: 600; margin: 0 0 6px;
     color: var(--bp-text-dim); text-transform: uppercase; letter-spacing: .09em; }

code, .bp-mono { font-family: var(--bp-mono); font-size: 12px; }

.bp-container { max-width: 1280px; margin: 0 auto; padding: 18px 20px 60px; }
.bp-dim   { color: var(--bp-text-dim); }
.bp-small { font-size: 12px; }
.bp-right { text-align: right; }

/* simple layout utilities (the only "framework" we allow ourselves) */
.bp-row  { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bp-grid { display: grid; gap: 16px; }
/* min-content-vangnet: grid-items weigeren anders smaller te worden dan hun
   breedste inhoud en rekken de héle pagina op (les uit het edge-lab) */
.bp-grid > * { min-width: 0; }
.bp-grid-kpi   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bp-grid-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* twee kolommen die onder ~700px netjes één kolom worden — vervangt het
   handgeschreven `1fr 1fr`, dat op smalle schermen twee kolommen bleef
   persen en de inhoud uit haar kaart duwde */
.bp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
             align-items: start; }
/* smalle vaste zijkolom + brede hoofdkolom (site-hub Overzicht/Beheer);
   klapt op smalle schermen naar één kolom i.p.v. de inhoud te pletten */
.bp-grid-side { grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; }
@media (max-width: 880px) { .bp-grid-side { grid-template-columns: 1fr; } }
/* opt-in vangnet voor pagina's met een eigen kolomverhouding in de inline
   style (2fr 1fr, 360px 1fr, …): onder 880px tóch één kolom. !important is
   hier het gereedschap, niet een zonde — het moet de inline style verslaan. */
@media (max-width: 880px) { .bp-grid-collapse { grid-template-columns: 1fr !important; } }
.bp-spread { display: flex; justify-content: space-between; align-items: center;
             gap: 12px; flex-wrap: wrap; }
.bp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* skeleton-shimmer: "er is iets gaande" zonder springende layout — de balkjes
   staan op de plek waar de echte inhoud komt */
.bp-skel { position: relative; overflow: hidden; min-height: 12px;
  border-radius: var(--bp-r-sm); background: var(--bp-surface-2); }
.bp-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--bp-text) 8%, transparent), transparent);
  animation: bp-skel 1.3s infinite; }
@keyframes bp-skel { to { transform: translateX(100%); } }

/* ---------------------------------------------------------------------------
   3. Shell — sidebar-app-shell (ADR-0031), injected by bp.js renderShell().
   De sidebar zegt wáár je bent (werkruimte → gebied), tabs in de pagina zelf
   (site-hub) zeggen welk aspect — één hiërarchie i.p.v. twee gelijke navs.
   site_user-accounts krijgen géén sidebar maar de rustige topbalk (.bp-topbar
   met inline links); html.bp-with-side stuurt de paginamarge.
   --------------------------------------------------------------------------- */
:root { --bp-side-w: 236px; --bp-topbar-h: 52px; }
html.bp-with-side body { padding-left: var(--bp-side-w); }

.bp-side {
  position: fixed; inset: 0 auto 0 0; width: var(--bp-side-w); z-index: 60;
  background: var(--bp-shell-bg); color: var(--bp-shell-text);
  border-right: 1px solid var(--bp-border);
  display: flex; flex-direction: column;
}
.bp-side-brand { display: flex; align-items: baseline; gap: 8px;
  padding: 15px 16px 8px; text-decoration: none; }
.bp-side-brand:hover { text-decoration: none; }
.bp-side-brand .mark {
  font: 700 12px var(--bp-mono); letter-spacing: .18em;
  color: var(--bp-accent); text-transform: uppercase;
}
.bp-side-brand span { font: 10px var(--bp-mono); color: var(--bp-text-dim); }

/* werkruimte-switcher: in welke schoenen sta je — de vloot of één organisatie */
.bp-ws { position: relative; margin: 4px 10px 0; }
.bp-ws-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--bp-surface-2); color: var(--bp-text);
  border: 1px solid var(--bp-border); border-radius: var(--bp-r-md);
  padding: 7px 10px; cursor: pointer; font: 600 12.5px var(--bp-font);
  text-align: left;
}
.bp-ws-btn:hover { border-color: var(--bp-border-strong); }
.bp-ws-btn .kind { font: 9px var(--bp-mono); color: var(--bp-text-dim);
  text-transform: uppercase; letter-spacing: .07em; display: block; }
.bp-ws-btn .naam { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bp-ws-btn .chev { margin-left: auto; color: var(--bp-text-dim); font-size: 9px; }
.bp-ws-btn.imp { border-color: color-mix(in srgb, var(--bp-accent) 55%, transparent); }
.bp-ws-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 95;
  max-height: 340px; overflow-y: auto; padding: 5px;
  background: var(--bp-surface); border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-md); box-shadow: var(--bp-shadow-2);
}
.bp-ws-menu .lbl { font: 600 9.5px var(--bp-mono); text-transform: uppercase;
  letter-spacing: .09em; color: var(--bp-text-dim); padding: 6px 8px 3px; }
.bp-ws-menu button {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; border-radius: var(--bp-r-sm); padding: 6px 8px; cursor: pointer;
  color: var(--bp-text); font: 12.5px var(--bp-font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-ws-menu button:hover { background: var(--bp-surface-2); }
.bp-ws-menu button.on { color: var(--bp-accent); font-weight: 600; }

/* zoekknop die zich als invoerveld voordoet — opent het ⌘K-palet */
.bp-side-search {
  margin: 8px 10px 6px; display: flex; align-items: center; gap: 7px;
  background: var(--bp-bg); color: var(--bp-text-dim);
  border: 1px solid var(--bp-border); border-radius: var(--bp-r-md);
  padding: 6px 10px; cursor: pointer; font: 12.5px var(--bp-font);
}
.bp-side-search:hover { border-color: var(--bp-border-strong); color: var(--bp-text); }
.bp-side-search kbd {
  margin-left: auto; font: 10px var(--bp-mono); color: var(--bp-text-dim);
  border: 1px solid var(--bp-border); border-radius: 4px; padding: 1px 5px;
}

.bp-side-nav { flex: 1; overflow-y: auto; padding: 2px 10px 12px;
  scrollbar-width: thin; }
.bp-side-nav a {
  display: block; padding: 6px 10px; border-radius: var(--bp-r-sm);
  color: var(--bp-text-dim); font: 500 13px var(--bp-font);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-side-nav a:hover { background: var(--bp-surface-2); color: var(--bp-text);
  text-decoration: none; }
.bp-side-nav a.active { background: var(--bp-surface-2); color: var(--bp-text);
  box-shadow: inset 2px 0 0 var(--bp-accent); }
.bp-side-h {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 5px 10px 3px; margin-top: 7px;
  font: 600 10px var(--bp-mono); text-transform: uppercase;
  letter-spacing: .09em; color: var(--bp-text-dim);
}
.bp-side-h:hover { color: var(--bp-text); }
.bp-side-h .chev { font-size: 8px; transition: transform .12s; }
.bp-side-group.closed .bp-side-h .chev { transform: rotate(-90deg); }
.bp-side-group.closed .bp-side-items { display: none; }

.bp-side-user {
  border-top: 1px solid var(--bp-border); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.bp-side-user .who { flex: 1; min-width: 0; }
.bp-side-user .who b { display: block; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bp-side-user .who span { color: var(--bp-text-dim); font: 10px var(--bp-mono);
  text-transform: uppercase; letter-spacing: .05em; }

/* impersonatie-banner: permanent zichtbaar in wiens schoenen je staat */
.bp-imp-banner {
  position: sticky; top: 0; z-index: 49;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 20px;
  background: color-mix(in srgb, var(--bp-accent) 13%, var(--bp-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--bp-accent) 45%, transparent);
  font-size: 12.5px;
}
.bp-imp-banner b { color: var(--bp-accent); }

/* sectie-subnav: zusterpagina's van de actieve sectie, boven de inhoud */
.bp-subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 6px 20px 0;
  background: var(--bp-shell-bg);
  border-bottom: 1px solid var(--bp-border);
}
.bp-subnav a {
  color: var(--bp-text-dim); font: 500 12.5px var(--bp-font);
  padding: 6px 11px 8px; text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
}
.bp-subnav a:hover { color: var(--bp-text); background: var(--bp-surface-2); text-decoration: none; }
.bp-subnav a.on { color: var(--bp-text); box-shadow: inset 0 -2px 0 var(--bp-accent); }

/* topbalk: mobiel (hamburger + merk), en dé nav voor site_user-accounts */
.bp-topbar {
  position: sticky; top: 0; z-index: 50; min-height: var(--bp-topbar-h);
  background: var(--bp-shell-bg); color: var(--bp-shell-text);
  border-bottom: 1px solid var(--bp-border);
  padding: 8px 16px; display: flex; align-items: center; gap: 12px;
}
.bp-topbar .bp-side-brand { padding: 0; }
.bp-topbar-nav { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.bp-topbar-nav a { color: var(--bp-text-dim); font-weight: 500;
  padding: 5px 10px; border-radius: 6px; text-decoration: none; }
.bp-topbar-nav a:hover { background: var(--bp-surface-2); color: var(--bp-text); }
.bp-topbar-nav a.active { background: var(--bp-surface-2); color: var(--bp-text);
  box-shadow: inset 0 -2px 0 var(--bp-accent); }
.bp-topbar .spacer { flex: 1; }
.bp-topbar .who { font-size: 12px; text-align: right; }
.bp-topbar .who b { display: block; font-size: 12.5px; }
.bp-topbar .who span { color: var(--bp-text-dim); font: 10px var(--bp-mono);
  text-transform: uppercase; letter-spacing: .05em; }
.bp-nav-toggle {
  display: none; background: none; border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-sm); cursor: pointer; width: 38px; height: 38px;
  font-size: 18px; line-height: 1; color: var(--bp-text);
  align-items: center; justify-content: center;
}
html.bp-with-side .bp-topbar { display: none; }   /* desktop: sidebar volstaat */
.bp-side-backdrop { display: none; }

@media (max-width: 880px) {
  html.bp-with-side body { padding-left: 0; }
  html.bp-with-side .bp-topbar { display: flex; }
  .bp-nav-toggle { display: inline-flex; }
  .bp-side { transform: translateX(-102%); transition: transform .18s ease-out;
    width: min(300px, 86vw); box-shadow: var(--bp-shadow-2); }
  .bp-side.open { transform: none; }
  .bp-side-backdrop { display: none; position: fixed; inset: 0; z-index: 55;
    background: var(--bp-scrim); }
  .bp-side-backdrop.open { display: block; }
  .bp-subnav { padding: 4px 14px 0; }
  .bp-container { padding: 14px 14px 40px; }
  .bp-grid-kpi { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   3b. App-shell (eindklant, html.bp-app — gezet door renderShell voor
   site_user). Zelfde instrument-console, zakformaat: op mobiel een vaste
   tabbar onderaan (mono-microlabels, actief = amber) en een minimale topbalk
   met account-knop; ≥641px blijft de gewone topbalk-nav. Alle selectors
   gescoped op html.bp-app — de beheerspagina's raken hier niets van.
   --------------------------------------------------------------------------- */
html.bp-app .bp-topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
html.bp-app body { overscroll-behavior-y: none; }
html.bp-app { -webkit-tap-highlight-color: transparent; }
html.bp-app a, html.bp-app button { touch-action: manipulation; }

/* logo-merk (app-shell): beeldmerk = asset met vast merk-mint (in de SVG
   zelf), woordmerk volgt de shell-tekstkleur — zoals het logo dat zelf doet
   (bijna-zwart woordmerk op licht). De werk-laag houdt het mono-tekstmerk. */
.bp-brand-logo { display: inline-flex; align-items: center; gap: 8px; }
.bp-brand-logo .bp-logo-mark { width: 23px; height: 23px; flex: none; display: block; }
.bp-brand-logo .wm { font: 650 15.5px var(--bp-font); letter-spacing: -.01em;
  color: var(--bp-shell-text); }

.bp-account-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: none; border: 1px solid var(--bp-border-strong);
  color: var(--bp-text-dim); cursor: pointer;
}
.bp-account-btn:hover { border-color: var(--bp-accent); color: var(--bp-text); }
.bp-account-btn svg { width: 19px; height: 19px; }

.bp-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--bp-shell-bg); border-top: 1px solid var(--bp-border);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bp-tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  justify-content: center; min-height: 48px; border-radius: var(--bp-r-sm);
  color: var(--bp-text-dim); text-decoration: none;
}
.bp-tabbar a:hover { text-decoration: none; }
.bp-tabbar a svg { width: 22px; height: 22px; }
.bp-tabbar a span { font: 600 9.5px var(--bp-mono);
  text-transform: uppercase; letter-spacing: .08em; }
.bp-tabbar a.active { color: var(--bp-accent); }

@media (max-width: 640px) {
  html.bp-app .bp-tabbar { display: grid; }
  html.bp-app .bp-topbar-nav { display: none; }
  /* content nooit onder de tabbar; extra bodem = safe-area (home-indicator) */
  html.bp-app body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* touch: tap-state i.p.v. hover — een telefoon heeft geen muisaanwijzer */
@media (hover: none) {
  html.bp-app .bp-btn:active, html.bp-app .bp-tabbar a:active,
  html.bp-app .bp-account-btn:active { background: var(--bp-surface-2); }
}

/* ── ⌘K command palette: sites, pagina's en site-tabs, overal ────────────── */
dialog.bp-cmdk {
  background: var(--bp-surface); color: var(--bp-text);
  border: 1px solid var(--bp-border-strong); border-radius: var(--bp-r-lg);
  padding: 0; width: min(560px, calc(100vw - 32px));
  margin-top: 9vh; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
dialog.bp-cmdk::backdrop { background: var(--bp-scrim); backdrop-filter: blur(2px); }
.bp-cmdk-input {
  width: 100%; background: transparent; color: var(--bp-text); border: 0;
  border-bottom: 1px solid var(--bp-border); padding: 13px 16px;
  font: 14px var(--bp-font); outline: none;
}
.bp-cmdk-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.bp-cmdk-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; border-radius: var(--bp-r-sm); cursor: pointer;
}
.bp-cmdk-item .t { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bp-cmdk-item .k { font: 10px var(--bp-mono); color: var(--bp-text-dim);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.bp-cmdk-item.sel { background: var(--bp-surface-2);
  box-shadow: inset 2px 0 0 var(--bp-accent); }
.bp-cmdk-empty { padding: 18px 16px; color: var(--bp-text-dim); font-size: 13px; }

/* ---------------------------------------------------------------------------
   4. Cards & KPI tiles
   --------------------------------------------------------------------------- */
.bp-card {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-md);
  padding: 13px 15px;
  /* te brede inhoud (tabellen met veel kolommen) scrolt binnen de kaart —
     op élke breedte, niet alleen mobiel: een 340px-zijkolom naast een 6-koloms
     tabel bestaat ook op desktop. De pagina zelf scrolt nooit horizontaal.
     NB: dit dwingt ook overflow-y:auto af; popovers ín een kaart horen dus in
     een <dialog>/top-layer, niet absoluut gepositioneerd (huisregel). */
  overflow-x: auto;
}
.bp-card + .bp-card { margin-top: 16px; }
.bp-card-title { display: flex; justify-content: space-between; align-items: baseline;
                 margin-bottom: 10px; gap: 8px; }
.bp-card-title h2 {
  font: 600 11px var(--bp-font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--bp-text-dim); margin: 0;
}

.bp-kpi {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-md);
  padding: 12px 14px;
}
.bp-kpi .v { font: 700 22px var(--bp-mono); letter-spacing: -.01em; }
.bp-kpi .l { font-size: 11px; color: var(--bp-text-dim); margin-top: 2px; }
.bp-kpi.accent { border-left: 3px solid var(--bp-accent); }
.bp-kpi.warn   { border-left: 3px solid var(--bp-warn); }
.bp-kpi.err    { border-left: 3px solid var(--bp-err); }
.bp-kpi.ok     { border-left: 3px solid var(--bp-ok); }

/* ---------------------------------------------------------------------------
   5. Buttons, inputs, forms
   --------------------------------------------------------------------------- */
.bp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--bp-text-dim);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-sm);
  padding: 6px 13px;
  font: 500 13px var(--bp-font);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.bp-btn:hover { background: var(--bp-surface-2); color: var(--bp-text); text-decoration: none; }
.bp-btn:disabled { opacity: .45; cursor: default; }

.bp-btn.primary {
  background: var(--bp-accent); border-color: transparent; color: var(--bp-on-accent);
  font-weight: 600;
}
.bp-btn.primary:hover { background: var(--bp-accent); filter: brightness(1.07); color: var(--bp-on-accent); }
.bp-btn.danger { background: transparent; border-color: var(--bp-border-strong); color: var(--bp-err); }
.bp-btn.danger:hover { background: color-mix(in srgb, var(--bp-err) 14%, transparent); color: var(--bp-err); }
.bp-btn.ghost { border-color: transparent; }
.bp-btn.ghost:hover { background: var(--bp-surface-2); }
.bp-btn.sm { padding: 4px 9px; font-size: 12px; }

.bp-field { margin-bottom: 14px; }
.bp-label { display: block; font-size: 12px; color: var(--bp-text-dim); margin-bottom: 4px; }
.bp-input, .bp-select, .bp-textarea {
  width: 100%;
  background: var(--bp-bg);
  color: var(--bp-text);
  border: 1px solid var(--bp-border-strong);
  border-radius: 6px;
  padding: 7px 9px;
  font: 13px var(--bp-font);
}
.bp-input:focus, .bp-select:focus, .bp-textarea:focus {
  outline: 2px solid var(--bp-link); outline-offset: -1px; border-color: transparent;
}
.bp-textarea { min-height: 72px; resize: vertical; font-family: var(--bp-mono); font-size: 12px; }
.bp-input-error { border-color: var(--bp-err); }
.bp-input-error:focus { outline-color: var(--bp-err); }

/* ---------------------------------------------------------------------------
   6. Badges & pills (semantic)
   --------------------------------------------------------------------------- */
.bp-badge {
  display: inline-block;
  font: 600 10px var(--bp-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--bp-border-strong);
  background: transparent; color: var(--bp-text-dim);
  white-space: nowrap;
}
.bp-badge.ok    { color: var(--bp-ok);   border-color: color-mix(in srgb, var(--bp-ok) 45%, transparent); }
.bp-badge.warn  { color: var(--bp-warn); border-color: color-mix(in srgb, var(--bp-warn) 45%, transparent); }
.bp-badge.err   { color: var(--bp-err);  border-color: color-mix(in srgb, var(--bp-err) 45%, transparent); }
.bp-badge.info  { color: var(--bp-info); border-color: color-mix(in srgb, var(--bp-info) 45%, transparent); }
.bp-badge.brand { color: var(--bp-accent); border-color: color-mix(in srgb, var(--bp-accent) 45%, transparent); }

.bp-pill {
  font: 10px var(--bp-mono); padding: 2px 9px; border-radius: 20px;
  border: 1px solid var(--bp-border-strong); white-space: nowrap;
}
.bp-pill.on   { color: var(--bp-ok);   border-color: color-mix(in srgb, var(--bp-ok) 45%, var(--bp-border-strong)); }
.bp-pill.off  { color: var(--bp-text-dim); }
.bp-pill.busy { color: var(--bp-accent); border-color: color-mix(in srgb, var(--bp-accent) 45%, var(--bp-border-strong)); }

/* LED status dot — instrumentatie */
.bp-led { width: 8px; height: 8px; border-radius: 50%; background: var(--bp-text-dim);
  display: inline-block; flex: none; }
.bp-led.on   { background: var(--bp-ok);     box-shadow: 0 0 7px var(--bp-ok); }
.bp-led.off  { background: var(--bp-err);    box-shadow: 0 0 7px var(--bp-err); }
.bp-led.warn { background: var(--bp-accent); box-shadow: 0 0 7px var(--bp-accent); }

/* ---------------------------------------------------------------------------
   7. Tables & key/value
   --------------------------------------------------------------------------- */
.bp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bp-table th {
  text-align: left; font: 500 11px var(--bp-font);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--bp-text-dim);
  padding: 7px 8px;
  border-bottom: 1px solid var(--bp-border);
  position: sticky; top: 0; background: var(--bp-surface); z-index: 1;
  /* kolomkoppen breken niet halverwege een woord uit hun vak ("GELA-DEN");
     te brede tabellen scrollen binnen hun kaart (zie .bp-card hieronder) */
  white-space: nowrap;
}
.bp-table td { padding: 7px 8px; border-bottom: 1px solid var(--bp-border); }
.bp-table tbody tr:hover { background: var(--bp-surface-2); }
.bp-table tbody tr.clickable { cursor: pointer; }
.bp-table .num { text-align: right; font-family: var(--bp-mono); font-size: 12.5px;
                 font-variant-numeric: tabular-nums; }

/* k/v-leesweergave op kaarten (curline-patroon uit de edge-guidelines) */
.bp-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; }
.bp-kv .k { color: var(--bp-text-dim); }
.bp-kv .v { font-family: var(--bp-mono); font-size: 12px; }

/* ---------------------------------------------------------------------------
   8. Chips, segmented control, keuzelijsten
   --------------------------------------------------------------------------- */
/* mode-chip: dé bewerk-trigger — kaart toont staat, bewerken achter de chip */
.bp-chip {
  font: 11px var(--bp-mono); color: var(--bp-text-dim);
  border: 1px solid var(--bp-border-strong); border-radius: 20px; padding: 3px 10px;
  background: transparent; display: inline-flex; align-items: center; gap: 5px;
}
button.bp-chip { cursor: pointer; }
button.bp-chip:hover { color: var(--bp-text); background: var(--bp-surface-2);
  border-color: var(--bp-text-dim); }
.bp-chip.active { color: var(--bp-accent); border-color: var(--bp-accent); }
.bp-chip .chev { font-size: 8px; opacity: .7; }

/* ---------------------------------------------------------------------------
   Eenlijnsschema (SLD) — de aansluiting als boom van assets.
   Bewust HTML+CSS in plaats van SVG: een SVG met vaste breedte paste op geen
   enkele site in zijn kaart (en schaalde onleesbaar op mobiel). Een boom breekt
   gewoon door, blijft leesbaar en groeit mee met het aantal takken.
   Nesting = "hangt hier elektrisch achter" — zo staat DC-PV onder de hybride
   omvormer en een legacy AC-omvormer als eigen tak op de aansluiting.
   --------------------------------------------------------------------------- */
.bp-sld { font-size: 12px; }
.bp-sld-trunk { margin-left: 9px; padding: 2px 0 6px 16px;
  border-left: 2px solid var(--bp-rail); display: flex; flex-direction: column; gap: 3px; }
.bp-sld-tree, .bp-sld-tree ul { list-style: none; margin: 0; padding: 0; }
.bp-sld-tree { margin-left: 9px; padding-left: 17px; border-left: 2px solid var(--bp-rail); }
.bp-sld-tree > li:last-child { position: relative; }
.bp-sld-tree li { position: relative; margin: 5px 0; }
.bp-sld-tree li::before { content: ''; position: absolute; left: -17px; top: 15px;
  width: 13px; height: 2px; background: var(--bp-rail); }
/* subtak = achter een omvormer/convertor, niet direct op de aansluiting */
.bp-sld-tree ul { margin: 5px 0 0 8px; padding-left: 17px;
  border-left: 2px dashed var(--bp-rail); }
.bp-sld-node { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
  border: 1px solid var(--bp-border); border-left: 3px solid var(--sld-accent, var(--bp-rail));
  border-radius: var(--bp-r-md); padding: 6px 9px; background: var(--bp-surface-2); }
.bp-sld-node .sub { color: var(--bp-text-dim); }
.bp-sld-node .val { font: 11px var(--bp-mono); color: var(--sld-accent, var(--bp-text)); }
/* Ⓜ = eigen energiemeter op die tak · ⌁ = afzekering */
.bp-sld-m { display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--ch-net);
  color: var(--ch-net); font: 700 10px var(--bp-mono); }
.bp-sld-a { font: 11px var(--bp-mono); color: var(--bp-accent); }
/* waarde die berust op een aanname i.p.v. een bron — stippellijn eronder, zodat
   je in één oogopslag ziet wat nog gevalideerd moet worden (C-Battery-modbus) */
.bp-sld-assumed { border-bottom: 1px dotted currentColor; cursor: help; }
/* annotatie óp de lijn (gedeelde afzekering/groepsmeter): geen toestelkader,
   want het is geen asset — het hangt in het bord vóór de groep */
.bp-sld-rail { display: flex; align-items: center; gap: 6px;
  margin: 2px 0 4px; font-size: 11px; color: var(--bp-text-dim); }
.bp-sld-tree li:has(> .bp-sld-rail)::before { top: 33px; }
.bp-sld-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.bp-seg { display: inline-flex; border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-md); overflow: hidden; flex-wrap: wrap; }
.bp-seg button {
  background: transparent; color: var(--bp-text-dim); border: 0; border-radius: 0;
  padding: 6px 13px; font: 500 12.5px var(--bp-font); cursor: pointer;
}
.bp-seg button + button { border-left: 1px solid var(--bp-border-strong); }
.bp-seg button.on { background: var(--bp-accent); color: var(--bp-on-accent); }

/* ---------------------------------------------------------------------------
   Periodekiezer — ‹ [ label 📅 ] › met een kalender-popover (bp.periodPicker).
   Drie zoomniveaus (dagen → maanden → jaren) achter dezelfde knop, zodat je
   met één control een dag, een maand of een jaar kiest.
   --------------------------------------------------------------------------- */
.bp-pick { display: inline-flex; align-items: stretch; gap: 6px; position: relative; }
.bp-pick-nav {
  background: var(--bp-surface-2); color: var(--bp-text-dim);
  border: 1px solid var(--bp-border-strong); border-radius: var(--bp-r-md);
  padding: 0 9px; cursor: pointer; font: 13px var(--bp-font); line-height: 1;
}
.bp-pick-nav:hover:not(:disabled) { color: var(--bp-text); border-color: var(--bp-rail); }
.bp-pick-nav:disabled { opacity: .35; cursor: default; }
.bp-pick-field {
  display: inline-flex; align-items: center; gap: 10px; min-width: 168px;
  justify-content: space-between;
  background: var(--bp-surface-2); color: var(--bp-text);
  border: 1px solid var(--bp-border-strong); border-radius: var(--bp-r-md);
  padding: 6px 11px; cursor: pointer; font: 500 12.5px var(--bp-font);
}
.bp-pick-field:hover:not(:disabled) { border-color: var(--bp-rail); }
.bp-pick-field:disabled { opacity: .5; cursor: default; }
.bp-pick-field .cal { color: var(--bp-text-dim); font-size: 13px; }

.bp-pop {
  position: absolute; z-index: 90; top: calc(100% + 6px); right: 0;
  min-width: 250px; padding: 10px;
  background: var(--bp-surface); border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-md); box-shadow: var(--bp-shadow-2);
}
.bp-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.bp-pop-head .zoom {
  background: transparent; border: 0; color: var(--bp-text); cursor: pointer;
  font: 600 12.5px var(--bp-font); padding: 3px 6px; border-radius: var(--bp-r-sm);
}
.bp-pop-head .zoom:hover { background: var(--bp-surface-2); }
.bp-pop-grid { display: grid; gap: 2px; }
.bp-pop-grid.days   { grid-template-columns: repeat(7, 1fr); }
.bp-pop-grid.months { grid-template-columns: repeat(4, 1fr); }
.bp-pop-grid.years  { grid-template-columns: repeat(4, 1fr); }
.bp-pop-dow {
  text-align: center; font: 11px var(--bp-mono); color: var(--bp-text-dim);
  padding-bottom: 4px;
}
.bp-pop-cell {
  background: transparent; border: 1px solid transparent; border-radius: var(--bp-r-sm);
  color: var(--bp-text); cursor: pointer; padding: 6px 4px;
  font: 12.5px var(--bp-font); text-align: center;
}
.bp-pop-grid.days .bp-pop-cell { padding: 5px 0; }
.bp-pop-cell:hover:not(:disabled) { background: var(--bp-surface-2); }
.bp-pop-cell.other { color: var(--bp-text-dim); opacity: .55; }
.bp-pop-cell.today { border-color: var(--bp-rail); }
.bp-pop-cell.on { background: var(--bp-accent); color: var(--bp-on-accent); font-weight: 650; }
.bp-pop-cell:disabled { opacity: .3; cursor: default; }

/* tijdvenster-kiezer: presets naast een eigen van/tot, zoals het dashboard
   waar service vandaan komt */
.bp-tr-pop { min-width: 460px; left: 0; right: auto; }
/* op smalle schermen zou een 460px-popover alsnog uit beeld lopen */
@media (max-width: 620px) {
  .bp-tr-pop { min-width: 0; width: min(92vw, 460px); }
}
.bp-tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .bp-tr-grid { grid-template-columns: 1fr; } }
.bp-tr-custom h3 { margin-bottom: 6px; }
.bp-tr-presets { display: flex; flex-direction: column; gap: 1px;
  max-height: 280px; overflow-y: auto; }
.bp-tr-presets button {
  background: transparent; border: 0; border-radius: var(--bp-r-sm);
  color: var(--bp-text); text-align: left; padding: 5px 8px; cursor: pointer;
  font: 12.5px var(--bp-font);
}
.bp-tr-presets button:hover { background: var(--bp-surface-2); }
.bp-tr-presets button.on { background: var(--bp-accent); color: var(--bp-on-accent); font-weight: 600; }

/* keuzelijst met een woordje uitleg per optie (instel-dialogen) */
.bp-strats { display: flex; flex-direction: column; gap: 3px; }
.bp-strats button {
  display: flex; gap: 10px; align-items: baseline; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 9px; color: var(--bp-text); width: 100%; cursor: pointer;
  font: 13px var(--bp-font);
}
.bp-strats button:hover { background: var(--bp-surface-2); }
.bp-strats button.on { border-color: var(--bp-accent);
  background: color-mix(in srgb, var(--bp-accent) 9%, transparent); }
.bp-strats .si { font: 700 13px var(--bp-mono); width: 15px; flex: none;
  color: var(--bp-accent); text-align: center; }
.bp-strats .t { font: 600 12.5px var(--bp-font); }
.bp-strats .d { font: 11px var(--bp-font); color: var(--bp-text-dim); line-height: 1.35; }

/* progress / usage bar */
.bp-bar { height: 8px; border-radius: 6px; background: var(--bp-surface-2);
  overflow: hidden; margin-top: 8px; border: 1px solid var(--bp-border); }
.bp-bar span { display: block; height: 100%; background: var(--bp-ok); }
.bp-bar span.warn { background: var(--bp-accent); }
.bp-bar span.hot  { background: var(--bp-err); }

.bp-notice {
  border: 1px solid color-mix(in srgb, var(--bp-accent) 45%, var(--bp-border-strong));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bp-accent) 8%, transparent);
  padding: 8px 11px; font-size: 12px; margin: 10px 0;
}

/* ---------------------------------------------------------------------------
   9. Dialogs (native), modal (legacy), toast, empty states, spinner
   --------------------------------------------------------------------------- */
/* instel-dialoog — één component, twee verschijningsvormen met dezelfde UX:
   gecentreerde modal op desktop/tablet, bottomsheet op mobiel (<640px) */
dialog.bp-dlg {
  background: var(--bp-surface); color: var(--bp-text);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-lg); padding: 0;
  width: min(430px, calc(100vw - 32px)); max-width: 100vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
dialog.bp-dlg::backdrop { background: var(--bp-scrim); backdrop-filter: blur(2px); }
.bp-dlg-grab { display: none; }
.bp-dlg-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px 11px;
  border-bottom: 1px solid var(--bp-border); }
.bp-dlg-hd b { font: 700 13px var(--bp-font); flex: 1; }
.bp-dlg-bd { padding: 13px 16px; max-height: min(62vh, 520px); overflow: auto;
  overscroll-behavior: contain; }   /* scroll eindigt ín het sheet, niet op de pagina */
.bp-dlg-ft { display: flex; gap: 8px; padding: 12px 16px 14px;
  border-top: 1px solid var(--bp-border); justify-content: flex-end; }
@media (max-width: 640px) {
  dialog.bp-dlg { width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0; }
  dialog.bp-dlg[open] { animation: bp-sheet-up .22s ease-out; }
  .bp-dlg-grab { display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--bp-border-strong); margin: 8px auto 0; }
  /* verticale veeg op grabber/kop is van óns (swipe-to-dismiss, bp.js
     _sheetDrag) — de browser mag daar niet scrollen of rubber-banden */
  .bp-dlg-grab, .bp-dlg-hd { touch-action: none; }
  /* de pagina achter het sheet muurvast: iOS-rubber-band liet het sheet
     anders "loskomen" van de onderrand (Barts mobiel-defect, 2026-08-15) */
  body:has(dialog.bp-dlg[open]) { overflow: hidden; }
  .bp-dlg-ft { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
@keyframes bp-sheet-up { from { transform: translateY(28px); opacity: .55; } }

/* bp.modal(): vrije-vorm-inhoud in dezelfde native dialog-component.
   .bp-modal is de binnenste inhoudslaag (de dialog draagt het paneel). */
dialog.bp-modal-host { width: min(560px, calc(100vw - 32px)); position: relative; }
dialog.bp-modal-host:has(.bp-modal.wide) { width: min(760px, calc(100vw - 32px)); }
dialog.bp-modal-host .bp-modal {
  padding: 18px 20px;
  max-height: min(80vh, 640px); overflow: auto;
}
.bp-modal-close {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--bp-text-dim);
  padding: 4px 8px; border-radius: var(--bp-r-sm);
}
.bp-modal-close:hover { background: var(--bp-surface-2); color: var(--bp-text); }

#bp-toast {
  /* inset/margin expliciet: als popover (top-layer, boven open dialogen —
     zie bp.toast) zou de UA-stylesheet hem anders centreren */
  position: fixed; inset: auto 18px 18px auto; margin: 0; z-index: 100;
  max-width: 380px;
  background: var(--bp-surface); color: var(--bp-text);
  border: 1px solid var(--bp-border-strong);
  font-size: 13px; padding: 11px 15px;
  border-radius: 8px;
  box-shadow: var(--bp-shadow-2);
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
#bp-toast.ok  { border-color: color-mix(in srgb, var(--bp-ok) 55%, transparent); }
#bp-toast.err { border-color: color-mix(in srgb, var(--bp-err) 55%, transparent); }

.bp-empty {
  text-align: center; color: var(--bp-text-dim);
  padding: 36px 16px; font-size: 13px;
}

.bp-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--bp-border-strong);
  border-top-color: var(--bp-accent);
  border-radius: 50%;
  animation: bp-spin .7s linear infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   10. Login page
   --------------------------------------------------------------------------- */
.bp-login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 460px at 85% -10%,
      color-mix(in srgb, var(--bp-accent) 9%, transparent), transparent),
    var(--bp-bg);
  padding: 16px;
}
.bp-login {
  width: min(380px, 100%);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-2);
  padding: 28px 26px;
}
.bp-login .mark {
  font: 700 13px var(--bp-mono); letter-spacing: .18em;
  color: var(--bp-accent); text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   11. Print — forceer de lichte tokenset, welk thema/kleurenschema er ook
   actief is: browsers drukken achtergronden niet af, dus een donker thema
   wordt anders lichte-tekst-op-wit (onleesbaar). Tokens-only (ADR-0045).
   Kanttekening: canvas-grafieken (Chart.js) drukken af zoals gerenderd — een
   donker canvas blijft donker; een echte rapport-/printflow met beforeprint-
   re-render is later werk als die behoefte komt.
   --------------------------------------------------------------------------- */
@media print {
  :root, html[data-bp-theme="bepowered"] {
    --bp-bg:            #ffffff;
    --bp-surface:       #ffffff;
    --bp-surface-2:     #f4f5f7;
    --bp-border:        #d5dae0;
    --bp-border-strong: #b8c0ca;
    --bp-text:          #16202b;
    --bp-text-dim:      #4c5866;
    --bp-rail:          #9aa6b3;
    --bp-shell-bg:      #ffffff;
    --bp-shell-text:    #16202b;
    --bp-muted:  #4c5866;
    --bp-muted-bg: #f4f5f7;
    --bp-shadow-1: none;
    --bp-shadow-2: none;
    --bp-scrim: transparent;
    --ch-sun:  #b8820a;
    --ch-use:  #2a7a4b;
    --ch-net:  #366bb8;
    --ch-use3: #b8506e;
    --ch-use4: #6a4ab3;
    --ch-lime: #5f7d1e;
  }
  /* accent & signalen: per thema de eigen líchte waarden */
  :root {
    --bp-accent: #b9791a;  --bp-on-accent: #12161c;
    --bp-link: #2b7de0;
    --bp-ok: #1f9d57;  --bp-warn: #b9791a;  --bp-err: #cf3439;  --bp-info: #2b7de0;
  }
  html[data-bp-theme="bepowered"] {
    --bp-accent: #106b3f;  --bp-on-accent: #ffffff;
    --bp-brand-500: #15cd72;  --bp-brand-600: #106b3f;
    --bp-link: #0b5fc0;
    --bp-ok: #26723f;  --bp-warn: #8a5203;  --bp-err: #ba0517;  --bp-info: #0b5fc0;
  }
}