/* Huisstijl HYROX
   ===============
   Zwart met geel, donker als standaard. Dezelfde waarden als het
   partnerplatform van HYROX Benelux, zodat de twee naast elkaar niet uit de
   toon vallen.

   Dit is bewust niet de huisstijl van de organisatie die het platform draait,
   terwijl §3 van docs/NIEUWE-TOOL.md die verplicht stelt. De mensen die hier
   inloggen zijn crew, freelancers en mensen van partijen die voor HYROX komen
   werken; zij kennen die organisatie niet, en een portaal dat een naam draagt
   die de ontvanger niet herkent leest als een verkeerd bezorgde mail. De
   afweging staat voluit in het README, dat niet wordt uitgeserveerd.

   Het merk zit op twee plekken: dit tokenblok, en MERKNAAM/MERKTEKEN bovenin
   app/index.html. Voor het schaatsseizoen verander je die twee en verder niets;
   zie docs/schaatsen.md.

   De kleurregel die hier telt: geel leest niet op wit. Voor vlakken en randen
   is --accent altijd het HYROX-geel, met bijna-zwarte tekst erop (17:1, in
   beide weergaven). Voor tekst en iconen is er --accent-tekst, dat in de
   lichte weergave donker wordt (#6F6400 op wit is 6,5:1). Zet nooit --accent
   op een lichte achtergrond als tekst.

   Kleuren staan uitsluitend hier, als variabele. Een losse hex in een component
   blijft bij de volgende huisstijlwijziging staan. */

:root {
  --achtergrond: #000000;
  --vlak:        #0D0D0F;
  --vlak-2:      #141417;
  --tekst:       #FFFFFF;
  --gedempt:     #8D8D95;
  --nav-tekst:   #D5D5DA;
  --lijn:        #26262A;
  --lijn-zacht:  #1B1B1E;
  --lijn-sterk:  #45454C;

  /* Het HYROX-geel. Vlak en tekst zijn twee tokens en geen één; zie de kop. */
  --accent:       #FFED00;
  --accent-op:    #000000;
  --accent-tekst: #FFED00;
  --accent-zacht: rgba(255, 237, 0, .10);

  --goed:        #3FB950;
  --slecht:      #F0503A;
  --let-op:      #E3A008;
  --goed-vlak:   rgba(63, 185, 80, .16);
  --goed-tekst:  #7EE787;
  --slecht-vlak: rgba(240, 80, 58, .16);
  --slecht-tekst:#FFB4A8;
  --let-op-vlak: rgba(227, 160, 8, .16);
  --let-op-tekst:#F5C451;

  --schaduw:     rgba(0, 0, 0, .6);
  --nav-breedte: 250px;
  --rond:        10px;

  /* Brutal Type is de letter van HYROX en is niet vrij te verspreiden; zonder
     dat bestand valt de pagina terug op Helvetica Neue en blijft alles
     leesbaar. Zie app/lettertype/LEESMIJ.md. */
  --font: "Brutal Type", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* De vaste grafiekvolgorde. Reeks 1 is het merkgeel. Betekenis zit nooit
     alleen in de kleur; overal waar deze gebruikt worden staat tekst bij. */
  --reeks-1: #FFED00;
  --reeks-2: #3B82F6;
  --reeks-3: #2DD4BF;
  --reeks-4: #C084FC;
}

:root[data-thema="licht"] {
  --achtergrond: #F4F4F6;
  --vlak:        #FFFFFF;
  --vlak-2:      #F0F0F3;
  --tekst:       #0B0B0D;
  --gedempt:     #63636C;
  --nav-tekst:   #2C2C33;
  --lijn:        #D7D7DD;
  --lijn-zacht:  #E7E7EC;
  --lijn-sterk:  #B6B6BF;

  /* Het vlak blijft geel met zwarte tekst — dat is het merk en dat hoort niet
     mee te veranderen met de voorkeur van de kijker. Alleen accenttekst wordt
     donker, want geel op wit is onleesbaar. */
  --accent-tekst: #6F6400;
  --accent-zacht: #FFFBDB;

  --goed:        #1B7B33;
  --slecht:      #C0341F;
  --let-op:      #8A6100;
  --goed-vlak:   #DCF3E1;
  --goed-tekst:  #12622A;
  --slecht-vlak: #FCE8E4;
  --slecht-tekst:#8F2313;
  --let-op-vlak: #FDF3D0;
  --let-op-tekst:#6F4E00;

  --schaduw:     rgba(0, 0, 0, .18);

  --reeks-2: #1D4ED8;
  --reeks-3: #0D9488;
  --reeks-4: #7C3AED;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: 24px; }
h2 { font-size: 17px; margin: 30px 0 12px; }
h3 { font-size: 15px; }
a { color: inherit; }
p { margin: 8px 0; }

.gedempt { color: var(--gedempt); }
.klein { font-size: 13px; }
.inleiding { color: var(--gedempt); font-size: 13px; margin-top: 6px; max-width: 68ch; }
.rechts { text-align: right; }
.rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rij.uiteen { justify-content: space-between; }

/* --- knoppen en velden ---------------------------------------------------- */

button {
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  border: 0; border-radius: var(--rond); padding: 11px 17px;
  background: var(--accent); color: var(--accent-op);
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button.stil {
  background: transparent; color: var(--nav-tekst); border: 1px solid var(--lijn);
  font-weight: 400; font-size: 13px; padding: 8px 13px;
}
button.stil:hover { border-color: var(--accent); color: var(--tekst); filter: none; }
button.mini { padding: 5px 10px; font-size: 12px; }
button.gevaar { color: var(--slecht); }
button.gevaar:hover { border-color: var(--slecht); }
button.breed { width: 100%; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=tel], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--rond);
  border: 1px solid var(--lijn); background: var(--vlak-2); color: var(--tekst);
  font-family: var(--font); font-size: 15px;
}
textarea { resize: vertical; min-height: 74px; }
input[readonly], input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
label { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 5px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.velden.smal { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --- het merk ------------------------------------------------------------- */

.merk { display: flex; align-items: center; gap: 10px; }
.merk b { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
/* De gele streep uit het partnerplatform: klein, links, en altijd het merkgeel. */
.streep { width: 32px; height: 3px; background: var(--accent); flex: 0 0 auto; }
.merkteken { width: 34px; flex: 0 0 auto; color: var(--accent); line-height: 0; }
.merkteken svg { width: 100%; height: auto; display: block; }

/* --- inlogscherm ---------------------------------------------------------- */

.midden { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kaart {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 30px; width: 100%; max-width: 440px;
}

.melding {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--rond); font-size: 14px;
  border: 1px solid var(--lijn); background: var(--vlak-2);
}
.melding.fout { border-color: var(--slecht); background: var(--slecht-vlak); color: var(--slecht-tekst); }
.melding.goed { border-color: var(--goed); background: var(--goed-vlak); color: var(--goed-tekst); }
/* Voor een toestand die niet fout is maar wel opvalt: je bent op andermans naam
   aan het werk. Rood zou "er is iets misgegaan" zeggen, en dat is het niet. */
.melding.let-op { border-color: var(--let-op); background: var(--let-op-vlak); color: var(--let-op-tekst); }

/* --- indeling ------------------------------------------------------------- */

.raam { display: grid; grid-template-columns: var(--nav-breedte) 1fr; min-height: 100vh; }
nav.zij {
  background: var(--vlak); border-right: 1px solid var(--lijn); padding: 20px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
nav.zij .kop { padding: 0 20px 18px; border-bottom: 1px solid var(--lijn-zacht); margin-bottom: 12px; }
nav.zij .groep {
  padding: 15px 20px 5px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gedempt);
}
nav.zij a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 20px; color: var(--nav-tekst); text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
}
nav.zij a:hover { background: var(--vlak-2); color: var(--tekst); }
nav.zij a.aan {
  border-left-color: var(--accent); background: var(--vlak-2);
  color: var(--tekst); font-weight: 700;
}
nav.zij a .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
nav.zij a .aantal {
  font-size: 11px; font-weight: 700; background: var(--vlak-2); color: var(--gedempt);
  border-radius: 99px; padding: 1px 7px;
}

main { padding: 26px 32px 70px; max-width: 1180px; }
header.balk {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 32px; border-bottom: 1px solid var(--lijn); position: sticky; top: 0;
  background: var(--achtergrond); z-index: 5; flex-wrap: wrap;
}

/* --- suggesties -----------------------------------------------------------
   De knop staat onderaan de zijbalk (margin-top:auto in een flexkolom) en niet
   tussen de menu-items: het is geen scherm van het platform maar een opmerking
   óver het platform. Een stippellijn in plaats van een gevulde knop, want hij
   hoort beschikbaar te zijn zonder om aandacht te vragen. */

nav.zij .suggestie {
  margin: auto 14px 4px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; background: transparent; border: 1px dashed var(--lijn-sterk);
  color: var(--nav-tekst); font-size: 13.5px; font-weight: 400; padding: 9px 13px;
}
nav.zij .suggestie:hover { border-color: var(--accent); color: var(--tekst); filter: none; }
nav.zij .suggestie .aantal {
  font-size: 11px; font-weight: 700; background: var(--vlak-2); color: var(--gedempt);
  border-radius: 99px; padding: 1px 7px;
}

.suggestielijst { display: flex; flex-direction: column; gap: 10px; }
.suggestieregel {
  border: 1px solid var(--lijn); border-left: 3px solid var(--lijn-sterk);
  border-radius: 12px; background: var(--vlak-2); padding: 12px 14px;
}
.suggestieregel.van-mij { border-left-color: var(--accent); }
.suggestieregel p { font-size: 14px; margin: 6px 0 9px; white-space: pre-wrap; }
.suggestieregel .antwoord {
  margin-top: 9px; padding-left: 11px; border-left: 2px solid var(--lijn-sterk);
  font-size: 13.5px; color: var(--gedempt); white-space: pre-wrap;
}

/* --- tegels --------------------------------------------------------------- */

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; }
.tegel .kop { font-size: 12px; color: var(--gedempt); }
.tegel .getal { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tegel .bij { font-size: 12px; color: var(--gedempt); margin-top: 4px; }
.tegel.let-op { border-left: 3px solid var(--accent); }

/* --- eventblokken --------------------------------------------------------- */

.blokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 18px; }
.blok {
  display: flex; flex-direction: column; background: var(--vlak);
  border: 1px solid var(--lijn); border-left: 3px solid var(--lijn-sterk);
  border-radius: 12px; padding: 17px 19px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.blok:hover { border-color: var(--accent); transform: translateY(-2px); }
.blok.open { border-left-color: var(--accent); }
.blok.klaar { border-left-color: var(--goed); }
.blok .plaats { font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.blok .wanneer { font-size: 13px; color: var(--gedempt); margin-top: 2px; }
.blok .onder { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- merktekens ----------------------------------------------------------- */

.vlag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--vlak-2); color: var(--gedempt);
}
.vlag.goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.vlag.let-op { background: var(--let-op-vlak); color: var(--let-op-tekst); }
.vlag.slecht { background: var(--slecht-vlak); color: var(--slecht-tekst); }
.vlag.merk { background: var(--accent-zacht); color: var(--accent-tekst); }

/* --- tabellen ------------------------------------------------------------- */

.tabelrand { border: 1px solid var(--lijn); border-radius: 12px; overflow-x: auto; background: var(--vlak); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gedempt); font-weight: 700; white-space: nowrap;
  border-bottom-color: var(--lijn);
}
tr:last-child td { border-bottom: 0; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.getal { width: 1%; }
th.sorteer { cursor: pointer; user-select: none; }
th.sorteer:hover, th.sorteer.aan { color: var(--tekst); }
th .pijl { display: inline-block; width: 11px; color: var(--accent-tekst); }
tr.uit td { opacity: .5; }
td.nadruk { font-weight: 700; }

.balkje { height: 5px; border-radius: 99px; background: var(--vlak-2); overflow: hidden; min-width: 70px; }
.balkje i { display: block; height: 100%; background: var(--reeks-1); }

/* --- formulier voor de beschikbaarheid ------------------------------------- */
/* Dit is het scherm waar alles om draait, en het moet op een telefoon te doen
   zijn: iemand vult het in de trein in en niet achter een bureau. Vandaar
   blokken onder elkaar in plaats van een tabel. */

.blokrij { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dagblok { border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); overflow: hidden; }
.dagblok > .dagkop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--vlak-2); border-bottom: 1px solid var(--lijn);
  flex-wrap: wrap;
}
.dagblok > .dagkop b { font-size: 15px; }
.dagblok .inhoud { padding: 14px 16px; display: grid; gap: 12px; }

.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuze {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--lijn); border-radius: var(--rond); cursor: pointer;
  background: var(--achtergrond);
}
.keuze:hover { border-color: var(--lijn-sterk); }
.keuze.aan { border-color: var(--accent); background: var(--accent-zacht); }
.keuze input { margin-top: 2px; flex: 0 0 auto; }
.keuze .tekst { flex: 1; }
.keuze .tekst b { display: block; font-size: 14px; }
.keuze .tekst span { display: block; font-size: 12.5px; color: var(--gedempt); }
.keuze.vol { opacity: .75; }

/* Het rooster van een dag, als losse merktekens boven het invulveld. Bewust
   geen aanvinkbare lijst: de crew kiest geen shift meer, die geeft een venster
   op. Zie de toelichting bij `beschikbaarheid` in db/001-schema.sql. */
.shiftlijst { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

/* Het rooster van een dag op het planningsscherm: altijd zichtbaar, ook als er
   nog niemand beschikbaar is. Juist dan zet je het klaar. */
.shiftrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.shiftkaart {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  border: 1px solid var(--lijn); border-left: 3px solid var(--accent);
  border-radius: var(--rond); padding: 11px 13px; background: var(--achtergrond);
}
.shiftkaart.vol { border-left-color: var(--goed); }
.shiftkaart b { font-size: 14px; }

/* De vraag om een parkeerplaats. Bewust een blok met een rand eromheen en niet
   een regel in een lijstje: dit is een aanvraag, en dat hoort zo te voelen.
   Zie de toelichting bij `vervoer` in db/001-schema.sql. */
.aanvraag {
  border: 1px solid var(--let-op); background: var(--let-op-vlak);
  border-radius: var(--rond); padding: 13px 15px;
}
.aanvraag .kop { font-weight: 700; font-size: 14px; }
.aanvraag p { font-size: 13px; margin: 5px 0 10px; }

/* --- lege staten ----------------------------------------------------------
   Een scherm waar nog niets is, staat leeg met één eerlijke zin. Geen
   voorbeeldrijen, geen demoteams, geen verzonnen cijfers. Nepdata maakt
   onzichtbaar of een koppeling werkelijk werkt. */

.leeg {
  border: 1px dashed var(--lijn-sterk); border-radius: 12px; padding: 26px;
  background: var(--vlak); margin-top: 16px;
}
.leeg h3 { margin-bottom: 6px; }
.leeg p { color: var(--gedempt); font-size: 14px; margin: 0; max-width: 62ch; }
.leegregel { padding: 14px 16px; border: 1px dashed var(--lijn); border-radius: 12px; color: var(--gedempt); font-size: 14px; }

/* --- venster over het scherm ----------------------------------------------- */

.overlaag {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .74); animation: opdoemen .16s ease-out;
}
.venster {
  width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
  box-shadow: 0 24px 64px var(--schaduw);
  animation: omhoog .22s cubic-bezier(.2, .8, .3, 1);
}
.vensterkop {
  position: sticky; top: 0; z-index: 2; background: var(--vlak);
  border-radius: 13px 13px 0 0; border-bottom: 3px solid var(--accent);
  padding: 18px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.vensterinhoud { padding: 18px 22px 22px; }
.sluit { background: transparent; border: 0; color: var(--gedempt); font-size: 24px; line-height: 1; padding: 0 4px; }
.sluit:hover { color: var(--tekst); filter: none; }
body.vast { overflow: hidden; }
@keyframes opdoemen { from { opacity: 0; } to { opacity: 1; } }
@keyframes omhoog { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .overlaag, .venster { animation: none; } }

/* --- beheer of gebruiker ---------------------------------------------------
   Twee knoppen in één omhulsel, met een gele vulling op de kant waar je staat.
   Geen keuzelijst: bij twee mogelijkheden kost een keuzelijst een klik extra en
   verbergt hij welke van de twee actief is. */
.schakelaar { display: inline-flex; border: 1px solid var(--lijn); border-radius: var(--rond); overflow: hidden; }
.schakelaar button {
  background: transparent; color: var(--nav-tekst); border: 0; border-radius: 0;
  font-size: 13px; font-weight: 400; padding: 7px 13px;
}
.schakelaar button:hover { background: var(--vlak-2); color: var(--tekst); filter: none; }
.schakelaar button.aan { background: var(--accent); color: var(--accent-op); font-weight: 700; }
.schakelaar button.aan:hover { background: var(--accent); filter: brightness(1.08); }
.schakelaar button + button { border-left: 1px solid var(--lijn); }

/* --- weergave wisselen ----------------------------------------------------- */

button.thema {
  background: transparent; border: 1px solid var(--lijn); color: var(--nav-tekst);
  padding: 7px 10px; font-size: 14px; line-height: 1; border-radius: var(--rond);
}
button.thema:hover { border-color: var(--accent); color: var(--tekst); filter: none; }

/* --- ontwikkelpaneel, bestaat niet in productie ----------------------------- */

.lokaal {
  position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--vlak);
  border: 1px solid var(--accent); border-radius: 12px; padding: 14px; width: 280px;
  box-shadow: 0 10px 30px var(--schaduw);
}
.lokaal h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-tekst); margin-bottom: 9px; }
.lokaal .weg { position: absolute; top: 8px; right: 10px; color: var(--gedempt); background: none; border: 0; padding: 0; font-size: 17px; }
.lokaal-open { position: fixed; right: 16px; bottom: 16px; z-index: 20; }

@media (max-width: 900px) {
  .raam { grid-template-columns: 1fr; }
  nav.zij { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--lijn); }
  main { padding: 20px 16px 60px; }
  header.balk { padding: 12px 16px; }
}

@media print {
  nav.zij, header.balk, button, .lokaal, .lokaal-open { display: none !important; }
  .raam { display: block; }
  main { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
}