/* ============================================================
   SCORR 2.0 — Design Tokens · Marker: SCORR_STYLING_v1
   Bron: SCORR brand-identity
   ------------------------------------------------------------
   CANONIEK (brand-fundament, 2026-06-03):
   - App-achtergrond = Deep Navy  --scorr-deep  #0A0E27
   - #07091C blijft als --scorr-deeper, ALLEEN als subtiele
     accent-tint (bv. inputs/diepe kaarten), niet als pagina-bg.
   - Elke pagina: scorr_head() gebruiken + body.scorr-themed,
     kleuren via var(--scorr-*) — geen hardcoded hex.
   ============================================================ */

:root {
  /* Primaire merkkleuren (1:1 uit 1.0) */
  --scorr-electric:      #00FF88;
  --scorr-electric-dim:  #00CC6A;
  --scorr-deep:          #0A0E27;
  --scorr-slate:         #1E2749;
  --scorr-accent:        #FF3D71;
  --scorr-warning:       #FFB800;
  --scorr-cloud:         #F5F7FA;
  --scorr-cyan:          #00DDFF;
  --scorr-card:          #FFFFFF;

  /* Aanvullende tinten (behoud uit 2.0) */
  --scorr-deeper:        #07091C;
  --scorr-slate-light:   #2A3460;
  --scorr-slate-soft:    #4A5880;
  --scorr-text-muted:    #8899BB;
  --scorr-text-dim:      #5d6da3;
  --scorr-text-faint:    #94a3b8;
  --scorr-text-bright:   #F0F4FF;

  /* Status */
  --scorr-success:       #00FF88;
  --scorr-danger:        #FF3D71;
  --scorr-info:          #00DDFF;

  /* Backwards-compat aliassen */
  --g:        var(--scorr-electric);
  --dg:       var(--scorr-electric-dim);
  --n:        var(--scorr-deep);   /* canoniek: brand navy #0A0E27 (was #07091C) */
  --nm:       var(--scorr-deep);
  --nk:       var(--scorr-slate);
  --rose:     var(--scorr-accent);
  --green:    var(--scorr-electric);
  --navy:     var(--scorr-deep);
  --navy-mid: var(--scorr-slate);
  --navy-light: var(--scorr-slate-light);

  /* Typography */
  --scorr-font:          'Lexend', system-ui, -apple-system, sans-serif;
  --scorr-font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;
  --scorr-fw-thin:       300;
  --scorr-fw-normal:     400;
  --scorr-fw-medium:     500;
  --scorr-fw-semibold:   600;
  --scorr-fw-bold:       700;
  --scorr-fw-black:      900;
  --scorr-letter-tight:  -2px;
  --scorr-letter-normal: -1px;
  --scorr-letter-wide:   2px;

  /* Spacing / Radii / Shadows */
  --scorr-radius-sm:     6px;
  --scorr-radius-md:     10px;
  --scorr-radius-lg:     14px;
  --scorr-radius-xl:     20px;
  --scorr-radius-pill:   999px;
  --scorr-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.15);
  --scorr-shadow-md:     0 4px 16px rgba(0, 0, 0, 0.25);
  --scorr-shadow-glow:   0 0 24px rgba(0, 255, 136, 0.3);

  /* Transitions */
  --scorr-trans-fast:    .15s ease;
  --scorr-trans-normal:  .25s ease;
  --scorr-trans-slow:    .4s ease;
}

body.scorr-themed {
  background: var(--scorr-deep);
  color: var(--scorr-text-bright);
  font-family: var(--scorr-font);
}

::selection { background: var(--scorr-electric); color: var(--scorr-deep); }

/* ============================================================
   SCORR — Ruimtenorm · Marker: SCORR_SPACING_v1
   Vastgesteld 2026-08-06. Geldt voor het hele platform.
                     mobiel   tablet/pc
   rand links/rechts   20px      32px
   tussen secties      20px      32px
   tussen vlakken       5px      15px
   rond witte streep   20px      32px
   De variabelen schakelen automatisch om op 768px, dus de klassen
   hoeven nergens per weergave apart gezet te worden.
   Gebruik de klassen hieronder in plaats van losse marges.
   ============================================================ */

/* Basis = tablet en pc (>= 768px). Mobiel overschrijft hieronder. */
:root {
  --scorr-rand:    32px;   /* links/rechts van de pagina */
  --scorr-sectie:  32px;   /* tussen twee secties */
  --scorr-vlak:    15px;   /* tussen vlakken binnen dezelfde sectie */
  --scorr-streep:  32px;   /* boven en onder een horizontale streep */
}

@media (max-width: 767px) {
  :root {
    --scorr-rand:    20px;
    --scorr-sectie:  20px;
    --scorr-vlak:     5px;
    --scorr-streep:  20px;
  }
}

/* Horizontale streep — geldt in elke weergave. */
.scorr-streep {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .9);
  margin-top: var(--scorr-streep);
  margin-bottom: var(--scorr-streep);
}
/* Tekst direct rond een streep houdt dezelfde afstand aan. */
.scorr-streep + *          { margin-top: 0; }
* + .scorr-streep          { margin-top: var(--scorr-streep); }

/* De ruimtenorm — geldt in elke weergave, en dus ook op mobiel. */
.scorr-pagina {
  padding-left:  var(--scorr-rand);
  padding-right: var(--scorr-rand);
}
.scorr-sectie + .scorr-sectie { margin-top: var(--scorr-sectie); }
/* Losse sectie die niet op een andere sectie volgt (bijv. na een <form>). */
.scorr-sectie-boven { margin-top: var(--scorr-sectie); }
.scorr-sectie > .scorr-vlak + .scorr-vlak { margin-top: var(--scorr-vlak); }
.scorr-vlakken { display: flex; flex-direction: column; gap: var(--scorr-vlak); }
.scorr-secties { display: flex; flex-direction: column; gap: var(--scorr-sectie); }

/* ============================================================
   Ruimtenorm toegepast op de rol-omgevingen · SCORR_SPACING_APP_v1
   De app-pagina's zetten hun content in een wrapper direct onder
   <main> met een Tailwind-padding (p-3 / p-4 / ...). Die trekken we
   op mobiel gelijk naar de norm van 20px, zonder elke pagina te
   hoeven aanpassen. Hogere specificiteit dan de losse .p-3, dus
   geen !important nodig.
   ============================================================ */
main > .p-2, main > .p-3, main > .p-4, main > .p-5, main > .p-6, main > .p-8,
main > .px-2, main > .px-3, main > .px-4, main > .px-5, main > .px-6, main > .px-8 {
  padding-left:  var(--scorr-rand);
  padding-right: var(--scorr-rand);
}
main .scorr-vlakken > * + * { margin-top: var(--scorr-vlak); }

/* ============================================================
   Ruimtenorm op de coach-structuur · SCORR_SPACING_COACH_v1
   De coach-pagina's zetten hun marge op <main> zelf (inline
   padding of Tailwind p-3/md:p-5) in plaats van op een wrapper
   eronder. Daardoor greep SCORR_SPACING_APP_v1 daar niet.
   De inline padding is uit die pagina's gehaald; deze regel zet
   hem centraal, en schakelt dus mee met de twee schalen.
   Wie bewust geen rand wil (bv. een volledig beeldvullende
   wisselweergave) houdt zijn eigen inline padding — die wint.
   ============================================================ */
main.coach-main { padding: var(--scorr-rand); }

/* Ritme tussen secties binnen main; verving space-y-3 / md:space-y-4. */
main.coach-main.scorr-ritme > * + * { margin-top: var(--scorr-sectie); }

/* ============================================================
   Ruimtenorm — de verticale helft · SCORR_SPACING_APP_v2
   v1 hierboven trok alleen links en rechts naar de norm. Boven en
   onder bleef de Tailwind-waarde staan (p-4 = 16px), en de afstand
   tussen blokken kwam uit losse mb-/space-y-klassen: 8, 12, 16 of
   24px — nooit 20 en nooit 5. Daardoor klopte de rand wel en het
   ritme niet, buiten de coach-structuur.

   Hieronder in deze volgorde:
     1. de content-wrapper krijgt ook boven en onder de rand
     2. verticale ritmes binnen een sectie  -> vlak   (5px / 15px)
     3. blokken direct onder de wrapper     -> sectie (20px / 32px)
   Stap 3 staat bewust na stap 2: een wrapper met space-y-4 raakt
   beide regels, en daar moet de sectie-afstand winnen.

   !important is nodig omdat Tailwind zijn eigen space-y-regels met
   hogere specificiteit levert (.space-y-4 > :not([hidden]) ~ ...).
   ============================================================ */

/* 1 — rand boven en onder, net als links en rechts */
main > .p-2, main > .p-3, main > .p-4, main > .p-5, main > .p-6, main > .p-8,
main > .py-2, main > .py-3, main > .py-4, main > .py-5, main > .py-6, main > .py-8 {
  padding-top:    var(--scorr-rand);
  padding-bottom: var(--scorr-rand);
}

/* 2 — vlakken binnen dezelfde sectie */
main .space-y-1 > * + *, main .space-y-2 > * + *, main .space-y-3 > * + *,
main .space-y-4 > * + *, main .space-y-5 > * + *, main .space-y-6 > * + *,
main .space-y-8 > * + * {
  margin-top: var(--scorr-vlak) !important;
}
main .flex-col.gap-1, main .flex-col.gap-2, main .flex-col.gap-3,
main .flex-col.gap-4, main .flex-col.gap-5, main .flex-col.gap-6,
main .grid.gap-1, main .grid.gap-2, main .grid.gap-3,
main .grid.gap-4, main .grid.gap-5, main .grid.gap-6 {
  gap: var(--scorr-vlak) !important;   /* ook horizontaal: tegels naast elkaar zijn ook vlakken */
}

/* 3 — secties: de blokken op het eerste niveau onder de wrapper.
       De eigen mb-* van die blokken gaat eruit, anders stapelt het. */
main > .p-2 > *, main > .p-3 > *, main > .p-4 > *,
main > .p-5 > *, main > .p-6 > *, main > .p-8 > * {
  margin-bottom: 0 !important;
}
main > .p-2 > * + *, main > .p-3 > * + *, main > .p-4 > * + *,
main > .p-5 > * + *, main > .p-6 > * + *, main > .p-8 > * + * {
  margin-top: var(--scorr-sectie) !important;
}

/* 4 — een doorgetrokken witte streep houdt boven en onder de
       streep-afstand aan, ook als hij als <hr> staat. */
main hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .9);
  margin-top:    var(--scorr-streep);
  margin-bottom: var(--scorr-streep);
}

/* ============================================================
   Rond een doorgetrokken streep · SCORR_SPACING_STREEP_v2
   Afgesproken: boven en onder een streep altijd de streep-afstand
   (20px mobiel, 32px daarboven). In de praktijk kwam die afstand
   uit losse Tailwind-klassen — py-4 boven de lijn (16px), py-3 of
   py-8 eronder (12 of 32px). Vandaar het ongelijke beeld.

   a) de kop van een vlak: het blok met de lijn eronder
   b) de rijen van een lijst met scheidingslijnen (divide-y)
   ============================================================ */

/* a — kopbalk binnen een vlak, herkenbaar aan de afronding van het vlak */
main .rounded-lg  > [class*="border-b"],
main .rounded-xl  > [class*="border-b"],
main .rounded-2xl > [class*="border-b"],
main .rounded-3xl > [class*="border-b"] {
  padding-top:    var(--scorr-streep) !important;
  padding-bottom: var(--scorr-streep) !important;
}

/* b — elke rij tussen twee scheidingslijnen houdt dezelfde afstand */
main .divide-y > * {
  padding-top:    var(--scorr-streep) !important;
  padding-bottom: var(--scorr-streep) !important;
}

/* ============================================================
   Losse marges naar de norm · SCORR_SPACING_MARGE_v1
   Buiten space-y en gap wordt de afstand vaak met een losse
   mb-/mt-klasse gezet. Die vertalen we naar de twee maten die de
   norm kent, zodat er geen 4, 8, 12, 16 of 24px meer voorkomt:
     klein (1 t/m 3, dus 4-12px)  -> vlak   · hoort bij dezelfde sectie
     groot (4 en hoger, 16px+)    -> sectie · scheidt twee secties
   ============================================================ */
main .mb-1, main .mb-2, main .mb-3, main .my-1, main .my-2, main .my-3 {
  margin-bottom: var(--scorr-vlak) !important;
}
main .mt-1, main .mt-2, main .mt-3, main .my-1, main .my-2, main .my-3 {
  margin-top: var(--scorr-vlak) !important;
}
main .mb-4, main .mb-5, main .mb-6, main .mb-8, main .my-4, main .my-6, main .my-8 {
  margin-bottom: var(--scorr-sectie) !important;
}
main .mt-4, main .mt-5, main .mt-6, main .mt-8, main .my-4, main .my-6, main .my-8 {
  margin-top: var(--scorr-sectie) !important;
}

/* ============================================================
   Verticale streep · SCORR_SPACING_STREEP_VERT_v1
   Een doorgetrokken streep tussen twee kolommen krijgt links en
   rechts dezelfde afstand als een horizontale streep boven en
   onder. De buitenrand van de pagina houdt zijn eigen rand.
   ============================================================ */
main .divide-x > * {
  padding-left:  var(--scorr-streep) !important;
  padding-right: var(--scorr-streep) !important;
}
main .rounded-lg  > [class*="border-r"], main .rounded-lg  > [class*="border-l"],
main .rounded-xl  > [class*="border-r"], main .rounded-xl  > [class*="border-l"],
main .rounded-2xl > [class*="border-r"], main .rounded-2xl > [class*="border-l"] {
  padding-left:  var(--scorr-streep) !important;
  padding-right: var(--scorr-streep) !important;
}

/* ============================================================
   Tapdoelen · SCORR_TAP_v2
   v1 zette 44px hoogte en inline-flex op ELKE link of knop met een
   afronding of horizontale padding. Dat blies ook de kleine chips
   binnen kaarten op — op het coach-dashboard liepen de knoppen
   Selectie / Stats / Wedstrijden daardoor over de teamnaam heen.

   Nu geldt de maat alleen waar hij hoort: in een knoppenrij die als
   zodanig is aangemerkt (.scorr-knoprij), of in een rij die direct
   onder de content-wrapper hangt — dus niet diep in een kaart.
   Verder geen display-wijziging meer: een block-link blijft block.
   ============================================================ */
@media (max-width: 767px) {
  main .scorr-knoprij > a,
  main .scorr-knoprij > button,
  main .scorr-knoprij-breed > a,
  main .scorr-knoprij-breed > button,
  main > [class*="p-"] > .flex.flex-wrap > a[class*="rounded"],
  main > [class*="p-"] > .flex.flex-wrap > button[class*="rounded"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
  }
}

/* ============================================================
   Leesbaarheid · SCORR_TEKSTBODEM_v1
   Ondergrens van 11px voor labels op een telefoon. De waarden in de
   bronbestanden zijn zelf opgetrokken (zie de markers daar); deze
   regel vangt alleen de Tailwind-maatwerkklassen af, die overal
   verspreid staan.

   Bewust uitgezonderd: de mobiele wisselweergave (.wbm-pane) en het
   coach-dashboard (.cdash-*). Daar is klein lettertype de opzet —
   een heel veld, respectievelijk het hele dashboard, in één scherm.
   Het dashboard is de referentie voor de uitstraling; een bodem van
   11px maakt de kaarten hoger en breekt precies dat.
   ============================================================ */
@media (max-width: 767px) {
  main .text-\[10px\]:not(.wbm-pane *):not(.cdash-next *):not(.cdash-snel *):not(.cdash-greet *),
  main .text-\[9px\]:not(.wbm-pane *):not(.cdash-next *):not(.cdash-snel *):not(.cdash-greet *),
  main .text-\[8px\]:not(.wbm-pane *):not(.cdash-next *):not(.cdash-snel *):not(.cdash-greet *),
  main .text-\[7px\]:not(.wbm-pane *):not(.cdash-next *):not(.cdash-snel *):not(.cdash-greet *) {
    font-size: 11px !important;
  }
}

/* ============================================================
   Tabellen · SCORR_TABEL_SCROLL_v1
   Een tabel met vier of meer kolommen is breder dan een telefoon.
   Zonder omhulsel wordt de hele pagina breder dan het scherm en
   schuift alles heen en weer. Met dit omhulsel scrolt alleen de
   tabel, en blijft de pagina zelf staan.
   ============================================================ */
.scorr-tabelwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.scorr-tabelwrap > table { min-width: max-content; }

/* Zonder dit werkt het omhulsel niet: <main> staat als flex-item naast
   de zijbalk, en een flex-item krimpt standaard niet onder de breedte
   van zijn inhoud. Daardoor werd de hele pagina breder dan het scherm
   in plaats van dat de tabel ging scrollen. */
main.flex-1, main[class*="flex-1"] { min-width: 0; }
main > *, main .scorr-tabelwrap { min-width: 0; }

/* ============================================================
   Naast elkaar in plaats van onder elkaar · SCORR_COMPACT_v1
   Een vlak dat niets anders bevat dan een groot getal met een klein
   label eronder, kost drie regels hoogte terwijl het er één hoeft te
   zijn. Op een telefoon scheelt dat per tegel ongeveer de helft, en
   dus flink wat scrollen.

   Alleen onder 768px, en alleen waar het patroon exact klopt: een
   groot getal met daarnaast of daaronder een klein label. Werkt via
   :has(), dus zonder de HTML van 34 losse plekken aan te raken.
   Terugdraaien = dit blok weghalen.
   ============================================================ */
@media (max-width: 767px) {
  main [class*="rounded"]:has(> [class*="text-2xl"] + [class*="text-xs"]),
  main [class*="rounded"]:has(> [class*="text-3xl"] + [class*="text-xs"]),
  main .card:has(> [class*="text-2xl"] + [class*="text-xs"]),
  main .stat-kaart:has(> [class*="text-2xl"] + [class*="text-xs"]) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--scorr-vlak);
  }
  /* Het label mag krimpen, het getal niet. */
  main [class*="rounded"]:has(> [class*="text-2xl"] + [class*="text-xs"]) > [class*="text-2xl"],
  main .card:has(> [class*="text-2xl"] + [class*="text-xs"]) > [class*="text-2xl"] {
    flex-shrink: 0;
    line-height: 1;
  }
}

/* ============================================================
   Knoppenrijen · SCORR_KNOPRIJ_v2
   v1 gaf elke link met een afronding in een flex-wrap-rij de halve
   breedte. Dat gold ook voor rijtjes binnen een kaart, die daardoor
   uit hun kaart braken. Nu alleen op paginaniveau of waar de rij
   expliciet als knoppenrij is aangemerkt.
   ============================================================ */
@media (max-width: 767px) {
  main .scorr-knoprij > a[class*="rounded"],
  main .scorr-knoprij > button[class*="rounded"],
  main > [class*="p-"] > .flex.flex-wrap > a[class*="rounded"],
  main > [class*="p-"] > .flex.flex-wrap > button[class*="rounded"] {
    flex: 1 1 calc(50% - var(--scorr-vlak));
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  main .scorr-knoprij-breed > a[class*="rounded"],
  main .scorr-knoprij-breed > button[class*="rounded"] {
    flex: 1 1 100% !important;
  }
}

/* Lucht tussen het icoon en het woord erachter. SCORR_KNOPICOON_v1 */
main button, main a[class*="rounded"] { gap: .45em; }

/* ============================================================
   Keuzelijsten · SCORR_SELECT_v1
   Het systeempijltje van een keuzelijst is donkerblauw. In een donker
   vlak zie je het niet. Hieronder een eigen pijl in de lichte tint,
   maar alleen waar de keuzelijst zelf donker is — een lijst op een
   witte achtergrond houdt het gewone pijltje.
   ============================================================ */
main select.scorr-select,
main select[style*="#141A33"], main select[style*="#1E2749"],
main select[style*="#0E1330"], main select[style*="#07091C"],
main select[style*="rgba(255,255,255,.06)"],
main select[style*="rgba(255,255,255,.08)"],
main select[style*="rgba(255,255,255,.04)"] {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe5ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 32px;
}

/* ============================================================
   Zoek-, filter- en sorteerrij · SCORR_FILTERRIJ_v1
   Een zoekveld met filters ernaast wrapte op een telefoon tot een
   rafelige rij: het zoekveld over de volle breedte, de keuzelijsten
   eronder op hun eigen tekstbreedte. Nu: zoekveld op de eerste regel
   over de volle breedte, de filters daaronder gelijk verdeeld.
   ============================================================ */
.scorr-filterrij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scorr-vlak);
  align-items: center;
}
.scorr-filterrij > input[type="search"],
.scorr-filterrij > input[type="text"] { grid-column: 1 / -1; }
.scorr-filterrij > * {
  min-width: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}
@media (min-width: 768px) {
  .scorr-filterrij { grid-template-columns: 2fr 1fr 1fr; }
  .scorr-filterrij > input[type="search"],
  .scorr-filterrij > input[type="text"] { grid-column: auto; }
}

/* ============================================================
   Kop boven een filterrij · SCORR_FILTERKOP_v1
   "Weergave", "Periode" en "Sorteer op" stonden als los woord vóór
   de knoppen in dezelfde rij. Daardoor las het als een knop die niet
   werkte. Ze staan nu als kop boven hun eigen rij.
   ============================================================ */
.scorr-filterkop {
  flex: 1 0 100%;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8899BB;
  margin-bottom: var(--scorr-vlak);
}

/* ============================================================
   Trainingen · SCORR_TRAIN_LAYOUT_v1
   De filterrij en de rijen zelf stonden als losse elementen in een
   flex-wrap, wat op een telefoon een rafelig blok gaf. Nu:
     - maand en teamfilter naast elkaar op de eerste regel
     - vorige / vandaag / volgende eronder, gelijk verdeeld
     - per training de tekst boven, de vier knoppen twee bij twee
   ============================================================ */
.scorr-trainfilter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scorr-vlak);
}
.scorr-trainfilter > .scorr-trainnav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--scorr-vlak);
}
.scorr-trainfilter > * { min-width: 0; }
.scorr-trainnav > a { text-align: center; }

/* De rij: op een telefoon onder elkaar, daarboven naast elkaar. */
.scorr-trainrij { display: flex; flex-direction: column; gap: var(--scorr-vlak); }
.scorr-trainacties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scorr-vlak);
}
.scorr-trainacties > a,
.scorr-trainacties > form > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 40px;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .scorr-trainfilter { grid-template-columns: auto auto 1fr; }
  .scorr-trainfilter > .scorr-trainnav { grid-column: auto; grid-template-columns: auto auto auto; justify-self: start; }
  .scorr-trainrij { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--scorr-sectie); }
  .scorr-trainrij > div:first-child { flex: 1; min-width: 0; }
  .scorr-trainacties { grid-template-columns: repeat(4, auto); flex-shrink: 0; }
  .scorr-trainacties > a,
  .scorr-trainacties > form > button { width: auto; min-height: 34px; }
}

/* Zelfde geval buiten coach: <main> met een eigen inline padding.
   SCORR_SPACING_HOOFD_v1 */
main.scorr-hoofd { padding: var(--scorr-rand); }

/* ============================================================
   Zoeken, filteren en sorteren · SCORR_ZOEK_v1
   Hoort bij app/partials/scorr_zoek.php. Op een telefoon staat het
   zoekveld op de eerste regel over de volle breedte en staan de
   keuzelijsten daaronder gelijk verdeeld; vanaf een tablet staat
   alles op één regel.
   ============================================================ */
.scorr-zoek {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scorr-vlak);
  align-items: center;
  margin-bottom: var(--scorr-sectie);
}
.scorr-zoek > .scorr-zoek-veld { grid-column: 1 / -1; }
.scorr-zoek > input,
.scorr-zoek > select {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #E5E7EB;
  color: #374151;
}
.scorr-zoek > input:focus,
.scorr-zoek > select:focus { outline: 2px solid rgba(0,179,106,.45); outline-offset: 1px; }
.scorr-zoek > select:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.scorr-zoek > .scorr-zoek-telling {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #8899BB;
  padding: 0;
  min-height: 0;
}
.scorr-zoek-leeg {
  padding: var(--scorr-sectie) 0;
  text-align: center;
  font-size: 13px;
  color: #8899BB;
}

/* Donkere pagina's (geïmporteerde wedstrijden, statistieken, coaches). */
.scorr-zoek.donker > input,
.scorr-zoek.donker > select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.scorr-zoek.donker > select { background-color: #141A33; }
.scorr-zoek.donker > input::placeholder { color: rgba(255,255,255,.45); }

@media (min-width: 768px) {
  /* Vanaf een tablet alles op één regel, hoeveel keuzelijsten er ook zijn. */
  .scorr-zoek { display: flex; flex-wrap: wrap; }
  .scorr-zoek > .scorr-zoek-veld { flex: 2 1 220px; }
  .scorr-zoek > select { flex: 1 1 150px; }
  .scorr-zoek > .scorr-zoek-telling { flex: 1 0 100%; }
}

/* Een kaart of tabelrij die door het zoekveld is weggefilterd. Alleen
   het hidden-kenmerk volstaat niet: een Tailwind-klasse als .flex zet
   display terug aan. SCORR_ZOEK_v1 */
.scorr-verborgen { display: none !important; }

/* ============================================================
   Geïmporteerde wedstrijden · SCORR_IMPORTRIJ_v1
   Zes kolommen naast elkaar past niet op een telefoon. Onder de
   768px is elke wedstrijd een kaart met de velden onder elkaar en
   een klein label erboven; daarboven staan de kolommen weer naast
   elkaar en verdwijnen de labels.
   ============================================================ */
.scorr-importkop { display: none; }

.scorr-importrij {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--scorr-vlak);
  align-items: center;
  padding: var(--scorr-rand);
  border-top: 1px solid rgba(255,255,255,.05);
}
.scorr-importrij > .imp-team,
.scorr-importrij > .imp-tegen,
.scorr-importrij > .imp-onder { grid-column: 1 / -1; }

/* Accepteren en weigeren per regel · SCORR_IMPORTACTIE_v1
   Op een telefoon twee icoonknoppen rechtsboven in de kaart, naast het
   vinkje. Vanaf een tablet krijgen ze een eigen kolom achteraan. */
.scorr-importrij { grid-template-columns: auto 1fr auto; }
.scorr-importrij > .imp-acties { grid-column: 3; grid-row: 1; justify-self: end; }
.imp-acties { display: flex; gap: 6px; }
.imp-actie {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  width: 38px; height: 38px;
  border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: #8899BB;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.imp-actie span { display: none; }
.imp-actie.ja        { color: var(--scorr-electric); border-color: rgba(0,255,136,.35); background: rgba(0,255,136,.10); }
.imp-actie.ja:hover  { background: rgba(0,255,136,.20); }
.imp-actie.nee       { color: var(--scorr-accent);   border-color: rgba(255,61,113,.35); background: rgba(255,61,113,.10); }
.imp-actie.nee:hover { background: rgba(255,61,113,.20); }

.scorr-importrij .imp-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #66789B;
  margin-bottom: 2px;
}
.scorr-importrij input[type="text"],
.scorr-importrij input[type="datetime-local"],
.scorr-importrij select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #111827;
  border: 1px solid rgba(0,0,0,.15);
}
.scorr-importrij input[type="checkbox"] { width: 20px; height: 20px; }
.scorr-importrij .imp-bron,
.scorr-importrij .imp-waarschuwing { font-size: 12px; margin-top: 4px; }
.scorr-importrij .imp-bron { color: #66789B; }
.scorr-importrij .imp-waarschuwing {
  display: inline-flex; align-items: center; gap: .35em;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(255,193,7,.15); color: #FFC107; border: 1px solid rgba(255,193,7,.4);
}
.scorr-importrij .imp-onder { display: flex; align-items: center; gap: var(--scorr-vlak); }
.scorr-importrij .imp-plek {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(0,221,255,.1); color: #00DDFF;
}
.scorr-importrij .imp-onder > select { flex: 1 1 auto; }

@media (min-width: 768px) {
  .scorr-importkop {
    display: grid;
    grid-template-columns: auto 170px 1fr 1fr 210px 96px;
    gap: var(--scorr-sectie);
    align-items: center;
    padding: 10px var(--scorr-rand);
    background: rgba(255,255,255,.04);
    color: #8899BB;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .scorr-importrij {
    grid-template-columns: auto 170px 1fr 1fr 210px 96px;
    gap: var(--scorr-sectie);
    align-items: start;
    /* De 32px-norm geldt voor de paginamarge; als rijhoogte maakt hij de lijst
       twee keer zo lang. Links en rechts dus wel, boven en onder de vlakmaat. */
    padding: var(--scorr-vlak) var(--scorr-rand);
  }
  .scorr-importrij > .imp-acties { grid-column: auto; grid-row: auto; justify-self: start; }
  .scorr-importrij > .imp-team,
  .scorr-importrij > .imp-tegen,
  .scorr-importrij > .imp-onder { grid-column: auto; }
  .scorr-importrij .imp-label { display: none; }
  .scorr-importrij .imp-onder { flex-wrap: wrap; gap: 6px; }
  .scorr-importrij .imp-onder > select { flex: 1 1 100%; }
}


/* Knoppenbalk boven de binnenkomende wedstrijden · SCORR_IMPORTBALK_v1
   Op een telefoon vallen zeven losse knoppen uit elkaar. Twee kolommen zetten
   ze netjes onder elkaar met de twee besluitknoppen naast elkaar onderaan. */
.imp-balk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--scorr-sectie); }
.imp-balk .imp-rek { flex: 1 1 auto; }
@media (max-width: 767px) {
  .imp-balk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .imp-balk .imp-rek { display: none; }
  .imp-balk > * { width: 100%; justify-content: center; text-align: center; }
  .imp-balk > .imp-telling { display: flex; align-items: center; justify-content: flex-start; }
}

/* ============================================================
   Kerncijfer-tegels · SCORR_STATTEGEL_v1
   Een groot getal met een label eronder kost drie regels hoogte
   terwijl het er één hoeft te zijn. Dezelfde ingreep als op het
   dashboard van de beheerder: getal en label naast elkaar.
   ============================================================ */
.scorr-stattegels > div {
  display: flex;
  align-items: baseline;
  gap: .5em;
  padding: 10px 12px !important;
}
.scorr-stattegels > div > div:first-child {
  font-size: 20px !important;
  line-height: 1.15 !important;
  flex: 0 0 auto;
}
.scorr-stattegels > div > div + div {
  font-size: 11px !important;
  line-height: 1.2;
  min-width: 0;
}
@media (min-width: 768px) {
  .scorr-stattegels > div { padding: 12px 14px !important; }
  .scorr-stattegels > div > div:first-child { font-size: 24px !important; }
}

/* ============================================================
   Actiekaarten · SCORR_ACTIEKAART_v1
   De kaarten op /beheerder/acties.php waren op een telefoon hoger
   dan nodig: ruime binnenmarge, ruime tussenruimte en een meta-regel
   met vier spaties ertussen. Daardoor stonden de knoppen ver naar
   beneden. Hier alleen op mobiel compacter; op een groot scherm
   blijft het zoals het was.
   ============================================================ */
@media (max-width: 767px) {
  .scorr-actiekaart { padding: 12px !important; gap: 10px !important; }
  .scorr-actiekaart > div + div { margin-top: 0 !important; }
  .scorr-actiekaart .text-sm { line-height: 1.35; }
  .scorr-actiekaart .flex.gap-4 { gap: 10px !important; }
  .scorr-actiekaart .mb-1 { margin-bottom: 2px !important; }
  .scorr-actiekaart .mt-1 { margin-top: 2px !important; }
  /* knoppenrij onderin: twee naast elkaar in plaats van onder elkaar */
  .scorr-actiekaart > .flex.gap-2 > form > button,
  .scorr-actiekaart > .flex.gap-2 > button,
  .scorr-actiekaart > .flex.gap-2 > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
  }
}

/* ============================================================
   Letteropmaak · SCORR_TYPO_v1
   ------------------------------------------------------------
   Drie maten, meer niet. Afgeleid van het coach-dashboard:
   "Geen gepland" is de standaard schrijfletter geworden.

     .scorr-titel   kop van een sectie — twee stappen kleiner dan
                    de tekst, licht dikgedrukt, in hoofdletters
     .scorr-tekst   al het gewone schrijfwerk
     .scorr-klein   bijzaken: datum, plaats, knoplabels, toelichting

   De trap loopt in stappen van 1px: 13 / 12 / 11. Wil je alles
   groter of kleiner, verzet dan alleen deze drie waarden — de rest
   van SCORR volgt vanzelf.

   Kleur blijft per plek geregeld; deze klassen raken alleen
   grootte, dikte, regelafstand en hoofdletters.
   ============================================================ */
:root {
  --scorr-letter: 13px;
  --scorr-letter-titel: 12px;
  --scorr-letter-klein: 11px;
  --scorr-letter-cijfer: 18px;
  --scorr-letter-titel-gewicht: 600;
}

/* Op een telefoon is 11px voor bijzaken precies goed; op een groot scherm
   kijk je van verder weg en wordt het turen. Vanaf 768px is 'klein' daarom
   even groot als de gewone tekst — het onderscheid ligt daar in kleur en
   plaatsing, niet in grootte. Titels blijven wel hun eigen maat houden. */
@media (min-width: 768px) {
  :root {
    --scorr-letter-klein: var(--scorr-letter);
  }
}

.scorr-titel {
  font-size: var(--scorr-letter-titel) !important;
  line-height: 1.25 !important;
  font-weight: var(--scorr-letter-titel-gewicht) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.scorr-tekst {
  font-size: var(--scorr-letter) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: normal;
}
.scorr-klein {
  font-size: var(--scorr-letter-klein) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  letter-spacing: normal;
}

/* Cijfers zijn geen schrijfwerk: een stand of teller mag opvallen. */
.scorr-cijfer {
  font-size: var(--scorr-letter-cijfer) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Uitrol van de letteropmaak · SCORR_TYPO_UITROL_v2
   ------------------------------------------------------------
   Hiervoor stonden er door de app heen ruim vijfduizend losse
   lettermaten: text-xs, text-sm, text-lg, font-bold, font-black
   en honderden inline font-size-regels. Dit blok brengt ze terug
   tot de drie maten uit SCORR_TYPO_v1.

   Volgorde:
     1. alles in de app is standaardtekst   (13px / 400)
     2. wat als bijzaak bedoeld was → klein (11px / 400)
     3. wat een kop is → titel              (12px / 600 / caps)

   De regels slaan elementen met een eigen inline font-size over
   (:not([style*="font-size"])). Die inline waarden zijn in de
   bestanden zelf al naar dezelfde drie tokens omgezet, zodat ook
   daar niets buiten de norm valt — en zodat een bewuste uitzondering
   mogelijk blijft.

   Afwijken kan met .scorr-cijfer (standen en tellers) of door
   class="scorr-geen-typo" op de <body> te zetten (bv. het
   wisselveld, waar elf spelers samen op één scherm moeten).
   ============================================================ */

/* ── 1. Standaardtekst ─────────────────────────────────────── */
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  :is(p, span, div, a, li, td, th, dt, dd, label, button, summary,
      input, select, textarea, option, figcaption, blockquote,
      strong, b, em, i, time, address, legend, output):not([style*="font-size"]) {
  font-size: var(--scorr-letter) !important;
  font-weight: 400 !important;
  letter-spacing: normal;
}

/* ── 2. Bijzaken ───────────────────────────────────────────── */
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  :is(small, .text-xs, .scorr-klein,
      [class*="text-[9px]"], [class*="text-[10px]"],
      [class*="text-[11px]"], [class*="text-[12px]"]):not([style*="font-size"]) {
  font-size: var(--scorr-letter-klein) !important;
}

/* ── 3. Koppen ─────────────────────────────────────────────── */
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  :is(h1, h2, h3, h4, h5, h6, th, .scorr-titel,
      [class*="uppercase"], [class*="tracking-wide"]):not([style*="font-size"]) {
  font-size: var(--scorr-letter-titel) !important;
  font-weight: var(--scorr-letter-titel-gewicht) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.25;
}

/* Wat binnen een kop staat (bv. een <span> met icoon en tekst) moet de
   kop volgen. Zonder deze regel wint de standaardtekst hierboven en
   valt het woord in de kop terug naar 13px/400. */
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  :is(h1, h2, h3, h4, h5, h6, th, .scorr-titel, .scorr-klein, .scorr-cijfer,
      [class*="uppercase"], [class*="tracking-wide"]) *:not([style*="font-size"]):not([hidden]) {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit;
}

/* Een element dat zélf .scorr-tekst of .scorr-klein draagt, heeft die keuze
   bewust gekregen — die gaat vóór de automatische kop-herkenning hierboven.
   Zonder deze regel werd bijvoorbeeld de voornaam op het coach-dashboard
   (een <h1> die we juist gewone tekst wilden) alsnog een kop in hoofdletters. */
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  .scorr-tekst:not([style*="font-size"]):not([hidden]) {
  font-size: var(--scorr-letter) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  .scorr-klein:not([style*="font-size"]):not([hidden]) {
  font-size: var(--scorr-letter-klein) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Uitzonderingen ────────────────────────────────────────── */
/* Cijfers zijn geen schrijfwerk: een stand of teller mag opvallen.
   De extra :not()-jes zijn er om deze regel zwaarder te laten wegen
   dan regel 1 hierboven; zonder dat wint de standaardmaat. */
body:not(.scorr-geen-typo) :is(main, [id$="-sidebar"], #coach-topbar)
  .scorr-cijfer:not([style*="font-size"]):not([hidden]) {
  font-size: var(--scorr-letter-cijfer) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Knoppen · SCORR_KNOP_v3
   ------------------------------------------------------------
   Eén afspraak voor de hele app op een telefoon:
   knoppen vullen samen de volle breedte binnen de 20px marge.
   Passen ze naast elkaar, dan naast elkaar met gelijke breedte;
   past het niet, dan zakt de volgende naar de regel eronder en
   vult die regel op zijn beurt weer helemaal.

   Werkt zonder de HTML aan te raken: `flex: 1 1 0` verdeelt de
   ruimte gelijk, `min-width: max-content` zorgt dat een knop
   nooit door zijn eigen tekst heen breekt maar netjes wrapt.

   Wat géén knop is en dus met rust blijft:
     - ronde icoonknoppen (rounded-full, of een vaste w-6..w-11)
     - losse tekstlinks zonder achtergrond of rand
     - alles met de klasse .scorr-geen-knop
   ============================================================ */
@media (max-width: 767px) {

  /* Gedeeld uiterlijk: raakbaar en gecentreerd. */
  main :is(a, button, input[type="submit"])[class*="rounded"]:not([class*="rounded-full"]):not(.scorr-geen-knop):not([class*="w-6"]):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):not([class*="w-10"]):not([class*="w-11"]):not([class*="w-12"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    text-align: center;
    line-height: 1.2;
    /* smallere zijmarge zodat er meer knoppen naast elkaar passen;
       de tekst zelf blijft de maat bepalen */
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* 1. In een rij: gelijk verdeeld, samen de volle breedte. */
  main [class*="flex"] > :is(a, button, input[type="submit"])[class*="rounded"]:not([class*="rounded-full"]):not(.scorr-geen-knop):not([class*="w-6"]):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):not([class*="w-10"]):not([class*="w-11"]):not([class*="w-12"]) {
    flex: 1 1 0;
    min-width: max-content;
  }

  /* Een <form> om één knop telt als de knop zelf. */
  main [class*="flex"] > form:has(> :is(button, input[type="submit"])) {
    flex: 1 1 0;
    min-width: max-content;
    display: flex;
  }
  main [class*="flex"] > form:has(> :is(button, input[type="submit"])) > :is(button, input[type="submit"]) {
    width: 100%;
  }

  /* 2. Losse knop buiten een rij: over de volle breedte. */
  main :not([class*="flex"]):not([class*="grid"]) > :is(a, button, input[type="submit"])[class*="rounded"]:not([class*="rounded-full"]):not(.scorr-geen-knop):not([class*="w-6"]):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):not([class*="w-10"]):not([class*="w-11"]):not([class*="w-12"]) {
    display: flex;
    width: 100%;
  }

  /* 3. Een invoerveld of keuzelijst tussen de knoppen krijgt een
        eigen regel — anders knijpt het de knoppen samen. */
  main [class*="flex"] > :is(input[type="date"], input[type="search"], input[type="text"], select):not(.scorr-geen-knop) {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* 4. Decoratieve scheidingstekens tussen knoppen vallen weg. */
  main [class*="flex"] > span.mx-2 { display: none; }
}

/* De importregels zijn niet meer bewerkbaar: waardes staan als tekst.
   SCORR_IMPORT_LEIDEND_v1 */
.scorr-importrij .imp-waarde {
  font-size: var(--scorr-letter);
  line-height: 1.35;
  color: #fff;
}
.scorr-importrij .imp-onder { flex-wrap: wrap; }