/* House of Sports — schaatspartnerplatform
 *
 * De huisstijl staat beschreven in Context/platform/huisstijl.md. Wat daar de
 * regel is, is hier de code:
 *
 *   * Zwarte balk bovenaan, daaronder een dunne vlamstreep, daaronder het
 *     werkvlak in gebroken wit met witte kaarten erop. Die kaarten komen omhoog
 *     zonder schaduw, doordat de grond eromheen niet wit is.
 *   * Merkoranje #FF5C01 met bijna-zwarte tekst haalt 6,27:1. Wit op oranje
 *     haalt 3,1:1 en dat is te weinig. Kleine tekst op oranje is hier dus altijd
 *     donker — dat is de enige harde regel uit de huisstijl.
 *   * Hanken Grotesk, zelf gehost. Van de bestanden bestaan 400, 600 en 700;
 *     vraag je om 800, dan verdikt de browser de letters zelf en dat oogt vies
 *     naast de echte snede. Er staat hieronder daarom nergens meer dan 700.
 */

@font-face { font-family:"Hanken Grotesk"; src:url("font/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Hanken Grotesk"; src:url("font/HankenGrotesk-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:"Hanken Grotesk"; src:url("font/HankenGrotesk-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap }

:root{
  --oranje:#FF5C01;
  --amber:#F8A815;
  --diep-oranje:#EB5E1E;
  --zwart:#0F0D0B;
  --grond:#F4F4F4;
  --grijs:#6B6763;

  --kaart:#FFFFFF;
  --lijn:#E3E1DE;
  --lijn-zacht:#EDEBE8;
  --lijn-sterk:#CFCCC8;
  --vlak:#FAF9F8;

  /* Toestandskleuren. Alle tekstwaarden halen ruim 4,5:1 op hun eigen vlak;
     de vlakken zelf zijn zo licht dat er zwarte tekst overheen kan als dat
     ergens beter uitkomt. */
  --goed:#1B7B33;      --goed-vlak:#E8F4EB;
  --aandacht:#8A5300;  --aandacht-vlak:#FDF1DA;
  --slecht:#B3311C;    --slecht-vlak:#FBE9E5;
  --bezig:#2F4A63;     --bezig-vlak:#EAF0F5;
  --stil:#5C5854;      --stil-vlak:#F0EEEC;

  --nav:262px;
  --font:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --rond:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--grond);color:var(--zwart);font-family:var(--font);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.25}
h1{font-size:26px}
h2{font-size:18px;margin:34px 0 14px}
h3{font-size:15px}
p{margin:0 0 12px}
a{color:inherit}
img{max-width:100%}

.gedempt{color:var(--grijs)}
.klein{font-size:13px}
.mini{font-size:12px}
.vet{font-weight:600}
.inleiding{color:var(--grijs);font-size:14px;margin-top:6px;max-width:74ch}
.nowrap{white-space:nowrap}

/* --- vlamstreep -----------------------------------------------------------
   Het enige merkelement dat overal terugkomt. Amber links, diep oranje rechts;
   de volgorde is die van het logo en hoort niet omgedraaid te worden. */
.vlam{height:4px;background:linear-gradient(90deg,var(--amber),var(--oranje) 55%,var(--diep-oranje));
  flex:0 0 auto}

/* --- knoppen en velden ---------------------------------------------------- */
button,.knop{font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
  border:0;border-radius:9px;padding:10px 17px;background:var(--oranje);color:var(--zwart);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;line-height:1.3;
  transition:background .14s,border-color .14s,color .14s}
button:hover,.knop:hover{background:var(--diep-oranje)}
button:disabled{opacity:.45;cursor:default}
button:disabled:hover{background:var(--oranje)}
button:focus-visible,.knop:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--zwart);outline-offset:2px}

button.stil{background:transparent;color:var(--zwart);border:1px solid var(--lijn-sterk);font-weight:600}
button.stil:hover{background:var(--vlak);border-color:var(--zwart)}
button.klein{padding:7px 12px;font-size:13px}
button.plat{background:transparent;color:var(--grijs);border:0;padding:6px 8px;font-weight:600;font-size:13px}
button.plat:hover{background:var(--lijn-zacht);color:var(--zwart)}

input,select,textarea{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--lijn-sterk);
  background:#fff;color:var(--zwart);font-family:var(--font);font-size:15px}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input[type=number]{max-width:110px}
label{display:block;font-size:13px;font-weight:600;color:var(--zwart);margin-bottom:5px}
label .bij{font-weight:400;color:var(--grijs)}
fieldset{border:0;padding:0;margin:0}

/* --- inlogscherm ---------------------------------------------------------- */
.inlog{min-height:100vh;display:grid;grid-template-rows:auto 1fr;background:var(--zwart)}
.inlog .balkje{background:var(--zwart)}
.inlog .midden{display:grid;place-items:center;padding:28px}
.inlogkaart{background:var(--kaart);border-radius:16px;padding:34px;width:100%;max-width:430px}
.inlogkaart .merk{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.inlogkaart .merk img{height:30px;width:auto}
.inlogkaart h1{font-size:21px}
.inlog .keuze{margin-top:26px;padding-top:20px;border-top:1px solid var(--lijn)}
.inlog .keuze .rij{display:flex;gap:8px;margin-top:10px}

/* --- raam ----------------------------------------------------------------- */
.raam{display:grid;grid-template-columns:var(--nav) 1fr;min-height:100vh}

nav.zij{background:var(--zwart);color:#fff;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;overflow-y:auto}
nav.zij .kop{padding:20px 20px 18px}
nav.zij .kop img{height:26px;width:auto;display:block}
nav.zij .partnernaam{margin-top:16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#8B8681}
nav.zij .partnernaam b{display:block;font-size:15px;letter-spacing:0;text-transform:none;
  color:#fff;margin-top:3px;line-height:1.3}
nav.zij .groep{padding:20px 20px 7px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#807B76}
nav.zij a{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:9px 20px;color:#DAD7D3;text-decoration:none;font-size:14px;
  border-left:3px solid transparent}
nav.zij a:hover{background:#1C1917;color:#fff}
nav.zij a.aan{border-left-color:var(--oranje);background:#1C1917;color:#fff;font-weight:600}
nav.zij .voet{margin-top:auto;padding:18px 20px;border-top:1px solid #262220;font-size:12px;color:#807B76}
nav.zij .voet button{width:100%;justify-content:center;margin-top:10px;background:transparent;
  border:1px solid #3A3532;color:#DAD7D3;font-size:13px;padding:8px}
nav.zij .voet button:hover{background:#1C1917;border-color:#5A534E;color:#fff}

/* Een teller naast een menu-item. Oranje vlak met zwarte tekst — nooit wit,
   zie de contrastregel bovenaan. */
.teller{background:var(--oranje);color:var(--zwart);font-size:11px;font-weight:700;
  border-radius:20px;padding:1px 7px;min-width:19px;text-align:center;flex:0 0 auto}
.teller.rustig{background:#3A3532;color:#DAD7D3}

.werkvlak{display:flex;flex-direction:column;min-width:0}
header.balk{background:var(--zwart);color:#fff;padding:15px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
header.balk h1{font-size:19px;color:#fff}
header.balk .bij{font-size:13px;color:#A19C97;margin-top:2px}
header.balk .rechts{display:flex;align-items:center;gap:12px;font-size:13px;color:#A19C97}
main{padding:26px 32px 80px;max-width:1240px;width:100%}

/* --- kaarten -------------------------------------------------------------- */
.kaart{background:var(--kaart);border-radius:var(--rond);padding:20px 22px;
  border:1px solid var(--lijn-zacht)}
.kaart + .kaart{margin-top:14px}
.kaart > h2:first-child,.kaart > h3:first-child{margin-top:0}
.kaart.strak{padding:0;overflow:hidden}
.kaartkop{padding:17px 22px;border-bottom:1px solid var(--lijn-zacht);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kaartkop h2,.kaartkop h3{margin:0}

.raster{display:grid;gap:14px}
.raster.twee{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.raster.drie{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* --- tegels --------------------------------------------------------------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px}
.tegel{background:var(--kaart);border:1px solid var(--lijn-zacht);border-radius:var(--rond);padding:16px 18px}
.tegel .kop{font-size:12px;color:var(--grijs);font-weight:600;letter-spacing:.02em}
.tegel .getal{font-size:30px;font-weight:700;line-height:1.1;margin-top:5px;letter-spacing:-.02em}
.tegel .bij{font-size:12px;color:var(--grijs);margin-top:4px}
.tegel.nadruk{border-color:var(--oranje);border-width:2px;padding:15px 17px}

/* --- toestandsmerkjes ----------------------------------------------------- */
.merkje{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  border-radius:20px;padding:3px 10px;white-space:nowrap;line-height:1.5}
.merkje.goed{background:var(--goed-vlak);color:var(--goed)}
.merkje.aandacht{background:var(--aandacht-vlak);color:var(--aandacht)}
.merkje.slecht{background:var(--slecht-vlak);color:var(--slecht)}
.merkje.bezig{background:var(--bezig-vlak);color:var(--bezig)}
.merkje.neutraal{background:var(--stil-vlak);color:var(--stil)}
.merkje .stip{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

.notitie{border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.55;
  border:1px solid var(--lijn);background:var(--vlak)}
.notitie.aandacht{background:var(--aandacht-vlak);border-color:#EBD3A4;color:#5E3A00}
.notitie.slecht{background:var(--slecht-vlak);border-color:#EFC3BA;color:#7E2313}
.notitie.goed{background:var(--goed-vlak);border-color:#BEDEC6;color:#14572A}
.notitie b{font-weight:700}
.notitie + .notitie{margin-top:9px}

/* --- takenlijst ------------------------------------------------------------
   De kern van het dashboard. Eén regel is één ding dat iemand moet doen, met
   de deadline rechts. Geen tabel, want er staat per regel te veel naast
   elkaar om op een telefoon nog te kloppen. */
.taken{list-style:none;margin:0;padding:0}
.taak{display:flex;align-items:flex-start;gap:14px;padding:14px 22px;
  border-bottom:1px solid var(--lijn-zacht)}
.taak:last-child{border-bottom:0}
.taak:hover{background:var(--vlak)}
.taak .streep{width:3px;align-self:stretch;border-radius:3px;background:var(--lijn-sterk);flex:0 0 auto}
.taak.open .streep{background:var(--amber)}
.taak.verlopen .streep,.taak.afgewezen .streep{background:var(--slecht)}
.taak.ingediend .streep{background:var(--bezig)}
.taak.akkoord .streep{background:var(--goed)}
.taak .inhoud{flex:1;min-width:0}
.taak .titel{font-weight:600;font-size:14px}
.taak .onder{font-size:12.5px;color:var(--grijs);margin-top:3px}
.taak .rechts{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap;
  justify-content:flex-end}
.taak .wanneer{font-size:12.5px;color:var(--grijs);text-align:right;min-width:96px}
.taak .wanneer b{display:block;color:var(--zwart);font-size:13px}
.taak.verlopen .wanneer b{color:var(--slecht)}

/* --- tabellen ------------------------------------------------------------- */
.tabelrand{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--lijn-zacht);vertical-align:middle}
th{font-size:12px;font-weight:600;color:var(--grijs);letter-spacing:.02em;white-space:nowrap;
  background:var(--vlak);position:sticky;top:0}
tbody tr:hover{background:var(--vlak)}
td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums}
tr.aandacht td{background:#FEFAF2}
tfoot td{font-weight:700;border-top:2px solid var(--lijn-sterk);border-bottom:0}

/* --- eventblokken ---------------------------------------------------------
   De rest van het platform is bewust rustig; het zijn aantallen en die moet je
   kunnen lezen. De events zijn de uitzondering: daar draait alles om, en daar
   mag het merk spreken. Zwart vlak, plaatsnaam groot, vlamstreep eronder. */
.blokken{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:15px}
.blok{display:flex;flex-direction:column;background:var(--kaart);border-radius:var(--rond);
  border:1px solid var(--lijn-zacht);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.blok:hover{border-color:var(--oranje);transform:translateY(-2px)}
.blok .kopvlak{background:var(--zwart);color:#fff;padding:17px 18px 15px;position:relative}
.blok .kopvlak .soort{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#A19C97}
.blok .kopvlak .plaats{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:4px;line-height:1.2}
.blok .kopvlak .wanneer{font-size:12.5px;color:#A19C97;margin-top:4px}
.blok .body{padding:15px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.blok .regel{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.blok .regel span:first-child{color:var(--grijs)}
.blok .regel b{font-variant-numeric:tabular-nums}
.blok .voet{padding:12px 18px;border-top:1px solid var(--lijn-zacht);background:var(--vlak);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Wat geweest is mag naar de achtergrond, maar het vlak blijft zwart: dat is
   de huisstijl en niet iets wat met de status meebeweegt. */
.blok.voorbij .kopvlak .plaats{color:#8B8681}
.blok.voorbij{opacity:.72}

/* --- partnertegels (beheerderskant) --------------------------------------- */
.logovlak{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;flex:0 0 auto;overflow:hidden}
.logovlak img{width:100%;height:100%;object-fit:contain;background:#fff}
.partnerrij{display:flex;align-items:center;gap:12px}
.partnerrij .naam{font-weight:600}
.partnerrij .sub{font-size:12px;color:var(--grijs)}

/* --- rechtenlijst --------------------------------------------------------- */
.rechten{display:grid;gap:10px}
.recht{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:10px;
  border:1px solid var(--lijn-zacht);background:var(--kaart)}
.recht .aantal{font-size:23px;font-weight:700;line-height:1.15;min-width:58px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.recht .aantal small{display:block;font-size:11px;font-weight:600;color:var(--grijs);
  letter-spacing:.02em;margin-top:1px}
.recht .tekst{flex:1;min-width:0}
.recht .tekst b{font-size:14px}
.recht .tekst .uitleg{font-size:12.5px;color:var(--grijs);margin-top:3px}

/* --- voortgangsbalkje ----------------------------------------------------- */
.balkje{height:6px;border-radius:6px;background:var(--lijn);overflow:hidden;margin-top:7px}
.balkje i{display:block;height:100%;background:var(--oranje);border-radius:6px}

/* --- doek ----------------------------------------------------------------- */
.doek{border-radius:10px;overflow:hidden;border:1px solid var(--lijn);background:var(--zwart)}
.doek img{display:block;width:100%}
.doekvoet{padding:11px 15px;font-size:12.5px;color:var(--grijs);background:var(--vlak);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* --- verdeelrooster (tickets over de dagen) ------------------------------- */
.verdeel{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.verdeel .dag{border:1px solid var(--lijn);border-radius:10px;padding:11px 13px;background:var(--kaart)}
.verdeel .dag label{font-size:12px;color:var(--grijs);text-transform:capitalize}
.verdeel .dag input{max-width:none;margin-top:2px}
.saldo{display:flex;align-items:baseline;gap:9px;margin-top:13px;font-size:14px}
.saldo b{font-size:19px;font-variant-numeric:tabular-nums}
.saldo.teveel{color:var(--slecht)}

/* --- werkbalk ------------------------------------------------------------- */
.werkbalk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.werkbalk select,.werkbalk input{width:auto;min-width:190px}
.werkbalk .duw{margin-left:auto}

/* --- lege staat ----------------------------------------------------------- */
.leeg{text-align:center;padding:44px 20px;color:var(--grijs)}
.leeg .groot{font-size:17px;font-weight:600;color:var(--zwart);margin-bottom:5px}

/* --- dialoog -------------------------------------------------------------- */
dialog{border:0;border-radius:14px;padding:0;max-width:560px;width:calc(100% - 36px);
  background:var(--kaart);color:var(--zwart)}
dialog::backdrop{background:rgba(15,13,11,.55)}
dialog .binnen{padding:24px 26px 26px}
dialog h2{margin-top:0}
dialog .voet{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}

/* --- suggesties -----------------------------------------------------------
   Kaarten en geen tabel: er staat een lap tekst in, en die moet je kunnen
   lezen. De streep links draagt de status, zoals bij de takenlijst, zodat je
   in één blik ziet wat er nog open staat. */
.suggesties{display:grid;gap:13px}
.suggestie{background:var(--kaart);border:1px solid var(--lijn-zacht);border-radius:var(--rond);
  padding:16px 18px;border-left:3px solid var(--lijn-sterk)}
.suggestie.open{border-left-color:var(--amber)}
.suggestie.opgepakt{border-left-color:var(--bezig)}
.suggestie.afgerond{border-left-color:var(--goed)}
.suggestie.afgewezen{border-left-color:var(--lijn-sterk)}
.sugkop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sugkop .partnerrij .sub{display:block;font-size:12px;color:var(--grijs)}
.sugtekst{margin:12px 0 0;font-size:14.5px;line-height:1.6;white-space:pre-wrap}
.sugwaar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--lijn-zacht)}
.sugpad{font-size:13px;font-weight:600;color:var(--diep-oranje)}
.sugwaar code{background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:5px;
  padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sugreactie{margin-top:11px;padding:11px 13px;border-radius:9px;background:var(--vlak);
  border-left:2px solid var(--lijn-sterk);font-size:13.5px;line-height:1.55}
.sugreactie b{display:block;font-size:12px;color:var(--grijs);margin-bottom:2px}
.sugknoppen{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--lijn-zacht)}

/* De knop in de zijbalk. Hij hangt onderaan, ook als het menu kort is, en
   draagt het merkoranje omdat hij als enige in de zwarte balk om aandacht
   vraagt. Zwarte tekst erop — wit haalt het contrast niet. */
nav.zij .voet .suggestieknop{background:var(--oranje);color:var(--zwart);border:0;font-weight:600;
  margin-top:0;margin-bottom:10px}
nav.zij .voet .suggestieknop:hover{background:var(--diep-oranje);color:var(--zwart)}
nav.zij .voet .suggestieknop .teller{background:var(--zwart);color:#fff}

/* --- klein scherm --------------------------------------------------------- */
@media (max-width:900px){
  .raam{grid-template-columns:1fr}
  nav.zij{position:static;height:auto;flex-direction:column}
  nav.zij .kop{padding-bottom:12px}
  nav.zij .menu{display:flex;flex-wrap:wrap;gap:2px;padding:0 12px 12px}
  nav.zij .groep{display:none}
  nav.zij a{border-left:0;border-bottom:3px solid transparent;border-radius:8px;padding:8px 12px}
  nav.zij a.aan{border-left:0;border-bottom-color:var(--oranje)}
  nav.zij .voet{margin-top:0}
  main{padding:20px 16px 60px}
  header.balk{padding:14px 16px}
  .taak{padding:13px 16px;flex-wrap:wrap}
  .taak .rechts{width:100%;justify-content:flex-start;padding-left:17px}
  .kaartkop{padding:15px 16px}
  .kaart{padding:16px}
}

@media print{
  nav.zij,header.balk .rechts,button{display:none}
  body{background:#fff}
  .kaart,.tegel{border-color:#ccc}
}