/* Gedeelde bouwstenen van de webapp: panelen, knoppen, tabellen, meldingen.
   Elke pagina laadt dit bestand na style.css (kleuren en basiselementen) en
   voor layout.css (zijbalk en paginaraamwerk).

   Heette eerder organizations.css, terwijl de inhoud allang niet meer over
   organisaties ging — elke pagina laadde het voor deze bouwstenen. */

/* De pagina krijgt wat er onder de bovenbalk overblijft, en geeft dat door aan
   wat er in staat. Een paneel dat wil meegroeien zet zelf flex: 1; de rest
   gedraagt zich als altijd, want een blok in een kolom is even breed als
   daarvoor. */
.page {
  padding: 32px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Een paneel dat het scherm vult.
   Niet elk paneel wil dat — een formulier hoort zo hoog te zijn als het is —
   dus dit vraag je aan. Panelen met twee kolommen naast elkaar, zoals Meldingen
   en Berichten, gebruiken het: daar wil je bij een groter venster meer regels
   zien in plaats van meer leegte eronder. */
.panel--vult {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.panel h1 {
  margin: 0 0 4px;
  font-size: 20px;
}

.panel__subtitle {
  margin: 0 0 20px;
  color: var(--fg-muted);
  font-size: 14px;
}

.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* --- Een rijtje labels met een kruisje eraan ---
   Posten op de berichtenpagina, disciplines bij het materiaal: hetzelfde
   onderdeel, dus hier en niet twee keer per pagina. Het invoerveld staat niet
   in een .field omdat er geen label boven hoort: wat je erin typt is meteen het
   label dat eronder verschijnt. */
.disciplines-form input {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}

.disciplines-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.disciplines-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discipline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 12px;
  color: var(--fg);
}

.discipline-chip__remove {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
}

.discipline-chip__remove:hover {
  color: var(--danger);
}

/* Een zoekveld boven een lijst. Het heeft geen label boven zich: wat je erin
   typt staat er zelf, en de plaatshouder zegt waarin je zoekt. */
.zoekveld {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}

.zoekveld:focus {
  outline: none;
  border-color: var(--accent);
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.inline-form .field {
  flex: 1;
  max-width: 320px;
}

/* Een invoerveld zonder .field-omhulsel kreeg geen enkele opmaak mee: witte
   achtergrond, zwarte tekst, geen rand — in een donkere app leest dat als een
   half afgemaakte functie. De opmaak hangt nu aan het veld zelf, zodat het niet
   uitmaakt of er een label omheen staat. */
.inline-form > input[type="text"],
.inline-form > input[type="search"],
.inline-form > input[type="email"],
.inline-form > input[type="tel"],
.inline-form > select {
  flex: 1;
  max-width: 320px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}

.inline-form > input:focus,
.inline-form > select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Een kleinere knop, voor een actie in een rij van een lijst. Geldt voor beide
   soorten, zodat ze ook klein even hoog blijven. De maten zelf staan in
   css/style.css. */
.btn-small {
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

/* De doorzichtige knop. Alleen de kleuren staan hier; de maten deelt hij met
   de blauwe knop in css/style.css. */
.btn-secondary {
  border-color: var(--border);
  background: transparent;
  color: var(--fg);
}

/* Een knop die iets weggooit wat niet terugkomt.
   De betekenis zit in het woord op de knop, niet in de kleur: wie rood niet van
   grijs onderscheidt leest nog steeds "Verwijderen". Het rood is er bovenop,
   en de knop staat apart van de rij waar je snel doorheen tikt. */
.btn-gevaar {
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
}

.btn-gevaar:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}

/* Een knop die aanstaat, bijvoorbeeld de luchtfoto als ondergrond.
   Gevuld in plaats van alleen een andere kleur letter: dan is het ook te zien
   voor wie het kleurverschil niet meeweegt. De knoptekst zegt er bovendien bij
   waar je naartoe gaat. */
.btn-secondary.is-aan {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-secondary.is-aan:hover:not(:disabled) {
  color: #fff;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Kiezen uit een vaste set kleuren.
   Stond nergens beschreven, waardoor de vakjes in de dagplanning de kale
   knopjes van de browser waren: een paar pixels hoog en tegen elkaar aan.
   Hier één keer, want de kaart doet hetzelfde met zones. */
.color-swatches,
.zone-color-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch,
.zone-color-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
}

.color-swatch:hover,
.zone-color-swatch:hover {
  border-color: var(--border);
}

/* De gekozen kleur krijgt een witte rand. Twee namen omdat de twee pagina's
   het anders noemen; wat het doet is hetzelfde. */
.color-swatch.selected,
.color-swatch.active,
.zone-color-swatch.active {
  border-color: var(--fg);
  box-shadow: 0 0 0 2px var(--surface) inset;
}

/* Het vakje in een regel van de takenlijst: klik erop en de kleuren klappen
   eronder open. */
.taak-kleur-swatch {
  width: 20px;
  height: 20px;
  /* Nooit krimpen. In een regel met een lange naam ernaast werd het vakje
     teruggeperst tot een streepje van twee pixels. */
  flex-shrink: 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  vertical-align: middle;
}

.taak-kleur-swatch:hover {
  border-color: var(--fg);
}

/* Een regel in de plekkenlijst van "Van de kaart": het vinkje en de naam
   links, de kleurstip rechts. De stip staat buiten het label, anders zou erop
   klikken ook het vinkje omzetten. */
.plekken-rij {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plekken-rij .team-keuze__optie {
  flex: 1;
  min-width: 0;
}

.kleur-picker-popup {
  position: fixed;
  /* Boven een venster uit. Het palet is ook te openen vanuit "Van de kaart",
     en een venster staat op 10000; op 1000 koos je een kleur die je niet zag. */
  z-index: 10050;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.6);
}

.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.members-table th {
  text-align: left;
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Een kolomkop waarop je kunt klikken om te sorteren. Het driehoekje staat er
   altijd, maar alleen bij de kolom waarop gesorteerd wordt is het vol: anders
   zie je niet waar je op klikken kunt tot je erover gaat.

   Met randen getekend en niet met een pijltjesteken. Zo'n teken hangt af van
   het lettertype, en dat van deze app heeft er geen: dan staat er een leeg
   blokje in de kop. */
.sorteerbaar {
  cursor: pointer;
  user-select: none;
}

.sorteerbaar::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0.3;
}

.sorteerbaar:hover {
  color: var(--fg);
}

.sorteerbaar:hover::after {
  opacity: 0.6;
}

.sorteerbaar--actief {
  color: var(--fg);
}

.sorteerbaar--actief::after {
  opacity: 1;
}

.sorteerbaar--actief[data-richting="neer"]::after {
  border-bottom: none;
  border-top: 5px solid currentColor;
}

.sorteerbaar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.members-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.members-table tr:last-child td {
  border-bottom: none;
}

.members-table input[type="text"],
.members-table input[type="email"],
.members-table input[type="tel"],
.members-table select {
  width: 100%;
  min-width: 120px;
  background: var(--surface-raised);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 8px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
}

.members-table input:focus,
.members-table select:focus {
  outline: none;
  border-color: var(--accent);
}

.members-table select:disabled {
  color: var(--fg-muted);
  cursor: not-allowed;
}

.col-actions {
  width: 220px;
}

.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--fg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  /* Boven alles, ook boven een venster en boven de fotoviewer.

     Hier stond niets, en een melding kwam dus achter het donkere vlak van een
     venster te liggen. Onzichtbaar. Elke melding die vanuit een venster komt —
     opslaan gelukt, dit veld klopt niet, het uploaden is mislukt — werd zo
     ingeslikt, op elke pagina met een venster.

     Dat is hoe het uploaden van een plattegrond "gewoon niets doet": de fout
     werd wel gemeld, alleen achter het venster. */
  z-index: 10002;
}

/* --- Vensters (modals) ---
   Stond eerder dubbel, in draaiboek.css én events.css. Pagina's die geen van
   beide laadden hadden dus geen vensteropmaak, en een wijziging moest twee keer.

   Belangrijk: een venster mag nooit hoger worden dan het scherm. Werd het dat
   toch — bij een lange ledenlijst bijvoorbeeld — dan liep het buiten beeld en
   was er niets meer te scrollen. De inhoud scrollt nu binnen het venster. */
/* Een kaart blijft in zijn eigen laag.
   Leaflet zet zijn lagen intern op z-index 400 tot 1000 (tegels, punten,
   zoomknoppen, popups), en zonder eigen stapelcontext tellen die mee tegen de
   hele pagina. Dan schoof een kaart over alles wat lager staat: het
   feedbackvenster (70), de bovenbalk (600) bij scrollen, de emojikiezer, de
   teampop-ups in de planning. Op 7 november 2026 lag het kaartje bij een
   melding over het feedbackvenster heen.

   Met isolation blijven die getallen binnen de kaart; de kaart zelf staat op
   het niveau van de pagina. Eén regel hier, voor alle zes kaarten, in plaats
   van elk venster afzonderlijk boven de 1000 te tillen. Zie
   scripts/stapelcheck.mjs. */
.leaflet-container {
  isolation: isolate;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Leaflet's eigen onderdelen (zoomknoppen, popups) gaan intern tot z-index
     1000, en hun voorouders maken geen eigen stapelcontext — zonder dit klimt
     de kaart boven een venster uit. */
  z-index: 10000;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.modal--wide {
  max-width: 720px;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.modal__header h2 {
  margin: 0;
  font-size: 17px;
}

.modal__close {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal__close:hover {
  color: var(--fg);
}

/* Vensters hadden geen enkele ruimte tussen hun velden: .field zet alleen zijn
   eigen label en invoer onder elkaar, en het venster liet de rest aan het
   toeval over. Met twee velden viel dat niet op, met zeven wel — dan lopen een
   uitleg en het volgende label tegen elkaar aan en lijkt de tekst bij het
   verkeerde veld te horen.

   Eén regel voor alle vensters, in plaats van per venster iets verzinnen. */
.modal > .field,
.modal > .modal__row {
  margin-bottom: 18px;
}

/* Twee of drie velden naast elkaar.

   Hier ging het scheef. Het label boven het ene veld paste op één regel, het
   label boven het andere op twee. Dan begint het tweede invoervak lager dan het
   eerste. Dat leest als een fout in de pagina.

   De oplossing: de velden delen hun regels. Regel één is voor alle labels,
   regel twee voor de invoervakken, regel drie voor de uitleg eronder. Een label
   van twee regels maakt regel één hoger voor alle velden, dus de invoervakken
   blijven op één lijn.

   Dat heet subgrid. Kan de browser dat niet, dan blijft het zoals het was: naast
   elkaar, met de kans dat het bij een lang label scheef staat. Niets kapot. */
.modal__row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 12px;
}

.modal__row .field {
  flex: 1 1 160px;
  margin-bottom: 0;
}

@supports (grid-template-rows: subgrid) {
  .modal__row {
    display: grid;
    /* Elk veld een eigen kolom, allemaal even breed. Precies wat het hiervoor
       deed, zodat een rij van drie velden een rij van drie blijft. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    /* Dit is ook de ruimte tussen het label en het invoervak, dus klein. Zes
       pixels is wat .field zelf aanhoudt. */
    row-gap: 6px;
  }

  .modal__row .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
  }
}

/* Uitleg hoort dicht op het veld waar hij bij staat en ver van het volgende. */
.modal .field .field__uitleg {
  margin-top: 2px;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

/* Eén knop hoort rechtsonder te staan, net als de bevestigknop in elk ander
   venster. Zonder dit duwt de verdeling hem naar links. */
.modal__footer > :only-child {
  margin-left: auto;
}

/* Twee knoppen die bij elkaar horen aan de rechterkant, zodat de balk niet
   drie losse knoppen over de breedte uitsmeert. */
.modal__footer-rechts {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Foto's groot bekijken (js/fotoviewer.js) --- */

.fotoviewer {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 72px;
  /* Boven de vensters, want een foto open je meestal vanuit een venster. */
  z-index: 10001;
}

.fotoviewer[hidden] {
  display: none;
}

.fotoviewer__foto {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.fotoviewer__sluit {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}

.fotoviewer__pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(23, 29, 43, 0.9);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.fotoviewer__pijl:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fotoviewer__pijl--vorige {
  left: 16px;
}

.fotoviewer__pijl--volgende {
  right: 16px;
}

.fotoviewer__teller {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
}

/* --- Opmaakbalk boven een tekstvak (js/opmaak.js) --- */

.opmaakbalk {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.opmaakbalk__knop {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 9px;
  cursor: pointer;
}

.opmaakbalk__knop:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Wat de crew straks te zien krijgt. Zelfde opmaak als in de app, zodat wat
   hier staat ook daar klopt. */
.briefing__voorbeeld {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

.briefing__voorbeeld:empty {
  display: none;
}

/* Een lege regel die je echt ziet.
   Staat hier los van het voorbeeldvak, want dezelfde tekst wordt ook getoond
   bij een briefing zelf. Een vaste hoogte en geen marge: zo is hij even hoog
   als een regel tekst, waar hij ook terechtkomt. Zie js/opmaak.js. */
.opmaak-wit {
  height: 0.9em;
}

.briefing__voorbeeld p {
  margin: 0 0 8px;
}

.briefing__voorbeeld h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}

.briefing__voorbeeld ul,
.briefing__voorbeeld ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.briefing__voorbeeld li {
  margin-bottom: 3px;
}

.briefing__voorbeeld > *:last-child {
  margin-bottom: 0;
}

/* --- Aanvinkregel en uitleg binnen een veld --- */

/* Stond alleen in css/draaiboek.css terwijl meerdere pagina's het gebruiken.

   Het label eromheen is zelf al gedempt, dus alleen een andere kleur maakte
   geen verschil: "Telefoonnummer optioneel" las als één woordgroep. Kleiner,
   en de haakjes komen hiervandaan zodat ze er niet de ene keer wel en de
   andere keer niet omheen staan. */
.field__optioneel {
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-muted);
  opacity: 0.75;
}

.field__optioneel::before {
  content: "(";
}

.field__optioneel::after {
  content: ")";
}

.checkbox-regel {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: var(--fg);
  font-size: 14px;
}

.checkbox-regel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Uitleg onder een instelling die iets doet wat je niet terugziet in het veld
   zelf — bijvoorbeeld wat er met bewaarde gegevens gebeurt. */
.field__uitleg {
  margin: 6px 0 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* --- Tabbladen boven een pagina (js/layout.js, js/paginagroepen.js) ---

   Onderwerpen met meerdere gezichten — de kaart, het draaiboek, het materiaal —
   staan één keer in het menu. Deze balk laat zien welke gezichten er zijn en op
   welk je staat. Bewust ingetogen: het is navigatie binnen een pagina, geen
   tweede menu. */

.pagina-tabs {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
}

.pagina-tabs__tab {
  padding: 9px 14px;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pagina-tabs__tab:hover {
  color: var(--fg);
}

.pagina-tabs__tab--actief {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- Keuzeschakelaar met tabbladen (.view-toggle) ---

   Stond drie keer los gedefinieerd — in css/berichten.css, css/dagplanning.css
   en css/draaiboek.css — met net andere lettergroottes en marges, en op de
   kaartpagina helemaal niet, waar de knoppen dus als witte browserknoppen in
   een donkere balk stonden. Eén keer hier, en elke pagina die de opmaak
   gebruikt krijgt hem vanzelf goed. */

.view-toggle {
  display: flex;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.view-toggle__btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  color: var(--fg-muted);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.view-toggle__btn:hover {
  color: var(--fg);
}

.view-toggle__btn.active {
  background: var(--accent-strong);
  color: var(--fg);
}

/* Over de volle breedte, voor een schakelaar die als kop boven een lijst staat
   in plaats van als knopje in een werkbalk. */
.view-toggle--vol .view-toggle__btn {
  flex: 1;
}

/* Smal, voor in een zijkolom: daar passen drie tabbladen niet op de gewone
   maat. Alleen de ruimte eromheen krimpt, de tekst blijft leesbaar. */
.view-toggle--smal {
  padding: 2px;
}

.view-toggle--smal .view-toggle__btn {
  padding: 5px 6px;
  font-size: 12px;
}

/* --- Bestand kiezen ---
   Stond alleen in css/meldingen.css terwijl elke pagina met een upload hem
   nodig heeft. De knop die de browser er zelf in zet krijgt de huisstijl mee,
   want anders staat er één wit blokje in een donker venster. */

.field input[type="file"] {
  color: var(--fg-muted);
  font-size: 13px;
  padding: 8px 10px;
}

.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Schuifregelaar ---
   Nergens opgemaakt, dus overal de standaard van het besturingssysteem: een
   lichtblauwe balk die niets met de app te maken heeft. */

.field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--surface-raised);
  cursor: pointer;
}

.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
}

.field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.field input[type="range"]:focus {
  outline: none;
}

.field input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent-vlak, rgba(66, 99, 235, 0.35));
}

/* --- Melding als er iets stukgaat --- */
/* Bijna elke pagina begint met alles verborgen en toont pas iets als de
   gegevens binnen zijn. Gaat er onderweg iets mis, dan bleef het scherm leeg —
   en dan weet je niet of je geen toegang hebt, of dat er niets is, of dat er
   iets kapot is. Zie js/foutmelder.js. */

.foutbalk {
  margin: 24px 32px 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
}

.foutbalk__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--fg);
}

.foutbalk__sluit {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.foutbalk__sluit:hover {
  color: var(--fg);
}

.foutbalk__uitleg {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.foutbalk__tekst {
  margin: 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Bèta --- */
/* Wat nog verandert hoort dat te zeggen. Wie weet dat iets bèta is meldt eerder
   dat er iets niet klopt, in plaats van er stilletjes omheen te werken. */

.beta-label {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid var(--warning);
  border-radius: 999px;
  color: var(--warning);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  vertical-align: middle;
  white-space: nowrap;
}

.sidebar__beta {
  margin-left: 6px;
  padding: 1px 5px;
  background: rgba(245, 158, 11, 0.14);
  border-radius: 4px;
  color: var(--warning);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Uitleg onder een invoerveld. Kleiner en rustiger dan het label, want het is
   een toelichting en geen tweede vraag. */
.field__hulp {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Toelichtingen die je kunt wegklappen. Zie js/uitleg.js.
   De kop is de knop: de hele regel is een groter doel dan een los pijltje, en
   leest ook als "hier kun je op klikken". */
.uitleg__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.uitleg__kop:hover {
  color: var(--fg);
}

.uitleg__kop:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Het pijltje moet te zien zijn. Op elf pixels in gedempt grijs was het een
   stipje in de hoek waarvan niemand vermoedt dat je erop kunt klikken. */
.uitleg__pijl {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}

.uitleg__kop:hover .uitleg__pijl {
  color: var(--fg);
  border-color: var(--accent);
}

/* Dicht: alleen de kop blijft staan. De marge eronder gaat ook weg, anders
   blijft er een gat waar de tekst stond. */
.uitleg--dicht > *:not(.uitleg__kop) {
  display: none;
}

.uitleg--dicht .uitleg__kop {
  margin-bottom: 0;
}

/* --- Kengetallen ---
   Een rij kaarten met een getal erin: label, waarde, en een regel eronder die
   zegt waar het getal over gaat. Stond eerst alleen in css/beheer.css, terwijl
   de verkeersdrukpagina dezelfde kaarten gebruikt — en die laadt dat bestand
   niet, dus daar viel alles terug op kale tekst. Vandaar hier. */

.kengetallen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.kengetal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.kengetal__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

.kengetal__waarde {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.kengetal__bij {
  font-size: 12px;
  color: var(--fg-muted);
}

/* --- Dagen kiezen ---
   Een rij vinkjes voor de dagen van een evenement, gebruikt bij de briefing en
   bij het intekenen van punten en zones op de kaart. Had op geen van beide
   pagina's een stijl, dus het stond als een kale kolom vinkjes zonder kader.
   Dezelfde vorm als de teamkeuze bij de briefing, want het is hetzelfde soort
   keuze. */
.dag-keuze {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.dag-keuze label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Een kopje binnen een venster. Zonder stijl viel dit terug op de standaard-h3
   van de browser: te groot voor een venster, en met marges die niet bij de rest
   passen. */
.modal__kopje {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

.modal__kopje:first-child {
  margin-top: 0;
}

/* --- Een aanvinklijst in een venster ---
   Een lijstje met vinkjes dat scrollt zodra er veel in staat. Begon bij de
   teamkeuze in het draaiboek, maar het is dezelfde vorm bij de plekken van de
   dagplanning en bij de leden. Daarom staat het hier en niet op een pagina:
   anders moet elke pagina die het gebruikt zijn eigen kopie meenemen, en dan
   ziet hetzelfde lijstje er per scherm anders uit. */
/* De teamkeuze stond in een klein kadertje naast een gewone keuzelijst. Vier
   regels zichtbaar, een schuifbalk erin, en namen die halverwege afbraken:
   "Mate...", "Team ...". Naast een veld van normale hoogte zag dat eruit als
   iets wat er per ongeluk stond.
   Nu is het een veld als alle andere, met ruimte voor de namen. */
.team-keuze {
  max-height: 168px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.team-keuze__optie {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  cursor: pointer;
}

.team-keuze__optie input {
  flex-shrink: 0;
  margin: 0;
}

/* Een teamnaam mag omlopen. Afbreken met puntjes betekent dat je "Team 1
   (Coördinatie)" en "Team 1 (Catering)" niet uit elkaar houdt, en dat is nou
   net waar je op klikt. */
.team-keuze__naam {
  flex: 1;
  min-width: 0;
}

.team-keuze__extra {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--fg-muted);
}

/* "Er is hier nog niets." Rustig, want het is geen fout. */
.team-keuze__leeg {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
}

/* --- Importeren uit een spreadsheet (js/importvenster.js) ---
   Twee pagina's gebruiken dit venster: de ledenlijst en het draaiboek. De vorm
   is op beide plekken gelijk, zodat je het één keer hoeft te snappen. */
.importeren {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.importeren__uitleg {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.importeren__stappen {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Het nummer in een rondje links, de uitleg ernaast. Twee stappen die je in
   volgorde doet; een rij knoppen naast elkaar zou die volgorde verbergen. */
.importeren__stap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.importeren__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.importeren__stapkop {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

.importeren__stapuitleg {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.importeren__fout {
  margin: 0;
  padding: 10px 12px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--danger);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
}

.importeren__uitslag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.importeren__telling {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

/* De lijst scrollt in zijn eigen vak. Zonder dit zou een bestand van
   tweehonderd regels het venster tot buiten het scherm duwen, met de knop
   onderaan buiten bereik. */
.importeren__tabel-omhulsel {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.importeren__tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.importeren__tabel th,
.importeren__tabel td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.importeren__tabel th {
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  color: var(--fg-muted);
  font-weight: 600;
  z-index: 1;
}

.importeren__nr {
  color: var(--fg-muted);
}

/* Wat er met een regel gebeurt, in kleur: toevoegen is rustig, overslaan valt
   op. Je moet in één blik zien of er iets misgaat. */
.importeren__wat {
  white-space: normal;
  color: var(--fg-muted);
}

.importeren__rij--nieuw td {
  color: var(--fg);
}

.importeren__rij--bestaat td,
.importeren__rij--fout td {
  color: var(--fg-muted);
}

.importeren__rij--fout .importeren__wat {
  color: var(--danger);
}

.importeren__meer {
  margin: 0;
  font-size: 12px;
  color: var(--fg-muted);
}

/* --- Feedback -------------------------------------------------------------
   Het knopje rechtsonder, op elke pagina. Klein en rustig: het moet altijd
   bereikbaar zijn zonder ergens voor in de weg te zitten.

   De hoogte: boven alles wat bij de pagina zelf hoort, onder de echte vensters.
   Het stond op 70 en 71, en dan lag het onder van alles: de bovenbalk (600),
   de panelen op de livekaart (500), de keuzelijsten in de planning (2000) en
   de dagplanning (9000). Wie feedback geeft, kijkt naar dit venster — dat hoort
   bovenop te liggen. Een venster (10000), een melding (10002) en de fotoviewer
   (10001) blijven erboven, want die open je bewust. Zie scripts/stapelcheck.mjs. */
.feedback-knop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9500;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg-muted);
  cursor: pointer;
  opacity: 0.75;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.feedback-knop:hover,
.feedback-knop--open {
  opacity: 1;
  color: var(--fg);
  border-color: var(--accent);
}

.feedback-knop svg {
  width: 19px;
  height: 19px;
}

/* Er staat een antwoord voor je klaar. */
.feedback-knop__stip {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: 2px solid var(--surface);
}

.feedback-venster {
  position: fixed;
  right: 18px;
  bottom: 68px;
  z-index: 9501;
  width: min(360px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 110px));
  overflow-y: auto;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.feedback-venster__kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.feedback-venster__kop h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.feedback-venster__sluit,
.feedback-venster__terug {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.feedback-venster__terug {
  margin-left: 0;
  margin-right: 2px;
  font-size: 16px;
}

.feedback-venster__uitleg,
.feedback-venster__mee {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.feedback-venster__mee {
  margin: 8px 0 12px;
}

.feedback-soorten {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.feedback-soort {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.feedback-soort strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.feedback-soort small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--fg-muted);
}

.feedback-soort--aan {
  border-color: var(--accent-strong);
  background: rgba(99, 102, 241, 0.12);
}

.feedback-tekst,
.feedback-antwoord textarea {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

.feedback-tekst:focus,
.feedback-antwoord textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-venster__voet {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.feedback-fout {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--danger);
}

.feedback-lijst {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.feedback-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.feedback-item:hover {
  border-color: var(--accent);
}

.feedback-item__tekst {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.feedback-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--fg-muted);
}

.feedback-item__nieuw {
  color: var(--accent);
  font-weight: 600;
}

.feedback-status {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
}

.feedback-status--nieuw {
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--accent);
}

.feedback-status--opgepakt {
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--warning);
}

.feedback-status--klaar {
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--success);
}

.feedback-gesprek {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.feedback-bel {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-raised);
}

.feedback-bel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.feedback-bel small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--fg-muted);
}

.feedback-bel--ik {
  justify-self: end;
  background: rgba(99, 102, 241, 0.16);
}

.feedback-bel--zij {
  justify-self: start;
}

.feedback-antwoord {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.feedback-antwoord textarea {
  flex: 1;
}

/* Op een telefoon in de browser mag hij de hele breedte pakken. */
@media (max-width: 480px) {
  .feedback-venster {
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* Het vinkje voor de schermafdruk. */
.feedback-afdruk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--fg-muted);
  cursor: pointer;
}

.feedback-afdruk input {
  margin: 0;
  accent-color: var(--accent-strong);
}

.feedback-afdruk:hover {
  color: var(--fg);
}

/* De schermafdruk bij een melding, in de beheermodule. Klein in beeld en groot
   in een nieuw tabblad: op een kaartje wil je zien dát er een afdruk is, en pas
   als je hem opent wil je de details lezen. */
.feedback-afbeelding {
  display: block;
  margin: 10px 0 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.feedback-afbeelding img {
  display: block;
  width: 100%;
}

.feedback-afbeelding__uitleg {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--fg-muted);
}

/* Het nummer van een feedbackmelding. Klein en in een vaste letterbreedte,
   zodat #0009 en #0010 even breed zijn en de kolom niet gaat wiebelen. */
.feedback-nummer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
}

/* Een smal venster voor één vraag. Een naam intypen hoeft niet zo breed te zijn
   als een venster met een hele tabel erin. */
.modal--smal {
  max-width: 380px;
}

/* Een veld dat je kunt inspreken: de microfoonknop staat in het veld, rechts.
   Zo blijft de rij velden even breed en verschuift er niets bij browsers die
   spraakherkenning niet kennen — daar komt de knop namelijk niet. */
.dicteerveld {
  position: relative;
  display: block;
}

.dicteerveld > input,
.dicteerveld > textarea {
  width: 100%;
  padding-right: 40px;
}

.dicteerknop {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg-muted);
  cursor: pointer;
}

.dicteerknop:hover {
  color: var(--fg);
  border-color: var(--border);
}

/* Aan het luisteren. Rood en een rustige klop: je moet in één blik kunnen zien
   dat de microfoon openstaat, ook als je net wegkeek. */
.dicteerknop--aan {
  color: var(--danger);
  border-color: var(--danger);
  animation: dicteerklop 1.4s ease-in-out infinite;
}

@keyframes dicteerklop {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .dicteerknop--aan {
    animation: none;
  }
}

/* Een aanvinklijst of keuzelijst waar nog niets in staat.
 *
 * Zo'n lijst is een vlak met een rand eromheen dat door de tekencode wordt
 * gevuld. Is er niets te vullen — een nieuwe organisatie zonder teams, een
 * evenement zonder rollen — dan bleef er een streepje van een paar pixels hoog
 * over. Dat leest als iets dat stuk is in plaats van als iets dat leeg is.
 *
 * :empty pakt precies dat geval: geen enkel kind en geen tekst. Zodra er één
 * regel in staat, geldt deze regel niet meer. */
.team-keuze:empty,
.member-picker:empty,
.rol-keuze:empty {
  display: block;
  padding: 14px 12px;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: center;
}

.team-keuze:empty::before {
  content: "Nog geen teams voor dit evenement.";
}

.member-picker:empty::before {
  content: "Nog niemand om uit te kiezen.";
}

.rol-keuze:empty::before {
  content: "Nog geen rollen.";
}

/* --- De telefoonpagina ---
   Wat je op een telefoon ziet in plaats van de webapp. Zie js/mobielwacht.js
   voor waarom, en mobiel.html voor de pagina zelf.

   Hij leunt op .auth-card van het inlogscherm, want het is hetzelfde soort
   pagina: één kaart in het midden, verder niets. Alleen iets breder, omdat er
   twee winkelregels op volle breedte in staan. */
.mobiel-kaart {
  max-width: 420px;
}

.mobiel-winkels {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

/* Eén regel per winkel. Drie kolommen die niet meebewegen met de tekst: het
   logo en het label rechts houden een vaste maat, de naam ertussen krijgt wat
   overblijft. Zo staan de twee regels onder elkaar precies gelijk, ook als de
   ene naam korter is dan de andere. */
.mobiel-winkel {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
}

.mobiel-winkel[data-stand="kan"] {
  background: var(--surface-raised);
}

.mobiel-winkel[data-stand="kan"]:hover {
  border-color: var(--accent);
}

/* Een winkel die er nog niet is. Gestippelde rand en geen vulling: dat leest
   als "hier komt iets" zonder dat het uitgeschakeld aanvoelt. */
.mobiel-winkel[data-stand="wacht"] {
  border-style: dashed;
  cursor: default;
}

.mobiel-winkel__teken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-raised);
}

.mobiel-winkel[data-stand="wacht"] .mobiel-winkel__teken {
  color: var(--fg-muted);
  background: none;
}

/* min-width 0 zodat een lange winkelnaam afbreekt binnen zijn kolom in plaats
   van de kolom breder te maken en het label rechts weg te drukken. */
.mobiel-winkel__tekst {
  display: grid;
  min-width: 0;
}

.mobiel-winkel__boven {
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-muted);
}

.mobiel-winkel__tekst strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.mobiel-winkel[data-stand="wacht"] .mobiel-winkel__tekst strong {
  color: var(--fg-muted);
  font-weight: 500;
}

.mobiel-winkel__stand {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.mobiel-winkel[data-stand="kan"] .mobiel-winkel__stand {
  color: var(--accent);
}

.mobiel-uitleg {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.mobiel-uitleg h2 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.mobiel-uitleg p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
}

.mobiel-uitleg p:last-child {
  margin-bottom: 0;
}

.mobiel-hulp {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Op een klein toestel wordt de kaart smaller dan het label rechts toelaat.
   Dan valt dat label weg: de gestippelde rand en het grijze "Binnenkort in de"
   zeggen het al. */
@media (max-width: 380px) {
  .mobiel-winkel {
    grid-template-columns: 32px 1fr;
  }

  .mobiel-winkel__stand {
    display: none;
  }
}

/* --- De uitleg boven een pagina ---
 *
 * Veertien pagina's begonnen met een alinea van twee- tot vijfhonderd tekens
 * over de volle breedte. Dat is vijf of zes regels lezen voordat je bij het werk
 * bent, elke keer dat je de pagina opent — ook de honderdste keer, als je het al
 * weet.
 *
 * Nu staat er één regel die zegt waar de pagina voor is, en zit de rest achter
 * "Hoe werkt dit?". Dat is een <details>, dus het werkt zonder JavaScript en de
 * browser onthoudt niets: dicht is de normale stand. Wie het één keer wil lezen
 * klapt het open; wie de pagina kent ziet er niets van.
 *
 * De tekst binnenin krijgt een leesbreedte mee. Een regel van 1250 pixels is
 * voor tekst te lang — je oog vindt het begin van de volgende regel niet terug.
 */
.uitleg {
  margin: 0 0 18px;
}

.uitleg > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
  /* Het standaard driehoekje van de browser staat op elk besturingssysteem
     anders en soms buiten de rand; hieronder staat een eigen teken. */
  list-style: none;
}

.uitleg > summary::-webkit-details-marker {
  display: none;
}

.uitleg > summary::before {
  content: "›";
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform 120ms ease;
}

.uitleg[open] > summary::before {
  transform: rotate(90deg);
}

.uitleg > summary:hover {
  border-color: var(--border-strong, var(--border));
  color: var(--fg);
}

.uitleg__tekst {
  max-width: 78ch;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.uitleg__tekst p {
  margin: 0 0 10px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.6;
}

.uitleg__tekst p:last-child {
  margin-bottom: 0;
}

/* De regel die wél blijft staan. Die hoort ook een leesbreedte te hebben: hij
   is korter, maar niet zo kort dat 1250 pixels prettig leest. */
.panel > .panel__subtitle,
.panel__head .panel__subtitle {
  max-width: 96ch;
}

/* --- De onderdelen van een evaluatieverslag ---
   Een aanvinklijst waarbij elke regel een zin uitleg heeft. Zonder die zin moet
   je raden wat "Het verloop per melding" met de lengte van je verslag doet. */
.verslag-keuze {
  display: grid;
  gap: 2px;
}

.verslag-keuze__regel {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.verslag-keuze__regel:hover {
  background: var(--surface-raised);
}

/* Een onderdeel dat bij het vorige hoort, ingesprongen zodat je ziet dat het
   niet los staat. */
.verslag-keuze__regel--onder {
  margin-left: 26px;
}

.verslag-keuze__regel--uit {
  opacity: 0.45;
  cursor: default;
}

.verslag-keuze__regel--uit:hover {
  background: none;
}

.verslag-keuze__regel input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.verslag-keuze__tekst {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.verslag-keuze__tekst strong {
  font-size: 14px;
  font-weight: 600;
}

.verslag-keuze__tekst span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

/* --- Concept of gepubliceerd ---
 *
 * Boven de planning, de dagplanning en het draaiboek. Zolang iets in concept
 * staat gaat er niets naar de telefoons van de crew; zie js/publicatie.js.
 *
 * De conceptbalk valt op — je moet weten dat je crew nog niets weet. De balk
 * die zegt dat het gepubliceerd is niet: dat is de normale stand, en een
 * gekleurde balk die de hele show blijft staan leest na een dag als ruis.
 */
.publicatiebalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.publicatiebalk--concept {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.publicatiebalk--klaar {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}

.publicatiebalk__tekst {
  min-width: 0;
  flex: 1 1 320px;
}

.publicatiebalk__uitleg,
.publicatiebalk__wanneer {
  display: block;
  margin-top: 3px;
  color: var(--fg-muted);
  font-size: 12px;
}

.publicatiebalk__knop {
  flex-shrink: 0;
}