/* =====================================================================
   Oefenregistratie Brandweerpost Culemborg
   Stijl in de visuele taal van de brandweerhuisstijl: brandweerrood als
   hoofdkleur, goud als accent, strakke humanistische typografie.
   Pas --rood aan als jullie regio een andere waarde hanteert.
   ===================================================================== */

:root {
  --rood:         #d52b1e;   /* brandweerrood, benadering van Pantone 485 C */
  --rood-donker:  #a81f15;
  --rood-licht:   #fdf2f1;
  --goud:         #ffb81c;

  --antraciet:    #1c1c1c;
  --tekst:        #232323;
  --tekst-zacht:  #5f5f5f;
  --rand:         #d8d8d8;
  --rand-licht:   #ececec;
  --vlak:         #ffffff;
  --achtergrond:  #f2f2f2;

  --gelukt:       #1e7a3c;
  --gelukt-vlak:  #eaf5ee;
  --fout:         #c0261a;
  --fout-vlak:    #fdeeec;
  --info-vlak:    #eef3f9;

  --radius:       3px;
  --radius-groot: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", Univers, Calibri,
               "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; color: var(--antraciet); }
h1 { font-size: 1.55rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; padding-bottom: .35rem; border-bottom: 2px solid var(--rand-licht); }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
a  { color: var(--rood-donker); }

/* ---------- Kopbalk ---------- */
.balk {
  display: flex; align-items: center; gap: .75rem;
  background: var(--rood); color: #fff;
  padding: .7rem 1.25rem;
  border-bottom: 4px solid var(--goud);
  position: sticky; top: 0; z-index: 20;
}
.merk {
  color: #fff; text-decoration: none; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: .95rem;
}
.balk-rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.wie { font-size: .82rem; opacity: .92; }
.knop-link {
  background: none; border: 1px solid rgba(255,255,255,.6); color: #fff;
  padding: .22rem .7rem; border-radius: var(--radius); cursor: pointer; font: inherit; font-size: .82rem;
}
.knop-link:hover { background: rgba(255,255,255,.14); }
.menuknop { background: none; border: 0; color: #fff; font-size: 1.35rem; cursor: pointer; padding: 0 .25rem; }

/* ---------- Indeling ---------- */
.omhulsel { display: flex; min-height: calc(100vh - 56px); }

.zijbalk {
  width: 232px; flex-shrink: 0; background: var(--vlak);
  border-right: 1px solid var(--rand); padding: .75rem 0 2rem;
  display: none;
}
body.menu-open .zijbalk { display: block; }

.zijbalk a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1.15rem; color: var(--tekst); text-decoration: none;
  border-left: 3px solid transparent; font-size: .92rem;
}
.zijbalk a:hover { background: var(--achtergrond); }
.zijbalk a.actief {
  background: var(--rood-licht); border-left-color: var(--rood);
  color: var(--rood-donker); font-weight: 600;
}
.zijbalk .kopje {
  display: block; padding: 1.1rem 1.15rem .3rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tekst-zacht); font-weight: 600;
}

/* Beheer is inklapbaar */
.menublok { border-top: 1px solid var(--rand-licht); margin-top: .8rem; }
.menublok > summary {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; list-style: none; user-select: none;
}
.menublok > summary::-webkit-details-marker { display: none; }
.menublok > summary .kopje { padding-right: 0; }
.menublok > summary::after {
  content: ''; margin-left: auto; margin-right: 1.15rem; margin-top: .8rem;
  width: 0; height: 0;
  border-left: 5px solid var(--tekst-zacht);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s;
}
.menublok[open] > summary::after { transform: rotate(90deg); }
.menublok > summary:hover { background: var(--achtergrond); }

.zijbalk .subkopje {
  display: block; padding: .6rem 1.15rem .2rem 1.15rem;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: #9a9a9a; font-weight: 600;
}
.menublok a { padding-left: 1.6rem; }
.menublok a.actief { padding-left: calc(1.6rem - 3px); }

/* Wat is er nieuw staat los onderaan */
.menuvoet {
  margin-top: 1.2rem; padding-top: .4rem;
  border-top: 1px solid var(--rand-licht);
}
.menuvoet a { font-size: .85rem; color: var(--tekst-zacht); }
.nav-icoon { width: 20px; height: 20px; flex-shrink: 0; }

.inhoud { flex: 1; padding: 1.25rem; max-width: 1180px; }
.inhoud-kaal { max-width: none; margin: 0; padding: 0; }

@media (min-width: 900px) {
  .zijbalk { display: block; }
  .menuknop { display: none; }
  .inhoud { padding: 1.75rem 2rem 4rem; }
}

/* ---------- Meldingen ---------- */
.melding {
  padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  border: 1px solid transparent; border-left-width: 4px;
}
.melding-gelukt { background: var(--gelukt-vlak); color: var(--gelukt); border-color: #bfe0cb; border-left-color: var(--gelukt); }
.melding-fout   { background: var(--fout-vlak);   color: var(--fout);   border-color: #f2c4bf; border-left-color: var(--fout); }
.melding-info   { background: var(--info-vlak);   color: #1c4b80;       border-color: #c3d5ea; border-left-color: #2a6bb0; }

/* ---------- Tegels ---------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.tegel {
  background: var(--vlak); border: 1px solid var(--rand); border-top: 3px solid var(--rood);
  border-radius: var(--radius-groot); padding: .9rem 1rem;
  font-size: .82rem; color: var(--tekst-zacht);
}
.tegel .getal {
  display: block; font-size: 1.9rem; font-weight: 700; color: var(--antraciet); line-height: 1.15;
}

/* ---------- Tabellen ---------- */
.tabel-omhulsel { overflow-x: auto; }
.tabel {
  width: 100%; border-collapse: collapse; background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden;
}
.tabel th, .tabel td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--rand-licht); }
.tabel th {
  background: var(--antraciet); color: #fff; font-weight: 600;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.tabel tbody tr:nth-child(even) { background: #fafafa; }
.tabel tbody tr:hover { background: var(--rood-licht); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tr.inactief { opacity: .48; }
.tabel .rechts { text-align: right; }
.tabel .midden { text-align: center; }
.tabel .nowrap { white-space: nowrap; }
.tabel .codes, .codes { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; }

.lijsttabel td, .lijsttabel th { vertical-align: middle; }
.lijsttabel col.kolom-actie { width: 1%; }
.acties { display: flex; gap: .3rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.acties .knop-klein { white-space: nowrap; }
@media (max-width: 800px) { .acties { flex-wrap: wrap; justify-content: flex-end; } }

.ja, .nee { font-size: .75rem; padding: .05rem .5rem; border-radius: 2px; font-weight: 600; }
.ja  { background: var(--gelukt-vlak); color: var(--gelukt); }
.nee { background: var(--rand-licht);  color: var(--tekst-zacht); }

/* ---------- Knoppen ---------- */
.knop, .knop-klein {
  display: inline-block; text-decoration: none; cursor: pointer; font: inherit;
  border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst);
  border-radius: var(--radius); font-size: .88rem; padding: .42rem .9rem; font-weight: 500;
}
.knop-klein { font-size: .78rem; padding: .22rem .6rem; }
.knop:hover, .knop-klein:hover { border-color: var(--antraciet); }
.knop-primair { background: var(--rood); border-color: var(--rood); color: #fff; font-weight: 600; }
.knop-primair:hover { background: var(--rood-donker); border-color: var(--rood-donker); }
.knop-gevaar { color: var(--fout); }
.knop-gevaar:hover { border-color: var(--fout); }
.breed { width: 100%; }
.inline { display: inline; }
.kop-met-knop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.knoppenrij { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* ---------- Formulieren ---------- */
.formulier {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-groot); padding: 1.25rem; max-width: 660px;
}
.formulier.smal { max-width: 430px; }
.veld { margin-bottom: 1rem; border: 0; padding: 0; }
.veld > label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .25rem;
                text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zacht); }
.veld input[type=text], .veld input[type=email], .veld input[type=password],
.veld input[type=number], .veld input[type=date], .veld input[type=time],
.veld select, .veld textarea {
  width: 100%; padding: .5rem .65rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; color: var(--tekst);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: 2px solid var(--rood); outline-offset: 0; border-color: var(--rood);
}
.veld.veld-fout input, .veld.veld-fout select { border-color: var(--fout); }
.veld.twee { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hint { font-size: .78rem; color: var(--tekst-zacht); margin: .25rem 0 0; }
.foutmelding { font-size: .8rem; color: var(--fout); margin: .25rem 0 0; font-weight: 500; }
.checkbox {
  display: flex; align-items: flex-start; gap: .45rem;
  font-weight: 400; font-size: .88rem; text-transform: none; letter-spacing: 0; color: var(--tekst);
}
.checkbox input { margin-top: .28rem; accent-color: var(--rood); }
.checkbox.mt { margin-top: .45rem; }
.functieraster, .kolomvinkjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .25rem .75rem; }
.vinkjes { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
legend { font-size: .8rem; font-weight: 600; padding: 0; text-transform: uppercase; letter-spacing: .04em; }

.filterbalk {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: .6rem .8rem;
}
.filterbalk input[type=date] { padding: .3rem .5rem; border: 1px solid var(--rand); border-radius: var(--radius); font: inherit; }
.filterbalk label { font-size: .8rem; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Inloggen ---------- */
.inlogscherm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--vlak);
}

.inlogfoto {
  background-image: url('../img/inloggen.jpg');
  background-size: cover;
  background-position: center 45%;
  background-color: var(--antraciet);
}

.inlogpaneel {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 2.5rem;
  overflow: hidden;
}

.inlogvak { width: 100%; max-width: 380px; position: relative; z-index: 2; }

.inlogtitel {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--rood);
  margin: 0 0 1.75rem;
}
.inlogtitel span { color: var(--rood-donker); }

.inlogvak label {
  display: block;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--antraciet);
  margin: 1.1rem 0 .35rem;
}
.inlogvak input {
  width: 100%;
  padding: .8rem .9rem;
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: #f7f8fa;
  color: var(--tekst);
}
.inlogvak input:focus {
  outline: 2px solid var(--rood); outline-offset: 0;
  border-color: var(--rood); background: #fff;
}

.inlogknop {
  margin-top: 1.75rem;
  padding: .8rem 1rem;
  font-size: 1rem; font-weight: 600;
}

.inlogvoet {
  margin: 1.5rem 0 0;
  font-size: .8rem; color: var(--tekst-zacht); line-height: 1.5;
}

/* Antraciet hoekvlak rechtsonder, zoals in het ontwerp */
.inloghoek {
  position: absolute; right: 0; bottom: 0;
  width: clamp(90px, 12vw, 170px);
  aspect-ratio: 1;
  background: var(--antraciet);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.kale-meldingen {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 30; width: min(420px, calc(100% - 2rem));
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.kale-meldingen .melding { margin: 0 0 .5rem; }

/* Smallere schermen: alleen het formulier, geen foto */
@media (max-width: 820px) {
  .inlogscherm { grid-template-columns: 1fr; }
  .inlogfoto { display: none; }
  .inlogpaneel {
    padding: 2.5rem 1.5rem 3rem;
    align-items: flex-start;
    border-top: 5px solid var(--rood);
  }
  .inlogvak { max-width: 420px; margin: 0 auto; }
  .inloghoek { width: 90px; }
}

/* ---------- Overig ---------- */
.leeg { color: var(--tekst-zacht); font-style: italic; }
.zacht { color: var(--tekst-zacht); }
.klein { font-size: .8rem; }
ul.strak { margin: .25rem 0 0; padding-left: 1.1rem; }
ul.strak li { margin-bottom: .1rem; }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.gegevens dt { font-weight: 600; font-size: .78rem; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .04em; }
.gegevens dd { margin: 0; }
.vrije-tekst { background: var(--vlak); border: 1px solid var(--rand); border-left: 3px solid var(--goud);
               border-radius: var(--radius); padding: .75rem 1rem; }
.foutdetail { background: #fff; border: 1px solid var(--rand); padding: 1rem; overflow-x: auto; font-size: .78rem; }

/* ---------- Oefenrooster ---------- */
.rooster td { vertical-align: top; }
.rooster tr.geen-oefening td { background: #f7f5f0; }
.rooster tr.geen-oefening:hover td { background: #f2efe8; }

/* ---------- Ploegkaarten ---------- */
.ploegkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.ploegkaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-groot); padding: 1rem;
}
.ploegkop {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem;
  padding-bottom: .55rem; border-bottom: 2px solid var(--rand-licht);
}
.ploegletter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: var(--radius);
  background: var(--rood); color: #fff; font-weight: 700; font-size: .95rem; flex-shrink: 0;
}

/* ---------- Paraatheid ---------- */
.paraatmerk {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  background: var(--goud); color: #4a3200; border-radius: 2px; padding: 0 .35rem;
}
.paraatoverzicht { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.paraatvak {
  display: flex; align-items: center; gap: .5rem;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-groot); padding: .5rem .75rem; min-width: 155px;
}
.paraatvak.leegvak { border-style: dashed; }
.voertuigmerk {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85rem; font-weight: 600;
  background: var(--antraciet); color: #fff; border-radius: 2px; padding: .08rem .45rem;
}

/* ---------- Afmeldingen ---------- */
.afmeldstrook { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.afmeldmerk {
  background: var(--vlak); border: 1px solid var(--rand); border-left: 3px solid var(--goud);
  border-radius: var(--radius); padding: .25rem .6rem; font-size: .86rem;
}

/* ---------- Indelingsbord ---------- */
.bord { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 760px) { .bord { grid-template-columns: 1fr; } }

.bordkolom {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  display: flex; flex-direction: column; min-height: 130px; padding-bottom: .3rem;
}
.bordkop {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .75rem; border-bottom: 2px solid var(--rand-licht);
}
.bordtitel { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bordnaam { font-size: .82rem; color: var(--tekst-zacht); }
.bordoefening { font-size: .8rem; color: var(--antraciet); font-weight: 600; }
.bordtelling {
  margin-left: auto; font-size: .78rem; color: var(--tekst-zacht); flex-shrink: 0;
  background: var(--achtergrond); border-radius: 999px; padding: .05rem .5rem;
}

.leiderstrook {
  padding: .4rem .75rem; border-bottom: 1px solid var(--rand-licht);
  background: #fbfbfb; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.leidermerk {
  font-size: .78rem; background: var(--vlak); border: 1px solid var(--rand);
  border-left: 3px solid var(--rood); border-radius: 2px; padding: .05rem .45rem;
}
.zonekop {
  display: flex; align-items: center; gap: .4rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  color: var(--tekst-zacht); padding: .5rem .75rem .15rem;
}
.zonetelling { background: var(--achtergrond); border-radius: 999px; padding: 0 .35rem; font-size: .68rem; }

.bordzone { border-radius: var(--radius); margin: 0 .3rem; transition: background .12s, box-shadow .12s; }
.bordzone + .bordzone { border-top: 1px dashed var(--rand); margin-top: .3rem; padding-top: .1rem; }
.bordzone[data-inzet="ondersteuning"] { background: #fafafa; }
.bordzone[data-inzet="ondersteuning"] .bordvak { min-height: 2.5rem; }
.bordzone.doelwit { background: var(--rood-licht); box-shadow: inset 0 0 0 2px var(--rood); }
.bord.kiesmodus .bordzone { outline: 1px dashed var(--rand); outline-offset: -2px; cursor: pointer; }
.bord.kiesmodus .bordzone:hover { background: var(--rood-licht); outline-color: var(--rood); }
.bordzone.zoneleeg .bordvak::after {
  content: 'leeg'; display: block; text-align: center; font-size: .74rem; color: #adadad; padding: .4rem 0;
}

.bordvak { padding: .35rem .5rem .5rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }

.kaartje {
  background: #fbfbfb; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .38rem .6rem; cursor: grab; user-select: none;
  display: flex; align-items: baseline; gap: .5rem; font-size: .88rem;
}
.kaartje:hover { border-color: var(--antraciet); }
.kaartje:focus-visible { outline: 2px solid var(--rood); outline-offset: 1px; }
.kaartje.sleept { opacity: .4; cursor: grabbing; }
.kaartje.gekozen { border-color: var(--rood); background: var(--rood-licht); box-shadow: 0 0 0 1px var(--rood); }
.kaartje.verplaatst { background: #fff8e6; border-left: 3px solid var(--goud); }
.kaartnaam { flex: 1; min-width: 0; }
.kaartfuncties {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .7rem;
  color: var(--tekst-zacht); white-space: nowrap;
}
li.gewisseld { background: #fff8e6; }

.bordbalk {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--vlak); border: 1px solid var(--rand); border-top: 3px solid var(--rood);
  border-radius: var(--radius-groot); padding: .6rem .9rem; font-size: .88rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.bordknoppen { display: flex; gap: .5rem; }
#bordmelding.onopgeslagen { color: var(--rood); font-weight: 600; }

/* ---------- Waarschuwing bij herhaling ---------- */
.waarschuwing {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; flex-shrink: 0;
  background: var(--goud); color: #4a3200;
  border-radius: 2px; font-size: .75rem; font-weight: 700; line-height: 1;
  cursor: help; align-self: center;
}
.waarschuwing[hidden] { display: none; }
.waarschuwing.klein-inline { width: .95rem; height: .95rem; font-size: .7rem; vertical-align: middle; }
.kaartje.let-op { border-left: 3px solid var(--goud); }
.kaartje.let-op.verplaatst { border-left-color: var(--rood); }

/* ---------- Presentieregistratie ---------- */
.snelacties {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  padding: .55rem .8rem; margin-bottom: 1rem;
}
#presentietelling { margin-left: auto; }
#presentietelling.onopgeslagen { color: var(--rood); font-weight: 600; }

.presentielijst {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  overflow: hidden;
}
.presentieregel {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-bottom: 1px solid var(--rand-licht);
}
.presentieregel:last-child { border-bottom: 0; }
.presentieregel:nth-child(even) { background: #fafafa; }
.presentieregel.leiding { border-left: 3px solid var(--rood); }

.pr-naam { flex: 1 1 190px; min-width: 0; line-height: 1.35; }
.pr-naam .codes { display: block; color: var(--tekst-zacht); }
.pr-afgemeld {
  display: inline-block; font-size: .74rem; background: #fff8e6;
  border: 1px solid #f0d89a; border-radius: 2px; padding: 0 .35rem; margin-top: .15rem;
}

.pr-status { display: flex; gap: .25rem; flex-shrink: 0; }
.statusknop { position: relative; cursor: pointer; }
.statusknop input { position: absolute; opacity: 0; width: 0; height: 0; }
.statusknop span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; height: 2.2rem; padding: 0 .4rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--vlak);
  font-size: .76rem; font-weight: 600; color: var(--tekst-zacht);
  text-transform: uppercase; letter-spacing: .03em;
}
.statusknop:hover span { border-color: var(--antraciet); }
.statusknop input:focus-visible + span { outline: 2px solid var(--rood); outline-offset: 1px; }

.statusknop.s-aanwezig    input:checked + span { background: var(--gelukt);  border-color: var(--gelukt);  color: #fff; }
.statusknop.s-mka         input:checked + span { background: var(--goud);    border-color: var(--goud);    color: #4a3200; }
.statusknop.s-zka         input:checked + span { background: var(--fout);    border-color: var(--fout);    color: #fff; }
.statusknop.s-vrijgesteld input:checked + span { background: var(--tekst-zacht); border-color: var(--tekst-zacht); color: #fff; }
.statusknop.s-uitruk      input:checked + span { background: var(--antraciet); border-color: var(--antraciet); color: #fff; }

.pr-rol { flex: 0 1 190px; }
.pr-rol select {
  width: 100%; padding: .4rem .5rem; font: inherit; font-size: .85rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}

@media (max-width: 640px) {
  .presentieregel { gap: .5rem; }
  .pr-naam { flex: 1 1 100%; }
  .pr-status { flex: 1 1 auto; }
  .statusknop span { min-width: 2.4rem; height: 2.4rem; }
  .pr-rol { flex: 1 1 100%; }
}

/* ---------- Verwijderen met gevolgen ---------- */
.gevaarblok {
  background: var(--fout-vlak); border: 1px solid #f2c4bf; border-left: 4px solid var(--fout);
  border-radius: var(--radius-groot); padding: 1rem; margin-top: .5rem; max-width: 660px;
}
.gevaarblok .knoppenrij { margin-top: .9rem; }
.waarschuwtekst { margin: 0 0 .6rem; font-size: .9rem; }

/* ---------- Uitgelijnde keuzelijsten ---------- */
.keuzelijst {
  border: 1px solid var(--rand-licht); border-radius: var(--radius);
  overflow: hidden; background: #fcfcfc;
}
.keuzeregel {
  display: grid;
  grid-template-columns: 1.1rem 4.2rem 1fr auto;
  align-items: center; gap: .5rem;
  padding: .32rem .55rem;
  font-size: .88rem; cursor: pointer;
  border-bottom: 1px solid var(--rand-licht);
}
.keuzeregel:last-child { border-bottom: 0; }
.keuzeregel:hover { background: var(--rood-licht); }
.keuzeregel input { margin: 0; accent-color: var(--rood); }
.keuzeregel:has(input:checked) { background: #fff; font-weight: 600; }

.kr-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85rem; }
.kr-tekst { font-size: .8rem; }
.kr-merk { justify-self: end; }

/* Oefenleiding: één brede kolom voor de naam */
.keuzeregel:has(.kr-naam) { grid-template-columns: 1.1rem 1fr; }
.kr-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Positiekeuze bij de presentie ---------- */
.pr-positie { flex: 0 0 4.6rem; }
.pr-positie select {
  width: 100%; padding: .4rem .3rem; font: inherit; font-size: .85rem; text-align: center;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}
.pr-positie select:disabled { background: var(--achtergrond); color: #adadad; }
@media (max-width: 640px) {
  .pr-rol { flex: 1 1 auto; }
  .pr-positie { flex: 0 0 5rem; }
}

/* Regels van afwezigen doen niet mee aan de posities */
.presentieregel.regel-uit .pr-rol,
.presentieregel.regel-uit .pr-positie { opacity: .5; }

/* ---------- Oefenmiddelen ---------- */
.groepknoppen { display: flex; gap: .3rem; flex-wrap: wrap; }
.groepknop {
  display: inline-block; padding: .25rem .65rem; font-size: .82rem; text-decoration: none;
  border: 1px solid var(--rand); border-radius: 999px; color: var(--tekst); background: var(--vlak);
}
.groepknop:hover { border-color: var(--antraciet); }
.groepknop.actief { background: var(--rood); border-color: var(--rood); color: #fff; font-weight: 600; }
.groepknop.actief .zacht { color: rgba(255,255,255,.8); }
.filterbalk input[type=search] {
  padding: .35rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius);
  font: inherit; min-width: 180px; margin-left: auto;
}

.middelraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: .75rem; margin-bottom: 1.5rem;
}
.middelkaart {
  display: flex; gap: .8rem;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  padding: .75rem;
}
.middelkaart.niet-voorraad { opacity: .55; }
.middelkaart[hidden] { display: none; }

.middelfoto {
  flex: 0 0 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--rand-licht); border-radius: var(--radius);
  overflow: hidden;
}
.middelfoto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.geenfoto { font-size: .72rem; color: #adadad; text-align: center; padding: .5rem; }

.middelinfo { min-width: 0; }
.middelkop { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin-bottom: .25rem; }
.middelcode {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; font-weight: 600;
  background: var(--antraciet); color: #fff; border-radius: 2px; padding: .05rem .4rem;
}
.middelnaam { font-size: .92rem; line-height: 1.3; }
.middelomschrijving { margin: 0; font-size: .82rem; color: var(--tekst-zacht); line-height: 1.45; }
.middelopmerking {
  margin: .35rem 0 0; font-size: .78rem; line-height: 1.4;
  border-left: 3px solid var(--goud); padding-left: .5rem;
}
@media (max-width: 480px) {
  .middelfoto { flex-basis: 84px; height: 84px; }
}

/* ---------- Voorvertoning bij het aanvragen ---------- */
.bestelrij {
  display: grid; grid-template-columns: minmax(0, 660px) minmax(260px, 420px);
  gap: 1rem; align-items: start;
}
/* Staat er niets in de voorvertoning, dan hoeft de tweede kolom er ook niet te zijn */
.bestelrij:has(.voorvertoning[hidden]) { grid-template-columns: minmax(0, 660px); }
.middelkaart.voorvertoning { position: sticky; top: 70px; }
@media (max-width: 900px) {
  .bestelrij { grid-template-columns: 1fr; }
  .middelkaart.voorvertoning { position: static; }
}

/* ---------- Locatiekaarten en kenmerken ---------- */
.locatiekaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; }
.locatiekaart {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem;
}
.locatiekaart.inactief { opacity: .55; }
.locatiekop { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.locatieomschrijving { margin: 0; font-size: .84rem; color: var(--tekst-zacht); line-height: 1.45; }
.locatievoet {
  margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--rand-licht);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.kenmerken { display: flex; flex-wrap: wrap; gap: .3rem; }
.kenmerk {
  font-size: .74rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--achtergrond); border: 1px solid var(--rand);
}

/* ---------- Wat is er nieuw ---------- */
.changelog { max-width: 720px; }
.cl-versie {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  padding: 1rem 1.2rem; margin-bottom: .9rem;
}
.cl-kop { display: flex; align-items: center; gap: .6rem; }
.cl-kop h2 { margin: 0; border: 0; padding: 0; font-size: 1.05rem; }
.cl-nummer {
  background: var(--rood); color: #fff; font-weight: 700; font-size: .8rem;
  border-radius: var(--radius); padding: .1rem .5rem; flex-shrink: 0;
}
.cl-versie ul { margin-top: .6rem; }
.cl-versie li { margin-bottom: .35rem; line-height: 1.5; }

/* ---------- Periodekeuze bij het oefenrooster ---------- */
.periodekeuze { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .6rem; }

/* ---------- Inklapbare groepen in de planning ---------- */
.vouwveld {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0; margin-bottom: 1rem; background: #fcfcfc;
}
.vouwveld > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; cursor: pointer; user-select: none;
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zacht);
  list-style: none;
}
.vouwveld > summary::-webkit-details-marker { display: none; }
.vouwveld > summary::before {
  content: ''; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 5px solid var(--tekst-zacht);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s;
}
.vouwveld[open] > summary::before { transform: rotate(90deg); }
.vouwveld > summary:hover { background: var(--achtergrond); }
.vouwveld[open] > summary { border-bottom: 1px solid var(--rand-licht); }

.vouwtelling {
  margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .78rem; color: var(--tekst-zacht);
  background: var(--achtergrond); border-radius: 999px; padding: .05rem .5rem;
}
.vouwveld[open] .vouwtelling { display: none; }

.vouwveld .keuzelijst { border: 0; border-radius: 0; background: transparent; }
.vouwveld > .hint { padding: .3rem .6rem .5rem; margin: 0; }
.vouwveld > input[type=text] {
  width: calc(100% - 1.2rem); margin: 0 .6rem .6rem;
  padding: .5rem .65rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}
.subveld {
  display: block; padding: .5rem .6rem .25rem;
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zacht);
  border-top: 1px solid var(--rand-licht);
}

/* ---------- Waarschuwing automatisch uitloggen ---------- */
.sessievenster {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 28, 28, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.sessievenster[hidden] { display: none; }

.sessiekaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-top: 5px solid var(--rood);
  border-radius: var(--radius-groot);
  padding: 1.5rem;
  max-width: 400px; width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.sessiekaart h2 {
  margin: 0 0 .6rem; border: 0; padding: 0;
  font-size: 1.15rem; color: var(--antraciet);
}
.sessiekaart p { margin: 0 0 .5rem; line-height: 1.5; }
.sessiekaart #sessieklok { color: var(--rood); white-space: nowrap; }
.sessiekaart .knoppenrij { margin-top: 1.25rem; }

/* ---------- Weekkaart (proefopzet, papieren stijl) ---------- */
.weekkaart {
  max-width: 1000px; margin: 0 auto; padding: 1.25rem;
  font-size: .82rem; color: #000;
}
.wk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wk-kop h1 { font-size: 1.25rem; margin: 0 0 .15rem; }
.wk-onderkop { margin: 0 0 .9rem; color: var(--tekst-zacht); font-size: .85rem; }

.wk-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wk-tabel th, .wk-tabel td {
  border: 1px solid #999; padding: .18rem .35rem; text-align: left; vertical-align: middle;
}

/* Kopblok bovenaan */
.wk-label { width: 22%; background: #f0f0f0; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.wk-onderwerp th { background: #e8e8e8; font-size: .86rem; }
.wk-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.wk-klein { font-weight: 400; font-size: .76rem; }
.wk-ploegrij th { background: #f6f6f6; font-weight: 600; }
.wk-letter {
  display: inline-block; background: var(--rood); color: #fff;
  padding: 0 .3rem; border-radius: 2px; font-weight: 700;
}

/* Personenblokken */
.wk-mensen { margin-top: .5rem; }
.wk-groepkop th { background: var(--antraciet); color: #fff; font-size: .72rem;
                  text-transform: uppercase; letter-spacing: .05em; }
.wk-letterkolom { width: 4%; text-align: center; }
.wk-naamkolom   { width: 34%; }
.wk-functiekolom{ width: 16%; }
.wk-vak         { width: 8%; text-align: center; }

.wk-nr { text-align: center; color: #777; font-size: .74rem; }
.wk-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-rol { font-size: .68rem; color: var(--tekst-zacht); margin-left: .3rem; }
.wk-functie { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: #555; }
.wk-leiding td { background: #fbf6e6; }
.wk-mensen tbody tr:nth-child(even) td { background: #fafafa; }
.wk-mensen tbody tr.wk-leiding:nth-child(even) td { background: #f7f1e0; }

.wk-x { font-weight: 700; color: #000; }
.wk-v { font-weight: 700; color: var(--rood); margin-left: .2rem; }

.wk-totaal { margin-top: .5rem; }
.wk-totaal td { background: #f0f0f0; }

.wk-afgemeld { margin: .6rem 0 0; font-size: .78rem; }
.wk-legenda { margin: .5rem 0 0; font-size: .74rem; color: var(--tekst-zacht); }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { background: #fff; }
  .nietprinten { display: none !important; }
  .weekkaart { max-width: none; padding: 0; font-size: 8.5pt; }
  .wk-kop h1 { font-size: 13pt; }
  .wk-mensen { page-break-inside: avoid; }
  .wk-tabel th, .wk-tabel td { padding: .08rem .25rem; }
}

/* Late afmelding en bulkactie bij de presentie */
.statusknop.s-late_mka input:checked + span { background: #e08a1e; border-color: #e08a1e; color: #fff; }
.bulkrol { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.bulkrol select {
  padding: .22rem .4rem; font: inherit; font-size: .8rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; max-width: 200px;
}
@media (max-width: 640px) {
  .bulkrol { width: 100%; }
  .bulkrol select { flex: 1; max-width: none; }
}

.soortmerk {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--achtergrond); border: 1px solid var(--rand);
  border-radius: 2px; padding: 0 .35rem; color: var(--tekst-zacht); margin-left: .3rem;
}

.bordkeuze {
  padding: .3rem .45rem; font: inherit; font-size: .82rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}
@media (max-width: 640px) {
  .bordknoppen { flex-wrap: wrap; }
  .bordkeuze { flex: 1 1 100%; }
}

/* Late afmelding herkenbaar maken */
.merk-laat {
  font-size: .72rem; font-weight: 600;
  background: #fdefdc; color: #8a5000;
  border: 1px solid #e8c48a; border-radius: 2px; padding: 0 .35rem;
}
.afmeldmerk.laat { border-left-color: #e08a1e; }
.pr-afgemeld.laat { background: #fdefdc; border-color: #e8c48a; color: #8a5000; }

/* ---------- Opkomstrapportage ---------- */
.opkomstbalk {
  display: inline-block; vertical-align: middle;
  width: 70px; height: 8px; margin-right: .4rem;
  background: var(--rand-licht); border-radius: 999px; overflow: hidden;
}
.opkomstvulling { display: block; height: 100%; border-radius: 999px; }
.ploegscheiding td {
  background: var(--achtergrond); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.weinig {
  display: inline-block; width: 1rem; height: 1rem; line-height: 1rem;
  text-align: center; background: var(--goud); color: #4a3200;
  border-radius: 2px; font-size: .72rem; font-weight: 700; cursor: help;
}
.kleurveld { display: flex; align-items: center; gap: .5rem; }
.kleurveld input[type=color] {
  width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--rand);
  border-radius: var(--radius); background: none; cursor: pointer;
}

@media print {
  .nietprinten { display: none !important; }
  .opkomstbalk { border: 1px solid #ccc; }
}

/* ---------- Geoefendheidsraster ---------- */
.geoefendtabel { table-layout: auto; font-size: .8rem; }
.geoefendtabel .vastekolom {
  position: sticky; left: 0; z-index: 2;
  background: var(--vlak); box-shadow: 1px 0 0 var(--rand-licht);
}
.geoefendtabel thead .vastekolom { background: var(--antraciet); z-index: 3; }
.geoefendtabel tbody tr:nth-child(even) .vastekolom { background: #fafafa; }
.geoefendtabel .kaartkop {
  writing-mode: vertical-rl; transform: rotate(180deg);
  height: 7rem; padding: .3rem .15rem; font-size: .68rem; letter-spacing: .02em;
  white-space: nowrap; text-align: left;
}
.geoefendcel { font-size: .7rem; padding: .2rem .25rem; min-width: 2.4rem; cursor: help; }
.cel-recent { background: #e3f3e8; color: #1e7a3c; }
.cel-oud    { background: #fdf3e0; color: #8a5000; }
.cel-nooit  { background: #fdeeec; }
.hint .cel-recent, .hint .cel-oud, .hint .cel-nooit {
  padding: .05rem .4rem; border-radius: 2px; font-weight: 600;
}
.hint .cel-nooit { color: var(--fout); }

.kwartaal { font-size: .78rem; font-weight: 600; min-width: 2.1rem; }

@media print {
  .geoefendtabel { font-size: 7pt; }
  .geoefendtabel .kaartkop { height: 5rem; }
}

/* ---------- Instellingen per onderdeel ---------- */
.instelgroep {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-groot); margin-bottom: 1rem; overflow: hidden;
}
.instelkop {
  padding: .7rem 1rem; background: #fbfbfb; border-bottom: 1px solid var(--rand-licht);
}
.instelkop h2 {
  margin: 0; border: 0; padding: 0; font-size: 1rem;
}
.instelkop p { margin: .15rem 0 0; }

.instelvelden {
  padding: 1rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.instelvelden .veld { margin: 0; }
.instelvelden .veld-kleur { max-width: 190px; }
.instelvelden input[type=text], .instelvelden input[type=number], .instelvelden select {
  width: 100%; padding: .5rem .65rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}

/* ---------- Medewerkerskaart ---------- */
.kaartrij {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr);
  gap: .6rem; margin-bottom: 1.5rem;
}
.kerncijfer {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-groot); padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.kerncijfer.groot { border-top: 3px solid var(--rood); }
.kerncijfer .cijfer { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--antraciet); }
.let-op-cijfer { color: #e08a1e !important; }
.opkomstbalk.breed { width: 100%; height: 10px; margin: .2rem 0; }

.tweekolom {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;
}
.tweekolom h2 { margin-top: 0; }

.kwartaalrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.kwartaalvak {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-groot);
  padding: .6rem; text-align: center; display: flex; flex-direction: column; gap: .2rem;
}
.kwartaalvak .cijfer { font-size: 1.2rem; font-weight: 700; }
.kwartaalvak .opkomstbalk { width: 100%; height: 5px; }

.rolbalken { display: flex; flex-direction: column; gap: .3rem; }
.rolregel { display: grid; grid-template-columns: 4rem 1fr 2.5rem; align-items: center; gap: .5rem; }
.rolnaam { font-size: .8rem; }
.rolbalk { height: 10px; background: var(--rand-licht); border-radius: 999px; overflow: hidden; }
.rolvulling { display: block; height: 100%; background: var(--rood); border-radius: 999px; }
.rolaantal { font-size: .8rem; text-align: right; color: var(--tekst-zacht); }
.let-op-tekst { color: #8a5000; background: #fdf3e0; border-left: 3px solid var(--goud);
                padding: .4rem .6rem; border-radius: var(--radius); }

.stofraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .4rem; margin-bottom: 1rem;
}
.stofvak {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .4rem .6rem; display: flex; flex-direction: column; line-height: 1.35;
}
.stofcode { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; font-weight: 700; }
.stoftitel { font-size: .8rem; }
.stofwanneer { font-size: .72rem; opacity: .8; }

.statusmerk {
  font-size: .72rem; padding: .1rem .45rem; border-radius: 2px; font-weight: 600;
  background: var(--achtergrond); color: var(--tekst-zacht);
}
.statusmerk.s-aanwezig    { background: var(--gelukt-vlak); color: var(--gelukt); }
.statusmerk.s-uitruk      { background: var(--antraciet);   color: #fff; }
.statusmerk.s-mka         { background: #fff8e6;            color: #8a5000; }
.statusmerk.s-late_mka    { background: #fdefdc;            color: #8a5000; border: 1px solid #e8c48a; }
.statusmerk.s-zka         { background: var(--fout-vlak);   color: var(--fout); }

@media (max-width: 900px) {
  .kaartrij { grid-template-columns: 1fr 1fr; }
  .tweekolom { grid-template-columns: 1fr; }
}

/* ---------- Specialismen en COH-B ---------- */
.bemanning {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem; align-items: start;
}
.bemanninggroep {
  border: 1px solid var(--rand-licht); border-radius: var(--radius); overflow: hidden;
}
.bemanningkop {
  background: #fbfbfb; border-bottom: 1px solid var(--rand-licht);
  padding: .35rem .5rem;
}

.bemanningregel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.5rem;
  align-items: center; gap: .6rem;
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--rand-licht);
  cursor: pointer;
}
.bemanningregel:last-child { border-bottom: 0; }
.bemanningregel:hover { background: var(--achtergrond); }
.bemanningregel.gekozen { background: var(--rood-licht); }

.bemanningnaam { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bn-naam {
  font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bn-functies {
  font-size: .7rem; color: var(--tekst-zacht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bemanningregel select {
  width: 100%; min-width: 0;
  padding: .35rem .45rem; font: inherit; font-size: .82rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}

@media (max-width: 480px) {
  .bemanningregel { grid-template-columns: minmax(0, 1fr) 8.5rem; }
}

.statusmerk.s-aangevraagd { background: var(--info-vlak);   color: #1c4b80; }
.statusmerk.s-bevestigd   { background: #eef7f0;           color: var(--gelukt); }
.statusmerk.s-uitgevoerd  { background: var(--gelukt-vlak); color: var(--gelukt); }
.statusmerk.s-geannuleerd { background: var(--fout-vlak);   color: var(--fout); }

/* ---------- Normen per specialisme ---------- */
.normlijst { border: 1px solid var(--rand-licht); border-radius: var(--radius); overflow: hidden; }
.normregel {
  display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9rem;
  align-items: center; gap: .6rem;
  padding: .35rem .6rem; border-bottom: 1px solid var(--rand-licht);
}
.normregel:last-child { border-bottom: 0; }
.normkop {
  background: #fbfbfb; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tekst-zacht); font-weight: 600;
}
.normkop .midden { text-align: center; }
.normnaam { min-width: 0; }
.normregel input[type=number] {
  width: 100%; padding: .35rem .45rem; font: inherit; font-size: .85rem; text-align: center;
  border: 1px solid var(--rand); border-radius: var(--radius); background: #fff;
}
@media (max-width: 560px) {
  .normregel { grid-template-columns: minmax(0, 1fr) 5rem 5rem; }
}

/* ---------- E-mailsjablonen ---------- */
.tagslijst { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.tagregel { display: flex; flex-direction: column; padding: .25rem 0; border-bottom: 1px solid var(--rand-licht); }
.tagregel:last-child { border-bottom: 0; }
.tagregel code {
  font-size: .8rem; background: var(--achtergrond); border-radius: 2px;
  padding: 0 .3rem; align-self: flex-start;
}

/* ---------- Rechtenbeheer ---------- */
.rechtenmatrix .vastekolom {
  position: sticky; left: 0; z-index: 2; background: var(--vlak);
  box-shadow: 1px 0 0 var(--rand-licht); min-width: 15rem;
}
.rechtenmatrix thead .vastekolom { background: var(--antraciet); z-index: 3; }
.rechtenmatrix tbody tr:nth-child(even) .vastekolom { background: #fafafa; }
.rechtenmatrix .vastekolom .klein { display: block; font-weight: 400; }
.rechtenmatrix tfoot td { background: var(--achtergrond); }
.vinkje { color: var(--gelukt); font-weight: 700; }

.rechtenlijst { display: flex; flex-direction: column; }
.rechtregel {
  display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
  padding: .5rem .9rem; border-bottom: 1px solid var(--rand-licht); cursor: pointer;
}
.rechtregel:last-child { border-bottom: 0; }
.rechtregel:hover { background: var(--achtergrond); }
.rechtregel.gekozen { background: var(--rood-licht); }
.rechtregel input { margin: 0; accent-color: var(--rood); }
.rechtinfo { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rechtnaam { font-size: .92rem; font-weight: 600; }
.rechtuitleg { font-size: .8rem; color: var(--tekst-zacht); }
.rechtcode {
  font-size: .72rem; color: var(--tekst-zacht); background: var(--achtergrond);
  border-radius: 2px; padding: .05rem .35rem; white-space: nowrap;
}
@media (max-width: 640px) {
  .rechtcode { display: none; }
}

/* ---------- Accountbeheer ---------- */
.wachtwoordvak {
  font-size: 1rem; font-weight: 700; background: #fff;
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .1rem .45rem; letter-spacing: .02em;
}
.aanmaakform { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; }
.aanmaakform .bordkeuze { max-width: 11rem; }
a.wie { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.5); }
a.wie:hover { border-bottom-style: solid; }

/* ---------- Maandkalender ---------- */
.kalender { display: none; }

@media (min-width: 760px) {
  .kalender { display: block; }
  .kalenderlijst { display: none; }
}

.kalenderkop,
.kalenderweek {
  display: grid;
  grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 2px;
}

.kalenderkop span {
  background: var(--antraciet); color: #fff; padding: .3rem .45rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.kalenderkop .weeknr { background: #333; text-align: center; }

/* Alle dagen van een week even hoog */
.kalenderweek { align-items: stretch; }

.weeknr {
  display: flex; align-items: center; justify-content: center;
  background: #f4f4f4; border: 1px solid var(--rand-licht);
  font-size: .72rem; color: var(--tekst-zacht); font-weight: 600;
}

.kalenderdag {
  background: var(--vlak); border: 1px solid var(--rand-licht);
  min-height: 7rem; padding: .3rem;
  display: flex; flex-direction: column; gap: 2px;
}
.kalenderdag.weekend { background: #fafafa; }
.kalenderdag.buiten  { background: #f5f5f5; }
.kalenderdag.buiten .dagnummer { color: #c0c0c0; }
.kalenderdag.vandaag {
  border-color: var(--rood); box-shadow: inset 0 0 0 1px var(--rood);
}

.dagnummer {
  font-size: .78rem; color: var(--tekst-zacht); font-weight: 600;
  padding: 0 .1rem .1rem; flex-shrink: 0;
}
.kalenderdag.vandaag .dagnummer { color: var(--rood); }

.kalenderitem {
  display: block; text-decoration: none; color: var(--tekst);
  background: #fbfbfb; border: 1px solid var(--rand-licht);
  border-left: 3px solid #777; border-radius: 2px;
  padding: .2rem .35rem; line-height: 1.25; overflow: hidden;
  flex-shrink: 0;
}
.kalenderitem:hover { background: var(--achtergrond); border-color: var(--antraciet); }
.kalenderitem.vanmij {
  border-left-width: 5px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.kalenderitem.vanmij .itemtitel { font-weight: 700; }

.itemtitel {
  display: block; font-size: .73rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.itemextra {
  display: block; font-size: .67rem; color: var(--tekst-zacht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Legenda en filters */
.legenda { display: inline-flex; align-items: center; gap: .35rem; }
.legendastip { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }
.groepknop.uitgezet { opacity: .45; text-decoration: line-through; }
.groepknop.actief-soort { border-width: 2px; }

/* Daglijst voor smalle schermen */
.lijstdag {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-groot); margin-bottom: .5rem; padding: .5rem .6rem;
}
.lijstdag.vandaag { border-color: var(--rood); border-left-width: 4px; }
.lijstdatum {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tekst-zacht); margin-bottom: .3rem;
}
.lijstdag .kalenderitem { margin-bottom: .2rem; }
.lijstdag .itemtitel { font-size: .88rem; white-space: normal; }
.lijstdag .itemextra { font-size: .78rem; white-space: normal; }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .kalender { display: block; }
  .kalenderlijst { display: none; }
  .kalenderweek { page-break-inside: avoid; }
  .kalenderdag { min-height: 4.5rem; }
  .itemtitel { font-size: 7pt; }
  .itemextra { font-size: 6.5pt; }
}

/* ---------- Tweestapsverificatie ---------- */
.geheimvak {
  font-size: 1.4rem;
  letter-spacing: .15em;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: .6rem .8rem;
  display: inline-block;
  user-select: all;
}
.geheimvak code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.geheimlink {
  font-size: .78rem;
  word-break: break-all;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: .5rem .7rem;
}
.uitklap { margin: .5rem 0 1rem; }
.uitklap summary { cursor: pointer; color: var(--rood); font-size: .9rem; }
.herstelcodes {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: .3rem 1.5rem;
}
.herstelcodes code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: .08em;
}

/* ---------- Logboek: paginering ---------- */
.paginering {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.paginering .knop.uit {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.tabel td .zacht { color: var(--tekst-zacht); }

/* ---------- QR-code bij tweestapsverificatie ---------- */
.qrcode {
  margin: 1rem 0;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  display: inline-block;
  line-height: 0;
}
.qrcode svg {
  width: 220px;
  height: auto;
  max-width: 100%;
}

/* ---------- Weer bij een oefenavond ---------- */
.weerbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  margin: 0 0 1rem;
  padding: .5rem .8rem;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rand-sterk, #9aa4b2);
  border-radius: var(--radius);
  background: var(--vlak, #f7f8fa);
}
.weerbalk .weer-temp { font-weight: 600; }
.weerbalk .weer-bron { margin-left: auto; }
.weerbalk.weer-helder  { border-left-color: #e0a51e; }
.weerbalk.weer-bewolkt { border-left-color: #9aa4b2; }
.weerbalk.weer-regen   { border-left-color: #2f7dc0; }
.weerbalk.weer-sneeuw  { border-left-color: #7fb1d6; }
.weerbalk.weer-mist    { border-left-color: #b8bcc2; }
.weerbalk.weer-onweer  { border-left-color: #7a4fc0; }

/* ---------- Openbaar aanvraagformulier (COH-B) ---------- */
.openbaar {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1rem;
  background: var(--vlak, #f2f4f7);
}
.openbaar-paneel {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--rand, #d7dbe0);
  border-radius: var(--radius, 8px);
  padding: 1.6rem 1.8rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.openbaar-paneel h1 { margin-top: 0; }
.veld-rij { display: flex; gap: 1rem; }
.veld-rij .veld { flex: 1; }
.verplicht { color: #c0261a; }
.veldfout { display: block; margin-top: .25rem; color: #c0261a; font-size: .85rem; }
.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Veldgroep (fieldset) op het openbare formulier ---------- */
.veldgroep {
  border: 1px solid var(--rand, #d7dbe0);
  border-radius: var(--radius, 8px);
  padding: .75rem 1rem 1rem;
  margin: 0 0 1rem;
}
.veldgroep > legend {
  padding: 0 .4rem;
  font-weight: 600;
  color: var(--tekst-zacht, #55606e);
}