/* Beheerscherm voor klantadmins ("Wie ziet wat") en het scherm "Je hebt nog geen
   toegang". Zelfde tokens en keuzecomponenten (.iv2-schakel, .iv2-filter, .btn) als de
   rest van de app; ontwerp: design-concepts/rechtenboom-klantadmin-toelichting.md.
   Alle klassen beginnen met bh- zodat ze niets uit style.css of inzichten2.css raken.
   Oranje alleen op de ene hoofdknop (Bewaar, Opnieuw controleren). */

#app.app-beheer {
  max-width: 60rem;
  padding-bottom: 8rem; /* ruimte onder de laatste rij voor de vaste bewaarbalk */
}

.bh-ico { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.bh-terug { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; color: var(--text-muted); font-size: 0.9375rem; text-decoration: none; padding: 0 0.5rem 0 0; }
.bh-terug:hover { color: var(--text-strong); }
.bh-terug .bh-ico { transform: rotate(180deg); }
.bh-terug:focus-visible { outline: 2px solid var(--focus); outline-offset: 0.1875rem; border-radius: 0.25rem; }
.bh-titel { font-family: var(--font-branding); font-weight: 800; font-size: 1.875rem; letter-spacing: -0.01em; color: var(--text-strong); margin: 0.25rem 0; }
.bh-intro { color: var(--text-muted); margin: 0 0 1.5rem; max-width: 40rem; }

.bh-zoekveld { position: relative; display: block; }
.bh-zoekveld .bh-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.bh-zoekveld input { width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: 0.5rem 1.25rem 0.5rem 2.75rem; border: 1px solid var(--ctl-border); border-radius: var(--radius-ctl); font: 1rem var(--font-body); background: var(--surface); color: var(--text); }
.bh-zoekveld input::placeholder { color: var(--text-muted); }
.bh-zoekveld input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0.1875rem; }
.bh-werkbalk { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 1rem; }
.bh-werkbalk .bh-zoekveld { flex: 1 1 14rem; }
.bh-meta { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 0.75rem; }

/* gebruikerslijst */
.bh-wacht { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: var(--surface-alt); border-radius: var(--radius); padding: 0.875rem 1.25rem; margin-bottom: 1rem; }
.bh-wacht .bh-ico { color: var(--text-strong); }
.bh-wacht p { margin: 0; flex: 1 1 14rem; color: var(--text-strong); }
.bh-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.bh-gebr { display: flex; align-items: center; gap: 1rem; width: 100%; box-sizing: border-box; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; min-height: 4.5rem; color: var(--text); text-decoration: none; }
.bh-gebr:hover { background: var(--surface-alt); }
.bh-gebr:focus-visible { outline: 2px solid var(--focus); outline-offset: 0.1875rem; }
.bh-gebr.bh-nieuw { border: 1.5px dashed var(--ctl-border); }
.bh-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-alt); color: var(--text-strong); display: grid; place-items: center; font: 600 0.9375rem var(--font-koppen); flex: none; }
.bh-gebr .bh-tekst { flex: 1; min-width: 0; }
.bh-naam { font: 600 1.0625rem var(--font-koppen); color: var(--text-strong); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.bh-upn { display: block; font-size: 0.875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.bh-bereik { display: block; font-size: 0.9375rem; margin-top: 0.125rem; color: var(--text); }
.bh-bereik .bh-ico { width: 1rem; height: 1rem; vertical-align: -0.1875rem; margin-right: 0.25rem; }
.bh-pil { display: inline-flex; align-items: center; gap: 0.25rem; font: 600 0.75rem/1 var(--font-body); padding: 0.25rem 0.5rem; border-radius: var(--radius-ctl); border: 1px solid var(--ctl-border); color: var(--text); background: transparent; white-space: nowrap; }
.bh-pil.bh-vol { background: var(--keuze-bg); color: var(--keuze-tekst); border-color: transparent; }
.bh-pil .bh-ico { width: 0.75rem; height: 0.75rem; stroke-width: 2; }
.bh-gebr > .bh-ico:last-child { color: var(--text-muted); }
.bh-leeg-res { text-align: center; color: var(--text-muted); padding: 2rem 1rem; }

/* detail: zijpaneel + bereik */
.bh-detail { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) { .bh-detail { grid-template-columns: 17rem 1fr; } .bh-zij { position: sticky; top: 1rem; } }
.bh-zij { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 1rem; }
.bh-kopje { display: flex; gap: 1rem; align-items: center; }
.bh-h2 { font-size: 1.25rem; margin: 0; }
.bh-zij .bh-upn { overflow-wrap: anywhere; }
.bh-h3 { font: 600 0.8125rem var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 0.5rem; }
.bh-zij .iv2-schakel { display: flex; }
.bh-zij .iv2-schakel button { flex: 1; }
.bh-zij .iv2-schakel button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.bh-hint { font-size: 0.875rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.bh-ziet { font: 700 1.5rem var(--font-koppen); color: var(--text-strong); }
.bh-ziet small { font: 400 0.9375rem var(--font-body); color: var(--text); }
.bh-balk { height: 0.5rem; border-radius: var(--radius-ctl); background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; margin-top: 0.5rem; }
.bh-balk i { display: block; height: 100%; background: var(--keuze-bg); }
.bh-melding { display: flex; gap: 0.75rem; background: var(--surface-alt); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--text-strong); }
.bh-melding .bh-ico { margin-top: 0.125rem; }
.bh-melding p { margin: 0; }
.bh-paneel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.bh-paneel > h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.bh-regel { color: var(--text-muted); font-size: 0.9375rem; margin: 0 0 1rem; }
.bh-keuzes { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.bh-groep { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bh-lab { font-size: 0.875rem; color: var(--text-muted); }
.bh-acties { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.bh-klein-knop { font-size: 0.875rem; padding: 0.5rem 1rem; }

/* boom */
ul.bh-boom, ul.bh-boom ul { list-style: none; margin: 0; padding: 0; }
ul.bh-boom ul { margin-left: 1.25rem; border-left: 1px solid var(--border); padding-left: 0.25rem; }
@media (max-width: 30rem) { ul.bh-boom ul { margin-left: 0.75rem; } .bh-paneel { padding: 1rem 0.75rem; } }
li.bh-knoop { outline: none; }
.bh-rij { display: flex; align-items: center; gap: 0.25rem; min-height: 3.5rem; border-radius: 0.5rem; padding: 0 0.25rem; }
.bh-rij:hover { background: var(--surface-alt); }
li.bh-knoop:focus-visible > .bh-rij { outline: 2px solid var(--focus); outline-offset: -2px; }
.bh-chev { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: 50%; padding: 0; }
.bh-chev .bh-ico { transition: transform 0.15s; }
.bh-chev[aria-expanded="true"] .bh-ico { transform: rotate(90deg); }
.bh-chev.bh-leeg { visibility: hidden; }
.bh-naamblok { flex: 1; min-width: 0; padding: 0.5rem 0; }
.bh-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2; }
.bh-nm { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; font: 600 1rem/1.3 var(--font-koppen); color: var(--text-strong); overflow-wrap: anywhere; }
.bh-sub { display: block; font-size: 0.875rem; color: var(--text-muted); line-height: 1.35; }
.bh-boom mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bh-uitz { border-style: dashed; font-size: 0.6875rem; }

/* schakelaar: drie standen aan / deels / uit; de stand staat in vorm (vinkje, streepje, leeg) én in tekst */
.bh-sw-knop { width: 3.5rem; height: 2.75rem; flex: none; display: grid; place-items: center; background: none; border: none; padding: 0; cursor: pointer; border-radius: var(--radius-ctl); }
.bh-sw { position: relative; width: 3rem; height: 1.75rem; box-sizing: border-box; border-radius: var(--radius-ctl); border: 1.5px solid var(--ctl-border); background: transparent; transition: background 0.12s; }
.bh-kn { position: absolute; top: 50%; left: 0.2rem; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; border-radius: 50%; background: var(--ctl-border); transition: left 0.12s; }
.bh-kn .bh-ico { display: none; width: 0.75rem; height: 0.75rem; stroke-width: 2.6; }
.bh-sw[data-stand="aan"], .bh-sw[data-stand="deels"] { background: var(--keuze-bg); border-color: transparent; }
.bh-sw[data-stand="aan"] .bh-kn { left: calc(100% - 1.325rem); background: var(--keuze-tekst); display: grid; place-items: center; }
.bh-sw[data-stand="deels"] .bh-kn { left: calc(50% - 0.5625rem); background: var(--keuze-tekst); display: grid; place-items: center; }
.bh-sw[data-stand="aan"] .bh-kn .bh-ico, .bh-sw[data-stand="deels"] .bh-kn .bh-ico { display: block; color: var(--keuze-bg); }

/* bewaarbalk (vast onderaan) en bevestiging */
.bh-bewaar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--ctl-border); }
.bh-bewaar[hidden] { display: none; }
.bh-binnen { max-width: 60rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.bh-wat { flex: 1 1 16rem; font-size: 0.9375rem; color: var(--text-strong); }
.bh-wat small { display: block; color: var(--text-muted); font-size: 0.875rem; }
.bh-fout { display: block; color: var(--text-strong); border-left: 3px solid var(--ctl-border); padding-left: 0.75rem; margin-bottom: 0.25rem; }
.bh-knoppen { display: flex; gap: 0.5rem; margin-left: auto; }
@media (max-width: 30rem) { .bh-knoppen { width: 100%; } .bh-knoppen .btn { flex: 1; } }
.bh-toast { position: fixed; left: 50%; bottom: 6.5rem; transform: translateX(-50%); z-index: 80; background: var(--keuze-bg); color: var(--keuze-tekst); border-radius: var(--radius-ctl); padding: 0.75rem 1.25rem; font-size: 0.9375rem; max-width: calc(100vw - 2rem); display: none; }
.bh-toast.bh-toast-open { display: block; }

/* nog geen toegang */
.bh-leegscherm { max-width: 32rem; margin: 3rem auto 0; text-align: center; padding: 0 0.5rem; }
.bh-icoon { width: 5rem; height: 5rem; border-radius: 50%; background: var(--surface-alt); display: grid; place-items: center; margin: 0 auto 1.5rem; color: var(--text-strong); }
.bh-icoon .bh-ico { width: 2.25rem; height: 2.25rem; stroke-width: 1.25; }
.bh-leegscherm h1 { font-family: var(--font-branding); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.bh-leegscherm p { color: var(--text); margin: 0 0 1rem; }
.bh-rij-knoppen { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.bh-leegscherm .bh-klein { font-size: 0.875rem; color: var(--text-muted); margin-top: 1.5rem; }