:root {
  /* Zijbalk: breedte per stand en de VASTE hoogte van elke rij. Die vaste hoogte is
     de kern van het in-/uitklappen: laat je de inhoud de hoogte bepalen, dan is een
     label (13px, met regelhoogte ~16px) nét hoger dan een icoontje (15px) en verspringt
     elk icoontje een paar pixels zodra de tekst verdwijnt. */
  --sidebar-w: 220px;
  --sidebar-w-min: 58px;
  --nav-row-h: 35px;
  --nav-section-h: 35px;
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* HET ACCENT VAN DE HUISSTIJL. Deze twee (en de twee tinten hieronder) zijn de enige plek waar
     de merkkleur staat; alles wat paars is hoort ernaar te verwijzen. Dat is niet alleen netheid:
     het is de voorwaarde om de huisstijl instelbaar te maken (een partner met een eigen kleur),
     want een injectie op :root bereikt alleen wat via de variabele loopt.
     Stond de kleur hardgecodeerd, dan volgt dat stuk scherm de instelling niet - en een half
     omgekleurde interface is erger dan geen instelling. */
  --sth-purple: #711C90;
  --sth-purple-light: #8B24B0;
  /* Twee tinten van hetzelfde accent, voor pilletjes, tabelkoppen en zachte vlakken. Als
     variabele en niet per plek uitgerekend: bij een ander accent moeten die mee, en rgba() met
     losse getallen (rgba(113,28,144,.10)) is precies wat dan achterblijft. */
  --sth-purple-soft: rgba(113,28,144,.10);
  --sth-purple-tint: #F4EAF8;
  --tab-tint: #F5EEFA;
  --sth-dark: #1A1C20;
  --sth-dark-2: #22262D;
  --sth-dark-3: #2C3038;
  --sth-dark-border: rgba(255,255,255,0.08);
  --bg: #F2F2F0;
  --surface: #FFFFFF;
  --surface-1: #F7F7F5;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --text: #1A1A18;
  --text-secondary: #6B6B67;
  --text-muted: #9A9A96;
  --visitor: #1a6fff;
  --visitor-bg: #e8f0ff;
  --member: #1a8a4a;
  --member-bg: #e6f4ec;
  --owner: #7b3fa0;
  --owner-bg: #f0e8f8;
  --danger: #c0392b;
  --success: #16a34a;
  --radius: 12px;
}
:root[data-theme="dark"] {
  --bg: #17181c;
  --surface: #1f2025;
  --surface-1: #26272d;
  --tab-tint: rgba(139,36,176,0.16);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #edeef0;
  --text-secondary: #b7b9be;
  --text-muted: #85878e;
  --visitor-bg: rgba(26,111,255,0.16);
  --member-bg: rgba(26,138,74,0.18);
  --owner-bg: rgba(123,63,160,0.2);
}
:root[data-theme="dark"] #login-screen {
  background:#F4EDFB;
  --bg:#F2F2F0; --surface:#FFFFFF; --surface-1:#F7F7F5;
  --border:rgba(0,0,0,0.08); --border-strong:rgba(0,0,0,0.14);
  --text:#1A1A18; --text-secondary:#6B6B67; --text-muted:#9A9A96;
}
:root[data-theme="dark"] .login-card { background:#FFFFFF; border-color:rgba(0,0,0,0.14); }
:root[data-theme="dark"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20533.2%20255.7%22%3E%3Cpath%20fill%3D%22%236b6c74%22%20d%3D%22M531.2,224.7h-11.7c-3.5,0-6.3-.9-8.1-2.8-1.9-1.9-2.8-4.6-2.8-8.1v-86.8c-.1-11.1-2.5-20.8-7.3-29.3-4.8-8.5-11.5-15.1-20-19.7-8.5-4.7-18.2-7-29.1-7s-23.9,3.1-33.8,9.2c-9.9,6.2-17.9,14.9-24,26.2V11.7C394.4,5.2,389.2,0,382.7,0h-70.8c-18.5,0-35.3,8.8-43.9,20.9-15.2,21.2-9.7,51.2,8.8,70-3.2-1.5-10.7-5.9-16.1-16.4h-21.5v-38.1c0-1.2-1-2.2-2.2-2.2h-15.1c-1.5,0-2.9.7-3.7,1.9-6.7,9.3-12,16.3-16,21-4.3,5-9.6,9.2-16,12.5-6.4,3.3-18.9,5-28.2,5h-2.4c-13.9,0-23.6,2.2-33.8,7.8-5.5,3-10.2,7.3-13.5,12.9,1.1-3.1,4.3-10.6,12.1-17.4-1.9-.8-3.9-1.4-6-2.1-10.5-3.2-22.5-4.8-36-4.8-23.3,0-41.5,4.7-54.9,14-13.3,9.3-20,22.9-20,40.7s2.6,20.4,7.9,27.3c5.2,6.9,11.5,12.1,18.9,15.7,7.4,3.6,17,7.3,28.8,11,9,3,16.1,5.6,21.3,7.8,5.2,2.2,9.5,5.2,12.9,9,3.4,3.8,5.1,8.5,5.1,14.2s-1.2,8.7-3.5,12.4c-2.3,3.7-5.8,6.7-10.3,8.9-4.6,2.2-10,3.3-16.2,3.3-9.1,0-18.1-2.7-27-8h0l-3.3-2.2c4.6-3.8,7.5-9.3,7.5-15.4,0-11.4-10.2-20.7-22.7-20.7S0,198.1,0,209.6s8.9,25,18.1,31.6c4.4,3.2,11.6,6.6,18.9,9,11.5,3.7,24.3,5.6,38.6,5.6s29.9-2.3,41.5-7c11.6-4.7,20.5-11.3,26.6-19.9,6.1-8.6,9.1-18.7,9.1-30.3s-2.8-20.6-8.4-27.6c-5.6-7-12.3-12.3-20.1-16-7.8-3.6-18-7.4-30.5-11.1-9.3-2.8-16.6-5.3-21.8-7.4-5.2-2.1-9.5-4.9-13-8.5-3.5-3.5-5.2-7.9-5.2-13.2s2.7-12.2,8.1-16.4c5.4-4.2,12.8-6.3,22.3-6.3s13.1,1.4,19.1,4.3c.9.5,2.4,1.2,3.4,1.7-1.9,4.2-3,9-3,14.3,0,11.4,10.2,20.7,22.7,20.7s22.7-9.2,22.7-20.7-2.4-8.3-2.4-8.3c2.8-.6,8.4-.8,11.8-.8h26.7l.9,98.4c0,9.7,2.4,18.7,7.1,26.9,4.7,8.3,11.5,14.9,20.4,19.8,8.9,5,19.2,7.4,31,7.4s28-4.2,37.4-12.7c9.1-8.2,15.2-21.1,18.3-38.5.2-.9-.5-1.8-1.3-1.9l-20.1-3.5c-.9-.2-1.8.5-1.9,1.4-2,12.9-8.8,19.3-20.5,19.3s-8.9-1.6-12.3-4.9c-3.4-3.2-5.1-7.6-5.1-13.1l-.9-98.7h56.3s0,0,0,0c0,0,0,0,0,0h.3,0c14.6-.1,26.2-8.1,26.2-23s-8.3-20.7-20.9-20.7-10.6,2.1-13,4.4c-8.9-12.7-4.8-22.7-.5-27.7,5-5.8,15.5-7.6,25.8-7.6h18.7c3.5,0,6.2.9,8,2.7,1.8,1.8,2.7,4.5,2.7,8v174.6c0,3.5-.9,6.2-2.7,8.1-1.8,1.9-4.5,2.8-8,2.8h-11.7c-1.1,0-2,.9-2,2v26.9c0,1.1.9,2,2,2h94.2c1.1,0,2-.9,2-2v-26.9c0-1.1-.9-2-2-2h-8.3c-3.5,0-6.2-.9-8-2.8-1.8-1.9-2.7-4.6-2.7-8.1v-53.7c0-19.9,3.3-34,9.8-42.2,6.6-8.2,14.9-12.3,25-12.3s14.8,2.9,19.4,8.6c4.6,5.8,6.9,13.9,6.9,24.5v75c0,3.5-.9,6.3-2.7,8.1-1.8,1.9-4.5,2.8-8.1,2.8h-8.2c-1.1,0-2,.9-2,2v26.8c0,1.1.9,2,2,2h94.6c1.1,0,2-.9,2-2v-26.8c0-1.1-.9-2-2-2Z%22%2F%3E%3C%2Fsvg%3E"); }
:root[data-theme="dark"] .content { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20533.2%20255.7%22%3E%3Cpath%20fill%3D%22%236b6c74%22%20fill-opacity%3D%220.05%22%20d%3D%22M531.2,224.7h-11.7c-3.5,0-6.3-.9-8.1-2.8-1.9-1.9-2.8-4.6-2.8-8.1v-86.8c-.1-11.1-2.5-20.8-7.3-29.3-4.8-8.5-11.5-15.1-20-19.7-8.5-4.7-18.2-7-29.1-7s-23.9,3.1-33.8,9.2c-9.9,6.2-17.9,14.9-24,26.2V11.7C394.4,5.2,389.2,0,382.7,0h-70.8c-18.5,0-35.3,8.8-43.9,20.9-15.2,21.2-9.7,51.2,8.8,70-3.2-1.5-10.7-5.9-16.1-16.4h-21.5v-38.1c0-1.2-1-2.2-2.2-2.2h-15.1c-1.5,0-2.9.7-3.7,1.9-6.7,9.3-12,16.3-16,21-4.3,5-9.6,9.2-16,12.5-6.4,3.3-18.9,5-28.2,5h-2.4c-13.9,0-23.6,2.2-33.8,7.8-5.5,3-10.2,7.3-13.5,12.9,1.1-3.1,4.3-10.6,12.1-17.4-1.9-.8-3.9-1.4-6-2.1-10.5-3.2-22.5-4.8-36-4.8-23.3,0-41.5,4.7-54.9,14-13.3,9.3-20,22.9-20,40.7s2.6,20.4,7.9,27.3c5.2,6.9,11.5,12.1,18.9,15.7,7.4,3.6,17,7.3,28.8,11,9,3,16.1,5.6,21.3,7.8,5.2,2.2,9.5,5.2,12.9,9,3.4,3.8,5.1,8.5,5.1,14.2s-1.2,8.7-3.5,12.4c-2.3,3.7-5.8,6.7-10.3,8.9-4.6,2.2-10,3.3-16.2,3.3-9.1,0-18.1-2.7-27-8h0l-3.3-2.2c4.6-3.8,7.5-9.3,7.5-15.4,0-11.4-10.2-20.7-22.7-20.7S0,198.1,0,209.6s8.9,25,18.1,31.6c4.4,3.2,11.6,6.6,18.9,9,11.5,3.7,24.3,5.6,38.6,5.6s29.9-2.3,41.5-7c11.6-4.7,20.5-11.3,26.6-19.9,6.1-8.6,9.1-18.7,9.1-30.3s-2.8-20.6-8.4-27.6c-5.6-7-12.3-12.3-20.1-16-7.8-3.6-18-7.4-30.5-11.1-9.3-2.8-16.6-5.3-21.8-7.4-5.2-2.1-9.5-4.9-13-8.5-3.5-3.5-5.2-7.9-5.2-13.2s2.7-12.2,8.1-16.4c5.4-4.2,12.8-6.3,22.3-6.3s13.1,1.4,19.1,4.3c.9.5,2.4,1.2,3.4,1.7-1.9,4.2-3,9-3,14.3,0,11.4,10.2,20.7,22.7,20.7s22.7-9.2,22.7-20.7-2.4-8.3-2.4-8.3c2.8-.6,8.4-.8,11.8-.8h26.7l.9,98.4c0,9.7,2.4,18.7,7.1,26.9,4.7,8.3,11.5,14.9,20.4,19.8,8.9,5,19.2,7.4,31,7.4s28-4.2,37.4-12.7c9.1-8.2,15.2-21.1,18.3-38.5.2-.9-.5-1.8-1.3-1.9l-20.1-3.5c-.9-.2-1.8.5-1.9,1.4-2,12.9-8.8,19.3-20.5,19.3s-8.9-1.6-12.3-4.9c-3.4-3.2-5.1-7.6-5.1-13.1l-.9-98.7h56.3s0,0,0,0c0,0,0,0,0,0h.3,0c14.6-.1,26.2-8.1,26.2-23s-8.3-20.7-20.9-20.7-10.6,2.1-13,4.4c-8.9-12.7-4.8-22.7-.5-27.7,5-5.8,15.5-7.6,25.8-7.6h18.7c3.5,0,6.2.9,8,2.7,1.8,1.8,2.7,4.5,2.7,8v174.6c0,3.5-.9,6.2-2.7,8.1-1.8,1.9-4.5,2.8-8,2.8h-11.7c-1.1,0-2,.9-2,2v26.9c0,1.1.9,2,2,2h94.2c1.1,0,2-.9,2-2v-26.9c0-1.1-.9-2-2-2h-8.3c-3.5,0-6.2-.9-8-2.8-1.8-1.9-2.7-4.6-2.7-8.1v-53.7c0-19.9,3.3-34,9.8-42.2,6.6-8.2,14.9-12.3,25-12.3s14.8,2.9,19.4,8.6c4.6,5.8,6.9,13.9,6.9,24.5v75c0,3.5-.9,6.3-2.7,8.1-1.8,1.9-4.5,2.8-8.1,2.8h-8.2c-1.1,0-2,.9-2,2v26.8c0,1.1.9,2,2,2h94.6c1.1,0,2-.9,2-2v-26.8c0-1.1-.9-2-2-2Z%22%2F%3E%3C%2Fsvg%3E"); }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Formulier-elementen erven het lettertype niet automatisch (browserstandaard is de
   systeemfont) - o.a. het hamburgermenu viel daardoor uit de huisstijl. */
button, input, select, textarea { font-family: var(--font-body); }
body {
  font-family: var(--font-body); background-color: var(--bg); color: var(--text); font-size: 14.5px; height: 100vh; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20533.2%20255.7%22%3E%3Cpath%20fill%3D%22%23711C90%22%20d%3D%22M531.2,224.7h-11.7c-3.5,0-6.3-.9-8.1-2.8-1.9-1.9-2.8-4.6-2.8-8.1v-86.8c-.1-11.1-2.5-20.8-7.3-29.3-4.8-8.5-11.5-15.1-20-19.7-8.5-4.7-18.2-7-29.1-7s-23.9,3.1-33.8,9.2c-9.9,6.2-17.9,14.9-24,26.2V11.7C394.4,5.2,389.2,0,382.7,0h-70.8c-18.5,0-35.3,8.8-43.9,20.9-15.2,21.2-9.7,51.2,8.8,70-3.2-1.5-10.7-5.9-16.1-16.4h-21.5v-38.1c0-1.2-1-2.2-2.2-2.2h-15.1c-1.5,0-2.9.7-3.7,1.9-6.7,9.3-12,16.3-16,21-4.3,5-9.6,9.2-16,12.5-6.4,3.3-18.9,5-28.2,5h-2.4c-13.9,0-23.6,2.2-33.8,7.8-5.5,3-10.2,7.3-13.5,12.9,1.1-3.1,4.3-10.6,12.1-17.4-1.9-.8-3.9-1.4-6-2.1-10.5-3.2-22.5-4.8-36-4.8-23.3,0-41.5,4.7-54.9,14-13.3,9.3-20,22.9-20,40.7s2.6,20.4,7.9,27.3c5.2,6.9,11.5,12.1,18.9,15.7,7.4,3.6,17,7.3,28.8,11,9,3,16.1,5.6,21.3,7.8,5.2,2.2,9.5,5.2,12.9,9,3.4,3.8,5.1,8.5,5.1,14.2s-1.2,8.7-3.5,12.4c-2.3,3.7-5.8,6.7-10.3,8.9-4.6,2.2-10,3.3-16.2,3.3-9.1,0-18.1-2.7-27-8h0l-3.3-2.2c4.6-3.8,7.5-9.3,7.5-15.4,0-11.4-10.2-20.7-22.7-20.7S0,198.1,0,209.6s8.9,25,18.1,31.6c4.4,3.2,11.6,6.6,18.9,9,11.5,3.7,24.3,5.6,38.6,5.6s29.9-2.3,41.5-7c11.6-4.7,20.5-11.3,26.6-19.9,6.1-8.6,9.1-18.7,9.1-30.3s-2.8-20.6-8.4-27.6c-5.6-7-12.3-12.3-20.1-16-7.8-3.6-18-7.4-30.5-11.1-9.3-2.8-16.6-5.3-21.8-7.4-5.2-2.1-9.5-4.9-13-8.5-3.5-3.5-5.2-7.9-5.2-13.2s2.7-12.2,8.1-16.4c5.4-4.2,12.8-6.3,22.3-6.3s13.1,1.4,19.1,4.3c.9.5,2.4,1.2,3.4,1.7-1.9,4.2-3,9-3,14.3,0,11.4,10.2,20.7,22.7,20.7s22.7-9.2,22.7-20.7-2.4-8.3-2.4-8.3c2.8-.6,8.4-.8,11.8-.8h26.7l.9,98.4c0,9.7,2.4,18.7,7.1,26.9,4.7,8.3,11.5,14.9,20.4,19.8,8.9,5,19.2,7.4,31,7.4s28-4.2,37.4-12.7c9.1-8.2,15.2-21.1,18.3-38.5.2-.9-.5-1.8-1.3-1.9l-20.1-3.5c-.9-.2-1.8.5-1.9,1.4-2,12.9-8.8,19.3-20.5,19.3s-8.9-1.6-12.3-4.9c-3.4-3.2-5.1-7.6-5.1-13.1l-.9-98.7h56.3s0,0,0,0c0,0,0,0,0,0h.3,0c14.6-.1,26.2-8.1,26.2-23s-8.3-20.7-20.9-20.7-10.6,2.1-13,4.4c-8.9-12.7-4.8-22.7-.5-27.7,5-5.8,15.5-7.6,25.8-7.6h18.7c3.5,0,6.2.9,8,2.7,1.8,1.8,2.7,4.5,2.7,8v174.6c0,3.5-.9,6.2-2.7,8.1-1.8,1.9-4.5,2.8-8,2.8h-11.7c-1.1,0-2,.9-2,2v26.9c0,1.1.9,2,2,2h94.2c1.1,0,2-.9,2-2v-26.9c0-1.1-.9-2-2-2h-8.3c-3.5,0-6.2-.9-8-2.8-1.8-1.9-2.7-4.6-2.7-8.1v-53.7c0-19.9,3.3-34,9.8-42.2,6.6-8.2,14.9-12.3,25-12.3s14.8,2.9,19.4,8.6c4.6,5.8,6.9,13.9,6.9,24.5v75c0,3.5-.9,6.3-2.7,8.1-1.8,1.9-4.5,2.8-8.1,2.8h-8.2c-1.1,0-2,.9-2,2v26.8c0,1.1.9,2,2,2h94.6c1.1,0,2-.9,2-2v-26.8c0-1.1-.9-2-2-2Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: bottom 16px right 16px;
  background-size: min(560px, 40vw) auto;
  background-attachment: fixed;
}
body.impersonating #app { padding-top:38px; }
h1, h2, h3, .sub-header h2, .detail-header h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing:-.01em; }

/* Login - Microsoft 365 stijl */
#login-screen {
  display:flex; align-items:center; justify-content:center; height:100vh; background-color: #F4EDFB; position:relative; overflow:hidden;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20533.2%20255.7%22%3E%3Cpath%20fill%3D%22%23711C90%22%20d%3D%22M531.2,224.7h-11.7c-3.5,0-6.3-.9-8.1-2.8-1.9-1.9-2.8-4.6-2.8-8.1v-86.8c-.1-11.1-2.5-20.8-7.3-29.3-4.8-8.5-11.5-15.1-20-19.7-8.5-4.7-18.2-7-29.1-7s-23.9,3.1-33.8,9.2c-9.9,6.2-17.9,14.9-24,26.2V11.7C394.4,5.2,389.2,0,382.7,0h-70.8c-18.5,0-35.3,8.8-43.9,20.9-15.2,21.2-9.7,51.2,8.8,70-3.2-1.5-10.7-5.9-16.1-16.4h-21.5v-38.1c0-1.2-1-2.2-2.2-2.2h-15.1c-1.5,0-2.9.7-3.7,1.9-6.7,9.3-12,16.3-16,21-4.3,5-9.6,9.2-16,12.5-6.4,3.3-18.9,5-28.2,5h-2.4c-13.9,0-23.6,2.2-33.8,7.8-5.5,3-10.2,7.3-13.5,12.9,1.1-3.1,4.3-10.6,12.1-17.4-1.9-.8-3.9-1.4-6-2.1-10.5-3.2-22.5-4.8-36-4.8-23.3,0-41.5,4.7-54.9,14-13.3,9.3-20,22.9-20,40.7s2.6,20.4,7.9,27.3c5.2,6.9,11.5,12.1,18.9,15.7,7.4,3.6,17,7.3,28.8,11,9,3,16.1,5.6,21.3,7.8,5.2,2.2,9.5,5.2,12.9,9,3.4,3.8,5.1,8.5,5.1,14.2s-1.2,8.7-3.5,12.4c-2.3,3.7-5.8,6.7-10.3,8.9-4.6,2.2-10,3.3-16.2,3.3-9.1,0-18.1-2.7-27-8h0l-3.3-2.2c4.6-3.8,7.5-9.3,7.5-15.4,0-11.4-10.2-20.7-22.7-20.7S0,198.1,0,209.6s8.9,25,18.1,31.6c4.4,3.2,11.6,6.6,18.9,9,11.5,3.7,24.3,5.6,38.6,5.6s29.9-2.3,41.5-7c11.6-4.7,20.5-11.3,26.6-19.9,6.1-8.6,9.1-18.7,9.1-30.3s-2.8-20.6-8.4-27.6c-5.6-7-12.3-12.3-20.1-16-7.8-3.6-18-7.4-30.5-11.1-9.3-2.8-16.6-5.3-21.8-7.4-5.2-2.1-9.5-4.9-13-8.5-3.5-3.5-5.2-7.9-5.2-13.2s2.7-12.2,8.1-16.4c5.4-4.2,12.8-6.3,22.3-6.3s13.1,1.4,19.1,4.3c.9.5,2.4,1.2,3.4,1.7-1.9,4.2-3,9-3,14.3,0,11.4,10.2,20.7,22.7,20.7s22.7-9.2,22.7-20.7-2.4-8.3-2.4-8.3c2.8-.6,8.4-.8,11.8-.8h26.7l.9,98.4c0,9.7,2.4,18.7,7.1,26.9,4.7,8.3,11.5,14.9,20.4,19.8,8.9,5,19.2,7.4,31,7.4s28-4.2,37.4-12.7c9.1-8.2,15.2-21.1,18.3-38.5.2-.9-.5-1.8-1.3-1.9l-20.1-3.5c-.9-.2-1.8.5-1.9,1.4-2,12.9-8.8,19.3-20.5,19.3s-8.9-1.6-12.3-4.9c-3.4-3.2-5.1-7.6-5.1-13.1l-.9-98.7h56.3s0,0,0,0c0,0,0,0,0,0h.3,0c14.6-.1,26.2-8.1,26.2-23s-8.3-20.7-20.9-20.7-10.6,2.1-13,4.4c-8.9-12.7-4.8-22.7-.5-27.7,5-5.8,15.5-7.6,25.8-7.6h18.7c3.5,0,6.2.9,8,2.7,1.8,1.8,2.7,4.5,2.7,8v174.6c0,3.5-.9,6.2-2.7,8.1-1.8,1.9-4.5,2.8-8,2.8h-11.7c-1.1,0-2,.9-2,2v26.9c0,1.1.9,2,2,2h94.2c1.1,0,2-.9,2-2v-26.9c0-1.1-.9-2-2-2h-8.3c-3.5,0-6.2-.9-8-2.8-1.8-1.9-2.7-4.6-2.7-8.1v-53.7c0-19.9,3.3-34,9.8-42.2,6.6-8.2,14.9-12.3,25-12.3s14.8,2.9,19.4,8.6c4.6,5.8,6.9,13.9,6.9,24.5v75c0,3.5-.9,6.3-2.7,8.1-1.8,1.9-4.5,2.8-8.1,2.8h-8.2c-1.1,0-2,.9-2,2v26.8c0,1.1.9,2,2,2h94.6c1.1,0,2-.9,2-2v-26.8c0-1.1-.9-2-2-2Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: bottom 16px right 16px;
  background-size: min(560px, 40vw) auto;
}
/* Feedback: smalle verticale tab rechtsonder (klein, valt niet over het STH-logo).
   Klik opent een gecentreerde pop-up met twee opties. Top-level, dus ook op het inlogscherm. */
#feedback-fab { position:fixed; right:0; bottom:96px; background:var(--sth-purple); color:#fff; writing-mode:vertical-rl; text-orientation:mixed; font-size:10.5px; font-weight:700; letter-spacing:2px; padding:11px 5px; border-radius:7px 0 0 7px; cursor:pointer; z-index:500; box-shadow:0 2px 10px rgba(0,0,0,.22); transition:padding-right .14s ease, background .14s; user-select:none; }
#feedback-fab:hover { padding-right:8px; background:var(--sth-purple-light, #8B24B0); }
#feedback-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:1000; align-items:center; justify-content:center; }
#feedback-modal.open { display:flex; }
/* De feedback-pop-up heeft drie standen (keuze / formulier / mijn meldingen); vandaar de
   flexibele breedte en de maximale hoogte met scrollend middendeel. */
.fb-card { background:var(--surface); border:0.5px solid var(--border-strong); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.28); width:360px; max-width:92vw; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; }
.fb-card.wide { width:560px; }
.fb-card h3 { font-size:16.5px; font-weight:600; margin:0; }
/* De FEEDBACK-pop-up staat los van de beheerschermen en mag daarom iets ruimer:
   grotere basistekst en meer regelafstand. Het Feedbackcentrum zelf blijft compact. */
.fb-card { font-size:14px; line-height:1.55; }
/* flex:1 + min-height:0 hoort erbij: in een flex-kolom staat min-height standaard op `auto`,
   waardoor een kind niet krimpt onder zijn inhoud. `overflow:auto` doet dan niets en de kaart
   wordt gewoon afgekapt door de max-height. */
.fb-card .fb-body { flex:1; min-height:0; overflow:auto; }
.fb-opt { display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; }
.fb-opt:hover { background:var(--surface-1); }
/* Zolang de feedback-pop-up openstaat is de gedeelde opslaan-balk onbereikbaar (die staat
   position:fixed op het venster, achter elke overlay) - dus verbergen. Zie CLAUDE.md. */
/* ── Kobus, de ingebouwde assistent (app-22) ──────────────────────────────────
   Rechtsonder, ABOVE de activiteiten-pil in beeld maar eronder in stapeling (pil = 1500):
   de pil meldt het resultaat van echte acties en mag nooit achter een gesprek verdwijnen.
   Schuift mee omhoog zodra de opslaan-balk zichtbaar wordt, zodat ze nooit overlappen -
   dezelfde afspraak als de pil, hier met :has() in plaats van een timer. */
#kobus-fab {
  position:fixed; right:18px; bottom:18px; z-index:1400;
  width:58px; height:58px; border-radius:50%; padding:0;
  background:var(--surface); border:0.5px solid var(--border-strong);
  box-shadow:0 8px 28px rgba(0,0,0,0.18); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:bottom .15s, transform .15s, box-shadow .15s;
}
#kobus-fab:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,0.24); }
/* Kobus staat gewoon onderin. Hij wijkt alleen als er iets ánders die hoek claimt, en die
   twee dingen zijn er meestal niet: de activiteiten-pil bestaat alleen zolang er een actie
   loopt (#ah-act-pill wordt aangemaakt en weer verwijderd), en de opslaan-balk alleen bij
   openstaande wijzigingen. Hem permanent hoog zetten voor een pil die er zelden is, maakt
   dat hij de rest van de dag in het niets zweeft. */
body:has(#ah-act-pill) #kobus-fab,
body:has(#ah-act-pill) #kobus-paneel { bottom:88px; }
body:has(.save-bar.visible) #kobus-fab,
body:has(.save-bar.visible) #kobus-paneel { bottom:80px; }
/* Allebei tegelijk: de pil schuift zelf al omhoog voor de balk, dus Kobus gaat daar nog
   eens bovenop. Deze regel staat laatst en wint dus van de twee hierboven. */
body:has(.save-bar.visible):has(#ah-act-pill) #kobus-fab,
body:has(.save-bar.visible):has(#ah-act-pill) #kobus-paneel { bottom:150px; }

/* Het figuurtje zelf. Kleuren uit de huisstijl, dus hij volgt de donkere modus mee. */
.kobus-fig .kobus-romp { fill:var(--sth-purple); }
.kobus-fig .kobus-arm rect { fill:var(--sth-purple); }
.kobus-fig .kobus-hoofd { fill:#F3C9A8; }
.kobus-fig .kobus-haar { fill:#4A3728; }
.kobus-fig .kobus-ogen circle { fill:#2B2B2B; }
.kobus-fig .kobus-bril circle { fill:none; stroke:#2B2B2B; stroke-width:1.6; }
.kobus-fig .kobus-bril path { stroke:#2B2B2B; stroke-width:1.6; fill:none; }
.kobus-fig .kobus-mond { stroke:#8A5A3B; stroke-width:1.6; fill:none; stroke-linecap:round; }
.kobus-fig .kobus-schaduw { fill:rgba(0,0,0,0.10); }

/* Leven: knipperen, licht deinen, zwaaien bij het openen, en een sneller ritme terwijl hij
   nadenkt. Alles puur versiering - zie de reduced-motion-regel onderaan dit blok. */
@keyframes kobus-knipper { 0%,92%,100% { transform:scaleY(1);} 95% { transform:scaleY(0.1);} }
@keyframes kobus-dein { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-1.5px);} }
@keyframes kobus-zwaai { 0%,100% { transform:rotate(0);} 25% { transform:rotate(-22deg);} 60% { transform:rotate(8deg);} }
.kobus-fig .kobus-ogen { animation:kobus-knipper 5.5s infinite; transform-origin:center 27px; }
.kobus-fig .kobus-lijf { animation:kobus-dein 3.4s ease-in-out infinite; }
#kobus-fab:hover .kobus-arm { animation:kobus-zwaai .7s ease-in-out; transform-origin:44px 44px; }
#kobus-fab.kobus-bezig .kobus-lijf { animation-duration:1.1s; }

/* Begroetingswolkje: één keer per sessie, klein, en het verdwijnt vanzelf. Het zweeft boven
   het figuurtje en schuift met dezelfde sprongen mee als de rest van die hoek. */
#kobus-wolkje {
  position:fixed; right:16px; bottom:84px; z-index:1450;
  max-width:230px; padding:9px 12px; cursor:pointer;
  background:var(--surface); border:0.5px solid var(--border-strong); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
  font-size:12.5px; line-height:1.45; color:inherit;
  transition:bottom .15s, opacity .35s, transform .35s;
  animation:kobus-wolk-in .35s ease-out;
}
/* Het staartje naar het figuurtje toe: twee driehoekjes, de buitenste in de randkleur,
   zodat de rand doorloopt in plaats van halverwege af te breken. */
#kobus-wolkje::after, #kobus-wolkje::before {
  content:''; position:absolute; right:20px; width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
}
#kobus-wolkje::before { bottom:-8px; border-top:8px solid var(--border-strong); }
#kobus-wolkje::after  { bottom:-7px; border-top:8px solid var(--surface); }
#kobus-wolkje.weg { opacity:0; transform:translateY(6px); }
@keyframes kobus-wolk-in { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
body:has(#ah-act-pill) #kobus-wolkje { bottom:154px; }
body:has(.save-bar.visible) #kobus-wolkje { bottom:146px; }
body:has(.save-bar.visible):has(#ah-act-pill) #kobus-wolkje { bottom:216px; }

#kobus-paneel {
  position:fixed; right:18px; bottom:18px; z-index:1600;
  width:400px; max-width:calc(100vw - 36px);
  height:min(62vh, 560px);
  background:var(--surface); border:0.5px solid var(--border-strong); border-radius:16px;
  box-shadow:0 18px 52px rgba(0,0,0,0.26);
  display:flex; flex-direction:column; overflow:hidden;
  transition:bottom .15s;
}
.kobus-kop { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:0.5px solid var(--border); flex-shrink:0; }
.kobus-kop-fig svg { width:34px; height:34px; display:block; }
.kobus-kop-tekst { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
/* De klantnaam staat er bewust bij: een assistent die over "deze klant" praat terwijl je
   niet ziet welke klant dat is, is een verwisseling die staat te wachten. */
.kobus-kop-sub { font-size:11.5px; color:var(--text-muted, #777); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kobus-x { margin-left:auto; background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--text-muted, #777); padding:0 4px; }

.kobus-beurten { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.kobus-leeg { color:var(--text-muted, #888); font-size:12.5px; line-height:1.5; }
/* Voorbeeldvragen: klikbaar, maar rustig - ze zijn een suggestie en geen actieknop. Ze
   vullen het invoerveld en versturen niet, zodat je de naam er nog in kunt zetten. */
.kobus-tips { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.kobus-tip {
  text-align:left; font:inherit; font-size:12.5px; line-height:1.4; cursor:pointer;
  padding:7px 10px; border-radius:10px; color:inherit;
  background:var(--surface-1); border:0.5px solid var(--border);
  transition:border-color .12s, background .12s;
}
.kobus-tip:hover { border-color:var(--sth-purple); background:var(--surface); }
.kobus-b { padding:8px 11px; border-radius:12px; max-width:88%; word-wrap:break-word; line-height:1.45; }
.kobus-ik { align-self:flex-end; background:var(--sth-purple); color:#fff; border-bottom-right-radius:4px; }
.kobus-hij { align-self:flex-start; background:var(--surface-1); border:0.5px solid var(--border); border-bottom-left-radius:4px; }
.kobus-fout { align-self:flex-start; background:rgba(200,60,60,0.10); border:0.5px solid rgba(200,60,60,0.35); }
.kobus-hij strong { font-weight:600; }
.kobus-hij code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; background:var(--surface); border:0.5px solid var(--border); border-radius:5px; padding:1px 4px; }
.kobus-bron { margin-top:6px; font-size:11px; color:var(--text-muted, #888); }
.kobus-denkt { display:flex; gap:4px; align-items:center; }
.kobus-denkt span { width:6px; height:6px; border-radius:50%; background:var(--text-muted, #999); animation:kobus-punt 1.2s infinite; }
.kobus-denkt span:nth-child(2) { animation-delay:.2s; }
.kobus-denkt span:nth-child(3) { animation-delay:.4s; }
@keyframes kobus-punt { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }

.kobus-invoer { display:flex; gap:8px; padding:10px 12px 6px; border-top:0.5px solid var(--border); flex-shrink:0; }
.kobus-invoer textarea { flex:1; resize:none; font:inherit; font-size:13px; padding:7px 9px; border-radius:9px; border:0.5px solid var(--border-strong); background:var(--surface); color:inherit; }
.kobus-voet { padding:0 12px 10px; font-size:10.5px; color:var(--text-muted, #999); flex-shrink:0; }

/* Beweging is versiering, geen informatie: wie 'm uit heeft staan krijgt een stil figuurtje. */
@media (prefers-reduced-motion: reduce) {
  .kobus-fig .kobus-ogen, .kobus-fig .kobus-lijf, .kobus-fig .kobus-arm,
  #kobus-fab:hover .kobus-arm, .kobus-denkt span, #kobus-wolkje { animation:none !important; }
  #kobus-fab:hover { transform:none; }
  /* Het wolkje verschijnt en verdwijnt dan zonder beweging - de tekst is de boodschap. */
  #kobus-wolkje { transition:opacity .2s; }
  #kobus-wolkje.weg { transform:none; }
}

body:has(#feedback-modal.open) .save-bar { display:none; }
body:has(#fb-detail-overlay) .save-bar { display:none; }

/* ── Serviceplannen binnen een licentie (app-16) ─────────────────────────────── */
/* Ingeklapt is dit één regel onder de licentie; uitgeklapt een compacte vinkjeslijst.
   Bewust ingesprongen en een maatje kleiner dan de licentieregel zelf, zodat duidelijk is
   dat het bij de licentie erboven hoort. */
.sp-blok { margin:2px 0 0 0; }
.sp-kop { display:flex; align-items:center; gap:6px; padding:4px 0 4px 2px; cursor:pointer; user-select:none; }
.sp-kop:hover .sp-kop-naam { color:var(--text); }
.sp-chev { flex-shrink:0; color:var(--text-muted); transition:transform .12s; }
.sp-kop-naam { font-size:11.5px; color:var(--text-muted); }
.sp-badge { font-size:10px; font-weight:600; border:0.5px solid var(--border); border-radius:999px; padding:1px 7px; white-space:nowrap; }
.sp-body { padding:4px 0 8px 17px; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 14px; }
.sp-hint { grid-column:1/-1; font-size:11px; color:var(--text-muted); line-height:1.5; margin-bottom:4px; }
.sp-rij { display:flex; align-items:center; gap:4px; min-width:0; cursor:pointer; }
.sp-rij:has(input:disabled) { cursor:default; }
.sp-naam { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-naam.off { color:var(--text-muted); }

/* ── Feedbackcentrum ─────────────────────────────────────────────────────────── */
.fb-badge { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:6px; vertical-align:1px; white-space:nowrap; }
.fb-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:0.5px solid var(--border); cursor:pointer; }
.fb-row:hover { background:var(--surface-1); }
.fb-row.sel { background:var(--surface-1); }
/* Tijdlijn: dunne lijn links met een bolletje per gebeurtenis. */
.fb-ev { position:relative; padding:0 0 16px 20px; border-left:2px solid var(--border); }
.fb-ev:last-child { border-left-color:transparent; padding-bottom:0; }
.fb-ev::before { content:''; position:absolute; left:-6px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--sth-purple); }
.fb-ev.intern::before { background:#b45309; }
.fb-ev.melder::before { background:#14b8a6; }
.login-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.login-card { position:relative; z-index:2; background: #FFFFFF; border: 1px solid rgba(113,28,144,0.10); border-radius: 16px; padding: 0; width: 440px; box-shadow: 0 24px 64px rgba(113,28,144,0.16), 0 4px 14px rgba(113,28,144,0.08); overflow:hidden; }

/* Dev-omgeving: onmiskenbaar amber uiterlijk. Aangezet via env-var APP_ENV=dev (zie env.js /
   40-accesshub-env.sh) -> app-02 zet de class .env-dev. Leeg/afwezig = productie (paars). */
.login-dev-badge { display:none; }
.env-pill { display:none; }
#login-screen.env-dev,
:root[data-theme="dark"] #login-screen.env-dev { background:#FBEBD5; }
#login-screen.env-dev .login-bg .lb-fill { fill:#FBEBD5; }
#login-screen.env-dev .login-bg .lb-main { stroke:#dd9022; }
#login-screen.env-dev .login-bg .lb-far,
#login-screen.env-dev .login-bg .lb-bush { stroke:#eecfa1; }
#login-screen.env-dev .login-dev-badge { display:inline-block; background:#F59E0B; color:#5A3608; font-size:11px; font-weight:700; letter-spacing:1.5px; padding:4px 12px; border-radius:6px; margin-bottom:18px; }
body.env-dev .env-pill { display:inline-flex; align-items:center; background:#F59E0B; color:#3D2606; font-size:10.5px; font-weight:700; letter-spacing:1.5px; padding:3px 9px; border-radius:6px; margin-left:10px; align-self:center; }
.login-top { padding: 44px 44px 8px; }
.login-card .sth-brand { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.login-card .sth-brand svg { height:46px; width:auto; }
.login-card h2 { font-size:24px; font-weight:600; color:#1B1B1B; margin-bottom:6px; letter-spacing:-.01em; }
.login-card p.sub { font-size:15px; color:#1B1B1B; margin-bottom:28px; }
.ms-signin-btn { width:100%; padding:0; background:#FFFFFF; color:#5E5E5E; border:1px solid #8C8C8C; border-radius:0; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:12px; height:41px; padding-left:1px; transition:background .1s; }
.ms-signin-btn:hover { background:#F3F2F1; }
.ms-signin-btn:active { background:#EDEBE9; }
.ms-signin-btn .ms-tiles { width:21px; height:21px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; margin-left:11px; flex-shrink:0; }
.ms-signin-btn .ms-tiles span { display:block; }
.login-divider { height:1px; background:#EDEBE9; margin:28px 0 0; }
.login-bottom { padding: 20px 44px 32px; }
.login-bottom p.hint { font-size:13px; color:#605E5C; line-height:1.5; }
.login-logo-text { font-size:18px; font-weight:700; color:white; letter-spacing:-.3px; }
.login-logo-sub { font-size:12px; color:rgba(255,255,255,0.4); margin-top:1px; }
.cfg-group { margin-bottom:12px; }
.cfg-group label { display:block; font-size:11px; font-weight:500; color:rgba(255,255,255,0.45); margin-bottom:5px; }
.cfg-group input { width:100%; padding:8px 12px; border:0.5px solid rgba(255,255,255,0.12); border-radius:var(--radius); font-size:12px; background:rgba(255,255,255,0.06); color:white; outline:none; font-family:monospace; }
.cfg-group input:focus { border-color:var(--sth-purple); }
.cfg-group input::placeholder { color:rgba(255,255,255,0.2); }
.btn-login { width:100%; padding:10px; background:var(--sth-purple); color:white; border:none; border-radius:var(--radius); font-size:13px; font-weight:600; cursor:pointer; margin-top:6px; transition:background .15s; }
.btn-login:hover { background:var(--sth-purple-light); }
.hint { font-size:11px; color:rgba(255,255,255,0.25); margin-top:16px; line-height:1.6; }
.hint code { background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; font-size:10px; }

/* App */
#app { display:none; height:100vh; flex-direction:column; }

/* Topbar */
.topbar { height:62px; background:var(--sth-dark); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 18px; column-gap:14px; flex-shrink:0; border-bottom:0.5px solid rgba(255,255,255,0.06); }
/* Het logo in index.html heeft een vast height-attribuut; hier overschrijven zodat de
   balk-hoogte en het logo samen op te schalen zijn zonder de HTML aan te raken. */
.topbar-brand svg { height:36px !important; width:auto; }
.topbar-left { display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-brand { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.sth-mark-sm { width:28px; height:28px; background:var(--sth-purple); border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:white; letter-spacing:-.3px; flex-shrink:0; }
.topbar-name { font-size:13px; font-weight:700; color:white; letter-spacing:-.2px; margin-left:4px; }
.topbar-divider { width:0.5px; height:18px; background:rgba(255,255,255,0.12); }
.topbar-right { justify-self:end; display:flex; align-items:center; gap:10px; }
.topbar-user { font-size:12.5px; color:rgba(255,255,255,0.55); }
.topbar-avatar { width:30px; height:30px; border-radius:50%; background:var(--sth-purple); color:white; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }

.topbar-icon-btn, #topbar-tenant-btn {
  height:38px; background:rgba(255,255,255,0.07); border:0.5px solid rgba(255,255,255,0.15); border-radius:11px;
  color:rgba(255,255,255,0.85); cursor:pointer; padding:0 12px; font-size:12.5px; font-weight:600; letter-spacing:.02em;
  outline:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .12s,color .12s;
  flex-shrink:0;
}
.topbar-icon-btn:hover, #topbar-tenant-btn:hover { background:rgba(255,255,255,0.13); color:white; }
#impersonate-btn.active-impersonate { background:#b45309; color:white; border-color:#b45309; }
#lang-select.topbar-icon-btn { width:64px; }
/* Overzicht-knop in de kopbalk: dezelfde vorm als de andere kopbalkknoppen, maar mét label -
   het is een plek waar je naartoe gaat, geen schakelaar. 'active' markeert dat je er nu bent;
   in de zijbalk deed het menu-item dat, en dat signaal hoort niet te verdwijnen bij de verhuizing. */
.topbar-overzicht-btn {
  height:38px; background:rgba(255,255,255,0.07); border:0.5px solid rgba(255,255,255,0.15); border-radius:11px;
  color:rgba(255,255,255,0.85); cursor:pointer; padding:0 12px; font-size:12.5px; font-weight:600; letter-spacing:.02em;
  outline:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:background .12s,color .12s;
  flex-shrink:0; font-family:inherit;
}
.topbar-overzicht-btn:hover { background:rgba(255,255,255,0.13); color:white; }
.topbar-overzicht-btn.active { background:rgba(255,255,255,0.18); color:white; border-color:rgba(255,255,255,0.3); }
#lang-select option { background:var(--sth-dark-2); color:white; }
/* Vierkante icoonknoppen (bel, hamburger, e.d.): vaste breedte = hoogte, geen padding-rek */
#home-btn.topbar-icon-btn, #dark-toggle-btn.topbar-icon-btn, #logout-btn.topbar-icon-btn, #impersonate-btn.topbar-icon-btn, #admin-panel-btn.topbar-icon-btn, #ann-bell-btn.topbar-icon-btn, #hamburger-btn.topbar-icon-btn { width:38px; padding:0; }
.hm-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; background:none; border:none; border-radius:8px; font-size:13px; color:var(--text); cursor:pointer; text-align:left; }
.hm-item:hover { background:var(--surface-1); }
.hm-item svg { width:15px; height:15px; flex-shrink:0; color:var(--text-muted); }
.hm-sep { height:0.5px; background:var(--border); margin:5px 6px; }
.hm-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:7px 12px 3px; }
.hm-pref-row { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; font-size:13px; color:var(--text); }
/* Sneltoetsen: leesregels, geen knoppen — er valt niets te klikken. Zelfde opbouw als in de
   docs-site, zodat de twee menu's er hetzelfde uitzien. */
.hm-keys { padding:2px 12px 6px; display:flex; flex-direction:column; gap:5px; }
.hm-keys div { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--text-muted); }
.hm-keys kbd { font-family:var(--font-mono, monospace); font-size:10.5px; background:var(--surface-1); border:0.5px solid var(--border-strong); border-radius:4px; padding:1px 6px; color:var(--text); }
.hm-lang-btn { font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; border:0.5px solid var(--border-strong); background:var(--surface); color:var(--text-secondary); cursor:pointer; }
.hm-lang-btn.active { background:var(--sth-purple); color:white; border-color:var(--sth-purple); }
.hm-version { display:block; width:100%; text-align:center; margin-top:2px; padding:6px; background:none; border:none; font-size:10.5px; color:var(--text-muted); cursor:pointer; border-radius:8px; }
.hm-version:hover { background:var(--surface-1); color:var(--text-secondary); }

/* Gecentreerde topbar-zoekbalk, zelfde stijl als de docs-site */
.topbar-search { width:min(440px,32vw); position:relative; }
.topbar-search input {
  width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.35);
  color:#fff; border-radius:9px; padding:10px 36px 10px 36px; font-size:13px; outline:none;
  font-family:inherit; transition:background .15s, border-color .15s;
}
.topbar-search input::placeholder { color:rgba(255,255,255,0.45); }
.topbar-search input:hover { border-color:rgba(255,255,255,0.55); }
.topbar-search input:focus { background:rgba(255,255,255,0.11); border-color:rgba(255,255,255,0.75); }
.topbar-search svg.ts-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:rgba(255,255,255,0.4); pointer-events:none; }
.topbar-search kbd { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:monospace; font-size:10px; color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.08); border-radius:4px; padding:2px 5px; pointer-events:none; }
.topbar-search-results {
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:0.5px solid var(--border-strong); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.18);
  max-height:360px; overflow-y:auto; z-index:200;
}
.topbar-search-results.open { display:block; }
.ts-result { display:block; padding:9px 14px; cursor:pointer; border-bottom:0.5px solid var(--border); }
.ts-result:last-child { border-bottom:none; }
.ts-result:hover, .ts-result.sel { background:var(--surface-1); }
.ts-result-cat { font-size:10px; font-weight:700; color:var(--sth-purple); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.ts-result-title { font-size:13px; font-weight:600; color:var(--text); }
.ts-result-sub { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.ts-empty { padding:16px 14px; font-size:12.5px; color:var(--text-muted); text-align:center; }

/* Main */
.main { display:flex; flex:1; overflow:hidden; }

/* Sidebar */
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--sth-dark); display:flex; flex-direction:column; border-right:0.5px solid rgba(255,255,255,0.06); transition:width .15s ease; overflow-y:auto; overflow-x:hidden; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.16) transparent; }
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
.sidebar:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.24); }
.sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.4); }
.nav-section { height:var(--nav-section-h); flex-shrink:0; display:flex; align-items:flex-end; padding:0 14px 6px; font-size:10px; font-weight:700; letter-spacing:.09em; color:rgba(255,255,255,0.45); text-transform:uppercase; }
/* Zonder icoontje: alle breedte is voor de klantnaam (die kan lang zijn). */
.sidebar-tenant { display:flex; align-items:center; gap:6px; flex-shrink:0; margin:2px 8px 8px; height:var(--nav-row-h); padding:0 11px; border-radius:10px; background:rgba(255,255,255,0.06); border:0.5px solid rgba(255,255,255,0.10); color:rgba(255,255,255,0.92); cursor:pointer; transition:background .12s; }
.sidebar-tenant:hover { background:rgba(255,255,255,0.13); }
.sidebar-tenant-name { flex:1; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-tenant-chev { width:13px; height:13px; flex-shrink:0; color:rgba(255,255,255,0.5); }
.nav-item { display:flex; align-items:center; gap:9px; flex-shrink:0; height:var(--nav-row-h); padding:0 12px; font-size:13px; color:rgba(255,255,255,0.75); cursor:pointer; border-radius:10px; margin:1px 8px; transition:all .12s; }
.nav-item:hover { background:rgba(255,255,255,0.09); color:rgba(255,255,255,0.95); }
.nav-item.active { background:var(--sth-purple); color:white; font-weight:600; }
.nav-item svg { width:15px; height:15px; flex-shrink:0; }
.nav-item > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-section { white-space:nowrap; overflow:hidden; }
.nav-dot { margin-left:auto; width:8px; height:8px; border-radius:50%; background:#f59e0b; flex-shrink:0; box-shadow:0 0 0 2px rgba(0,0,0,0.22); }
/* Teller-badge op een menu-item (openstaande meldingen in het Feedbackcentrum). Amber, net
   als het nav-dot en de Beta-badge: het vraagt aandacht maar is geen fout. Op een ACTIEF
   menu-item staat de badge op paars, dus daar wordt hij wit-op-transparant. */
.nav-count { margin-left:auto; flex-shrink:0; min-width:17px; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.02em; color:#fbbf24; background:rgba(251,191,36,0.15); border:0.5px solid rgba(251,191,36,0.34); border-radius:9px; padding:1px 5px; line-height:1.45; }
.nav-item.active .nav-count { color:#fff; background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.36); }
.nav-divider { height:0.5px; background:rgba(255,255,255,0.12); margin:8px 14px; }
.sidebar-version { padding:10px 16px 14px; font-size:10px; color:rgba(255,255,255,0.3); letter-spacing:.03em; }

/* Dashboard tegels */
.dash-tile { background:var(--surface); border:0.5px solid var(--border-strong); border-radius:var(--radius); padding:13px 15px; min-width:120px; position:relative; overflow:hidden; }
.nav-beta { margin-left:auto; flex-shrink:0; font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fbbf24; background:rgba(251,191,36,0.13); border:0.5px solid rgba(251,191,36,0.30); border-radius:5px; padding:1px 5px; }

/* ── Zijbalk in-/uitklappen ──────────────────────────────────────────────────
   Uitgangspunt: bij het omklappen verandert alléén de BREEDTE. Elke rij heeft een
   vaste hoogte (--nav-row-h / --nav-section-h), dus de icoontjes staan in beide
   standen op precies dezelfde hoogte. Verberg daarom nooit een hele rij, alleen de
   tekst erin. */
.sidebar-toggle {
  margin-top:auto; position:sticky; bottom:0; z-index:1;
  display:flex; align-items:center; gap:9px; height:calc(var(--nav-row-h) + 8px);
  padding:0 20px; background:var(--sth-dark); border-top:0.5px solid rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.5); font-size:12px; cursor:pointer; flex-shrink:0; user-select:none;
}
.sidebar-toggle:hover { color:rgba(255,255,255,0.92); background:rgba(255,255,255,0.05); }
.sidebar-toggle svg { width:14px; height:14px; flex-shrink:0; transition:transform .15s ease; }

body.sidebar-collapsed .sidebar { width:var(--sidebar-w-min); }
body.sidebar-collapsed .save-bar { left:var(--sidebar-w-min); }
/* Alleen de tekst verdwijnt; de rij blijft even hoog. */
body.sidebar-collapsed .nav-item > span,
body.sidebar-collapsed .sidebar-tenant-name,
body.sidebar-collapsed .sidebar-tenant-chev,
body.sidebar-collapsed .nav-beta,
body.sidebar-collapsed .sidebar-toggle > span { display:none; }
body.sidebar-collapsed .nav-item { justify-content:center; gap:0; padding:0; position:relative; }
body.sidebar-collapsed .sidebar-toggle { justify-content:center; padding:0; }
body.sidebar-collapsed .sidebar-toggle svg { transform:rotate(180deg); }
/* Sectiekop houdt zijn hoogte, maar toont een streepje in plaats van tekst. */
body.sidebar-collapsed .nav-section { font-size:0; padding:0; align-items:center; justify-content:center; }
body.sidebar-collapsed .nav-section::after { content:''; width:20px; height:1px; background:rgba(255,255,255,0.20); border-radius:1px; }
/* Signalen blijven zichtbaar als stip op het icoon: een oranje bolletje (bijv.
   Bedrijfsgegevens) en de teller van het Feedbackcentrum. */
body.sidebar-collapsed .nav-dot { position:absolute; top:4px; right:7px; margin:0; width:7px; height:7px; }
body.sidebar-collapsed .nav-count {
  position:absolute; top:3px; right:6px; margin:0; min-width:0; width:9px; height:9px;
  padding:0; border-radius:50%; font-size:0; line-height:0; overflow:hidden;
}
/* Klantregel: de initialen van de klantnaam (data-abbr) in plaats van de volledige naam. */
body.sidebar-collapsed .sidebar-tenant { justify-content:center; padding:0; }
body.sidebar-collapsed .sidebar-tenant::before { content:attr(data-abbr); font-size:11px; font-weight:700; letter-spacing:.04em; }
.dash-beta-ribbon { position:absolute; top:14px; right:-24px; transform:rotate(45deg); background:#f59e0b; color:white; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 26px; box-shadow:0 1px 3px rgba(0,0,0,0.18); pointer-events:none; }
.dash-tile::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent, var(--sth-purple)); }
.dash-tile-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:8px; background:var(--accent-bg, #faf5ff); color:var(--accent, var(--sth-purple)); }
.dash-tile-icon svg { width:15px; height:15px; }
.dash-tile-num { font-size:21px; font-weight:800; font-family:var(--font-heading); color:var(--sth-purple); }
.dash-tile-lbl { font-size:11px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }
.dash-tile-wide { min-width:280px; }

/* Content area */
.content {
  flex:1; display:flex; flex-direction:column; overflow:hidden; background-color:var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20533.2%20255.7%22%3E%3Cpath%20fill%3D%22%23711C90%22%20fill-opacity%3D%220.05%22%20d%3D%22M531.2,224.7h-11.7c-3.5,0-6.3-.9-8.1-2.8-1.9-1.9-2.8-4.6-2.8-8.1v-86.8c-.1-11.1-2.5-20.8-7.3-29.3-4.8-8.5-11.5-15.1-20-19.7-8.5-4.7-18.2-7-29.1-7s-23.9,3.1-33.8,9.2c-9.9,6.2-17.9,14.9-24,26.2V11.7C394.4,5.2,389.2,0,382.7,0h-70.8c-18.5,0-35.3,8.8-43.9,20.9-15.2,21.2-9.7,51.2,8.8,70-3.2-1.5-10.7-5.9-16.1-16.4h-21.5v-38.1c0-1.2-1-2.2-2.2-2.2h-15.1c-1.5,0-2.9.7-3.7,1.9-6.7,9.3-12,16.3-16,21-4.3,5-9.6,9.2-16,12.5-6.4,3.3-18.9,5-28.2,5h-2.4c-13.9,0-23.6,2.2-33.8,7.8-5.5,3-10.2,7.3-13.5,12.9,1.1-3.1,4.3-10.6,12.1-17.4-1.9-.8-3.9-1.4-6-2.1-10.5-3.2-22.5-4.8-36-4.8-23.3,0-41.5,4.7-54.9,14-13.3,9.3-20,22.9-20,40.7s2.6,20.4,7.9,27.3c5.2,6.9,11.5,12.1,18.9,15.7,7.4,3.6,17,7.3,28.8,11,9,3,16.1,5.6,21.3,7.8,5.2,2.2,9.5,5.2,12.9,9,3.4,3.8,5.1,8.5,5.1,14.2s-1.2,8.7-3.5,12.4c-2.3,3.7-5.8,6.7-10.3,8.9-4.6,2.2-10,3.3-16.2,3.3-9.1,0-18.1-2.7-27-8h0l-3.3-2.2c4.6-3.8,7.5-9.3,7.5-15.4,0-11.4-10.2-20.7-22.7-20.7S0,198.1,0,209.6s8.9,25,18.1,31.6c4.4,3.2,11.6,6.6,18.9,9,11.5,3.7,24.3,5.6,38.6,5.6s29.9-2.3,41.5-7c11.6-4.7,20.5-11.3,26.6-19.9,6.1-8.6,9.1-18.7,9.1-30.3s-2.8-20.6-8.4-27.6c-5.6-7-12.3-12.3-20.1-16-7.8-3.6-18-7.4-30.5-11.1-9.3-2.8-16.6-5.3-21.8-7.4-5.2-2.1-9.5-4.9-13-8.5-3.5-3.5-5.2-7.9-5.2-13.2s2.7-12.2,8.1-16.4c5.4-4.2,12.8-6.3,22.3-6.3s13.1,1.4,19.1,4.3c.9.5,2.4,1.2,3.4,1.7-1.9,4.2-3,9-3,14.3,0,11.4,10.2,20.7,22.7,20.7s22.7-9.2,22.7-20.7-2.4-8.3-2.4-8.3c2.8-.6,8.4-.8,11.8-.8h26.7l.9,98.4c0,9.7,2.4,18.7,7.1,26.9,4.7,8.3,11.5,14.9,20.4,19.8,8.9,5,19.2,7.4,31,7.4s28-4.2,37.4-12.7c9.1-8.2,15.2-21.1,18.3-38.5.2-.9-.5-1.8-1.3-1.9l-20.1-3.5c-.9-.2-1.8.5-1.9,1.4-2,12.9-8.8,19.3-20.5,19.3s-8.9-1.6-12.3-4.9c-3.4-3.2-5.1-7.6-5.1-13.1l-.9-98.7h56.3s0,0,0,0c0,0,0,0,0,0h.3,0c14.6-.1,26.2-8.1,26.2-23s-8.3-20.7-20.9-20.7-10.6,2.1-13,4.4c-8.9-12.7-4.8-22.7-.5-27.7,5-5.8,15.5-7.6,25.8-7.6h18.7c3.5,0,6.2.9,8,2.7,1.8,1.8,2.7,4.5,2.7,8v174.6c0,3.5-.9,6.2-2.7,8.1-1.8,1.9-4.5,2.8-8,2.8h-11.7c-1.1,0-2,.9-2,2v26.9c0,1.1.9,2,2,2h94.2c1.1,0,2-.9,2-2v-26.9c0-1.1-.9-2-2-2h-8.3c-3.5,0-6.2-.9-8-2.8-1.8-1.9-2.7-4.6-2.7-8.1v-53.7c0-19.9,3.3-34,9.8-42.2,6.6-8.2,14.9-12.3,25-12.3s14.8,2.9,19.4,8.6c4.6,5.8,6.9,13.9,6.9,24.5v75c0,3.5-.9,6.3-2.7,8.1-1.8,1.9-4.5,2.8-8.1,2.8h-8.2c-1.1,0-2,.9-2,2v26.8c0,1.1.9,2,2,2h94.6c1.1,0,2-.9,2-2v-26.8c0-1.1-.9-2-2-2Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: bottom 16px right 16px;
  background-size: min(400px, 30vw) auto;
}

/* Sub-header */
.sub-header { height:56px; background:var(--surface); border-bottom:0.5px solid var(--border-strong); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
/* Alle knoppen in de kopbalk gelijk van maat, ongeacht per-pagina inline styles
   (Logboek/Auditlog/Contacten gaven hun knoppen eigen padding/font-size mee).
   Vierkante icoon-knoppen (help, verversen) zijn uitgezonderd: die krijgen hun
   exacte maat via JS (injectHelpButton), gelijk aan de standaard-knophoogte. */
.sub-header .btn:not(.icon-square) { padding:8px 16px !important; font-size:13.5px !important; }
.sub-header .btn.icon-square { justify-content:center; flex-shrink:0; }
.sub-header h2 { font-size:19px; font-weight:700; flex:1; color:var(--sth-purple); }


/* Two-pane layout */
.two-pane { display:flex; flex:1; overflow:hidden; }
.list-pane { width:300px; flex-shrink:0; background:var(--surface); border-right:0.5px solid var(--border-strong); overflow-y:auto; display:flex; flex-direction:column; }
.list-pane-title { padding:10px 14px 6px; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; flex-shrink:0; }
.list-item { display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:13px; color:var(--text-secondary); cursor:pointer; border-bottom:0.5px solid var(--border); transition:background .1s; }
.list-item:hover { background:var(--surface-1); }
.list-item.active { background:#F5EBF9; color:var(--sth-purple); font-weight:500; border-left:2px solid var(--sth-purple); padding-left:12px; }
.list-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.list-count { margin-left:auto; font-size:10px; font-weight:600; background:var(--bg); border:0.5px solid var(--border-strong); border-radius:10px; padding:1px 6px; color:var(--text-muted); }
.list-item.active .list-count { background:#E8D0F2; border-color:var(--sth-purple); color:var(--sth-purple); }
/* Meervoudige selectie (Ctrl/Cmd- of Shift-klik in de gebruikerslijst). Bewust rustiger
   dan .active: 'actief' is het item dat het detailpaneel vult, 'sel' zijn de items waar
   een bulk-actie op gaat werken. Twee verschillende dingen, dus twee accenten. */
/* Meervoudige selectie: dezelfde markering in de gebruikerslijst (.list-item) en de
   postvakkenlijst (.site-item) - twee lijsten die er hetzelfde uitzien horen ook hetzelfde
   te reageren. */
.list-item.sel, .site-item.sel { background:#EFF6FF; box-shadow:inset 3px 0 0 #2563EB; }
.site-item.sel:hover { background:#E4EEFD; }
.site-item.sel.active { background:#F0EDFA; box-shadow:inset 3px 0 0 #2563EB; }
.list-item.sel:hover { background:#E4EEFD; }
.list-item.sel.active { background:#F0EDFA; box-shadow:inset 3px 0 0 #2563EB; }
.list-icon { color:var(--text-muted); flex-shrink:0; }

/* Detail pane */
.detail-pane { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.detail-scroll { flex:1; overflow-y:auto; min-height:0; }
.detail-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); font-size:13px; }
.detail-empty svg { opacity:.3; }

/* Detail header */
.detail-header { background:var(--surface); border-bottom:0.5px solid var(--border-strong); padding:14px 20px; display:flex; align-items:center; gap:14px; flex-shrink:0; }
.role-avatar { width:38px; height:38px; border-radius:50%; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.detail-header h3 { font-size:18px; font-weight:700; color:var(--sth-purple); }
.detail-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.stat-pills { display:flex; gap:8px; margin-left:auto; }
.stat-pill { display:flex; flex-direction:column; align-items:center; background:var(--surface-1); border:0.5px solid var(--border-strong); border-radius:var(--radius); padding:5px 14px; min-width:68px; }
.stat-pill .num { font-size:17px; font-weight:700; color:var(--text); }
.stat-pill .lbl { font-size:10px; color:var(--text-muted); margin-top:1px; }

/* Tabs */
.detail-tabs { background:var(--surface); border-bottom:0.5px solid var(--border-strong); display:flex; padding:0 20px; flex-shrink:0; }
.dtab { padding:10px 14px; font-size:13px; font-weight:500; color:var(--text-secondary); border:none; background:none; border-bottom:2px solid transparent; cursor:pointer; margin-bottom:-1px; }
.dtab-count { display:inline-block; font-size:10.5px; font-weight:700; color:var(--text-muted); background:var(--surface-1); border-radius:8px; padding:1px 7px; margin-left:4px; }
.dtab.active .dtab-count { color:var(--sth-purple); background:#f3e8ff; }
.dtab:hover { color:var(--text); }
.dtab.active { color:var(--sth-purple); border-bottom-color:var(--sth-purple); }
/* Categorie-tabs met een sub-rij eronder: de actieve categorie krijgt een licht paarse
   arcering die doorloopt in de sub-rij, zodat je ziet bij welk hoofditem het submenu hoort. */
.dtab-cat.active { background:var(--tab-tint); border-bottom-color:transparent; border-radius:9px 9px 0 0; }
.detail-tabs.sub-row { background:var(--tab-tint); border-top:none; }

/* Body */
.detail-body { flex:1; overflow-y:auto; padding:20px; }
/* Teller-badge in tabkoppen (Leden/Functierollen bij Teams en Gedeelde mailboxen) */
.dtab-badge { display:inline-block; margin-left:6px; font-size:10px; font-weight:700; color:var(--text-muted); background:var(--bg); border:0.5px solid var(--border-strong); border-radius:10px; padding:1px 7px; min-width:20px; text-align:center; vertical-align:1px; }
.dtab.active .dtab-badge { color:var(--sth-purple); border-color:rgba(113,28,144,0.35); background:rgba(113,28,144,0.08); }
.pb { padding-bottom:64px; }
/* Opslaan-balk zichtbaar (body-klasse via observer in app-08).
   De balk staat position:fixed onderaan het venster en dekte daarmee het ONDERSTE item van
   een scrollende lijst af - niet alleen slecht leesbaar maar ook niet meer aanklikbaar. Wie
   een groep leegruimde kwam bij de laatste persoon dus niet.
   Hier stond eerder alleen extra bodemruimte op .detail-body en .perms-body; élke andere
   scrollende lijst (de groepenlijst, de leden van een groep, de gebruikerslijst) viel
   daarbuiten. Nu op .content zelf: de balk begint precies bij de zijbalk, dus dit is exact
   het gebied dat hij afdekt, en alles wat daarbinnen scrolt eindigt automatisch boven de
   balk. Eén regel die niet uit de pas kan lopen met de balk of met een nieuw scherm.
   Pop-ups vallen hier bewust buiten: die krijgen volgens het huispatroon hun eigen balk ín
   de pop-up, en regelen hun bodemruimte zelf. */
:root { --save-bar-h:64px; }
body.savebar-open .content { padding-bottom:var(--save-bar-h); }

.three-pane { display:flex; flex:1; overflow:hidden; }
.col-sites { width:300px; flex-shrink:0; background:var(--surface); border-right:0.5px solid var(--border-strong); display:flex; flex-direction:column; overflow:hidden; }
.col-roles { width:240px; flex-shrink:0; background:var(--surface-1); border-right:0.5px solid var(--border-strong); display:flex; flex-direction:column; overflow:hidden; }
.col-perms { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.col-empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13px; flex-direction:column; gap:10px; }
.col-empty svg { opacity:.25; }
.col-header { padding:11px 14px; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; border-bottom:0.5px solid var(--border); flex-shrink:0; background:var(--surface-1); }
.site-item { display:flex; align-items:center; gap:9px; padding:10px 14px; font-size:13px; color:var(--text-secondary); cursor:pointer; border-bottom:0.5px solid var(--border); transition:background .1s; }
.site-item:hover { background:var(--surface-1); }
.site-item.active { background:#F5EBF9; color:var(--sth-purple); font-weight:500; border-left:2px solid var(--sth-purple); padding-left:12px; }
.site-item svg { flex-shrink:0; }
/* Hub-label achter de sitenaam: paars als de site zélf een hub is, grijs met de hubnaam
   als de site op een hub is aangesloten. */
.site-hub-badge { flex-shrink:0; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:5px; background:var(--surface-1); border:0.5px solid var(--border-strong); color:var(--text-muted); }
.site-hub-badge.is-hub { background:#F5EBF9; border-color:transparent; color:var(--sth-purple); }
.site-item.active .site-hub-badge { background:var(--surface); }

/* ── "Wordt aangemaakt"-rij ───────────────────────────────────────────────────
   Een net aangemaakt object bestaat pas seconden tot minuten later echt in Exchange/
   Entra. Tot die tijd staat het gedimd en niet-klikbaar in de lijst (ahPendingRowHtml,
   app-04). Duurt het langer dan de poll-lus volhoudt, dan gaat de rij naar .traag:
   niet weghalen met een geruststellende tekst die we niet kunnen waarmaken, maar amber
   tonen met een eigen controleer-linkje. */
.list-item.pending, .site-item.pending { opacity:.6; cursor:default; }
.list-item.pending:hover, .site-item.pending:hover { background:transparent; }
.list-item.pending .dash-spinner, .site-item.pending .dash-spinner { width:12px; height:12px; border-width:2px; flex-shrink:0; }
.ah-pending-naam { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ah-pending-label { flex-shrink:0; margin-left:auto; font-size:10px; font-style:italic; color:var(--text-muted); }
.list-item.pending.traag, .site-item.pending.traag { opacity:1; background:#FFFBEB; }
.pending.traag .ah-pending-label { color:#b45309; font-style:normal; }
.ah-pending-bang { flex-shrink:0; width:14px; height:14px; border-radius:50%; background:#b45309; color:#fff; font-size:10px; font-weight:700; line-height:14px; text-align:center; }
.ah-pending-link { color:#b45309; text-decoration:underline; cursor:pointer; }

.perms-body { flex:1; overflow-y:auto; padding:16px; }
.perms-section-title { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin:0 0 8px; }
.perms-section { margin-bottom:20px; }

/* Member rows */
.member-card { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface); border-radius:var(--radius); border:0.5px solid var(--border); margin-bottom:6px; }
.member-av { width:32px; height:32px; border-radius:50%; background:#F5EBF9; color:var(--sth-purple); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.member-name { font-size:13px; font-weight:500; }
.member-mail { font-size:11px; color:var(--text-muted); }

/* User role badge */
.role-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; background:#F5EBF9; color:var(--sth-purple); border:0.5px solid rgba(113,28,144,0.2); }

/* SP table */
.sp-wrap { background:var(--surface); border:0.5px solid var(--border-strong); border-radius:12px; overflow:hidden; }
.sp-thead { display:grid; grid-template-columns:1fr 90px 90px 90px; background:var(--surface-1); border-bottom:0.5px solid var(--border-strong); }
.sp-thead div { padding:8px 12px; font-size:11px; font-weight:600; color:var(--text-muted); }
.sp-thead .ch-v { color:var(--visitor); text-align:center; background:rgba(0,0,0,0.018); }
.sp-thead .ch-m { color:var(--member); text-align:center; }
.sp-thead .ch-o { color:var(--owner); text-align:center; background:rgba(0,0,0,0.018); }
.sp-row { display:grid; grid-template-columns:1fr 90px 90px 90px; border-bottom:0.5px solid var(--border); align-items:center; }
.sp-row:last-child { border-bottom:none; }
.sp-row-name { padding:11px 14px; font-size:13px; font-weight:500; }
/* Bestanden: dezelfde matrix als hierboven, maar met TWEE keuzekolommen (Lezen / Schrijven) in
   plaats van drie. Geen schuifje aan = geen toegang; dat is dus geen derde kolom maar de lege
   stand van deze twee. Eigen grid omdat de kolombreedte anders niet klopt - de rest (kop,
   rijen, cellen, schuifjes) is letterlijk hetzelfde, zodat de twee schermen bij een
   stijlwijziging niet uiteenlopen. */
.sp-wrap.bs2 .sp-thead, .sp-wrap.bs2 .sp-row { grid-template-columns:1fr 110px 110px; }
.sp-cell { display:flex; align-items:center; justify-content:center; padding:8px 4px; min-height:44px; }
.sp-cell.bg-v { background:rgba(0,0,0,0.018); }
.sp-cell.bg-o { background:rgba(0,0,0,0.018); }
.radio-w { width:40px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.radio-w input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; z-index:2; }
.radio-c { width:38px; height:22px; border-radius:11px; background:var(--border-strong); position:relative; transition:background .15s; pointer-events:none; }
.radio-c::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 1px 2px rgba(0,0,0,0.15); transition:transform .15s; }
.radio-w.rv input:checked ~ .radio-c { background:var(--visitor); }
.radio-w.rm input:checked ~ .radio-c { background:var(--member); }
.radio-w.ro input:checked ~ .radio-c { background:var(--owner); }
.radio-w input:checked ~ .radio-c::after { transform:translateX(16px); }
.radio-w:hover .radio-c { background:#d0d0cc; }
.radio-w.rv input:checked:hover ~ .radio-c { background:var(--visitor); opacity:0.85; }
.radio-w.rm input:checked:hover ~ .radio-c { background:var(--member); opacity:0.85; }
.radio-w.ro input:checked:hover ~ .radio-c { background:var(--owner); opacity:0.85; }

/* Inherited badge */
.inherited-tag { font-size:10px; color:var(--text-muted); background:var(--bg); border:0.5px solid var(--border-strong); border-radius:8px; padding:1px 6px; margin-left:8px; }

/* ── De koprij van een rechtenmatrix blijft in beeld ────────────────────────────
   Bij een klant met tweehonderd postvakken scrolde de rij met Volledige rechten /
   Verzenden als / Namens / AutoMapping uit beeld, en dan zet je een schuifje om in een
   kolom waarvan je niet meer ziet welke het is. Zie FB-65. Geldt net zo voor de
   SharePoint-matrix (Visitor/Member/Owner), dus die gaat mee.

   Waarom het niet vanzelf ging: elke matrix zit in een doosje met `overflow:hidden` om de
   hoeken af te ronden, en dat maakt van dat doosje een scroll-container. Een sticky koprij
   kan daar niet uit en beweegt gewoon mee omhoog. `overflow:clip` knipt precies zo goed af
   maar maakt géén scroll-container, dus blijft de koprij plakken aan de scroller die er
   echt is - het detailpaneel eromheen.

   Het `!important` is hier geen luiheid: die `overflow:hidden` staat als INLINE stijl op een
   stuk of tien plekken in de app-bestanden, en inline wint van een stylesheet. Eén regel
   hier is beter dan tien losse aanpassingen waarvan de volgende er weer eentje mist. De
   `:has(>)` beperkt hem tot precies de doosjes met zo'n koprij erin. */
div:has(> .mbx-thead), div:has(> .sp-thead) { overflow: clip !important; }
.mbx-thead, .sp-thead { position: sticky; top: 0; z-index: 3; }

/* Mailboxen: zelfde tabel-look als SharePoint, maar 4 kolommen en onafhankelijke schuifjes */
.mbx-thead { display:grid; grid-template-columns:1fr 84px 84px 92px 96px; background:var(--surface-1); border-bottom:0.5px solid var(--border-strong); }
.mbx-thead div { padding:8px 10px; font-size:11px; font-weight:600; color:var(--text-muted); text-align:center; }
.mbx-thead div:first-child { text-align:left; }
.mbx-row { display:grid; grid-template-columns:1fr 84px 84px 92px 96px; border-bottom:0.5px solid var(--border); align-items:center; }
.mbx-row:last-child { border-bottom:none; }
.mbx-row-name { padding:11px 14px; font-size:13px; font-weight:500; }
.mbx-cell { display:flex; align-items:center; justify-content:center; padding:8px 4px; min-height:44px; }
.mbx-toggle-w { width:40px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.mbx-toggle-w input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; z-index:2; }
.mbx-toggle-c { width:38px; height:22px; border-radius:11px; background:var(--border-strong); position:relative; transition:background .15s; pointer-events:none; }
.mbx-toggle-c::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 1px 2px rgba(0,0,0,0.15); transition:transform .15s; }
.mbx-toggle-w input:checked ~ .mbx-toggle-c::after { transform:translateX(16px); }
.mbx-toggle-w:hover .mbx-toggle-c { background:#d0d0cc; }
.mbx-toggle-w.fa input:checked ~ .mbx-toggle-c { background:#2563eb; }
.mbx-toggle-w.sa input:checked ~ .mbx-toggle-c { background:#16a34a; }
.mbx-toggle-w.sob input:checked ~ .mbx-toggle-c { background:#d97706; }
.mbx-toggle-w.am input:checked ~ .mbx-toggle-c { background:#0891b2; }
.mbx-toggle-w.am input:checked ~ .mbx-toggle-c { background:#6b7280; }
.mbx-toggle-w.role input:checked ~ .mbx-toggle-c { background:var(--sth-purple); }
.mbx-toggle-w input:disabled { cursor:default; }

/* ── Thema-vinkjes: paars vakje met wit vinkje (checkbox) en paars bolletje (radio) ──
   Compacter dan de schuifjes hierboven, bedoeld voor tabellen met meerdere keuzekolommen
   naast elkaar (bijv. Primair/Alias bij het e-mailadressjabloon). */
.ah-check { position:relative; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; cursor:pointer; }
.ah-check input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; z-index:2; }
.ah-check .ah-box { width:18px; height:18px; border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface); display:flex; align-items:center; justify-content:center; pointer-events:none; transition:background .12s,border-color .12s; }
.ah-check .ah-box svg { opacity:0; transition:opacity .12s; }
.ah-check input:checked ~ .ah-box { background:var(--sth-purple); border-color:var(--sth-purple); }
.ah-check input:checked ~ .ah-box svg { opacity:1; }
.ah-check:hover input:not(:disabled) ~ .ah-box { border-color:var(--sth-purple); }
/* Ronde variant = radio: gevuld bolletje in plaats van een vinkje */
.ah-check.round .ah-box { border-radius:50%; }
.ah-check .ah-dot { width:7px; height:7px; border-radius:50%; background:#fff; opacity:0; transition:opacity .12s; }
.ah-check input:checked ~ .ah-box .ah-dot { opacity:1; }
/* Geblokkeerd (bijv. de Alias-cel van de regel die al Primair is) */
.ah-check input:disabled { cursor:not-allowed; }
.ah-check.off { opacity:.35; cursor:not-allowed; }
.ah-check.off .ah-box { background:var(--surface-1); border-color:var(--border); }
.ah-check.off:hover input:disabled ~ .ah-box { border-color:var(--border); }
/* Toetsenbordbediening zichtbaar houden: het echte input-element is transparant */
.ah-check input:focus-visible ~ .ah-box { outline:2px solid var(--sth-purple); outline-offset:2px; }

/* ── E-mailadressjabloon: één tabel met een Primair- en een Alias-kolom ── */
.ci-fmt-thead, .ci-fmt-row { display:grid; grid-template-columns:1fr 130px 76px 76px 34px; align-items:center; }
.ci-fmt-thead { background:var(--surface-1); border-bottom:0.5px solid var(--border-strong); }
.ci-fmt-thead div { padding:8px 10px; font-size:11px; font-weight:600; color:var(--text-muted); text-align:center; }
.ci-fmt-thead div:first-child, .ci-fmt-thead div:nth-child(2) { text-align:left; }
.ci-fmt-row { border-bottom:0.5px solid var(--border); }
.ci-fmt-row:last-child { border-bottom:none; }
.ci-fmt-row:hover { background:var(--surface-1); }
.ci-fmt-name { padding:9px 10px; font-size:13px; }
.ci-fmt-ex { padding:9px 10px; font-family:monospace; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-fmt-cell { display:flex; align-items:center; justify-content:center; padding:6px 4px; min-height:38px; }

/* ── Functie-/propositierol · Groepen-tab: tabel met de kolommen Lid en Platslaan ── */
.role-grp-thead, .role-grp-row { display:grid; grid-template-columns:1fr 64px 84px; align-items:center; }
.role-grp-thead { background:var(--surface-1); border-bottom:0.5px solid var(--border-strong); }
.role-grp-thead div { padding:8px 10px; font-size:11px; font-weight:600; color:var(--text-muted); text-align:center; }
.role-grp-thead div:first-child { text-align:left; }
.role-grp-row { border-bottom:0.5px solid var(--border); }
.role-grp-row:last-child { border-bottom:none; }
.role-grp-row:hover { background:var(--surface-1); }
.role-grp-name { padding:10px; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-grp-cell { display:flex; align-items:center; justify-content:center; padding:6px 4px; min-height:40px; }

/* ── Groepskoppelingen: schermbrede, sorteerbare tabel (optioneel gegroepeerd per bron) ── */
.gs-thead, .gs-row { display:grid; grid-template-columns:minmax(190px,1.3fr) minmax(190px,1.3fr) 84px 130px 150px 150px 118px; align-items:center; }
/* De sharekoppelingen hebben één kolom extra (Niveau: lezen of lezen+schrijven - twee
   verschillende AD-groepen, en zonder die kolom is niet te zien welke deze koppeling vult).
   Eén klasse op de tabel in plaats van inline stijlen per cel: anders moet elke rij weten
   hoeveel kolommen de kop heeft, en dat loopt uiteen zodra er iets bijkomt. */
.gs-table-8 .gs-thead, .gs-table-8 .gs-row { grid-template-columns:minmax(170px,1.2fr) minmax(170px,1.2fr) 130px 84px 130px 150px 150px 118px; }
.gs-iconbtn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:0.5px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; padding:0; flex-shrink:0; }
.gs-iconbtn:hover { background:var(--surface-1); }
.gs-iconbtn.danger { color:var(--danger); }
.gs-iconbtn:disabled { opacity:.5; cursor:default; }
.gs-thead { background:var(--surface-1); border-bottom:0.5px solid var(--border-strong); }
.gs-thead > div { padding:9px 12px; font-size:11px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.gs-thead .gs-sortable { cursor:pointer; user-select:none; }
.gs-thead .gs-sortable:hover { color:var(--text); }
.gs-row { border-bottom:0.5px solid var(--border); }
.gs-row:last-child { border-bottom:none; }
.gs-row:hover { background:var(--surface-1); }
.gs-cell { padding:9px 12px; font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-group-head { grid-column:1/-1; padding:8px 12px; font-size:11.5px; font-weight:700; background:var(--bg); border-bottom:0.5px solid var(--border); display:flex; align-items:center; gap:8px; }
.gs-kind-tag { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 7px; border-radius:8px; flex-shrink:0; }
.gs-kind-tag.functierol { color:var(--sth-purple); background:#f5f0fb; }
.gs-kind-tag.propositie { color:#0f766e; background:#f0fdfa; }
.gs-kind-tag.overig { color:var(--text-muted); background:var(--surface-1); border:0.5px solid var(--border-strong); }

/* ── Rechten: 3-standen-control (Geen / Lezen / Lezen+Schrijven) in huisstijl ── */
.perm-seg { display:inline-flex; background:var(--surface-1); border:0.5px solid var(--border-strong); border-radius:8px; padding:2px; gap:2px; }
.perm-seg button { border:none; background:transparent; cursor:pointer; font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; color:var(--text-muted); transition:background .12s,color .12s; white-space:nowrap; line-height:1.4; }
.perm-seg button:hover:not(.active):not(:disabled) { background:var(--surface); color:var(--text-secondary); }
.perm-seg button.active[data-lvl="none"]  { background:var(--border-strong); color:var(--text); }
.perm-seg button.active[data-lvl="read"]  { background:#2563eb; color:#fff; }
.perm-seg button.active[data-lvl="write"] { background:var(--sth-purple); color:#fff; }
.perm-seg button:disabled { cursor:default; opacity:.55; }
.perm-seg.inherited button.active { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); opacity:.85; }
/* Uitklapbare sectie-rijen in de rechtenmatrix */
.perm-cat { margin-bottom:14px; border:0.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.perm-cat-head { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface-1); }
.perm-cat-title { font-size:11px; font-weight:800; color:var(--sth-purple); text-transform:uppercase; letter-spacing:.06em; flex:1; }
.perm-sec { border-top:0.5px solid var(--border); }
.perm-sec-head { display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; user-select:none; }
.perm-sec-head:hover { background:var(--surface-1); }
.perm-sec-chevron { width:14px; height:14px; flex-shrink:0; transition:transform .15s; color:var(--text-muted); }
.perm-sec.open .perm-sec-chevron { transform:rotate(90deg); }
.perm-sec-name { font-size:13px; font-weight:600; flex:1; }
.perm-sec-sub { display:none; padding:2px 14px 10px 34px; background:var(--surface); }
.perm-sec.open .perm-sec-sub { display:block; }
.perm-sub-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:0.5px solid var(--border); }
.perm-sub-row:last-child { border-bottom:none; }
.perm-sub-name { font-size:12.5px; flex:1; color:var(--text-secondary); }
.perm-inherit-badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--surface-1); border:0.5px solid var(--border); border-radius:4px; padding:1px 5px; }
.perm-bulk-btn { font-size:10px; font-weight:700; padding:3px 8px; border:0.5px solid var(--border-strong); border-radius:6px; background:var(--surface); cursor:pointer; color:var(--text-secondary); }
.perm-bulk-btn:hover { background:var(--surface-1); }

/* ── Drift-detectie: inklapbare paneeltjes per site ──────────────────────── */
.drift-site { border:0.5px solid var(--border-strong); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; }
.drift-site-head { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface-1); cursor:pointer; user-select:none; }
.drift-site-head:hover { background:var(--surface); }
.drift-site-chevron { width:13px; height:13px; flex-shrink:0; transition:transform .15s; color:var(--text-muted); }
.drift-site.open .drift-site-chevron { transform:rotate(90deg); }
.drift-site-body { display:none; }
.drift-site.open .drift-site-body { display:block; }

/* ── Rapporten: print-only kaftpagina in STH-huisstijl ──────────────────────── */
@media screen { .print-only { display:none !important; } }
@media print {
  body * { visibility:hidden; }
  .print-only, .print-only * { visibility:visible; }
  .print-only { display:block !important; position:absolute; top:0; left:0; width:100%; margin:0; }
  @page { margin:0; }
}
.report-cover {
  width:210mm; min-height:297mm; box-sizing:border-box; padding:14mm;
  border:3mm solid #262626; page-break-after:always; position:relative;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.report-cover-header { display:flex; align-items:flex-end; gap:12px; margin-top:12mm; margin-left:6mm; }
.report-cover-tagline { font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--sth-purple); text-transform:uppercase; padding-bottom:4px; }
.report-cover-title { margin-top:60mm; margin-left:6mm; margin-right:6mm; }
.report-cover-title h1 { font-size:42px; font-weight:800; color:var(--sth-purple); letter-spacing:-.5px; margin-bottom:14px; }
.report-cover-sub { font-size:17px; color:#333; border-top:1px solid #e5e5e5; padding-top:12px; max-width:480px; line-height:1.5; }
.report-cover-footer { position:absolute; bottom:16mm; left:0; right:0; }
.report-cover-company { font-size:14px; font-weight:700; color:var(--sth-purple); margin:8px 14mm 4px; }
.report-cover-contact { font-size:9px; color:#444; margin:0 14mm 2px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 20px; }

.report-print-content { padding:14mm; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.report-print-content h2 { color:var(--sth-purple); font-size:17px; margin-bottom:14px; font-weight:700; }
.report-print-table { width:100%; border-collapse:collapse; font-size:11px; }
.report-print-table th { text-align:left; background:var(--sth-purple-tint); color:var(--sth-purple); padding:6px 8px; border-bottom:1px solid var(--sth-purple); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; }
.report-print-table td { padding:6px 8px; border-bottom:0.5px solid #ddd; vertical-align:top; overflow-wrap:anywhere; }
.report-print-table tr { page-break-inside:avoid; }

/* Zijbalk van het Instellingen-scherm (beheerpaneel).
   Was een horizontale tabbladenbalk, maar die werd met elk tabblad breder en er paste er
   geen elf meer naast elkaar. Een verticale, gegroepeerde lijst schaalt wél en vertelt
   bovendien meteen in welke hoek je moet zoeken. Licht thema, want dit staat in een modal —
   niet te verwarren met de donkere hoofdzijbalk (.nav-item). */
.apnav { width:186px; flex-shrink:0; overflow-y:auto; padding:12px 0 16px; border-right:0.5px solid var(--border-strong); background:var(--surface-1); }
.apnav-group { padding:12px 16px 5px; font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.apnav-group:first-child { padding-top:2px; }
.apnav-item { margin:1px 8px; padding:7px 11px; border-radius:8px; font-size:12.5px; color:var(--text-secondary); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s, color .12s; }
.apnav-item:hover { background:var(--surface); color:var(--text); }
.apnav-item.active { background:var(--sth-purple); color:#fff; font-weight:600; }

/* Save bar */
.save-bar { position:fixed; bottom:0; left:var(--sidebar-w); transition:transform .2s, left .15s ease; right:0; background:var(--surface); border-top:0.5px solid var(--border-strong); padding:11px 20px; display:flex; align-items:center; justify-content:space-between; z-index:200; transform:translateY(100%); box-shadow:0 -4px 16px rgba(0,0,0,0.06); }
.save-bar.visible { transform:translateY(0); }
/* Zolang de "Rechten toevoegen"-pop-up open staat heeft die een eigen opslaan-balk;
   de gedeelde balk op het venster erachter dan verbergen (geen dubbele balken). */
/* Pop-ups en zijpanelen hebben hun eigen opslaan-balk (zie CLAUDE.md). De gedeelde balk
   ligt achter de overlay en zou daar alleen maar verwarrend meekijken. */
body:has(#email-mbx-add-modal) .save-bar,
body:has(#bw-form-modal) .save-bar,
body:has(#bw-edit-modal) .save-bar,
body:has(#cal-add-modal) .save-bar,
body:has(#cu-sjabloon-modal) .save-bar,
body:has(#apikey-modal) .save-bar,
body:has(#apikey-nieuw-modal) .save-bar,
body:has(#whatsnew-modal) .save-bar,
body:has(#wn-editor-modal) .save-bar,
body:has(#at-voorstel-modal) .save-bar,
body:has(#sp-hub-modal) .save-bar { display:none; }
.save-btns { display:flex; gap:8px; }
/* Spinner in de opslaan-balk: alleen zichtbaar als opslaan langer duurt (klasse via saveBarApply) */
.save-spinner { width:15px; height:15px; border:2px solid var(--border-strong); border-top-color:var(--sth-purple); border-radius:50%; animation:spin .7s linear infinite; display:none; align-self:center; margin-right:4px; }
.save-bar.saving-long .save-spinner { display:inline-block; }
.btn { padding:8px 16px; border:0.5px solid var(--border-strong); border-radius:var(--radius); font-size:13.5px; font-weight:500; font-family:var(--font-body); background:var(--surface); color:var(--text); cursor:pointer; display:flex; align-items:center; gap:6px; }
.btn:hover { background:var(--surface-1); }
.btn.primary { background:var(--sth-purple); color:white; border-color:var(--sth-purple); }
.btn.primary:hover { background:var(--sth-purple-light); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Toast */
.toast { position:fixed; bottom:68px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--sth-dark); color:white; padding:9px 18px; border-radius:var(--radius); font-size:13px; opacity:0; transition:all .2s; z-index:1000; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.err-box { background:#fdecea; border:0.5px solid rgba(192,57,43,0.2); border-radius:var(--radius); padding:10px 14px; font-size:13px; color:var(--danger); margin-bottom:12px; display:none; }

.resizer {
  width:5px;
  flex-shrink:0;
  background:transparent;
  cursor:col-resize;
  transition:background .15s;
  position:relative;
  z-index:10;
}
.resizer:hover, .resizer.dragging { background:var(--sth-purple); }

.spinner { width:16px; height:16px; border:2px solid rgba(0,0,0,0.1); border-top-color:var(--sth-purple); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.spin-once svg { animation:spin .7s linear infinite; }
.dash-spinner {
  width:22px; height:22px; border-radius:50%;
  border:3px solid var(--border-strong);
  border-top-color:var(--sth-purple);
  border-right-color:var(--sth-purple-light);
  animation:spin .8s cubic-bezier(.5,0,.5,1) infinite;
  display:inline-block;
}
.loading { display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:13px; padding:32px 0; }

/* Role colors */
.rc0{color:#6366f1}.rc1{color:#22c55e}.rc2{color:#f97316}.rc3{color:#3b82f6}.rc4{color:#a855f7}.rc5{color:#ec4899}.rc6{color:#14b8a6}.rc7{color:#f59e0b}.rc8{color:#ef4444}.rc9{color:#84cc16}
.rb0{background:#eef2ff}.rb1{background:#f0fdf4}.rb2{background:#fff7ed}.rb3{background:#eff6ff}.rb4{background:#faf5ff}.rb5{background:#fdf2f8}.rb6{background:#f0fdfa}.rb7{background:#fffbeb}.rb8{background:#fef2f2}.rb9{background:#f7fee7}

/* ── Nieuw in AccessHub (release-notes-pop-up, app-19) ──────────────────────────
   Dezelfde opmaak als de release notes in de documentatie (rn-* daar), maar op de
   CSS-variabelen van de app zodat donkere modus meekomt. Bewust hier en niet inline:
   de pop-up, het voorbeeld in de editor en de beheerkaart delen deze klassen. */
.wn-entry { border-bottom:0.5px solid var(--border); padding-bottom:18px; margin-bottom:18px; }
.wn-entry:last-child { border-bottom:none; padding-bottom:4px; margin-bottom:0; }
.wn-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wn-badge { font-family:monospace; font-size:12px; font-weight:600; background:var(--sth-purple); color:#fff; border-radius:6px; padding:3px 9px; }
.wn-date { font-size:12.5px; color:var(--text-muted); }
.wn-titel { font-size:15.5px; font-weight:700; margin-bottom:6px; }
.wn-intro { font-size:13.5px; color:var(--text-secondary); line-height:1.65; margin-bottom:10px; }
.wn-list { margin:0; padding-left:20px; }
.wn-list li { font-size:13.5px; color:var(--text-secondary); line-height:1.7; margin-bottom:12px; }
.wn-list li strong { color:var(--text); }
.wn-tag { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:5px; padding:1px 7px; margin-right:7px; vertical-align:1px; }
.wn-tag-feature { background:#e8f0ff; color:#1a56db; }
.wn-tag-fix { background:#fff1e6; color:#b5540a; }
/* 'Ter info' is bewust neutraal grijs: het kondigt niets aan, het legt iets uit. Zou het een
   kleur van zichzelf krijgen, dan gaat het concurreren met Nieuw en Fix in dezelfde lijst. */
.wn-tag-info { background:rgba(0,0,0,0.06); color:#6B6B67; }
:root[data-theme="dark"] .wn-tag-feature { background:rgba(26,86,219,0.25); color:#8fb4ff; }
:root[data-theme="dark"] .wn-tag-fix { background:rgba(181,84,10,0.25); color:#ffb877; }
:root[data-theme="dark"] .wn-tag-info { background:rgba(255,255,255,0.10); color:#c9c9c4; }
.wn-docs { color:var(--sth-purple); text-decoration:none; font-weight:500; white-space:nowrap; }
/* Soort van een bericht (Nieuw / Ter info / Onderhoud). Kleur en tint komen uit
   wnSoortInfo() in app-19, zodat kop, icoon en labeltje niet uit elkaar kunnen lopen. */
.wn-soort { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:20px; padding:2px 9px; }
.wn-docs:hover { text-decoration:underline; }

/* ── Feestballonnen ───────────────────────────────────────────────────────────
   Voor het moment dat een klant helemaal uit Ydentic is (zie ladBallonnen in app-21). Een
   mijlpaal die anders ongemerkt voorbijgaat omdat de handeling "opruimen" heet.

   De laag vangt geen muisklikken (pointer-events:none) en staat boven alles behalve de
   pop-ups: je moet gewoon door kunnen klikken terwijl het feestje voorbijdrijft. De animatie
   staat in CSS en niet in JavaScript, zodat de browser hem op de GPU kan afhandelen en hij
   niet hapert terwijl het scherm zichzelf opnieuw tekent.

   Wie bewegende beelden heeft uitgezet krijgt ze niet: de media query hieronder is het vangnet
   voor het geval de laag toch wordt aangemaakt (ladBallonnen toetst het zelf ook). */
.ah-ballonnen { position:fixed; inset:0; pointer-events:none; z-index:600; overflow:hidden; }
.ah-ballon {
  position:absolute; bottom:-140px; width:var(--bm,44px); height:calc(var(--bm,44px) * 1.22);
  background:radial-gradient(ellipse at 32% 28%, rgba(255,255,255,.55), var(--bk,#a855f7) 58%);
  border-radius:50% 50% 48% 48% / 56% 56% 44% 44%;
  animation:ah-ballon-op var(--bd,8s) ease-in var(--bw,0s) forwards;
  opacity:0;
}
/* Het touwtje. Een pseudo-element en geen tweede div: het hoort bij de ballon en beweegt dus
   per definitie mee. */
.ah-ballon::after {
  content:''; position:absolute; left:50%; top:100%; width:1px; height:26px;
  background:linear-gradient(to bottom, rgba(0,0,0,.22), transparent);
}
@keyframes ah-ballon-op {
  0%   { transform:translateY(0) rotate(-4deg);            opacity:0; }
  8%   {                                                   opacity:.95; }
  /* Een beetje zwenken onderweg: strak omhoog ziet eruit als een voortgangsbalk. */
  45%  { transform:translateY(-52vh) translateX(18px) rotate(5deg); }
  75%  { transform:translateY(-84vh) translateX(-12px) rotate(-3deg); opacity:.9; }
  100% { transform:translateY(-118vh) translateX(6px) rotate(2deg);   opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .ah-ballonnen { display:none; }
}