/* Incidentbestrijdersportaal Brandweer Hillegom – huisstijl "Magazine" van het scherm, mobiel eerst. */
:root {
  --achter: #f3f6fa; --vlak: #ffffff; --vlak-2: #f4f6f9; --lijn: #dfe4ea;
  --tekst: #0e1116; --tekst-2: #3b4350; --zacht: #6b7480;
  --rood: #e3172d; --rood-tekst: #d01128; --rood-zacht: #fdecee;
  --blauw: #2f7fd0; --blauw-zacht: #e8f1fb; --groen: #1f9a63; --groen-zacht: #e4f5ec;
  --oranje: #e48a12; --oranje-zacht: #fdf1e0; --paars: #6d55c4;
  --schaduw: 0 4px 22px rgba(17, 30, 50, .07), 0 1px 3px rgba(17, 30, 50, .05);
  --rond: 18px;
  font-family: "Inter", "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--achter); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--tekst); font-size: 16px; line-height: 1.45; min-height: 100vh;
  background: radial-gradient(ellipse at 72% -10%, #e2ecf8 0, transparent 50%),
              radial-gradient(ellipse at 100% 100%, #eef3fa 0, transparent 45%) var(--achter); background-attachment: fixed; }
a { color: var(--blauw); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* testomgeving */
.dev-balk { background: #e8901a; color: #fff; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px;
  padding: 7px 16px; text-align: center; position: sticky; top: 0; z-index: 30; }
.dev-balk span { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .95; }

/* kop */
.kop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; max-width: 1180px; margin: 0 auto; }
.merk { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.merk:hover { text-decoration: none; }
.merk b { font-weight: 800; }
.streep { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #ef2b40, #c10f28); display: grid; place-items: center; color: #fff; flex: none; }
.streep .ico { width: 19px; height: 19px; }
.kop-lijn { flex: 1; height: 1px; background: #c5ccd5; min-width: 10px; }
.wie { display: flex; align-items: center; gap: 8px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--vlak); box-shadow: var(--schaduw); display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--tekst-2); }
.merk-sub { display: none; }

/* menu */
.menu { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 6px; max-width: 1180px; margin: 0 auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a, .menu summary { flex: none; padding: 8px 14px; border-radius: 99px; color: var(--tekst-2); font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu a.actief { background: var(--tekst); color: #fff; }
.menu a:hover, .menu summary:hover { background: var(--vlak); text-decoration: none; }
.menu-beheer { position: relative; flex: none; }
.menu-beheer[open] summary { background: var(--vlak); }
.menu-beheer .uitklap { position: fixed; z-index: 40; margin-top: 6px; background: var(--vlak); border-radius: 14px; box-shadow: 0 12px 40px rgba(17,30,50,.18);
  padding: 6px; min-width: 240px; display: flex; flex-direction: column; }
.menu-beheer .uitklap a { border-radius: 10px; }

main { max-width: 1180px; margin: 0 auto; padding: 8px 16px 64px; overflow-wrap: anywhere; }
select { max-width: 100%; }
html, body { overflow-x: hidden; }
.voet { max-width: 1180px; margin: 0 auto; padding: 0 16px 28px; color: var(--zacht); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* typografie */
.kicker { color: var(--rood-tekst); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: 12px; margin: 0 0 6px; }
h1, .titel { font-size: 32px; font-weight: 900; letter-spacing: -.04em; line-height: 1.02; margin: 4px 0 18px; }
h2 { font-size: 21px; font-weight: 850; letter-spacing: -.02em; margin: 26px 0 10px; }
h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.lead { color: var(--tekst-2); font-size: 17px; max-width: 62ch; }
.zacht { color: var(--zacht); }
.klein { font-size: 14px; }
.nowrap { white-space: nowrap; }

/* kaarten en tegels */
.kaart { background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 18px; margin-bottom: 14px; }
.kaart > :first-child { margin-top: 0; }
.kaart > :last-child { margin-bottom: 0; }
.tegels { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tegels > .kaart { margin: 0; }
.tegel-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tegel-grijs { background: var(--vlak-2); box-shadow: none; border: 1px dashed var(--lijn); }
.tegel-grijs .getal { color: #b6bec8; }
.rode-kaart { background: linear-gradient(135deg, #ef2b40, #c10f28); color: #fff; box-shadow: 0 14px 40px rgba(193, 15, 40, .22); }
.rode-kaart .kicker, .rode-kaart a { color: #fff; }
.getal { font-size: 46px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.getal small { font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--zacht); }
.statrij { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.stat b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.03em; }
.stat span { color: var(--zacht); font-size: 13px; }
.balk { height: 8px; border-radius: 99px; background: var(--vlak-2); overflow: hidden; margin-top: 12px; }
.balk i { display: block; height: 100%; background: var(--groen); border-radius: 99px; }

/* datumtegel */
.datum { width: 62px; flex: none; border-radius: 14px; background: linear-gradient(160deg, #ef2b40, #c10f28); color: #fff; text-align: center;
  padding: 7px 0 8px; box-shadow: 0 6px 16px rgba(193, 15, 40, .2); line-height: 1; }
.datum .wd { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.datum .d { font-size: 26px; font-weight: 900; letter-spacing: -.04em; margin: 3px 0 2px; }
.datum .m { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.datum.grijs { background: #dfe4ea; color: var(--tekst-2); box-shadow: none; }
.datum.blauw { background: linear-gradient(160deg, #3f8fe0, #2569b3); box-shadow: 0 6px 16px rgba(37, 105, 179, .2); }
.datum.voorbij { background: #c7ced7; box-shadow: none; }

/* planning */
.avond { display: flex; gap: 14px; align-items: flex-start; }
.avond-inhoud { flex: 1; min-width: 0; }
.oef { padding: 2px 0 8px; }
.oef + .oef { border-top: 1px solid var(--lijn); padding-top: 8px; }
.oef-kop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.oef .code { font-weight: 800; font-size: 13px; color: var(--rood-tekst); letter-spacing: .02em; }
.oef .onderwerp { font-weight: 750; }
.oef .leiding { color: var(--zacht); font-size: 14px; margin-top: 2px; }
.oef.vervallen .onderwerp, .oef.vervallen .code { text-decoration: line-through; color: var(--zacht); }
.maand { margin: 26px 0 10px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; font-weight: 800; color: var(--tekst-2);
  display: flex; align-items: center; gap: 12px; }
.maand::after { content: ""; flex: 1; height: 1px; background: #c5ccd5; }
.vak { color: var(--zacht); font-weight: 650; padding-top: 10px; }
.avond-voet { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ik-leid { box-shadow: inset 5px 0 0 var(--rood), var(--schaduw); }

/* labels */
.label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 750; padding: 3px 9px; border-radius: 99px;
  background: var(--blauw-zacht); color: #1d4f86; white-space: nowrap; }
.label.rood { background: var(--rood-zacht); color: var(--rood-tekst); }
.label.groen { background: var(--groen-zacht); color: #146c45; }
.label.oranje { background: var(--oranje-zacht); color: #9a5a05; }
.label.grijs { background: var(--vlak-2); color: var(--zacht); }

/* knoppen */
.knop, button, input[type=submit] { font: inherit; font-weight: 750; font-size: 15px; border: 0; border-radius: 12px; padding: 11px 16px;
  background: var(--tekst); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none !important; min-height: 44px; }
.knop.rood, button.rood { background: var(--rood); color: #fff; }
.knop.licht, button.licht { background: var(--vlak); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--lijn); }
.knop.klein, button.klein { min-height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.knop.link, button.link { background: none; color: var(--blauw); padding: 0; min-height: 0; font-weight: 650; }
button:disabled { opacity: .5; cursor: default; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.keuze button { background: var(--vlak); color: var(--tekst); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.keuze button.aan-kom { background: var(--groen); color: #fff; box-shadow: none; }
.keuze button.aan-niet { background: var(--rood); color: #fff; box-shadow: none; }
.keuze.gekozen button:not(.aan-kom):not(.aan-niet) { color: var(--tekst-2); box-shadow: inset 0 0 0 1.5px var(--lijn); background: transparent; font-weight: 600; }
.opgave-staat { margin: 0 0 8px; font-size: 14px; color: var(--tekst-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.snel-opgeven .opgave-staat { display: none; }

/* formulieren */
label { font-weight: 650; font-size: 14px; display: block; margin-bottom: 5px; color: var(--tekst-2); }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=number], input[type=search], input:not([type]),
select, textarea { font: inherit; font-size: 16px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--lijn);
  background: #fff; color: var(--tekst); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-zacht); }
.veld { margin-bottom: 14px; }
.veld .help, .helptext { color: var(--zacht); font-size: 13px; margin-top: 4px; display: block; }
.vinkjes { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vinkjes label, label.vinkje { display: flex; gap: 8px; align-items: center; font-weight: 550; color: var(--tekst); margin: 0; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--rood); flex: none; }
.form-div > div { margin-bottom: 14px; }
.form-div ul { list-style: none; padding: 0; margin: 0; }
.form-div div:has(> ul) ul, .form-div #id_kwalificaties, div[id$=leiders] { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.form-div div > div > label, .form-div ul label { display: flex; gap: 8px; align-items: center; font-weight: 550; color: var(--tekst); }
.errorlist { color: var(--rood-tekst); list-style: none; padding: 0; margin: 4px 0; font-size: 14px; font-weight: 650; }
.raster-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }

/* meldingen */
.berichten { list-style: none; padding: 0; margin: 0 0 14px; }
.berichten li { padding: 12px 16px; border-radius: 14px; margin-bottom: 8px; font-weight: 600; background: var(--blauw-zacht); color: #1d4f86; }
.berichten .success { background: var(--groen-zacht); color: #146c45; }
.berichten .error { background: var(--rood-zacht); color: var(--rood-tekst); }
.berichten .warning { background: var(--oranje-zacht); color: #9a5a05; }
.let-op { background: var(--oranje-zacht); color: #7a4704; border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }

/* tabellen */
.tabel-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); font-weight: 750; padding: 8px 10px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* lijsten */
.lijst { list-style: none; padding: 0; margin: 0; }
.lijst li { padding: 10px 0; border-bottom: 1px solid var(--lijn); display: flex; gap: 10px; align-items: center; }
.lijst li:last-child { border-bottom: 0; }
.lijst .pijl { margin-left: auto; color: var(--zacht); }
.taak { display: flex; gap: 10px; align-items: center; color: var(--tekst); }
.taak:hover { text-decoration: none; }
.stip { width: 10px; height: 10px; border-radius: 50%; background: var(--blauw); flex: none; }
.stip.rood { background: var(--rood); } .stip.oranje { background: var(--oranje); } .stip.groen { background: var(--groen); }
.namen { display: flex; flex-wrap: wrap; gap: 6px; }
.mailtekst { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: var(--vlak-2); padding: 14px; border-radius: 12px; overflow-wrap: anywhere; }
.qr { background: #fff; padding: 10px; border-radius: 14px; width: 220px; max-width: 100%; }
.code-blok { display: inline-block; max-width: 100%; margin: 4px 0; font-family: ui-monospace, Menlo, monospace; background: var(--vlak-2); padding: 8px 12px; border-radius: 10px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; vertical-align: middle; }
div.code-blok { display: block; }

/* aanwezigheid vastleggen */
.aanw-lijst { padding-top: 6px; padding-bottom: 6px; }
.aanw-rij { padding: 12px 0; border-bottom: 1px solid var(--lijn); display: grid; gap: 8px; }
.aanw-rij:last-child { border-bottom: 0; }
.aanw-naam { align-items: flex-start !important; }
.aanw-naam > span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.aanw-keuze { display: grid; grid-template-columns: 1fr; gap: 8px; padding-left: 28px; }
.groep-keuze { display: flex; gap: 6px; flex-wrap: wrap; }
.groep-keuze label { margin: 0; flex: 1 1 auto; }
.groep-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.groep-keuze span { display: block; text-align: center; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 750;
  box-shadow: inset 0 0 0 1.5px var(--lijn); background: #fff; color: var(--tekst-2); cursor: pointer; white-space: nowrap; }
.groep-keuze input:checked + span { background: var(--tekst); color: #fff; box-shadow: none; }
.groep-keuze input:focus-visible + span { outline: 3px solid var(--blauw-zacht); }
.plak-onder { position: sticky; bottom: 10px; z-index: 5; background: rgba(243, 246, 250, .92); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); padding: 8px; border-radius: 16px; box-shadow: 0 6px 24px rgba(17, 30, 50, .12); }
.aanw-keuze select { padding: 8px 10px; font-size: 15px; }
.aanw-rij:not(.is-aan) .aanw-keuze { opacity: .55; }
.kicker a { color: inherit; }

/* inlogscherm */
.smal { max-width: 440px; margin: 6vh auto 0; }

/* groter scherm */
@media (min-width: 720px) {
  h1, .titel { font-size: 44px; }
  .tegels { grid-template-columns: 1fr 1fr; }
  .tegel-breed { grid-column: span 2; }
  .merk-sub { display: inline; }
  .raster-2 { grid-template-columns: 1fr 1fr; }
  .kaart { padding: 22px 24px; }
  .tabel-wrap { margin: 0 -24px; padding: 0 24px; }
  .datum { width: 70px; }
  .datum .d { font-size: 30px; }
  .aanw-rij { grid-template-columns: 1fr 440px; align-items: center; }
  .aanw-keuze { grid-template-columns: 1fr 150px; }
  .aanw-keuze { padding-left: 0; }
}
@media (min-width: 1080px) {
  .tegels { grid-template-columns: repeat(3, 1fr); }
  .tegel-breed { grid-column: span 2; }
}

/* stappenplan */
.stappen { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.stappen::-webkit-scrollbar { display: none; }
.stappen li { flex: none; }
.stappen li > *, .stappen li { display: flex; align-items: center; gap: 6px; }
.stappen b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--vlak); color: var(--zacht); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.stappen span { font-size: 13px; font-weight: 700; color: var(--zacht); padding-right: 8px; white-space: nowrap; }
.stappen li.klaar b { background: var(--groen); color: #fff; box-shadow: none; }
.stappen li.nu b { background: var(--rood); color: #fff; box-shadow: none; }
.stappen li.nu span { color: var(--tekst); }
.stappen li:not(.nu) span { display: none; }
@media (min-width: 900px) { .stappen li:not(.nu) span { display: inline; } }
.stappen a { text-decoration: none; }

.regelen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* planning: filter en snel opgeven (0.2.14) */
.filter-balk { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.filter-balk .filter { padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--tekst); background: var(--vlak); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.filter-balk .filter b { margin-left: 4px; }
.filter-balk .filter.oranje b { color: #b45f06; }
.filter-balk .filter.groen b { color: var(--groen); }
.filter-balk .filter.actief { background: var(--tekst); color: #fff; box-shadow: none; }
.filter-balk .filter.actief b { color: #fff; }
.avond-kaart.nog-open { border-left: 4px solid #e8901a; }
.snel-opgeven { margin-top: 10px; }
.snel-opgeven .keuze button { padding: 8px 10px; font-size: 15px; }
.voorbij-kop { margin: 30px 0 0; }
.avond-nav { display: flex; justify-content: space-between; gap: 8px; margin: -4px 0 12px; }
.avond-nav a { font-size: 14px; font-weight: 700; text-decoration: none; padding: 7px 12px; border-radius: 999px;
  background: var(--vlak); box-shadow: inset 0 0 0 1.5px var(--lijn); color: var(--tekst); }
.avond-nav .leeg { visibility: hidden; }

/* hint: op beginscherm zetten (0.2.14) */
.app-hint { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--vlak); box-shadow: var(--schaduw);
  display: grid; place-items: center; color: var(--tekst); }
.app-hint[hidden] { display: none; }
.app-hint .ico { width: 20px; height: 20px; }
.app-hint .stip { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #e8901a;
  box-shadow: 0 0 0 2px var(--vlak); animation: stip 2s ease-in-out infinite; }
@keyframes stip { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .app-hint .stip { animation: none; } }
.app-balk { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; background: #fff4e3; border: 1px solid #f3c98a;
  border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; }
.app-balk[hidden] { display: none; }
.app-balk span { flex: 1 1 200px; }
.hl-stappen { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.hl-stappen li { counter-increment: s; position: relative; padding: 0 0 14px 40px; }
.hl-stappen li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rood, #d01128); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.ui-ico { display: inline-block; vertical-align: -4px; width: 20px; height: 20px; padding: 1px; border-radius: 5px; background: var(--vlak-2); }
.aanw-blok { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--tekst-2);
  padding: 14px 0 6px; border-bottom: 1px solid var(--lijn); }
.aanw-blok:first-child { padding-top: 0; }

/* meekijken als lid (0.2.18) */
.meekijk-balk { position: sticky; top: 0; z-index: 50; display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: #6b3fc4; color: #fff; padding: 8px 16px; font-size: 14px; margin: 0; }
.meekijk-balk .zacht-wit { opacity: .8; font-size: 13px; }
.meekijk-balk button { background: #fff; color: #6b3fc4; padding: 6px 14px; }

/* meldingen (0.3.0) */
.melding-kaart { display: flex; gap: 14px; color: inherit; text-decoration: none; }
.melding-tijd { flex: none; width: 56px; text-align: center; display: flex; flex-direction: column; line-height: 1.15; }
.melding-tijd b { font-size: 24px; }
.melding-tijd span { font-size: 12px; color: var(--tekst-2); text-transform: uppercase; }
.melding-inhoud { flex: 1; min-width: 0; }

/* functietellingen en rondes (0.3.2) */
.telling { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 2px; }
.telling span { font-size: 11px; font-weight: 700; color: var(--tekst-2); background: var(--vlak-2); border-radius: 6px; padding: 1px 6px; }
.ronde-functies { display: grid; gap: 6px; }
.ronde { display: flex; align-items: center; gap: 6px; margin: 0; }
.ronde[hidden] { display: none; }
.ronde select { flex: 1; min-width: 0; }
.ronde-nr { display: none; flex: none; width: 28px; font-size: 12px; font-weight: 800; color: var(--tekst-2); }
.meer-rondes .ronde-nr { display: inline-block; }
.rondes-keuze { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 14px; }
.rondes-keuze label { margin: 0; font-weight: 600; }
.rondes-keuze select { width: auto; padding: 4px 28px 4px 10px; }
.rouleer[hidden] { display: none; }
.functie-tabel { border-collapse: collapse; width: 100%; font-size: 14px; }
.functie-tabel th, .functie-tabel td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.functie-tabel th:first-child, .functie-tabel td:first-child { text-align: left; position: sticky; left: 0; background: var(--vlak); white-space: normal; min-width: 120px; }
.functie-tabel th a { color: inherit; text-decoration: none; }
.functie-tabel th a.actief { color: var(--rood-tekst); text-decoration: underline; }
.functie-tabel td.nul { color: #c5ccd5; }
.functie-tabel tfoot td { font-weight: 800; border-bottom: 0; }
.functie-tabel th { letter-spacing: .04em; font-size: 12px; }
.telregel + .telregel { margin-top: 6px; }
.ronde-label { font-size: 12px; font-weight: 800; color: var(--tekst-2); width: 24px; display: inline-flex; align-items: center; }
.tegel-let-op { border: 2px solid var(--rood); background: var(--rood-zacht); }

/* paraat (0.4.0) */
.paraat-rij { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.paraat-blok { flex: 1 1 90px; border-radius: 12px; padding: 10px 12px; text-decoration: none; color: #fff; display: flex; flex-direction: column; }
.paraat-blok b { font-size: 17px; }
.paraat-blok span { font-size: 13px; opacity: .95; }
.paraat-blok.groen { background: var(--groen); }
.paraat-blok.oranje { background: #e8901a; }
.paraat-blok.rood { background: var(--rood); }
.paraat-kaart { border-top: 5px solid var(--lijn); }
.paraat-kaart.groen { border-top-color: var(--groen); }
.paraat-kaart.oranje { border-top-color: #e8901a; }
.paraat-kaart.rood { border-top-color: var(--rood); }
.rood-tekst { color: var(--rood-tekst); }
.oranje-tekst { color: #b45f06; }

/* registratie bij meldingen (0.5.0) */
.paraaf-veld { border: 2px dashed var(--lijn); border-radius: 12px; background: #fff; height: 170px; touch-action: none; }
.paraaf-veld canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.parafen { display: grid; gap: 8px; }
.parafen .p { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--lijn); padding: 6px 0; }
.parafen img { height: 40px; max-width: 120px; margin-left: auto; background: #fff; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.fotos figure { margin: 0; }
.fotos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.fotos figcaption { font-size: 12px; color: var(--tekst-2); display: flex; gap: 6px; align-items: center; }
.let-op { background: #fff4e3; border: 1px solid #f3c98a; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.tablet-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tablet-namen a, .tablet-namen button { display: block; padding: 16px; border-radius: 14px; background: var(--vlak); box-shadow: var(--schaduw);
  text-decoration: none; color: var(--tekst); font-size: 18px; font-weight: 700; text-align: left; width: 100%; }
.tablet-namen .klaar { background: var(--groen-zacht); color: var(--groen); }

/* paraat in kolommen zoals Brandweerrooster (0.5.1) */
.paraat-kolommen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.paraat-kol { background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw); overflow: hidden; border: 1px solid var(--lijn); }
.paraat-kol header { padding: 12px 14px 10px; }
.paraat-kol h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 19px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.15); }
.stip { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: none; }
.stip.groen { background: #5bbd3c; } .stip.oranje { background: #e8901a; } .stip.rood { background: var(--rood); }
.taken { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.taken .bus { width: 20px; height: 20px; fill: #1f2733; }
.taak { background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.12); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 800; }
.paraat-aantal { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px;
  background: var(--vlak-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); font-size: 14px; text-transform: uppercase; }
.paraat-aantal .label { text-transform: none; }
.paraat-uitleg { margin: 0; padding: 8px 14px; font-size: 14px; color: var(--tekst); border-bottom: 1px solid var(--lijn); }
.paraat-namen { list-style: none; margin: 0; padding: 0; }
.paraat-namen li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--lijn); }
.paraat-namen li:last-child { border-bottom: 0; }
.iconen { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.iconen i, .ico-bv, .ico-asp { font-style: normal; display: inline-flex; }
.ico-bv { background: #c62828; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 3px; line-height: 1; }
.ico-asp { background: #222; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 5px; border-radius: 3px; line-height: 1; }
.ico-aed svg, .ico-stuur svg { width: 20px; height: 20px; display: block; }
.ico-stuur { color: #111; } .ico-stuur.groen { color: #2e9b45; } .ico-stuur.grijs { color: #a7adb5; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.upload-vak { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: 12px 0 10px; padding: 26px 16px; border: 2px dashed #c5ccd5; border-radius: 16px; background: var(--vlak-2);
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.upload-vak:hover, .upload-vak.sleep { border-color: var(--rood); background: var(--rood-zacht); }
.upload-vak.gekozen { padding: 14px 16px; }
.upload-vak input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload-vak svg { width: 38px; height: 38px; color: var(--rood); }
.upload-vak.gekozen svg { width: 26px; height: 26px; }
.upload-vak b { font-size: 16px; }
.upload-vak span { font-size: 13px; color: var(--tekst-2); }
.upload-voorbeeld { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-bottom: 10px; }
.upload-voorbeeld img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.functie-keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.functie-keuze label { margin: 0; }
.functie-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.functie-keuze span { display: inline-block; padding: 12px 16px; border-radius: 12px; background: var(--vlak-2); box-shadow: inset 0 0 0 1.5px var(--lijn);
  font-weight: 700; font-size: 17px; cursor: pointer; }
.functie-keuze input:checked + span { background: var(--tekst); color: #fff; box-shadow: none; }
.functie-keuze input:focus-visible + span { outline: 3px solid var(--blauw); }
.klein-keuze span { padding: 8px 12px; font-size: 14px; }
.tablet-namen small { display: block; font-size: 13px; font-weight: 600; color: var(--tekst-2); margin-top: 2px; }
.tablet-namen .klaar small { color: var(--groen); }
.tablet-klaar { background: var(--groen-zacht); border: 2px solid var(--groen); }
.tablet-fotos { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.tablet-fotos .qr { width: 170px; height: 170px; background: #fff; border-radius: 10px; }
@media (max-width: 600px) { .tablet-fotos { grid-template-columns: 1fr; } }
.bezetting { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 640px) { .bezetting { grid-template-columns: 1fr; } }
.bz-rij { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.bz-rij b { font-size: 17px; }
.bz-rij span { font-size: 14px; color: var(--tekst-2); font-weight: 600; }
.bz-rij small { margin-left: auto; font-size: 12px; color: var(--tekst-2); }
.tijden { display: flex; gap: 12px; flex-wrap: wrap; }
.tijden label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; margin: 0; }
.tijden input { width: 150px; font-size: 18px; }
.tijd-nu { display: flex; gap: 6px; }
.tijd-nu button { padding: 8px 14px; }
.tablet-terug { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .tablet-terug .knop { font-size: 17px; padding: 10px 16px; }
.tablet-leeg { text-align: center; padding: 40px 20px; }
.tegel-aftekenen { border: 2px solid #e8901a; }
.tekstlog { margin-top: 12px; font-size: 13px; } .tekstlog summary { cursor: pointer; color: var(--tekst-2); font-weight: 700; } .tekstlog ul { margin: 6px 0 0; padding-left: 18px; }
.ai-blok { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--vlak-2); }
.ai-blok label { font-weight: 700; font-size: 14px; margin: 0 0 6px; display: block; }
.ai-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-rij input { flex: 1 1 240px; }
.eindtijd-blok { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--vlak-2); }
.eindtijd-blok input { width: 150px; font-size: 18px; }
.tijden-melding { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.tijden-melding label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.tijden-melding label > span:first-child { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--rood-tekst); }
.tijden-melding input { width: 160px; font-size: 26px; font-weight: 800; padding: 6px 10px; }
.tijden-melding .pijl { font-size: 26px; color: var(--tekst-2); padding-bottom: 10px; }
.tijden-melding p { flex-basis: 100%; margin: 0; }
.code-invoer { font-size: 30px; letter-spacing: .3em; text-align: center; font-weight: 800; }
.eigen-logo { height: 38px; width: auto; max-width: 140px; object-fit: contain; flex: none; }
.streep img { width: 24px; height: 24px; object-fit: contain; }
.huisstijl-voorbeeld { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.huisstijl-voorbeeld img { max-height: 48px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0/12px 12px; border-radius: 6px; padding: 4px; }
/* planning beheren: registratie per avond */
.registratie .reg-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.reg-groep h3 { font-size: 15px; margin: 0 0 6px; }
.reg-namen { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.reg-namen li { padding: 3px 0; border-bottom: 1px solid var(--lijn, #e5e5e5); overflow-wrap: anywhere; }
.reg-namen li:last-child { border-bottom: 0; }
.herhaal-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 2px 0 8px; }
.extra-oefening { margin-bottom: 14px; }
.extra-oefening summary { cursor: pointer; }
.extra-rij { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.extra-rij select { flex: 1 1 220px; min-width: 0; }
.paraat-detail { margin: 0; padding: 6px 14px 8px; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.paraat-detail summary { cursor: pointer; color: var(--tekst-2); }
.paraat-tabel { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.paraat-tabel th { text-align: left; font-weight: 700; color: var(--tekst-2); padding: 3px 4px; border-bottom: 1px solid var(--lijn); }
.paraat-tabel td { padding: 4px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.paraat-tabel td.ok { color: #1f7a3a; } .paraat-tabel td.mis { color: var(--rood-tekst, #b3121f); font-weight: 700; }
.reg-afwezig p { margin: 10px 0 0; font-size: 14px; overflow-wrap: anywhere; }

/* ---- Indeling (mobiel eerst): tabbladen per groep, één regel per persoon, paneel onderin ---- */
.ind-status { margin: -4px 0 10px; }
.ind-zoek { display: flex; gap: 8px; margin-bottom: 10px; }
.ind-zoek input { flex: 1; min-width: 0; }
.ind-tabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px; margin: 0 -2px 8px;
  background: rgba(243, 246, 250, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); scrollbar-width: none; }
.ind-tabs::-webkit-scrollbar { display: none; }
.ind-tab { flex: none; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst-2); border-radius: 99px;
  padding: 8px 14px; font-size: 14px; font-weight: 650; white-space: nowrap; min-height: 40px; }
.ind-tab b { display: inline-block; min-width: 22px; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--vlak-2); color: var(--tekst); font-size: 13px; }
.ind-tab b.rood { background: var(--rood-zacht); color: var(--rood-tekst); }
.ind-tab.actief { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.ind-tab.actief b { background: rgba(255, 255, 255, .2); color: #fff; }
.ind-paneel { display: none; margin-bottom: 12px; }
.ind-paneel.actief { display: block; }
.ind-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ind-kop h3 { margin: 0 0 6px; font-size: 17px; }
.ind-kop .kicker { margin: 0 0 2px; }
.ind-paneel .telregels { margin: 2px 0 6px; }
.ind-lijst { margin-top: 4px; }
.ind-rij { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--lijn); min-height: 52px; }
.ind-rij.uit .ind-naam b { color: var(--zacht); text-decoration: line-through; }
.ind-naam { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 8px 0; color: var(--tekst); font: inherit;
  display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.ind-naam b { font-weight: 650; font-size: 15px; }
.ind-naam .klein { overflow-wrap: anywhere; }
.ind-chips { display: flex; gap: 4px; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.fchip { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 8px; font-size: 13px; font-weight: 800;
  background: var(--blauw-zacht); color: #1d4f86; }
.fchip.ol { background: var(--oranje-zacht); color: #8a5208; }
.fchip.leeg { background: var(--vlak-2); color: var(--zacht); border: 1px dashed var(--lijn); }
.ind-pijl { color: var(--zacht); font-size: 20px; padding-right: 2px; }
.ind-vink input { width: 26px; height: 26px; accent-color: var(--groen); }
.rood-t { color: var(--rood-tekst); font-weight: 700; }
.ind-balk { position: sticky; bottom: 10px; z-index: 5; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  margin-top: 12px; background: rgba(243, 246, 250, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px; border-radius: 16px; box-shadow: 0 6px 24px rgba(17, 30, 50, .12); }
.ind-wijz { margin-right: auto; color: var(--oranje); font-weight: 700; font-size: 13px; }
.ind-sheet-achter { position: fixed; inset: 0; background: rgba(14, 17, 22, .35); z-index: 40; }
.ind-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--vlak); border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(17, 30, 50, .2); }
.sh-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: -14px; background: var(--vlak); padding-top: 2px; }
.sh-kop h3 { margin: 0; font-size: 19px; }
.sh-kop p { margin: 2px 0 0; }
.sh-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); margin: 14px 0 6px; }
.sh-knoppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sh-knop { border: 1px solid var(--lijn); background: var(--vlak-2); color: var(--tekst); border-radius: 12px; padding: 10px 8px; min-height: 48px;
  font-size: 14px; font-weight: 650; text-align: center; line-height: 1.2; }
.sh-knop.f { display: flex; flex-direction: column; gap: 2px; }
.sh-knop.f small { font-size: 11px; font-weight: 500; color: var(--zacht); }
.sh-knop.aan { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.sh-knop.aan small { color: rgba(255, 255, 255, .75); }
.sh-knop.uit.aan { background: var(--rood); border-color: var(--rood); }
.sh-knop.dim:not(.aan) { opacity: .5; }
body.sheet-open { overflow: hidden; }
@media (min-width: 900px) {
  .ind-sheet { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 560px; border-radius: 20px; }
  .ind-tabs { display: none; }
  .ind-panelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
  .ind-paneel { display: block; margin: 0; }
}
.ind-naam { align-items: flex-start !important; justify-content: center !important; text-align: left !important; box-shadow: none !important; min-height: 0 !important; }
.ind-chips { box-shadow: none !important; min-height: 0 !important; }
/* Komende oefenavonden: snel afmelden */
.komend-lijst { padding: 4px 14px; }
.komend-rij { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.komend-rij:last-child { border-bottom: 0; }
.komend-datum { text-decoration: none; grid-row: span 2; }
.komend-wat { display: flex; flex-direction: column; gap: 2px; color: var(--tekst); text-decoration: none; font-size: 14px; min-width: 0; }
.komend-wat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komend-wat .code { color: var(--rood-tekst); }
.komend-wat .label { align-self: flex-start; }
.komend-keuze { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.komend-rij.af .komend-wat { opacity: .55; }
.paraaf-blur { margin-left: auto; width: 110px; height: 40px; border-radius: 6px; filter: blur(5px); opacity: .55;
  background: repeating-linear-gradient(120deg, #6b7480 0 3px, transparent 3px 14px), repeating-linear-gradient(30deg, #6b7480 0 2px, transparent 2px 18px); }
.paraaf-weg { margin-left: auto; font-size: 12px; color: var(--zacht); }
.paraaf-privacy { margin: 10px 0 6px; }
/* Wegafsluitingen (NDW) */
.wegen-lijst { padding: 4px 16px; }
.weg-item { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.weg-item:last-child { border-bottom: 0; }
.weg-item.ernst-0 { border-left: 4px solid var(--rood); padding-left: 10px; margin-left: -14px; }
.weg-item.uit { opacity: .45; }
.weg-kop { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.weg-item h3 { margin: 6px 0 2px; font-size: 16px; }
.weg-item p { margin: 2px 0; overflow-wrap: anywhere; }
.weg-xml { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; max-height: 240px; overflow: auto; background: var(--vlak-2); padding: 8px; border-radius: 8px; }

/* ---- jeugdportaal ---- */
.menu a.wissel { background: var(--blauw-zacht); color: #1d4f86; }
.menu a.wissel:hover { background: #d6e6f8; }
.kind-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--lijn); }
.kind-rij:first-child { border-top: 0; }
.kind-rij .naam { font-weight: 750; min-width: 70px; }
.kind-rij form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.kind-rij input[name=reden] { width: 150px; padding: 6px 10px; font-size: 14px; border-radius: 10px; }
.toest { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--lijn); }
.toest:first-of-type { border-top: 0; }
.toest .uitleg { flex: 1; min-width: 0; }
.toest .uitleg small { display: block; color: var(--zacht); font-size: 13px; margin-top: 2px; }
.schakel { display: flex; gap: 4px; flex: none; }
.schakel button { min-height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 10px; background: var(--vlak); color: var(--tekst-2);
  box-shadow: inset 0 0 0 1.5px var(--lijn); }
.schakel button.aan-ja { background: var(--groen); color: #fff; box-shadow: none; }
.schakel button.aan-nee { background: var(--tekst-2); color: #fff; box-shadow: none; }
.pres-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.pres-rij:last-child { border-bottom: 0; }
.pres-rij .naam { flex: 1 1 140px; font-weight: 700; }
.pres-rij .groep-keuze { flex: 1 1 260px; }
.privacy-tekst { white-space: pre-line; max-width: 70ch; }
.privacy-tekst h3 { margin-top: 16px; }
.opk-vervalt { opacity: .6; }
.opk-vervalt .komend-wat b { text-decoration: line-through; }