/* LS Suite platform — lichte huisstijl, aansluitend op de commerciële etalage.
   Wit/lucht, accent-blauw #3b6cb3, Inter, ruime witruimte, zachte randen. */
/* De kleuren, maten en letters staan in assets/css/tokens.css — één bron voor
   alle modules van LS Suite. Dit bestand gebruikt ze via var(--naam) en zet ze
   niet opnieuw; anders drijven de modules weer uit elkaar. */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* Lichte topbar, gelijk aan de commerciële etalage (LS Suite by LS Insight) */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); color: var(--text); padding: 0 40px; height: 72px;
  border-bottom: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 18px; }
/* Kleine donkere rechthoek met het volledige LS-logo (wit-op-zwart) erin.
   Bron is staand (477x681); we houden 'm compact op balk-hoogte. */
.brand-logo { height: 46px; width: 38px; border-radius: 9px; flex: none; overflow: hidden;
  display: grid; place-items: center; background: #15192a; padding: 5px 6px; }
.brand-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; opacity: .95; display: block; }
.brand-name { font-weight: 700; color: var(--text); letter-spacing: -.3px; }
.brand-by { font-weight: 400; color: var(--text-faint); font-size: 15px; margin-left: 1px; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right .who { color: var(--text-sec); font-size: 13px; }
.topbar-right .logout { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 500; }
.topbar-right .logout:hover { color: var(--accent-hover); text-decoration: underline; }

.override-bar { display: flex; align-items: center; justify-content: space-between;
  background: #fff6e8; border-bottom: 1px solid #f0e0c0; color: #9a6a18;
  padding: 10px 24px; font-size: 13px; }
.override-bar .override-stop { color: #9a6a18; text-decoration: underline; font-weight: 600; }
.override-bar .override-stop:hover { color: #7a5210; }

.wrap { max-width: 960px; margin: 0 auto; padding: 48px 40px; }
.page-title { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 6px; }
.page-sub { color: var(--text-sec); font-size: 15px; margin: 0 0 32px; }

/* Stand van een pagina als geheel, direct onder de titel. Staat er een .page-stand
   tussen, dan hoort de subtekst dichter bij de titel te blijven. */
.page-sub + .page-stand { margin: -22px 0 26px; }
.page-stand { margin: 0 0 26px; }

/* Filterknoppen boven een lijst (logboek). Tags naast elkaar met ruimte ertussen. */
.logboek-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.logboek-filter .tag { text-decoration: none; }
.logboek-filter .tag:hover { border-color: var(--accent); color: var(--accent-hover); }
.logboek-filter .tag .muted { margin-left: 4px; font-variant-numeric: tabular-nums; }
.muted { color: var(--text-faint); }

/* Eyebrow-label met bolletje (zoals "● WHITE-LABEL..." / "MODULES" op de etalage) */
.eyebrow { display: flex; align-items: center; gap: 8px; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--text-faint); margin: 0 0 12px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-top: 10px; }
.tile {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-card); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tile:hover { border-color: #cfdaee; box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.tile-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-light);
  color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.tile-name { font-weight: 600; font-size: 15px; }
.tile-role { font-size: 12px; color: var(--text-faint); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 28px; margin-bottom: 22px; box-shadow: var(--shadow-card); }
.panel h2 { font-size: 17px; font-weight: 600; letter-spacing: -.2px; margin: 0 0 6px; }
.panel > .muted:first-of-type { margin-top: 0; }

.centered, .login-card { max-width: 380px; margin: 64px auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 32px; box-shadow: 0 1px 3px rgba(26,31,46,.04); }
.login-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
  font-weight: 700; color: var(--accent); margin: 0 0 10px; }
.login-card .page-sub strong { color: var(--accent); font-weight: 600; }
.login-card label { display: block; margin: 14px 0 4px; font-size: 13px; color: var(--text-sec); }
.field { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.field:focus { outline: none; border-color: var(--accent); }
.btn { display: inline-block; margin-top: 18px; padding: 10px 18px; border-radius: 9px;
  border: 1px solid var(--accent); background: var(--panel); color: var(--accent);
  text-decoration: none; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--accent-light); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.login-card .btn-primary { width: 100%; }
/* neutrale (grijze) knop voor secundaire acties binnen panelen */
.btn-neutral { border-color: var(--border); color: var(--text-sec); }
.btn-neutral:hover { background: var(--bg-soft); border-color: var(--text-faint); color: var(--text); }
.alert { padding: 12px 14px; border-radius: 8px; margin: 14px 0; font-size: 13px; }
.alert-error { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); }
.alert-info { background: var(--accent-light); border: 1px solid #d4e0f4; color: var(--accent-hover); }

/* Zoek-/telbalk boven de gebruikerslijst */
.user-toolbar { display: flex; align-items: center; gap: 14px; margin: 16px 0 10px; }
.user-search { flex: 1 1 auto; max-width: 340px; padding: 9px 12px; font-size: 13px; }
.user-count { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }

/* Gebruikerslijst — kaart per gebruiker, strak uitgelijnd; scrollt bij veel rijen */
.user-list { border: 1px solid var(--border); border-radius: 12px; overflow-y: auto;
  max-height: 440px; }
.user-row { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.user-row:last-child { border-bottom: none; }
.user-row:nth-child(even) { background: var(--bg-soft); }
.user-empty { margin: 14px 2px; }

.user-main { display: flex; align-items: center; gap: 16px; }
.user-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-name { font-weight: 600; font-size: 14px; }
.user-email { color: var(--text-sec); font-size: 13px; }
.user-login { color: var(--text-faint); font-size: 11.5px; margin-top: 1px; }
.user-meta { display: flex; align-items: center; gap: 8px; flex: none; }
/* Was flex:none voor één "bewerken"-link; bevat nu vijf acties die mogen doorlopen op
   een smal scherm in plaats van uit de kaart te steken. */
.user-actions { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; }

.user-apps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-soft); }
.user-apps-label { font-size: 12px; color: var(--text-faint); font-weight: 600; margin-right: 2px; }

/* "nog geen toegang" is een aandachtspunt, geen neutrale mededeling: iemand kan wel
   inloggen maar komt nergens binnen. Daarom niet in het grijs van uitgeschakelde tekst. */
.user-apps-leeg { font-size: 12px; color: var(--warn-text); font-style: italic; }

/* Toegang GEVEN staat los van toegang TONEN. Zonder scheiding leest een leeg invoerveld
   als de huidige stand ("DocGen · gebruiker" lijkt dan iets wat iemand al heeft). */
.user-apps-toevoegen { margin-top: 6px; padding-top: 0; border-top: none; }

/* Rollen-uitleg: dicht, maar één klik van open. Een label als "Beheerder" zegt niets
   zonder uitleg, en die uitleg hoort in het scherm en niet in een handleiding. */
.rollen-uitleg { margin: 0 0 14px; font-size: 13px; }
.rollen-uitleg > summary { cursor: pointer; color: var(--accent-hover); font-weight: 500;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.rollen-uitleg > summary::-webkit-details-marker { display: none; }
.rollen-uitleg > summary::before { content: "?"; display: inline-flex; align-items: center;
  justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-hover); font-size: 11px;
  font-weight: 700; }
.rollen-tabel { border-collapse: collapse; margin-top: 10px; }
.rollen-tabel th { text-align: left; vertical-align: top; padding: 5px 14px 5px 0;
  font-weight: 600; white-space: nowrap; color: var(--text); }
.rollen-tabel td { padding: 5px 0; color: var(--text-faint); line-height: 1.45; }

/* Uitgeschakelde actie (laatste eigenaar): zichtbaar dat het bestaat én waarom het niet
   kan. Weglaten zou de vraag oproepen waar de knop is gebleven. */
.user-actions button[disabled] { opacity: .4; cursor: not-allowed; }

/* ── Moduleformulier ─────────────────────────────────────────────────────────
   Vier gelijke kolommen. Met flex-wrap kreeg elk veld zijn eigen breedte en sprong
   de tweede rij willekeurig in — labels links van het ene veld en boven het andere.
   Een raster houdt de kolommen uitgelijnd, ook als een rij niet vol is. */
.mod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px;
  align-items: end; }
@media (max-width: 720px) { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mod-veld { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--text-faint); min-width: 0; }
.mod-veld > span { font-weight: 600; }
/* Zonder dit lopen date- en number-velden over hun kolom heen (Safari geeft ze een
   eigen intrinsieke breedte die breder is dan de kolom). */
.mod-veld .field { width: 100%; min-width: 0; box-sizing: border-box; }
.mod-veld-breed { grid-column: span 2; }
@media (max-width: 720px) { .mod-veld-breed { grid-column: span 2; } }

/* Bedragveld: euroteken náást de invoer, niet erin. In het veld zou het bij opslaan weer
   weggehaald moeten worden, en dat gaat een keer mis. */
.bedrag-veld { position: relative; display: block; }
.bedrag-teken { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: 13px; pointer-events: none; }
.bedrag-invoer { padding-left: 24px !important; text-align: right; font-variant-numeric: tabular-nums; }

/* Prijs in de moduleregel: rustiger dan de status-tags, want het is informatie en
   geen waarschuwing. */
.tag-bedrag { background: var(--vlak); color: var(--text); font-variant-numeric: tabular-nums; }

/* Acties onder een module. Pauzeren doet iets, de uitklapper opent een formulier —
   die stonden allebei als kale link naast elkaar, dus zag je het verschil niet. */
.mod-acties { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; }
.mod-pauzeer { display: flex; gap: 6px; align-items: center; }
.mod-pauzeer .field-sm { max-width: 150px; }

/* Uitklapper: herkenbaar als "hier klapt iets open", niet als link naar elders. */
.mod-uitklap { display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 1px solid var(--border-soft); border-radius: 7px; padding: 5px 10px;
  font-size: 12.5px; font-weight: 500; color: var(--text-faint); cursor: pointer; }
.mod-uitklap:hover { border-color: var(--border); color: var(--text); }
.mod-uitklap-pijl { display: inline-block; transition: transform .12s ease; font-size: 10px; }
.mod-uitklap.open .mod-uitklap-pijl { transform: rotate(90deg); }

/* Planuitleg: het label is klikbaar en legt uit wat trial en betaald betekenen. Zonder
   uitleg is "proefabonnement" een woord waar je zelf betekenis aan moet geven — en bij
   een betaald abonnement stond er helemaal niets. */
.plan-uitleg { position: relative; }
.plan-uitleg > summary { cursor: pointer; list-style: none; }
.plan-uitleg > summary::-webkit-details-marker { display: none; }
.plan-uitleg > summary .tag { cursor: pointer; }
.plan-uitleg > summary:hover .tag { border-color: var(--accent); }
.plan-uitleg-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: min(420px, 80vw); padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12); font-size: 12.5px; line-height: 1.5;
  color: var(--text-faint); font-weight: 400; text-align: left; }
.plan-uitleg-body p { margin: 0 0 8px; }
.plan-uitleg-body strong { color: var(--text); }
.plan-uitleg-hoe { display: flex; gap: 8px; align-items: flex-end; margin: 12px 0 0;
  padding-top: 10px; border-top: 1px solid var(--border-soft); }
.plan-uitleg-hoe label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }

/* Verplichting bij derden: bij elkaar in plaats van als drie losse velden ertussen. */
.mod-derden { margin-top: 14px; padding: 12px 14px 14px; border: 1px solid var(--border-soft);
  border-radius: 8px; }
.mod-derden > legend { font-size: 12px; font-weight: 600; color: var(--text);
  padding: 0 6px; }
.mod-derden-uitleg { margin: 0 0 10px; font-size: 12px; color: var(--text-faint);
  line-height: 1.45; }

/* App-chip met intrek-kruisje */
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px;
  border-radius: 7px; background: var(--accent-light); border: 1px solid #d4e0f4;
  color: var(--accent-hover); font-size: 12px; font-weight: 500; }
.chip-x { background: none; border: none; cursor: pointer; color: var(--accent-hover);
  font-size: 15px; line-height: 1; padding: 0 4px; opacity: .6; }
.chip-x:hover { opacity: 1; color: #c0392b; }

/* Inline bewerken — verborgen tot .open; opengeklapt = duidelijk paneel */
.user-edit { display: none; margin-top: 12px; padding: 16px; border-radius: 10px;
  background: var(--accent-light); border: 1px solid #dbe5f5; }
.user-edit.open { display: block; }
.edit-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.edit-fields { display: flex; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; }
.edit-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.edit-field > span { font-size: 11px; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: .04em; }
.edit-field .field-sm { width: 100%; }
.edit-form .btn { margin-top: 0; }
.edit-danger { display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid #dbe5f5; }
.edit-sep { color: var(--text-faint); }

.tag-off { background: #f1f2f4; border-color: #e0e2e7; color: #8a8f9c; }

/* Footer-zichtbaarheid-toggle in de tenant-tabel */
.footer-toggle { cursor: pointer; border-radius: 7px; padding: 3px 10px; font-size: 12px;
  font-weight: 600; border: 1px solid; }
.footer-toggle.on  { background: #eaf6ee; border-color: #cfe8d6; color: #2f7d46; }
.footer-toggle.off { background: #f1f2f4; border-color: #e0e2e7; color: #8a8f9c; }
.footer-toggle:hover { filter: brightness(.97); }

/* Footer-beheer */
.footer-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 10px; }
.footer-form .edit-fields { gap: 14px; }
.footer-form textarea.field-sm { width: 100%; font-family: inherit; resize: vertical; }
.footer-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sec); }
.footer-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.link-danger-text { background: none; border: none; color: var(--warn); cursor: pointer;
  font-size: 13px; font-weight: 500; text-decoration: underline; padding: 0; }
.link-danger-text:hover { color: #c0392b; }

.tag { display: inline-block; padding: 3px 9px; border-radius: 7px; background: var(--bg-soft);
  border: 1px solid var(--border); font-size: 11.5px; font-weight: 500; color: var(--text-sec); }
/* "Binnenkort"-achtige blauwe badge (zoals op de etalage) */
.badge-soon { background: var(--accent-light); border-color: #d4e0f4; color: var(--accent-hover);
  font-weight: 600; }
.tag-app { background: var(--accent-light); border-color: #d4e0f4; color: var(--accent-hover);
  margin: 0 4px 4px 0; }

.tag-ok { background: #eaf6ee; border-color: #cfe8d6; color: #2f7d46; }
.tag-pending { background: #fff6e8; border-color: #f0e0c0; color: #9a6a18; }

.inline-form { display: inline; margin: 0; }
.inline-form button { margin: 0; }
.link-danger { background: none; border: none; color: var(--warn); cursor: pointer;
  font-size: 13px; padding: 0 0 0 4px; line-height: 1; }
.link-danger:hover { color: #c0392b; }
.link-action { background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 12px; padding: 0 0 0 4px; text-decoration: underline; }
.link-action:hover { color: var(--accent-hover); }

.grant-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.field-sm { padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px;
  background: var(--panel); color: var(--text); }
.field-sm:focus { outline: none; border-color: var(--accent); }
.btn-sm { margin-top: 0; padding: 6px 12px; font-size: 13px; }
.sub-h { font-size: 14px; font-weight: 600; margin: 20px 0 4px; }

/* ── Beheer-navigatie in de topbar ──────────────────────────────────────────
   Zonder deze navigatie was er vanuit een deelpagina (bv. mailtemplates) geen
   weg terug naar het beheeroverzicht. Het logo linkt nu ook naar de start. */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover .brand-name { color: var(--accent); }

.topnav { display: flex; align-items: center; gap: 4px; margin-left: 28px; flex: 1; }
.topnav a { font-size: 13.5px; font-weight: 500; color: var(--text-sec);
  text-decoration: none; padding: 7px 13px; border-radius: 8px; transition: background .12s, color .12s; }
.topnav a:hover { background: var(--accent-light); color: var(--accent-hover); }
.topnav a.is-current { background: var(--accent-light); color: var(--accent); font-weight: 600; }
@media (max-width: 720px) {
  .topnav { margin-left: 14px; gap: 2px; }
  .topnav a { padding: 6px 9px; font-size: 12.5px; }
}

/* ── Inklapbare panelen ─────────────────────────────────────────────────────
   Alles tegelijk opengeklapt maakt het beheer onrustig. Panelen die je zelden
   nodig hebt starten dicht; de browser onthoudt de stand per paneel. */
.panel > details { margin: 0; }
.panel > details > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  margin: -26px -28px; padding: 22px 28px; border-radius: 14px; user-select: none;
}
.panel > details[open] > summary { margin-bottom: 6px; border-radius: 14px 14px 0 0; }
.panel > details > summary::-webkit-details-marker { display: none; }
.panel > details > summary:hover { background: var(--accent-light); }

.panel-icon { flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center; }
.panel-icon svg { width: 17px; height: 17px; stroke-width: 1.9; }

.panel-kop { flex: 1; min-width: 0; }
.panel-kop h2 { margin: 0; }
.panel-kop .panel-sub { color: var(--text-faint); font-size: 12.5px; margin: 2px 0 0; }

.panel-telling { flex: none; font-size: 12px; color: var(--text-faint);
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; }

.panel-chevron { flex: none; color: var(--text-faint); transition: transform .18s ease; }
.panel-chevron svg { width: 16px; height: 16px; stroke-width: 2; display: block; }
.panel > details[open] > summary .panel-chevron { transform: rotate(180deg); }

.panel-body { padding-top: 18px; }

/* ── Sorteerbare kolomkoppen ────────────────────────────────────────────────
   Voor het gebruikersscherm. De pijl staat er altijd (↕ als de kolom niet
   actief is), want een kop die pas bij hover laat zien dat hij klikbaar is,
   wordt niet gevonden. */
th.sorteer { cursor: pointer; user-select: none; white-space: nowrap; }
th.sorteer:hover { color: var(--accent-hover); }
th.sorteer .pijl { opacity: .3; margin-left: 3px; font-weight: 400; }
th.sorteer[aria-sort] { color: var(--accent-hover); }
th.sorteer[aria-sort] .pijl { opacity: 1; }

/* Wijde tabellen schuiven binnen hun eigen kader in plaats van de pagina
   breder te maken. */
.tabel-wrap { overflow-x: auto; }

/* ── Uitklapbare uitleg ─────────────────────────────────────────────────────
   Wat een rol betekent, in het scherm zelf. Een label als "Beheerder" zegt
   niets als er nergens staat wat die mág.

   <details> klapt van zichzelf al in en uit; dit geeft het alleen vorm. Zonder
   deze regels stond de uitleg als losse tekst tussen de tabellen. */
details.uitleg {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 0 18px;
  background: var(--bg-soft);
}
details.uitleg > summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--accent-hover);
  list-style: none;
}
details.uitleg > summary::-webkit-details-marker { display: none; }
details.uitleg > summary::before { content: "▸ "; opacity: .6; }
details.uitleg[open] > summary::before { content: "▾ "; }
.uitleg-body { padding: 0 16px 14px; }
.uitleg-body .tabel { font-size: 12.5px; }

/* ── Gebruikersscherm: tabellen en uitleg ───────────────────────────────────
   Deze regels staan ACHTERAAN het bestand, en dat is nodig:
   `.panel > details { margin: 0 }` (regel ~306) is bedoeld voor de
   inklapbare panelen en overschreef anders de marge hieronder — de uitleg
   kroop dan tegen de kop "Gebruikers" aan. Gelijke specificiteit, dus de
   laatste wint. */
.panel > details.uitleg { margin: 0 0 20px; }

/* 🔴 Dit is de regel die het werkelijk deed: `.panel > details > summary` heeft
   `margin: -26px -28px` — bedoeld voor de paneelkoppen die de hele kaart vullen en
   daarvoor de padding van het panel moeten opheffen. Mijn <summary> erfde die en werd
   26 pixels naar boven getrokken, dwars over de kop "Gebruikers".

   Alleen de marge terugzetten is niet genoeg: die regel zet ook display:flex en een
   padding van 22px, en dan blijft de regel te hoog en te breed. Dus hier de hele
   opmaak van dit ene summary, met een selector die specifieker is (twee klassen). */
.panel > details.uitleg > summary {
  display: block;
  margin: 0;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--accent-hover);
}
.panel > details.uitleg > summary:hover { background: var(--accent-light); }
.panel > details.uitleg[open] > summary { margin: 0; border-radius: 10px 10px 0 0; }

/* .tabel werd wel gebruikt maar was nergens opgemaakt: kolommen kleefden
   aan elkaar en de koppen leken losse woorden. */
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel thead th {
  text-align: left;
  padding: 8px 14px 8px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabel tbody td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.tabel tbody tr:last-child td { border-bottom: none; }
/* Laatste kolom bevat acties; die hoeft geen rechtermarge. */
.tabel th:last-child, .tabel td:last-child { padding-right: 0; }

/* Cijferkolommen rechts uitlijnen zodat ze onder elkaar staan. */
.tabel .cijfer { text-align: right; font-variant-numeric: tabular-nums; }

/* Het formulier voor een nieuwe afdeling: veld en knop naast elkaar in
   plaats van de knop onder een veld van volle breedte. */
.afdeling-nieuw { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.afdeling-nieuw .field { flex: 0 1 300px; }

/* De vinkjes per gebruiker: onder elkaar met de knop eronder, anders wordt
   de kolom bij vier afdelingen breder dan de rest van de tabel. */
.grant-form { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.grant-form .footer-check { font-size: 12.5px; }

/* Terugweg bovenaan een subpagina. Zonder deze link is de browserknop de enige
   uitweg, en dat is geen navigatie maar een noodgreep. */
.page-terug { margin: 0 0 14px; font-size: 13px; }
.page-terug a { color: var(--text-faint); text-decoration: none; }
.page-terug a:hover { color: var(--accent-hover); }

/* ── Acties per gebruiker ───────────────────────────────────────────────────
   Acht acties per gebruiker in beeld maken de tabel onleesbaar — dat was de
   klacht over het portaal. Achter een uitklapper zijn ze er wél, maar pas als
   je ze nodig hebt. */
.acties-rij > td { background: var(--bg-soft); padding: 16px 14px; }
.acties-uit { display: flex; flex-direction: column; gap: 16px; }

.acties-blok {
  display: flex;
  /* baseline en niet flex-end: met flex-end lijnen een label-met-veld en een losse knop
     niet uit, want het label maakt het ene element hoger. Dat gaf keuzelijsten die onder
     elkaar in het midden hingen met de tag links onderaan los. */
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Een uitgeschakelde knop moet er uitgeschakeld UITZIEN. De bestaande regel was
   `.user-actions button[disabled]` en die eiste een omhulsel dat hier niet bestaat: de
   knoppen wáren disabled, maar zagen er normaal uit. Dan klik je en gebeurt er niets,
   zonder uitleg. */
.acties-blok button[disabled],
.acties-uit button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* De labels in het bewerkformulier: label boven veld, en de knop lijnt uit met de
   onderkant van de velden. */
.acties-blok .edit-field { display: flex; flex-direction: column; gap: 3px; }
.acties-blok .edit-field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Het app-blok: de tags en het toekenformulier op één regel, niet in twee kolommen.
   De label-regel staat er los boven (flex-basis 100%). */
.acties-blok .inline-form { display: inline-flex; gap: 6px; align-items: center; }
.acties-uit > .acties-blok:last-child { padding-bottom: 0; border-bottom: none; }

.acties-label {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

/* Een app-tag die tegelijk een knop is: klikken trekt de toegang in. Het kruis
   maakt dat duidelijk — een tag zonder kruis nodigt niet uit tot klikken. */
.tag-x { border: none; cursor: pointer; font: inherit; font-size: 11px; }
.tag-x:hover { background: var(--danger-light); color: var(--danger); }

.acties-knop { background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent-hover); text-decoration: underline; }
.acties-knop[aria-expanded="true"]::after { content: " ▴"; }
.acties-knop[aria-expanded="false"]::after { content: " ▾"; }

.uitnodigen { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.uitnodigen-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ── Kengetallen boven het overzicht ────────────────────────────────────────
   De eerste vraag bij binnenkomst is niet "welke klanten heb ik" maar "waar moet ik
   vandaag iets mee". Vier vakken bovenaan beantwoorden dat zonder één klik.

   auto-fit met een minimum van 150px: op een breed scherm staan ze naast elkaar, op
   een telefoon onder elkaar, zonder aparte regel per breedte. */
.kengetallen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.kengetal {
  border: 1px solid var(--lss-border);
  border-radius: 7px;
  padding: 11px 13px;
  background: var(--lss-surface);
  min-width: 0;   /* anders krimpt een vak niet onder zijn tekst en schuift de rij */
}
.kengetal-label {
  font-size: var(--lss-fs-xs);
  letter-spacing: var(--lss-tracking-label);
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 600;
  margin-bottom: 5px;
}
.kengetal-n {
  font-size: var(--lss-fs-2xl);
  font-weight: 600;
  letter-spacing: var(--lss-tracking-kop);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kengetal-bij {
  font-size: 11.5px;
  color: var(--lss-faint);
  margin-top: 3px;
  /* De uitleg mag over twee regels; afkappen zou juist de klantnaam wegnemen
     ("Proefzorg · over 6 dagen") en dan moet je alsnog gaan zoeken. */
  line-height: 1.45;
}

/* De vakken even hoog, ook als de onderregel over twee regels loopt ("afgesproken ·
   nog niet gefactureerd"). Zonder dit lijnen de onderranden niet uit en oogt de rij
   scheef. De uitleg wordt onderaan geduwd, zodat de cijfers wél op één lijn staan. */
.kengetal { display: flex; flex-direction: column; }
.kengetal-bij { margin-top: auto; padding-top: 3px; }

/* Alleen kleuren als er iets ligt. Een vak dat altijd oranje is, is geen signaal.

   EEN NUL IS NIET GROEN. "Wacht op u: 0" betekent "er ligt niets", niet "goed
   gedaan" — en groen is in dit scherm al de kleur van "Actief". Een gekleurde nul
   trekt de aandacht naar precies het vak waar niets te zien is. Rustig = gedempt. */
.kengetal.let-op   { background: var(--lss-warn-bg); border-color: var(--lss-warn); }
.kengetal.let-op   .kengetal-n { color: var(--lss-warn); }
.kengetal.zwaar    { background: var(--lss-crit-bg); border-color: var(--lss-crit); }
.kengetal.zwaar    .kengetal-n { color: var(--lss-crit); }
.kengetal.rustig   .kengetal-n { color: var(--lss-faint); }
.kengetal.neutraal .kengetal-n { color: var(--lss-text); }
/* Nog niet te berekenen: gedempt en zonder cijfer, zodat het niet leest als "nul". */
.kengetal.leeg     .kengetal-n { color: var(--lss-faint); font-size: var(--lss-fs-lg); }

/* ── Aandacht op de kaart ────────────────────────────────────────────────────
   Een openstaande aanvraag was pas zichtbaar ná doorklikken. Nu staat het op de
   kaart zelf: een gekleurde rand links en een label rechts. */
/* Losse kaarten met ademruimte, niet één blok met scheidingslijntjes.
   Zonder tussenruimte lezen twee organisaties als één blok, en — belangrijker — de
   gekleurde rand links (die aandacht aangeeft) loopt over in de rand van de buur.
   Alleen in de ORGANISATIELIJST: de gebruikerslijst elders blijft een compacte lijst,
   want daar dragen de rijen minder en telt de dichtheid. */
#org-list {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  max-height: none;
}
#org-list .user-row {
  border: 1px solid var(--lss-border);
  border-radius: 8px;
  background: var(--lss-surface);
}
/* De zebra en de scheidingslijn van de compacte lijst horen hier niet: met een eigen
   rand en tussenruimte zijn ze dubbelop. */
#org-list .user-row:nth-child(even) { background: var(--lss-surface); }
/* .user-row:last-child haalt in de compacte lijst de onderrand weg; hier is die juist
   onderdeel van de kaart. Daarom expliciet terugzetten. */
#org-list .user-row:last-child      { border-bottom: 1px solid var(--lss-border); }
#org-list .user-row:hover           { border-color: var(--lss-border-mid); }

/* De aandachtsrand MOET specifieker zijn dan de kaartrand hierboven.
   `#org-list .user-row` (id + klasse) wint van `.user-row.heeft-signaal` (twee klassen)
   én staat er later — de oranje rand verdween daardoor volledig, terwijl beide regels
   er gewoon stonden. Alleen door te kijken gevonden. */
#org-list .user-row.heeft-signaal { border-left: 3px solid var(--lss-warn); }
#org-list .user-row.heeft-zwaar   { border-left: 3px solid var(--lss-crit); }
/* Ook buiten de organisatielijst, voor het geval de klasse elders wordt gebruikt. */
.user-row.heeft-signaal  { border-left: 3px solid var(--lss-warn); }
.user-row.heeft-zwaar    { border-left: 3px solid var(--lss-crit); }
.rij-signalen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.signaal {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 11px;
  white-space: nowrap;
}
.signaal.let-op { background: var(--lss-warn-bg); color: var(--lss-warn); }
.signaal.zwaar  { background: var(--lss-crit-bg); color: var(--lss-crit); }

/* ── Modulepillen op de organisatiekaart ─────────────────────────────────────
   WELKE modules een klant heeft, niet hoevéél. "3 apps" laat je alsnog doorklikken
   om te zien of DocGen erbij zit. Alle modules staan er: de afgenomen in accentkleur,
   de rest gedempt — zo zie je in één blik ook wat een klant NIET heeft. */
.mod-pillen { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.mod-pil {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--lss-border-soft);
  color: var(--lss-faint);
  white-space: nowrap;
}
.mod-pil.aan { background: var(--lss-accent-light); color: var(--lss-accent); }
/* Gepauzeerd is niet hetzelfde als niet-afgenomen: de afspraak loopt, hij ligt stil.
   Doorgestreept in plaats van gedempt, anders is het verschil onzichtbaar. */
.mod-pil.gepauzeerd {
  background: var(--lss-border-soft);
  color: var(--lss-muted);
  text-decoration: line-through;
}

/* ── Filterchips boven de organisatielijst ───────────────────────────────────
   Bij één klant overbodig, bij twintig het verschil tussen scannen en zoeken. */
.org-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: inherit;
  font-size: 11.5px;
  font-weight: 550;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--lss-border-mid);
  background: var(--lss-surface);
  color: var(--lss-muted);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--lss-faint); color: var(--lss-text); }
.chip.aan {
  background: var(--lss-accent-light);
  border-color: var(--lss-accent);
  color: var(--lss-accent);
  font-weight: 650;
}
/* Zichtbare toetsenbordfocus: de chips zijn knoppen en horen bereikbaar te zijn
   zonder muis. */
.chip:focus-visible { outline: 2px solid var(--lss-accent); outline-offset: 2px; }

/* De werkbalk mag afbreken op een smal scherm in plaats van uit beeld te lopen. */
.user-toolbar { flex-wrap: wrap; row-gap: 8px; }

/* ── De schil met zijbalk ────────────────────────────────────────────────────
   Dezelfde vorm als de klantmodules (Grid, Scope): een navigatiekolom naast de
   inhoud in plaats van negen panelen onder elkaar. Wat aandacht vraagt krijgt een
   telling in de navigatie — tot nu toe moest je een paneel openklappen om te zien
   of er iets in zat.

   grid en niet flex: met twee kolommen in een raster is 'min-width: 0' op de
   inhoudskolom genoeg om te voorkomen dat een brede tabel de pagina uitduwt. */
.met-zijbalk {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  /* GEEN max-width met margin:auto op het raster zelf. Dat centreert het geheel, en
     dan schuift de zijbalk mee naar het midden in plaats van tegen de vensterrand te
     blijven staan — precies zoals een navigatiekolom niet hoort te zitten.
     De leesbreedte hoort bij de INHOUD, niet bij de schil: zie .zij-inhoud > *. */
}

.zijbalk {
  /* Meelopen bij het scrollen, maar niet meerekken met de pagina: zonder de vaste
     hoogte werd de kolom in Grid 1815px hoog in een venster van 955. */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 0;
  border-right: 1px solid var(--lss-border);
  background: var(--lss-bg-soft);
}

.zij-groep {
  font-size: 10px;
  letter-spacing: var(--lss-tracking-label);
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 600;
  padding: 15px 16px 5px;
}
.zij-groep:first-child { padding-top: 4px; }

.zij-nav { list-style: none; margin: 0; padding: 0 8px; }
.zij-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lss-muted);
  text-decoration: none;
}
.zij-nav a:hover { background: var(--lss-surface); color: var(--lss-text); }
.zij-nav a svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.zij-nav a.is-current {
  background: var(--lss-accent-light);
  color: var(--lss-accent);
  font-weight: 650;
}
.zij-nav a.is-current svg { opacity: 1; }
.zij-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* De telling: waar ligt iets. Rechts uitgelijnd zodat de labels op één lijn blijven. */
.zij-tel {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--lss-warn-bg);
  color: var(--lss-warn);
  font-variant-numeric: tabular-nums;
}

.zij-inhoud {
  padding: 26px 28px 80px;
  min-width: 0;
}
/* De leesbreedte zit hier: de inhoud blijft leesbaar op een breed scherm, terwijl de
   zijbalk aan de rand blijft. Links uitgelijnd en niet gecentreerd — met een zijbalk
   ernaast leest gecentreerde inhoud als scheefgezakt. */
.zij-inhoud > * { max-width: 1100px; }

/* Smal scherm: de navigatie boven de inhoud in plaats van ernaast. Een vaste kolom
   van 208px laat op een telefoon te weinig over. */
@media (max-width: 860px) {
  .met-zijbalk { grid-template-columns: 1fr; }
  .zijbalk {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--lss-border);
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
  }
  .zij-groep { padding: 6px 12px 6px 16px; }
  .zij-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
  .zij-inhoud { padding: 18px 16px 60px; }
}

/* Wat er nog niet is: zichtbaar maar niet aanklikbaar — zoals in Grid. Weglaten zou
   de indruk wekken dat het niet bestaat; een link naar een lege pagina is erger. */
.zij-nav .komt-nog {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lss-muted);
  opacity: .45;
  cursor: default;
}
.zij-nav .komt-nog svg { width: 15px; height: 15px; flex: none; }

/* ── Rapportage: "Hoe het loopt" ─────────────────────────────────────────────
   Elk getal met een vergelijking erbij: een getal zonder richting laat de vraag
   "is dat veel?" onbeantwoord. */
.kengetal-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
/* Richting én tekst. Kleur alleen zou onleesbaar zijn voor wie die niet onderscheidt. */
.kengetal-trend.op     { color: var(--lss-ok); }
.kengetal-trend.af     { color: var(--lss-crit); }
.kengetal-trend.gelijk { color: var(--lss-faint); }

.rap-periode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--lss-muted);
}

/* Twee panelen naast elkaar op een breed scherm, onder elkaar op een smal. */
.rap-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.rap-kop { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rap-kop h2 { font-size: var(--lss-fs-lg); font-weight: 600; margin: 0; }
.rap-telling { font-size: 11.5px; color: var(--lss-faint); }

/* Wijde tabellen scrollen binnen hun eigen houder; de pagina zelf niet. */
.tabel-wrap { overflow-x: auto; }

.rap-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rap-tabel th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: var(--lss-tracking-label);
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 600;
  padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--lss-border);
  white-space: nowrap;
}
.rap-tabel td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--lss-border-soft);
  vertical-align: middle;
}
.rap-tabel tr:last-child td { border-bottom: 0; }
.rap-tabel .r { text-align: right; }
.rap-naam { font-weight: 550; }
.rap-mini { font-size: 11.5px; color: var(--lss-faint); }

.rap-tabel tfoot td {
  border-top: 1.5px solid var(--lss-border);
  border-bottom: 0;
  font-weight: 650;
  padding-top: 9px;
}

/* Een module die wordt afgenomen maar niet gebruikt is een signaal; een module die
   niemand afneemt is dat niet — die staat gedempt. */
.rap-stil td { color: var(--lss-faint); }
.rap-letop { background: var(--lss-warn-bg); }
.rap-scheiding td { border-top: 1px solid var(--lss-border); padding-top: 11px; }

/* Verhouding zonder een grafiek te tekenen. */
.rap-balk {
  display: block;
  height: 5px;
  min-width: 44px;
  border-radius: 3px;
  background: var(--lss-border-soft);
  overflow: hidden;
}
.rap-balk i { display: block; height: 100%; background: var(--lss-accent); border-radius: 3px; }
/* Nul openingen: geen balk maar een lege huls, zodat de rij niet leeg oogt. */
.rap-balk.leeg { opacity: .5; }

.rap-trend.op     { color: var(--lss-ok); }
.rap-trend.af     { color: var(--lss-crit); }
.rap-trend.gelijk { color: var(--lss-faint); }

.rap-proef {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--lss-warn-bg);
  color: var(--lss-warn);
  margin-left: 6px;
}

.rap-hint {
  font-size: 12px;
  color: var(--lss-faint);
  line-height: 1.5;
  margin: 10px 0 0;
  max-width: 60ch;
}

/* ── Klantpagina: tabs in plaats van tien panelen ────────────────────────────
   Stonden Modules, Bewaartermijnen, Ondertekenen, Facturatie, Bericht, Facturen,
   Verbruik, Gebruikers, Instellingen en Activiteit onder elkaar — allemaal even
   zwaar. Als tabs kiest u het onderwerp, en telt de balk mee wat aandacht vraagt. */
.kruimel {
  font-size: 12px;
  color: var(--lss-faint);
  margin-bottom: 10px;
}
.kruimel a { color: var(--lss-faint); text-decoration: none; }
.kruimel a:hover { color: var(--lss-accent); text-decoration: underline; }

.klant-kop {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.klant-kop-links { flex: 1 1 300px; min-width: 0; }
.klant-kop-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.klant-sub { color: var(--lss-muted); margin: 2px 0 0; font-size: 13px; }

/* Boven de tabs, niet erin: zonder complete factuurgegevens kan een abonnement niet
   ingaan. Achter een tab zou u dat pas zien als u er toevallig komt. */
.klant-waarschuwing {
  background: var(--lss-warn-bg);
  border-left: 3px solid var(--lss-warn);
  border-radius: 6px;
  padding: 12px 15px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.6;
}
.klant-waarschuwing a { color: var(--lss-warn); font-weight: 600; }

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--lss-border);
  margin-bottom: 16px;
  /* Bij zeven tabs op een smal scherm: schuiven in plaats van afbreken, zodat de
     balk één rij blijft en de volgorde herkenbaar. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 13px;
  color: var(--lss-faint);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab:hover { color: var(--lss-text); }
.tab.aan { color: var(--lss-accent); border-bottom-color: var(--lss-accent); }
.tab:focus-visible { outline: 2px solid var(--lss-accent); outline-offset: -2px; }

/* Twee soorten telling: een gewone zegt hoevéél er is, een waarschuwende dat er iets
   LIGT. Alleen die tweede krijgt kleur — anders went het weg. */
.tab-tel {
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--lss-border-soft);
  color: var(--lss-muted);
  font-variant-numeric: tabular-nums;
}
.tab-tel.waarsch { background: var(--lss-warn-bg); color: var(--lss-warn); }
.tab.aan .tab-tel { background: var(--lss-accent-light); color: var(--lss-accent); }
.tab.aan .tab-tel.waarsch { background: var(--lss-warn-bg); color: var(--lss-warn); }

/* Meerdere delen onder één tab: ruimte ertussen, want het zijn aparte onderwerpen. */
.tab-inhoud > .panel + .panel { margin-top: 14px; }

/* Kop binnen een tab die MEER dan één onderwerp bundelt (Gegevens, Facturatie).
   Bij één deel per tab zegt de tabnaam het al en zou een kop dubbelop zijn. */
.deel-kop { margin-bottom: 12px; }
.deel-kop h2 {
  font-size: var(--lss-fs-lg);
  font-weight: 600;
  margin: 0;
  letter-spacing: var(--lss-tracking-kop);
}
.deel-sub { font-size: 12.5px; color: var(--lss-faint); }

/* ── Exporteren ──────────────────────────────────────────────────────────────
   Met een keuze wat er meegaat: wie alleen namen nodig heeft, hoeft geen bestand
   met bedragen op zijn schijf te hebben. */
.export-blok { margin: 0 0 16px; }
.export-blok > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.export-blok > summary::-webkit-details-marker { display: none; }
.export-blok > summary::after { content: '▾'; font-size: 10px; }
.export-blok[open] > summary::after { content: '▴'; }

.export-vorm {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--lss-border);
  border-radius: 8px;
  background: var(--lss-surface);
  max-width: 640px;
}
.export-uitleg { font-size: 13px; color: var(--lss-muted); margin: 0 0 10px; }
.export-keuzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 14px;
  margin-bottom: 12px;
}
.export-keuze {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
}

/* De periodekiezer en de exportknoppen op één rij, met ruimte ertussen.
   NIET '.rap-balk': die naam was al in gebruik voor het balkje in de moduletabel
   (5 pixels hoog met overflow:hidden). De knoppenbalk werd daardoor 5 pixels hoog en
   de inhoud verdween — een naambotsing die alleen door te kijken opvalt. */
.rap-werkbalk {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rap-werkbalk .rap-periode { margin: 0; }
.rap-acties { display: flex; gap: 8px; margin-left: auto; }

/* ── Logboek ────────────────────────────────────────────────────────────────
   Klassen met voorvoegsel .log- : .logboek-* is al bezet door het klantportaal
   en .login-* door het aanmeldscherm. Een botsing daar zou stil misgaan. */

.log-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 20px;
  background: var(--lss-surface);
  border: 1px solid var(--lss-border);
  border-radius: 8px;
}
.log-filter { display: flex; flex-direction: column; gap: 5px; }
.log-filter > label {
  font-size: var(--lss-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lss-faint);
}
.log-filter select,
.log-filter input[type="date"] {
  padding: 6px 9px;
  font-size: 13px;
  color: var(--lss-text);
  background: var(--lss-surface);
  border: 1px solid var(--lss-border-mid);
  border-radius: 5px;
}
.log-filter select { max-width: 260px; }

.log-datums { display: flex; align-items: center; gap: 7px; }
.log-tot { font-size: 12px; color: var(--lss-faint); }

/* De schakelaar staat los van de drie keuzelijsten: hij beantwoordt een andere
   vraag ("is er iets aan de hand?") en hoort daarom niet in dezelfde rij te
   verdwijnen als de filters die je pas zet wanneer je al weet waar te kijken. */
.log-filter-schakel { justify-content: center; }
.log-schakelaar { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.log-schakel-uitleg { margin: 3px 0 0; font-size: var(--lss-fs-xs); color: var(--lss-faint); }

.log-filter-knoppen { flex-direction: row; gap: 8px; margin-left: auto; }

.log-telling { margin: 0 0 16px; font-size: 13px; color: var(--lss-faint); }
.log-hint { display: block; margin-top: 2px; font-size: var(--lss-fs-xs); }

.log-dag {
  margin: 22px 0 8px;
  font-size: var(--lss-fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lss-faint);
}
.log-dag:first-child { margin-top: 0; }

.log-lijst { display: flex; flex-direction: column; }
.log-regel {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--lss-border);
}
.log-regel:hover { background: var(--lss-surface-alt); }

/* Een afwijking krijgt een streep aan de zijkant, geen gekleurde achtergrond:
   de regel blijft leesbaar en het oog vindt hem toch in één blik. Kleur alleen
   zou wegvallen voor wie die niet onderscheidt -- de streep blijft zichtbaar. */
.log-regel.is-afwijking {
  border-left: 3px solid var(--lss-crit);
  padding-left: 9px;
  background: var(--lss-crit-bg);
}

.log-tijd {
  flex: 0 0 44px;
  font-size: 12.5px;
  color: var(--lss-faint);
  font-variant-numeric: tabular-nums;
}
.log-kern { flex: 1 1 auto; min-width: 0; }
.log-wat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.log-soort { font-weight: 600; color: var(--lss-text); }
.log-org { font-size: 12px; color: var(--lss-faint); text-decoration: none; }
.log-org:hover { text-decoration: underline; }
.log-org-platform { font-style: italic; }
.log-omschrijving { margin-top: 2px; color: var(--lss-text); }
.log-wie {
  flex: 0 0 auto;
  max-width: 200px;
  font-size: 12px;
  color: var(--lss-faint);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Op een telefoon staat de regel te krap voor drie kolommen: tijd en actor
   schuiven dan onder de omschrijving in plaats van ernaast. */
@media (max-width: 720px) {
  .log-filters { flex-direction: column; align-items: stretch; }
  .log-filter select { max-width: none; }
  .log-filter-knoppen { margin-left: 0; }
  .log-regel { flex-wrap: wrap; gap: 4px 12px; }
  .log-kern { flex: 1 1 100%; order: 2; }
  .log-wie { order: 3; text-align: left; max-width: none; }
}

/* Zoekveld en de twee doorzoekbare keuzevelden: zelfde maat als de rest van de
   filterbalk, zodat de rij één geheel blijft. */
.log-filter input[type="search"],
.log-filter input[type="text"] {
  padding: 6px 9px;
  font-size: 13px;
  color: var(--lss-text);
  background: var(--lss-surface);
  border: 1px solid var(--lss-border-mid);
  border-radius: 5px;
  min-width: 190px;
}
.log-filter-zoek input[type="search"] { min-width: 220px; }

/* ── Bladeren ─────────────────────────────────────────────────────────────── */
.log-blader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 20px 0 8px;
}
.log-blad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--lss-text);
  text-decoration: none;
  background: var(--lss-surface);
  border: 1px solid var(--lss-border);
  border-radius: 5px;
}
.log-blad:hover { border-color: var(--lss-border-mid); }

/* De huidige pagina is geen link maar een toestand: omkeren in plaats van alleen
   een randje, zodat je hem vindt zonder te zoeken. */
.log-blad.is-nu {
  font-weight: 600;
  color: var(--lss-bg);
  background: var(--lss-text);
  border-color: var(--lss-text);
}
/* Uitgeschakeld: zichtbaar aanwezig maar duidelijk niet aanklikbaar. Weglaten zou
   de balk laten verspringen zodra je op de eerste of laatste pagina komt. */
.log-blad.is-uit { color: var(--lss-faint); background: transparent; border-color: transparent; }
.log-blad-gat { padding: 0 4px; color: var(--lss-faint); font-size: 13px; }

@media (max-width: 720px) {
  .log-filter input[type="search"],
  .log-filter input[type="text"] { min-width: 0; width: 100%; }
  .log-blader { justify-content: center; }
}

/* ── Merk in de zijbalk (klantportaal) ──────────────────────────────────────
   Boven het logo van de organisatie, onder klein wie het levert. Alleen het
   klantportaal geeft 'merk' mee; aan de beheerkant verandert er niets. */

/* De zijbalk wordt een kolom zodra hij een voet draagt, zodat die onderaan
   plakt in plaats van direct onder het laatste menu-item te hangen.
   Een klasse en geen :has(): dat laatste wordt hier nergens anders gebruikt, en
   als het niet werkt zakt de voet omhoog zonder dat iets daarover klaagt. De
   klasse wordt in _zijbalk.php gezet, waar ook bekend is of er een voet komt. */
.zijbalk.met-voet {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.zijbalk.met-voet .zij-nav:last-of-type { margin-bottom: auto; }

.zij-merk {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--lss-border);
}
.zij-merk-logo {
  max-width: 132px;
  max-height: 34px;
  /* object-fit zodat een breed of hoog logo niet vervormt; een uitgerekt logo
     van een klant is erger dan een klein logo. */
  object-fit: contain;
}
/* Geen logo: een initiaal plus de naam. Nooit een leeg vlak op de plek waar de
   organisatie hoort te staan. */
.zij-merk-letter {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--lss-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.zij-merk-naam {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--lss-text);
  /* Een lange organisatienaam mag de kolom niet oprekken. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zij-voet {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-top: 1px solid var(--lss-border);
  font-size: 10.5px;
  color: var(--lss-faint);
}
.zij-lev-merk {
  /* Het logo is hoger dan breed (477x681), dus de HOOGTE begrenzen; met een vaste
     breedte wordt het te lang en duwt het de regel uit elkaar. */
  height: 18px;
  width: auto;
  flex-shrink: 0;
  opacity: .55;
}

/* Twee varianten in de HTML, één zichtbaar. In lichte modus het donkere logo. */
.zij-lev-merk.licht { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zij-lev-merk       { display: none; }
  :root:not([data-theme="light"]) .zij-lev-merk.licht { display: inline; }
}

:root[data-theme="dark"] .zij-lev-merk       { display: none; }
:root[data-theme="dark"] .zij-lev-merk.licht { display: inline; }

/* De lege plaatshouder waar anders de merknaam staat: houdt de gebruikersnaam
   rechts op zijn plek. */
.brand-leeg { display: block; }

@media (max-width: 860px) {
  /* Op smal scherm klapt de zijbalk boven de inhoud; een voet die dan tussen
     navigatie en inhoud valt, leest als ruis. */
  .zij-voet { display: none; }
  .zij-merk { padding-bottom: 10px; }
}

/* ── Lichte maatvoering: het klantportaal ───────────────────────────────────
   Overgenomen uit docs/ontwerp/portaal-wireframe.html. Daar is bewust "een maat
   kleiner" gekozen, met hairlines in plaats van dozen: structuur uit uitlijning
   en witruimte, niet uit randen en schaduwen om elk blok.

   Alleen binnen .licht, zodat de beheerkant blijft zoals hij was. */

.licht .page-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 4px;
}
.licht .page-sub {
  font-size: 12.5px;
  margin: 0 0 16px;
}

/* Panelen HOUDEN hun rand -- lichter, niet weg.
   Ik las "hairlines in plaats van dozen" eerst als "geen randen"; dat sloeg op de
   kengetallen, niet op panelen. Het wireframe zet ze op 1px met radius 8 en zonder
   schaduw: dat is wat "een maat kleiner" hier betekent. Zonder rand vallen blokken
   in elkaar en verdwijnt de ademruimte. */
.licht .panel {
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--lss-surface);
  border: 1px solid var(--lss-border);
  border-radius: 8px;
  box-shadow: none;
}
.licht .panel h2 {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0;
  margin: 0 0 8px;
}

/* Lopende tekst en tabellen één maat kleiner.
   Op .zij-inhoud en niet op .licht zelf: dat laatste omvat ook de zijbalk, en
   .zij-label zet geen eigen maat — die zou dan meeschalen en de navigatie
   ongevraagd veranderen. */
/* Iets meer lucht bovenaan nu de kop kleiner is: anders plakt de titel tegen
   de bovenrand. */
.licht .zij-inhoud { font-size: 13px; padding-top: 22px; }
.licht .muted { font-size: 12.5px; }
.licht table { font-size: 13px; }
.licht thead th {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 650;
  padding: 7px 11px;
}
.licht tbody td { padding: 0 11px; height: var(--lss-rij); }

/* Knoppen en formuliervelden mee omlaag, anders steken ze uit boven de tekst
   die eromheen staat. */
.licht .btn,
.licht button,
.licht input,
.licht select,
.licht textarea { font-size: 12.5px; }

/* Tegels in de lichte maatvoering: kleiner raster, minder binnenruimte, geen
   schaduw. Het wireframe zet ze op 196px met 10px gaten en 13/14px padding;
   het platform stond op 210px met 18px gaten en 22px padding — vandaar dat ze
   groot en leeg oogden. */
.licht .tiles {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.licht .tile {
  padding: 13px 14px;
  border-radius: 8px;
  gap: 8px;
  box-shadow: none;
}
.licht .tile:hover {
  border-color: var(--lss-accent);
  box-shadow: none;
  transform: none;
}
/* Het icoon in de tegel: de vastgestelde set is een lijntekening, geen vlak. Een
   gevulde achtergrond eronder maakt er weer een knop van. */
.licht .tile-icon {
  color: var(--lss-accent);
  background: none;
  padding: 0;
  width: auto;
  height: auto;
}
.licht .tile-icon svg { width: 24px; height: 24px; }
.licht .tile-name { font-size: 13px; font-weight: 620; }

/* ── Knoppen, velden en ademruimte in de lichte maatvoering ─────────────────
   Het wireframe zet knoppen op 5/11px met radius 6; het platform stond op
   10/18px met radius 9 en een losse margin-top van 18px. Die marge duwde elke
   knop omlaag ten opzichte van het veld ernaast — vandaar de scheve uitlijning. */

.licht .btn:not(.btn-sm),
.licht button:not(.zij-item):not(.b2):not(.btn-sm) {
  /* .btn-sm uitgezonderd: die heeft zijn eigen, kleinere maat verderop. Zonder deze
     uitzondering wint dEZE regel -- niet door volgorde maar door SPECIFICITEIT: twee
     :not()'s tellen mee, en `.licht .btn-sm` weegt daar niet tegenop. Gemeten in de
     browser; op de bronvolgorde alleen kwam ik er niet, want die klopte al. */
  margin-top: 0;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 550;
}
/* Een knop die op een eigen regel staat heeft wél lucht nodig; staat hij in een
   rij naast een veld, dan niet -- dan hoort hij op dezelfde lijn.
   :not() op de rij-vormen, want anders duwt deze regel de knop uit de rij en
   valt hij eronder. Precies wat er gebeurde bij de afdelingen. */
.licht form:not(.grant-form):not(.row-form) > .btn,
.licht form:not(.grant-form):not(.row-form) > button { margin-top: 12px; }

.licht .field,
.licht input[type="text"],
.licht input[type="email"],
.licht input[type="search"],
.licht input[type="url"],
.licht input[type="date"],
.licht input[type="number"],
.licht select,
.licht textarea {
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 12.5px;
}


/* Uitlijnen: een knop naast een veld hoort op dezelfde onderlijn te staan, niet
   een paar pixels lager. */
.licht .acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ADEMRUIMTE boven een sectiekopje. Stond op margin:0 en plakte daardoor tegen
   de scheidingslijn erboven; het oog leest de kop dan als onderdeel van het blok
   ERBOVEN in plaats van als aankondiging van wat volgt. */
.licht .acties-label {
  margin: 22px 0 10px;
  font-size: 10.5px;
  letter-spacing: .07em;
}
.licht .acties-label:first-child { margin-top: 0; }

/* Tabelkoppen en -rijen strakker: de kop kreeg te veel hoogte waardoor de kolommen
   los kwamen te staan van hun inhoud. */
.licht thead th { padding: 6px 10px; }
.licht tbody td { padding: 6px 10px; height: auto; min-height: var(--lss-rij); }

/* De kleine varianten NA de algemene regel: gelijke specificiteit, dus de laatste
   wint. Stonden ze ervoor, dan kreeg .btn-sm alsnog de maat van .btn -- gemeten:
   5px 11px in plaats van 4px 9px. */
/* :not(.btn-sm) in de ALGEMENE regel hierboven zou netter zijn, maar die staat er
   al met twee :not()'s. Hier dezelfde specificiteit teruggeven, anders verliest de
   kleine variant: `.licht button:not(a):not(b)` telt zwaarder dan `.licht .btn-sm`.
   Gemeten in de browser -- op volgorde alleen kwam ik er niet, want die klopte al. */
.licht .field-sm { padding: 5px 8px; border-radius: 5px; font-size: 12px; }
.licht .btn-sm   { padding: 4px 9px;  border-radius: 5px; font-size: 12px; }

/* De opslaanknop staat ONDER de vinkjes, en dat hoort zo.
   Ik heb er vijf metingen aan besteed voordat ik het commentaar bij .grant-form las:
   "onder elkaar met de knop eronder, anders wordt de kolom bij vier afdelingen breder
   dan de rest van de tabel". Bij Aafje is er een afdeling, dus valt het op -- maar de
   keuze klopt. Niet de richting veranderen; alleen de maten verkleinen. */
.licht .grant-form { gap: 5px; }
.licht .grant-form .footer-check { font-size: 12px; }
.licht .grant-form .btn-sm { padding: 3px 8px; font-size: 11.5px; }

/* Pillen (rollen, applicaties): kleiner en met minder ronding, zodat ze naast de
   tekst passen in plaats van erbovenuit te steken. */
.licht .pil,
.licht .tag,
.licht .badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Modulelijst in het klantportaal ────────────────────────────────────────
   Uit het wireframe: naam, status, voorwaarde en bedrag op één regel, gescheiden
   door hairlines. Afgenomen en niet-afgenomen door elkaar, want het gaat over
   dezelfde modules. */

/* EEN RASTER, geen flexrij per regel.
   Met flex bepaalt elke regel zijn eigen breedtes: de ene status is "actief" en de
   andere "niet afgenomen", en dan begint de grijze tekst erachter overal op een
   andere plek. Vier vaste kolommen lijnen alles uit -- dat is wat het zakelijk
   maakt. subgrid zou netter zijn maar wordt nog niet overal ondersteund; dezelfde
   kolomdefinitie op de rijen doet hetzelfde. */
.modlijst { display: flex; flex-direction: column; }
.modrij {
  display: grid;
  grid-template-columns: 104px 116px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lss-border);
  font-size: 13px;
}
.modrij:last-child { border-bottom: none; }
/* Een lopend opzegverzoek: een rand links, geen gevuld vlak. De regel blijft
   leesbaar en het oog vindt hem toch. */
.modrij.let-op {
  border-left: 3px solid var(--lss-warn);
  padding-left: 9px;
  margin-left: -12px;
}

/* De statuspil krijgt een eigen kolom en staat links uitgelijnd daarbinnen, zodat
   alle pillen op dezelfde x beginnen -- ook als de tekst erin verschilt. */
.mod-naam { font-weight: 600; }
.mod-st {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 650;
  white-space: nowrap;
  /* justify-self, want in een raster vult een element anders de hele kolom en
     wordt de pil zo breed als de kolom zelf. */
  justify-self: start;
}
.mod-st.aan   { background: var(--lss-ok-bg);   color: var(--lss-ok); }
.mod-st.uit   { background: var(--lss-bg-soft); color: var(--lss-faint); }
.mod-st.vraag { background: var(--lss-warn-bg); color: var(--lss-warn); }

.mod-info {
  min-width: 0;
  font-size: 11.5px;
  color: var(--lss-faint);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mod-bedrag {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* De knop rechts uitlijnen met de bedragen erboven: een knop die links in zijn
   kolom begint staat niet op één lijn met de cijfers. */
.mod-actie, .mod-intrek { margin: 0; justify-self: end; }

/* Een tekstlink voor handelingen die lichter wegen dan een knop.
   LET OP: "intrekken" gebruikt dit NIET meer. Dat staat in dezelfde kolom als
   "Aanvragen" en is de omkering van diezelfde handeling -- twee verschillende vormen
   naast elkaar laten de een op een knop lijken en de ander op een voetnoot. */
.link-knop {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--lss-accent);
  text-decoration: underline;
  cursor: pointer;
}
.link-knop:hover { color: var(--lss-accent-hover); }

.modlijst-voet {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--lss-border);
  font-size: 11.5px;
  color: var(--lss-faint);
}

.opzeg-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 720px) {
  /* Op smal scherm past vier kolommen niet: naam en status op de eerste regel,
     de toelichting eronder over de volle breedte. */
  .modrij {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .mod-naam   { grid-column: 1; }
  .mod-st     { grid-column: 2; justify-self: end; }
  .mod-info   { grid-column: 1 / -1; }
  .mod-bedrag { grid-column: 1 / -1; text-align: left; }
  .mod-actie  { grid-column: 1 / -1; justify-self: start; }
}

/* ── Tweede navigatieregel ──────────────────────────────────────────────────
   Uit het wireframe: links het hoofdobject met telling, daarna de perspectieven
   erop. Scope en DocGen hebben deze laag al; het portaal miste hem, en daardoor
   stond alles naast elkaar op één scherm.

   Geen tabbladen die inhoud verbergen maar echte links: elk perspectief heeft een
   eigen adres, zodat je het kunt delen en de browserknop werkt. */

.balk2 {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--lss-border);
  overflow-x: auto;
}
.b2 {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--lss-faint);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.b2:hover { color: var(--lss-text-sec, var(--lss-text)); }
.b2.aan { color: var(--lss-accent); border-bottom-color: var(--lss-accent); }

/* Het hoofdobject links: wát je bekijkt, met hoeveel het er zijn. Gescheiden door
   een streep, want het is geen perspectief maar de titel ervan. */
.b2-hoofd {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lss-text);
  padding: 8px 14px 8px 0;
  margin-right: 6px;
  border-right: 1px solid var(--lss-border);
  white-space: nowrap;
}
.b2-hoofd .tel { color: var(--lss-faint); font-weight: 500; font-variant-numeric: tabular-nums; }

.b2 .tel {
  margin-left: 5px;
  font-size: 10.5px;
  background: var(--lss-bg-soft);
  color: var(--lss-faint);
  border-radius: 8px;
  padding: 0 5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.b2.aan .tel { background: var(--lss-accent-light); color: var(--lss-accent); }
/* Een telling die aandacht vraagt: dezelfde vorm, andere kleur. */
.b2 .tel.let { background: var(--lss-warn-bg); color: var(--lss-warn); }



/* ── Facturen ───────────────────────────────────────────────────────────────
   Volgt docs/ontwerp/facturen-wireframe.html. Zes kolommen, want een zakelijke
   klant heeft ze allemaal nodig: excl. btw is wat de boekhouding boekt, incl. is
   wat er van de rekening gaat.

   Dezelfde kolomdefinitie op kop, rijen én totaal -- anders lijnt de kop niet uit
   met wat eronder staat, en dat is precies wat een tabel onbruikbaar maakt. */

.fkop, .frij, .ftotaal {
  display: grid;
  grid-template-columns: 96px 104px minmax(0, 1fr) 92px 92px auto;
  gap: 11px;
  align-items: center;
}
.fkop {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--lss-border);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 650;
}
.fkop .r { text-align: right; }

.frij {
  padding: 9px 0;
  border-bottom: 1px solid var(--lss-border);
  font-size: 13px;
}
.frij:last-of-type { border-bottom: none; }
/* Te laat: een rand links, geen rode regel. De regel blijft leesbaar en het oog
   vindt hem toch -- en het werkt ook voor wie kleur niet onderscheidt. */
.frij.let {
  border-left: 3px solid var(--lss-warn);
  padding-left: 9px;
  margin-left: -12px;
}

.f-nr { font-weight: 600; font-variant-numeric: tabular-nums; }
.f-st {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 650;
  justify-self: start;
  white-space: nowrap;
}
.f-st.ok   { background: var(--lss-ok-bg);   color: var(--lss-ok); }
.f-st.open { background: var(--lss-warn-bg); color: var(--lss-warn); }
.f-st.uit  { background: var(--lss-bg-soft); color: var(--lss-faint); }
/* Een creditnota is niet goed, niet fout en niet dringend -- hij is administratief.
   Vandaar --lss-indicatief en NIET de accentkleur: die is de huisstijl van de klant,
   en dan wordt een statuspil bij de ene klant paars en bij de andere rood. Een status
   hoort een betekenis te dragen, geen merk. De drie buren (ok/warn/neutraal) staan
   om diezelfde reden ook op vaste betekeniskleuren. */
.f-st.cred { background: var(--lss-indicatief-bg); color: var(--lss-indicatief); }

.f-info {
  font-size: 11.5px;
  color: var(--lss-faint);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
/* Bedragen rechts uitgelijnd met tabular-nums: dan staan de komma's onder elkaar
   en is een kolom in één oogopslag op te tellen. */
.f-excl, .f-incl { text-align: right; font-variant-numeric: tabular-nums; }
.f-excl { font-size: 12px; color: var(--lss-faint); }
.f-incl { font-weight: 600; }

.f-pdf {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lss-accent);
  text-decoration: none;
  padding: 2px 7px;
  border: 1px solid var(--lss-border-mid);
  border-radius: 4px;
  white-space: nowrap;
}
.f-pdf:hover { border-color: var(--lss-accent); }

.ftotaal {
  padding: 10px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--lss-border);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ftotaal .lab { grid-column: 1 / 4; color: var(--lss-faint); }
.ftotaal .a, .ftotaal .b { text-align: right; font-weight: 600; }

/* Kengetallen zonder kader: zwevend tussen twee hairlines. Dat scheelt per getal
   een rand, een schaduw en een achtergrond -- en juist die ruimte maakt het rustig. */
.kg-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border-top: 1px solid var(--lss-border);
  border-bottom: 1px solid var(--lss-border);
  margin: 0 0 14px;
}
.kg { padding: 11px 15px 12px; border-right: 1px solid var(--lss-border); }
.kg:last-child { border-right: none; }
.kg-l {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 650;
  margin-bottom: 4px;
}
.kg-n {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kg-s { font-size: 11.5px; color: var(--lss-faint); margin-top: 2px; }
.kg.raak .kg-n { color: var(--lss-warn); }
.kg.rust .kg-n { color: var(--lss-faint); }

/* De referentieregel: wat er op elke factuur meegaat. */
.fact-ref {
  font-size: 12px;
  color: var(--lss-faint);
  margin: 0 0 12px;
}
.fact-ref strong { color: var(--lss-text); font-weight: 600; }
.fact-ref-l { font-size: 11px; }
.fact-ref a { margin-left: 8px; }
.fact-ref.let {
  padding: 8px 11px;
  background: var(--lss-warn-bg);
  border-radius: 6px;
  color: var(--lss-warn);
}

.fact-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.fact-spacer { flex: 1; }
.fact-filters .chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--lss-border-mid);
  background: var(--lss-surface);
  color: var(--lss-text-sec, var(--lss-faint));
  text-decoration: none;
  font-weight: 520;
}
.fact-filters .chip.aan {
  background: var(--lss-accent-light);
  border-color: var(--lss-accent);
  color: var(--lss-accent);
  font-weight: 620;
}

@media (max-width: 760px) {
  .fkop { display: none; }
  .frij, .ftotaal { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .f-nr    { grid-column: 1; }
  .f-st    { grid-column: 2; justify-self: end; }
  .f-info  { grid-column: 1 / -1; }
  .f-excl  { grid-column: 1; text-align: left; }
  .f-incl  { grid-column: 2; }
  .f-pdf   { grid-column: 1 / -1; justify-self: start; }
  .ftotaal .lab { grid-column: 1 / -1; }
}

/* ── De zijbalk over de VOLLE hoogte ────────────────────────────────────────
   Zonder topbalk erboven begint de kolom bij 0 en loopt hij tot onderaan het
   venster. Daarvoor stond hij 72px lager en stak hij er evenveel onderuit —
   precies waar "Geleverd door LS Insight" hangt.

   Alleen binnen .licht: de beheerkant houdt zijn topbalk. */
.licht .zijbalk {
  height: 100vh;
  top: 0;
}
/* De inhoudskolom vangt de ruimte op die de topbalk liet vallen. Niet op nul:
   dan plakt de gebruikersregel tegen de bovenrand van het venster. */
.licht .zij-inhoud { padding-top: 14px; }

/* Wie is er ingelogd: rechtsboven in de inhoud, gescheiden door een hairline.
   Geen balk over de volle breedte — die zou de zijbalk weer naar beneden duwen. */
.zij-kop {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 0 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--lss-border);
  font-size: 12.5px;
  /* De leesbreedte geldt voor de INHOUD, niet voor deze regel: een scheidingslijn
     die halverwege het scherm ophoudt leest als een afgebroken tabel. Gemeten:
     hij stopte op 1336 in een venster van 1798. */
  max-width: none;
}
.zij-kop .who { color: var(--lss-faint); }

/* In welke hoedanigheid iemand kijkt. Een pil en geen platte tekst: het is een
   eigenschap van de bezoeker, geen zin. Bij twee rollen staat er 'Zorgverkoper ·
   Beheerder' -- de reden dat zijn menu ruimer is dan dat van een collega. */
/* Waar een module over gaat, onder de naam. Kleiner en gedempt: de naam is waar je op
   klikt, dit is de toelichting. */
.tile-wat { font-size: 11.5px; color: var(--lss-faint); margin-top: 3px; line-height: 1.35; }

/* ── Huisstijl ───────────────────────────────────────────────────────────────
   Twee kolommen: logo links, kleur rechts. Daaronder de leveranciersvermelding. */
.hs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .hs-split { grid-template-columns: 1fr; } }
.hs-kop { font-size: 11px; font-weight: 650; letter-spacing: .07em;
          text-transform: uppercase; color: var(--lss-faint); margin-bottom: 9px; }
.hs-kolom { min-width: 0; }
.hs-bij { font-size: 11.5px; color: var(--lss-faint); margin: 10px 0 0;
          line-height: 1.5; max-width: 46ch; }

/* Het lege logovak gestippeld: dat leest als "hier kan iets" en niet als een fout. */
.hs-leeg { border: 1px dashed var(--lss-border-mid); border-radius: 8px;
           padding: 20px 16px; text-align: center; font-size: 12.5px;
           color: var(--lss-faint); background: var(--lss-bg-soft); }
.hs-logo { border: 1px solid var(--lss-border); border-radius: 8px; padding: 14px;
           background: var(--lss-surface); margin-bottom: 9px; }
.hs-logo img { max-height: 48px; max-width: 100%; display: block; }
.hs-form { margin-top: 9px; display: flex; flex-direction: column;
           align-items: flex-start; gap: 6px; }

.hs-kleur-rij { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
/* Het staal groot genoeg om aan te klikken, met een rand zodat wit ook zichtbaar is. */
.hs-staal { width: 40px; height: 32px; padding: 0; border: 1px solid var(--lss-border);
            border-radius: 6px; background: none; cursor: pointer; }
.hs-hex { max-width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          text-transform: uppercase; }

.hs-onder { margin-top: 22px; padding-top: 18px;
            border-top: 1px solid var(--lss-border-soft); }
.hs-voet-rij { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px;
               max-width: 70ch; }

/* ── Beveiliging ─────────────────────────────────────────────────────────────
   Drie blokken onder elkaar, gescheiden door hairlines: tekst links, actie rechts.
   Eén scherm en geen drie -- wie zich afvraagt "is dit veilig genoeg" wil die drie
   dingen bij elkaar zien. */
.bev-blok { display: flex; gap: 24px; align-items: flex-start;
            padding: 16px 0; border-bottom: 1px solid var(--lss-border-soft); }
.bev-blok.laatste { border-bottom: 0; padding-bottom: 4px; }
.bev-blok:first-child { padding-top: 4px; }
.bev-tekst { flex: 1; min-width: 0; }
.bev-tekst h2 { font-size: 14.5px; font-weight: 650; margin: 0 0 5px; }
.bev-tekst p  { font-size: 13px; margin: 0 0 6px; max-width: 68ch; }
.bev-tekst p:last-child { margin-bottom: 0; }
.bev-actie { flex: none; text-align: right; display: flex; flex-direction: column;
             align-items: flex-end; gap: 7px; }
.bev-sinds { font-size: 11.5px; }

/* Het bezoek van LS Insight: in een eigen vlak, want het is een FEIT en geen uitleg. */
.bev-bezoek { margin-top: 9px; padding: 9px 12px; background: var(--lss-bg-soft);
              border-radius: 6px; font-size: 12.5px; }

/* De inschrijfstap. Alleen zichtbaar terwijl er een geheim klaarstaat. */
.bev-instellen { margin: 4px 0 16px; padding: 16px 18px;
                 background: var(--lss-bg-soft); border-radius: 8px; }
.bev-instellen h3 { font-size: 13.5px; font-weight: 650; margin: 0 0 8px; }
.bev-stappen { margin: 0 0 14px; padding-left: 20px; font-size: 12.5px;
               color: var(--lss-text); max-width: 70ch; }
.bev-stappen li { margin-bottom: 4px; }
.bev-qr-rij { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.bev-qr { flex: none; }
.bev-qr img { display: block; border: 1px solid var(--lss-border); border-radius: 8px;
              background: #fff; padding: 8px; }
/* Terwijl hij tekent, of als het misging: de sleutel eronder werkt altijd. */
.bev-qr-laden { width: 190px; min-height: 190px; display: grid; place-items: center;
                text-align: center; font-size: 11.5px; color: var(--lss-faint);
                background: var(--lss-bg-soft); border: 1px solid var(--lss-border);
                border-radius: 8px; padding: 12px; }
.bev-qr-uit { background: var(--lss-surface); border: 1px solid var(--lss-border);
              border-radius: 8px; padding: 14px 16px; min-width: 240px; }
.bev-qr-kop { font-size: 11px; font-weight: 650; letter-spacing: .06em;
              text-transform: uppercase; color: var(--lss-faint); margin-bottom: 7px; }
/* De sleutel groot en in mono: hij wordt met de hand overgetikt, en dan telt elk teken. */
.bev-qr-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
               font-size: 15px; letter-spacing: .04em; line-height: 1.6;
               word-break: break-all; }
.bev-qr-bij { font-size: 11px; color: var(--lss-faint); margin-top: 8px; }
.bev-code { flex: 1; min-width: 200px; }
.bev-veld { max-width: 140px; font-size: 18px; letter-spacing: .12em;
            text-align: center; font-variant-numeric: tabular-nums; }
.bev-hand { font-size: 11.5px; margin-top: 10px; }
.bev-sleutel { font-size: 12px; }

/* ── Vandaag ─────────────────────────────────────────────────────────────────
   Kengetallen boven, wat aandacht vraagt eronder. Betekeniskleuren alleen waar
   ze IETS zeggen: nul aflopend is goed nieuws en krijgt geen kleur. */
/* Het ondertekenblok is gedeeld met de beheerkant, waar een <fieldset> met <legend>
   past bij de rest. In het portaal botst die browserrand met de panelen -- daar hoort een
   zacht vlak met een kopje, net als de bewerkblokken bij Gebruikers.

   Alleen BINNEN het portaal: de beheerkant houdt zijn eigen vorm. */
.met-zijbalk.licht .sleutelblok {
  border: 1px solid var(--lss-border);
  border-radius: 8px;
  background: var(--lss-bg-soft);
  padding: 14px 16px 16px;
  margin: 4px 0 16px;
}
.met-zijbalk.licht .sleutelblok > legend {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lss-faint);
  padding: 0 4px;
}
/* Invoervelden niet over de volle breedte: een sleutel van 40 tekens in een veld van
   900 pixels leest als een fout.

   ⚠️ Mét display:block op het label. Een <label> is van zichzelf inline, en zolang het
   veld de volle breedte had viel het er vanzelf boven. Zodra ik het veld smaller maakte
   schoof het label ernaast -- "Integratiesleutel [veld] Secret key" op één regel. */
.met-zijbalk.licht .sleutelblok .form-label { display: block; margin-top: 10px; }
.met-zijbalk.licht .sleutelblok input[type="text"],
.met-zijbalk.licht .sleutelblok input[type="password"],
.met-zijbalk.licht .sleutelblok textarea { display: block; max-width: 520px; width: 100%; }

.vd-kengetallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
                  gap: 11px; margin-bottom: 18px; }
/* ⚠️ NIET .kg: die naam is al in gebruik op het factuurscherm, waar de kengetallen
   ZWEVEND tussen twee hairlines staan zonder kaartrand. Mijn versie hier is een kaartje
   met gekleurde bovenrand, en die won door bronvolgorde -- het factuurscherm kreeg
   daardoor een kaartrand bovenop zijn scheidingslijn.

   Twee betekenissen voor één klassenaam botsen stil: er verschijnt geen fout, alleen een
   streep op de verkeerde plek. */
.vd-kg { background: var(--lss-surface); border: 1px solid var(--lss-border);
         border-top: 3px solid var(--lss-border); border-radius: 8px; padding: 13px 15px 14px; }
.vd-kg-label { font-size: 11.5px; color: var(--lss-text); font-weight: 600; }
.vd-kg-getal { font-size: 26px; font-weight: 680; letter-spacing: -.02em;
               margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.vd-kg-bij   { font-size: 11.5px; color: var(--lss-faint); }
.vd-kg-bij strong { color: var(--lss-text); font-weight: 600; }
.vd-kg.kg-let  { border-top-color: var(--lss-warn-rand); }
.vd-kg.kg-fout { border-top-color: var(--lss-crit); }

/* Per module een blok met een kop: bij twee modules met allebei "Loopt binnenkort af"
   is anders niet te zien welke wat meldt. */
.mod-blok { margin-bottom: 22px; }
.mod-kop  { font-size: 12px; font-weight: 650; letter-spacing: .07em;
            text-transform: uppercase; color: var(--lss-faint); margin: 0 0 9px; }

.leeg-blok { padding: 28px 18px; text-align: center; color: var(--lss-faint);
             font-size: 13px; background: var(--lss-surface);
             border: 1px solid var(--lss-border); border-radius: 8px; margin-bottom: 16px; }

.zij-kop .who-rol {
  font-size: 11.5px;
  font-weight: 620;
  padding: 2px 9px;
  border-radius: 11px;
  background: var(--lss-accent-light);
  color: var(--lss-accent);
  margin-right: 10px;
  white-space: nowrap;
}
.zij-kop .logout { color: var(--lss-accent); text-decoration: none; font-weight: 550; }
.zij-kop .logout:hover { text-decoration: underline; }

@media (max-width: 860px) {
  /* Op smal scherm klapt de zijbalk boven de inhoud; dan is 100vh juist verkeerd. */
  .licht .zijbalk { height: auto; }
}

/* Een veld dat wél getoond maar niet gewijzigd wordt: de waarde als tekst, met de
   reden erbij. Een uitgeschakeld invoerveld zou suggereren dat het tijdelijk niet
   kan; dit zegt dat het een afspraak is. */
.vast-veld { display: flex; flex-direction: column; gap: 4px; }
.vast-veld > span {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 650;
}
.vast-waarde {
  margin: 0;
  padding: 5px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lss-text);
}
.vast-bij {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--lss-faint);
}

/* ── De mensenlijst ─────────────────────────────────────────────────────────
   Volgt het wireframe: vier kolommen die je LEEST, handelingen achter een menu.
   Wat er stond was een bewerkformulier per rij — zeven cellen waarvan drie
   formulieren, waardoor een lijst van drie mensen even druk oogde als een
   invulscherm. */

.mensen { width: 100%; border-collapse: collapse; font-size: 13px; }
.mensen thead th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 650;
  padding: 6px 10px;
  border-bottom: 1px solid var(--lss-border);
  white-space: nowrap;
}
.mensen td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--lss-border);
  vertical-align: top;
}
.mensen tbody tr:last-child td { border-bottom: none; }
.mensen .w-menu { width: 34px; text-align: right; }

.mens-naam { font-weight: 600; color: var(--lss-text); }
.mens-mail { font-size: 11.5px; color: var(--lss-faint); margin-top: 1px; }
.mens-bij  { font-size: 11px;   color: var(--lss-faint); margin-top: 2px; }
/* Een gedeactiveerde rij gedempt, niet doorgestreept: hij bestaat nog, hij doet
   alleen niet mee. */
.mens.uit .mens-naam { color: var(--lss-faint); }

/* Alleen een markering als er iets aan de hand is. Een label bij elke rij die het
   gewoon doet, is ruis. */
.mens-vlag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 650;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: 1px;
}
.mens-vlag.uit   { background: var(--lss-bg-soft); color: var(--lss-faint); }
.mens-vlag.wacht { background: var(--lss-warn-bg); color: var(--lss-warn); }

.rolpil {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--lss-bg-soft);
  color: var(--lss-text-sec, var(--lss-faint));
  white-space: nowrap;
}
/* De eigenaar krijgt het accent: dat is de rol met de meeste macht en die hoort
   op te vallen zonder een waarschuwing te zijn. */
.rolpil.eigenaar { background: var(--lss-accent-light); color: var(--lss-accent); }

.mens-menu {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 15px;
  line-height: 1;
  color: var(--lss-faint);
  cursor: pointer;
}
.mens-menu:hover { background: var(--lss-bg-soft); border-color: var(--lss-border); }
.mens-menu[aria-expanded="true"] {
  background: var(--lss-accent-light);
  border-color: var(--lss-accent);
  color: var(--lss-accent);
}

/* De bewerkregel: alles wat eerst in de rij stond, nu onder de persoon. */
.mens-bew > td { background: var(--lss-bg-soft); padding: 14px 12px; }
.bew-vakken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.bew-vak h4 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lss-faint);
  font-weight: 650;
}
.bew-form  { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bew-veld  { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.bew-veld > span { font-size: 11px; color: var(--lss-faint); }
.bew-veld .field-sm { width: 100%; }
.bew-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 2px 0; }
.bew-acties { display: flex; flex-wrap: wrap; gap: 7px; }
.bew-acties form { margin: 0; }
.bew-bij { margin: 8px 0 0; font-size: 11px; color: var(--lss-faint); }

/* ── Scope: wat iemand ziet ──────────────────────────────────────────────────
   Twee keuzerondjes met de afdelingsvakjes eronder. De vakjes springen in en worden
   gedempt zodra "de hele organisatie" aan staat: ze blijven leesbaar (de keuze blijft
   bewaard) maar zijn duidelijk niet wat er nu telt. */
.scope-keuze { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.scope-keuze input { margin-top: 3px; flex: none; }
.scope-keuze strong { display: block; font-size: 12.5px; font-weight: 600; }
.scope-keuze em { display: block; font-size: 11px; color: var(--lss-faint); font-style: normal; margin-top: 1px; }

.scope-vakjes { margin: 2px 0 0 24px; padding-left: 11px; border-left: 2px solid var(--lss-border); }

/* Gedempt, niet verborgen: wie de brede stand weer uitzet moet kunnen zien waar hij op
   terugvalt. Verbergen zou dat pas na het opslaan tonen. */
.scope-form:has(input[value="alles"]:checked) .scope-vakjes { opacity: .45; }

.scope-telling { margin: 9px 0 0; font-size: 11.5px; color: var(--lss-faint);
                 font-variant-numeric: tabular-nums; }
.scope-telling strong { color: var(--lss-text); font-weight: 600; }

/* "alle contracten" in de lijst: feitelijk, geen waarschuwing -- dus de gewone tekstkleur
   en geen betekeniskleur. Overkoepelend zijn is een keuze, geen probleem. */
.ziet-alles { font-weight: 600; color: var(--lss-text); }

/* ── Tekenbevoegdheid ────────────────────────────────────────────────────────
   Bedrag vooraan en op tabelcijfers: bedragen onder elkaar horen uit te lijnen,
   anders moet je ze lezen in plaats van vergelijken. */
.teken-lijst { list-style: none; margin: 0 0 11px; padding: 0; }
.teken-lijst li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
                  font-size: 12.5px; border-bottom: 1px solid var(--lss-border-soft); }
.teken-lijst li:last-child { border-bottom: 0; }
.teken-bedrag { font-weight: 650; font-variant-numeric: tabular-nums; }
.teken-waar   { color: var(--lss-faint); }
.teken-tot    { color: var(--lss-faint); font-size: 11.5px; margin-left: auto; }

/* Verlopen blijft LEESBAAR, alleen gedempt met een streep: het is geschiedenis, geen
   fout. Wegnemen zou "wie mocht dit vorig jaar tekenen" onbeantwoordbaar maken. */
.teken-lijst li.verlopen .teken-bedrag { text-decoration: line-through; color: var(--lss-faint); }
.teken-lijst li.verlopen .teken-tot    { color: var(--lss-warn); }

.teken-weg { margin-left: 6px; }
.teken-x { border: 0; background: none; color: var(--lss-faint); cursor: pointer;
           font-size: 15px; line-height: 1; padding: 0 3px; }
.teken-x:hover { color: var(--lss-crit); }
.teken-form .bew-veld { margin-bottom: 7px; }

/* Dezelfde demping als bij Scope: de vakjes blijven leesbaar maar zijn duidelijk niet
   wat er nu telt. Verbergen zou pas na het opslaan tonen waar je op terugvalt. */
.teken-form:has(input[value="alles"]:checked) .teken-vakjes { opacity: .45; }
.teken-vakjes { margin-top: 2px; }
.teken-uitleg { margin: 0 0 9px !important; }

/* ── Rolvakjes ───────────────────────────────────────────────────────────────
   Aankruisvakjes in plaats van een keuzelijst: één persoon kan meerdere rollen
   hebben. Enkelvoudig is gewoon één vakje aan. */
.rol-vakjes { display: flex; flex-direction: column; gap: 2px; margin: 3px 0 0; }
.rol-vakje { display: flex; gap: 8px; align-items: flex-start; padding: 5px 7px;
             border-radius: 5px; cursor: pointer; }
.rol-vakje:hover { background: var(--lss-bg-soft); }
.rol-vakje input { margin-top: 3px; flex: none; }
.rol-vakje strong { display: block; font-size: 12.5px; font-weight: 600; }
.rol-vakje em { display: block; font-size: 11px; color: var(--lss-faint);
                font-style: normal; margin-top: 1px; line-height: 1.4; }

/* De aangevinkte rollen lichten op, zodat je in één oogopslag ziet wat iemand IS --
   niet alleen wat hij kan worden. */
.rol-vakje.aan { background: var(--lss-accent-light); }
.rol-vakje.aan strong { color: var(--lss-accent); }

/* Toegang per applicatie: aanklikbare pillen. Aan = toegang, klik = intrekken.
   Eén element voor twee toestanden, want het is één vraag: mag deze persoon erin? */
.bew-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.bew-app  { margin: 0; }
.app-pil {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--lss-border-mid);
  background: var(--lss-surface);
  color: var(--lss-faint);
  cursor: pointer;
  white-space: nowrap;
}
.app-pil:hover { border-color: var(--lss-accent); color: var(--lss-accent); }
.app-pil.aan {
  background: var(--lss-accent-light);
  border-color: var(--lss-accent);
  color: var(--lss-accent);
}

.btn.gevaar { color: var(--lss-crit); border-color: var(--lss-crit); }
.btn.gevaar:hover:not(:disabled) { background: var(--lss-crit-bg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 760px) {
  .mensen thead { display: none; }
  .mensen td { display: block; border-bottom: none; padding: 3px 10px; }
  .mensen tr.mens { display: block; border-bottom: 1px solid var(--lss-border); padding: 8px 0; }
  .mensen .w-menu { position: absolute; right: 10px; }
  .mens { position: relative; }
}

/* ── Sub-verwerkers ───────────────────────────────────────────────────────────
   Vier kolommen die je LEEST. De breedtes zijn ongelijk met opzet: "welke
   gegevens" is de kolom waar het om gaat en krijgt de meeste ruimte, "waar"
   is één woord. */
.sv-kop,
.sv-rij {
  display: grid;
  grid-template-columns: 150px 1fr 1.4fr 120px;
  gap: var(--lss-sp-3);
  align-items: baseline;
  padding: 10px 16px;
}

.sv-kop {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lss-faint);
  border-bottom: 1px solid var(--lss-border);
}

.sv-rij + .sv-rij,
.sv-groep + .sv-rij { border-top: 1px solid var(--lss-border-soft); }

.sv-groep {
  padding: 14px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lss-faint);
}

.sv-naam { font-weight: 600; font-size: 13px; }
.sv-doel,
.sv-geg  { font-size: 12.5px; color: var(--lss-muted); }
.sv-waar { font-size: 12px; color: var(--lss-faint); }

/* Buiten de EU: opvallend maar niet alarmerend. Het is een feit dat aandacht
   verdient, geen fout -- vandaar de waarschuwingskleur en niet de kritieke. */
.sv-waar.uit { color: var(--lss-warn); font-weight: 600; }

.sv-let {
  margin: 0 0 var(--lss-sp-4);
  padding: 10px 14px;
  border-radius: var(--lss-r-md);
  background: var(--lss-warn-bg);
  color: var(--lss-warn);
  font-size: 13px;
  line-height: 1.55;
}

.sv-geen,
.sv-voet {
  margin: var(--lss-sp-4) 0 0;
  font-size: 12.5px;
  color: var(--lss-faint);
  line-height: 1.6;
}

@media (max-width: 760px) {
  /* Op een telefoon past vier kolommen niet; dan onder elkaar met een label
     ervoor, want zonder kopregel is niet te zien wat je leest. */
  .sv-kop { display: none; }

  .sv-rij {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 14px;
  }

  .sv-doel::before { content: 'Waarvoor: '; color: var(--lss-faint); }
  .sv-geg::before  { content: 'Gegevens: '; color: var(--lss-faint); }
  .sv-waar::before { content: 'Waar: ';     color: var(--lss-faint); font-weight: 400; }
}

/* ── Rechten van betrokkenen (AVG art. 15, 17 en 20) ──────────────────────────
   Een lijst met verzoeken en een uitklap met het verslag. Het verslag zelf komt
   uit een CLI-script en gebruikt inspringing en kolommen die betekenis dragen;
   dat blijft dus <pre> en krijgt geen tekstopmaak. */
.bet-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--lss-sp-3);
}

.bet-veld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 220px;
}

.bet-veld > span {
  font-size: 12px;
  color: var(--lss-faint);
}

.bet-veld:nth-of-type(2) { min-width: 340px; flex: 1; }

.bet-bij {
  margin: var(--lss-sp-3) 0 0;
  font-size: 12.5px;
  color: var(--lss-faint);
  line-height: 1.6;
}

.bet-kop,
.bet-rij {
  display: grid;
  grid-template-columns: 1.4fr 120px 170px 140px 110px;
  gap: var(--lss-sp-3);
  align-items: center;
  padding: 10px 16px;
}

.bet-kop {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lss-faint);
  border-bottom: 1px solid var(--lss-border);
}

.bet-rij + .bet-rij { border-top: 1px solid var(--lss-border-soft); }
.bet-rij.open       { background: var(--lss-bg-soft); }

.bet-wie   { font-weight: 600; font-size: 13px; }
.bet-soort,
.bet-datum { font-size: 12.5px; color: var(--lss-muted); font-variant-numeric: tabular-nums; }
.bet-acties { text-align: right; }

/* Statuskleuren zijn BETEKENIS en volgen niet de huisstijl: een verzoek dat wacht
   hoort er bij elke klant hetzelfde uit te zien. */
.bet-st {
  /* justify-self en niet display:inline-block: een grid-CEL rekt op tot de
     kolombreedte, en dan wordt een pil van vier woorden een balk van 140 pixels.
     Gemeten in beeld, niet in de code -- in de HTML is er niets aan te zien. */
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.bet-st.ok    { background: var(--lss-ok-bg);         color: var(--lss-ok); }
.bet-st.let   { background: var(--lss-warn-bg);       color: var(--lss-warn); }
.bet-st.fout  { background: var(--lss-crit-bg);       color: var(--lss-crit); }
.bet-st.bezig { background: var(--lss-indicatief-bg); color: var(--lss-indicatief); }
.bet-st.wacht { background: var(--lss-bg-soft);       color: var(--lss-faint); }

.bet-uit {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--lss-border-soft);
  background: var(--lss-bg-soft);
}

.bet-verslag {
  margin: 12px 0 0;
  padding: 14px 16px;
  max-height: 460px;
  overflow: auto;
  border-radius: var(--lss-r-md);
  background: var(--lss-surface);
  border: 1px solid var(--lss-border-soft);
  font-family: var(--lss-font-mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.bet-fout {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--lss-r-md);
  background: var(--lss-crit-bg);
  color: var(--lss-crit);
  font-size: 13px;
}

/* Het bevestigblok: nadrukkelijk, want hierachter zit iets onomkeerbaars. */
.bet-bevestig {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--lss-r-md);
  border: 1px solid var(--lss-warn-rand);
  background: var(--lss-warn-bg);
}

.bet-bevestig p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lss-warn);
}

@media (max-width: 860px) {
  .bet-kop { display: none; }

  .bet-rij {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .bet-wie   { grid-column: 1 / -1; }
  .bet-acties { grid-column: 2; }
}

/* ── Overeenkomsten (klantkant) ───────────────────────────────────────────────
   Alleen teruglezen: een lijst met links, geen formulieren. */
.ovk-let {
  margin: 0 0 var(--lss-sp-4);
  padding: 10px 14px;
  border-radius: var(--lss-r-md);
  background: var(--lss-warn-bg);
  color: var(--lss-warn);
  font-size: 13px;
  line-height: 1.55;
}

.ovk-rij { padding: 12px 16px; }
.ovk-rij + .ovk-rij { border-top: 1px solid var(--lss-border-soft); }

.ovk-hoofd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--lss-sp-2);
}

.ovk-soort {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lss-faint);
}

.ovk-titel { font-size: 13.5px; font-weight: 600; }

.ovk-bij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lss-sp-3);
  margin-top: 3px;
  font-size: 12px;
  color: var(--lss-faint);
  font-variant-numeric: tabular-nums;
}

.ovk-uit { color: var(--lss-warn); font-weight: 600; }

.ovk-voet {
  margin: var(--lss-sp-4) 0 0;
  font-size: 12.5px;
  color: var(--lss-faint);
  line-height: 1.6;
}

/* ── Datalekken (beheerkant) ──────────────────────────────────────────────────
   Een registratieformulier en een lijst met de meldtermijn erbij. */
.dl-form,
.dl-besluit {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--lss-sp-3);
  align-items: end;
}

.dl-veld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dl-veld.breed { grid-column: 1 / -1; }

.dl-veld > span {
  font-size: 12px;
  color: var(--lss-faint);
}

.dl-veld > span em { font-style: normal; opacity: .8; }

.dl-form > .btn,
.dl-besluit > .btn { grid-column: 1 / -1; justify-self: start; }

.dl-kop,
.dl-rij {
  display: grid;
  grid-template-columns: 140px 150px 1fr 150px 100px;
  gap: var(--lss-sp-3);
  align-items: center;
  padding: 10px 16px;
}

.dl-kop {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lss-faint);
  border-bottom: 1px solid var(--lss-border);
}

.dl-rij + .dl-rij { border-top: 1px solid var(--lss-border-soft); }
.dl-rij.open      { background: var(--lss-bg-soft); }

.dl-datum { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--lss-muted); }
.dl-wie   { font-size: 12.5px; font-weight: 600; }
.dl-wat   { font-size: 12.5px; color: var(--lss-muted); }
.dl-acties { text-align: right; }

/* De meldtermijn: kleur ÉN tekst. Alleen kleur is voor sommige mensen geen signaal,
   en juist hier mag de boodschap daar niet van afhangen. */
.dl-klok {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.dl-klok.gemeld    { background: var(--lss-ok-bg);         color: var(--lss-ok); }
.dl-klok.afgewogen { background: var(--lss-ok-bg);         color: var(--lss-ok); }
.dl-klok.loopt     { background: var(--lss-indicatief-bg); color: var(--lss-indicatief); }
.dl-klok.dringend  { background: var(--lss-warn-bg);       color: var(--lss-warn); }
.dl-klok.verlopen  { background: var(--lss-crit-bg);       color: var(--lss-crit); }

.dl-uit {
  padding: 14px 16px 20px;
  border-top: 1px solid var(--lss-border-soft);
  background: var(--lss-bg-soft);
}

.dl-feiten {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px var(--lss-sp-3);
  margin: 0 0 var(--lss-sp-4);
  font-size: 13px;
}

.dl-feiten dt { color: var(--lss-faint); font-size: 12px; }
.dl-feiten dd { margin: 0; line-height: 1.55; }

@media (max-width: 900px) {
  .dl-form,
  .dl-besluit,
  .dl-feiten { grid-template-columns: 1fr; }

  .dl-kop { display: none; }

  .dl-rij {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .dl-wat { grid-column: 1 / -1; }
}

/* ── Documenten van een klant (beheerkant) ────────────────────────────────────
   Lijst met verwijzingen plus een invulblok eronder. */
.kdoc-lijst { margin-bottom: var(--lss-sp-4); }

.kdoc-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lss-sp-3);
  padding: 10px 0;
}

.kdoc-rij + .kdoc-rij { border-top: 1px solid var(--lss-border-soft); }

.kdoc-soort {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lss-faint);
}

.kdoc-titel { font-size: 13px; font-weight: 600; }

.kdoc-bij {
  margin-top: 2px;
  font-size: 12px;
  color: var(--lss-faint);
  font-variant-numeric: tabular-nums;
}

.kdoc-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: var(--lss-sp-3);
  align-items: end;
  padding-top: var(--lss-sp-3);
  border-top: 1px solid var(--lss-border-soft);
}

.kdoc-veld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.kdoc-veld.breed { grid-column: 1 / -1; }

.kdoc-veld > span { font-size: 12px; color: var(--lss-faint); }
.kdoc-veld > span em { font-style: normal; opacity: .8; }

.kdoc-form > .btn { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 760px) {
  .kdoc-form { grid-template-columns: 1fr; }
  .kdoc-rij  { flex-direction: column; }
}

/* ── Platforminstellingen ─────────────────────────────────────────────────────
   Een invulformulier met per veld waar de waarde vandaan komt. */
/* Eén grondvorm met een modificator, en niet twee losse klassen die allebei een
   basisblok krijgen. Dat laatste maakt lastig te zien welke regel wint -- en een
   toets die op dubbele grondvormen let, kan het verschil tussen opzet en botsing
   niet zien. */
.inst-melding {
  margin: 0 0 var(--lss-sp-4);
  padding: 10px 14px;
  border-radius: var(--lss-r-md);
  font-size: 13px;
  line-height: 1.55;
  background: var(--lss-ok-bg);
  color: var(--lss-ok);
}

.inst-melding.let { background: var(--lss-warn-bg); color: var(--lss-warn); }

.inst-form {
  display: flex;
  flex-direction: column;
  gap: var(--lss-sp-4);
  max-width: 620px;
}

.inst-veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inst-veld > span {
  display: flex;
  align-items: baseline;
  gap: var(--lss-sp-2);
  font-size: 12.5px;
  font-weight: 600;
}

/* Waar de waarde vandaan komt. Staat hij in .env, dan wint dat en is het veld
   uitgeschakeld -- dat hoort te zien te zijn, niet te ontdekken na het opslaan. */
.inst-bron {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lss-bg-soft);
  color: var(--lss-faint);
}

.inst-bron.ok { background: var(--lss-ok-bg); color: var(--lss-ok); }

.inst-uitleg {
  font-style: normal;
  font-size: 12px;
  color: var(--lss-faint);
  line-height: 1.5;
}

.inst-form > .btn { align-self: flex-start; }

.inst-proef {
  display: flex;
  align-items: center;
  gap: var(--lss-sp-3);
  margin-top: var(--lss-sp-5);
  padding-top: var(--lss-sp-4);
  border-top: 1px solid var(--lss-border-soft);
  font-size: 12.5px;
}

.inst-voet {
  margin: var(--lss-sp-4) 0 0;
  font-size: 12.5px;
  color: var(--lss-faint);
}

/* ── Het factuurlogo instellen ────────────────────────────────────────────────
   Een uploadveld met twee knoppen ernaast: terug naar de standaard, en aan/uit. */
.inst-logo {
  display: flex;
  flex-direction: column;
  gap: var(--lss-sp-3);
  margin-bottom: var(--lss-sp-5);
  padding-bottom: var(--lss-sp-4);
  border-bottom: 1px solid var(--lss-border-soft);
  max-width: 620px;
}

.inst-logo-nu {
  display: flex;
  gap: var(--lss-sp-2);
  align-items: center;
}

.inst-logo-form {
  display: flex;
  /* flex-start en niet flex-end: het veld heeft een uitlegregel eronder, dus met
     "onderaan uitlijnen" hangt de knop ter hoogte van die uitleg in plaats van naast
     het invoerveld. In beeld gezien, niet in de code. */
  align-items: flex-start;
  gap: var(--lss-sp-3);
  flex-wrap: wrap;
}

/* De knop op de hoogte van het invoerveld zelf: het label erboven is ~19px hoog. */
.inst-logo-form > .btn { margin-top: 19px; }

.inst-logo-form .inst-veld { flex: 1 1 300px; }

.inst-logo-acties {
  display: flex;
  gap: var(--lss-sp-2);
  flex-wrap: wrap;
}

/* Het logovoorbeeld: klein, met een kader zodat een doorzichtige achtergrond
   zichtbaar is als vlak en niet als niets. */
.inst-logo-beeld {
  height: 46px;
  width: auto;
  padding: 5px 8px;
  border: 1px solid var(--lss-border-soft);
  border-radius: var(--lss-r-sm);
  background: #fff;
}

.inst-logo-labels {
  display: flex;
  gap: var(--lss-sp-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ── Licentie en looptijd (klantscherm, beheerkant) ───────────────────────────
   Onder het abonnementsblok: status en de drie datums die erbij horen. */
.lic-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: var(--lss-sp-3);
  align-items: end;
  margin-top: var(--lss-sp-4);
  padding-top: var(--lss-sp-4);
  border-top: 1px solid var(--lss-border-soft);
}

.lic-kop {
  grid-column: 1 / -1;
  font-size: 12.5px;
  font-weight: 600;
}

.lic-veld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lic-veld > span { font-size: 12px; color: var(--lss-faint); }

.lic-form > .btn { grid-column: 1 / -1; justify-self: start; }

.lic-bij {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--lss-faint);
  line-height: 1.6;
}

@media (max-width: 620px) {
  .lic-form { grid-template-columns: 1fr; }
}

/* ── Uitzonderingen op de rol ───────────────────────────────────────────────
   Sluit aan op .teken-lijst: hetzelfde blok in dezelfde uitklapregel, dus
   dezelfde maatvoering. Wat hier anders is, is anders BEDOELD.

   Het plusje/minnetje draagt de betekenis die de rest van de regel niet kan
   dragen: "mag dit wél" en "mag dit juist niet" zien er in tekst bijna
   hetzelfde uit, en dat is precies de verwarring die je bij rechten niet wilt. */
.uitz-lijst { list-style: none; margin: 0 0 11px; padding: 0; }
.uitz-lijst li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
                 font-size: 12.5px; border-bottom: 1px solid var(--lss-border-soft); }
.uitz-lijst li:last-child { border-bottom: 0; }

.uitz-teken { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
              display: inline-flex; align-items: center; justify-content: center;
              font-weight: 700; font-size: 11px; line-height: 1; }
.uitz-teken.mag     { background: var(--lss-ok-bg);   color: var(--lss-ok); }
.uitz-teken.magniet { background: var(--lss-crit-bg); color: var(--lss-crit); }

.uitz-wat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uitz-wat strong { font-weight: 600; }
.uitz-wat em { font-style: normal; color: var(--lss-faint); font-size: 11.5px; }

.uitz-tot { margin-left: auto; flex: 0 0 auto; }
.uitz-vlag { font-size: 11px; color: var(--lss-faint); white-space: nowrap; }

/* "Permanent" is geen neutrale mededeling maar een signaal: zo'n uitzondering is
   bedoeld als incident en wordt vanzelf inrichting. Vandaar de nadruk -- oranje,
   niet rood: het is niet fout, het vraagt aandacht. */
.uitz-vlag.blijvend { color: var(--lss-warn); font-weight: 600; }
.uitz-vlag.bijna    { color: var(--lss-warn); }
.uitz-vlag.verlopen { color: var(--lss-faint); }

/* Verlopen blijft leesbaar met een streep, net als bij tekenbevoegdheid: het is
   geschiedenis, geen fout. Wegnemen zou "wie mocht dit vorig jaar" onbeantwoordbaar
   maken. */
.uitz-lijst li.verlopen .uitz-wat strong { text-decoration: line-through;
                                           color: var(--lss-faint); }
.uitz-lijst li.verlopen .uitz-teken { opacity: .45; }

.uitz-weg { margin-left: 6px; }
.uitz-form .bew-veld { margin-bottom: 7px; }
.uitz-form select.field-sm { width: 100%; }

/* De waarschuwing bij een lege einddatum, ingesprongen onder het veld waar hij
   over gaat. */
.uitz-let { border-left: 2px solid var(--lss-warn-rand); padding-left: 7px;
            margin: -3px 0 9px; }

/* ── Uitzonderingen in het rechtenscherm ──────────────────────────────────── */
.uitz-overzicht { margin-top: var(--lss-sp-5); }
.uitz-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.uitz-tabel th { text-align: left; font-size: 11px; letter-spacing: var(--lss-tracking-label);
                 text-transform: uppercase; color: var(--lss-faint);
                 border-bottom: 1px solid var(--lss-border); padding: 0 8px 5px 0; }
.uitz-tabel td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--lss-border-soft);
                 vertical-align: baseline; }
.uitz-tabel tr.verlopen td { color: var(--lss-faint); }
.uitz-tabel tr.verlopen .uitz-wat strong { text-decoration: line-through; }

/* De telling bovenaan het overzicht: vier getallen die samen vertellen of de
   uitzonderingen nog uitzonderingen zíjn. */
.uitz-tel { display: flex; gap: var(--lss-sp-5); margin-bottom: var(--lss-sp-4);
            flex-wrap: wrap; }
.uitz-tel div { display: flex; flex-direction: column; gap: 2px; }
.uitz-tel .getal { font-size: var(--lss-fs-xl); font-weight: 650;
                   font-variant-numeric: tabular-nums; line-height: 1; }
.uitz-tel .label { font-size: 11px; color: var(--lss-faint);
                   letter-spacing: var(--lss-tracking-label); text-transform: uppercase; }
.uitz-tel .getal.let { color: var(--lss-warn); }

/* Op een telefoon staan de kolommen niet naast elkaar; de regel wordt een blokje.
   Zonder dit loopt de tabel buiten het scherm en scrollt de hele pagina zijwaarts. */
@media (max-width: 640px) {
  .uitz-lijst li { flex-wrap: wrap; }
  .uitz-tot { margin-left: 24px; flex-basis: 100%; }
  .uitz-tabel, .uitz-tabel tbody, .uitz-tabel tr, .uitz-tabel td { display: block; width: 100%; }
  .uitz-tabel thead { display: none; }
  .uitz-tabel tr { border-bottom: 1px solid var(--lss-border); padding: 7px 0; }
  .uitz-tabel td { border: 0; padding: 2px 0; }
}

/* ── Tarifering ─────────────────────────────────────────────────────────────
   Twee tabbladen op het instellingenscherm: de rekenmachine waarmee de prijs wordt
   uitgelegd, en de bedragen waar die uit voortkomt. Alle kleuren uit tokens.css --
   een verzonnen variabele geeft geen foutmelding, alleen geen kleur. */

.tarief-tabs {
  display: flex;
  gap: var(--lss-sp-1);
  border-bottom: 1px solid var(--lss-border);
  margin-bottom: var(--lss-sp-4);
}
.tarief-tab {
  padding: var(--lss-sp-2) var(--lss-sp-4);
  font-size: var(--lss-fs-sm);
  color: var(--lss-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--lss-overgang);
}
.tarief-tab:hover { color: var(--lss-text); }
.tarief-tab.aan {
  color: var(--lss-accent);
  border-bottom-color: var(--lss-accent);
  font-weight: 600;
}

/* De rekenmachine: gebruikersaantal en modules naast elkaar, knop erachteraan. */
.tarief-reken {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--lss-sp-5);
  padding: var(--lss-sp-4);
  background: var(--lss-bg-soft);
  border-radius: var(--lss-r-md);
  margin-bottom: var(--lss-sp-4);
}
.tarief-reken-veld { display: flex; flex-direction: column; gap: var(--lss-sp-1); }
.tarief-reken-veld > span {
  font-size: var(--lss-fs-xs);
  color: var(--lss-muted);
  letter-spacing: var(--lss-tracking-label);
}
.tarief-reken-veld input[type="number"] { width: 5rem; }
.tarief-vinkjes { display: flex; gap: var(--lss-sp-4); }
.tarief-vinkjes label {
  display: flex;
  align-items: center;
  gap: var(--lss-sp-1);
  font-size: var(--lss-fs-sm);
}

.tarief-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lss-fs-sm);
  margin-bottom: var(--lss-sp-3);
}
.tarief-tabel th {
  text-align: left;
  font-weight: 500;
  font-size: var(--lss-fs-xs);
  color: var(--lss-muted);
  letter-spacing: var(--lss-tracking-label);
  padding: var(--lss-sp-1) 0;
  border-bottom: 1px solid var(--lss-border);
}
.tarief-tabel td { padding: var(--lss-sp-2) 0; border-bottom: 1px solid var(--lss-border-light); }
.tarief-tabel .rechts { text-align: right; }
/* Cijfers die onder elkaar staan horen uit te lijnen. */
.tarief-tabel .getal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarief-tabel .sterk { font-weight: 600; }
.tarief-tabel tfoot td {
  border-bottom: none;
  border-top: 1px solid var(--lss-border);
  padding-top: var(--lss-sp-2);
}
.tarief-tabel tfoot .totaal { font-size: var(--lss-fs-lg); font-weight: 600; }
.tarief-tabel tfoot tr.muted td { color: var(--lss-muted); border-top: none; padding-top: 0; }

/* Het rangnummer: dit maakt "de duurste blijft vol tarief" zichtbaar in plaats van
   een bewering in een zin. */
.tarief-rang {
  color: var(--lss-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--lss-fs-xs);
}
.tarief-opbouw {
  font-size: var(--lss-fs-xs);
  color: var(--lss-muted);
  margin-top: 2px;
}
.tarief-korting {
  color: var(--lss-ok);
  font-variant-numeric: tabular-nums;
}

.tarief-kop {
  font-size: var(--lss-fs-md);
  font-weight: 600;
  margin: var(--lss-sp-6) 0 var(--lss-sp-2);
}
.tarief-vouw { margin: var(--lss-sp-3) 0 var(--lss-sp-5); }
.tarief-vouw > summary {
  cursor: pointer;
  font-size: var(--lss-fs-sm);
  color: var(--lss-accent);
}

/* Een afwijkende kortingsafspraak op de klantpagina. */
.tarief-afspraak {
  border-left: 3px solid var(--lss-warn-rand);
  background: var(--lss-warn-bg);
  padding: var(--lss-sp-3) var(--lss-sp-4);
  border-radius: var(--lss-r-sm);
  margin: var(--lss-sp-3) 0;
  font-size: var(--lss-fs-sm);
}

@media (max-width: 640px) {
  .tarief-reken { gap: var(--lss-sp-3); }
  .tarief-vinkjes { flex-wrap: wrap; }
  /* Een tabel die niet past hoort te schuiven, niet de pagina mee te trekken. */
  .tarief-tabel { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Instellingenscherm ─────────────────────────────────────────────────────
   Drie blokken die zelden allemaal tegelijk nodig zijn. Ingeklapt tenzij je er een
   opent -- de R2-instellingen stel je bij het inrichten in, de factuurgegevens een
   keer, en de tarifering wijzigt zelden. */
.inst-deel > summary {
  cursor: pointer; list-style: none;
  padding: 4px 0; border-radius: 6px;
}
.inst-deel > summary::-webkit-details-marker { display: none; }

/* Een eigen driehoekje: het standaardteken staat op de eerste regel en springt weg
   zodra de kop twee regels heeft. */
.inst-deel > summary::before {
  content: '▸'; display: inline-block; width: 1.1em;
  color: var(--lss-faint); transition: transform .12s ease;
}
.inst-deel[open] > summary::before { transform: rotate(90deg); }

.inst-deel > summary:hover h2 { color: var(--accent, #2563eb); }
.inst-deel > summary h2 { display: inline; }
.inst-deel > summary .deel-sub { display: block; margin-left: 1.1em; }

/* De uitkomst van een handeling: blijft in beeld, ook als je halverwege de pagina
   staat. Een melding bovenaan een lange pagina wordt niet gelezen -- gemeld op
   4 sep 2026 als "Verbinding proberen doet niets", terwijl hij het wél deed. */
.inst-uitkomst {
  position: sticky; top: 12px; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.inst-uitkomst > span { flex: 1; }
.inst-uitkomst-x {
  border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: inherit; opacity: .55;
  padding: 0 2px;
}
.inst-uitkomst-x:hover { opacity: 1; }

/* Kleur kiezen én kunnen plakken: de kiezer voor wie wil zoeken, het tekstveld voor
   wie een hexwaarde uit een huisstijlgids overneemt. */
.inst-kleur { display: inline-flex; align-items: center; gap: 8px; }
.inst-kleur-kiezer {
  width: 34px; height: 30px; padding: 0; border: 1px solid var(--border, #d5d9e0);
  border-radius: 6px; background: none; cursor: pointer; flex: none;
}
.inst-kleur-kiezer:disabled { cursor: default; opacity: .5; }
.inst-kleur-hex { font-family: ui-monospace, "SF Mono", Menlo, monospace; max-width: 9rem; }