/* Indelingstool - één stijlbestand, geen framework.

   De huisstijl staat in de tokens hieronder; verzet er een en de hele tool
   verschiet mee. Ze komen uit DESIGN.md, "Pro-Rugby Athletic System".

   Twee dingen zijn bewust anders dan dat document, omdat dit een dichte
   werkbank is en geen website:

   1. De tekstmaat is 12 tot 15px in plaats van de 16px uit body-md, en Bram
      kiest zelf welke. Hij werkt met tabellen van honderden wedstrijden; elke
      pixel groter is een rij minder in beeld, en juist het overzicht is waar
      de tool voor bestaat. Zie de dichtheidstokens hieronder.
   2. Oranje is voor wat aandacht vraagt (open wedstrijden, tekorten,
      hoofdknoppen), niet voor de navigatie. Dat volgt de regel uit DESIGN.md
      zelf: "never orange, to keep the interface from becoming visually
      overwhelming".
*/

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/archivo-narrow-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/archivo-narrow-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- merk: de Rugby Oranje uit DESIGN.md ---- */
  --merk:          #ff6900;   /* primary-container - de signatuurkleur */
  --merk-donker:   #a14000;   /* primary - voor tekst op wit en hover */
  --merk-zacht:    #ffdbcc;   /* primary-fixed - vlakken */

  /* ---- vlakken en lijnen ---- */
  --papier:        #ffffff;   /* surface-container-lowest */
  --achtergrond:   #f9f9f9;   /* surface */
  --vlak:          #f4f4f4;   /* surface-gray - kaart op canvas */
  /* DESIGN.md: 1px lijn in #1A1A1A op 10% dekking, geen harde grijzen. */
  --lijn:          rgba(26, 26, 26, 0.12);
  --lijn-zacht:    rgba(26, 26, 26, 0.07);
  --rij-streep:    #f4f4f4;

  /* ---- tekst ---- */
  --tekst:         #1a1c1c;   /* on-surface */
  --tekst-zacht:   #5f5e5e;   /* secondary */

  /* ---- lettertypen ---- */
  --kop-font:      "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --tekst-font:    "Inter", system-ui, "Segoe UI", sans-serif;

  /* ---- betekeniskleuren ----
     Vier duidelijk verschillende tinten, want ze staan naast elkaar in
     dezelfde tabel: oranje vraagt actie, blauw is jouw concept, groen is
     klaar, rood is mis. */
  --accent:        var(--merk-donker);
  --accent-zacht:  var(--merk-zacht);
  --oranje:        #a14000;   /* primary - leesbaar op wit */
  --oranje-zacht:  #ffdbcc;
  /* Pitch Green (#ADBD99) is te licht voor tekst; dit is dezelfde tint,
     donker genoeg om op wit te lezen. */
  --groen:         #4f6238;
  --groen-zacht:   #e9eee1;
  --blauw:         #00629f;   /* tertiary */
  --blauw-zacht:   #cfe4ff;   /* tertiary-fixed */
  --rood:          #ba1a1a;   /* error */
  --rood-zacht:    #ffdad6;   /* error-container */
  --paars:         var(--blauw);        /* concept was paars, nu blauw */
  --paars-zacht:   var(--blauw-zacht);

  /* ---- dichtheid ----
     Hoeveel er in beeld past. Bram werkt met tabellen van honderden
     wedstrijden, dus dit is geen smaakinstelling maar bepaalt hoeveel je in
     een oogopslag ziet. Te kiezen in de kop; de keuze blijft bewaard.
     Inter heeft een grotere x-hoogte dan het vorige systeemlettertype, dus
     dezelfde puntgrootte oogt groter - vandaar dat "normaal" hier 13px is en
     niet de 14px van voor de huisstijl. */
  --tekstmaat:     13px;
  --tekstmaat-klein: 12px;
  --cel-y:         5px;      /* verticale ruimte in een tabelcel */
  --cel-x:         10px;
  --kop-groot:     20px;     /* de titel bovenin */
  --kop-midden:    15px;     /* koppen boven een blok */
  --kop-tabel:     11px;     /* kolomkoppen */
  --regelhoogte:   1.45;

  /* ---- maten ---- */
  --hoogte-veld:   32px;
  --rond:          8px;       /* kaarten */
  --rond-klein:    4px;       /* knoppen en velden */
  /* DESIGN.md kiest tonale vlakken en lijnen boven schaduw. Alleen wat echt
     zweeft (zijpaneel, uitklap) krijgt een korte, scherpe schaduw. */
  --schaduw:       none;
  --schaduw-diep:  0 2px 0 rgba(13, 13, 13, 0.20);
}

/* Drie standen. Alleen deze tokens verschillen; de rest van het bestand
   rekent ermee, zodat er nergens een maat achterblijft. */
body.dicht {
  --tekstmaat: 12px;
  --tekstmaat-klein: 11px;
  --cel-y: 3px;
  --cel-x: 8px;
  --kop-groot: 18px;
  --kop-midden: 14px;
  --kop-tabel: 10px;
  --regelhoogte: 1.35;
  --hoogte-veld: 28px;
}

body.ruim {
  --tekstmaat: 15px;
  --tekstmaat-klein: 13px;
  --cel-y: 8px;
  --cel-x: 12px;
  --kop-groot: 23px;
  --kop-midden: 17px;
  --kop-tabel: 12px;
  --regelhoogte: 1.6;
  --hoogte-veld: 36px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--tekstmaat)/var(--regelhoogte) var(--tekst-font);
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- kop --- */

.kop {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.kop h1 {
  font: 700 var(--kop-groot)/1.2 var(--kop-font);
  margin: 0;
  letter-spacing: -0.01em;
}
.kop-onder { color: var(--tekst-zacht); font-size: 12px; }
.kop-titel { display: flex; flex-direction: column; }
.kop-knoppen { margin-left: auto; }

.cijfers { display: flex; gap: 16px; flex-wrap: wrap; }
.cijfer { display: flex; flex-direction: column; line-height: 1.2; }
.cijfer b {
  font: 700 18px/1.2 var(--kop-font);
  font-variant-numeric: tabular-nums;
}
.cijfer span { font-size: 11px; color: var(--tekst-zacht); }
.cijfer.let-op b { color: var(--oranje); }
/* Voor de ophaalmomenten in de kop: daar is het getal een lege plek, dus
   moet de tekst zelf kleuren als de data verouderd is. */
.cijfer.verouderd span { color: var(--oranje); }

/* ------------------------------------------------------------ tabs --- */

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 18px;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.tab {
  border: 0;
  background: none;
  padding: 9px 14px;
  font: 600 13px/1.4 var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab:hover { color: var(--tekst); }

/* De actieve tab in charcoal met een oranje streep. DESIGN.md houdt oranje
   voor wat aandacht vraagt; de navigatie zelf hoort rustig te blijven. */
.tab.actief {
  color: var(--tekst);
  border-bottom-color: var(--merk);
  border-bottom-width: 2px;
}
.tabs { gap: 4px; padding: 0 20px; }

main { padding: 14px 18px 60px; }
.scherm.verborgen, .verborgen { display: none; }

/* ------------------------------------------------------- filterbalk --- */

/* Alles op één rij, alles even hoog. Past het niet, dan wordt het netjes een
   tweede rij in plaats van een trapje. */
:root { --hoogte-veld: 30px; }

.filterbalk {
  display: flex;
  gap: 8px 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  margin-bottom: 14px;
}

.filter { display: flex; gap: 8px; align-items: flex-end; }
.filter.rechts { margin-left: auto; }

label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--tekst-zacht);
}

input[type="date"], input[type="search"], input[type="number"], input[type="text"], select {
  font: inherit;
  font-size: 13px;
  height: var(--hoogte-veld);
  padding: 0 8px;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: var(--papier);
  color: var(--tekst);
}

input[type="search"] { min-width: 170px; }
.filterbalk input[type="date"] { width: 130px; }

.keuzelijst { position: relative; }

.keuzelijst > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  height: var(--hoogte-veld);
  cursor: pointer;
  list-style: none;
  padding: 0 10px;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: var(--papier);
  font-size: 13px;
  user-select: none;
  white-space: nowrap;
}

/* Een filter met een keuze erin valt op, zodat je nooit vergeet dat hij aan staat. */
.keuzelijst.aan > summary {
  border-color: var(--accent);
  background: var(--accent-zacht);
  color: var(--accent);
  font-weight: 600;
}

.keuzelijst > summary::-webkit-details-marker { display: none; }
.keuzelijst[open] > summary { border-color: var(--accent); color: var(--accent); }

.teller {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.keuzes {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 300px;
  max-height: 340px;
  overflow: auto;
  padding: 8px;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  box-shadow: var(--schaduw-diep);
}

.keuzes label {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  color: var(--tekst);
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
}

.keuzes label:hover { background: var(--lijn-zacht); }
.keuzes .aantal { margin-left: auto; color: var(--tekst-zacht); font-size: 11px; }
.keuzes .kopje {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
  margin: 8px 0 2px;
}

/* ---------------------------------------------------------- knoppen --- */

.knop, .mini {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--lijn);
  background: var(--papier);
  color: var(--tekst);
  border-radius: var(--rond-klein);
  padding: 6px 12px;
  box-shadow: var(--schaduw);
  transition: border-color .1s, color .1s, background .1s;
}

.mini {
  font: 600 12px/1 var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 12px;
  height: var(--hoogte-veld);
}
.knop:hover, .mini:hover { border-color: var(--accent); color: var(--accent); }
.mini.actief { background: var(--accent); color: #fff; border-color: var(--accent); }
.mini.leeg { color: var(--tekst-zacht); }

/* Een downloadlink die eruitziet als een knop: zonder dit staat de tekst
   bovenaan in plaats van in het midden. */
a.mini { display: inline-flex; align-items: center; text-decoration: none; }
.snelkeuzes, .weergave { display: flex; gap: 4px; align-items: center; }
.zijpaneel .mini, .huidig .mini { height: auto; padding: 4px 9px; }

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

.resultaatregel { color: var(--tekst-zacht); font-size: 12px; margin: 0; }

/* Weergavekeuze hoort bij het resultaat, niet bij de filters. */
.resultaatbalk {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}

.resultaatbalk .weergave { margin-left: auto; }
.filterbalk #knop-filters-leeg { margin-left: auto; }
.uitleg {
  max-width: 70ch;
  color: var(--tekst-zacht);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.groep {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  margin-bottom: 14px;
  overflow: hidden;
}

.groepkop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  border-left: 3px solid var(--merk);
  cursor: pointer;
}

.groepkop:hover { background: var(--rij-streep); }

.groepkop h2 {
  font: 600 var(--kop-midden)/1.3 var(--kop-font);
  margin: 0;
  letter-spacing: 0.01em;
}
.groepkop .bij { font-size: 12px; color: var(--tekst-zacht); }
.groepkop .rechts { margin-left: auto; font-size: 12px; color: var(--tekst-zacht); }

table { width: 100%; border-collapse: collapse; }

/* Elk blok is een eigen tabel. Zonder een vaste indeling meet elke tabel zijn
   kolommen zelf op en verspringt de uitlijning per blok. De breedtes staan in
   de colgroup in app.js. */
table.wedstrijden { table-layout: fixed; }

/* Geen word-break: die brak "16350203" middenin over twee regels, en dan is
   een wedstrijdnummer niet meer te lezen. Lange tekst breekt gewoon op een
   spatie. */
.nummer { white-space: nowrap; }

/* min-width zou de vaste indeling weer scheeftrekken. */
table.wedstrijden td.teams { min-width: 0; }

/* In de compacte stand is elke rij een regel: dat is de hele afspraak van die
   stand. Wat niet past krijgt drie puntjes, met de volledige tekst als
   tooltip - zo lever je ruimte in zonder iets kwijt te raken. */
body.dicht table.wedstrijden td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th.sorteerbaar { cursor: pointer; user-select: none; }
th.sorteerbaar:hover { color: var(--accent); }
th.sorteerbaar.actief { color: var(--accent); }

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--papier);
  text-align: left;
  font: 600 var(--kop-tabel)/1.3 var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
  padding: calc(var(--cel-y) + 2px) var(--cel-x);
  border-bottom: 1px solid var(--lijn);
  white-space: nowrap;
}

td {
  padding: var(--cel-y) var(--cel-x);
  border-bottom: 1px solid var(--lijn-zacht);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--rij-streep); }
tbody tr:hover { background: var(--merk-zacht); }

/* Clubscheidsrechters staan er voor de tellingen mee; ze zijn niet in te
   delen, dus ze horen rustiger in beeld te staan dan de rest. */
tr.niet-indeelbaar td { color: var(--tekst-zacht); }

.nummer { font-variant-numeric: tabular-nums; color: var(--tekst-zacht); }
.tijd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.teams { min-width: 240px; }
.teams .tegen { color: var(--tekst-zacht); }
.locatie { color: var(--tekst-zacht); }
.leeg-veld { color: #b6bcc4; }

/* naam zoals AllUnited hem geeft maar niet gekoppeld aan een bekende ref */
.ongekoppeld { font-style: italic; }
.ongekoppeld::after {
  content: "?";
  font-style: normal;
  color: var(--oranje);
  font-weight: 700;
  margin-left: 3px;
}

.concept {
  border: 1px dashed var(--paars);
  background: var(--paars-zacht);
  border-radius: 3px;
  padding: 0 4px;
}

/* -------------------------------------------------------------- labels --- */

.label {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.label.open            { background: var(--oranje-zacht); color: var(--oranje); }
.label.ingedeeld       { background: var(--groen-zacht); color: var(--groen); }
.label.concept         { background: var(--paars-zacht); color: var(--paars); border-style: dashed; border-color: var(--paars); }
.label.conflict        { background: var(--rood-zacht); color: var(--rood); }
.label.nieuw          { background: var(--accent-zacht); color: var(--accent); }
.label.gewijzigd      { background: var(--oranje-zacht); color: var(--oranje); }
.label.verdwenen      { background: var(--lijn-zacht); color: var(--tekst-zacht); }
.label.vervuld        { background: var(--groen-zacht); color: var(--groen); }
.label.clubref        { background: var(--lijn-zacht); color: var(--tekst-zacht); }
/* Het DWF is afgetekend: groen, zoals alles wat af is. Een kaal vinkje en geen
   blokje - de statuskolom is smal en een derde label duwde de rij naar twee
   regels. De uitslagstatus blijft grijs: administratie, geen oordeel over
   jouw indeling. */
.dwf-af { color: var(--groen); font-weight: 700; cursor: help; }
.label.uitslag { background: var(--lijn-zacht); color: var(--tekst-zacht); }
.label.niveau          { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }
.label.onbekend        { background: var(--oranje-zacht); color: var(--oranje); }

/* subkop: de losse poule binnen een klasse (2e klasse Noord / Zuid) */
.subkop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: #fafbfc;
  border-top: 1px solid var(--lijn-zacht);
  border-bottom: 1px solid var(--lijn-zacht);
  font-weight: 600;
  font-size: 13px;
}

.subkop .bij { font-weight: 400; font-size: 12px; color: var(--tekst-zacht); }

.beschikbaar-hele_dag,
.beschikbaar-overdag      { color: var(--groen); }
.beschikbaar-ochtend,
.beschikbaar-middag,
.beschikbaar-middag_avond { color: var(--accent); }
.beschikbaar-niet         { color: var(--tekst-zacht); }
.beschikbaar-onbekend     { color: var(--oranje); }

/* ------------------------------------------------------------ zijpaneel --- */

.zijpaneel {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  overflow-y: auto;
  background: var(--papier);
  border-left: 1px solid var(--lijn);
  box-shadow: var(--schaduw-diep);
  z-index: 30;
  padding: 0 0 40px;
}

body.paneel-open main { padding-right: 460px; }

.zijpaneel-kop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  background: var(--papier);
  z-index: 2;
}

.zijpaneel-kop h2 { font-size: 15px; margin: 0 0 2px; }
.zijpaneel-kop p { margin: 0; font-size: 12px; color: var(--tekst-zacht); }
.zijpaneel-kop .mini { margin-left: auto; }

.rolkeuze { display: flex; gap: 4px; padding: 10px 14px 6px; }
.rolkeuze.verborgen { display: none; }

.huidig {
  margin: 6px 14px 10px;
  padding: 8px 10px;
  border: 1px solid var(--lijn);
  border-radius: 5px;
  background: #fafbfc;
  font-size: 13px;
}

.huidig .regel { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.huidig .wie { font-weight: 600; }
.huidig .bron { font-size: 11px; color: var(--tekst-zacht); }
.huidig .mini { margin-left: auto; }

/* Waar een waarde vandaan komt, bijvoorbeeld "afgeleid uit 45 min" achter de
   kilometergrens in het refpaneel. Zacht en klein: het hoort bij het label
   ernaast en mag de waarde zelf niet overschreeuwen. */
.bron { font-size: 11px; font-weight: 400; color: var(--tekst-zacht); }

.kandidaat {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 6px;
  padding: 8px 10px;
  border: 1px solid var(--lijn);
  border-radius: 5px;
  background: var(--papier);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.kandidaat:hover { border-color: var(--accent); background: var(--accent-zacht); }
.kandidaat.geblokkeerd { background: #fbfbfc; color: var(--tekst-zacht); }
.kandidaat.geblokkeerd:hover { border-color: var(--oranje); background: var(--oranje-zacht); }

/* Het zoekveld boven de kandidatenlijst. Filtert in de DOM; wat niet matcht
   krijgt .weggefilterd. Bewust begrensd tot de kandidaat-elementen, zodat
   een later scherm de generieke naam niet met andere verwachtingen
   herontdekt. */
.paneel-zoek { display: flex; align-items: center; gap: 8px; }
.paneel-zoek input { flex: 1; min-width: 0; }
.kandidaat.weggefilterd, .kandidaat-detail.weggefilterd { display: none; }

/* De samenvatting die onder een aangeklikte kandidaat uitklapt. Iets
   ingesprongen en op het zachte vlak, zodat hij leesbaar bij zijn kandidaat
   hoort en niet zelf een kandidaat lijkt. */
.kandidaat-detail {
  margin: -2px 14px 6px 26px;
  padding: 8px 10px;
  border: 1px solid var(--lijn-zacht);
  border-radius: 5px;
  background: var(--vlak);
  font-size: 12px;
}
.kandidaat-detail .regel { margin: 2px 0; }
.kandidaat-detail .regel .bron { display: inline-block; min-width: 110px; }
.kandidaat-detail .knoppen { display: flex; gap: 8px; margin-top: 6px; }

.kandidaat .bovenregel { display: flex; align-items: baseline; gap: 8px; }
.kandidaat .naam { font-weight: 600; }
.kandidaat .cijfers { margin-left: auto; font-size: 11px; color: var(--tekst-zacht); }
.kandidaat .redenen { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.kandidaat .uitleg { margin-top: 4px; font-size: 11px; color: var(--tekst-zacht); }

.label.waarschuwing { background: var(--oranje-zacht); color: var(--oranje); }
.label.blokkade { background: var(--rood-zacht); color: var(--rood); }
.label.geen { background: var(--groen-zacht); color: var(--groen); }
.label.opmerking { background: var(--lijn-zacht); color: var(--tekst-zacht); }

.paneeltabel { font-size: 12px; }
.paneeltabel th, .paneeltabel td { padding: 4px 14px; }
.paneeltabel th:first-child, .paneeltabel td:first-child { padding-left: 14px; }
.paneeltabel .teams { min-width: 0; }

.paneel-kopje {
  padding: 10px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
}

tr.gekozen td { background: var(--accent-zacht) !important; }
tbody tr { cursor: pointer; }

/* ------------------------------------------------------- overtik-modus --- */

.overtikken table { font-size: 15px; }
.overtikken td, .overtikken th { padding: 8px 10px; }
.overtikken .concept-naam { font-weight: 600; }

/* ------------------------------------------------------------- melding --- */

.melding {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 520px;
  max-height: 50vh;
  overflow: auto;
  padding: 12px 14px;
  background: #21262d;
  color: #f0f2f5;
  border-radius: 6px;
  box-shadow: var(--schaduw-diep);
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.5;
}

.melding.fout { background: var(--rood); }

/* Een blijvend verslag (nakijklijsten, inleesverslag): breed, licht en
   doorzoekbaar, midden in beeld. Vaste letterbreedte, want de tekst is met
   spaties uitgelijnd. De sluitknop is de enige uitgang - klikken in de tekst
   moet selecteren, niet sluiten. */
.melding.verslag {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(880px, 94vw);
  max-width: none;   /* de 520px van de gewone melding geldt hier niet */
  max-height: 84vh;
  background: var(--papier);
  color: var(--tekst);
  border: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.melding.verslag.fout { background: var(--rood-zacht); color: var(--tekst); }
.melding-sluit {
  align-self: flex-end;
  margin: 8px 10px 0;
  border: 1px solid var(--lijn);
  background: var(--vlak);
  border-radius: var(--rond-klein);
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}
.melding-sluit:hover { background: var(--merk-zacht); }
.melding-inhoud {
  margin: 6px 0 0;
  padding: 6px 16px 14px;
  overflow: auto;
  font: 12px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap;
}

.detailrij td { background: #fafbfc; }
.detail-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 20px;
  padding: 4px 0 8px;
}
.detail-kolommen div span { display: block; font-size: 11px; color: var(--tekst-zacht); }
.detail-kolommen div b { font-weight: 600; }

.vinkje { flex-direction: row; align-items: center; gap: 6px; font-size: 13px;
          color: var(--tekst); }
.tabs .teller { margin-left: 4px; color: var(--rood); }

/* formulier voor de eigen velden in het refpaneel */
.eigenvelden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 10px;
  align-items: end;
}

.eigenvelden .breed { grid-column: 1 / -1; }
.eigenvelden input, .eigenvelden select { width: 100%; }
.eigenvelden .vinkje input { width: auto; }
.eigenvelden button { justify-self: start; }

.blokkades { padding: 0 14px 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.blokkades .weg {
  border: 0; background: none; cursor: pointer; color: inherit;
  padding: 0 0 0 4px; font: inherit;
}

/* De knop rechtsboven is de enige met nadruk: die doet echt iets. */
#knop-inlezen {
  background: var(--merk);
  border-color: var(--merk);
  color: #fff;
  font-weight: 600;
}

#knop-inlezen:hover:not(:disabled) { background: var(--merk-donker); color: #fff; }
#knop-inlezen:disabled { opacity: .6; cursor: default; }

/* Labels iets ronder en rustiger. */
.label {
  border-radius: 999px;
  font: 600 11px/1.5 var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.label.niveau { font-weight: 700; letter-spacing: .02em; }

/* --------------------------------------------------------- dashboard --- */

/* De kaartkolom krijgt het grootste deel: op de kaart moet je clubs kunnen
   aanwijzen, en dat lukt niet op een postzegel. De zijkant is opsomming en
   kan smaller. Het detailpaneel staat onder de kaart en oogt daardoor breed,
   maar dat is een lijstje - dat leest juist prettig op deze breedte. */
.dashboard-twee {
  display: grid;
  /* De kaart is het overzicht en krijgt de ruimte (Bram, 24-08-2026); de
     zijkant met de tabellen hoeft niet breder dan hij leest. */
  grid-template-columns: minmax(420px, 1.8fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}

.dashboard-zijkant { display: flex; flex-direction: column; gap: 16px; }

.dashboard-cijfers {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 12px 14px 4px;
}

.dashboard-cijfers .cijfer b {
  font: 700 32px/1.1 var(--kop-font);
  letter-spacing: -0.01em;
}

/* De tweede rij is de wedstrijdennorm. Een haarlijn ertussen, want het zijn
   twee eisen naast elkaar: zonder scheiding lees je "norm 156" en "norm 1560"
   als één rijtje getallen over hetzelfde. */
.dashboard-cijfers.tweede {
  border-top: 1px solid var(--lijn-zacht);
  margin: 8px 14px 0;
  padding: 12px 0 4px;
}

/* Op een breed scherm staan de twee normen liever naast elkaar dan onder
   elkaar: het zijn twee eisen die je tegen elkaar afweegt, en dan wil je ze in
   één oogopslag zien. De haarlijn kantelt mee: boven de grens scheidt hij
   links-rechts, eronder boven-onder.

   De grens is nagemeten in de demo (25-08-2026), niet geschat: beide rijen
   zijn 694px aan inhoud, met de marges eromheen samen 1480px, en de pagina
   zelf neemt 53px. Naast elkaar past dus vanaf ongeveer 1533px; 1600 is die
   maat plus een marge, zodat een label dat een keer langer uitvalt niet
   meteen afbreekt. Komt er toch te veel in een rij, dan zakt een heel
   kengetal naar een tweede regel (`flex-wrap`); alleen een kengetal dat in
   zijn eentje breder is dan de kolom zou echt overlopen, en daar zijn deze
   labels ruim 500px vandaan. Let op: deze grens kijkt naar het venster, niet
   naar de overgebleven ruimte, dus met het zijpaneel open (460px) is elke
   kolom krapper dan hier berekend. */
@media (min-width: 1600px) {
  .dashboard-normen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* De haarlijn ligt op de kolomgrens, dus precies in het midden van de
     sectie. De linkerkolom is breder dan zijn inhoud en houdt daardoor meer
     wit over dan de rechter - dat hoort zo, het is een kolomlijn en geen
     scheiding die met de tekst meeschuift. Deze regel houdt alleen de tekst
     van de lijn af: zonder hem is het 14px en kan een lang label er straks
     tegenaan komen. */
  .dashboard-normen > .dashboard-cijfers:not(.tweede) { padding-right: 32px; }

  .dashboard-cijfers.tweede {
    border-top: none;
    border-left: 1px solid var(--lijn-zacht);
    margin: 0;
    padding: 12px 14px 4px 32px;
  }
}

/* De legenda mag onder de kaart zakken zodra de kaart de ruimte nodig heeft:
   liever een grote kaart met de legenda eronder dan twee smalle kolommen. */
.kaart-en-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 14px 14px;
  align-items: flex-start;
}

/* Groeit mee met de kolom. De kaart is staand (520x616), dus op een gewoon
   scherm is de hoogte de echte grens - de bovengrens voorkomt alleen dat hij
   op een heel breed scherm voorbij het beeld groeit. */
.kaart { width: 100%; max-width: 720px; height: auto; flex: 1 1 380px; }
.kaart-en-legenda .legenda { flex: 1 1 180px; }

/* De gemeentekaart is ondergrond en geen gegeven: één rustige vulling en een
   dunne grens, in de tokens die de rest van de tool ook gebruikt. Kleur op een
   gemeente zou als betekenis gelezen worden, en die zit in de stippen.

   Licht land op wit papier, en niet andersom: de stippen zijn fel en die
   moeten het opvallen alleen hoeven te doen. --rij-streep is dezelfde zachte
   grijstint als de tabelstreping, en de grens een fractie donkerder zodat je
   de gemeenten nog uit elkaar houdt zonder dat het een web van lijnen wordt. */
.gemeente {
  fill: var(--rij-streep);
  stroke: var(--lijn-zacht);
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* Het water is gewoon het papier eromheen: alles buiten de gemeenten is zee of
   buitenland, en dat hoeft geen eigen kleur. */
.kaart-ontbreekt { max-width: 300px; margin: 0; }

.clubstip {
  cursor: pointer;
  fill-opacity: 0.75;
  stroke: var(--papier);
  stroke-width: 1.5;
  transition: fill-opacity .1s;
}

.clubstip:hover { fill-opacity: 1; }
.clubstip.gekozen { stroke: var(--tekst); stroke-width: 2; fill-opacity: 1; }

.legenda { font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
/* De schakelaar personen/wedstrijden staat boven de legenda; twee kleine
   knoppen, want het is een keuze in de weergave en geen hoofdactie. */
#kaart-schakelaar { margin-bottom: 4px; }
#kaart-legenda { display: flex; flex-direction: column; gap: 6px; }
.legenda-regel { display: flex; align-items: center; gap: 8px; }

.legenda .stip {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
}

.legenda .stip.tekort    { background: var(--rood); }
.legenda .stip.op-orde   { background: var(--groen); }
.legenda .stip.overschot { background: var(--blauw); }

.uitleg-klein {
  font-size: 12px;
  color: var(--tekst-zacht);
  line-height: 1.6;
  margin: 8px 14px 12px;
}

.legenda .uitleg-klein { margin: 8px 0 0; }

.stand-tekort    { color: var(--rood); }
.stand-op-orde   { color: var(--groen); }
.stand-overschot { color: var(--blauw); }

@media (max-width: 900px) {
  .dashboard-twee { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- de tabel per club --- */

/* Filteren hoort bij deze tabel, niet bij het scherm: daarom rustiger dan de
   .filterbalk bovenaan, en zonder eigen kader. */
.clubfilter {
  display: flex;
  gap: 8px 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--lijn);
}

.clubfilter input[type="search"] { flex: 0 1 240px; }
/* Twee standen naast elkaar hebben een opschrift nodig: "tekort" zegt zonder
   dat niet of het over personen of over wedstrijden gaat. Zelfde vorm als de
   labels in de filterbalk bovenaan. */
.clubfilter label { flex: 0 0 auto; }
.clubtabel-voet { padding: 10px 14px; border-top: 1px solid var(--lijn); }
/* Zonder tabel is er niets om een lijn van te scheiden: die zou pal onder de
   lijn van de filterbalk vallen. */
.clubtabel-leeg { padding: 14px; }

/* Het pijltje voor de clubnaam: wel te zien, maar het mag de naam niet
   overstemmen. */
.clubtabel .uitklap {
  display: inline-block;
  width: 12px;
  color: var(--tekst-zacht);
  font-size: 10px;
}
.clubtabel tr.open .uitklap { color: var(--accent); }

/* tbody tr staat op pointer, maar de detail-rij is geen knop: daar valt niets
   te klikken en een handje belooft dat wel. */
.clubtabel tr.detail-rij { cursor: default; }

/* De streping komt uit app.js (klas "streep") en niet uit :nth-child(even):
   tussen de clubrijen staan opengeklapte detail-rijen, en die telt nth-child
   gewoon mee - dan verspringt het hele patroon zodra je er een openklapt.
   De detail-rij krijgt zijn eigen vlak met een streep ernaast, zodat je ziet
   dat hij bij de rij erboven hoort. */
.clubtabel tbody tr:nth-child(even) { background: none; }
.clubtabel tbody tr[data-club].streep { background: var(--rij-streep); }

/* Na die twee regels wint de gewone tbody tr:hover het niet meer van de
   streping, dus de hover moet hier net zo specifiek terugkomen - anders
   licht elke tweede rij niet meer op als je eroverheen gaat. */
.clubtabel tbody tr[data-club]:hover { background: var(--merk-zacht); }

.clubtabel tr.detail-rij > td {
  padding: 0;
  background: var(--vlak);
  border-left: 3px solid var(--merk);
}

/* Wie met Tab werkt moet zien waar hij staat; de tabel en de kaart waren tot
   nu toe alleen met de muis te bedienen. */
tr[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Een SVG-stip kan geen outline-offset naar binnen hebben zonder in de stip
   te snijden, dus die krijgt de rand eromheen. */
.clubstip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  fill-opacity: 1;
}

/* Het blok onder de kaart: waar het clubcijfer vandaan komt. */
.detail-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px 0;
}

.detail-kop h3 {
  font: 600 16px/1.3 var(--kop-font);
  margin: 0;
}

.detail-kop .bij { font-size: 12px; color: var(--tekst-zacht); }
.detail-kop .label { margin-left: auto; }
/* Twee labels naast elkaar (personen en wedstrijden): alleen de eerste duwt
   naar rechts, anders drijven ze uit elkaar over de hele breedte. */
.detail-kop .label + .label { margin-left: 0; }

/* Wat niet meetelt in de som mag ook niet meelezen als de rest. */
.detail-blok .buiten-som { color: var(--tekst-zacht); font-style: italic; }
.detail-blok .buiten-som .bron { font-style: normal; }

.detail-blok { padding: 0 14px 10px; }
.detail-blok .bron {
  font: 600 11px/1.6 var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
}

.detail-blok ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.detail-blok li .bron { text-transform: none; letter-spacing: 0; }

ul.uitleg-klein { margin: 4px 14px 12px; padding-left: 20px; }
ul.uitleg-klein li { margin-bottom: 4px; }

/* De weergavekeuze in de kop: klein en rustig, het is geen hoofdknop. */
.dichtheid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  font: 600 var(--kop-tabel)/1 var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zacht);
}

.dichtheid select {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tekst);
  height: var(--hoogte-veld);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--papier);
  padding: 0 6px;
}


/* --------------------------------------------------- merk in de kop --- */
/* Het RRR-icoon is oranje en wit op donker getekend. Op de witte kop
   verdwijnen de witte delen, dus het krijgt een eigen donkere tegel. */
.kop-titel { display: flex; align-items: center; gap: 10px; }
.kop-tegel {
  display: grid; place-items: center;
  /* Breed, niet vierkant: het RRR-icoon van 02-09-2026 is ruim twee keer zo
     breed als hoog. In een vierkant zou het op een derde van de tegel
     krimpen. */
  width: 82px; height: 38px; flex: 0 0 82px; padding: 0 6px; box-sizing: border-box;
  background: var(--tekst); border-radius: 8px;
}
.kop-tegel .kop-icoon { height: 30px; width: auto; max-width: 100%; display: block; }

/* Wie zit hier, en de knop om weg te gaan. Staat er alleen als de inlog
   aanstaat - lokaal bij jezelf is er niemand om te zijn. */
.wie-ben-ik { display: flex; align-items: center; gap: 8px; }
/* Moet erbij: `display: flex` verslaat het `display: none` dat de browser
   zelf aan [hidden] hangt, en dan staat er een uitlogknop terwijl er niemand
   is ingelogd. */
.wie-ben-ik[hidden] { display: none; }
.wie-naam {
  font-size: 12px; color: var(--tekst-zacht); white-space: nowrap;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.knop.knop-stil {
  background: none; border: 1px solid var(--lijn);
  color: var(--tekst-zacht);
}
.knop.knop-stil:hover { background: var(--vlak); color: var(--tekst); }

/* Een storing die het hele scherm ongeldig maakt, hoort er ook zo uit te
   zien - niet als een regel in een tabel tussen de rest. */
.melding-inline.fout {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 6px;
  background: var(--rood-zacht); color: var(--tekst);
  border-left: 4px solid var(--rood);
}

/* De seizoenskeuze boven het dashboard. Klein gehouden: het is een
   randvoorwaarde bij de cijfers, geen kop. */
.dashboard-seizoen { margin: 0 0 10px; }
.dashboard-seizoen select { margin-left: 6px; }