/* ---------------------------------------------------------------
   PIX - gedeelde stijl voor alle beheerschermen

   Alle kleuren staan hieronder in :root. Wil je het geheel lichter
   of donkerder, pas dan die waarden aan; verderop in dit bestand
   staan geen losse kleuren meer.
   --------------------------------------------------------------- */

:root {
    color-scheme: light;

    --achtergrond:  #b7c4d4;   /* de pagina zelf */
    --vlak:         #dbe3ed;   /* kaders, tabellen */
    --vlak-licht:   #cad4e0;   /* rij waar de muis op staat */
    --vlak-kop:     #bfcbda;   /* koprij van een tabel */
    --rand:         #93a4b8;
    --tekst:        #0f151d;
    --tekst-zwak:   #43505f;
    --accent:       #1f6feb;
    --accent-donker:#1a5fd0;
    --ok:           #15743a;
    --waarschuwing: #8a5d00;
    --fout:         #b42a22;

    /* Marge links en rechts van de pagina-inhoud. */
    --paginamarge:  56px;

    /* Hoogte van invoervelden en van knoppen. Een knop is bewust twee
       pixels lager: een gevuld vlak oogt groter dan een leeg kader van
       dezelfde maat, dus even hoog maken laat de knop uitsteken. */
    --veldhoogte:   32px;
    --knophoogte:   30px;

    /* Hoe groot het beeld tijdens een jurering op het scherm van de
       commissaris en van een jurylid staat. Bewust klein: die twee moeten
       vooral de knoppen en de stand zien; het beeld zelf hangt groot op de
       beamer. Op een telefoon mag het wel de volle breedte hebben. */
    --jureerbeeld:  340px;

    /* Hoogte van de blauwe balk bovenaan. De werkbalk blijft daar net
       onder plakken bij het scrollen, dus deze maat moet kloppen. */
    --balkhoogte:   45px;

    /* Balk + werkbalk samen: daaronder blijven de kolomkoppen plakken.
       Deze waarde wordt door het scriptje in lib/layout.php bijgesteld
       naar de echte hoogte, want de werkbalk kan op een smal scherm naar
       een tweede regel springen. */
    --kophoogte:    100px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    background: var(--achtergrond);
    color: var(--tekst);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- kop en navigatie --- */

/* De balk blijft bovenaan staan, ook als je door een lange lijst scrolt. */
header.balk {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--balkhoogte);
    padding: 0 var(--paginamarge);
    background: var(--vlak);
    border-bottom: 1px solid var(--rand);
}

header.balk .merk {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 4px;
    color: var(--accent);
}

header.balk nav { display: flex; gap: 4px; align-self: stretch; }

header.balk nav a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--tekst-zwak);
    border-bottom: 2px solid transparent;
}

header.balk nav a:hover { color: var(--tekst); text-decoration: none; }

header.balk nav a.actief {
    color: var(--tekst);
    border-bottom-color: var(--accent);
}

/* Rechts in de balk: wie er aangemeld is, met welke rol, en de afmeldknop. */
header.balk .aangemeld {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

header.balk .aangemeld .rol {
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--vlak-kop);
    border: 1px solid var(--rand);
    color: var(--tekst-zwak);
    font-size: 11px;
}

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--paginamarge) 24px;
}

/* ------------------------------------------------------------------
   Aanmeldscherm: één smal kader in het midden.
------------------------------------------------------------------ */
.aanmeldscherm {
    max-width: 420px;
    margin: 60px auto;
    text-align: center;
}

.aanmeldscherm .merknaam {
    font-size: 54px;
    font-weight: bold;
    letter-spacing: 12px;
    color: var(--accent);
    line-height: 1;
}

.aanmeldscherm > p { margin: 6px 0 26px; }
.aanmeldscherm .kader { text-align: left; }
.aanmeldscherm h2 { margin-top: 0; }
.aanmeldscherm .knoppenrij { margin-top: 16px; }

/* Label boven, veld eronder, over de volle breedte. */
.veldrij { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.veldrij input, .veldrij select { width: 100%; }

/* ------------------------------------------------------------------
   Werkbalk boven een lijst: titel, telling, zoeken, filters en knoppen
   op één regel. Ze blijft onder de blauwe balk plakken bij het scrollen.
   Leden en clubs gebruiken exact dezelfde opbouw.
------------------------------------------------------------------ */
.werkbalk {
    position: sticky;
    top: var(--balkhoogte);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* van rand tot rand, dwars door de paginamarge heen */
    margin: 0 calc(-1 * var(--paginamarge)) 16px;
    padding: 10px var(--paginamarge);
    background: var(--vlak);
    border-bottom: 1px solid var(--rand);
}

.werkbalk h1 { font-size: 18px; margin: 0; }
.werkbalk form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/*
   Een keuzelijst wordt anders zo breed als haar langste clubnaam, en dan
   past de werkbalk niet meer op één regel. Beide lijsten even breed, dat
   oogt rustiger dan een brede naast een smalle.

   Zoekveld en keuzelijsten mogen meekrimpen als er een knop bij komt; de
   knoppen zelf houden hun maat, want een halve knoptekst leest niet.
*/
.werkbalk form { flex: 0 1 auto; min-width: 0; }
.werkbalk select { flex: 0 1 150px; width: 150px; min-width: 105px; }
.werkbalk input[type=search] { flex: 0 1 240px; width: 240px; min-width: 140px; }
.werkbalk button, .werkbalk .knop, .werkbalk summary { flex: 0 0 auto; }
.werkbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Het aantal gevonden regels, als klein plaatje naast de titel. */
.telling {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--vlak-kop);
    border: 1px solid var(--rand);
    color: var(--tekst-zwak);
    font-size: 12px;
    white-space: nowrap;
}

/* Uitklapbaar paneeltje achter de knop "Opties". Werkt zonder javascript. */
details.opties { position: relative; }
details.opties > summary { list-style: none; }
details.opties > summary::-webkit-details-marker { display: none; }

.optiespaneel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 300px;
    padding: 12px 14px;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
    font-size: 13px;
}

.optiespaneel p { margin: 0 0 8px 0; }
.optiespaneel p:last-child { margin-bottom: 0; }

/* Kruimelpad boven de maplijst van het bladerscherm. */
.kruimelpad {
    margin: 0 0 12px 0;
    padding: 7px 12px;
    background: var(--vlak-kop);
    border: 1px solid var(--rand);
    border-radius: 4px;
    font-size: 13px;
}

.kruimelpad span { margin: 0 4px; }

/* Knoppen onderaan een bewerkscherm: op één regel, rechts uitgelijnd. */
.knoppenrij {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* Op een smal scherm zou die brede marge te veel plaats innemen. */
@media (max-width: 700px) {
    :root { --paginamarge: 16px; }
}

h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px 0; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px 0; }
p.uitleg { color: var(--tekst-zwak); margin: 0 0 20px 0; }

/* --- kaders --- */

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

.kader h2 { margin-top: 0; }

.rij { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.rij > div { display: flex; flex-direction: column; gap: 4px; }

/*
   Een knop is twee pixels lager dan een invoerveld. Met align-items: flex-end
   staan hun onderkanten gelijk, en dan oogt de knop te laag naast het veld
   ernaast. Deze ene pixel zet hem netjes in het midden.
*/
.rij > div > button, .rij > div > .knop { margin-bottom: 1px; }

/* --- formulieren --- */

label { color: var(--tekst-zwak); font-size: 12px; }

input[type=text], input[type=email], input[type=number], input[type=search],
input[type=password], input[type=file], select, textarea {
    padding: 8px 10px;
    background: #fff;
    color: var(--tekst);
    border: 1px solid var(--rand);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

/*
   Vaste hoogte voor de velden van één regel. Een textarea hoort er niet bij,
   die mag meegroeien, en een bestandsveld ook niet: daar zit een knop in die
   zijn eigen hoogte nodig heeft.

   Belangrijk: geen marge boven en onder. Die zou samen 16 van de 32 pixels
   opeten, waardoor de staart van letters als p en g afgesneden wordt. Een
   veld van één regel zet zijn tekst vanzelf in het midden.
*/
input[type=text], input[type=email], input[type=number], input[type=search],
input[type=password], select {
    height: var(--veldhoogte);
    min-height: var(--veldhoogte);
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

fieldset { border: 1px solid var(--rand); border-radius: 4px; padding: 10px 14px; }
legend { color: var(--tekst-zwak); font-size: 12px; padding: 0 6px; }

/*
   Knoppen krijgen dezelfde hoogte als de invoervelden, zodat "Filteren" en
   "Nieuw lid" netjes op één lijn staan met de zoekvakjes ernaast.
*/
button, .knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--knophoogte);
    min-height: var(--knophoogte);
    padding: 0 16px;
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    line-height: normal;
    cursor: pointer;
}

button:hover, .knop:hover { background: var(--accent-donker); text-decoration: none; }

button.grijs, .knop.grijs { background: var(--vlak-licht); color: var(--tekst); border: 1px solid var(--rand); }
button.grijs:hover, .knop.grijs:hover { background: #d5dde7; }
button.rood, .knop.rood { background: var(--fout); }
button.rood:hover, .knop.rood:hover { background: #a52820; }

/* --- vensters ---

   Een venster is een <dialog>: de browser regelt zelf het grijs eroverheen,
   Escape om te sluiten en het vasthouden van de aandacht. Openen en sluiten
   gebeurt met data-venster en data-sluiten; dat staat onderaan layout.php.
*/

dialog.venster {
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--vlak);
    color: var(--tekst);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    box-shadow: 0 14px 44px rgba(15, 21, 29, .35);
}

/* Alleen als het venster openstaat, anders zou display de browser voorbijgaan
   die het dicht op display:none zet. */
dialog.venster[open] { display: flex; flex-direction: column; }
dialog.venster form  { display: flex; flex-direction: column; min-height: 0; }

dialog.venster::backdrop { background: rgba(15, 21, 29, .45); }

.venster-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--rand);
}

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

.venster-sluit {
    margin-left: auto;
    height: 26px;
    min-height: 26px;
    padding: 0 6px;
    background: none;
    border: none;
    color: var(--tekst-zwak);
    font-size: 20px;
}

.venster-sluit:hover { background: none; color: var(--tekst); }

/* Het middenstuk schuift als het niet past; kop en voet blijven staan. */
.venster-lijf { padding: 16px 20px; overflow-y: auto; }

.venster-lijf label { display: block; margin-bottom: 4px; }
.venster-lijf input[type=text], .venster-lijf textarea { width: 100%; }

/* Een vinkje hoort naast zijn tekst, niet erboven. */
.venster-lijf label.keuze {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--tekst);
}

.vensterkeuzes { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.venster-voet {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--rand);
}

/* --- tabellen --- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 6px;
    /* geen overflow:hidden: dat zou de plakkende koprij hieronder breken */
}

/*
   Krappe regels: even veel ruimte boven als onder. vertical-align middle
   en de inline-flex hieronder zorgen dat een knop in een cel niet op een
   tekstregel gaat staan, want dan ontstaat er extra lucht onderaan.
*/
th, td {
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid var(--rand);
    vertical-align: middle;
    line-height: 1.35;
}

td form { display: inline-flex; vertical-align: middle; margin: 0; }

/*
   De kolomkoppen blijven staan, net onder de werkbalk. --kophoogte wordt
   door javascript op de echte hoogte van balk + werkbalk gezet.

   De onderrand komt van een inset-schaduw en niet van border-bottom: bij
   border-collapse hoort die rand aan de tabel en blijft ze achter zodra de
   koprij begint te plakken.
*/
th {
    position: sticky;
    top: var(--kophoogte);
    z-index: 10;
    background: var(--vlak-kop);
    color: var(--tekst-zwak);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--rand), inset 0 1px 0 var(--rand);
}

th a { color: var(--tekst-zwak); }
tbody tr:hover { background: var(--vlak-licht); }
tbody tr:last-child td { border-bottom: none; }
td.getal, th.getal { text-align: right; }
td.smal { white-space: nowrap; }

/* De naamkolom krijgt ruim de breedte; de rest schikt zich ernaar. */
th.naam, td.naam { width: 30%; min-width: 240px; }
td.naam a { font-weight: 600; }

/* --- meldingen en labels --- */

.melding {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    border-left: 3px solid var(--accent);
    background: var(--vlak);
    border-top: 1px solid var(--rand);
    border-right: 1px solid var(--rand);
    border-bottom: 1px solid var(--rand);
}

.melding.ok          { border-left-color: var(--ok); }
.melding.waarschuwing{ border-left-color: var(--waarschuwing); }
.melding.fout        { border-left-color: var(--fout); }

.label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--vlak-licht);
    color: var(--tekst-zwak);
    white-space: nowrap;
}

/* Statuslabels in een kolom: allemaal even breed en gecentreerd, zodat ze
   onder elkaar een rechte kolom vormen. */
.label.status {
    min-width: 116px;
    text-align: center;
}

.label.actief    { background: rgba(23,128,61,0.12);  color: var(--ok); }
.label.passief   { background: rgba(154,103,0,0.14);  color: var(--waarschuwing); }
.label.nonactief { background: rgba(192,47,38,0.12);  color: var(--fout); }
.label.ok        { background: rgba(23,128,61,0.12);  color: var(--ok); }
.label.fout      { background: rgba(192,47,38,0.12);  color: var(--fout); }
.label.waarschuwing { background: rgba(154,103,0,0.14); color: var(--waarschuwing); }

/*
   Statusknop in de ledenlijst: ziet eruit als een label, maar je kunt
   erop klikken. Eén klik zet actief om naar passief en omgekeerd.
*/
.statusknop {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 3px 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.35;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
}

.statusknop.actief {
    background: rgba(23,128,61,0.12);
    color: var(--ok);
    border-color: rgba(23,128,61,0.30);
}

.statusknop.passief {
    background: rgba(154,103,0,0.14);
    color: var(--waarschuwing);
    border-color: rgba(154,103,0,0.32);
}

.statusknop.actief:hover  { background: rgba(23,128,61,0.22); }
.statusknop.passief:hover { background: rgba(154,103,0,0.26); }

/*
   Icoontjes achteraan een tabelrij: potlood om te bewerken, vuilnisbak om
   te verwijderen. Het zijn gewone knoppen zonder achtergrond; de kleur komt
   pas als de muis erop staat.
*/
/*
   In een actiekolom staan een knop van 30 pixels en een icoontje van 26 naast
   elkaar. Zonder hulp gaan die op hun tekstlijn staan en zit het icoontje
   zichtbaar te laag; hiermee staan hun middens gelijk.
*/
td.acties { white-space: nowrap; text-align: right; }
td.acties form { display: inline-flex; align-items: center; }
td.acties > *,
td.acties > form > * { vertical-align: middle; }

a.icoon, button.icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    margin-left: 4px;
    background: #fff;
    color: var(--tekst);
    border: 1px solid var(--rand);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
}

a.icoon svg, button.icoon svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke-width: 1.7;
}

a.icoon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    text-decoration: none;
}

button.icoon.wis { color: var(--fout); }

button.icoon.wis:hover {
    background: var(--fout);
    border-color: var(--fout);
    color: #fff;
}

.zwak  { color: var(--tekst-zwak); }
.klein { font-size: 12px; }

ul.meldinglijst { margin: 6px 0 0 0; padding-left: 18px; color: var(--tekst-zwak); font-size: 12px; }
ul.meldinglijst li { margin-bottom: 3px; }

/* ------------------------------------------------------------------
   Verslag van een import: per regel een soort, het lid en wat er scheelt.
------------------------------------------------------------------ */
ul.verslaglijst {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

ul.verslaglijst li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--rand);
}

ul.verslaglijst li:first-child { border-top: none; }
ul.verslaglijst .label { flex: 0 0 auto; }

/* De uitklapbare verslagregel onder een import in de geschiedenis. */
tr.verslagrij td { background: var(--vlak-kop); padding: 0 10px 10px; }
tr.verslagrij summary { cursor: pointer; padding: 8px 0; color: var(--accent); font-size: 13px; }

/* Het bestandsveld zelf is onzichtbaar; het label ernaast is de knop.
   Niet display:none, want dan is het niet meer met het toetsenbord te
   bedienen. */
.bestandsveld {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bestandsveld:focus + .knop { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- startscherm --- */

.tegels { display: flex; flex-wrap: wrap; gap: 16px; }

.tegel {
    flex: 1 1 240px;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 20px;
    color: var(--tekst);
}

.tegel:hover { border-color: var(--accent); text-decoration: none; }

/* Het pijltje maakt duidelijk dat deze tegel een nieuw tabblad opent. */
.tegel.hulptegel .titel::after { content: " \2197"; font-weight: normal; }
.tegel .titel { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--accent); }
.tegel .omschrijving { color: var(--tekst-zwak); font-size: 13px; }

/* ------------------------------------------------------------------
   Rooster met de beelden van een sectie.
------------------------------------------------------------------ */
.beeldrooster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.beeldrooster .beeld {
    margin: 0;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 6px;
    overflow: hidden;
}

.beeldrooster .beeld img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--vlak-kop);
}

.beeldrooster figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    font-size: 12px;
}

/* Nummer links, het potlood om te bewerken rechts op dezelfde regel. */
.beeldrooster .nummer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.beeldrooster .nummer .icoon { width: 22px; height: 22px; min-height: 22px; margin: 0; }
.beeldrooster .nummer .icoon svg { width: 13px; height: 13px; }
.beeldrooster .titel { color: var(--tekst-zwak); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------
   Helppagina: inhoudstafel links, het document rechts.
------------------------------------------------------------------ */
.hulp { display: flex; align-items: flex-start; gap: 32px; }

.hulp .inhoudstafel {
    position: sticky;
    top: calc(var(--kophoogte) + 16px);
    flex: 0 0 250px;
    max-height: calc(100vh - var(--kophoogte) - 40px);
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 6px;
    font-size: 13px;
}

.hulp .inhoudstafel .titel {
    font-weight: 600;
    color: var(--tekst-zwak);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.hulp .inhoudstafel a { display: block; padding: 3px 0; color: var(--tekst); }
.hulp .inhoudstafel a:hover { color: var(--accent); text-decoration: none; }
.hulp .inhoudstafel a.niveau3 { padding-left: 12px; color: var(--tekst-zwak); font-size: 12px; }

/* Het document zelf leest als een tekst, niet als een beheerscherm. */
.hulp .document {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 820px;
    padding: 26px 32px;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 6px;
    line-height: 1.6;
}

.hulp .document > :first-child { margin-top: 0; }
.hulp .document h2 { font-size: 20px; margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rand); }
.hulp .document h3 { font-size: 16px; margin: 26px 0 8px; }
.hulp .document h4 { font-size: 14px; margin: 20px 0 6px; color: var(--tekst-zwak); }
.hulp .document p { margin: 0 0 14px; }
.hulp .document ul, .hulp .document ol { margin: 0 0 14px; padding-left: 22px; }
.hulp .document li { margin-bottom: 5px; }
.hulp .document li > ul, .hulp .document li > ol { margin: 5px 0 0; }
.hulp .document hr { border: none; border-top: 1px solid var(--rand); margin: 28px 0; }

.hulp .document blockquote {
    margin: 0 0 14px;
    padding: 10px 16px;
    border-left: 3px solid var(--waarschuwing);
    background: var(--vlak-kop);
    border-radius: 0 4px 4px 0;
}

.hulp .document blockquote p:last-child { margin-bottom: 0; }

.hulp .document code {
    background: var(--vlak-kop);
    border: 1px solid var(--rand);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 13px;
}

.hulp .document pre {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--vlak-kop);
    border: 1px solid var(--rand);
    border-radius: 4px;
    overflow-x: auto;
}

.hulp .document pre code { background: none; border: none; padding: 0; }

/* Een brede tabel mag in zichzelf schuiven, niet de hele pagina. */
.hulp .document .tabelomhulsel { overflow-x: auto; margin: 0 0 16px; }
.hulp .document table { font-size: 13px; }
.hulp .document th { position: static; text-transform: none; font-size: 12px; }
.hulp .document td { vertical-align: top; }

@media (max-width: 900px) {
    .hulp { display: block; }
    .hulp .inhoudstafel { position: static; max-height: none; margin-bottom: 16px; }
    .hulp .document { max-width: none; padding: 18px 20px; }
}

footer.voet {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 24px 30px;
    color: var(--tekst-zwak);
    font-size: 12px;
}

/* ------------------------------------------------------------------
   Jurering: het beeld links, en daarnaast twee kolommen — de jury, en de
   knoppen. Alles naast elkaar, zodat de commissaris zijn hele scherm in één
   oogopslag heeft en tijdens een jurering nooit hoeft te scrollen.
------------------------------------------------------------------ */
.jurering { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }

.jurering > .jurering-beeld { flex: 0 0 var(--jureerbeeld); }
.jurering-kolom { flex: 1 1 330px; min-width: 300px; max-width: 460px; }
.jurering-kolom > .kader { margin-bottom: 12px; }

/* Wat krapper dan elders: op dit scherm telt elke pixel, want alles moet
   samen op één beeld passen. */
.jurering-kolom > .kader,
.jurering-kolom > details.kader { padding: 14px 16px; }

.jurering-beeld { position: relative; min-width: 0; }

.jurering-beeld img {
    display: block;
    width: 100%;
    max-width: var(--jureerbeeld);
    max-height: var(--jureerbeeld);
    object-fit: contain;
    background: #111;
    border: 1px solid var(--rand);
    border-radius: 6px;
}

/*
   Op een telefoon — waar een jurylid op zit — mag het beeld wel de volle
   breedte hebben; daar is niets anders op het scherm dat plaats vraagt.
*/
@media (max-width: 700px) {
    .jureerscherm .jurering-beeld { max-width: 100%; }
    .jureerscherm .jurering-beeld img { max-width: 100%; max-height: 60vh; }
}

.beeldnummer {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/*
   Een kader dat je open- en dichtklapt. De rand en de achtergrond zijn die
   van een gewoon kader; alleen de titel is aanklikbaar.
*/
details.vouw > summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    list-style: none;
}

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

details.vouw > summary::before {
    content: '▸';
    display: inline-block;
    width: 16px;
    color: var(--tekst-zwak);
}

details.vouw[open] > summary::before { content: '▾'; }
details.vouw[open] > summary { margin-bottom: 8px; }

/* De vijf juryleden onder het aanmeldadres: één regel per persoon. */
.jurylijst { list-style: none; margin: 12px 0 0; padding: 0; }

.jurylijst li {
    padding: 3px 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.jurytabel { border: none; background: none; }
table.jurytabel td { border-bottom: 1px solid var(--rand); padding: 6px 0; }
table.jurytabel tr:last-child td { border-bottom: none; }
table.jurytabel td.score {
    text-align: right;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    width: 80px;
}

/* Op het besturingsscherm: een cijfer dat de commissaris al ziet maar de
   zaal nog niet, staat grijs. Zodra hij op Toon punten drukt, wordt het
   zwart — hetzelfde cijfer, maar nu weet iedereen het. */
table.jurytabel td.score.nognietgetoond { color: var(--tekst-zwak); font-weight: 500; }

.totaalvak { text-align: center; padding-top: 12px; border-top: 1px solid var(--rand); margin-top: 8px; }
.totaalvak .groot { font-size: 44px; font-weight: bold; line-height: 1; color: var(--accent); }

.stuurknoppen { display: flex; gap: 10px; }
.stuurknoppen button { flex: 1 1 auto; }

input.linkveld {
    width: 100%;
    margin-top: 4px;
    font-size: 11px;
    font-family: "Consolas", monospace;
}

/* Keuze van de toegelaten punten bij het opzetten. */
/* ------------------------------------------------------------------
   Het rapport van een jurering: de kop met de algemene gegevens.
------------------------------------------------------------------ */
.rapportkop { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.rapportkop > .kader { flex: 1 1 340px; margin-bottom: 0; }

table.gegevens { border: none; background: none; width: 100%; }

table.gegevens th {
    width: 130px;
    text-align: left;
    font-weight: normal;
    color: var(--tekst-zwak);
    font-size: 13px;
    background: none;
    border: none;
    padding: 4px 10px 4px 0;
    white-space: nowrap;
}

table.gegevens td { border: none; padding: 4px 0; }

/* Een cijfer dat niet gegeven maar berekend is. */
td.getal.berekend { font-style: italic; color: var(--tekst-zwak); }

/* Goud, zilver, brons en het diploma. */
.eer {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.eer.goud    { background: #b08900; }
.eer.zilver  { background: #77848f; }
.eer.brons   { background: #96552c; }

.eer.diploma {
    background: none;
    border: 1px solid var(--rand);
    color: var(--tekst-zwak);
    font-weight: normal;
}

/* De A van aanvaard, bij elk beeld dat boven de grens uitkomt. */
.aanvaard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
table.gegevens tr:hover > td, table.gegevens tr:hover > th { background: none; }

/* Het meldformulier en het oefenblok onderaan het startscherm. */
.meldkader { max-width: 720px; }
.meldkader textarea { width: 100%; }
.meldkader label { display: block; margin-bottom: 4px; }
.meldkader .rij { margin-bottom: 12px; }

/* In de lijst met meldingen mag de tekst over meerdere regels lopen. */
td.meldtekst { white-space: normal; line-height: 1.45; }

/* De regel die op dit moment bijgewerkt wordt, licht op. */
tr.bewerkt > td { background: var(--vlak-licht); }

.oefenkader { max-width: 720px; }
.oefenkader .rij { align-items: flex-end; }

.puntenkeuze { display: flex; flex-wrap: wrap; gap: 14px; }
.puntenkeuze label { font-size: 15px; color: var(--tekst); }

/*
   De vijf juryleden: onder elkaar, alle vijf even breed. Een gewone
   keuzelijst met vierhonderdvijftig namen is niet te overzien, dus het is
   een tekstveld waarin je zoekt, met de treffers eronder.
*/
.jurykeuze { display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.jurykeuze .veld { display: flex; flex-direction: column; gap: 4px; }

.keuzelijst { position: relative; }
.keuzelijst .zoekveld { width: 100%; }

.keuzelijst .keuzes {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(var(--veldhoogte) + 2px);
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 270px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(15, 21, 29, .22);
}

.keuzelijst .keuzes[hidden] { display: none; }

.keuzelijst .keuzes li {
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.keuzelijst .keuzes li:hover,
.keuzelijst .keuzes li.actief { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------
   Het scherm van een jurylid — bedoeld voor een telefoon.
------------------------------------------------------------------ */
.jureerscherm { max-width: 780px; margin: 0 auto; }
.jureerscherm .voortgang { text-align: center; margin: 12px 0; }

/*
   Het beeld staat hier midden op de pagina, net als de cijferknoppen en de
   stand eronder. Het kadertje met het beeldnummer hangt aan de rand van het
   beeld, dus het omhulsel krijgt dezelfde breedte mee — anders zou dat
   nummer links op de pagina blijven staan.
*/
.jureerscherm .jurering-beeld { max-width: var(--jureerbeeld); margin: 0 auto; }

.puntenknoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}

.puntenknoppen button {
    flex: 0 0 66px;
    height: 66px;
    max-height: 66px;
    font-size: 26px;
    font-weight: bold;
    background: var(--vlak);
    color: var(--tekst);
    border: 2px solid var(--rand);
    border-radius: 8px;
}

.puntenknoppen button:hover { background: var(--vlak-licht); border-color: var(--accent); }
.puntenknoppen button.gekozen { background: var(--accent); border-color: var(--accent); color: #fff; }
.jureerscherm .gestemd { text-align: center; color: var(--ok); }

/* ------------------------------------------------------------------
   Het grote scherm in de zaal. Donker, want dat staat op een beamer.
------------------------------------------------------------------ */
body.grootscherm {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0d0d0d;
    color: #eee;
    overflow: hidden;
}

.gs-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    font-size: 17px;
    color: #999;
    border-bottom: 1px solid #222;
}

.gs-inhoud { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.gs-beeld { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.gs-beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }

.gs-balk {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    border-top: 1px solid #222;
}

/* Links het beeldnummer, rechts het totaal, allebei even breed. Alleen zo
   staan de blokjes ertussen echt in het midden van het scherm. */
.gs-nummer {
    flex: 0 0 150px;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    color: #888;
}

/*
   In het midden van de balk staat hoevéél juryleden gestemd hebben, als
   blokjes die van links naar rechts vollopen. Welk blokje bij welk jurylid
   hoort, is niet af te lezen — en dat hoort ook niet: de zaal mag niet zien
   wie er nog moet stemmen, en al zeker niet wat iemand gaf.
*/
.gs-stand {
    flex: 1 1 auto;
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
}

.gs-blok {
    width: 56px;
    height: 18px;
    border-radius: 9px;
    background: #1b1b1b;
    border: 1px solid #383838;
}

.gs-blok.vol { background: #4ea3ff; border-color: #4ea3ff; }

/* Ligt de jurering stil, dan komt dat in de plaats van de blokjes. */
.gs-pauze { font-size: 26px; letter-spacing: 6px; text-transform: uppercase; color: #c7a24a; }

.gs-totaalvak {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.gs-totaallabel { font-size: 15px; color: #777; letter-spacing: 2px; text-transform: uppercase; }
.gs-totaal { font-size: 54px; font-weight: bold; color: #4ea3ff; line-height: 1.05; }

.gs-wacht { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gs-merk { font-size: 90px; font-weight: bold; letter-spacing: 22px; color: #4ea3ff; }
.gs-wacht p { color: #888; font-size: 20px; }