/* De drie merkkleuren komen uit de gedeelde UP-tokenfile en worden hier niet meer overgetypt,
     net als in de gastvoorkant. De eigen namen blijven staan, alleen de bron verandert.
     Reden om dit meteen te doen: --aqua stond hier op #1AA6B7 en de tokenfile zegt #1AA7B7.
     Eén teken verschil, met het blote oog niet te zien, en precies zo ontstaan de varianten
     waar de stijlgids voor waarschuwt. De andere twee waren al gelijk aan het token.
     De tinten hieronder (navy-70, navy-05, red-dim en de rest) hebben geen tegenhanger in de
     tokenfile en blijven daarom lokaal. Dat is een openstaande vraag aan de bouwer van het
     systeem, geen reden om ze hier zelf te verzinnen. */
  :root{
    --navy:var(--up-navy); --navy-70:#33586c; --navy-05:#f2f6f8;
    --red:var(--up-brand-rood); --red-dim:#ffeced; --aqua:var(--up-aqua);
    --bg:#eef1f4; --panel:#fff; --lijn:#dbe3e8; --lijn-zacht:#eaeff2;
    --muted:#64798a; --amber:#b45309; --amber-dim:#fef3c7; --groen:#15803d; --groen-dim:#e7f6ec;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--bg); color:var(--navy);
    font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
  button{font-family:inherit; font-size:inherit; cursor:pointer}
  input,select{font-family:inherit; font-size:16px}

  #diag{display:none; margin:20px; padding:16px; background:var(--red-dim);
    border-left:3px solid var(--red); color:#8c1f27; border-radius:10px;
    font-family:ui-monospace,Menlo,monospace; font-size:12.5px; white-space:pre-wrap; word-break:break-word}

  /* Nabouw van Daniels header (klanten/up-events/daniel-layout-20260821/03-admin-login.jpeg en
     02-tee-sheet-met-legenda.jpeg), 22 augustus 2026 avond: navy balk, een dunne rode lijn over
     de volle breedte eronder, en een lockup GOLF WEESP / PREMIUM BOOKING in plaats van de losse
     tekst "UPgolf". De rode lijn staat op de balk zelf (border-bottom), niet op een los element,
     zodat hij altijd de volle breedte van .top pakt en niet van de smallere .top-in. */
  .top{position:sticky; top:0; z-index:30; background:var(--navy); color:#fff;
    border-bottom:3px solid var(--red)}
  .top-in{max-width:1080px; margin:0 auto; padding:12px 14px; display:flex; align-items:center; gap:10px}
  /* Het logo is een KNOP (klikken brengt je terug naar de tee sheet) en geen tekst meer. Een knop
     krijgt van de browser zelf een lichte achtergrond, een rand en een donkere tekstkleur, en op de
     donkerblauwe balk werd dat een wit blok om het logo. Gemeld op 14 augustus 2026 met een
     schermafbeelding. Deze vier regels halen dat weg zonder de klikfunctie aan te tasten. */
  .brand{display:flex; align-items:center; gap:11px;
    font-weight:900; font-size:19px; letter-spacing:-.02em;
    background:none; border:0; padding:0; color:inherit; line-height:1}
  .brand span{color:var(--red)}
  .brand-up{color:var(--red); font-weight:900; font-size:22px; letter-spacing:-.02em}
  /* De dunne verticale scheiding tussen "UP" en de tekstlockup, zoals in het screenshot. */
  .brand-scheiding{width:1px; align-self:stretch; background:rgba(255,255,255,.28)}
  .brand-tekst{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2}
  .brand-naam{color:#fff; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.02em}
  .brand-sub{color:var(--red); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.12em}
  /* Wie met de tab-toets werkt moet zien waar hij staat. De browser tekent zijn eigen ring niet
     meer zodra de knopopmaak is weggehaald, dus die zetten wij er zelf op. Wit, want deze knop
     staat op de donkerblauwe balk en de aqua ring van de andere knoppen valt daar weg. */
  .brand:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:3px}
  .menuknop{margin-left:auto; display:flex; align-items:center; gap:7px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
    color:#fff; padding:8px 13px; border-radius:9px; font-size:14px; font-weight:500}
  .menuknop:hover{background:rgba(255,255,255,.2)}
  .drawer-scrim{position:fixed; inset:0; background:rgba(0,45,65,.4); z-index:40}
  .drawer{position:fixed; top:0; right:0; bottom:0; width:76%; max-width:320px; z-index:41;
    background:var(--panel); box-shadow:-8px 0 30px rgba(0,45,65,.2);
    padding:18px 16px calc(18px + env(safe-area-inset-bottom)); overflow:auto}
  .drawer h4{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
    margin:16px 0 6px; font-weight:700}
  .drawer h4:first-child{margin-top:4px}
  .drawer-item{display:block; width:100%; text-align:left; padding:12px 12px; border-radius:10px;
    border:0; background:none; color:var(--navy); font-size:15px; font-weight:500}
  .drawer-item:hover{background:var(--navy-05)}
  .drawer-item.aan{background:var(--navy); color:#fff}
  .drawer-sluit{float:right; background:none; border:0; color:var(--muted); font-size:22px; padding:0 4px}

  main{max-width:1080px; margin:0 auto; padding:14px 14px 90px}

  /* `flex-wrap:wrap` is een vangnet, gezet naar aanleiding van Roys melding (22 augustus 2026,
     ingelogd) dat de datumbalk "half wegvalt" direct onder de header. Dat kon in een losse
     nameting op 1000 en op 768 breed niet worden nagebouwd (zie de meting in de oplevering), dus
     de kans bestaat dat het een cachestand betrof. Zonder wrap zou een rij die toch niet past
     stilzwijgend worden afgeknipt in plaats van netjes door te lopen; met wrap valt hij naar een
     tweede regel in plaats van te verdwijnen. Dat is de veilige kant, ook als de oorzaak elders lag. */
  .datumnav{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; row-gap:8px}
  .datumnav .pijl{background:var(--panel); border:1px solid var(--lijn); color:var(--navy);
    width:40px; height:40px; border-radius:10px; font-size:18px; flex:0 0 auto}
  .datumnav .pijl:hover{border-color:var(--aqua)}
  /* Alleen de eerste letter een hoofdletter. `capitalize` zou elk woord kapitaliseren en dat maakt in
     het Nederlands van "woensdag 26 augustus" een "Woensdag 26 Augustus", wat fout is.
     Nabouw van het datumveld in 02-tee-sheet-met-legenda.jpeg (22 augustus 2026 avond): het label
     krijgt de zware navy rand van dat veld, in plaats van kale tekst zonder kader. */
  .datumnav .lbl{flex:1; text-align:center; font-weight:700; font-size:15px;
    height:40px; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--up-navy); border-radius:10px; background:var(--panel)}
  .datumnav .lbl::first-letter{text-transform:uppercase}
  /* Vandaag en de agendaknop krijgen dezelfde navy-blokstijl als de knoppen op het screenshot
     (TERUG-knop op 03-admin-login.jpeg): massief navy vlak, witte tekst, klein verschoven kleurvlak
     erachter als schaduw. De pijltjes en de +Boeken/Blok-knoppen op de rijen blijven bewust licht,
     zodat de rijen zelf leesbaar blijven (opdracht 22 augustus 2026). */
  .datumnav .vandaag{position:relative; z-index:1; background:var(--up-navy); border:0; color:#fff;
    padding:0 14px; height:40px; border-radius:10px; font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; flex:0 0 auto}
  .datumnav .vandaag::before{content:""; position:absolute; inset:4px -4px -4px 4px; z-index:-1;
    background:var(--up-navy); opacity:.35; border-radius:10px}

  /* De agenda hangt onder zijn eigen knop. De wikkel staat op relative en draagt met opzet GEEN
     overflow-regel: een absoluut paneel binnen een element met overflow auto of hidden wordt stil
     afgeknipt, zonder foutmelding en met een correcte DOM. Dat is hier eerder misgegaan. */
  .agendawikkel{position:relative; flex:0 0 auto}
  .agendaknop{position:relative; z-index:1; background:var(--up-navy); border:0; color:#fff;
    padding:0 13px; height:40px; border-radius:10px; font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em}
  .agendaknop::before{content:""; position:absolute; inset:4px -4px -4px 4px; z-index:-1;
    background:var(--up-navy); opacity:.35; border-radius:10px}
  .agendaknop:hover{background:#01374f}
  .agenda-scrim{position:fixed; inset:0; z-index:44}
  .agenda{position:absolute; top:calc(100% + 6px); right:0; z-index:45; width:286px;
    background:var(--panel); border:1px solid var(--lijn); border-radius:12px;
    box-shadow:0 12px 34px rgba(0,45,65,.18); padding:12px}
  .agenda-kop{display:flex; align-items:center; gap:6px; margin-bottom:8px}
  .agenda-maand{flex:1; text-align:center; font-weight:700; font-size:14px}
  .agenda-maand::first-letter{text-transform:uppercase}
  .agenda-pijl{background:none; border:1px solid var(--lijn); color:var(--navy);
    width:30px; height:30px; border-radius:8px; font-size:16px; flex:0 0 auto}
  .agenda-pijl:hover{border-color:var(--aqua)}
  .agenda-weekdagen{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px}
  .agenda-weekdagen span{text-align:center; font-size:10px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em}
  .agenda-raster{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
  .agenda-dag{height:34px; border:1px solid transparent; background:none; color:var(--navy);
    border-radius:8px; font-size:13px; font-variant-numeric:tabular-nums}
  .agenda-dag:hover{background:var(--navy-05)}
  .agenda-dag.buiten{color:var(--muted); opacity:.55}
  /* Vandaag en de gekozen dag zijn allebei gemarkeerd, en niet alleen met kleur: vandaag krijgt een
     rand, de gekozen dag een gevulde vlak met vet cijfer. Ze kunnen tegelijk gelden. */
  .agenda-dag.vandaag{border-color:var(--aqua); font-weight:700}
  .agenda-dag.gekozen{background:var(--navy); color:#fff; font-weight:700; border-color:var(--navy)}
  .agenda-dag:focus-visible{outline:2px solid var(--aqua); outline-offset:1px}
  .agenda-bij{margin:9px 0 0; font-size:11.5px; color:var(--muted); text-align:center}

  /* Nabouw van de kaartvorm uit 03-admin-login.jpeg (22 augustus 2026 avond): witte tegel, dikke
     navy rand van 2px, en een verschoven navy vlak erachter als harde schaduw (geen zachte
     box-shadow, geen vervaging).
     FOUT VAN DE VORIGE RONDE, gemeld door Roy (22 augustus 2026, ingelogd op 26 augustus): het
     schaduwvlak stond op ::before met een NEGATIEVE inset (top/links 5px naar binnen, rechts/onder
     5px naar BUITEN). Zo'n pseudo-element wordt met z-index:-1 wel "achter" getekend, maar dat is
     achter de TEKST, niet achter de EIGEN achtergrond van .stat: binnen een stacking context
     tekent de browser eerst de achtergrond van .stat, dan het negatieve-z-index kind, en pas
     daarna de gewone tekst-kinderen. Het navy vlak dekte daardoor bijna de hele tegel af, met de
     tekst er nog wel bovenop maar dan navy-op-navy: onleesbaar. Precies dat meldde Roy, "SPELERS"
     niet te zien, alleen "VRIJ 518" nog leesbaar omdat die waarde toevallig al aqua is
     (.stat.vrij .v).
     OPLOSSING: een echte CSS box-shadow zonder vervaging (0 blur, 0 spread). Die tekent de browser
     per definitie ALLEEN buiten de eigen rand van het element, nooit over de inhoud. Dat is het
     verschil met een ::before/::after, die altijd ergens binnen de doos van het element blijven. */
  .stats{display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap}
  .stat{background:var(--panel); border:2px solid var(--up-navy); border-radius:10px;
    padding:10px 12px; flex:1; min-width:80px; box-shadow:5px 5px 0 0 var(--up-navy)}
  .stat .k{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
  .stat .v{font-size:19px; font-weight:700; margin-top:2px}
  /* De onderregel van een bezettingsvakje: het percentage is het antwoord, deze regel maakt het
     narekenbaar. Klein en grijs, want je leest hem alleen als je twijfelt aan het percentage. */
  .stat .bijstat{font-size:11px; color:var(--muted); margin-top:1px; font-variant-numeric:tabular-nums}
  .stat.vrij .v{color:var(--aqua)}
  .stat.open .v{color:var(--amber)}

  .blad{background:var(--panel); border:1px solid var(--lijn); border-radius:12px; overflow:hidden}
  .row{padding:11px 13px; border-bottom:1px solid var(--lijn-zacht)}
  .row:last-child{border-bottom:0}
  .row.blocked{background:var(--navy-05)}
  /* Een starttijd die vandaag al voorbij is, staat bleker. Dat stond op .55, en gemeten in de browser
     kwam de tekst daarmee op 3,4 op 1 uit tegen het vlak eronder. Dat is onder de 4,5 op 1 die voor
     gewone tekst nodig is, en op een gekleurd vlak valt het extra op. Op .72 blijft de rij duidelijk
     bleker dan de rest en haalt de tekst wel de norm. Gemeten, niet geschat. */
  .row.past{opacity:.72}
  .row-top{display:flex; align-items:center; gap:11px}
  /* De klikbare doos rond tijd/sport/bezetting, apart van `row-acties` (de knoppen ernaast), zodat
     een klik op +Boeken/Blok/Open niet ook de detailkaart in- of uitklapt. Alleen een vinger- of
     duimcursor als er ook echt iets valt in te klappen (`heeftDetail`, zie schermen-dag.jsx). */
  .row-klik{display:flex; align-items:center; gap:11px; flex:1; min-width:0; cursor:pointer}
  .row-klik.zonder-klik{cursor:default}
  .row-klik:focus-visible{outline:2px solid var(--aqua); outline-offset:2px; border-radius:6px}
  .rij-vouw{margin-left:auto; width:20px; height:20px; border-radius:5px; background:var(--navy-05);
    border:1px solid var(--lijn); display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--navy); flex:0 0 auto}
  .time{font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; flex:0 0 auto; width:46px}
  .pegs{display:flex; gap:4px; flex:0 0 auto}
  .peg{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--lijn); background:transparent}
  .peg.vol{background:var(--aqua); border-color:var(--aqua)}
  .peg.dicht{background:var(--navy-70); border-color:var(--navy-70)}
  /* Capaciteit bij veel plekken: een balk met het getal ernaast. Het getal is het antwoord, de balk is
     de snelle indruk. Vaste breedte, zodat de rijen van een voetgolfblok recht onder elkaar uitlijnen en
     de balie de drukte van de dag langs die ene kolom afleest. De vulling draagt de merkaqua, dezelfde
     kleur als een vol bolletje, dus het blijft een weergave en geen nieuwe taal. */
  .cap{display:flex; align-items:center; gap:9px; flex:0 0 auto}
  .cap-balk{width:104px; height:9px; border-radius:5px; background:var(--lijn-zacht);
    border:1px solid var(--lijn); overflow:hidden; flex:0 0 auto}
  .cap-vul{height:100%; background:var(--aqua); border-radius:4px}
  .cap-tekst{font-size:12.5px; font-weight:500; color:var(--navy); font-variant-numeric:tabular-nums;
    white-space:nowrap}
  .cap.dicht .cap-vul{background:var(--navy-70)}
  .cap.dicht .cap-tekst{color:var(--navy-70)}

  /* De uitklapknop van een grote deelnemerslijst. Hij zegt zelf hoeveel spelers erin zitten en hoeveel
     er ingecheckt zijn, zodat een balie die stand ziet zonder open te klappen. Het plus- en minteken is
     eigen tekst en geen icoontjesbibliotheek. */
  .vouw{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--lijn);
    color:var(--navy); padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500; margin-bottom:7px}
  .vouw:hover{border-color:var(--navy-70)}
  .vouw-teken{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
    border-radius:4px; background:var(--navy-05); border:1px solid var(--lijn); font-size:12px; line-height:1}
  /* De incheckstand op de rij zelf, bij een grote groep. Rustig van vorm, want het staat naast de
     capaciteitsbalk en mag die niet overstemmen; is de hele groep binnen, dan wordt het merkaqua, want
     dan is de rij afgehandeld. Tabulaire cijfers, zodat het getal niet verspringt bij elke klik. */
  .in-stand{font-size:12.5px; font-weight:500; color:var(--navy-70); font-variant-numeric:tabular-nums;
    white-space:nowrap; border:1px solid var(--lijn); border-radius:var(--up-radius-pill);
    padding:2px 9px; background:#fff; flex:0 0 auto}
  .in-stand.klaar{background:var(--aqua); border-color:var(--aqua); color:#fff}

  /* De teller bij een voetgolfgroep. Twee knoppen en een getal, verder niets, want dit is de handeling
     die iemand doet terwijl er veertig mensen voor de balie staan. De raakvlakken zijn 40 bij 40 pixels;
     dat is de ondergrens die op een aanraakscherm nog betrouwbaar te raken is. */
  .teller{display:inline-flex; align-items:center; gap:4px; margin-bottom:7px;
    border:1px solid var(--lijn); border-radius:10px; background:#fff; padding:3px}
  .teller-knop{width:40px; height:40px; border:0; background:var(--navy-05); border-radius:8px;
    color:var(--navy); font-size:20px; line-height:1; font-weight:500}
  .teller-knop:hover:not(:disabled){background:var(--aqua); color:#fff}
  .teller-knop:disabled{opacity:.35}
  .teller-stand{display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:104px; padding:0 6px; line-height:1.15}
  .teller-getal{font-size:19px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums}
  .teller-van{font-size:11.5px; color:var(--muted)}

  .row-acties{margin-left:auto; display:flex; gap:5px}
  .geblokt{font-size:13px; font-weight:500; color:var(--navy-70); text-transform:uppercase; letter-spacing:.04em; margin-left:57px}
  .leeg{color:var(--muted); font-size:13px; margin-left:57px}

  .bk{background:var(--navy-05); border:1px solid var(--lijn); border-left:3px solid var(--aqua);
    border-radius:8px; padding:8px 10px; margin:6px 0 0 57px}
  .bk.onbetaald{border-left-color:var(--amber); background:var(--amber-dim)}
  .bk.noshow{border-left-color:var(--red); background:var(--red-dim); opacity:.85}
  /* ---------- sport: golf en voetgolf ----------
     Een baliemedewerker moet in een oogopslag zien welk deel van de dag voor welke sport is.

     Kleurkeuze, en waarom juist deze twee. In dit scherm dragen groen, amber en rood al een
     status (klaar, open bedrag, no-show). Een sport in een van die kleuren zetten betekent dat
     dezelfde kleur twee dingen zegt, en dan is kleur helemaal niets meer waard. De twee kleuren
     die hier GEEN status betekenen zijn de merkaqua en het navy, en dat zijn precies de twee
     UP-kleuren. Golf krijgt de aqua, voetgolf het navy. Licht tegenover donker is bovendien het
     grootst mogelijke verschil binnen de huisstijl, dus het valt ook op een druk scherm op.
     Beide gemeten: navy op aqua haalt 4,99:1, wit op navy 14,47:1, dus ook de kleine tekst
     van 10,5px blijft boven de 4,5:1.

     Kleur alleen is niet genoeg, dus er zijn drie signalen:
     1. het woord zelf, dat de bouwer van de schermen in het label zet,
     2. de vorm van het tekentje ervoor, rond voor golf (de bal) en een scherpe ruit voor
        voetgolf, dus ook zonder kleurwaarneming te onderscheiden,
     3. de kleur, als snelste maar minst belangrijke signaal.
     Staat er geen woord in het label, dan vult de opmaak het alsnog aan (zie :empty hieronder),
     zodat een leeg label nooit een kaal gekleurd bolletje wordt. */
  .sport-golf,.sport-voetgolf{display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    padding:2px 8px; border-radius:var(--up-radius-pill); white-space:nowrap}
  /* Het label zat eerst zelf in een volle kleur (golf aqua, voetgolf navy). Nu het VLAK van de rij
     de sportkleur draagt, zou een tweede vol gekleurd blokje ernaast het scherm onrustig maken en
     ook nog een derde kleur toevoegen. Daarom is het label wit met een rand in de sportkleur en met
     het tekentje in de sportkleur. Dat leest rustiger, het houdt de rij het hoofdvlak, en de tekst
     staat op wit: navy op wit is 17,6 op 1, ruim boven de 4,5 op 1 die voor deze kleine letters
     nodig is. Vol UP-rood met witte tekst zou 3,4 op 1 zijn geweest en dus te weinig. */
  .sport-golf{background:#fff; color:var(--up-navy); border:1.5px solid var(--up-navy)}
  .sport-voetgolf{background:#fff; color:var(--up-navy); border:1.5px solid var(--up-brand-rood)}
  .sport-golf::before,.sport-voetgolf::before{content:""; width:8px; height:8px;
    flex:0 0 auto; background:currentColor}
  .sport-golf::before{background:var(--up-navy)}
  .sport-voetgolf::before{background:var(--up-brand-rood)}
  .sport-golf::before{border-radius:50%}
  .sport-voetgolf::before{transform:rotate(45deg)}
  /* Vangnet: label zonder tekst krijgt alsnog het woord, want een bolletje zonder woord is
     precies wat we hier wilden voorkomen. */
  .sport-golf:empty::after{content:"Golf"}
  .sport-voetgolf:empty::after{content:"Footgolf"}

  /* Een streepje langs de rij waar het label in staat, zodat je een blok van de dag als geheel
     herkent zonder elk label te lezen. Bewust met :has, dan hoeft de bouwer van de schermen
     de klasse niet twee keer te zetten. Een browser zonder :has laat alleen het streepje weg
     en houdt het label, dus er gaat geen informatie verloren. Inset schaduw en geen border,
     want een border zou de rijhoogte van de hele tee sheet verschuiven.
     Voor de tee sheet is deze regel vervallen: die rijen dragen de sport nu als klasse en krijgen
     hun kleur verderop in dit blad. Voor de dagstaat blijft hij staan, want daar zit geen klasse op
     de rij. De kleuren zijn wel gelijkgetrokken met de tee sheet: navy voor golf, UP-rood voor
     voetgolf. */
  @supports selector(:has(*)){
    .ds-row:has(.sport-golf){box-shadow:inset 3px 0 0 var(--up-navy)}
    .ds-row:has(.sport-voetgolf){box-shadow:inset 3px 0 0 var(--up-brand-rood)}
  }

  .bk-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px}
  .bk-naam{font-weight:500}
  .ref{font-size:11.5px; letter-spacing:.05em; color:var(--muted); font-variant-numeric:tabular-nums}
  .bedrag{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:500}
  .hold-tag{font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:5px; font-weight:500; color:#fff}
  .hold-tag.amber{background:var(--amber)} .hold-tag.rood{background:var(--red)}
  .spelers{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px}
  .speler{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--lijn);
    background:#fff; padding:4px 9px 4px 7px; border-radius:7px; font-size:13px; color:var(--navy)}
  .speler.in{background:var(--aqua); border-color:var(--aqua); color:#fff}
  .tick{width:14px; height:14px; border:1.5px solid var(--muted); border-radius:4px;
    display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0}
  .speler.in .tick{background:#fff; border-color:#fff; color:var(--aqua)}
  .type{font-size:10.5px; letter-spacing:.04em; opacity:.7; text-transform:uppercase}
  .bk-acties{display:flex; gap:6px; flex-wrap:wrap}
  .mini{background:#fff; border:1px solid var(--lijn); color:var(--muted); padding:5px 10px; border-radius:8px; font-size:12.5px; white-space:nowrap}
  .mini:hover{color:var(--navy); border-color:var(--navy-70)}
  .mini.gevaar:hover{color:var(--red); border-color:var(--red)}
  .mini.doe{color:var(--navy); border-color:var(--navy-70); font-weight:500}
  .mini.groen{background:var(--aqua); border-color:var(--aqua); color:#fff}
  .mini.rood{background:var(--red); border-color:var(--red); color:#fff}

  .scrim{position:fixed; inset:0; background:rgba(0,45,65,.5); z-index:50; display:flex; align-items:flex-end; justify-content:center}
  .paneel{background:var(--panel); border-radius:18px 18px 0 0; width:100%; max-width:520px;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom)); max-height:92vh; overflow:auto}
  .greep{width:38px; height:4px; border-radius:3px; background:var(--lijn); margin:0 auto 14px}
  .paneel h2{font-size:19px; font-weight:900; letter-spacing:-.02em; margin:0 0 3px}
  .paneel .sub{color:var(--muted); font-size:13px; margin:0 0 14px}
  label{display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:12px 0 5px; font-weight:700}
  input,select{width:100%; padding:11px; border:1px solid var(--lijn); border-radius:10px; background:#fff; color:var(--navy)}
  input:focus,select:focus{outline:2px solid var(--aqua); outline-offset:-1px}
  input[type=checkbox]{width:auto}
  .rij{display:flex; gap:8px; align-items:flex-end; margin-bottom:7px}
  .rij>*{flex:1}
  .rij .weg{flex:0 0 auto; width:40px}
  .primair{background:var(--red); color:#fff; border:0; padding:12px 18px; border-radius:10px; font-weight:700; width:100%; margin-top:16px}
  .primair:hover{background:#e63944}
  .primair:disabled{opacity:.45; cursor:not-allowed}
  .sluit{background:none; border:0; color:var(--muted); margin-top:8px; width:100%; padding:9px}
  .fout{background:var(--red-dim); border-left:3px solid var(--red); color:#8c1f27; padding:9px 12px; font-size:13px; margin-top:12px; border-radius:9px}
  .ok{background:var(--groen-dim); border-left:3px solid var(--groen); color:#14532d; padding:9px 12px; font-size:13px; margin-top:12px; border-radius:9px}

  .kaart{background:var(--panel); border:1px solid var(--lijn); border-radius:12px; padding:15px; margin-bottom:11px}
  .kaart h3{margin:0 0 3px; font-size:15px; font-weight:700}
  .kaart .bij{color:var(--muted); font-size:12.5px; margin:0 0 11px}
  .kop{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px}
  .kop h3{margin:0}
  .kop .acties{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
  .pil{font-size:11px; padding:2px 8px; border-radius:20px; background:var(--navy-05); border:1px solid var(--lijn); color:var(--muted)}
  .pil.aan{background:var(--groen-dim); border-color:#bbe3c8; color:var(--groen)}
  .pil.rood{background:var(--red-dim); border-color:#f5c2c6; color:#8c1f27}
  .dagkeuze{display:flex; gap:4px; flex-wrap:wrap}
  .dagknop{border:1px solid var(--lijn); background:#fff; color:var(--muted); min-width:38px; height:34px; border-radius:7px; font-size:12.5px; padding:0 4px}
  .dagknop.aan{background:var(--aqua); border-color:var(--aqua); color:#fff; font-weight:500}
  .weekrij{display:grid; grid-template-columns:40px 58px 1fr 1fr; gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid var(--lijn-zacht)}
  .weekrij:last-child{border-bottom:0}
  .weekrij .dg{font-weight:700; font-size:13px}
  .weekrij .sw{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px}
  .weekrij.dicht input[type=time],.weekrij.dicht .paar{opacity:.4}
  .paar{display:flex; gap:6px; grid-column:3 / 5}
  .paar input{flex:1}
  .tabelwrap{overflow-x:auto; margin:0 -3px}
  .tabel{width:100%; border-collapse:collapse; font-size:13px}
  .tabel th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:0 8px 7px 0; border-bottom:1px solid var(--lijn); white-space:nowrap}
  .tabel td{padding:8px 8px 8px 0; border-bottom:1px solid var(--lijn-zacht); vertical-align:middle}
  .tabel tr:last-child td{border-bottom:0}

  /* dagstaat */
  .ds-row{display:flex; align-items:center; gap:12px; padding:11px 13px; border-bottom:1px solid var(--lijn-zacht)}
  .ds-row:last-child{border-bottom:0}
  .ds-row.klaar{background:var(--groen-dim)}
  .ds-row.ns{background:var(--red-dim); opacity:.8}
  .ds-tijd{font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; width:46px; flex:0 0 auto}
  .ds-mid{flex:1; min-width:0}
  .ds-naam{font-weight:500}
  .ds-sub{font-size:12px; color:var(--muted)}
  .ds-rechts{text-align:right; flex:0 0 auto}
  .ds-euro{font-weight:700; font-variant-numeric:tabular-nums}
  .ds-badge{font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:20px; display:inline-block; margin-top:2px}
  .ds-badge.betaald{background:var(--groen-dim); color:var(--groen)}
  .ds-badge.open{background:var(--amber-dim); color:var(--amber)}

  .melding{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; background:var(--navy); color:#fff;
    padding:11px 20px; border-radius:9px; font-size:13.5px; z-index:60; box-shadow:0 8px 26px rgba(0,45,65,.3); max-width:90%}
  .laden{padding:42px 0; text-align:center; color:var(--muted)}
  .poort{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; background:var(--navy)}
  .poort .paneel{max-width:360px; border-radius:16px}
  /* Het slotscherm gebruikt `kaart` en geen `paneel`, en die had hier geen maximumbreedte. Op een
     baliescherm van 1280 pixels werd het daardoor een kaart van bijna een meter breed met één
     regel tekst erin. Zelfde breedte als de inlogkaart, plus wat ruimte omdat er meer tekst in staat. */
  .poort .kaart{max-width:460px; width:100%; border-radius:16px}
  .merk{font-weight:900; font-size:24px; letter-spacing:-.02em; color:var(--navy); margin-bottom:2px}
  .merk span{color:var(--red)}
  /* ---------- het hele vlak van een rij draagt de sport ----------
     Vraag van de opdrachtgever, letterlijk: het hele vlak van de rij moet de kleur van de sport
     krijgen, voetgolf rood en golf blauw. Het label alleen was hem niet genoeg.

     WELKE TINT, EN WAAROM NIET DE VOLLE MERKKLEUR. Op dit scherm betekent fel rood al iets:
     de no-show-tag is vol rood, een openstaand bedrag is amber. Een hele rij in vol UP-rood zou
     naast een rij staan die rood is omdat er iets mis is, en dan zegt rood twee dingen tegelijk.
     Daarom draagt het VLAK een zachte tint van de sportkleur en houden de waarschuwingen hun volle
     kleur. Zo blijft "welke sport" een andere taal dan "er is iets mis". Het is meteen het antwoord
     op het risico dat een scherm vol gekleurde vlakken onrustig wordt: twee bleke tinten en een
     smal streepje in de volle kleur, verder niets.

     ALLE VIER DE KLEUREN KOMEN UIT up-tokens.css en zijn niet overgetypt:
       voetgolf vlak  --up-brand-rood-tint  #FFE5E7,  streepje --up-brand-rood #FE424D
       golf     vlak  --up-brand-licht      #DAECF3,  streepje --up-navy       #002D41
     Blauw is bewust het navy en niet de aqua: de aqua draagt in dit scherm al de bezetting
     (volle bolletjes, gevulde balk, ingecheckte speler) en is dus geen vrije kleur meer.

     Het streepje is een inset schaduw en geen border, want een border zou de rijhoogte van de hele
     tee sheet verschuiven. Het vervangt de oude :has()-regel, die nu overbodig is omdat de sport als
     klasse op de rij staat. */
  .row.rij-voetgolf{background:var(--up-brand-rood-tint); box-shadow:inset 4px 0 0 var(--up-brand-rood)}
  .row.rij-golf{background:var(--up-brand-licht); box-shadow:inset 4px 0 0 var(--up-navy)}

  /* Dicht: de sportkleur blijft staan, er komt een schuine arcering overheen. Dat is een tweede
     signaal naast het woord "geblokkeerd" eronder, en het houdt de sport leesbaar. Vroeger werd de
     rij hier grijs, en dan viel juist op een dichte rij niet meer te zien welke sport het was. */
  .row.blocked{background-image:repeating-linear-gradient(135deg,
      rgba(0,45,65,.07) 0 6px, rgba(0,45,65,0) 6px 13px)}
  .row.blocked:not(.rij-voetgolf):not(.rij-golf){background-color:var(--navy-05)}

  /* Een boeking in een gekleurde rij krijgt een wit vlak, zodat de statuskleuren (amber voor
     onbetaald, rood voor no-show) blijven opvallen tegen de rij in plaats van erin te verdwijnen.
     Dat is precies de scheiding die wij willen: de RIJ zegt welke sport, de KAART zegt of er iets
     aan de hand is. */
  .row.rij-voetgolf .bk,.row.rij-golf .bk{background:#fff}
  .row.rij-voetgolf .bk.onbetaald,.row.rij-golf .bk.onbetaald{background:var(--amber-dim)}
  .row.rij-voetgolf .bk.noshow,.row.rij-golf .bk.noshow{background:var(--red-dim)}

  /* ---------- merkje NAGEBOOTST ----------
     Bewust NIET rood en niet groen: rood betekent hier "er is iets mis" en groen "in orde", en dit
     is geen van beide. Navy op wit met een volle rand, dus het valt op zonder alarm te slaan. */
  .nagebootst-balk{display:flex; gap:11px; align-items:flex-start; background:#fff;
    border:2px dashed var(--navy-70); border-radius:12px; padding:12px 14px; margin-bottom:11px;
    font-size:13px; color:var(--navy)}
  .nagebootst-merk{flex:0 0 auto; background:var(--navy); color:#fff; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; padding:3px 8px; border-radius:5px}
  .sim-tag{display:inline-block; background:var(--navy); color:#fff; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; padding:2px 6px; border-radius:4px; margin-right:7px;
    letter-spacing:.06em}
  .paneel.demoscherm{max-height:none; overflow:visible; max-width:620px}
  .uitlegkaart .uitleg-stappen{margin:0 0 11px; padding-left:20px; font-size:13.5px}
  .uitlegkaart .uitleg-stappen li{margin-bottom:8px}
  .uitslag-ok{color:var(--groen); font-weight:500}
  .uitslag-nee{color:#8c1f27; font-weight:500}

  /* ===== Schermen die GEEN dialoog zijn ================================================
     `paneel` hoort bij het uitschuifblad van een dialoog: 520 pixels breed, afgeronde bovenhoeken en
     een eigen schuifbalk. Drie schermen gebruikten die klasse terwijl ze gewoon in de pagina staan
     (reservering opzoeken, het slot op de inrichting, het wachtwoordscherm). Die stonden daardoor als
     een smalle witte kolom links, met een venster in een venster. Op 1280 breed gemeten op
     12 augustus 2026. `scherm` is de gewone breedte, met dezelfde binnenmarges als de rest. */
  .scherm{width:100%; max-width:760px}
  .scherm .sub{color:var(--muted); font-size:13px; margin:0 0 8px}
  .scherm .acties{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
  /* `doe` bestond alleen als `.mini.doe`. Een knop met alleen `doe` viel daardoor terug op de kale
     grijze systeemknop van de browser: dat stond zo op het opzoekscherm bij "Zoek op naam", naast een
     rode knop van hetzelfde belang. Gemeten op 390 en op 1280 breed op 12 augustus 2026. */
  .doe:not(.mini):not(.primair){background:#fff; color:var(--navy); border:1px solid var(--navy-70);
    padding:11px 16px; border-radius:10px; font-weight:600; font-size:14px}
  .doe:not(.mini):not(.primair):hover{border-color:var(--navy); background:var(--navy-05)}
  .doe:not(.mini):not(.primair):disabled{opacity:.4; cursor:not-allowed}
  /* Binnen een knoppenrij hoort de rode knop niet de volle breedte te pakken; `primair` is gemaakt
     voor de afsluitknop onder in een dialoogblad. */
  .scherm .acties .primair{width:auto; margin-top:0}
  /* `.leeg` heeft een linkermarge van 57 pixels: die is bedoeld om op de tee sheet onder de tijdkolom
     uit te komen. In een gewoon scherm hangt de melding daardoor scheef onder de knop. */
  .scherm .leeg{margin-left:0; margin-top:12px; padding:10px 12px; background:var(--navy-05);
    border-radius:9px}
  /* De twee manieren van zoeken zijn twee dingen, en stonden zonder scheiding onder elkaar. */
  .zoekwissel{margin-top:18px; padding-top:14px; border-top:1px solid var(--lijn);
    font-size:12.5px; color:var(--muted)}

  /* Een label met zijn waarde ernaast. Dit stond op `rij`, en die klasse geeft elk kind `flex:1`,
     bedoeld voor invoervelden naast elkaar. Label en waarde pakten daardoor elk de halve breedte en
     kwamen op verschillende hoogtes uit. */
  .gegevens{border-top:1px solid var(--lijn); margin-top:12px; padding-top:4px}
  .gegeven{display:flex; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid var(--lijn)}
  .gegeven:last-child{border-bottom:0}
  .gegeven-naam{flex:0 0 130px; color:var(--muted); font-size:12.5px}
  .gegeven .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; font-weight:700}

  /* Een treffer in de naamzoeker. Vier vaste kolommen, zodat het boekingsnummer niet midden in de
     knop over twee regels breekt en de knoppen even breed zijn. */
  .treffer{display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
    background:#fff; border:1px solid var(--lijn); border-radius:10px; padding:10px 12px; margin-bottom:7px}
  .treffer:hover{border-color:var(--navy-70)}
  .treffer-naam{flex:1 1 auto; font-weight:700}
  .treffer-ref{flex:0 0 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.06em; color:var(--muted); font-size:12.5px}
  .treffer-wanneer{flex:0 0 auto; color:var(--muted); font-size:12.5px}
  .treffer-stand{flex:0 0 90px; text-align:right; font-size:12.5px}
  @media (max-width:560px){
    .treffer{flex-wrap:wrap; gap:4px 10px}
    .treffer-naam{flex:1 1 100%}
    .treffer-stand{flex:0 0 auto; text-align:left}
    .gegeven-naam{flex:0 0 105px}
  }

  /* ===== Tee sheet in Daniels vormtaal, 22 augustus 2026 ================================
     Nabouw van drie screenshots (klanten/up-events/daniel-layout-20260821/), alleen voor de
     tee sheet. Vier onderdelen: een sectiekop met rood streepje en aqua onderschrift, een
     kaart met een dikke navy rand en een verschoven kleurvlak erachter als schaduw, een
     legenda op spelerscategorie in plaats van op sport, en gekleurde bolletjes/chips die
     diezelfde categorie dragen. Alle kleuren komen uit up-tokens.css, er is niets nieuws
     verzonnen en het bestand zelf is niet aangeraakt: dat is de gedeelde tokenfile voor alle
     zes UP-sites en hoort niet vanuit een enkel scherm gewijzigd te worden. */
  .sectiekop{display:flex; align-items:baseline; gap:12px; margin:2px 0 14px;
    border-left:4px solid var(--up-brand-rood); padding-left:12px}
  .sectiekop-titel{font-weight:900; font-size:26px; letter-spacing:-.01em; text-transform:uppercase;
    color:var(--up-navy); line-height:1}
  .sectiekop-sub{font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--up-aqua)}

  /* De kaart met dikke rand en verschoven kleurvlak erachter. `--t-schaduw` is de kleur van dat
     vlak en staat op één plek (hier), zodat een andere kaart later een andere tint kan krijgen
     zonder de opmaak te herhalen. Op de tee sheet is dat navy, zoals in screenshot 02. */
  .t-kaart{position:relative; margin-bottom:4px}
  .t-kaart::before{content:""; position:absolute; inset:6px -6px -6px 6px; z-index:0;
    background:var(--t-schaduw, var(--up-navy)); border-radius:var(--up-radius-card)}
  .t-kaart>.blad{position:relative; z-index:1; border:2px solid var(--up-navy)}

  /* ===== Legenda op spelerscategorie (was: sport) =======================================
     DE ENE PLEK voor deze keuze staat in schermen-dag.jsx, in de const CATEGORIE_KLEUR. Deze
     CSS-klassen (cat-los, cat-strip, cat-abo) volgen die keuze, ze bepalen hem niet. Terugzetten
     naar kleur per sport is dus een wijziging van CATEGORIE_KLEUR plus deze drie regels, geen
     herbouw. */
  .legenda{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px; padding:10px 13px;
    background:var(--panel); border:1px solid var(--lijn); border-radius:10px}
  .legenda-item{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--navy)}
  .legenda-swatch{width:12px; height:12px; border-radius:3px; flex:0 0 auto}
  .legenda-swatch.cat-los{background:var(--up-aqua)}
  .legenda-swatch.cat-strip{background:var(--up-brand-rood)}
  .legenda-swatch.cat-abo{background:var(--up-navy)}
  .legenda-swatch.cat-vrij{background:var(--up-brand-licht); border:1px solid var(--lijn)}

  /* Bolletjes (kleine capaciteit, golf) gekleurd per categorie van de speler die er staat. Een
     onbezet bolletje blijft de VRIJ-kleur: lichtblauw met een dun randje, zoals in screenshot 02. */
  .peg{background:var(--up-brand-licht)}
  .peg.cat-los{background:var(--up-aqua); border-color:var(--up-aqua)}
  .peg.cat-strip{background:var(--up-brand-rood); border-color:var(--up-brand-rood)}
  .peg.cat-abo{background:var(--up-navy); border-color:var(--up-navy)}
  .peg.dicht{background:var(--navy-70); border-color:var(--navy-70)}

  /* Spelerchip: een linkerrandje in de categoriekleur, los van de ingecheckt-vulling. Vulling
     (aqua bij ingecheckt) bleef ongewijzigd, want die kleur betekent hier al iets anders
     (afgehandeld) en zou anders twee dingen tegelijk zeggen. */
  .speler{border-left-width:3px}
  .speler.cat-los{border-left-color:var(--up-aqua)}
  .speler.cat-strip{border-left-color:var(--up-brand-rood)}
  .speler.cat-abo{border-left-color:var(--up-navy)}
  .speler.in.cat-los,.speler.in.cat-strip,.speler.in.cat-abo{border-left-color:#fff}
  /* JEUGD is geen eigen legendakleur (staat niet in Daniels legenda), maar een klein
     tekstmerkje op de chip zelf, dezelfde plek als het bestaande type-label. */
  .jeugd-merk{font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--up-brand-rood); margin-left:3px}
  /* ======================================================================================== */

  /* ===== Vaste spelersvakken per starttijd, nabouw van T-Control, 22 augustus 2026 avond ===
     Bron: https://www.teecontrol.com/en, screenshots teecontrol-screen-0.png en -screen-3.png,
     zelf geopend en ingezoomd (zie de toelichting bij SpelerVakken in schermen-dag.jsx). Vorm
     overgenomen (vaste vakken, naam erin, leeg vak licht), kleur blijft onze eigen categorie. */
  /* Ook de vakkenrij zelf is de tweede klikplek om de detailkaart te openen (naast `row-klik`
     hierboven), vandaar cursor:pointer en een focusring: dit is functioneel een knop geworden. */
  .vakken{display:flex; flex-wrap:wrap; gap:5px; margin:9px 0 2px; cursor:pointer}
  .vakken:focus-visible{outline:2px solid var(--aqua); outline-offset:2px; border-radius:6px}
  .vak{flex:1 1 92px; min-width:76px; max-width:160px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; gap:4px; padding:0 9px;
    font-size:12.5px; font-weight:600; overflow:hidden}
  .vak-naam{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .vak-vink{flex:0 0 auto}
  .vak.vrij{background:var(--up-brand-licht); color:var(--navy); font-weight:500;
    border:1px solid var(--lijn)}
  .vak.dicht{background:var(--navy-05); border:1px dashed var(--lijn); color:var(--muted); font-weight:500}
  .vak.cat-los{background:var(--up-aqua); color:#fff}
  .vak.cat-strip{background:var(--up-brand-rood); color:#fff}
  .vak.cat-abo{background:var(--up-navy); color:#fff}
  /* ======================================================================================== */

  @media (min-width:560px){ .scrim{align-items:center} .paneel{border-radius:16px} }
  @media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ===== Kiosk-modus (aanmelden aan de bar) ================================================
   Eigen, nieuwe klassen, niets bestaands aangepast. Groot en leesbaar op afstand: dit scherm
   staat op een tablet aan de bar, niet in iemands hand. UP-rood voor de hoofdknop, navy voor
   de rest, dezelfde tokens als de rest van de balie. */
.kiosk{ min-height:100vh; background:var(--up-navy,var(--navy)); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:32px 20px; position:relative; }
.kiosk-midden{ width:100%; max-width:520px; }
.kiosk-kaart{ background:#fff; border-radius:20px; padding:40px 32px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35); }
.kiosk-kop{ font-size:28px; font-weight:900; letter-spacing:-.02em; color:var(--navy); margin:0 0 12px; }
.kiosk-bij{ font-size:17px; color:var(--muted); line-height:1.5; margin:0 0 22px; }
.kiosk-invoer{ width:100%; font-size:26px; text-align:center; letter-spacing:.06em; padding:18px;
  border:2px solid var(--lijn); border-radius:14px; margin-bottom:20px; text-transform:uppercase; }
.kiosk-invoer:focus{ outline:none; border-color:var(--red); }
.kiosk-knop{ width:100%; font-size:19px; font-weight:700; padding:18px; border-radius:14px;
  border:2px solid var(--navy-70); background:#fff; color:var(--navy); margin-top:12px; }
.kiosk-knop:first-of-type{ margin-top:0; }
.kiosk-knop.kiosk-primair{ background:var(--red); color:#fff; border-color:var(--red); }
.kiosk-knop.kiosk-primair:hover{ background:#e63944; }
.kiosk-knop:disabled{ opacity:.4; cursor:not-allowed; }
.kiosk-fout{ background:var(--red-dim); color:#8c1f27; border-radius:10px; padding:12px 14px;
  font-size:15px; margin-bottom:16px; }
.kiosk-gegevens{ text-align:left; margin-bottom:20px; }
.kiosk-gegeven{ display:flex; justify-content:space-between; align-items:baseline; font-size:18px;
  padding:10px 0; border-bottom:1px solid var(--lijn-zacht); }
.kiosk-gegeven span{ color:var(--muted); }
.kiosk-gegeven strong{ font-size:20px; }

/* Alleen voor het personeel: klein, onderin de kiosk, niet nadrukkelijk. Dit scherm hoeft niet
   honderd procent dichtgetimmerd te zijn (werklijst-punt 5), het moet alleen niet per ongeluk
   door een gast opengeklikt worden. */
.kiosk-terugknop{ position:absolute; right:18px; bottom:16px; background:transparent; color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:8px 14px; font-size:13px; }
.kiosk-terugknop:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
.kiosk-terug-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; }
.kiosk-terug-paneel{ position:fixed; right:18px; bottom:60px; z-index:41; background:#fff; border-radius:14px;
  padding:20px; width:260px; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.kiosk-terug-invoer{ width:100%; font-size:16px; padding:10px 12px; border:1px solid var(--lijn);
  border-radius:8px; margin:10px 0; }
.kiosk-terug-acties{ display:flex; gap:8px; }
.kiosk-terug-acties .kiosk-knop{ font-size:14px; padding:10px; margin-top:0; }

/* ===== Clubhuisscherm (tee sheet op een tv) ==============================================
   Toegevoegd 24 augustus 2026 naar aanleiding van Daniels punt "een duidelijk tee sheet die we
   kunnen draaien in cluphuis". Alles hieronder staat onder .clubhuis, dus geen enkele bestaande
   klasse verandert van betekenis. Dat is met opzet: .balk is in de gastvoorkant op de ene pagina
   de onderbalk en op de andere de kop, en precies zulke dubbele betekenissen wil je hier niet.
   Vormtaal uit Daniels screenshot 02 (tee sheet met legenda): navy vlak, rood streepje voor de
   kop, aqua onderschrift in kleine hoofdletters, scherpe hoeken, dikke randen.
   Maatvoering is gemikt op 1920x1080; onder 1600 pixels breed gaat alles naast de naam een maat
   kleiner, zodat het op 1280 nog klopt. Twee kolommen blijven het vanaf 1280 breed.
   Of dit op drie tot vijf meter afstand leesbaar is, is NIET vastgesteld: dat kan alleen op de echte
   tv in het clubhuis. Wat hier staat zijn pixelmaten, geen leesbaarheidsoordeel. */
/* Padding en regelafstand zijn NAGEMETEN en geen smaak: op 1920x1080 was de pagina eerst 1091
   pixels hoog, dus elf pixels te lang, en dat is precies genoeg voor een schuifbalk op een tv waar
   niemand bij kan. Nu past het blad binnen 1080. */
.clubhuis{min-height:100vh; background:var(--navy); color:#fff; padding:14px 20px 10px}
.clubhuis-kop{display:flex; align-items:center; gap:26px; border-bottom:4px solid var(--red);
  padding-bottom:12px; margin-bottom:14px}
.clubhuis-merk{display:flex; align-items:center; gap:12px}
.clubhuis-up{font-weight:900; font-size:40px; letter-spacing:-.03em; color:var(--red); line-height:1}
.clubhuis-streep{width:2px; height:38px; background:rgba(255,255,255,.35)}
.clubhuis-merktekst{display:flex; flex-direction:column}
.clubhuis-naam{font-weight:900; font-size:20px; text-transform:uppercase; letter-spacing:.02em}
.clubhuis-sub{font-weight:700; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--aqua)}
/* Kop-opbouw overgenomen uit Daniels eigen ontwerp (daniel-layout-20260821/02-tee-sheet-met-legenda
   .jpeg, zelf geopend): zware kop in kapitalen met het rode streepje links, en ERONDER een kleine
   subregel in aqua. Bij Daniel staat daar de vestigingsnaam; hier staat de datum, want de
   vestigingsnaam staat op dit scherm al links in het logo en de datum is op een scherm dat de hele
   dag doordraait het enige wat een kijker echt moet kunnen controleren. */
.clubhuis-titel{flex:1; display:flex; flex-direction:column; gap:5px; border-left:8px solid var(--red);
  padding-left:16px}
.clubhuis-titel-woord{font-weight:900; font-size:44px; line-height:1; text-transform:uppercase; letter-spacing:-.01em}
.clubhuis-datum{font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.22em; color:var(--aqua);
  line-height:1}
.clubhuis-klok{text-align:right}
.clubhuis-tijd{display:block; font-weight:900; font-size:52px; line-height:1; font-variant-numeric:tabular-nums}
.clubhuis-bijgewerkt{display:block; font-size:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#9fc0cf; margin-top:4px}

.clubhuis-balk{display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:14px}
.clubhuis-cijfers{display:flex; gap:26px; font-size:19px; color:#cfe0e8}
.clubhuis-cijfer b{font-size:26px; font-weight:900; color:#fff; margin-right:7px}
/* WAAROM DE LEGENDA HIER STAAT EN NIET IN HET BLAD. Bij Daniel zit de legenda binnen het omkaderde
   kaartvlak, rechtsboven naast het datumveld. Dat kan daar omdat zijn tee sheet EEN blad met EEN kop
   is. Dit scherm zet de starttijden in twee kolommen naast elkaar en heeft dus geen kaartkop om een
   legenda in te hangen; in het blad zou hij in een van beide kolommen belanden en dan lijkt hij bij
   die kolom te horen. Vandaar een eigen strook tussen de kop en het blad. Dit is een besluit van
   hoofd-activiteiten van 24 augustus 2026, geen vergeten detail: leg de twee naast elkaar en je ziet
   het verschil, en dit is de reden. */
.clubhuis-legenda{display:flex; gap:20px; font-size:15px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#cfe0e8}
.cl-item{display:flex; align-items:center; gap:9px}
.cl-swatch{width:20px; height:20px; display:inline-block; border:2px solid rgba(255,255,255,.25)}
.cl-swatch.st-aangemeld{background:#22C55E}
.cl-swatch.st-verwacht{background:#EEF4FB}
.cl-swatch.st-nietgemeld{background:#FEF3C7}
.cl-swatch.st-onbetaald{background:#F59E0B}
.cl-swatch.st-noshow{background:var(--red)}

.clubhuis-blad{column-gap:18px}
/* Twee kolommen vanaf 1280 breed. Onder die breedte hangt er geen tv maar staat er hooguit een
   tablet, en dan is een kolom leesbaarder dan twee halve. */
@media (min-width:1280px){ .clubhuis-blad{columns:2} }
.cl-rij{break-inside:avoid; display:flex; align-items:center; gap:16px; background:#fff; color:var(--navy);
  border:3px solid var(--navy); border-left-width:14px; box-shadow:6px 6px 0 rgba(0,0,0,.35);
  padding:9px 16px; margin:0 0 10px}
/* De tijdkolom heeft een VASTE breedte, geen min-width. Met alleen een min-width groeide de kolom mee
   met de tekst "Nu aan de beurt" eronder, en juist op die ene rij, waar de bar het meest naar kijkt,
   bleef er dan de minste ruimte over voor de naam. Nu wikkelt die tekst binnen de vaste breedte. */
/* De breedte is precies zo gekozen dat "Nu aan de beurt" er op EEN regel in past. Doet hij dat niet,
   dan wordt die ene rij hoger dan de rest, en omdat de hoogste rij bepaalt hoeveel rijen er op het
   scherm passen kost een tweede regel daar meteen vier boekingen onderaan het scherm. Nagemeten. */
.cl-tijd{font-weight:900; font-size:36px; line-height:1.05; font-variant-numeric:tabular-nums;
  flex:0 0 auto; width:146px}
.cl-nu{display:block; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); white-space:normal; line-height:1.2}
.cl-naam{flex:1 1 auto; min-width:0}
/* NAMEN WORDEN NIET AFGEKAPT. Hier stond eerder white-space:nowrap met text-overflow:ellipsis, en dat
   was fout: op 1280 breed stond "Bedrijfsuitje Kroonenberg" in beeld als "Bedrijfsuitje Kroone…" en op
   de rij met Nu aan de beurt zelfs als "Bedrijfsuitje Kro…" (nagemeten op de schermafbeelding van
   24 augustus 2026, niet op het oog). Op een scherm aan de muur klikt niemand door om de rest te
   zien, dus een halve naam is geen cosmetisch detail maar het scherm dat zijn werk niet doet.
   Wat er nu gebeurt: de naam wikkelt over meer regels, en boven een tekenlengte zakt de letter een
   stap in maat zodat het aantal regels beperkt blijft. Die maatstap wordt in clubhuis.jsx gezet op
   basis van het aantal tekens (cl-lang, cl-xlang), want CSS kan zelf niet meten hoe lang een naam is. */
.cl-contact{display:block; font-weight:700; font-size:27px; line-height:1.15;
  overflow-wrap:break-word; word-break:normal}
.cl-contact.cl-lang{font-size:23px}
.cl-contact.cl-xlang{font-size:20px; line-height:1.1}
.cl-sport{display:block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted)}
.cl-aantal{font-weight:900; font-size:34px; line-height:1; text-align:center; min-width:74px}
.cl-aantal-woord{display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.cl-stand{min-width:230px; text-align:center; font-weight:900; font-size:19px; letter-spacing:.06em;
  text-transform:uppercase; padding:9px 12px; border:3px solid var(--navy)}

/* De kleur zit op de dikke linkerrand EN op het standvak, en het WOORD staat er altijd bij. Wie
   kleuren slecht onderscheidt leest dus nog steeds wat er aan de hand is. */
.cl-rij.st-aangemeld{border-left-color:#15803d}
.cl-rij.st-aangemeld .cl-stand{background:#15803d; color:#fff; border-color:#15803d}
.cl-rij.st-deels{border-left-color:#15803d}
.cl-rij.st-deels .cl-stand{background:#e7f6ec; color:#15803d; border-color:#15803d}
.cl-rij.st-verwacht{border-left-color:var(--navy)}
.cl-rij.st-verwacht .cl-stand{background:#eef4fb; color:var(--navy)}
.cl-rij.st-onbetaald{border-left-color:#b45309}
.cl-rij.st-onbetaald .cl-stand{background:#f59e0b; color:#3d2600; border-color:#b45309}
.cl-rij.st-nietgemeld{border-left-color:#b45309}
.cl-rij.st-nietgemeld .cl-stand{background:#fef3c7; color:#b45309; border-color:#b45309}
.cl-rij.st-noshow{border-left-color:var(--red)}
.cl-rij.st-noshow .cl-stand{background:var(--red); color:#fff; border-color:var(--red)}

/* Wat geweest is zakt naar de achtergrond, wat eraan komt springt eruit. Niet weghalen: de bar wil
   nog kunnen zien wie er vanochtend geweest is. */
.cl-rij.voorbij{opacity:.45}
.cl-rij.anker{opacity:1; border-color:var(--red); box-shadow:6px 6px 0 rgba(254,66,77,.55)}

/* Onder 1600 pixels breed staan er nog steeds twee kolommen, maar dan van zo'n 610 pixels. Alles wat
   naast de naam staat levert hier ruimte in, want de naam is waar de bar naar kijkt.
   LET OP wat hier WEL en NIET gemeten is. Deze maten zijn nagemeten op 1280x800 in de browser met de
   demodag van 27 augustus als invoer, inclusief de langste naam die daar in staat ("Bedrijfsuitje
   Kroonenberg", 25 tekens) en een langere stresstestnaam. Wat NIET is vastgesteld: of dit op de
   echte tv in het clubhuis leesbaar is op drie tot vijf meter. Dat kan alleen op dat toestel zelf,
   en die proef doet Roy. Een eerdere versie van dit commentaar beweerde dat het afkap-probleem hier
   al opgelost was; dat gold alleen voor korte namen als "Dirk Nagel" en het klopte dus niet. */
@media (max-width:1599px){
  .cl-tijd{font-size:29px; width:106px}
  .cl-nu{font-size:10px; letter-spacing:.01em}
  .cl-contact{font-size:22px}
  .cl-contact.cl-lang{font-size:19px}
  .cl-contact.cl-xlang{font-size:17px}
  .cl-aantal{font-size:27px; min-width:50px}
  .cl-stand{min-width:148px; font-size:15px; padding:7px 6px; letter-spacing:.03em}
  .cl-rij{gap:10px; padding:8px 10px}
  .clubhuis-titel-woord{font-size:36px}
  .clubhuis-datum{font-size:14px; letter-spacing:.18em}
  .clubhuis-tijd{font-size:44px}
}

.clubhuis-storing{background:var(--red); color:#fff; font-weight:700; font-size:19px;
  padding:12px 16px; margin-bottom:12px; border:3px solid #fff}
.clubhuis-leeg{font-size:24px; font-weight:700; color:#cfe0e8; padding:40px 0}
.clubhuis-voet{margin-top:6px; font-size:15px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#9fc0cf}

/* ===== De tee sheet in de vormtaal van het clubhuisscherm ==================================
   Roy, 26 augustus 2026: "kunnen we dat clubhuisscherm ook hebben als tee sheet, qua lay-out".
   Overgenomen zijn de drie dingen die dat scherm snel leesbaar maken: elke starttijd is een KAART
   met een dikke gekleurde kop aan de linkerkant, de tijd staat groot en in tabelcijfers zodat de
   kolom niet danst, en rechts staat een statuswoord in plaats van een kleur die je moet onthouden.
   Niet overgenomen is de maat: aan de muur is 36px tijd goed, achter de balie passen er dan zes
   starttijden op het scherm terwijl er negenenvijftig zijn. Hier is het 22px.
   Wat NIET verandert: de spelersvakken, de boekknoppen en de detailkaart eronder. Dit is opmaak. */
  .blad .row.tsl{background:#fff; border:2px solid var(--navy); border-left-width:10px;
    box-shadow:4px 4px 0 rgba(0,45,65,.18); border-radius:2px;
    padding:9px 12px; margin:0 0 9px; border-bottom:2px solid var(--navy)}
  .blad .row.tsl:last-child{margin-bottom:0}
  .blad .row.tsl .time{font-weight:900; font-size:22px; line-height:1.05;
    font-variant-numeric:tabular-nums; flex:0 0 auto; width:74px}
  /* Het statuswoord. Staat rechts in de klikbare doos, dus vóór de knoppen, want het hoort bij de
     reservering en niet bij de handeling. `margin-left:auto` duwt hem naar rechts zodat hij op elke
     rij op dezelfde plek staat, ook als de naam kort is. */
  .ts-stand{margin-left:auto; flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; padding:4px 9px; border:2px solid transparent; border-radius:3px;
    white-space:nowrap}
  .blad .row.tsl.st-aangemeld{border-left-color:#15803d}
  .ts-stand.st-aangemeld{background:#15803d; color:#fff; border-color:#15803d}
  .blad .row.tsl.st-deels{border-left-color:#15803d}
  .ts-stand.st-deels{background:#e7f6ec; color:#15803d; border-color:#15803d}
  .blad .row.tsl.st-verwacht{border-left-color:var(--navy)}
  .ts-stand.st-verwacht{background:#eef4fb; color:var(--navy); border-color:var(--navy)}
  .blad .row.tsl.st-onbetaald{border-left-color:#b45309}
  .ts-stand.st-onbetaald{background:#f59e0b; color:#3d2600; border-color:#b45309}
  .blad .row.tsl.st-nietgemeld{border-left-color:#b45309}
  .ts-stand.st-nietgemeld{background:#fef3c7; color:#b45309; border-color:#b45309}
  .blad .row.tsl.st-noshow{border-left-color:var(--red)}
  .ts-stand.st-noshow{background:var(--red); color:#fff; border-color:var(--red)}
  /* Een lege starttijd is GEEN volle kaart: geen schaduw, geen dikke rand, geen statuswoord. Anders
     zou een dag met vijf boekingen en vierenvijftig vrije tijden bestaan uit vierenvijftig lege dozen
     met een schaduw, en dat leest slechter dan een lijst. Wel dezelfde maten en dezelfde marge, want
     anders staat de ene helft van het blad in een ander ritme dan de andere.
     Zichtbaar verschil: geboekt springt naar voren, vrij ligt plat. Dat is precies wat de balie wil
     zien als hij het blad afloopt op zoek naar wie er nog moet komen. */
  .blad .row:not(.tsl){background:transparent; border:1px solid var(--lijn-zacht); border-left-width:10px;
    border-left-color:var(--lijn-zacht); border-radius:2px; padding:9px 12px; margin:0 0 9px;
    box-shadow:none}
  /* De sportstreep aan de linkerkant gaat weg, op ALLE rijen. Reden: die streep was rood bij voetgolf
     en donkerblauw bij golf, en in deze opmaak is de linkerkant van een rij de STAND geworden, waar
     rood no-show betekent. Twee betekenissen op dezelfde plek is precies het soort ding waar iemand
     achter de balie op afknapt. De sport staat trouwens al als label in de rij zelf. */
  .blad .row.rij-golf, .blad .row.rij-voetgolf{box-shadow:none}
  /* Het woord "Vrij" bij een lege voetgolfrij is weg. Het stond op een eigen regel onder de rij te
     zweven zodra de rijen kaarten werden, en het zei niets nieuws: de balk ernaast zegt al "0 van de
     40". Bij golf stond het al niet meer, want daar staan vier vakken met "Vrij" erin. */
  .blad .row .leeg{display:none}
  .blad .row:not(.tsl) .time{font-weight:800; font-size:19px; line-height:1.05;
    font-variant-numeric:tabular-nums; flex:0 0 auto; width:74px; color:var(--sub, var(--muted))}

/* ===== Uitlegblok per scherm (27 augustus 2026) ============================================
   Daniels vraag bij Tarieven ("waar komt de prio vandaan?") liet zien dat de schermen uitleg
   missen voor wie er voor het eerst in werkt. Dichtgeklapt is het een regel met een
   vraagteken; opengeklapt gewone taal, geen jargon. */
  .uitlegblok{margin:0 0 12px}
  .uitleg-knop{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--lijn-zacht);
    background:#fff; color:var(--sub, var(--muted)); font-size:13px; padding:6px 12px 6px 8px;
    border-radius:16px; cursor:pointer}
  .uitleg-knop:hover{border-color:var(--navy); color:var(--navy)}
  .uitleg-tekst{border:1px solid var(--lijn-zacht); border-radius:8px; background:#fff;
    padding:4px 16px; margin-top:8px; max-width:760px}
  .uitleg-tekst p{font-size:13.5px; line-height:1.55; margin:10px 0}