/* App-eigen aanvullingen op Rustig (docs/AGENTS.md). tokens.css en bundle.css blijven ongewijzigd; dit bestand bevat alleen
   wat de app extra nodig heeft, uitsluitend met tokens. De enige vaste kleuren zijn die van een QR-code en het camerabeeld. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
:root:not([data-theme]) { color-scheme: light dark; }
.hidden { display: none !important; }
code.mono, .mono, textarea.mono { font-family: var(--font-mono); }
textarea.mono { font-size: 0.9688rem; }
.select-wrap { min-width: 0; }
.select-wrap > .select { width: 100%; }
.table-wrap select.select { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
/* Cellen hebben een kleinere letter; een invoerveld onder 16px laat iOS bij focus inzoomen en verschuift de pagina. */
.table-wrap td .input, .table-wrap td .select, .table-wrap td .textarea { font-size: 1rem; }
.alert { margin-bottom: var(--space-6); }
.stack > .alert, .alert:last-child { margin-bottom: 0; }
.checkbox-row { cursor: pointer; }
label.switch-row { cursor: pointer; }
.stack > *, .card, .detail-grid > * { min-width: 0; }

/* ---------- Schil ---------- */
.layout:not(.met-onderbalk) .main { padding-bottom: 0; }
.layout .appbar > .btn-icon, .layout .topbar > .btn-icon { flex-shrink: 0; }
.topbar { padding-top: calc(var(--space-5) + env(safe-area-inset-top)); }
.topbar .brand { margin-right: auto; }
.nav-drawer { animation: rs-slide-left .25s ease-out; padding-top: calc(var(--space-7) + env(safe-area-inset-top)); padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom)); }
.nav-drawer .drawer-kop { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-1) var(--space-5) var(--space-3); }
.nav-drawer .drawer-kop .brand { padding: 0; }
.panel { animation: rs-slide-right .25s ease-out; }
@keyframes rs-slide-left { from { transform: translateX(-100%); } }
@keyframes rs-slide-right { from { transform: translateX(100%); } }
@media (max-width: 600px) { .panel { width: 100%; } }
.nav-link.klein { min-height: 36px; }
body.menu-open { overflow: hidden; }
.appbar { gap: var(--space-5); }
.appbar .searchbar { position: relative; }
.zoek-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 60vh; overflow-y: auto; }
.zoek-menu .menu-item { align-items: flex-start; flex-direction: column; gap: 0; }
.zoek-menu .menu-item small { color: var(--text-faint); font-size: 0.8438rem; }
.app-footer .links { display: flex; gap: var(--space-9); }
.dot-badge.klein { top: 6px; right: 6px; }

/* ---------- Basis die de app extra gebruikt ---------- */
.tile-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: var(--space-5); }
.tile-icon.groen { background: var(--success-soft); color: var(--success); }
.tile-icon.geel { background: var(--warn-soft); color: var(--warn); }
.tile-icon.rood { background: var(--danger-soft); color: var(--danger); }
.tile-icon.grijs { background: var(--surface-sunken); color: var(--text-muted); }
.btn.actief { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.btn-icon.heeft-punt::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-strong); }
.chip.chip-pill { display: inline-flex; align-items: center; background: var(--accent-soft); border-color: transparent; color: var(--accent-text); cursor: default; }
.chip-x { background: none; border: 0; color: inherit; padding: 0 0 0 var(--space-2); cursor: pointer; display: inline-flex; vertical-align: middle; }
.chip-x svg.icon { width: 14px; height: 14px; }
.badge svg.icon { width: 14px; height: 14px; }
a.badge { text-decoration: none; }
a.plain { color: inherit; text-decoration: none; }
a.clickable-card, .clickable-card.blok { display: block; text-decoration: none; color: inherit; }
.clickable-card:focus-visible { border-color: var(--accent-strong); box-shadow: var(--shadow); }
.lange-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.verschil { font-size: 0.875rem; color: var(--text-muted); margin-top: 2px; }
.verschil s { color: var(--text-faint); }
.kv .row.row-breed { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.kv .row.row-breed > :last-child { text-align: left; width: 100%; }
.kv .row.row-breed, .relatie-tabel { min-width: 0; max-width: 100%; }
.kv .row > :first-child { flex-shrink: 0; max-width: 40%; }
.kv .row.row-breed > :first-child { max-width: none; }
.kv .links { text-align: left; }

/* ---------- Formulieren ---------- */
.field .lbl { display: block; margin-bottom: 6px; font-size: 0.9062rem; font-weight: 600; line-height: 1.2812rem; color: var(--text-muted); }
.field .hint { margin-top: 6px; }
.form-card { max-width: 520px; }
@media (min-width: 720px) { .form-grid .wide { grid-column: 1 / -1; } }
.input-valid-fout { border-color: var(--danger); }
.optie-rij { display: grid; grid-template-columns: 1fr 120px auto; gap: var(--space-3); margin-bottom: var(--space-3); align-items: center; }
.recht-rij { align-items: flex-start; gap: var(--space-6); }
.recht-rij > span:first-child { min-width: 0; flex: 1; }
.recht-naam { font-weight: 600; }

/* ---------- Tabellen en lijsten ---------- */
.table-wrap table { min-width: 560px; }
.table-wrap td.cell-wrap { white-space: normal; min-width: 180px; max-width: 320px; overflow-wrap: anywhere; }
.table-wrap tbody tr.klik { cursor: pointer; }
.table-wrap td.sel, .table-wrap th.sel { width: 40px; padding-right: 0; }
.table-wrap th.sortable:hover { color: var(--text); }
.log-item { align-items: flex-start; }
.log-item .dot { margin-top: 6px; }
.log-item .tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.log-item .tekst .sub { color: var(--text-faint); font-size: 0.8438rem; }
.log-item .tijd { font-size: 0.8125rem; color: var(--text-faint); white-space: nowrap; }
.log-list.vrij { max-height: none; }
.filter-panel { margin-bottom: var(--space-6); }
.filter-rij { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-4); align-items: center; }
@media (min-width: 720px) { .filter-rij { grid-template-columns: 1fr 160px 1fr auto; } }
.bulk-bar { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; background: var(--accent-soft); color: var(--accent-text); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6); font-size: 0.9688rem; font-weight: 600; }
.bulk-bar .btn-link { padding: 2px 4px; font-size: 0.9688rem; text-decoration: underline; }
.veld-rij { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.veld-rij:first-child { border-top: 0; }
.veld-rij .info { flex: 1 1 0; min-width: 0; }
.veld-rij .naam { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.veld-rij .meta { font-size: 0.875rem; color: var(--text-faint); }
.veld-rij .meta.mono { overflow-wrap: anywhere; }
.veld-rij.weg .naam { text-decoration: line-through; color: var(--text-muted); }
.veld-acties { display: flex; gap: 2px; margin-left: auto; }
.opties-paneel { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.opties-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.opties-knoppen { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.table-toolbar .searchbar .scan-btn + .kbd { right: 50px; }

/* ---------- Inloggen en installeren ---------- */
.auth-card.breed { max-width: 460px; }
.check-lijst { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.check-lijst li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.9688rem; }
.check-lijst .ok { color: var(--success); } .check-lijst .nok { color: var(--danger); }
.laden-scherm { display: grid; place-items: center; min-height: 100vh; }

/* ---------- Detail en dashboard ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.dash-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-9); }
.widget-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.widget-kop h2 { margin: 0; overflow-wrap: anywhere; }
.widget-acties { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: -4px 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.spacer-flex { flex: 1; }
.widget.bewerk { border-style: dashed; border-color: var(--border-strong); cursor: grab; }
.widget.sleept { opacity: .5; }
.widget.doel { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (min-width: 640px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .w-groot { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .dash-grid { grid-template-columns: repeat(6, 1fr); } .w-klein { grid-column: span 2; } .w-middel { grid-column: span 3; } .w-groot { grid-column: span 6; } }
.stat-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.mini-tegel { display: block; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5); text-decoration: none; color: inherit; transition: border-color .15s; min-width: 0; }
.mini-tegel.klik:hover { border-color: var(--accent-strong); }
.mini-tegel .tile-icon { width: 30px; height: 30px; border-radius: 9px; margin-bottom: var(--space-3); }
.mini-tegel .naam { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.telling { display: block; text-decoration: none; color: inherit; }
.rec-lijst { display: flex; flex-direction: column; }
.rec-rij { display: block; padding: var(--space-4) 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; min-width: 0; }
.rec-rij:first-child { border-top: 0; padding-top: 0; }
.rec-rij.klik:hover .rec-hoofd { color: var(--accent-text); }
.rec-hoofd { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.rec-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.875rem; color: var(--text-muted); margin-top: 2px; }
.rec-meer { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-size: 0.9062rem; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.widget textarea { width: 100%; }

/* ---------- Relaties en bijlagen ---------- */
.kiezer { position: relative; }
.kiezer-lijst { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-overlay); margin-top: var(--space-1); max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: var(--space-1); }
.kiezer-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px var(--space-4); border-radius: 6px; cursor: pointer; font-size: 1rem; }
.kiezer-item:hover, .kiezer-item:focus { background: var(--surface-sunken); outline: none; }
.kiezer-leeg { padding: 9px var(--space-4); color: var(--text-muted); font-size: 0.9688rem; }
.bijlagen { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.bijlage { display: flex; align-items: center; gap: var(--space-5); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); min-width: 0; }
.bijlage-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; background: var(--surface); }
.bijlage-icoon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface); border-radius: 6px; color: var(--text-muted); flex-shrink: 0; }
.bijlage-tekst { flex: 1; min-width: 0; font-size: 0.9688rem; font-weight: 600; overflow-wrap: anywhere; }
.keuze-slot { margin-top: var(--space-3); }
.keuze-voet { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.keuze-slot .kiezer-leeg { padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.gekozen-tabel { margin-bottom: var(--space-3); }
.gekozen-tabel .keten-rij, .gekozen-tabel tr.gekozen { cursor: default; }
.relatie-tabel .keten-tabel { max-height: 320px; }
.keten:not(:empty) { margin-top: var(--space-5); }
.keten-stap { margin: 0 0 var(--space-5); padding-left: var(--space-5); border-left: 2px solid var(--border); }
.keten-tabel { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); -webkit-overflow-scrolling: touch; }
.keten-tabel table { border-collapse: collapse; width: 100%; min-width: 0; }
.keten-tabel th { position: sticky; top: 0; z-index: 1; }
.keten-tabel th, .keten-tabel td { padding: 9px var(--space-5); }
.keten-tabel td.num { text-align: right; }
.keten-rij { cursor: pointer; }
.keten-rij:hover td { background: var(--surface-sunken); }
.keten-rij.gekozen td { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.keten-kies { width: 36px; padding-right: 0 !important; }
.keten-kies input { accent-color: var(--accent-strong); }

/* ---------- Sjablonen en formules ---------- */
.sjablonen { display: flex; flex-direction: column; gap: var(--space-4); }
.sjabloon { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.sjabloon:hover { border-color: var(--accent-strong); }
.sjabloon.gekozen { border-color: var(--accent-strong); background: var(--accent-soft); }
.sjabloon input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-strong); margin-top: 9px; flex-shrink: 0; }
.sjabloon .tile-icon { flex-shrink: 0; }
.sjabloon-tekst { flex: 1; min-width: 0; }
.sjabloon-tekst .naam { font-weight: 600; font-size: 1rem; }
details.functies { margin: var(--space-1) 0; }
details.functies summary { cursor: pointer; font-size: 0.9062rem; font-weight: 600; color: var(--accent-text); padding: var(--space-1) 0; }
.functielijst { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-top: var(--space-2); }
.functie { display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; border-radius: 6px; padding: var(--space-2) var(--space-3); cursor: pointer; text-align: left; color: var(--text); font-size: 0.9062rem; }
.functie:hover { background: var(--surface-sunken); }

/* ---------- Barcode scannen ---------- */
.invoer-scan { position: relative; }
.invoer-scan input { padding-right: 46px; width: 100%; }
.scan-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: var(--touch); height: var(--touch); display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; }
.scan-btn:hover { color: var(--accent-text); background: var(--accent-soft); }
.scan-btn svg { width: 20px; height: 20px; position: static; transform: none; }
.scan-vak { position: relative; background: var(--surface-sunken); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--space-4); }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-kader { position: absolute; left: 8%; right: 8%; top: 32%; bottom: 32%; border: 2px solid rgba(255, 255, 255, .85); border-radius: var(--radius-sm); box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); pointer-events: none; }
.scan-status.fout-tekst { color: var(--danger); }

/* ---------- Rollen en rechten ---------- */
.rol-kaart { display: block; color: inherit; text-decoration: none; }
.rol-kaart:hover { border-color: var(--accent-strong); }
.rol-kaart-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rol-kaart-kop h2 { margin: 0 auto 0 0; }
.rechten-matrix { min-width: 0; }
.rechten-matrix th.midden, .rechten-matrix td.midden { text-align: center; }
.rechten-matrix tr.groep td { background: var(--surface-sunken); font-weight: 600; font-size: 0.8438rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.rechten-matrix .ja { color: var(--success); display: inline-flex; }
.rechten-matrix .nee { color: var(--text-faint); }
.rechten-matrix th:first-child, .rechten-matrix td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 150px; }
.rechten-matrix th:first-child { background: var(--surface-sunken); }
.rechten-matrix tr.groep td:first-child { background: var(--surface-sunken); }

/* ---------- Uiterlijk ---------- */
.uiterlijk-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .uiterlijk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kleur-rij { display: flex; align-items: center; gap: var(--space-4); }
.kleur-rij input[type=color] { width: var(--touch); height: var(--touch); padding: 2px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.kleur-rij .input { flex: 1; }
.contrast-lijst { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.voorbeeld { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.voorbeeld .card { box-shadow: var(--shadow-sm); }

/* ---------- Modal en toast: wat de app extra nodig heeft ---------- */
.toast.out { opacity: 0; transition: opacity .25s; }
.modal { display: flex; flex-direction: column; max-height: 92vh; }
.modal.breed { max-width: 560px; }
.modal-head { flex-shrink: 0; }
.modal-head h2 { margin: 0; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.modal-body p { margin: 0; }
.modal-foot { flex-shrink: 0; }

/* ---------- Kleine correcties op de schil ---------- */
a.menu-item, a.notice { text-decoration: none; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.notice { cursor: pointer; }

/* Opslaanbalk binnen een kaart, onderaan het formulier */
.card .savebar { margin: var(--space-8) calc(-1 * var(--space-9)) calc(-1 * var(--space-8)); padding: var(--space-5) var(--space-9); border-radius: 0 0 var(--radius) var(--radius); bottom: 0; }
.layout.met-onderbalk .card .savebar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.layout.is-mobile .card .savebar, .layout.is-desktop .card .savebar { margin-bottom: calc(-1 * var(--space-8)); }
.auth-bg { min-height: 100vh; }

/* Zijbalk: inklappen en voet (AGENTS.md) */
.sidebar-toggle { margin-bottom: var(--space-1); }
.sidebar-foot .email { font-size: 0.875rem; }
.nav-drawer .sidebar-foot { margin-top: auto; }
.sidebar.is-collapsed .brand .logo { margin: 0; }

/* Organisatie onder de appnaam in het merk (zijbalk, kop op mobiel en menulade) */
.brand-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-app, .brand-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-org { font-family: var(--font-sans); font-size: 0.8438rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.brand-org-knop { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0 -6px; padding: 1px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left; }
.brand-org-knop .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-org-knop svg { flex: none; }
.brand-org-knop:hover, .brand-org-knop[aria-expanded="true"] { background: var(--surface-sunken); color: var(--text); }
.brand-org-knop:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

/* Mobiel: bij paginakoppen met alleen icoonknoppen (bijvoorbeeld een tabel) blijven de knoppen naast de titel staan;
   een lange omschrijving komt eronder op een eigen regel in plaats van de knoppen omlaag te duwen. */
@media (max-width: 720px) {
  .page-header:has(.page-actions .btn-icon) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; }
  .page-header:has(.page-actions .btn-icon) > div:first-child { display: contents; }
  .page-header:has(.page-actions .btn-icon) h1 { grid-column: 1; grid-row: 1; margin: 0; overflow-wrap: anywhere; }
  .page-header:has(.page-actions .btn-icon) .sub { grid-column: 1 / -1; grid-row: 2; }
  .page-header:has(.page-actions .btn-icon) .page-actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
}

/* Beheer van de organisatie: tabbladen met de bestaande pagina's als inhoud. De titel van de ingesloten pagina is een tussenkopje. */
.tab-inhoud .page-header { margin-top: 0; }
.tab-inhoud .page-header h1 { font-size: 1.6rem; }
.tab-inhoud .page-header .sub { font-size: 0.9688rem; }

/* ---------- Records als kaarten ---------- */
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); align-items: start; }
.rec-kaart { padding: var(--space-7); cursor: pointer; transition: box-shadow .15s, border-color .15s, background .15s; }
.rec-kaart:hover, .rec-kaart:focus-visible { box-shadow: var(--shadow-md); }
.rec-kaart.geselecteerd { border-color: var(--accent-strong); background: var(--accent-soft, var(--surface)); }
.rec-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.rec-titel { margin: 0; min-width: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rec-kop .sel { display: inline-flex; flex-shrink: 0; cursor: pointer; padding: 3px; margin: -3px -3px 0 0; }
input.rij { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); cursor: pointer; }
.rec-alles { margin: 0 0 var(--space-5); font-size: .8125rem; color: var(--text-muted); }
@media (max-width: 600px) { .rec-grid { grid-template-columns: 1fr; } }
/* ---------- Filterbalk met chips ---------- */
.filter-balk { position: relative; margin-bottom: var(--space-6); }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border-control); border-radius: var(--radius-pill); background: var(--surface); font-size: .8438rem; max-width: 100%; }
.filter-chip.open { border-color: var(--accent-strong); background: var(--accent-soft); }
.filter-chip button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.filter-chip-hoofd { padding: 6px 4px 6px 12px; min-height: 32px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip-hoofd span { color: var(--accent-text); font-weight: 600; }
.filter-chip-x { display: inline-flex; align-items: center; padding: 0 10px 0 6px; color: var(--text-muted); }
.filter-chip-x:hover { color: var(--text); }
.filter-pop { position: absolute; z-index: var(--z-sticky, 5); top: calc(100% + 6px); left: 0; width: min(320px, 100%); display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.filter-pop-kop { font-size: .9375rem; }
.filter-pop-knoppen { display: flex; justify-content: space-between; gap: 8px; }
.filter-velden { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; margin: 0 -6px; }
.filter-veld { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; font-size: .9375rem; cursor: pointer; color: var(--text); }
.filter-veld:hover, .filter-veld:focus-visible { background: var(--surface-sunken); }

/* ---------- Kolommenu (filteren zoals in Excel) ---------- */
.kop-knop { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.kop-knop.gefilterd { color: var(--accent-text); }
.kop-icoon { display: inline-flex; }
.kop-pijl { opacity: .45; }
.kop-knop:hover .kop-pijl { opacity: 1; }
.kolom-menu { position: fixed; z-index: var(--z-overlay, 30); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.kolom-actie { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; background: transparent; font: inherit; font-size: .9062rem; text-align: left; color: var(--text); cursor: pointer; }
.kolom-actie:hover:not(:disabled), .kolom-actie:focus-visible { background: var(--surface-sunken); }
.kolom-actie:disabled { color: var(--text-faint); cursor: default; }
.kolom-actie.actief { color: var(--accent-text); font-weight: 600; }
.kolom-lijn { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.kolom-zoek { padding: 0 12px 8px; }
.kolom-waarden { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 0 12px; }
.kolom-waarde { gap: 10px; min-height: 30px; font-size: .9062rem; }
.kolom-alles { padding: 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.kolom-waarde-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kolom-knoppen { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--border); margin-top: 6px; }

.kolom-menu { overscroll-behavior: contain; outline: none; }
.kolom-waarden { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }


/* ---------- Velden: alles op één regel, slepen om te verplaatsen ---------- */
.kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.veld-acties { flex-shrink: 0; }
.sleep-knop { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--text-faint); cursor: grab; touch-action: none; border-radius: var(--radius-sm); }
.sleep-knop:hover, .sleep-knop:focus-visible { color: var(--text); background: var(--surface-sunken); }
.veld-rij.sleept { background: var(--surface); box-shadow: var(--shadow-md); border-radius: var(--radius-sm); position: relative; z-index: 2; }
.veld-rij.sleept .sleep-knop { cursor: grabbing; }
.veld-lijst .veld-rij { user-select: none; -webkit-user-select: none; }

.relatie-venster .kaart-kop { align-items: flex-start; }
.relatie-venster .kaart-kop .badge { flex-shrink: 0; text-decoration: none; }
.rec-details { margin-top: 10px; }
.kv .row .chips { justify-content: flex-end; }

/* ---------- Meldingen: een venster bovenaan de pagina in de kleur van de melding ---------- */
.toast-wrap { top: calc(env(safe-area-inset-top) + 12px); bottom: auto; width: min(92%, 420px); max-width: 420px; }
@media (min-width: 1024px) { .toast-wrap { top: 20px; bottom: auto; } }
.toast { align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); font-size: .9375rem; font-weight: 500; line-height: 1.4; animation: toast-in .22s ease-out; }
.toast .icon { margin-top: 1px; color: var(--text-muted); }
.toast-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.toast-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.toast-success .icon, .toast-error .icon { color: inherit; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }

/* ---------- Tabellen als tegel: kop, lijn en cijfers ---------- */
a.card.tabel-tegel { display: block; }
.tegel-kop { display: flex; align-items: center; gap: var(--space-6); }
.tegel-kop .tile-icon { flex-shrink: 0; margin: 0; }
.tegel-tekst { flex: 1; min-width: 0; }
.tegel-tekst h2 { margin: 0 0 2px; overflow-wrap: anywhere; }
.tegel-tekst .stat-sub { overflow-wrap: anywhere; }
.tegel-lijn { border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.tegel-cijfers { display: flex; gap: var(--space-11); }
.tegel-cijfer .stat-value { margin-top: 0; }

/* ---------- SLA-beheer ---------- */
.table-wrap tr.sla-actief td:first-child { box-shadow: inset 3px 0 0 var(--accent-strong); }
.table-wrap table.sla-overzicht { min-width: 0; }
.sla-overzicht th, .sla-overzicht td { padding-inline: 10px; }
.sla-overzicht td.sla-acties { width: 190px; text-align: right; }
.sla-overzicht td.sla-acties .btn { margin: 0 0 2px 2px; }
.table-wrap tr.sla-actief td { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.sla-lijstwrap { container-type: inline-size; }
.sla-kaarten { display: none; }
/* De pagina is op desktop hooguit ~1000px breed: daaronder pas naar kaarten, anders zie je de tabel nooit. */
@container (max-width: 760px) { .sla-overzicht-wrap { display: none; } .sla-kaarten { display: block; } }
.sla-mkaart { margin-bottom: var(--space-4); }
.sla-mkaart .kaart-kop { margin-bottom: var(--space-3); }
.sla-voortgang { margin-bottom: var(--space-6); }
.sla-voortgang-tekst { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-2); }
.sla-voortgang-balk { height: 6px; border-radius: 100px; background: var(--surface-sunken); overflow: hidden; }
.sla-voortgang-balk > span { display: block; height: 100%; background: var(--accent-strong); border-radius: 100px; transition: width .2s; }
.sla-tabs { margin-bottom: var(--space-8); }
.sla-tabs .tab { gap: 8px; padding-inline: 12px; }
.sla-tabnr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 100px; background: var(--surface-sunken); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; }
.sla-tabs .tab.klaar .sla-tabnr { background: var(--success-soft); color: var(--success); }
.sla-tabs .tab[aria-selected="true"] .sla-tabnr { background: var(--accent-soft); color: var(--accent-text); }
.sla-kaart { margin-bottom: var(--space-6); }
.sla-kaart > h2 { font-size: 1.125rem; margin: 0 0 var(--space-4); }
.sla-paar { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(110px, 1.4fr); gap: 8px; }
.sla-schakels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 var(--space-8); }
.sla-uren { display: flex; flex-direction: column; gap: var(--space-2); }
.sla-uren.uit { opacity: .5; }
.sla-uur { display: grid; grid-template-columns: minmax(150px, 220px) 150px 16px 150px; align-items: center; gap: 8px; }
.sla-uur .switch-row { margin: 0; }
.sla-dienst { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(150px, 190px) minmax(160px, 1.5fr) 36px; align-items: center; gap: 12px; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.sla-dienst:first-child { border-top: 0; }
.sla-dienstnaam { overflow-wrap: anywhere; }
.sla-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.sla-rij:first-child { border-top: 0; }
.sla-rijknoppen { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; }
.sla-prio.voorstel { border-style: dashed; }
.sla-zin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; margin-bottom: var(--space-3); }
.sla-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--space-6); align-items: start; }
.sla-balk-knoppen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .sla-uur { grid-template-columns: 1fr 14px 1fr; }
  .sla-uur input { min-width: 0; }
  .sla-uur .switch-row { grid-column: 1 / -1; }
  .sla-dienst { grid-template-columns: 1fr 36px; }
  .sla-dienst .sla-dienstnaam { grid-column: 1 / -1; }
  .sla-dienst > input:not(.sla-dienstnaam) { grid-column: 1 / 2; }
  .sla-balk { flex-direction: column; align-items: stretch; }
  .sla-balk-knoppen { justify-content: stretch; }
  .sla-balk-knoppen .btn { flex: 1; }
}

/* Het SLA-document (leesweergave en afdruk) */
.sla-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-10) var(--space-10); max-width: 920px; }
.sla-doc-titel { font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.sla-doc-kop { border-bottom: 2px solid var(--text); padding-bottom: var(--space-5); margin-bottom: var(--space-6); }
.sla-doc-kop h1 { margin: var(--space-2) 0; }
.sla-doc-meta { color: var(--text-muted); }
.sla-sectie { margin-top: var(--space-8); break-inside: auto; }
.sla-sectie h2 { font-size: 1.1875rem; margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); break-after: avoid; }
.sla-sectie h3 { font-size: 1rem; margin: var(--space-5) 0 var(--space-2); }
.sla-kv { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 6px 20px; margin: 0; }
.sla-kv dt { color: var(--text-muted); }
.sla-kv dd { margin: 0; overflow-wrap: anywhere; }
.sla-lijst { margin: 0; padding-left: 20px; }
.sla-klein { font-size: 0.875rem; color: var(--text-muted); }
.sla-tabel { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.sla-tabel th, .sla-tabel td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.sla-tabel th { font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sla-handtekeningen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); margin-top: var(--space-6); }
.sla-lijn { border-bottom: 1px solid var(--text); height: 34px; margin-top: 10px; display: flex; align-items: flex-end; }
.sla-lijn span { font-size: 0.75rem; color: var(--text-muted); transform: translateY(18px); }
.sla-lijn-hoog { height: 70px; }
.sla-ondertekening { break-inside: avoid; }
@media (max-width: 720px) {
  .sla-doc { padding: var(--space-6) var(--space-5); }
  .sla-kv { grid-template-columns: 1fr; gap: 0; }
  .sla-kv dt { margin-top: var(--space-3); }
  .sla-handtekeningen { grid-template-columns: 1fr; }
}
@media print {
  .sidebar, .topbar, .appbar, .app-footer, .bottom-nav, .no-print, .toast-wrap, .scrim { display: none !important; }
  .layout { display: block; }
  body { background: #fff; }
  .main { padding: 0; display: block; }
  .page { padding: 0; max-width: none; }
  .sla-doc { border: 0; padding: 0; max-width: none; }
  .sla-sectie { break-inside: auto; }
  .sla-tabel tr { break-inside: avoid; }
  @page { margin: 18mm 16mm; }
}
.sla-mkaart.sla-actief { border-left: 3px solid var(--accent-strong); }

/* ---------- Tabbladen als pillen (overal waar .tabs wordt gebruikt) ---------- */
.tabs { gap: 8px; border-bottom: 0; padding: 2px 2px 8px; margin-inline: -2px; }
.tab { min-height: 40px; padding: 8px 16px; margin-bottom: 0; border: 1px solid var(--border); border-radius: 100px; background: var(--surface); font-size: 0.9375rem; text-decoration: none; flex: none; }
a.tab:hover { text-decoration: none; }
.tab:hover { color: var(--text); background: var(--surface-sunken); }
.tab[aria-selected="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.tab svg { flex: none; }
.tabs.kan-rechts { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tabs.kan-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.tabs.kan-links.kan-rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
@media (min-width: 900px) {
  .tabs { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  .tabs.kan-rechts, .tabs.kan-links { -webkit-mask-image: none !important; mask-image: none !important; }
}