/* ============================================================================
   Bedieningselementen van het beheer: één definitie, voor alle schermen.

   WAAROM DIT BESTAAD BESTAAT

   Tot 10 september werd elk formulierelement per module opnieuw gestileerd. Dat
   leverde op zestien schermen op:

     - tien verschillende hoogtes voor een invoerveld of keuzelijst:
       25, 29, 37, 38, 39, 41, 43, 44, 46 en 47 pixels, soms naast elkaar op
       hetzelfde scherm;
     - zeven verschillende hoekafrondingen: 0, 4, 5, 6, 7, 8 en 9 pixels;
     - 22 van de 39 keuzelijsten zonder enige stijl - een kale grijze doos van
       25 pixels hoog naast een invoerveld van 44. Oorzaak: `custom.css` zet
       `select { appearance: none }` voor alles, waarmee de eigen weergave van
       de browser wegvalt, en vier modules hadden er elk hun eigen kopie van een
       pijltje bij gemaakt. De negen andere schermen niet;
     - het thema zet `form label { text-transform: uppercase; letter-spacing:
       2px }`. Elk label in het hele beheer stond dus in kapitalen, ook een hele
       zin naast een vinkje;
     - `.hotelbeheer-form label { display: block }` was specifieker dan
       `.hotelbeheer-toggle { display: flex }`, waardoor het vinkhokje bóven
       zijn tekst kwam te staan en één vinkrij 126 pixels innam.

   Dit bestand wordt als LAATSTE ingeladen en is opzettelijk op elementniveau
   geschreven, binnen twee scopes: `body.beheer-dashboard` voor het beheer en
   `body.aanmeldscherm` voor aanmelden, wachtwoord en tweestapsverificatie. Die
   tweede scope is nodig omdat die schermen geen <main> hebben en dus buiten
   elke moduleregel vielen: velden van 36 pixels met een afronding van 3,75 en
   labels in kapitalen, terwijl het beheer ernaast op 44 stond. Het zijn wél de
   eerste schermen die iemand ziet.

   Door de late plaats en de attribuutselectors is dit specifieker dan elke
   moduleregel die hetzelfde nog eens doet, zonder ergens `!important` nodig te
   hebben. Breedte en plaatsing blijven van de module: dit bestand gaat alleen
   over hoe een bedieningselement eruitziet en hoe groot het is.

   Keuzes die Tim op 10 september gemaakt heeft:
     - één hoogte: 44 pixels (ruim);
     - kapitalen alleen voor sectiekopjes, veldlabels in gewone schrijfwijze;
     - de bewaarknop staat altijd rechts.
   ========================================================================== */

:root {
    --veld-hoogte: 44px;
    --veld-hoogte-compact: 36px;
    --veld-radius: 7px;
    --veld-rand: #d2dfea;
    --veld-rand-zwaar: #b9cbdd;
    --veld-vulling: #fff;
    --veld-vulling-uit: #f4f7fa;
    --veld-tekst: #112844;
    --veld-tekst-uit: #7d8fa1;
    --veld-plaatshouder: #8a9cae;
    --veld-padding-x: 12px;
    --label-tekst: #46586b;
    --hulp-tekst: #52657a;
    --focus-ring: 0 0 0 3px rgba(23, 102, 194, .2);
}

/* ── Labels ─────────────────────────────────────────────────────────────────
   Het thema schreeuwt elk label in kapitalen met 2px letterafstand. Voor een
   sectiekopje van twee woorden werkt dat; voor "Hotel tonen in de inschrijving"
   niet, en voor de uitlegzin eronder al helemaal niet. Kapitalen blijven
   voorbehouden aan de bovenschriften, die hun eigen klasse hebben. */
body.beheer-dashboard label,
body.aanmeldscherm label,
body.beheer-dashboard form label,
body.aanmeldscherm form label {
    color: var(--label-tekst);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: normal;
    margin-bottom: 6px;
    text-transform: none;
}

/* Niet elk label staat op een witte kaart. Deze drie plekken staan wél op de
   donkere achtergrond van de module: daar is de standaard labelkleur 2,4:1 en
   dus onleesbaar. Eén regel voor alle drie, in plaats van per module opnieuw.
   De keuzebalk van de kamerverdeling hoorde hier eerst ook bij, maar die is
   een witte kaart: daar gaf deze kleur 1,2:1 - tekst die er niet meer staat. */
body.beheer-dashboard .module-hoofding label,
body.beheer-dashboard .module-hoofding label > span,
body.beheer-dashboard .hotelbeheer-filterbalk label,
body.beheer-dashboard .hotelbeheer-filterbalk label > span,
body.beheer-dashboard .kamerverdeling-kamerfilters label,
body.beheer-dashboard .kamerverdeling-kamerfilters label > span { color: #cfe2fb; }

/* De bovenschriften die een sectie benoemen: die blijven klein en in kapitalen,
   want dat is wat ze onderscheidt van de veldlabels eronder. */
body.beheer-dashboard .module-label,
body.aanmeldscherm .module-label,
body.beheer-dashboard .module-label-donker,
body.aanmeldscherm .module-label-donker,
body.beheer-dashboard .dashboard-label,
body.aanmeldscherm .dashboard-label,
body.beheer-dashboard .dashboard-stat-label,
body.aanmeldscherm .dashboard-stat-label,
body.beheer-dashboard .hotelbeheer-stat-label,
body.aanmeldscherm .hotelbeheer-stat-label,
body.beheer-dashboard .kamerverdeling-label,
body.aanmeldscherm .kamerverdeling-label,
body.beheer-dashboard .vervoer-label,
body.aanmeldscherm .vervoer-label,
body.beheer-dashboard .beheer-bovenschrift,
body.aanmeldscherm .beheer-bovenschrift {
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── Invoervelden, keuzelijsten en tekstvakken ─────────────────────────────── */
/* Waarom `:not(...)` en geen lijst van types: een <input> ZONDER type-attribuut
   is een tekstveld, maar `input[type="text"]` matcht die niet. Op het
   dossierscherm staan zeventien van die velden, en die bleven daardoor op 29
   pixels staan naast buren van 44. Deze vorm pakt ze allemaal, en sluit alleen
   uit wat geen tekstveld is. */
body.beheer-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.aanmeldscherm input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.beheer-dashboard select,
body.aanmeldscherm select,
body.beheer-dashboard textarea,
body.aanmeldscherm textarea {
    background-color: var(--veld-vulling);
    border: 1px solid var(--veld-rand);
    border-radius: var(--veld-radius);
    box-shadow: none;
    color: var(--veld-tekst);
    font: inherit;
    font-size: .94rem;
    line-height: 1.35;
    min-height: var(--veld-hoogte);
    padding: 10px var(--veld-padding-x);
    transition: border-color .12s ease, box-shadow .12s ease;
}
body.beheer-dashboard textarea,
body.aanmeldscherm textarea {
    line-height: 1.55;
    min-height: calc(var(--veld-hoogte) * 2);
    padding-top: 11px;
    resize: vertical;
}
body.beheer-dashboard input::placeholder,
body.aanmeldscherm input::placeholder,
body.beheer-dashboard textarea::placeholder { color: var(--veld-plaatshouder); },
body.aanmeldscherm textarea::placeholder { color: var(--veld-plaatshouder); }

body.beheer-dashboard input:hover:not(:disabled),
body.aanmeldscherm input:hover:not(:disabled),
body.beheer-dashboard select:hover:not(:disabled),
body.aanmeldscherm select:hover:not(:disabled),
body.beheer-dashboard textarea:hover:not(:disabled) { border-color: var(--veld-rand-zwaar); },
body.aanmeldscherm textarea:hover:not(:disabled) { border-color: var(--veld-rand-zwaar); }

body.beheer-dashboard input:focus,
body.aanmeldscherm input:focus,
body.beheer-dashboard select:focus,
body.aanmeldscherm select:focus,
body.beheer-dashboard textarea:focus,
body.aanmeldscherm textarea:focus {
    border-color: var(--lourdes-blue);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Uitgeschakeld hoort er uitgeschakeld uit te zien en niet alleen niet te
   werken: in demomodus staan hele fieldsets uit. */
body.beheer-dashboard input:disabled,
body.aanmeldscherm input:disabled,
body.beheer-dashboard select:disabled,
body.aanmeldscherm select:disabled,
body.beheer-dashboard textarea:disabled,
body.aanmeldscherm textarea:disabled,
body.beheer-dashboard fieldset:disabled input,
body.aanmeldscherm fieldset:disabled input,
body.beheer-dashboard fieldset:disabled select,
body.aanmeldscherm fieldset:disabled select,
body.beheer-dashboard fieldset:disabled textarea,
body.aanmeldscherm fieldset:disabled textarea {
    background-color: var(--veld-vulling-uit);
    border-color: #e2e9f0;
    color: var(--veld-tekst-uit);
    cursor: not-allowed;
}

/* De keuzelijst. `appearance: none` staat globaal aan, dus het pijltje moet er
   zelf bij - één keer, hier, in plaats van vier keer per module. */
body.beheer-dashboard select,
body.aanmeldscherm select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2352657d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right var(--veld-padding-x) center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    cursor: pointer;
    padding-right: calc(var(--veld-padding-x) * 2 + 12px);
}
body.beheer-dashboard select:disabled { cursor: not-allowed; opacity: 1; },
body.aanmeldscherm select:disabled { cursor: not-allowed; opacity: 1; }
body.beheer-dashboard select[multiple] { background-image: none; padding-right: var(--veld-padding-x); },
body.aanmeldscherm select[multiple] { background-image: none; padding-right: var(--veld-padding-x); }

/* In een gegevenstabel is 44 pixels per rij te veel: het contingentscherm heeft
   negentig invoervelden in tabellen van vier kolommen. Daar geldt de compacte
   maat - dezelfde vorm, dezelfde randen, alleen lager. */
body.beheer-dashboard table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.aanmeldscherm table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.beheer-dashboard table select,
body.aanmeldscherm table select {
    font-size: .88rem;
    min-height: var(--veld-hoogte-compact);
    padding: 6px 10px;
}
body.beheer-dashboard table select { padding-right: 30px; },
body.aanmeldscherm table select { padding-right: 30px; }

/* In een formulierraster vult een veld zijn cel. Zonder deze regel krimpt een
   keuzelijst tot de breedte van haar langste optie, en dan past het label
   ernáást in plaats van erboven - zo stond "Soort verblijf" op de hotelfiche
   half over zijn eigen keuzelijst. */
body.beheer-dashboard .hotelbeheer-formgrid input,
body.beheer-dashboard .hotelbeheer-formgrid select,
body.beheer-dashboard .hotelbeheer-formgrid textarea,
body.beheer-dashboard .reisbeheer-formgrid input,
body.beheer-dashboard .reisbeheer-formgrid select,
body.beheer-dashboard .reisbeheer-formgrid textarea,
body.beheer-dashboard .detail-form-grid input,
body.beheer-dashboard .detail-form-grid select,
body.beheer-dashboard .detail-form-grid textarea,
body.aanmeldscherm form input,
body.aanmeldscherm form select { width: 100%; }
body.beheer-dashboard .hotelbeheer-formgrid input[type="checkbox"],
body.beheer-dashboard .reisbeheer-formgrid input[type="checkbox"],
body.beheer-dashboard .detail-form-grid input[type="checkbox"],
body.aanmeldscherm form input[type="checkbox"] { width: 18px; }

/* En dan staat het label erboven, zoals het hoort. */
/* Een vinkrij is óók een label, en die moet flex blijven: zonder deze
   uitsluitingen zette deze regel het vinkhokje van "Voorschot verplicht" weer
   boven zijn tekst - exact de fout die dit bestand kwam oplossen. */
body.beheer-dashboard .hotelbeheer-formgrid > div > label:not(.hotelbeheer-toggle):not(.reisbeheer-toggle):not(.beheer-keuzerij):not(.detail-keuzerij),
body.beheer-dashboard .reisbeheer-formgrid > div > label:not(.hotelbeheer-toggle):not(.reisbeheer-toggle):not(.beheer-keuzerij):not(.detail-keuzerij),
body.beheer-dashboard .detail-form-grid > div > label:not(.hotelbeheer-toggle):not(.reisbeheer-toggle):not(.beheer-keuzerij):not(.detail-keuzerij) { display: block; }

/* En een vinkrij die direct in een raster staat, blijft ook flex. */
body.beheer-dashboard .reisbeheer-formgrid label.reisbeheer-toggle,
body.beheer-dashboard .hotelbeheer-formgrid label.hotelbeheer-toggle,
body.beheer-dashboard .detail-form-grid label.beheer-keuzerij { display: flex; }

/* ── Vinkjes en keuzerondjes ────────────────────────────────────────────────── */
body.beheer-dashboard input[type="checkbox"],
body.aanmeldscherm input[type="checkbox"],
body.beheer-dashboard input[type="radio"],
body.aanmeldscherm input[type="radio"] {
    accent-color: var(--lourdes-blue);
    background: none;
    border: 0;
    box-shadow: none;
    flex: 0 0 auto;
    height: 18px;
    min-height: 0;
    padding: 0;
    width: 18px;
}
body.beheer-dashboard input[type="checkbox"]:focus-visible,
body.aanmeldscherm input[type="checkbox"]:focus-visible,
body.beheer-dashboard input[type="radio"]:focus-visible,
body.aanmeldscherm input[type="radio"]:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}
body.beheer-dashboard table input[type="checkbox"],
body.aanmeldscherm table input[type="checkbox"],
body.beheer-dashboard table input[type="radio"] { min-height: 0; },
body.aanmeldscherm table input[type="radio"] { min-height: 0; }

/* Een vinkje met tekst ernaast is één rij, niet twee. Deze regel is specifieker
   dan `.hotelbeheer-form label { display: block }` en zet dat recht. */
body.beheer-dashboard label.hotelbeheer-toggle,
body.aanmeldscherm label.hotelbeheer-toggle,
body.beheer-dashboard label.reisbeheer-toggle,
body.aanmeldscherm label.reisbeheer-toggle,
body.beheer-dashboard label.beheer-keuzerij,
body.aanmeldscherm label.beheer-keuzerij,
body.beheer-dashboard label.detail-keuzerij,
body.aanmeldscherm label.detail-keuzerij {
    align-items: flex-start;
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
    text-transform: none;
}
body.beheer-dashboard label.hotelbeheer-toggle > span,
body.aanmeldscherm label.hotelbeheer-toggle > span,
body.beheer-dashboard label.reisbeheer-toggle > span,
body.aanmeldscherm label.reisbeheer-toggle > span,
body.beheer-dashboard label.beheer-keuzerij > span,
body.aanmeldscherm label.beheer-keuzerij > span,
body.beheer-dashboard label.detail-keuzerij > span,
body.aanmeldscherm label.detail-keuzerij > span {
    display: grid;
    gap: 2px;
    letter-spacing: normal;
    text-transform: none;
}
body.beheer-dashboard label.hotelbeheer-toggle strong,
body.aanmeldscherm label.hotelbeheer-toggle strong,
body.beheer-dashboard label.reisbeheer-toggle strong,
body.aanmeldscherm label.reisbeheer-toggle strong,
body.beheer-dashboard label.beheer-keuzerij strong,
body.aanmeldscherm label.beheer-keuzerij strong,
body.beheer-dashboard label.detail-keuzerij strong,
body.aanmeldscherm label.detail-keuzerij strong {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}
body.beheer-dashboard label.hotelbeheer-toggle small,
body.aanmeldscherm label.hotelbeheer-toggle small,
body.beheer-dashboard label.reisbeheer-toggle small,
body.aanmeldscherm label.reisbeheer-toggle small,
body.beheer-dashboard label.beheer-keuzerij small,
body.aanmeldscherm label.beheer-keuzerij small,
body.beheer-dashboard label.detail-keuzerij small,
body.aanmeldscherm label.detail-keuzerij small {
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.45;
    margin-top: 0;
    text-transform: none;
}
/* Het vinkhokje staat op de eerste tekstregel, niet erboven. */
body.beheer-dashboard label.hotelbeheer-toggle > input[type="checkbox"],
body.aanmeldscherm label.hotelbeheer-toggle > input[type="checkbox"],
body.beheer-dashboard label.reisbeheer-toggle > input[type="checkbox"],
body.aanmeldscherm label.reisbeheer-toggle > input[type="checkbox"],
body.beheer-dashboard label.beheer-keuzerij > input[type="checkbox"],
body.aanmeldscherm label.beheer-keuzerij > input[type="checkbox"],
body.beheer-dashboard label.detail-keuzerij > input[type="checkbox"] { margin-top: 2px; },
body.aanmeldscherm label.detail-keuzerij > input[type="checkbox"] { margin-top: 2px; }

/* ── Hulptekst onder een veld ───────────────────────────────────────────────── */
body.beheer-dashboard form small,
body.aanmeldscherm form small,
body.beheer-dashboard .beheer-hulptekst,
body.aanmeldscherm .beheer-hulptekst {
    color: var(--hulp-tekst);
    display: block;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.45;
    margin-top: 5px;
    text-transform: none;
}

/* ── De knoprij onder een formulier ─────────────────────────────────────────
   Stond op `justify-content: space-between`: bij twee knoppen spatiëren ze naar
   de randen, bij één knop valt hij links. Zo stond "Fiche opslaan" rechts en
   "Aanbod opslaan" links, in hetzelfde scherm. De regel is nu: de bewaarknop
   staat rechts, wat er ook naast staat. Een uitleg ernaast wordt links geduwd
   met `margin-right: auto`. */
body.beheer-dashboard .hotelbeheer-formacties,
body.aanmeldscherm .hotelbeheer-formacties,
body.beheer-dashboard .reisbeheer-formacties,
body.aanmeldscherm .reisbeheer-formacties,
body.beheer-dashboard .detail-acties,
body.aanmeldscherm .detail-acties,
body.beheer-dashboard .capaciteit-acties,
body.aanmeldscherm .capaciteit-acties,
body.beheer-dashboard .beheer-knoprij,
body.aanmeldscherm .beheer-knoprij {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
/* De uitleg links, de knoppen rechts - ook als ze in de HTML in de andere
   volgorde staan. Op het contingentscherm staat de bewaarknop vóór zijn uitleg
   in de broncode; zonder `order` bleef die knop dus links staan en week het
   scherm alweer af van de rest. */
body.beheer-dashboard .hotelbeheer-formacties > *,
body.aanmeldscherm .hotelbeheer-formacties > *,
body.beheer-dashboard .reisbeheer-formacties > *,
body.aanmeldscherm .reisbeheer-formacties > *,
body.beheer-dashboard .detail-acties > *,
body.aanmeldscherm .detail-acties > *,
body.beheer-dashboard .capaciteit-acties > *,
body.aanmeldscherm .capaciteit-acties > *,
body.beheer-dashboard .beheer-knoprij > * { order: 2; },
body.aanmeldscherm .beheer-knoprij > * { order: 2; }

body.beheer-dashboard .hotelbeheer-formacties > .detail-uitleg,
body.aanmeldscherm .hotelbeheer-formacties > .detail-uitleg,
body.beheer-dashboard .reisbeheer-formacties > .detail-uitleg,
body.aanmeldscherm .reisbeheer-formacties > .detail-uitleg,
body.beheer-dashboard .detail-acties > .detail-uitleg,
body.aanmeldscherm .detail-acties > .detail-uitleg,
body.beheer-dashboard .capaciteit-acties > .detail-uitleg,
body.aanmeldscherm .capaciteit-acties > .detail-uitleg,
body.beheer-dashboard .beheer-knoprij > .detail-uitleg,
body.aanmeldscherm .beheer-knoprij > .detail-uitleg,
body.beheer-dashboard .hotelbeheer-formacties > span:not(.module-knop),
body.aanmeldscherm .hotelbeheer-formacties > span:not(.module-knop),
body.beheer-dashboard .reisbeheer-formacties > span:not(.module-knop),
body.aanmeldscherm .reisbeheer-formacties > span:not(.module-knop),
body.beheer-dashboard .capaciteit-acties > span:not(.module-knop),
body.aanmeldscherm .capaciteit-acties > span:not(.module-knop),
body.beheer-dashboard .detail-acties > span:not(.module-knop),
body.aanmeldscherm .detail-acties > span:not(.module-knop) {
    margin-right: auto;
    max-width: 62ch;
    order: 1;
    text-align: left;
}

/* ── Knoppen ────────────────────────────────────────────────────────────────
   Een knop naast een veld hoort even hoog te zijn als dat veld. Dat was niet zo:
   knoppen kwamen voor op 34, 38, 43 en 47 pixels, en in een filterrij stond een
   knop van 43 naast een veld van 44 - één pixel scheef leest als slordig. Twee
   maten, dezelfde als de velden: normaal en compact. */
body.beheer-dashboard .module-knop,
body.aanmeldscherm .module-knop,
body.beheer-dashboard button[type="submit"].module-knop,
body.aanmeldscherm button[type="submit"].module-knop {
    /* min-height is een ondergrens, geen maat: met een icoon van 15px en de
       erfregelhoogte van 1,5 werd een knop 47 pixels hoog en stond hij dus 3
       pixels boven het veld ernaast uit. Met een eigen regelhoogte past de
       inhoud binnen de 44. */
    line-height: 1.2;
    min-height: var(--veld-hoogte);
}

/* De aanmeldknop komt uit het thema (.btn) en niet uit .module-knop. */
body.aanmeldscherm .btn,
body.beheer-dashboard .btn { line-height: 1.2; min-height: var(--veld-hoogte); }

body.beheer-dashboard .module-knop-small,
body.aanmeldscherm .module-knop-small,
body.beheer-dashboard table .module-knop,
body.beheer-dashboard table button { min-height: var(--veld-hoogte-compact); }

/* Deze uitzondering stond op 38 pixels om knoppen in een smalle filterkolom te
   laten passen; de nowrap daaruit blijft nuttig, de afwijkende hoogte niet. */
body.beheer-dashboard .inschrijving-filters .module-knop { min-height: var(--veld-hoogte); }

/* Het europrefix voor een bedrag moet dezelfde hoogte hebben als het veld
   ernaast, anders steekt het eruit. */
body.beheer-dashboard .hotelbeheer-input-euro span,
body.aanmeldscherm .hotelbeheer-input-euro span,
body.beheer-dashboard .reisbeheer-input-euro span,
body.aanmeldscherm .reisbeheer-input-euro span {
    align-items: center;
    background: #f2f6fa;
    border: 1px solid var(--veld-rand);
    border-radius: var(--veld-radius) 0 0 var(--veld-radius);
    border-right: 0;
    color: #5c6e80;
    display: flex;
    min-height: var(--veld-hoogte);
    padding: 0 11px;
}
body.beheer-dashboard .hotelbeheer-input-euro input,
body.aanmeldscherm .hotelbeheer-input-euro input,
body.beheer-dashboard .reisbeheer-input-euro input { border-radius: 0 var(--veld-radius) var(--veld-radius) 0; },
body.aanmeldscherm .reisbeheer-input-euro input { border-radius: 0 var(--veld-radius) var(--veld-radius) 0; }

@media (max-width: 560px) {
body.beheer-dashboard .hotelbeheer-formacties,
body.aanmeldscherm .hotelbeheer-formacties,
body.beheer-dashboard .reisbeheer-formacties,
body.aanmeldscherm .reisbeheer-formacties,
body.beheer-dashboard .detail-acties,
body.aanmeldscherm .detail-acties,
body.beheer-dashboard .beheer-knoprij { align-items: stretch; flex-direction: column-reverse; },
body.aanmeldscherm .beheer-knoprij { align-items: stretch; flex-direction: column-reverse; }
body.beheer-dashboard .hotelbeheer-formacties > .detail-uitleg,
body.aanmeldscherm .hotelbeheer-formacties > .detail-uitleg,
body.beheer-dashboard .detail-acties > .detail-uitleg { margin-right: 0; },
body.aanmeldscherm .detail-acties > .detail-uitleg { margin-right: 0; }
}

/* ── Varianten die iets betekenen ───────────────────────────────────────────
   Niet elk afwijkend veld was slordigheid. Deze drie zeggen iets, dus blijven
   ze - maar hier, bij de rest, en niet verstopt in een module. */

/* Een veld met een grijze vulling komt uit de oude Windows-toepassing en wordt
   daar beheerd; het staat er om te lezen. */
body.beheer-dashboard .detail-legacy-veld input,
body.beheer-dashboard .detail-legacy-veld select { background-color: #f6f8fa; }

/* Het zoekvak in een filterbalk is één geheel met zijn icoon: het veld erin
   heeft geen eigen rand nodig. */
body.beheer-dashboard .zoekveld input {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    padding: 0;
}
body.beheer-dashboard .zoekveld input:focus { box-shadow: none; }

/* Een hervatlink is een sleutel om te kopiëren, geen tekst om te lezen. */
body.beheer-dashboard .hervatlink-melding input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
}

/* ============================================================================
   DEEL 2 — de dingen om de bedieningselementen heen: statuschips, koppen,
   kaarten, meldingen, leegtoestanden en tabellen.

   Zelfde verhaal als hierboven, één niveau hoger. Gemeten over 22 schermen
   vóór deze laag:

     - 19 verschillende statuschips. En erger dan verschillend: HETZELFDE WOORD
       in twee kleuren. "Volzet" was grijs op het hotelscherm en amber op het
       contingentscherm; "Ruimte" was groen, "Plaats over" - dezelfde betekenis -
       blauw. Wie hier dagelijks werkt, leert "amber = kijk hier", en dan is
       grijs voor hetzelfde woord een leugen;
     - 23 verschillende koppen. Een <h2> kon 16,8px Montserrat-light zijn, of
       21px Georgia, of 30px Montserrat - op hetzelfde niveau in dezelfde soort
       kaart. De maten waren bovendien gebroken (19,8 / 21,75 / 22,2 / 22,5 /
       23,25px) doordat ze in rem met losse waarden stonden;
     - 18 verschillende binnenmarges voor een kaart, zes hoekafrondingen (7, 8,
       9, 10, 12, 14px) en zeven schaduwen;
     - vijf klassenamen voor "een melding" en zeven voor "hier staat niets";
     - drie rijhoogtes voor een lijstregel: 127px op de inschrijvingen, 73 op de
       hotels, 63 op de kamerverdeling.

   Alles hieronder mapt de bestaande klassenamen op één definitie, zodat de HTML
   van 22 schermen niet aangeraakt hoeft te worden voor iets dat een kleur is.
   ========================================================================== */

:root {
    /* Vijf tonen, en niet meer. Elke status in het beheer is er één van. */
    --toon-goed-vlak: #e5f4ec;      --toon-goed-tekst: #1f6a4d;
    --toon-letop-vlak: #fdf4e3;     --toon-letop-tekst: #7a4f07;
    --toon-fout-vlak: #fdeae6;      --toon-fout-tekst: #97402c;
    --toon-neutraal-vlak: #eef2f7;  --toon-neutraal-tekst: #46586b;
    --toon-info-vlak: #e8f1fb;      --toon-info-tekst: #1c4c83;

    --kaart-radius: 10px;
    --kaart-radius-binnen: 8px;
    --kaart-marge: 22px;
    /* Ruimte tussen twee kaarten die onder elkaar staan. Ze stonden tegen
       elkaar, waardoor twee blokken als één doorlopend vlak lazen en de kop van
       het tweede blok in de voet van het eerste leek te staan (Tim,
       14 september 2026). */
    --kaart-tussenruimte: 8px;
    --kop-serif: Georgia, 'Times New Roman', serif;
    --kop-sans: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --kaart-schaduw: 0 12px 30px rgba(4, 19, 43, .10);
    --kaart-rand: #e6edf5;

    --tabel-cel-y: 11px;
    --tabel-cel-x: 14px;
}

/* ── Statuschips ─────────────────────────────────────────────────────────────
   Eén vorm, vijf betekenissen:
     goed     alles in orde, bevestigd, actief, alles ingedeeld, ruimte
     let op   volzet, nog in te delen, nog niet ingesteld, wacht op iets
     fout     een tekort, een conflict, een bed buiten de kamer
     neutraal niet van toepassing, verborgen, geannuleerd, geen contact
     info     iets om te weten: plaats over, Accueil, broninformatie          */
body.beheer-dashboard .beheer-chip,
body.beheer-dashboard .hotelbeheer-status,
body.beheer-dashboard .hotelbeheer-chip,
body.beheer-dashboard .capaciteit-status,
body.beheer-dashboard .kamerverdeling-status,
body.beheer-dashboard .kamerverdeling-wensstatus,
body.beheer-dashboard .kamerverdeling-blokstatus,
body.beheer-dashboard .reisbeheer-status,
body.beheer-dashboard .reisstatus-badge,
body.beheer-dashboard .dossier-label-amber,
body.beheer-dashboard .vervoer-status {
    background: var(--toon-neutraal-vlak);
    border-radius: 999px;
    color: var(--toon-neutraal-tekst);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: normal;
    padding: 4px 10px;
    text-transform: none;
    white-space: nowrap;
}

/* goed */
body.beheer-dashboard .beheer-chip.is-goed,
body.beheer-dashboard .hotelbeheer-status-actief,
body.beheer-dashboard .capaciteit-status-ruimte,
body.beheer-dashboard .kamerverdeling-status.is-bevestigd,
body.beheer-dashboard .kamerverdeling-wensstatus.is-bevestigd,
body.beheer-dashboard .kamer-statuschip-vol,
body.beheer-dashboard .reisstatus-actief .reisstatus-badge {
    background: var(--toon-goed-vlak);
    color: var(--toon-goed-tekst);
}
/* let op */
body.beheer-dashboard .beheer-chip.is-letop,
body.beheer-dashboard .hotelbeheer-status-volzet,
body.beheer-dashboard .hotelbeheer-chip.is-let-op,
body.beheer-dashboard .capaciteit-status-volzet,
body.beheer-dashboard .capaciteit-status-ontbreekt,
body.beheer-dashboard .kamerverdeling-status.is-open,
body.beheer-dashboard .kamerverdeling-wensstatus.is-open,
body.beheer-dashboard .kamer-statuschip-actie,
body.beheer-dashboard .dossier-label-amber,
body.beheer-dashboard .reisstatus-concept .reisstatus-badge {
    background: var(--toon-letop-vlak);
    color: var(--toon-letop-tekst);
}
/* fout */
body.beheer-dashboard .beheer-chip.is-fout,
body.beheer-dashboard .hotelbeheer-status-tekort,
body.beheer-dashboard .capaciteit-status-conflict,
body.beheer-dashboard .kamer-statuschip-conflict {
    background: var(--toon-fout-vlak);
    color: var(--toon-fout-tekst);
}
/* neutraal */
body.beheer-dashboard .beheer-chip.is-neutraal,
body.beheer-dashboard .capaciteit-status-geblokkeerd,
body.beheer-dashboard .kamerverdeling-status.is-geannuleerd,
body.beheer-dashboard .kamerverdeling-wensstatus.is-neutraal,
body.beheer-dashboard .reisstatus-afgesloten .reisstatus-badge {
    background: var(--toon-neutraal-vlak);
    color: var(--toon-neutraal-tekst);
}
/* info */
body.beheer-dashboard .beheer-chip.is-info,
body.beheer-dashboard .hotelbeheer-chip.is-accueil,
body.beheer-dashboard .kamer-statuschip-ruimte {
    background: var(--toon-info-vlak);
    color: var(--toon-info-tekst);
}

/* ── Koppen ──────────────────────────────────────────────────────────────────
   Drie niveaus, en een vierde voor de regel van een uitklapbaar blok. Meer
   niveaus heeft dit beheer niet nodig, en 23 varianten maken van een kop een
   decoratie in plaats van een hiërarchie. */
body.beheer-dashboard main h1,
body.beheer-dashboard main .dashboard-kop h1,
body.beheer-dashboard main .dashboard-geen-reis h1 {
    font-family: var(--kop-serif);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.06;
}
body.beheer-dashboard main h2 {
    font-family: var(--kop-serif);
    font-size: 1.28rem;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.3;
}
body.beheer-dashboard main h3 {
    font-family: var(--kop-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.35;
}
/* De naam op de dichte regel van een uitklapbaar blok: dat is een regel in een
   lijst, geen kaarttitel, en die mag daarom compacter. */
body.beheer-dashboard .capaciteit-blokregel h2,
body.beheer-dashboard .kamerverdeling-blokregel h3 {
    font-family: var(--kop-serif);
    font-size: 1.1rem;
    font-weight: 400;
}

/* ── Kaarten ─────────────────────────────────────────────────────────────────
   Eén afronding, één schaduw, één binnenmarge. Een kaart ín een kaart (een
   kamer, een verblijfsblok) is platter: rand in plaats van schaduw, en een
   kleinere afronding, zodat de nesting te zien blijft. */
body.beheer-dashboard main .detail-kaart,
body.beheer-dashboard main .dashboard-paneel,
body.beheer-dashboard main .hotelbeheer-fiche,
body.beheer-dashboard main .hotelbeheer-lijstkaart,
body.beheer-dashboard main .reisbeheer-sectie,
body.beheer-dashboard main .reisbeheer-detail,
body.beheer-dashboard main .testprofiel-kaart,
body.beheer-dashboard main .beheer-kaart {
    border-radius: var(--kaart-radius);
    box-shadow: var(--kaart-schaduw);
}
body.beheer-dashboard main .kamerverdeling-kamerkaart,
body.beheer-dashboard main .beheer-handleiding-kaart,
body.beheer-dashboard main .beheer-kaart-binnen {
    border-radius: var(--kaart-radius-binnen);
    box-shadow: none;
}

/* Binnenmarge alleen daar waar er al één was: een kaart met marge 0 houdt een
   tabel van rand tot rand, en dat is met opzet. */
body.beheer-dashboard main .detail-kaart,
body.beheer-dashboard main .dashboard-paneel,
body.beheer-dashboard main .hotelbeheer-fiche,
body.beheer-dashboard main .reisbeheer-sectie,
body.beheer-dashboard main .reisbeheer-detail,
body.beheer-dashboard main .testprofiel-kaart,
body.beheer-dashboard main .beheer-kaart { padding: var(--kaart-marge); }

/* Twee kaarten onder elkaar raken elkaar niet. Alleen op kaarten die echt
   stapelen: kaarten in een raster krijgen hun ruimte van de `gap` van dat
   raster, en een marge zou daar bovenop komen. */
body.beheer-dashboard main .detail-kaart + .detail-kaart,
body.beheer-dashboard main .beheer-kaart + .beheer-kaart,
body.beheer-dashboard main .reisbeheer-sectie + .reisbeheer-sectie,
body.beheer-dashboard main .reisbeheer-sectie + .reisbeheer-detail,
body.beheer-dashboard main .reisbeheer-detail + .reisbeheer-sectie { margin-top: var(--kaart-tussenruimte); }

/* ── Infoblokken ─────────────────────────────────────────────────────────────
   Een noot onder een tabel of in een formulier: "«Beschikbaar» is wat je met
   het hotel hebt afgesproken…". Ze stond als kale alinea op wit, afgekapt op
   leesbreedte, met daarnaast een gat zo breed als een halve tabel. Dat leest
   als "hier ontbreekt iets" in plaats van als een terzijde (Tim, 14 september
   2026).

   Nu is het een blok met een eigen vlak over de volle breedte. Het gat
   verdwijnt omdat het vlak er staat, en de tekst blijft leesbaar doordat hij
   klein en ruim gezet is. De rand links zegt in één oogopslag: dit is uitleg,
   geen inhoud. */
body.beheer-dashboard main .module-noot,
body.beheer-dashboard main .hotelbeheer-tabelnoot,
body.beheer-dashboard main .kamerverdeling-bloknoot {
    background: var(--toon-neutraal-vlak);
    border-left: 3px solid #c3d9f1;
    border-radius: 0 var(--kaart-radius-binnen) var(--kaart-radius-binnen) 0;
    color: var(--toon-neutraal-tekst);
    font-size: .8rem;
    line-height: 1.6;
    margin: 14px 0 0;
    max-width: none;
    padding: 11px 15px;
}
body.beheer-dashboard main .module-noot:first-child,
body.beheer-dashboard main .hotelbeheer-tabelnoot:first-child,
body.beheer-dashboard main .kamerverdeling-bloknoot:first-child { margin-top: 0; }
body.beheer-dashboard main .module-noot + .module-noot { margin-top: 8px; }
body.beheer-dashboard main .module-noot a { font-weight: 700; text-decoration: underline; }
body.beheer-dashboard main .module-noot strong,
body.beheer-dashboard main .hotelbeheer-tabelnoot strong { color: var(--lourdes-ink); }

/* Twee kaarten gaan met opzet van rand tot rand: een kaart die niets anders
   dan een tabel draagt (de tabel heeft zijn eigen celmarge, een marge eromheen
   geeft een tweede rand) en een uitklapbaar blok (de dichte regel is de kaart,
   en die regel heeft zijn eigen marge). */
body.beheer-dashboard main details.detail-kaart,
body.beheer-dashboard main .hotelbeheer-lijstkaart { padding: 0; }

body.beheer-dashboard main .hotelbeheer-contingentkaart,
body.beheer-dashboard main .hotelbeheer-kamerkaart { padding: var(--kaart-marge) var(--kaart-marge) 8px; }

/* ── Meldingen ───────────────────────────────────────────────────────────────
   Vijf klassenamen voor hetzelfde: demo-melding, dashboard-melding,
   kamerverdeling-melding, module-melding, reisbeheer-bronmelding. Ze mogen
   blijven bestaan - de HTML van 22 schermen aanpassen voor een kleur is geen
   winst - maar ze zien er nu hetzelfde uit, met dezelfde vijf tonen. */
body.beheer-dashboard main .module-melding,
body.beheer-dashboard main .demo-melding,
body.beheer-dashboard main .dashboard-melding,
body.beheer-dashboard main .kamerverdeling-melding,
body.beheer-dashboard main .reisbeheer-bronmelding,
body.beheer-dashboard main .beheer-melding {
    align-items: flex-start;
    background: var(--toon-info-vlak);
    border: 1px solid #d5e6f7;
    border-radius: var(--kaart-radius-binnen);
    color: #2c5580;
    display: flex;
    font-size: .84rem;
    gap: 10px;
    line-height: 1.5;
    margin-bottom: 15px;
    padding: 12px 14px;
}
body.beheer-dashboard main .module-melding > i,
body.beheer-dashboard main .demo-melding > i,
body.beheer-dashboard main .dashboard-melding > i,
body.beheer-dashboard main .kamerverdeling-melding > i,
body.beheer-dashboard main .beheer-melding > i { flex: 0 0 auto; margin-top: 2px; }
/* De titelregel van een melding. Alleen de eigen regel: een <strong> midden in
   een zin ("ga naar <strong>Kamers</strong>") is nadruk, geen titel, en die
   werd door een afstammelingsselector op een eigen regel gezet. */
body.beheer-dashboard main .module-melding > strong,
body.beheer-dashboard main .module-melding > div > strong,
body.beheer-dashboard main .demo-melding > strong,
body.beheer-dashboard main .demo-melding > div > strong,
body.beheer-dashboard main .dashboard-melding > strong,
body.beheer-dashboard main .dashboard-melding > div > strong,
body.beheer-dashboard main .kamerverdeling-melding > strong,
body.beheer-dashboard main .kamerverdeling-melding > div > strong,
body.beheer-dashboard main .beheer-melding > strong,
body.beheer-dashboard main .beheer-melding > div > strong { display: block; font-size: .86rem; }

body.beheer-dashboard main .module-melding.is-succes,
body.beheer-dashboard main .kamerverdeling-melding.is-succes,
body.beheer-dashboard main .demo-melding-status,
body.beheer-dashboard main .beheer-melding.is-goed {
    background: var(--toon-goed-vlak); border-color: #b9e0cd; color: var(--toon-goed-tekst);
}
body.beheer-dashboard main .module-melding.is-waarschuwing,
body.beheer-dashboard main .kamerverdeling-melding.is-waarschuwing,
body.beheer-dashboard main .dashboard-melding-waarschuwing,
body.beheer-dashboard main .beheer-melding.is-letop {
    background: var(--toon-letop-vlak); border-color: #f0dcb4; color: var(--toon-letop-tekst);
}
body.beheer-dashboard main .module-melding.is-fout,
body.beheer-dashboard main .kamerverdeling-melding.is-fout,
body.beheer-dashboard main .demo-melding-fout,
body.beheer-dashboard main .dashboard-melding-fout,
body.beheer-dashboard main .beheer-melding.is-fout {
    background: var(--toon-fout-vlak); border-color: #f3c7bb; color: var(--toon-fout-tekst);
}

/* ── Hier staat niets ────────────────────────────────────────────────────────
   Zeven klassenamen voor een lege lijst. Eén vorm: rustig vlak, geen rode
   kleur, en altijd een regel die zegt wat je nu kan doen. */
body.beheer-dashboard main .detail-leeg,
body.beheer-dashboard main .hotelbeheer-leeg,
body.beheer-dashboard main .hotelbeheer-detail-leeg,
body.beheer-dashboard main .kamerverdeling-leeg,
body.beheer-dashboard main .vervoer-leeg,
body.beheer-dashboard main .exports-leeg,
body.beheer-dashboard main .exports-log-leeg,
body.beheer-dashboard main .dossier-log-leeg,
body.beheer-dashboard main .beheer-leeg {
    background: #f7f9fc;
    border: 1px solid var(--kaart-rand);
    border-radius: var(--kaart-radius-binnen);
    color: #52657a;
    display: grid;
    font-size: .84rem;
    gap: 6px;
    line-height: 1.5;
    padding: 18px;
}
body.beheer-dashboard main .detail-leeg > strong,
body.beheer-dashboard main .hotelbeheer-leeg > strong,
body.beheer-dashboard main .kamerverdeling-leeg > strong,
body.beheer-dashboard main .beheer-leeg > strong { color: var(--lourdes-ink); font-size: .94rem; }

/* ── Tabellen ────────────────────────────────────────────────────────────────
   Eén celmarge, en cijfers die onder elkaar staan. Dat laatste is één regel
   CSS en het verschil tussen een kolom getallen die je kan vergelijken en een
   kolom die danst: zonder `tabular-nums` is een 1 smaller dan een 8. */
body.beheer-dashboard main table { font-variant-numeric: tabular-nums; }
body.beheer-dashboard main table th,
body.beheer-dashboard main table td { padding: var(--tabel-cel-y) var(--tabel-cel-x); }
body.beheer-dashboard main table td small,
body.beheer-dashboard main table th small { font-size: .76rem; line-height: 1.35; }
body.beheer-dashboard main table tbody tr:hover { background: #f7fafd; }