/* Toegangsverbod — huisstijl: rustig, zakelijk, statuskleuren alleen waar het telt. */
:root {
  --bg: #f5f6f8;
  --vlak: #ffffff;
  --vlak-2: #f1f3f6;
  --vlak-3: #e7eaef;
  --tekst: #0f1729;
  --zacht: #5b6474;
  --zachter: #8a93a3;
  --rand: #e3e6eb;
  --accent: #3b5bdb;
  --accent-zacht: #edf1fd;
  --accent-tekst: #ffffff;
  --rood: #d1343b;
  --rood-bg: #fdecec;
  --groen: #1e8a4c;
  --groen-bg: #e6f5ec;
  --oranje: #b25e09;
  --oranje-bg: #fff3e2;
  --zij-bg: #0f1729;
  --zij-tekst: #c3cad6;
  --zij-actief: #1d2840;
  --radius: 14px;
  --radius-s: 10px;
  --schaduw: 0 1px 2px rgba(15, 23, 41, .04), 0 4px 16px rgba(15, 23, 41, .05);
  --schaduw-hover: 0 2px 4px rgba(15, 23, 41, .06), 0 8px 24px rgba(15, 23, 41, .08);
  --zij-breedte: 248px;
  --tab-hoogte: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --vlak: #121a2c;
    --vlak-2: #182236;
    --vlak-3: #212d45;
    --tekst: #e8ecf3;
    --zacht: #9aa4b5;
    --zachter: #6f7a8d;
    --rand: #222d42;
    --accent: #6f8cff;
    --accent-zacht: #1b2747;
    --accent-tekst: #0b1020;
    --rood: #ff6b70;
    --rood-bg: #3a1720;
    --groen: #4fd08a;
    --groen-bg: #11301f;
    --oranje: #ffb35c;
    --oranje-bg: #33240f;
    --zij-bg: #080c18;
    --zij-actief: #151d33;
    --schaduw: none;
    --schaduw-hover: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "tnum";
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em; margin: 0; font-weight: 700; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht);
  margin: 1.8rem 0 .7rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 0 0 .2rem; font-weight: 600; letter-spacing: -.01em; }
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.laden { color: var(--zacht); text-align: center; margin-top: 4rem; }

/* ------------------------------------------------------------- shell */
.logo { width: 32px; height: 32px; background: url(icoon.svg) center/contain no-repeat; flex: none; border-radius: 9px; }
#zijbalk {
  position: fixed; inset: 0 auto 0 0; width: var(--zij-breedte); background: var(--zij-bg); color: var(--zij-tekst);
  display: flex; flex-direction: column; padding: 18px 12px; z-index: 20;
}
.merk { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.merk-naam { color: #fff; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.merk-sub { font-size: .75rem; color: #7d879a; }
#nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
#nav .groep { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7588; padding: 16px 10px 6px; }
#nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  color: var(--zij-tekst); font-weight: 500; text-decoration: none;
}
#nav a:hover { background: var(--zij-actief); color: #fff; }
#nav a.actief { background: var(--zij-actief); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
#nav a .badge { margin-left: auto; }
#gebruiker-blok { border-top: 1px solid #1f2a40; padding: 14px 8px 0; display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #26324d; color: #fff; display: grid;
  place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
#gebruiker-blok .wie { flex: 1; min-width: 0; line-height: 1.25; }
#gebruiker-blok .wie b { color: #fff; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gebruiker-blok .wie span { font-size: .75rem; color: #7d879a; }
#gebruiker-blok button { background: transparent; color: var(--zij-tekst); min-height: 34px; padding: 6px; }
#gebruiker-blok button:hover { background: var(--zij-actief); color: #fff; }

#hoofd { margin-left: var(--zij-breedte); min-height: 100vh; }
#topbalk { display: none; }
main { max-width: 1080px; margin: 0 auto; padding: 32px 32px 64px; }
/* schermen met een brede lijst (Personen, Incidenten, Recorder, Logboek) gebruiken de beschikbare breedte */
@media (min-width: 1100px) { body.breed-lijst main { max-width: min(1760px, 100%); } }
#tabbalk { display: none; }

body.zonder-shell #zijbalk, body.zonder-shell #tabbalk, body.zonder-shell #topbalk { display: none !important; }
body.zonder-shell #hoofd { margin-left: 0; }

@media (max-width: 899px) {
  #zijbalk { display: none; }
  #hoofd { margin-left: 0; padding-bottom: calc(var(--tab-hoogte) + env(safe-area-inset-bottom)); }
  #topbalk {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 15;
    background: color-mix(in srgb, var(--zij-bg) 96%, transparent); color: #fff; font-weight: 700;
    padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); backdrop-filter: blur(10px);
  }
  #topbalk .logo { width: 26px; height: 26px; border-radius: 7px; }
  main { padding: 18px 16px 32px; }
  #tabbalk {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 15;
    background: var(--vlak); border-top: 1px solid var(--rand);
    height: calc(var(--tab-hoogte) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  }
  #tabbalk a, #tabbalk button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--zachter); font-size: .7rem; font-weight: 600; text-decoration: none; background: none;
    border-radius: 0; min-height: 0; padding: 0; position: relative;
  }
  #tabbalk .actief { color: var(--accent); }
  #tabbalk .plus span.rond { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-tekst);
    display: grid; place-items: center; margin-top: -18px; box-shadow: 0 6px 16px rgba(59, 91, 219, .35); }
  #tabbalk .badge { position: absolute; top: 6px; left: calc(50% + 6px); }
  h1 { font-size: 1.3rem; }
}

/* menu-sheet (mobiel "Meer") */
.sheet-achter { position: fixed; inset: 0; background: rgba(8, 12, 24, .45); z-index: 40; display: flex; align-items: flex-end; }
.sheet { background: var(--vlak); width: 100%; border-radius: 18px 18px 0 0; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); }
.sheet .greep { width: 40px; height: 4px; border-radius: 4px; background: var(--vlak-3); margin: 4px auto 10px; }
.sheet a, .sheet button.item { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 10px;
  color: var(--tekst); font-weight: 500; width: 100%; background: none; text-decoration: none; justify-content: flex-start; min-height: 0; }
.sheet a:hover, .sheet button.item:hover { background: var(--vlak-2); }

/* ------------------------------------------------------------- bouwstenen */
.paginakop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.paginakop .sub { color: var(--zacht); margin-top: 4px; }
.terug { display: inline-flex; align-items: center; gap: 4px; color: var(--zacht); font-weight: 500; margin-bottom: 10px; }

.kaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--schaduw); margin-bottom: 12px; }
.kaart.vlak { box-shadow: none; }
a.kaart { display: block; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
a.kaart:hover { text-decoration: none; box-shadow: var(--schaduw-hover); border-color: var(--vlak-3); }
.rij { display: flex; gap: 12px; align-items: center; }
.rij.wrap { flex-wrap: wrap; }
.tussen { justify-content: space-between; }
.zacht { color: var(--zacht); }
.klein { font-size: .85rem; }
.groei { flex: 1; min-width: 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.raster > .kaart { margin: 0; }
.twee-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 899px) { .twee-kolom { grid-template-columns: 1fr; } }

label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--tekst); }
input, select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--radius-s); padding: 10px 12px; min-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); margin: 0; flex: none; }
label.vink { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.veld { margin-bottom: 14px; }
.velden2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .velden2 { grid-template-columns: 1fr; } }
.uitleg { color: var(--zacht); font-size: .85rem; margin-top: 5px; }

button, .knop {
  font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-s); cursor: pointer;
  padding: 9px 16px; min-height: 42px; background: var(--accent); color: var(--accent-tekst);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: filter .15s, background .15s;
}
button:hover, .knop:hover { filter: brightness(1.06); text-decoration: none; }
button.tweede, .knop.tweede { background: var(--vlak); color: var(--tekst); border-color: var(--rand); }
button.tweede:hover { background: var(--vlak-2); filter: none; }
button.gevaar { background: var(--vlak); color: var(--rood); border-color: color-mix(in srgb, var(--rood) 35%, var(--rand)); }
button.gevaar:hover { background: var(--rood-bg); filter: none; }
button.klein, .knop.klein { min-height: 34px; padding: 5px 11px; font-size: .85rem; }
button:disabled { opacity: .5; cursor: default; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.rood { background: var(--rood-bg); color: var(--rood); }
.chip.groen { background: var(--groen-bg); color: var(--groen); }
.chip.oranje { background: var(--oranje-bg); color: var(--oranje); }
.chip.grijs { background: var(--vlak-2); color: var(--zacht); }
.chip.blauw { background: var(--accent-zacht); color: var(--accent); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--rood);
  color: #fff; font-size: .7rem; font-weight: 700; text-align: center; line-height: 20px; }

/* ------------------------------------------------------------- deurcheck */
.check-hero { background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: 22px;
  box-shadow: var(--schaduw); margin-bottom: 16px; }
.zoekveld { position: relative; }
.zoekveld svg.ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--zachter); width: 22px; height: 22px; }
.zoekveld input { font-size: 1.2rem; min-height: 58px; padding-left: 50px; border-radius: 14px; background: var(--vlak-2); border-color: transparent; }
.zoekveld input:focus { background: var(--vlak); }
.uitslag { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 16px; font-size: 1.05rem;
  font-weight: 700; margin-top: 14px; }
.uitslag .ic { width: 26px; height: 26px; }
.uitslag.groen { background: var(--groen-bg); color: var(--groen); }
.uitslag.rood { background: var(--rood-bg); color: var(--rood); }
.uitslag.neutraal { background: var(--vlak-2); color: var(--zacht); font-weight: 500; font-size: .95rem; }

.resultaat { display: flex !important; gap: 14px; align-items: center; }
.resultaat.rood { border-color: color-mix(in srgb, var(--rood) 45%, var(--rand)); box-shadow: inset 4px 0 0 var(--rood), var(--schaduw); }
.duim { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--vlak-2); flex: none; }
.duim.groot { width: 96px; height: 96px; border-radius: 14px; }
.duim.xl { width: 132px; height: 132px; border-radius: 16px; }
.leeg-foto { display: grid; place-items: center; color: var(--zachter); }
.leeg-foto svg.ic { width: 40%; height: 40%; stroke-width: 1.4; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; }

/* persoon-kop */
.profiel { display: flex; gap: 20px; align-items: center; }
.profiel h1 { margin-bottom: 4px; }
@media (max-width: 560px) { .profiel { flex-direction: column; align-items: flex-start; } }

/* foto's */
.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.galerij figure { margin: 0; position: relative; }
.galerij img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; cursor: zoom-in; display: block; background: var(--vlak-2); }
.galerij figcaption { display: flex; gap: 6px; margin-top: 6px; }
.galerij figcaption button { flex: 1; }
.hoofd-label { position: absolute; top: 8px; left: 8px; }
.upload { border: 1.5px dashed var(--vlak-3); border-radius: 12px; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; aspect-ratio: 1; color: var(--zacht); cursor: pointer; text-align: center;
  font-size: .85rem; font-weight: 500; padding: 8px; margin: 0; background: var(--vlak-2); transition: border-color .15s; }
.upload:hover { border-color: var(--accent); color: var(--accent); }
.upload input { display: none; }
.lightbox { position: fixed; inset: 0; background: rgba(8, 12, 24, .88); display: grid; place-items: center; z-index: 50; padding: 16px; }
.lightbox > img { max-width: 96vw; max-height: 90vh; border-radius: 12px; }
.lightbox > .kaart { width: min(460px, 100%); }

/* lijsten & tabellen */
.lijst { list-style: none; padding: 0; margin: 0; }
.lijst li { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.lijst li:first-child { padding-top: 0; }
.lijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.tabel-wrap { overflow-x: auto; margin: -4px; padding: 4px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { color: var(--zacht); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--vlak-2); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stat { display: flex !important; align-items: center; gap: 14px; margin: 0; }
.stat .ic-rond { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.stat .ic-rond.rood { background: var(--rood-bg); color: var(--rood); }
.stat .ic-rond.oranje { background: var(--oranje-bg); color: var(--oranje); }
.stat .ic-rond.blauw { background: var(--accent-zacht); color: var(--accent); }
.stat .ic-rond.groen { background: var(--groen-bg); color: var(--groen); }
.stat .getal { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat .label { color: var(--zacht); font-size: .82rem; }

.segment { display: inline-flex; background: var(--vlak-2); border-radius: 11px; padding: 3px; gap: 2px; margin-bottom: 14px; flex-wrap: wrap; }
.segment button { background: transparent; color: var(--zacht); min-height: 34px; padding: 5px 14px; border-radius: 9px; font-size: .88rem; }
.segment button.aan { background: var(--vlak); color: var(--tekst); box-shadow: 0 1px 3px rgba(15, 23, 41, .12); }

.persoonblok { border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; background: var(--vlak); }

.leeg { text-align: center; color: var(--zacht); padding: 28px 12px; }
.leeg svg.ic { width: 34px; height: 34px; color: var(--zachter); margin-bottom: 6px; }

#melding { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px);
  background: var(--tekst); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 60;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
#melding.zichtbaar { opacity: 1; transform: translate(-50%, 0); }
#melding.fout { background: var(--rood); color: #fff; }
@media (max-width: 899px) { #melding { bottom: calc(var(--tab-hoogte) + 16px + env(safe-area-inset-bottom)); } }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, var(--accent-zacht), transparent 60%), var(--bg); }
.login { width: min(400px, 100%); }
.login .logo { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 18px; }
.login h1 { margin-bottom: 6px; }
.login .kaart { padding: 24px; margin-top: 20px; }
.login button[type=submit] { width: 100%; margin-top: 6px; }

/* NVR */
.nvr-groep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; }
.nvr-groep h3 { margin: 0; font-size: 1.05rem; }
.nvr-kaart { display: flex; gap: 14px; align-items: flex-start; }
.nvr-kaart .acties { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

body.zonder-shell main { max-width: none; padding: 0; }

.colofon { font-size: .72rem; line-height: 1.5; color: var(--zachter); text-align: center; padding: 14px 8px 0; }
#zijbalk .colofon { color: #6b7588; text-align: left; padding: 12px 8px 0; }
.sheet .colofon { padding-top: 16px; }
.login .colofon { margin-top: 18px; }

/* lange omschrijvingen volledig tonen, met regelafbrekingen */
.tekst-vol { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }

/* snel weigeren */
.snel-foto-label { display: block; margin: 0; cursor: pointer; }
.snel-foto { border: 2px dashed var(--vlak-3); border-radius: 16px; background: var(--vlak-2); min-height: 200px; display: flex; flex-direction: column;
  gap: 8px; align-items: center; justify-content: center; color: var(--zacht); font-weight: 600; overflow: hidden; }
.snel-foto svg.ic { width: 36px; height: 36px; }
.snel-foto img { width: 100%; max-height: 52vh; object-fit: contain; }
.snel-knop { width: 100%; min-height: 58px; font-size: 1.1rem; background: var(--rood); color: #fff; margin-top: 8px; border-radius: 14px; }

/* statistieken */
.kolommen { display: flex; gap: 6px; align-items: stretch; height: 170px; }
.kolom { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.kolom .paar { display: flex; gap: 2px; align-items: flex-end; width: 100%; flex: 1; }
.kolom .bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.kolom .bar.rood { background: var(--rood); }
.kolom span { font-size: .68rem; white-space: nowrap; }
.staaf-rij { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 34px; gap: 8px; align-items: center; margin: 7px 0; font-size: .88rem; }
.staaf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staaf-spoor { background: var(--vlak-2); border-radius: 6px; height: 14px; overflow: hidden; }
.staaf { height: 100%; background: var(--accent); border-radius: 6px; min-width: 3px; }
.staaf.rood { background: var(--rood); }
.staaf.oranje { background: var(--oranje); }
@media (max-width: 560px) { .kolommen { height: 130px; gap: 3px; } .kolom span { font-size: .6rem; } }

/* versie-knop, brief-voorbeeld, logo */
.link-knop { background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; min-height: 0; padding: 0; font: inherit; cursor: pointer; }
.link-knop:hover { filter: none; opacity: .8; }
.lightbox > .kaart.breed { width: min(700px, 100%); max-height: 92vh; overflow: auto; }
.brief-papier { background: #fff; color: #16181d; border: 1px solid var(--rand); border-radius: 10px; padding: 18px 20px; max-height: 40vh; overflow: auto; font-size: .86rem; line-height: 1.5; }
.brief-papier p { margin: .55em 0; }
.brief-papier h3 { color: #16181d; }
.brief-kop { display: flex; gap: 14px; align-items: center; }
.logo-brief { width: 110px; height: 46px; background-size: contain; background-repeat: no-repeat; background-position: left center; flex: none; }
.uitslag.oranje-melding { background: var(--oranje-bg); color: var(--oranje); font-size: .92rem; font-weight: 600; margin-top: 0; }
body.heeft-logo .merk { flex-direction: column; align-items: flex-start; gap: 8px; }
body.heeft-logo .merk .logo { width: 170px; height: 48px; background-size: contain; background-repeat: no-repeat; background-position: left center;
  background-color: #fff; border-radius: 8px; background-origin: content-box; padding: 5px; box-sizing: border-box; }
body.heeft-logo #topbalk .logo { width: 96px; height: 28px; background-size: contain; background-repeat: no-repeat; background-position: left center;
  background-color: #fff; border-radius: 6px; background-origin: content-box; padding: 3px; box-sizing: border-box; }
body.heeft-logo .login .logo { width: 180px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: left center; border-radius: 0; }

/* tegels / lijst */
.weergave { margin-bottom: 14px; }
.weergave button { padding: 5px 10px; }
.duim.klein { width: 36px; height: 36px; border-radius: 8px; }
.klikrijen tbody tr { cursor: pointer; }
.klikrijen td, .klikrijen th { vertical-align: middle; }
.cel-oms { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .verberg-m { display: none; } }
.raster.lijst-modus { grid-template-columns: 1fr; gap: 6px; }
.raster.lijst-modus .nvr-kaart { padding: 8px 14px; align-items: center; }
.raster.lijst-modus .nvr-kaart .duim { width: 48px; height: 48px; border-radius: 10px; }
.raster.lijst-modus .nvr-kaart .groei { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.raster.lijst-modus .nvr-kaart .groei h3 { min-width: 140px; margin: 0; }
.raster.lijst-modus .nvr-kaart .acties { margin-top: 0; }

/* bewerkbare brieftekst */
.brief-veld { display: block; width: 100%; min-height: 0; resize: none; overflow: hidden; background: transparent; color: #16181d; font: inherit; line-height: 1.5;
  border: 1px dashed transparent; border-radius: 6px; padding: 4px 6px; margin: 2px -6px; width: calc(100% + 12px); transition: border-color .15s, background .15s; }
.brief-veld:hover { border-color: #c9ceda; }
.brief-veld:focus { outline: none; border-color: var(--accent); background: #f5f8ff; box-shadow: none; }
.brief-veld:empty { display: none; }

/* registratie = oranje waarschuwing (geen verbod) */
.resultaat.oranje { border-color: color-mix(in srgb, var(--oranje) 55%, var(--rand)); box-shadow: inset 4px 0 0 var(--oranje), var(--schaduw); }
.uitslag.oranje { background: var(--oranje-bg); color: var(--oranje); }

.colofon b { font-weight: 600; letter-spacing: .02em; color: var(--tekst2, inherit); }
#zijbalk .colofon b { color: #94a0b5; }

/* dossier: tabbladen + aandachtspunten */
.tabs { display: flex; gap: 2px; overflow-x: auto; margin: 16px 0 14px; border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; background: var(--bg); z-index: 4; padding-top: 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: transparent; color: var(--zacht); border-radius: 0; border-bottom: 2px solid transparent; padding: 10px 14px;
  min-height: 44px; white-space: nowrap; font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; }
.tab:hover { color: var(--tekst); background: var(--vlak-2); }
.tab.aan { color: var(--accent); border-bottom-color: var(--accent); }
.tab-badge { background: var(--vlak-3); color: var(--zacht); border-radius: 999px; font-size: .72rem; padding: 1px 7px; font-weight: 700; }
.tab-badge.let-op { background: var(--rood); color: #fff; }
.tab.aan .tab-badge { background: var(--accent-zacht); color: var(--accent); }
.aandacht { display: grid; gap: 6px; margin-top: 12px; }
.aandacht-rij { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border-radius: var(--radius-s);
  padding: 10px 14px; min-height: 44px; font-weight: 600; border: 1px solid transparent; }
.aandacht-rij > span:first-of-type { flex: 1; }
.aandacht-rij.rood { background: var(--rood-bg); color: var(--rood); border-color: var(--rood); }
.aandacht-rij.oranje { background: var(--oranje-bg); color: var(--oranje); border-color: var(--oranje); }
.aandacht-rij .zacht { color: inherit; opacity: .8; }

/* tafelkiezer */
.tafel-veld { position: relative; display: flex; align-items: center; gap: 6px; }
.tafel-knop { flex: 1; justify-content: space-between; text-align: left; display: flex; align-items: center; min-height: 44px; font-weight: 600; }
.tafel-tekst.leeg { color: var(--zachter); font-weight: 400; }
.tafel-wis { background: transparent; color: var(--zacht); min-height: 44px; width: 40px; padding: 0; font-size: 1.3rem; }
.lightbox > .tafel-menu { width: min(920px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.tafel-scroll { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.tafel-blok { margin-bottom: 14px; }
.tafel-label { font-size: .72rem; letter-spacing: .06em; color: var(--zachter); font-weight: 700; margin-bottom: 6px; }
.tafel-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.tafel-tegel { min-height: 52px; background: var(--vlak-2); color: var(--tekst); border: 1px solid var(--rand); border-radius: var(--radius-s);
  font-weight: 700; font-size: 1rem; padding: 0; }
.tafel-tegel:hover { background: var(--accent-zacht); border-color: var(--accent); color: var(--accent); }
.tafel-tegel.aan { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.tafel-tegel.zoek { outline: 3px solid var(--accent); outline-offset: 1px; }
.tafel-onder { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rand); gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .lightbox > .tafel-menu { max-height: 100vh; height: 100%; border-radius: 0; }
  .tafel-grid { grid-template-columns: repeat(5, 1fr); }
  .tafel-tegel { min-height: 56px; }
}

.tafel-eigen { display: flex; flex-wrap: wrap; gap: 8px; }
.tafel-tegel.breed { padding: 0 18px; min-width: 96px; }
.tafel-bevestig { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.tafel-knop { min-width: 0; }
.tafel-tekst { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }