:root {
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sth-purple: #711C90;
  --sth-purple-light: #8B24B0;
  --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:#F2F2F0;
  --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; }
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: #F2F2F2;
  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; }
.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:90vw; overflow:hidden; }
.fb-card h3 { font-size:15px; font-weight:600; margin:0; }
.fb-opt { display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; }
.fb-opt:hover { background:var(--surface-1); }
.login-card { background: #FFFFFF; border: 1px solid #E1DFDD; border-radius: 8px; padding: 0; width: 440px; box-shadow: 0 2px 6px rgba(0,0,0,0.13), 0 0.5px 1.5px rgba(0,0,0,0.1); overflow:hidden; }
.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:50px; background:var(--sth-dark); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; column-gap:14px; flex-shrink:0; border-bottom:0.5px solid rgba(255,255,255,0.06); }
.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:12px; color:rgba(255,255,255,0.5); }
.topbar-avatar { width:26px; height:26px; border-radius:50%; background:var(--sth-purple); color:white; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }

.topbar-icon-btn, #topbar-tenant-btn {
  height:32px; background:rgba(255,255,255,0.07); border:0.5px solid rgba(255,255,255,0.15); border-radius:10px;
  color:rgba(255,255,255,0.85); cursor:pointer; padding:0 10px; font-size:11.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:60px; }
#lang-select option { background:var(--sth-dark-2); color:white; }
#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 { width:32px; 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); }
.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.1);
  color:#fff; border-radius:8px; padding:8px 34px 8px 34px; font-size:13px; outline:none;
  font-family:inherit; transition:background .15s, border-color .15s;
}
.topbar-search input::placeholder { color:rgba(255,255,255,0.35); }
.topbar-search input:focus { background:rgba(255,255,255,0.11); border-color:var(--sth-purple-light); }
.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:220px; 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 { padding:16px 14px 6px; font-size:10px; font-weight:700; letter-spacing:.09em; color:rgba(255,255,255,0.45); text-transform:uppercase; }
.sidebar-tenant { display:flex; align-items:center; gap:9px; margin:2px 8px 8px; padding:8px 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-icon { width:15px; height:15px; flex-shrink:0; color:rgba(255,255,255,0.55); }
.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; padding:9px 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-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); }
.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; }
.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; }
.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); }
.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; }
.pb { padding-bottom:64px; }

.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; }

.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; }
.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; }

/* 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; }

/* ── 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:#711C90; 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:#711C90; 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:#711C90; 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:#711C90; 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:#F4EAF8; color:#711C90; padding:6px 8px; border-bottom:1px solid #711C90; 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; }
.report-print-table tr { page-break-inside:avoid; }

/* Save bar */
.save-bar { position:fixed; bottom:0; left:220px; 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%); transition:transform .2s; box-shadow:0 -4px 16px rgba(0,0,0,0.06); }
.save-bar.visible { transform:translateY(0); }
.save-btns { display:flex; gap:8px; }
.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}