:root {
  --ktm-dark: #141310;
  --ktm-light: #f5f3ef;
  --ktm-card: #ffffff;
  --ktm-accent: #e8491c;
  --ktm-accent-dark: #c53b14;
  --ktm-text: #1a1917;
  --ktm-text-muted: #7d7a74;
  --ktm-border: #e9e6e0;
  --ktm-groen: #1f8a4c;
  --ktm-groen-donker: #145c33;
  --ktm-groen-bg: #e6f4ea;
  --ktm-rood-bg: #fbe9e4;
  --ktm-geel: #d4a017;
  --ktm-geel-donker: #9c7610;
  --font-kop: "Truculenta", "Barlow Condensed", sans-serif;
  --font-tekst: "Barlow Condensed", sans-serif;
  --ktm-lamp-aan: #2ecc40;
  --ktm-lamp-uit: #1c5c34;

  /* Triple Wizardz-moodboard (merkkleuren, nog los van de huidige UI-accentkleur
     hierboven) — alleen "sassem geel" wordt vooralsnog echt gebruikt (knop-hover). */
  --ktm-wizardz-oranje: #e6611a;
  --ktm-roma-rood: #7e0000;
  --ktm-navi-blauw: #030048;
  --ktm-sassem-geel: #e1a61a;
  --ktm-wizard-roze: #f49f9f;
  --ktm-tol-roze: #c52675;
  --ktm-burg-rood: #e30a17;
  --ktm-burg-groen: #169a69;
  --ktm-burg-paars: #b0288e;
  --ktm-burg-geel: #f6ee21;
}

* { box-sizing: border-box; }

/* Alles is in rem opgebouwd — deze ene regel bepaalt de basisgrootte voor de hele
   app. Op 100% is 1rem de browser-standaard 16px, zodat koppen, menu's en tekst
   overal normale, responsive-website-grootte hebben. */
html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  color: var(--ktm-text);
  background: var(--ktm-light);
}

h1, h2 {
  font-family: var(--font-kop);
  font-weight: 600;
  margin: 0;
}

a { color: inherit; }

/* Vaste lay-out: één horizontale topbalk (logo + navigatie + schakelaars) blijft altijd
   zichtbaar. Geen vaste zijbalk meer — het Prognose-paneel rechts is een uitklapbaar
   paneel dat standaard dicht staat, geen vast onderdeel van de lay-out. */
:root {
  --ktm-topbalk-hoogte: 60px;
  --ktm-prognose-breedte: 380px;
}

.app-layout { min-height: 100vh; }

.merk-badge {
  display: inline-flex;
  color: var(--ktm-accent);
  flex-shrink: 0;
}
.merk-badge img { border-radius: 10px; display: block; }

/* Losstaand gebruikt: het merk in de topbalk (kleur via .topbalk .merk hieronder) én
   de gecentreerde merknaam op de login-kaart. */
.merk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-kop);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ktm-text-muted);
}
.topbalk .merk { color: var(--ktm-text); flex-shrink: 0; }

.hoofdgebied { min-height: 100vh; background: var(--ktm-light); transition: margin-left 0.2s ease; }

.topbalk {
  position: sticky;
  top: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--ktm-topbalk-hoogte);
  padding: 0 1.5rem;
  background: var(--ktm-card);
  border-bottom: 1px solid var(--ktm-border);
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.4rem;
  color: var(--ktm-text);
  cursor: pointer;
}
.hamburger::before { content: none; }
.hamburger svg { width: 20px; height: 20px; display: block; }

.topbalk-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: 0.6rem; }
.topbalk-nav { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.topbalk-link {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-family: var(--font-kop);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ktm-text-muted);
  text-decoration: none;
}
.topbalk-link:hover { background: var(--ktm-light); color: var(--ktm-text); }
.topbalk-link.actief { background: var(--ktm-light); color: var(--ktm-accent-dark); }

.topbalk-dropdown { position: relative; }
.topbalk-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}
.topbalk-dropdown-toggle svg { transition: transform 0.15s ease; }
.topbalk-dropdown.open .topbalk-dropdown-toggle svg { transform: rotate(180deg); }
.topbalk-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  min-width: 180px;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem;
  background: var(--ktm-card);
  border: 1px solid var(--ktm-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  z-index: 40;
}
.topbalk-dropdown.open .topbalk-submenu { display: flex; }
.topbalk-sublink {
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ktm-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.topbalk-sublink:hover { background: var(--ktm-light); color: var(--ktm-text); }
.topbalk-sublink.actief { background: var(--ktm-light); color: var(--ktm-accent-dark); }

.topbalk-acties { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.pagina-titel-balk { padding: 1.5rem 1.5rem 0; }
/* Dashboard heeft geen paginatitel (widgets spreken voor zich) */
.pagina-dashboard .pagina-titel-balk, .pagina-rooster .pagina-titel-balk { display: none; }
.pagina-titel h1 { font-size: 1.3rem; color: var(--ktm-text); }

/* Startscherm: categorie-kaarten (nu alleen "Beheer") met een duotone-icoontje,
   titel/omschrijving en een lijst met links naar de pagina's in die categorie. */
.dash-intro { margin-bottom: 1.75rem; }
.dash-intro h1 { font-size: 1.6rem; margin: 0 0 0.3rem; }
.dash-intro p { margin: 0; color: var(--ktm-text-muted); text-transform: capitalize; }

.aankondiging-kaart { border-left: 4px solid var(--ktm-wizardz-oranje); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
/* Tussenmaat: Flipover + VoorOpstellingen (1:2) passen samen al op de eerste regel,
   Bestuurskamer (de laatste tegel) valt vanzelf naar een tweede regel omdat de rij
   maar 3 kolommen breed is. */
@media (min-width: 700px) {
  .dash-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-kaart-breed { grid-column: span 2; }
}
/* Vanaf hier genoeg breedte voor alle drie tegels naast elkaar op één regel
   (Flipover : VoorOpstellingen : Bestuurskamer = 1 : 2 : 1). */
@media (min-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(4, 1fr); }
}
.dash-kaart {
  background: var(--ktm-card);
  border: 1px solid var(--ktm-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 19, 16, 0.05);
  padding: 1.25rem;
}
.dash-kaart-kop { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.9rem; }
.dash-kaart-kop svg { flex-shrink: 0; }
.dash-kaart-titel { font-family: var(--font-kop); font-weight: 700; font-size: 1.1rem; margin: 0; }
.dash-kaart-titel a { text-decoration: none; }
.dash-kaart-titel a:hover { text-decoration: underline; }
.dash-kaart-sub { color: var(--ktm-text-muted); font-size: 0.85rem; margin: 0.2rem 0 0; line-height: 1.35; }
.aankondiging-item-titel { font-family: var(--font-kop); font-weight: 700; margin: 0.75rem 0 0.15rem; color: var(--ktm-text); }
.aankondiging-tekst { color: var(--ktm-text); margin: 0; }
.dash-links { list-style: none; margin: 0; padding: 0; }
.dash-links a {
  display: block;
  padding: 0.55rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 6px;
  color: var(--ktm-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.dash-links a:hover { background: var(--ktm-light); color: var(--ktm-accent-dark); }
.pagina-titel p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--ktm-text-muted); }

/* Prognose-paneel: uitklapbaar linkerpaneel, standaard dicht (geen localStorage-
   onthouding, elke paginalading start dicht). Duwt de inhoud opzij i.p.v. eroverheen te
   liggen — dus geen verduisterende scrim, dat hoort bij een overlay, niet bij push-layout. */
.prognose-paneel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ktm-prognose-breedte);
  max-width: 90vw;
  z-index: 70;
  background: var(--ktm-light);
  border-right: 1px solid var(--ktm-border);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
body.prognose-open .prognose-paneel { transform: translateX(0); }
body.prognose-open .hoofdgebied { margin-left: var(--ktm-prognose-breedte); }

.prognose-paneel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem 0 1.25rem;
  height: var(--ktm-topbalk-hoogte);
  flex-shrink: 0;
  background: var(--ktm-card);
  border-bottom: 1px solid var(--ktm-border);
}
.prognose-paneel-kop h2 { font-size: 1.05rem; }

.prognose-paneel-inhoud {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.prognose-paneel-inhoud .widget { box-shadow: none; }

/* Prefab: ronde "pil"-knop voor de topbalk-acties (Sync, Uitloggen, en de basis
   voor .topbalk-switch hieronder). Gewone actieknoppen (geen aan/uit-status)
   gebruiken alleen .topbalk-knop. */
.topbalk-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ktm-text-muted);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, var(--ktm-border), rgba(255, 255, 255, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.topbalk-knop::before { content: none; }
.topbalk-knop:hover {
  color: var(--ktm-text);
  background-image:
    linear-gradient(var(--ktm-wizardz-oranje), var(--ktm-wizardz-oranje)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.55));
}

/* Prefab-variant: schakelknop met een lampje ná de tekst i.p.v. een volledig
   ingekleurde knop — fel groen = aan, donker groen = uit. Bij een schakelaar met
   meer dan twee standen (niet momenteel in gebruik) hoort een eigen variant met
   een andere kleur per stand, niet drie lampjes in dezelfde twee kleuren. */
.topbalk-switch .lampje {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ktm-lamp-uit);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.topbalk-switch[aria-pressed="true"] .lampje {
  background: var(--ktm-lamp-aan);
  box-shadow: 0 0 4px 1px rgba(46, 204, 64, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.inhoud {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
}

/* De wedstrijdentabel heeft meer breedte nodig dan een login/formulier-kaart */
.pagina-overzicht .inhoud { max-width: 900px; }
/* De jaarkalender heeft 9 kolommen (week + 7 dagen + maand) en wil de volle breedte */
.pagina-kalender .inhoud { max-width: none; }
/* Opstellingen: precies zo breed als de tabel nodig heeft (9 kolommen), niet breder. */
.pagina-opstellingen .inhoud { max-width: none; width: fit-content; }
/* Spelershome: 3 tegels naast elkaar (1:2:1) hebben meer ruimte nodig dan de
   standaard login/formulier-breedte, anders is er voor de brede wedstrijd-banner-
   tegel geen echte ruimte om als banner te ogen. */
.pagina-dashboard .inhoud { max-width: 1100px; }

.kaart {
  background: var(--ktm-card);
  border: 1px solid var(--ktm-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 19, 16, 0.05);
  padding: 1.5rem;
}

/* Widget-dashboard: kaarten zijn met de greep in de kop te verslepen en te verbergen */
.dashboard { max-width: 1400px; width: 100%; margin: 0 auto; padding: 1.75rem 1.25rem; }

/* Drie gelijke kolommen: Wedstrijden is altijd twee kolommen breed, ongeacht
   sleepvolgorde — de overige (smalle) widgets stromen los daaromheen, tot drie per rij.
   grid-auto-flow: dense zorgt dat een smalle widget de opening naast Wedstrijden opvult
   i.p.v. daar leeg te laten en pas op de volgende rij verder te gaan. Puur CSS: geen
   JS-herberekening nodig. */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  align-items: start;
  gap: 1.25rem;
}
.widget[data-widget="wedstrijden"] { grid-column: span 2; }
.widget[data-widget="spelers"] { grid-column: span 2; }
.widget[data-widget="voor_opstellingen"] { grid-column: 3; }

.widget {
  background: var(--ktm-card);
  border: 1px solid var(--ktm-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 19, 16, 0.05);
  /* Bewust GEEN overflow:hidden: de tegenstander-tooltip moet buiten de kaart kunnen
     uitsteken. De ronde hoeken worden i.p.v. daarvan door widget-kop zelf afgerond. */
  container-type: inline-size;
}
.widget.ingeklapt .widget-body { display: none; }
.widget.slepen { opacity: 0.35; }
.widget-inklap svg { transition: transform 0.15s ease; }
.widget.ingeklapt .widget-inklap svg { transform: rotate(-90deg); }

.widget-kop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ktm-border);
  border-radius: 12px 12px 0 0;
  cursor: grab;
}
.widget-kop:active { cursor: grabbing; }
.widget-kop h2 { flex: 1; font-size: 1.05rem; }
.widget-kop-simpel { cursor: default; }
.widget-grip { display: inline-flex; color: var(--ktm-border); flex-shrink: 0; }
.widget-acties { display: flex; align-items: center; gap: 0.4rem; }

/* Widget-kop met extra inhoud (bv. speler-initialen bij Wedstrijden) krijgt een tweede
   regel i.p.v. alles in één krappe rij te persen. */
.widget-kop-uitgebreid { flex-wrap: wrap; }
.widget-kop-extra { flex-basis: 100%; margin-top: 0.6rem; }

.speler-initialen { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; cursor: default; }
.speler-initiaal-divider { width: 1px; align-self: stretch; background: var(--ktm-border); }
.speler-initiaal-groep { display: flex; align-items: center; gap: 0.3rem; }
.speler-initiaal { font-family: var(--font-kop); font-weight: 700; font-size: 0.9rem; color: var(--ktm-text-muted); }
.stip-rij { display: flex; gap: 0.15rem; }
.stip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid transparent;
  font-family: var(--font-tekst);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}
.stip.groen { background: var(--ktm-groen); border-color: var(--ktm-groen-donker); }
.stip.oranje { background: var(--ktm-accent); border-color: var(--ktm-accent-dark); }
.stip.geel { background: var(--ktm-geel); border-color: var(--ktm-geel-donker); }

.widget-body { padding: 1.25rem; }
.widget-body table tbody tr:last-child td { border-bottom: none; }

/* Team-stand: eigen team uitgelicht */
.stand-tabel .positie { width: 2.5rem; text-align: center; }
.stand-tabel tr.eigen-team td, .tegenstander-tabel tr.eigen-team td { font-weight: 700; color: var(--ktm-accent-dark); }

.spelers-mini-rol { text-align: right; }

/* Nu/3j/Divisie-kolommen (dezelfde stats als de tegenstander-tooltip) — alleen zichtbaar
   als de Spelers-widget breed genoeg is om ze netjes te tonen. */
.spelers-mini-stat-kop { display: none; }
.spelers-mini-stat {
  display: none;
  text-align: right;
  font-size: 0.8rem;
  color: var(--ktm-text-muted);
  white-space: nowrap;
}
.spelers-mini-stat-kop th { font-family: var(--font-kop); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.03em; text-align: right; }
@container (min-width: 420px) {
  .spelers-mini-stat-kop { display: table-header-group; }
  .spelers-mini-stat { display: table-cell; }
}

/* Snelkeuze voor-opstellingen: compacte kaartjes (rijhoogte gehalveerd t.o.v. het eerste
   ontwerp) i.p.v. tabelrijen, want elke rij heeft schakelaar/naam/badge/iconen. */
.vo-lijst { display: flex; flex-direction: column; gap: 0.3rem; }
.vo-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--ktm-border);
  border-radius: 8px;
}
/* Uitgeschakelde voor-opstellingen zijn standaard verborgen (er kunnen honderden zijn
   na het automatisch genereren) — pas zichtbaar, gedimd, na klikken op "Toon ook
   uitgeschakelde". */
.vo-item.inactief { display: none; opacity: 0.5; }
.vo-lijst.toon-inactief .vo-item.inactief { display: flex; }
.vo-toggle-form { display: contents; }
.vo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.vo-info strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.vo-initiaal, .vo-voornaam { font-weight: 700; color: var(--ktm-text); }
.vo-initiaal.s1, .vo-voornaam.s1 { color: #2ecc71; }
.vo-initiaal.s2, .vo-voornaam.s2 { color: #f5c518; }
.vo-initiaal.s3, .vo-voornaam.s3 { color: var(--ktm-accent-dark); }
.vo-initiaal-divider { color: var(--ktm-border); font-weight: 400; margin: 0 0.05rem; }

/* Kleinere schakelaar en randloze icoontjes, alleen binnen deze widget — dat is wat de
   rijhoogte daadwerkelijk laat halveren t.o.v. de standaardmaten elders in de app. */
.vo-item .switch { width: 26px; height: 15px; }
.vo-item .switch .slider::before { height: 11px; width: 11px; left: 2px; bottom: 2px; }
.vo-item .switch input:checked + .slider::before { transform: translateX(11px); }
.vo-item .icon-knop { width: 22px; height: 22px; border: none; }
.vo-item .icon-knop svg { width: 13px; height: 13px; }

.voettekst {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  text-align: center;
}
.voettekst a {
  font-size: 0.8rem;
  color: var(--ktm-text-muted);
  text-decoration: underline;
}
.voettekst a:hover { color: var(--ktm-text); }

/* Login: gecentreerde kaart op donkere achtergrond */
body.pagina-login {
  min-height: 100vh;
  background: var(--ktm-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-kaart {
  background: var(--ktm-card);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 320px;
}

.login-kaart .merk { color: var(--ktm-text-muted); justify-content: center; }
.login-kaart h1 { text-align: center; margin-top: 0.75rem; font-size: 1.4rem; }
.login-kaart input + input { margin-top: 0.7rem; }

/* Formuliervelden */
input, select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 1.05rem;
  font-family: var(--font-tekst);
  border: 1px solid var(--ktm-border);
  border-radius: 10px;
  background: var(--ktm-light);
}
textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ktm-accent);
}

label {
  display: block;
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  color: var(--ktm-text-muted);
}

.fout { color: var(--ktm-accent-dark); font-size: 0.9rem; text-align: center; }
.succes { color: var(--ktm-groen-donker); font-size: 0.9rem; text-align: center; }
.flash-berichten { padding: 0.6rem 1.5rem 0; }
.flash-berichten p { margin: 0.3rem 0; }

/* Knoppen: vlak, afgerond-rechthoekig, zoals de W3CRM-referentie (geen pil, geen glossy 3D) */
/* Pillow-emboss: buitenste rand ingekerfd (donker boven/licht onder via de
   background-clip-truc), binnenste rand weer uitgezet (licht boven/donker onder via
   dunne inset-schaduwlijnen) — samen een groefje rond een opbollende knop. */
.knop-primair, button {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(var(--ktm-accent), var(--ktm-accent)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(255, 255, 255, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: background-image 0.15s ease;
}

.knop-primair:hover, button:hover,
.knop-primair:active, button:active {
  background-image:
    linear-gradient(var(--ktm-accent-dark), var(--ktm-accent-dark)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(255, 255, 255, 0.55));
}

button[type="submit"]:not(.icon-knop), .login-kaart button { width: 100%; margin-top: 1.5rem; }

.knop-klein {
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1;
}

.knop-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ktm-text);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, var(--ktm-border), rgba(255, 255, 255, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.knop-ghost:hover {
  background-image:
    linear-gradient(var(--ktm-light), var(--ktm-light)),
    linear-gradient(180deg, var(--ktm-text-muted), rgba(255, 255, 255, 0.6));
}

/* Kleine ronde icoonknoppen (potlood/prullenbak) */
.badge-binnenkort {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #000;
  background: var(--ktm-wizardz-oranje);
  border-radius: 999px;
}
.icon-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ktm-border);
  border-radius: 999px;
  color: var(--ktm-text-muted);
  cursor: pointer;
  box-shadow: none;
}
.icon-knop::before { content: none; }
.icon-knop svg { width: 16px; height: 16px; }
.icon-knop:hover { border-color: var(--ktm-accent); color: var(--ktm-accent); background: var(--ktm-light); }
.icon-knop.gevaar:hover { border-color: var(--ktm-accent-dark); color: var(--ktm-accent-dark); background: var(--ktm-rood-bg); }

/* Tabel */
table { width: 100%; border-collapse: collapse; }
td, th {
  text-align: left;
  vertical-align: middle;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--ktm-border);
  font-size: 1rem;
  line-height: 1.3;
}
th {
  font-family: var(--font-kop);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ktm-text-muted);
}
.datum { white-space: nowrap; text-align: right; }

/* Thuis/Uit-badge voor de teamnaam. Vaste breedte (smal, ~2px lucht naast "THUIS") zodat
   beide badges even breed zijn; UIT krijgt extra letter-spacing omdat het anders te
   opgepropt oogt in diezelfde smalle breedte. Kleuren zoals de opstelling-badges. */
.thuisuit-badge {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  text-align: center;
  padding: 0.3rem 0;
  margin-right: 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.thuisuit-badge.thuis {
  color: var(--ktm-groen);
  background-image: linear-gradient(var(--ktm-groen-bg), var(--ktm-groen-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.thuisuit-badge.uit {
  letter-spacing: 0.15em;
  color: var(--ktm-accent-dark);
  background-image: linear-gradient(var(--ktm-rood-bg), var(--ktm-rood-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}

/* Badge: dikke uitgezette rand die de vorm volgt (licht boven, donker onder), zelfde kleur als de badge zelf */
.status-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: var(--font-tekst);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.status-badge.ingevuld {
  color: var(--ktm-groen);
  background-image: linear-gradient(var(--ktm-groen-bg), var(--ktm-groen-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.status-badge.leeg {
  color: var(--ktm-accent-dark);
  background-image: linear-gradient(var(--ktm-rood-bg), var(--ktm-rood-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}

/* Nog te spelen / Gespeeld: twee inklapbare blokken in de Wedstrijden-widget — "Nog te
   spelen" dicht (dat blijft toch de langste lijst), "Gespeeld" open. */
.wedstrijden-groep summary {
  cursor: pointer;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  color: var(--ktm-text);
  list-style: none;
}
.wedstrijden-groep summary::-webkit-details-marker { display: none; }
.wedstrijden-groep summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--ktm-text-muted);
  transition: transform 0.15s ease;
}
.wedstrijden-groep[open] summary::before { transform: rotate(90deg); }
.wedstrijden-groep + .wedstrijden-groep { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ktm-border); }

/* Live-wedstrijdformulier-kiezer: volledige lijst i.p.v. dropdown, afwisselende
   rijkleur per speelweek (net als de bedoeling achter week-a/week-b elders), hele
   rij klikbaar naar het formulier. Eigen stijl (niet .wedstrijden-tabel-lijst delen —
   die heeft op mobiel een kaart-per-rij-grid met vaste kolomposities voor een heel
   ander soort tabel, wat hier de boel uit elkaar trok). */
.lw-kiezer-tabel { border-collapse: collapse; }
.lw-kiezer-tabel td { cursor: pointer; font-size: 1.05rem; }
.lw-kiezer-rij.lw-rij-b td { background: var(--ktm-light); }
.lw-kiezer-rij:hover td { background: var(--ktm-groen-bg); }
.lw-kiezer-tegenstander { font-weight: 700; font-size: 1.15rem; }
.lw-kiezer-week { color: var(--ktm-text-muted); font-size: 0.95rem; white-space: nowrap; }
.lw-kiezer-uitslag { text-align: right; }

@media (max-width: 760px) {
  /* Eén rij per wedstrijd, max 2 regels: datum + Thuis/Uit-badge + week op de eerste
     regel, tegenstandersnaam (en evt. uitslag) eronder — i.p.v. tabelkolommen. */
  .lw-kiezer-tabel, .lw-kiezer-tabel tbody { display: block; }
  .lw-kiezer-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
    padding: 0.8rem 0.6rem;
    border-radius: 10px;
    margin-bottom: 0.4rem;
  }
  .lw-kiezer-rij td { border: none; padding: 0; }
  .lw-kiezer-rij .datum { order: 1; font-weight: 600; font-size: 1rem; }
  .lw-kiezer-rij .thuisuit-badge { order: 2; }
  .lw-kiezer-week { order: 3; margin-left: auto; }
  .lw-kiezer-uitslag { order: 4; text-align: left; }
  .lw-kiezer-tegenstander { order: 5; flex: 1 1 100%; }
}

.uitslag-badge {
  display: inline-block;
  font-family: var(--font-tekst);
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: var(--ktm-light);
  color: var(--ktm-text-muted);
}
.uitslag-badge.gewonnen { background: var(--ktm-groen-bg); color: var(--ktm-groen-donker); }
.uitslag-badge.verloren { background: var(--ktm-rood-bg); color: var(--ktm-accent-dark); }

/* Rol- en sterkte-badge op de Spelers-pagina, zelfde uitgezette-rand-techniek als de andere badges */
.rol-badge, .sterkte-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: var(--font-tekst);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.sterkte-badge.s1 {
  color: var(--ktm-accent-dark);
  background-image: linear-gradient(var(--ktm-rood-bg), var(--ktm-rood-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.sterkte-badge.s2 {
  color: var(--ktm-groen);
  background-image: linear-gradient(var(--ktm-groen-bg), var(--ktm-groen-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.sterkte-badge.s3 {
  color: var(--ktm-text-muted);
  background-image: linear-gradient(var(--ktm-light), var(--ktm-light)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.rol-badge.captain {
  color: var(--ktm-accent-dark);
  background-image: linear-gradient(var(--ktm-rood-bg), var(--ktm-rood-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.rol-badge.semi-captain {
  color: var(--ktm-groen);
  background-image: linear-gradient(var(--ktm-groen-bg), var(--ktm-groen-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.rol-badge.speler {
  color: var(--ktm-text-muted);
  background-image: linear-gradient(var(--ktm-light), var(--ktm-light)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}

.locatie { display: inline-block; cursor: help; border-bottom: 1px dotted var(--ktm-text-muted); }

/* Tegenstander-tooltip: rijkere hover-info (naam, vorig seizoen, spelerslijst) dan het
   simpele data-tooltip-patroon hieronder aankan, dus een eigen geneste-span-opbouw zoals
   .locatie hierboven — alleen met een tabel als inhoud i.p.v. platte tekst. */
.tegenstander-naam { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted var(--ktm-text-muted); }
.tegenstander-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 125%;
  left: 0;
  width: 420px;
  background: var(--ktm-dark);
  color: #fff;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease;
  z-index: 30;
}
.tegenstander-naam:hover .tegenstander-tooltip { visibility: visible; opacity: 1; }
.tegenstander-tooltip strong { display: block; font-family: var(--font-kop); font-weight: 700; font-size: 18px; }
.tegenstander-tooltip-sub { display: block; color: #c9c6bd; font-size: 16px; margin: 0.15rem 0 0.6rem; line-height: 1.3; }
.tegenstander-tooltip table { width: 100%; border-collapse: collapse; }
.tegenstander-tooltip td, .tegenstander-tooltip th { padding: 0.15rem 0; border: none; font-size: 16px; color: #fff; white-space: nowrap; }
.tegenstander-tooltip th { color: #c9c6bd; font-weight: 600; text-align: left; }
.tegenstander-tooltip td:not(:first-child), .tegenstander-tooltip th:not(:first-child) { text-align: right; padding-left: 0.5rem; }
.tegenstander-tooltip td:first-child { overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.datum-speelweek { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted var(--ktm-text-muted); }
.speelweek-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 125%;
  left: 0;
  width: max-content;
  max-width: min(90vw, 460px);
  background: var(--ktm-dark);
  color: #fff;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease;
  z-index: 30;
  text-align: left;
}
.datum-speelweek:hover .speelweek-tooltip { visibility: visible; opacity: 1; }
.speelweek-tooltip strong { display: block; font-family: var(--font-kop); font-weight: 700; font-size: 18px; margin-bottom: 0.4rem; }
.speelweek-tooltip table { width: 100%; border-collapse: collapse; }
.speelweek-tooltip td { padding: 0.15rem 0; border: none; font-size: 16px; color: #fff; white-space: nowrap; }
.speelweek-tooltip td:first-child { color: #c9c6bd; padding-right: 0.5rem; }
.speelweek-tooltip td:last-child { overflow: hidden; text-overflow: ellipsis; }

.opstelling-badge { position: relative; cursor: help; }
.opstelling-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 125%;
  left: 0;
  width: 260px;
  background: var(--ktm-dark);
  color: #fff;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease;
  z-index: 30;
  white-space: normal;
  cursor: default;
  text-align: left;
}
.opstelling-badge:hover .opstelling-tooltip { visibility: visible; opacity: 1; }
.opstelling-tooltip strong { display: block; font-family: var(--font-kop); font-size: 0.95rem; margin-bottom: 0.4rem; }
.opstelling-tooltip table { width: 100%; border-collapse: collapse; }
.opstelling-tooltip td, .opstelling-tooltip th { padding: 0.15rem 0; border: none; font-size: 0.8rem; color: #fff; white-space: nowrap; }
.opstelling-tooltip th { color: #c9c6bd; font-weight: 600; text-align: left; }
.opstelling-tooltip td { text-align: right; padding-left: 0.75rem; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.opstelling-tooltip-hr-boven th, .opstelling-tooltip-hr-boven td { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 0.35rem; }
.opstelling-tooltip-hr-onder th, .opstelling-tooltip-hr-onder td { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 0.35rem; }

.verhindering-info { position: relative; display: inline-block; }
.verhindering-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 125%;
  right: 0;
  width: 280px;
  background: var(--ktm-dark);
  color: #fff;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease;
  z-index: 30;
  text-align: left;
}
.verhindering-info:hover .verhindering-tooltip { visibility: visible; opacity: 1; }
.verhindering-tooltip strong { display: block; font-family: var(--font-kop); font-size: 0.85rem; margin-bottom: 0.3rem; }
.verhindering-tooltip-sub { display: block; color: #c9c6bd; font-size: 0.75rem; line-height: 1.3; margin-bottom: 0.5rem; }
.verhindering-tooltip table { width: 100%; border-collapse: collapse; }
.verhindering-tooltip td { padding: 0.15rem 0; border: none; font-size: 0.75rem; color: #fff; white-space: nowrap; }
.verhindering-tooltip td:last-child { text-align: right; padding-left: 0.5rem; color: #c9c6bd; }
.verhindering-tooltip td:first-child { overflow: hidden; text-overflow: ellipsis; max-width: 170px; }

.prognose-score {
  display: inline-block;
  min-width: 2.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--ktm-light);
  color: var(--ktm-text);
}

/* Herbruikbaar tooltip-patroon: gewoon data-tooltip="..." op een element zetten */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ktm-dark);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-family: var(--font-tekst);
  font-size: 0.75rem;
  white-space: normal;
  max-width: min(240px, 80vw);
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 20;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }
/* De topbalk-acties hangen tegen de rechterrand van het venster — een gecentreerde
   tooltip zou daar rechts (en bij de lange Sync-tekst ook links) buiten het venster
   vallen. Rechts uitlijnen op de knop zelf (groeit naar links) voorkomt dat. */
.topbalk-acties [data-tooltip]::after { left: auto; right: 0; transform: none; text-align: right; }

/* Live popup / modal (bv. speler bewerken) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  /* Voorkomt dat overscrollen tegen de rand van de modal doorlekt naar de pagina
     erachter — op mobiel zag dat eruit als een bijna-getriggerde pull-to-refresh. */
  overscroll-behavior: contain;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--ktm-card);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 1.75rem;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.15s ease;
  /* Dunne scrollbar i.p.v. de dikke standaard — zichtbaar genoeg om te laten zien dat
     er meer inhoud is, zonder veel ruimte in te nemen (Firefox + Chrome/Safari/Edge). */
  scrollbar-width: thin;
  scrollbar-color: var(--ktm-border) transparent;
}
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--ktm-border); border-radius: 999px; }
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal.modal-breed { max-width: 620px; }

/* Opstelling-popup: Basis-spelers links, wissel/reserve/tijden rechts, met een verticale
   scheidingslijn ertussen. Velden zelf blijven smal (tekst past ruim in ~25ch). */
.lineup-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.lineup-kolom-rechts { border-left: 1px solid var(--ktm-border); padding-left: 1.5rem; }
.lineup-form select, .lineup-form input { max-width: 25ch; }

.lineup-hr { border: none; border-top: 1px solid var(--ktm-border); margin: 0.75rem 0; }
.lineup-snelkeuze, .speler-deck, .lineup-verhinderd { grid-column: 1 / -1; }
.lineup-snelkeuze { margin-bottom: 0.75rem; }

.lineup-verhinderd { margin-bottom: 1rem; }
.lineup-verhinderd label { display: block; margin-bottom: 0.25rem; }
.lineup-verhinderd p {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: var(--ktm-light);
  color: var(--ktm-text-muted);
  font-size: 1.15rem;
  font-weight: 700;
}
.lineup-verhinderd p.heeft-verhinderd { background: var(--ktm-rood-bg); color: var(--ktm-accent-dark); }

/* Eigen dropdown i.p.v. <select>, zodat opties gekleurde tier-initialen kunnen tonen
   (net als de Voor-opstellingen-widget) — een native <option> kan geen gekleurde spans. */
.snelkeuze-dropdown { position: relative; }
.snelkeuze-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ktm-border);
  border-radius: 8px;
  background: var(--ktm-card);
  color: var(--ktm-text);
  font-family: var(--font-tekst);
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: none;
}
.snelkeuze-toggle:hover { border-color: var(--ktm-text-muted); }
#lu-snelkeuze-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snelkeuze-toggle svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--ktm-text-muted); transition: transform 0.12s ease; }
.snelkeuze-dropdown.open .snelkeuze-toggle svg { transform: rotate(180deg); }
.snelkeuze-lijst {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--ktm-card);
  border: 1px solid var(--ktm-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  padding: 0.3rem;
  z-index: 30;
  display: none;
}
.snelkeuze-dropdown.open .snelkeuze-lijst { display: block; }
.snelkeuze-item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
  text-align: left;
}
.snelkeuze-item:hover, .snelkeuze-item:focus-visible { background: var(--ktm-light); }
.snelkeuze-item.verhinderd, .snelkeuze-item:disabled { opacity: 0.35; cursor: not-allowed; }
.snelkeuze-item:disabled:hover { background: none; }
.snelkeuze-item .vo-voornaam { font-size: 0.85rem; }

/* Deck met alle spelers om naar een positie te slepen; posities zelf zijn ook sleepbaar
   (om te herschikken) en zijn drop-targets (om vanuit het deck of een andere positie te ontvangen). */
.speler-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem;
  margin-bottom: 1rem;
  background: var(--ktm-light);
  border: 1px dashed var(--ktm-border);
  border-radius: 10px;
}
.speler-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--ktm-card);
  border: 1px solid var(--ktm-border);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: grab;
  user-select: none;
}
.speler-chip:active { cursor: grabbing; }
.speler-chip.verhinderd { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.speler-chip.s1 { border-color: #2ecc71; color: #1f8a4c; }
.speler-chip.s2 { border-color: #f5c518; color: #9c7610; }
.speler-chip.s3 { border-color: var(--ktm-accent-dark); color: var(--ktm-accent-dark); }

.lineup-slot-doel {
  border: 1px dashed transparent;
  border-radius: 8px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lineup-slot-doel select { cursor: grab; width: 100%; }
.lineup-slot-doel.sleep-over { background: var(--ktm-groen-bg); border-color: var(--ktm-groen); }
.lineup-opslaan { grid-column: 1 / -1; }

.modal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.modal-kop h2 { font-size: 1.2rem; }
#lineup-modal-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.lineup-modal-datum { font-family: var(--font-tekst); font-size: 0.8rem; font-weight: 500; color: var(--ktm-text-muted); }
.modal-sluit {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ktm-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.modal-sluit::before { content: none; }
.modal-sluit:hover { color: var(--ktm-text); }

/* Kolom-toggle switch */
.kolom-toggle { display: inline-flex; }
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--ktm-border); transition: 0.15s; border-radius: 21px; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; height: 15px; width: 15px; left: 3px; bottom: 3px; background: #fff; transition: 0.15s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .slider { background: var(--ktm-accent); }
.switch input:checked + .slider::before { transform: translateX(17px); }
table.verberg-evenement .evenement { display: none; }

/* Live wedstrijdformulier (Spelershome): DBBR-formulier-achtig overzicht, invullen via
   popup, max 1 invuller tegelijk (vergrendeling + polling, zie live_wedstrijd.html).
   De tabel-wrapper krijgt op smalle schermen zijn eigen JS-berekende transform:scale()
   (pasFormulierAan() in het template) — geen aparte kaart-per-rij-omzetting zoals de
   andere tabellen, want het moet er juist als één samenhangend formulier uitzien. */
.pagina-live-wedstrijd .inhoud { max-width: 960px; }

.lw-statusbalk {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: wrap; margin-bottom: 0.75rem; padding: 0.6rem 0.9rem;
  background: var(--ktm-light); border: 1px solid var(--ktm-border); border-radius: 10px;
}
.lw-status-tekst { margin: 0; font-weight: 600; }
.lw-status-knoppen { display: flex; gap: 0.5rem; }

.lw-infobalk {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center;
  margin-bottom: 1rem; padding: 0.75rem 0.9rem;
  background: var(--ktm-card); border: 1px solid var(--ktm-border); border-radius: 10px;
}
.lw-infobalk > div { display: flex; align-items: center; gap: 0.4rem; }
.lw-info-label { font-size: 0.75rem; color: var(--ktm-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.lw-info-teams { font-family: "Truculenta", sans-serif; gap: 0.5rem; }
.lw-infobalk input[type="time"] { width: auto; }

.lw-scoreformulier-wrap { position: relative; overflow: hidden; }
.lw-scoreformulier { width: 900px; max-width: none; transform-origin: top left; }

.lw-sectie-titel { font-family: "Truculenta", sans-serif; font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.lw-sectie-titel:first-child { margin-top: 0; }

.lw-tabel { width: 100%; border-collapse: collapse; margin-bottom: 0.25rem; }
.lw-tabel th, .lw-tabel td { border: 1px solid var(--ktm-border); padding: 0.4rem 0.55rem; font-size: 0.9rem; }
.lw-tabel th { background: var(--ktm-light); font-weight: 600; text-align: left; }
.lw-tabel .lw-nr { width: 2rem; text-align: center; font-weight: 600; color: var(--ktm-text-muted); }
.lw-tabel .lw-bondsnr { width: 4.5rem; color: var(--ktm-text-muted); font-size: 0.8rem; }
.lw-tabel .lw-score { width: 5rem; text-align: center; font-weight: 700; font-family: "Truculenta", sans-serif; }
.lw-rij { cursor: pointer; }
.lw-rij:hover { background: var(--ktm-light); }
.lw-rij.ingevuld .lw-score { color: var(--ktm-wizardz-oranje); }

.lw-einduitslag-balk {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin-top: 0.75rem; padding: 0.6rem; font-family: "Truculenta", sans-serif;
  font-size: 1.1rem; font-weight: 700; background: var(--ktm-light); border-radius: 10px;
}

/* Popup: breder dan de standaard modal-breed, want de finishes/tellers-rij heeft 3
   kolommen naast elkaar nodig. Minimale padding op verzoek — dit is een tikformulier
   tijdens een lopende wedstrijd, geen rustig leesformulier. */
#lw-partij-modal .modal { max-width: 640px; padding: 1rem; }
#lw-partij-modal .modal-kop { margin-bottom: 0.35rem; }
.lw-lock-banner {
  margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; border-radius: 8px;
  background: var(--ktm-light); color: var(--ktm-text-muted); font-size: 0.85rem;
}
#lw-p-fieldset { border: none; margin: 0; padding: 0; }
#lw-p-fieldset:disabled { opacity: 0.6; }
#lw-p-fieldset label { display: block; font-size: 0.75rem; color: var(--ktm-text-muted); margin: 0.4rem 0 0.1rem; }
#lw-p-fieldset select, #lw-p-fieldset textarea { width: 100%; }
#lw-p-fieldset > select, #lw-p-fieldset > div > select { margin-bottom: 0.15rem; }

.lw-tussenstand { text-align: center; margin: 0.6rem 0; }
.lw-tussenstand-label { font-size: 0.7rem; color: var(--ktm-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
/* Grid i.p.v. inline tekst: de [haken] blijven zo altijd precies in het midden staan,
   ongeacht hoe lang de spelersnamen aan weerszijden zijn (die groeien elk hun eigen
   kant op, naar het midden toe uitgelijnd). */
.lw-tussenstand-rij {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 0.3rem;
  font-family: "Truculenta", sans-serif; font-size: 1.05rem; font-weight: 700;
}
.lw-tussenstand-naam-thuis { text-align: right; }
.lw-tussenstand-naam-uit { text-align: left; }
.lw-tussenstand-haken { color: var(--ktm-wizardz-oranje); padding: 0 0.3rem; }

/* Deze hele partij-grid is een prefab: onderstaande waarden zijn het minimum
   (smalste popup-breedte). Op bredere vensters (zie media query eronder) schaalt
   alles mee met de ruimte die de popup (.modal-breed, max 620px) daadwerkelijk heeft. */
.lw-partij-grid { display: grid; grid-template-columns: auto auto auto; justify-content: center; gap: 0; align-items: start; margin: 0.5rem 0; }
.lw-tellers-titel { width: 1.5rem; font-size: 0.7rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--ktm-text-muted); text-align: center; }
.lw-tellers-titel-lang { display: none; }
.lw-finishes-kolom { display: flex; flex-direction: column; align-items: center; gap: 0; }
.lw-finish-pil {
  width: 1.5rem; text-align: center; border-radius: 4px; padding: 0.08rem 0.02rem;
  font-size: 0.5rem;
}
.lw-finish-pil:disabled, .lw-finish-pil.lw-finish-locked { opacity: 0.4; }
.lw-tellers-midden { display: flex; flex-direction: column; justify-content: space-between; gap: 0; height: 100%; }
.lw-stap-rij { display: flex; align-items: center; justify-content: center; gap: 0.15rem; }
/* Het (+)-(0)-(-)-trio krijgt dezelfde achtergrond/rand als een gewoon invoerveld
   (zie input/select/textarea hierboven) — de knoppen zitten er zo "in" i.p.v. los te
   zweven. Volgorde bewust +/waarde/- (plus links, min rechts). */
.lw-stap-trio {
  display: flex; align-items: center; gap: 0.1rem;
  background: var(--ktm-light); border: 1px solid var(--ktm-border); border-radius: 999px;
  padding: 0.1rem 0.15rem;
}
.lw-stap-label { min-width: 1.1rem; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--ktm-text-muted); margin: 0; position: relative; top: -2px; }
.lw-stap-knop { width: 0.75rem; height: 0.75rem; padding: 0; line-height: 1; border-radius: 50%; flex-shrink: 0; font-size: 0.5rem; }
.lw-stap-waarde { min-width: 0.55rem; text-align: center; font-weight: 700; font-size: 0.7rem; margin: 0; position: relative; top: -2px; }

/* Vanaf hier verbreedt de prefab mee tot de breedte van de popup: de twee
   Finish-kolommen worden flexibele grid-kolommen (1fr) die de overgebleven
   ruimte naast het tellers-blok opvullen, i.p.v. vast te blijven staan op hun
   minimale breedte. De ruimte tussen de 3 hoofdblokken (Finish|tellers|Finish)
   mag flink groeien; de ruimte vlak rond het "100+"-label (binnen .lw-stap-rij)
   blijft bewust krap, zodat -/label/+ één visuele eenheid blijven. */
@media (min-width: 480px) {
  .lw-tussenstand-rij { font-size: 2.1rem; }
  .lw-partij-grid { grid-template-columns: 1fr auto 1fr; width: 100%; gap: 0 1.4rem; margin: 0.9rem 0; }
  .lw-tellers-titel-kort { display: none; }
  .lw-tellers-titel-lang { display: inline; }
  .lw-finishes-kolom { gap: 0.4rem; }
  .lw-tellers-titel { width: 100%; max-width: 4.5rem; font-size: 1rem; margin-bottom: 0.5rem; }
  .lw-finish-pil { width: 100%; max-width: 4.5rem; font-size: 0.85rem; padding: 0.3rem 0.2rem; }
  .lw-tellers-midden { gap: 0.4rem; }
  .lw-stap-rij { gap: 0.3rem; }
  .lw-stap-trio { gap: 0.2rem; padding: 0.15rem 0.3rem; }
  .lw-stap-label { min-width: 1.9rem; font-size: 1.1rem; }
  .lw-stap-knop { width: 1.35rem; height: 1.35rem; font-size: 0.9rem; }
  .lw-stap-waarde { min-width: 1rem; font-size: 1.2rem; }
}

#lw-p-omschrijving { resize: vertical; }
#lw-p-opslaan { margin-top: 0.6rem; }

/* Op smalle schermen wordt elke tabelrij een eigen kaartje i.p.v. horizontaal scrollen.
   Grens ligt op 760px (= .pagina-overzicht .inhoud max-width) zodat er geen tussenzone
   overblijft waar de tabel nog wel de brede lay-out gebruikt maar te weinig ruimte heeft. */
/* Onder de 900px is er geen ruimte voor een vaste zijbalk: die wordt een overlay die je
   opent met het hamburgerknopje in de topbalk. */
@media (max-width: 900px) {
  /* Geen ruimte voor horizontale navigatielinks + actieknoppen in de topbalk: die
     worden samen een uitklap-dropdown die je opent met het hamburgerknopje. */
  .hamburger { display: inline-flex; }
  .topbalk-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    padding: 0.5rem;
    background: var(--ktm-card);
    border-bottom: 1px solid var(--ktm-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - var(--ktm-topbalk-hoogte));
    overflow-y: auto;
  }
  .topbalk-menu.open { display: flex; }
  .topbalk-nav { flex-direction: column; align-items: stretch; gap: 0.1rem; }
  .topbalk-link { padding: 0.65rem 0.75rem; }
  .topbalk-acties {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding-top: 0.6rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--ktm-border);
  }
  .topbalk-acties .topbalk-knop { justify-content: center; padding: 0.55rem 0.7rem; }

  /* Op mobiel staat het Beheer-submenu altijd ingeklapt zichtbaar (geen zwevend paneel)
     als geneste rij binnen het al uitgeklapte hamburgermenu. */
  .topbalk-dropdown-toggle { width: 100%; justify-content: space-between; }
  .topbalk-submenu {
    display: flex;
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 0.75rem;
  }
  .topbalk-dropdown:not(.open) .topbalk-submenu { display: none; }

  .prognose-paneel { width: 100%; max-width: 100%; }
}

/* Jaarkalender (Evenementen-pagina): rollend jaaroverzicht, 1 rij per week. Horizontaal
   scrollen i.p.v. herschikken op smal scherm — een dichte datatabel als deze leent zich
   niet voor het kaart-per-rij-patroon van de andere tabellen. */
/* Zodra overflow-x niet 'visible' is (hier: auto, nodig voor breed horizontaal scrollen),
   telt dit element sowieso als scrollcontainer voor position:sticky — of overflow-y nu
   wel of niet apart gezet wordt. Sticky "boven de tabel" werkt dan alleen betrouwbaar als
   dít element ook echt het ding is dat scrollt: een eigen (hoge) vaste hoogte met
   overflow:auto op beide assen, zodat de kolomkoppen bovenin dit paneel blijven staan
   terwijl je er middenin scrollt — net als bevroren rijen in een spreadsheet. */
.jaarkalender-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px);
  border-radius: 12px;
  border: 1px solid var(--ktm-border);
}
.jaarkalender-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1500px; }
.jaarkalender-tabel th {
  position: sticky;
  top: 0;
  background: var(--ktm-dark);
  color: #fff;
  border-bottom: 1px solid var(--ktm-dark);
  padding: 0.6rem 0.4rem;
  font-size: 0.85rem;
  z-index: 5;
}
.jaarkalender-tabel th:first-child, .jaarkalender-tabel td.jaarkalender-weeknr { width: 58px; }
.jaarkalender-tabel th:last-child, .jaarkalender-tabel td.jaarkalender-maand { width: 120px; }
/* Wk- en Maand-kolom krijgen, net als de kopregel, een vast donkere achtergrond met
   witte tekst — een "kader" om de kalender i.p.v. mee te schuiven met de maandband. */
.jaarkalender-weeknr {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  background: var(--ktm-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.jaarkalender-maand {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  text-align: left;
  padding-left: 0.6rem;
  color: #fff;
  background: var(--ktm-dark);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}
.jaarkalender-week td { border-bottom: 1px solid var(--ktm-border); vertical-align: top; }
/* Band-kleur per dag (kolom), niet per week-rij: zo is een maandovergang midden in een
   weekrij ook echt zichtbaar (bv. 31 juli lichter dan 1 augustus). */
.jaarkalender-dag.band-0 { background: var(--ktm-card); }
.jaarkalender-dag.band-1 { background: var(--ktm-light); }
/* Weekend: zelfde lichtheid als een gewone dag, alleen een oranje tint — en net als bij
   de gewone dagen blijft de maand-afwisseling behouden (band-1 iets donkerder oranje). */
.jaarkalender-dag.weekend.band-0 { background: var(--ktm-rood-bg); }
.jaarkalender-dag.weekend.band-1 { background: #f5ddd2; }

.jaarkalender-dag {
  position: relative;
  height: 84px;
  padding: 1px;
  border-right: 1px solid var(--ktm-border);
  overflow: hidden;
}
.jaarkalender-dag.vandaag { outline: 3px solid var(--ktm-accent); outline-offset: -3px; }
.jaarkalender-dagnr {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 1.3rem;
  font-family: var(--font-kop);
  font-weight: 600;
  color: var(--ktm-text-muted);
  z-index: 2;
  pointer-events: none;
}
/* Zodra een dag een wedstrijd en/of evenement toont (ook bij een gesplitste cel: de
   bovenste helft reserveert links ruimte voor het dagnummer, maar de achtergrondkleur
   van die helft loopt er gewoon onderdoor) kan het dagnummer op vrijwel elke kleur vallen
   (oranje, antraciet, paars, groen) — een eigen ondoorzichtig wit plaatje garandeert dan
   altijd genoeg contrast. */
.jaarkalender-dag.heeft-vulling .jaarkalender-dagnr {
  background: #fff;
  color: var(--ktm-dark);
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.jaarkalender-vulling { height: 100%; display: flex; flex-direction: column; }
.jaarkalender-vulling.split > * { flex: 1 1 50%; min-height: 0; }

.jaarkalender-wedstrijd {
  position: relative;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 2px 6px 2px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  border: 1px solid transparent;
  border-radius: 4px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(to top right, #0a1a4d, #cc0000, var(--ktm-accent), var(--ktm-accent)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}
.jaarkalender-vulling.vol.jaarkalender-wedstrijd {
  padding: 30px 8px 4px;
  justify-content: center;
  line-height: 1.3;
}
/* Klein Triple Wizardz-logo in de hoek van elke eigen wedstrijd. */
.jaarkalender-logo {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  pointer-events: none;
}

.jaarkalender-evenementen { display: flex; flex-direction: column; overflow: hidden; }
.jaarkalender-vulling.vol.jaarkalender-evenementen { height: 100%; padding-top: 30px; }
/* Reliëf-omhoog: dunne ingekerfde rand die de vorm volgt, wit van binnen bovenaan en
   donker onderaan — simuleert een opbollend randje i.p.v. plat gekleurd vlak. Zelfde
   background-clip-truc als de status/rol-badges elders, alleen de highlight/schaduw
   omgedraaid (licht boven i.p.v. donker boven, want dit moet omhoog "bollen"). */
.jaarkalender-evt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ktm-groen-donker);
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(var(--ktm-groen-bg), var(--ktm-groen-bg)), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.jaarkalender-evt:hover { filter: brightness(0.95); }

/* Poel's Eye: antraciet/rood/wit, zoals de flyer */
.jaarkalender-evt.bron-poelseye {
  color: #fff;
  font-weight: 700;
  background-image: linear-gradient(#2b2b2b, #2b2b2b), linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.55));
}
/* Dartclub Lisserbroek: paarsig met krijtbord-achtig handschrift */
.jaarkalender-evt.bron-lisserbroek {
  color: #6a1b9a;
  font-family: "Caveat", var(--font-tekst), cursive;
  font-weight: 700;
  font-size: 1.15rem;
  background-image: linear-gradient(#ede4f7, #ede4f7), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.28));
}

/* Hover-banner voor eigen wedstrijden: gedeelde portal buiten de kalendertabel (zie de
   JS in evenementen.html) zodat position:fixed niet door de overflow:hidden van de
   kalendercellen wordt afgesneden. */
.jaarkalender-wedstrijd[data-banner] { cursor: pointer; }
.wedstrijd-banner-portal {
  position: fixed;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.wedstrijd-banner-portal.open { visibility: visible; opacity: 1; transform: translateY(0); }

.wedstrijd-banner {
  background: var(--ktm-dark);
  border: 4px solid #202c33;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  padding-bottom: 0.6rem;
}
.wedstrijd-banner-kaarten { display: flex; }
.wedstrijd-banner-kaart { flex: 1; min-width: 0; line-height: 0; }
.wedstrijd-banner-kaart img { display: block; width: 100%; height: auto; }
.wedstrijd-banner-kaart.wissel { opacity: 0.82; }
/* Datum/tijd: bliksem-afbeelding als achtergrond erachter, tekst met een dikke rand van
   meerdere gedupliceerde, scherpe (0-blur) schaduw-kopieën i.p.v. een vervaagde gloed. */
.wedstrijd-banner-datum {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 0.7rem 0.5rem;
}
.wedstrijd-banner-datum-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
}
.wedstrijd-banner-datum span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.575rem;
  text-shadow:
    0 0 10px rgba(255, 140, 26, 1),
    0 0 18px rgba(255, 140, 26, 0.9),
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 1px 0 #000;
}
.wedstrijd-banner-datum span.verzet {
  text-decoration: line-through;
  text-decoration-color: #000;
  text-decoration-thickness: 3px;
}

/* Team-rij: wit met een dikke WhatsApp-groene rand, met het logo als eigen div er middenop
   — iets hoger dan de rij zelf, zodat het er als een embleem bovenuit steekt. */
.wedstrijd-banner-teamrij-wrap { position: relative; }
.wedstrijd-banner-teamrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-sizing: border-box;
  background: #efefef;
  border: none;
  border-top: 2px solid #25d366;
  border-bottom: 2px solid #25d366;
  border-radius: 0;
  padding: 0.3rem 0.25rem;
  color: var(--ktm-dark);
  font-family: "Truculenta", var(--font-kop), sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.wedstrijd-banner-teamrij span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(50% - 45px);
  text-align: center;
}
.wedstrijd-banner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80px;
  width: auto;
  object-fit: contain;
  z-index: 1;
}

/* Onderin: WhatsApp-antraciete achtergrond met de opstelling in WhatsApp-groen (links,
   onder de kant van Triple Wizardz) en het adres eronder gecentreerd in Trebuchet MS. */
.wedstrijd-banner-onder { background: #202c33; padding: 0.5rem 0.85rem; }
.wedstrijd-banner-opstelling { text-align: left; color: #25d366; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.8rem; }
.wedstrijd-banner-opstelling.rechts { text-align: right; }
.wedstrijd-banner-adres {
  text-align: center;
  color: #fff;
  font-family: "Truculenta", var(--font-tekst), sans-serif;
  font-weight: 700;
  font-size: 1.36rem;
  line-height: 1.15;
  margin-top: 0.45rem;
}
.wedstrijd-banner-adres.verzet { text-decoration: line-through; text-decoration-thickness: 3px; }
.wedstrijd-banner-verzet {
  background: #cc0000;
  color: #fff;
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding: 0.5rem 0.5rem;
}

/* Opstellingen-overzicht: leestabel voor alle spelers (geen beheerrecht nodig). De
   Wedstrijd-kolom hergebruikt de donkere kleurtaal van de wedstrijd-banner hierboven,
   maar compact en statisch (geen hover-portal) voor gebruik in een tabelcel. */

/* Fixed spelersfilter: blijft zichtbaar onder de topbalk terwijl je door de (lange)
   tabel scrolt, zodat je altijd snel op een naam kunt filteren. */
.opstelling-filter-balk {
  position: sticky;
  top: var(--ktm-topbalk-hoogte);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--ktm-light);
  padding: 0.6rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--ktm-border);
}

.opstellingen-scroll { overflow-x: auto; }
#opstellingen-tabel { border-collapse: collapse; }
#opstellingen-tabel th { padding: 0.3rem 0.1rem; white-space: normal; word-break: break-word; text-align: center; }
#opstellingen-tabel th:first-child { text-align: left; }
#opstellingen-tabel th:not(:first-child) { width: 64px; }
#opstellingen-tabel td { padding: 0; vertical-align: middle; }
#opstellingen-tabel tbody tr { cursor: pointer; transition: opacity 0.15s ease; }
#opstellingen-tabel tbody tr.opstelling-rij-gedimd { opacity: 0.6; }

.opstelling-wedstrijd-cel { min-width: 190px; background: #202c33; }
.opstelling-wedstrijd-info {
  height: 100%;
  background: #202c33;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0.6rem;
}
.opstelling-wedstrijd-datum {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.15rem;
  color: #25d366;
  margin-bottom: 0.3rem;
}
.opstelling-wedstrijd-teams { font-family: var(--font-tekst); font-size: 1.15rem; line-height: 1.2; }
.opstelling-wedstrijd-eigen { font-weight: 700; }
.opstelling-wedstrijd-vs { display: block; font-size: 0.65rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; color: #b7b3ab; margin: 0.05rem 0; }
.opstelling-wedstrijd-compact { display: none; }

.opstelling-speler-cel { text-align: center; background: #202c33; }
.opstelling-spelerskaart { width: 64px; height: 120px; display: block; margin: 0 auto; }
/* Initialen-schakelaar: op kleine schermen is een grote letter sneller te lezen dan een
   klein kaartfotootje — verborgen totdat #opstellingen-tabel.toon-initialen actief is. */
.opstelling-initiaal-plek {
  display: none;
  width: 64px;
  height: 120px;
  align-items: center;
  justify-content: center;
  background: #202c33;
  margin: 0 auto;
}
/* "Burbank" is het moodboard-subtitelfont maar staat niet op Google Fonts (betaald
   font) — er is hier geen bestand van ingeladen, dus dit valt zonder dat lettertype
   automatisch terug op --font-kop. Zodra er een Burbank-bestand beschikbaar komt (zie
   intern/moodboards/triple-wizardz-moodboard.md), hoeft alleen een @font-face + deze
   naam te kloppen om 'm echt te laten gebruiken. */
.opstelling-initiaal-plek span { color: #fff; font-family: "Burbank", var(--font-kop); font-weight: 700; font-size: 1.8rem; }
#opstellingen-tabel.toon-initialen .opstelling-spelerskaart { display: none; }
#opstellingen-tabel.toon-initialen .opstelling-fog-plek { display: none; }
#opstellingen-tabel.toon-initialen .opstelling-initiaal-plek {
  display: flex;
  width: auto;
  height: auto;
  min-width: 2rem;
  padding: 0.35rem;
}
/* In initialen-modus is de rij veel lager dan met foto's — dan hoeven de kolommen
   niet meer op kaartbreedte/-hoogte vastgezet te staan, en past Wedstrijd op 1 regel. */
#opstellingen-tabel.toon-initialen th:not(:first-child) { width: auto; }
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-teams {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-vs { display: inline; margin: 0; }
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-info { height: auto; }
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-datum { margin-bottom: 0.05rem; line-height: 1.1; text-align: right; }
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-teams { line-height: 1.1; }
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-normaal { display: none; }
#opstellingen-tabel.toon-initialen .opstelling-wedstrijd-compact { display: block; text-align: left; }
.opstelling-fog-plek {
  position: relative;
  width: 64px;
  height: 120px;
  overflow: hidden;
  background: #202c33;
  margin: 0 auto;
}
.opstelling-fog-canvas { display: block; width: 100%; height: 100%; }
.opstelling-fog-naam {
  position: absolute;
  inset: auto 0 0.3rem 0;
  text-align: center;
  font-family: var(--font-tekst);
  font-size: 0.65rem;
  font-weight: 600;
  color: #e8e6e0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Groep-"chips": Basis 1-4 (whatsapp-groen), Speler 5-6/reserves (wizardz-oranje),
   Bob 1-2 (sassem-geel) — de volle groepskleur als achtergrond (kop + alle rijen),
   met de donkere fog/spelerskaart-achtergrond zichtbaar als 3px marge eromheen, en
   een afgeronde bovenkant (kop) en onderkant (laatste rij) aan de buitenkant van elke
   groep, zodat het als één doorlopende gekleurde chip over de volle tabelhoogte oogt. */
#opstellingen-tabel td.opstelling-speler-cel { padding: 0 3px; }
/* Alleen padding aan de buitenkant van elke groep (links van de eerste, rechts van de
   laatste kolom) — ertussenin naadloos, geen padding tussen kolommen van dezelfde groep. */
#opstellingen-tabel td:nth-child(2) { padding-right: 0; }
#opstellingen-tabel td:nth-child(3) { padding-left: 0; padding-right: 0; }
#opstellingen-tabel td:nth-child(4) { padding-left: 0; padding-right: 0; }
#opstellingen-tabel td:nth-child(5) { padding-left: 0; }
#opstellingen-tabel td:nth-child(6) { padding-right: 0; }
#opstellingen-tabel td:nth-child(7) { padding-left: 0; }
#opstellingen-tabel td:nth-child(8) { padding-right: 0; }
#opstellingen-tabel td:nth-child(9) { padding-left: 0; }

#opstellingen-tabel th:nth-child(n+2):nth-child(-n+5),
#opstellingen-tabel td:nth-child(n+2):nth-child(-n+5) { background: #25d366; }
#opstellingen-tabel th:nth-child(n+2):nth-child(-n+5) { color: #000; }
#opstellingen-tabel th:nth-child(2) { border-top-left-radius: 8px; }
#opstellingen-tabel th:nth-child(5) { border-top-right-radius: 8px; }
#opstellingen-tabel tbody tr:last-child td:nth-child(2) { border-bottom-left-radius: 8px; }
#opstellingen-tabel tbody tr:last-child td:nth-child(5) { border-bottom-right-radius: 8px; }

#opstellingen-tabel th:nth-child(n+6):nth-child(-n+7),
#opstellingen-tabel td:nth-child(n+6):nth-child(-n+7) { background: var(--ktm-wizardz-oranje); }
#opstellingen-tabel th:nth-child(n+6):nth-child(-n+7) { color: #000; }
#opstellingen-tabel th:nth-child(6) { border-top-left-radius: 8px; }
#opstellingen-tabel th:nth-child(7) { border-top-right-radius: 8px; }
#opstellingen-tabel tbody tr:last-child td:nth-child(6) { border-bottom-left-radius: 8px; }
#opstellingen-tabel tbody tr:last-child td:nth-child(7) { border-bottom-right-radius: 8px; }

#opstellingen-tabel th:nth-child(n+8):nth-child(-n+9),
#opstellingen-tabel td:nth-child(n+8):nth-child(-n+9) { background: var(--ktm-sassem-geel); }
#opstellingen-tabel th:nth-child(n+8):nth-child(-n+9) { color: #000; }
#opstellingen-tabel th:nth-child(8) { border-top-left-radius: 8px; }
#opstellingen-tabel th:nth-child(9) { border-top-right-radius: 8px; }
#opstellingen-tabel tbody tr:last-child td:nth-child(8) { border-bottom-left-radius: 8px; }
#opstellingen-tabel tbody tr:last-child td:nth-child(9) { border-bottom-right-radius: 8px; }

/* Rich hover-banner voor Poel's Eye/Lisserbroek-evenementen — zelfde portal-mechanisme als
   de wedstrijd-banner, maar met een eigen thema per bron (flyer-stijl / krijtbordje). */
.evenement-banner {
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  padding: 0.9rem 1.05rem;
}
.evenement-banner-kop {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
.evenement-banner-datum {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.evenement-banner-tijd { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.15rem; }
.evenement-banner-notitie { font-size: 0.85rem; line-height: 1.35; }
.evenement-banner-locatie { font-size: 0.8rem; margin-top: 0.45rem; opacity: 0.8; }

.evenement-banner.bron-poelseye {
  background: #1c1c1c;
  border: 3px solid #c81e1e;
  color: #fff;
}
.evenement-banner.bron-poelseye .evenement-banner-kop { text-transform: uppercase; letter-spacing: 0.02em; }
.evenement-banner.bron-poelseye .evenement-banner-datum { color: #ff5252; }

.evenement-banner.bron-lisserbroek {
  background: #241533;
  border: 3px solid #8e3fc7;
  color: #f3e9ff;
  font-family: "Caveat", var(--font-tekst), cursive;
}
.evenement-banner.bron-lisserbroek .evenement-banner-kop { font-size: 1.5rem; }
.evenement-banner.bron-lisserbroek .evenement-banner-datum { color: #d9b3ff; font-size: 1.2rem; }
.evenement-banner.bron-lisserbroek .evenement-banner-tijd,
.evenement-banner.bron-lisserbroek .evenement-banner-notitie,
.evenement-banner.bron-lisserbroek .evenement-banner-locatie { font-size: 1.1rem; }

@media (max-width: 760px) {
  .topbalk { padding: 0 1rem; }
  .inhoud { padding: 0 0.85rem; }
  .kaart { padding: 1.1rem; }
  .dashboard { padding: 0 0.85rem; }
  .widget-body { padding: 1rem; }
  .widget-kop { padding: 0.85rem 1rem; }

  /* Op smal scherm is er geen ruimte voor twee kolommen naast elkaar: alles onder elkaar,
     volle breedte (display:block maakt grid-column op de widgets vanzelf al krachteloos). */
  .dashboard-grid { display: block; }
  .dashboard-grid .widget { margin-bottom: 1.25rem; }
  .dashboard-grid .widget:last-child { margin-bottom: 0; }

  .wedstrijden-tabel-lijst { display: block; }
  .wedstrijden-tabel-lijst thead { display: none; }
  .wedstrijden-tabel-lijst tbody { display: block; }
  .wedstrijden-tabel-lijst tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "datum datum"
      "tegenstander tegenstander"
      "locatie locatie"
      "status knop"
      "evenement evenement";
    gap: 0.3rem 0.6rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }
  .wedstrijden-tabel-lijst td { border: none; padding: 0; font-size: 0.95rem; }
  .wedstrijden-tabel-lijst td[colspan] { grid-area: 1 / 1 / -1 / -1; text-align: center; padding: 1rem 0; }
  .wedstrijden-tabel-lijst td.datum { grid-area: datum; text-align: left; font-weight: 600; font-size: 0.85rem; color: var(--ktm-text-muted); }
  .wedstrijden-tabel-lijst td:nth-child(2) { grid-area: tegenstander; font-weight: 600; font-size: 1.05rem; }
  .wedstrijden-tabel-lijst td:nth-child(3) { grid-area: locatie; font-size: 0.9rem; color: var(--ktm-text-muted); }
  .wedstrijden-tabel-lijst td:nth-child(4) { grid-area: status; align-self: center; }
  .wedstrijden-tabel-lijst td:nth-child(5) { grid-area: knop; justify-self: end; align-self: center; }
  .wedstrijden-tabel-lijst td.evenement { grid-area: evenement; font-size: 0.85rem; color: var(--ktm-text-muted); }

  #spelers-tabel { display: block; }
  #spelers-tabel thead { display: none; }
  #spelers-tabel tbody { display: block; }
  #spelers-tabel tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "naam rol sterkte"
      "singles singles winst"
      "acties acties acties";
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }
  #spelers-tabel td { border: none; padding: 0; font-size: 0.95rem; }
  #spelers-tabel td[colspan] { grid-area: 1 / 1 / -1 / -1; text-align: center; padding: 1rem 0; }
  #spelers-tabel td:nth-child(1) { grid-area: naam; font-weight: 600; font-size: 1.05rem; }
  #spelers-tabel td:nth-child(2) { grid-area: rol; justify-self: end; }
  #spelers-tabel td:nth-child(3) { grid-area: sterkte; justify-self: end; }
  #spelers-tabel td:nth-child(4) { grid-area: singles; font-size: 0.85rem; color: var(--ktm-text-muted); }
  #spelers-tabel td:nth-child(5) { grid-area: winst; justify-self: end; font-size: 0.85rem; color: var(--ktm-text-muted); }
  #spelers-tabel td:nth-child(6) { grid-area: acties; justify-self: end; display: flex; gap: 0.4rem; margin-top: 0.3rem; }

  #verhinderingen-tabel { display: block; }
  #verhinderingen-tabel thead { display: none; }
  #verhinderingen-tabel tbody { display: block; }
  #verhinderingen-tabel tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "speler speler"
      "periode periode"
      "reden info"
      "acties acties";
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }
  #verhinderingen-tabel td { border: none; padding: 0; font-size: 0.95rem; }
  #verhinderingen-tabel td[colspan] { grid-area: 1 / 1 / -1 / -1; text-align: center; padding: 1rem 0; }
  #verhinderingen-tabel td:nth-child(1) { grid-area: speler; font-weight: 600; font-size: 1.05rem; }
  #verhinderingen-tabel td:nth-child(2) { grid-area: periode; font-size: 0.85rem; color: var(--ktm-text-muted); }
  #verhinderingen-tabel td:nth-child(3) { grid-area: reden; }
  #verhinderingen-tabel td:nth-child(4) { grid-area: info; justify-self: end; }
  #verhinderingen-tabel td:nth-child(5) { grid-area: acties; justify-self: end; display: flex; gap: 0.4rem; margin-top: 0.3rem; }

  .modal { padding: 1.4rem; }

  /* Live wedstrijdformulier-popup: de finishes/tellers-rij blijft op 1 lijn (zo is 'm
     getekend/gevraagd) — de basismaten zijn al krap genoeg voor de meeste telefoons,
     hier alleen nog een fijnere marge voor echt smalle schermen (<360px). */
  .lw-partij-grid { gap: 0 0.25rem; }

  /* Geen ruimte voor twee kolommen naast elkaar: onder elkaar met een horizontale
     scheidingslijn i.p.v. verticaal, en velden mogen weer de volle breedte gebruiken. */
  .lineup-form { grid-template-columns: 1fr; }
  .lineup-kolom-rechts {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--ktm-border);
    padding-top: 1rem;
    margin-top: 0.5rem;
  }
  .lineup-form select, .lineup-form input { max-width: none; }

  /* Jaarkalender: blijft een 2D-rooster (dagen x weken), dus geen kaart-per-rij-omzetting
     zoals de andere tabellen — dat zou de kalenderstructuur juist wegnemen. In plaats
     daarvan alles fors kleiner zodat er op een smal scherm minder zijwaarts geveegd hoeft
     te worden; horizontaal scrollen (al aanwezig) blijft de rest oplossen. */
  .jaarkalender-tabel { min-width: 700px; }
  .jaarkalender-tabel th { padding: 0.4rem 0.25rem; font-size: 0.7rem; }
  .jaarkalender-tabel th:first-child, .jaarkalender-tabel td.jaarkalender-weeknr { width: 32px; }
  .jaarkalender-tabel th:last-child, .jaarkalender-tabel td.jaarkalender-maand { width: 48px; }
  .jaarkalender-weeknr { font-size: 0.65rem; }
  .jaarkalender-maand { font-size: 1.1rem; padding-left: 0.3rem; }
  .jaarkalender-dag { height: 54px; }
  .jaarkalender-dagnr { top: 1px; left: 3px; font-size: 0.85rem; }
  .jaarkalender-wedstrijd { font-size: 0.62rem; padding-left: 24px; }
  .jaarkalender-vulling.vol.jaarkalender-wedstrijd { padding: 18px 5px 3px; line-height: 1.15; }
  .jaarkalender-vulling.vol.jaarkalender-evenementen { padding-top: 18px; }
  .jaarkalender-evt { font-size: 0.62rem; }
  .jaarkalender-evt.bron-lisserbroek { font-size: 0.72rem; }
  .jaarkalender-logo { width: 32px; height: 32px; }
  .jaarkalender-wrap { max-height: calc(100vh - 260px); }
}