:root {
  --rand: #e5e7eb;
  --rand-sterk: #d4d4d8;
  --tekst: #171717;
  --tekst-zacht: #737373;
  /* Clubkleur van L.S.C. 1890, uit het logo gehaald. */
  --accent: #0e76bc;
  --accent-donker: #0a5c96;
  --accent-licht: #e7f1f9;
  --vlak: #ffffff;
  --achtergrond: #f5f7fa;
  --schaduw: 0 1px 2px rgba(16, 24, 40, .06);
  --groen: #15803d;
  --oranje: #b45309;
  --rood: #b00020;
  --rij-hover: #f9fafb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
  font-size: 14px;
  line-height: 1.45;
}

h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }
.zacht { color: var(--tekst-zacht); }
.klein { font-size: 12px; }
.verborgen { display: none !important; }

/* ---- Werkbalk ---- */
.werkbalk {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px; background: var(--vlak);
  border-bottom: 1px solid var(--rand); flex-wrap: wrap;
}
.werkbalk-links { display: flex; align-items: center; gap: 8px; }
.werkbalk-links strong { font-size: 15px; }
.werkbalk-links .zacht { font-size: 13px; }
.tabs { margin-left: auto; }
.werkbalk-rechts { display: flex; align-items: center; gap: 10px; }

.tabs { display: flex; gap: 2px; }
.tab {
  border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  padding: 4px 2px; margin: 0 10px; font: inherit; color: var(--tekst-zacht);
}
.tab:hover { color: var(--tekst); }
.tab.actief { color: var(--accent-donker); font-weight: 600; border-bottom-color: var(--accent); }

.knop {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  padding: 7px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500;
}
.knop:hover { background: var(--accent-donker); }
.knop.stil { background: var(--vlak); color: var(--tekst); border-color: var(--rand-sterk); }
.knop.stil:hover { background: var(--rij-hover); }
.knop.klein { padding: 3px 8px; font-size: 12px; }
.knop:disabled { opacity: .5; cursor: default; }

main { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }
.twee-koloms { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .twee-koloms { grid-template-columns: 1fr; } }
.kop-rij { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.kop-rij h2 { font-size: 20px; }

/* ---- Wedstrijdenlijst ---- */
.lijst { display: flex; flex-direction: column; gap: 12px; }
.wedstrijd {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; align-items: center;
  background: var(--vlak); border: 1px solid var(--rand); border-left: 4px solid var(--rand-sterk);
  border-radius: 8px; padding: 16px 20px; cursor: pointer; box-shadow: var(--schaduw);
}
.wedstrijd:hover { background: var(--rij-hover); }
.wedstrijd.gekozen { box-shadow: 0 0 0 2px var(--accent); }
/* De balk links: clubblauw als we thuis spelen, groen bij een uitwedstrijd. */
.wedstrijd.thuis { border-left-color: var(--accent); }
.wedstrijd.uit { border-left-color: var(--groen); }
.wedstrijd.gespeeld { opacity: .55; }
.datum { font-weight: 600; text-transform: capitalize; margin-bottom: 4px; }
.tegenstander { font-weight: 600; margin-bottom: 2px; }
.wedstrijd .badge.stil, .wedstrijd .badge.let-op { margin-top: 4px; }
.speler-regel.leiding { background: var(--rij-hover); }
.tijden { text-align: right; white-space: nowrap; }
.tijden b { font-size: 20px; font-weight: 600; }
.tijden > div:first-child { margin-bottom: 2px; }

.badge {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; vertical-align: 1px;
}
.badge.thuis { background: #dcfce7; color: var(--groen); }
.badge.uit { background: #ffedd5; color: var(--oranje); }
.badge.let-op { background: #fee2e2; color: var(--rood); }
.badge.stil { background: var(--achtergrond); color: var(--tekst-zacht); }
.badge.goed { background: #dcfce7; color: var(--groen); }

/* ---- Detailpaneel ---- */
.detail { background: var(--vlak); border: 1px solid var(--rand); border-radius: 8px; padding: 0; position: sticky; top: 72px; box-shadow: var(--schaduw); }
.detail > h2, .detail > .zacht, .detail > .klein, .detail > .leeg { padding: 0 20px; }
.detail > h2 { padding-top: 16px; font-size: 17px; }
.detail > .zacht:last-child, .detail > .klein:last-of-type { padding-bottom: 16px; }
.detail .leeg { color: var(--tekst-zacht); }
.detail h2 { margin-bottom: 2px; }
.blok { border-top: 1px solid var(--rand); margin-top: 16px; padding: 16px 20px 4px; }
.blok h3 { margin-bottom: 10px; }
.veldrij { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; margin-bottom: 10px; }
.veldrij label { color: var(--tekst-zacht); font-size: 13px; }

input[type=text], input[type=number], input[type=time], input[type=date], textarea, select {
  width: 100%; font: inherit; color: inherit; padding: 7px 10px;
  border: 1px solid var(--rand-sterk); border-radius: 6px; background: var(--vlak);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-licht); border-color: var(--accent); }
textarea { resize: vertical; min-height: 60px; }

.opmerking { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--rand); }
.opmerking:last-of-type { border-bottom: none; }
.opmerking .tekst { flex: 1; }
.weg { border: none; background: none; color: var(--tekst-zacht); cursor: pointer; font-size: 13px; padding: 0 2px; }
.weg:hover { color: var(--rood); }
.toevoegrij { display: flex; gap: 6px; margin-top: 8px; }

/* ---- Tabellen ---- */
table { width: 100%; border-collapse: collapse; background: var(--vlak); }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
th { font-size: 12px; color: var(--tekst-zacht); font-weight: 600; }
tbody tr:hover { background: var(--rij-hover); }
.kaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: var(--schaduw); }
.kaart > h2 { display: flex; align-items: center; gap: 8px; }

/* 1 is het hoogste niveau, 3 het laagste. */
select.niveau { text-align: center; font-weight: 600; }
.niveau-1 { color: var(--accent-donker); }
.niveau-2 { color: var(--groen); }
.niveau-3 { color: var(--oranje); }
.niveau- { color: var(--tekst-zacht); font-weight: 400; }

.melding {
  position: fixed; right: 16px; bottom: 16px; max-width: 380px;
  background: var(--tekst); color: #fff; padding: 10px 14px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); white-space: pre-line;
}
.melding.fout { background: var(--rood); }

.ouders { margin: 8px 0; }
.ouderrij { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.ouderrij .knop { white-space: nowrap; }
.badge.taak { background: var(--accent-licht); color: var(--accent-donker); text-transform: none; letter-spacing: 0; margin-left: 6px; }

/* Groepsfilters als pillen. */
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pil {
  border: 1px solid var(--rand-sterk); background: var(--vlak); color: var(--tekst-zacht);
  padding: 3px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px;
}
.pil:hover { background: var(--rij-hover); color: var(--tekst); }
.pil.aan { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.afgerond-schakelaar { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.introkaart h2 { margin-bottom: 8px; }
.introkaart p { margin: 0 0 12px; }
/* ---- Nieuws en acties ---- */
.lijstkaart { padding: 0; overflow: hidden; }
.kaartkop { padding: 16px 24px; border-bottom: 1px solid var(--rand); }
.kaartkop h2 { font-size: 15px; }
.leegregel { padding: 16px 20px; margin: 0; }

.actie {
  display: grid; grid-template-columns: 20px 1fr 20px; gap: 12px;
  align-items: start; padding: 16px 24px; border-bottom: 1px solid #f1f2f4;
}
.actie:last-child { border-bottom: none; }
.actie input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; }
.actie.af { opacity: .55; }
.actie.af .bericht-tekst { text-decoration: line-through; }

.nieuwsblok { margin-bottom: 20px; }
.nieuwsblok h2 { margin-bottom: 12px; }
.nieuwtje {
  display: grid; grid-template-columns: 1fr 20px; gap: 12px; align-items: start;
  background: var(--vlak); border: 1px solid var(--rand); border-left: 4px solid var(--rand-sterk);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; box-shadow: var(--schaduw);
}
.nieuwtje.groep-coordinatoren { border-left-color: var(--accent); }
.nieuwtje.groep-leiders-o12 { border-left-color: #f59e0b; }
.nieuwtje.groep-coach-o12-2 { border-left-color: var(--tekst-zacht); }
.nieuwtje.groep-website { border-left-color: var(--accent); }

.bericht-tekst { margin-bottom: 6px; line-height: 1.45; }
.bericht-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bericht-meta .bron { margin-left: 0; font-size: 12px; }
.bericht-meta .klein { color: var(--tekst-zacht); }

.groepbadge {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 6px; background: var(--achtergrond); color: var(--tekst-zacht);
}
.groepbadge.coordinatoren { background: var(--accent-licht); color: var(--accent-donker); }
.groepbadge.leiders-o12 { background: #fef3c7; color: #b45309; }
.groepbadge.coach-o12-2 { background: var(--achtergrond); color: var(--tekst-zacht); }
.groepbadge.website { background: var(--accent-licht); color: var(--accent-donker); }
.toevoegrij select { width: auto; }

.detail textarea { min-height: 240px; font-size: 13px; line-height: 1.5; }
.detail h3 .badge { margin-left: 6px; }

.bron { display: inline-block; margin-left: 8px; color: var(--accent); text-decoration: none; }
.bron:hover { text-decoration: underline; }
button.bron.knopje { border: none; background: none; font: inherit; cursor: pointer; padding: 0; }
.citaat { margin-top: 4px; padding: 6px 8px; border-left: 2px solid var(--rand-sterk); background: var(--achtergrond); color: var(--tekst); border-radius: 0 4px 4px 0; }

.bronrij { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.bronrij select, .bronrij input { font-size: 12px; }
.opmerking .tekst .bron { margin-left: 0; margin-right: 10px; }
.opmerking label { display: block; margin-top: 2px; }
.opmerking label input { margin-right: 4px; }

th.nr, td.nr { width: 28px; text-align: right; padding-right: 4px; font-variant-numeric: tabular-nums; }

.uitslagrij {
  display: grid; grid-template-columns: 1fr 24px 1fr; gap: 6px 8px;
  align-items: center; margin-bottom: 10px; max-width: 280px;
}
.uitslagrij input { width: 100%; text-align: center; font-size: 17px; padding: 8px 4px; }
.tijden .uitslag { font-size: 18px; }

.venster {
  border: 1px solid var(--rand); border-radius: 10px; padding: 18px 20px;
  width: min(460px, 92vw); background: var(--vlak); color: var(--tekst);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.venster::backdrop { background: rgba(15, 23, 35, .35); }
.venster h2 { margin-bottom: 12px; }
.venster .ouderrij { grid-template-columns: 1fr 1fr 1fr; }

.nummer { display: flex; align-items: center; gap: 6px; }
.nummer input { flex: 1; }
a.wa { text-decoration: none; font-size: 15px; line-height: 1; }
a.wa:hover { filter: brightness(1.15); }

.onderbalk { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 8px; }
/* P van Penalty naast het thuis-label. */
.penaltymerk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1; margin-left: 6px; cursor: help;
}
.penaltymerk.aan { background: #dcfce7; color: var(--groen); }
.penaltymerk.uit { background: var(--achtergrond); color: var(--tekst-zacht); position: relative; }
/* Streep erdoorheen zolang het blad er niet is. */
.penaltymerk.uit::after {
  content: ''; position: absolute; left: 1px; right: 1px; top: 50%;
  border-top: 1.5px solid var(--tekst-zacht); transform: rotate(-45deg);
}

.speler-regel { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--rand); }
.speler-regel .naam { font-weight: 600; }
.speler-regel.er-niet .naam { color: var(--tekst-zacht); font-weight: 400; text-decoration: line-through; }
.speler-regel.er-niet input[type=text] { font-size: 12px; padding: 2px 6px; }
.speler-regel.gast { background: var(--accent-licht); }
.speler-regel .stip { text-align: center; color: var(--accent); font-weight: 700; }
.detail h3 .badge { margin-left: 6px; }

.advies { margin: 8px 0; padding: 8px 10px; background: var(--achtergrond); border-radius: 6px; }
td.eigen { background: var(--rij-hover); }

.speler-regel.gast { grid-template-columns: 20px 1fr auto 20px; }
button.als-link { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-align: left; }
button.als-link:hover { text-decoration: underline; }

.venster.breed { width: min(620px, 94vw); max-height: 86vh; overflow-y: auto; }
.venster .speler-regel { grid-template-columns: 20px 1fr auto; }
.venster h3 .klein { margin-left: 8px; font-weight: 400; }

.kop-rechts { display: flex; align-items: center; gap: 12px; }
#programmaTeam { width: auto; }
.wedstrijd.ander-team { opacity: .85; }
.tegenstander .badge { margin-right: 6px; }

.venster .blok.gedempt { opacity: .75; }

th.smal, td.smal { width: 64px; text-align: center; }
.notitie-knop { border: none; background: none; cursor: pointer; font-size: 15px; padding: 2px 4px; line-height: 1; }
.notitie-knop:hover { filter: brightness(1.1); }
.notitie-knop .teller { font-size: 11px; font-weight: 600; color: var(--tekst-zacht); margin-left: 2px; vertical-align: 2px; }

.venster { position: relative; }
/* Blijft rechtsboven staan, ook als je door een lang venster scrolt. */
.venster-sluit {
  position: sticky; top: -4px; float: right; z-index: 2;
  margin: -6px -8px 0 8px;
  border: none; background: var(--vlak); cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--tekst-zacht); padding: 6px 8px; border-radius: 5px;
}
.venster-sluit:hover { background: var(--achtergrond); color: var(--tekst); }
.venster h2 { padding-right: 28px; }

.hulp-regel { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--rand); }
.hulp-regel:last-child { border-bottom: none; }
.hulp-regel.wij { background: var(--rij-hover); border-radius: 6px; padding: 6px 8px; }
.leiderknoppen { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }

/* ---- Clubkleur in de balk ---- */
/* Het clublogo blijft altijd links in de balk staan. */
.clublogo { height: 34px; width: auto; display: block; flex: none; }
.werkbalk-links { gap: 10px; }
.werkbalk { border-bottom: 2px solid var(--accent); }
.werkbalk-links strong { color: var(--accent-donker); letter-spacing: .01em; }
.tab.actief { color: var(--accent-donker); border-bottom-color: var(--accent); }

a.speld { text-decoration: none; margin-left: 6px; font-size: 13px; }
a.speld:hover { filter: brightness(1.15); }
.detail h2 .badge { margin-left: 8px; vertical-align: 3px; }

.uitslagrij .streep { font-size: 18px; color: var(--tekst-zacht); text-align: center; }
.uitslaglabel { text-align: center; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.uitslaglabel b { display: block; }

/* Blijft rechtsboven in beeld, ook bij een lang detailscherm. */
.detail-sluit {
  position: sticky; top: 0; float: right; z-index: 2; background: var(--vlak); margin: 8px 8px 0 0;
  border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--tekst-zacht); padding: 5px 7px; border-radius: 5px;
}
.detail-sluit:hover { background: var(--achtergrond); color: var(--tekst); }
.detail h2 { padding-right: 30px; }

/* ---- Notitie-modus ---- */
#notitieModus.aan { background: var(--accent); color: #fff; border-color: var(--accent); }
body.notitiemodus { cursor: crosshair; }
body.notitiemodus main *:hover { outline: 2px dashed var(--accent); outline-offset: 2px; }

#notitielaag { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
#notitielaag > * { pointer-events: auto; }

.plakker { position: absolute; }
.plakker-nr {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
  background: #f59e0b; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); line-height: 1; padding: 0;
}
.plakker-tekst {
  display: none; position: absolute; left: 26px; top: 0; width: 260px;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); font-size: 13px;
}
.plakker.open .plakker-tekst { display: block; }
.plakker.zwevend .plakker-nr { background: var(--tekst-zacht); }

.notitie-invoer {
  position: absolute; z-index: 50; width: 300px;
  background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.notitie-invoer textarea { margin: 6px 0; min-height: 60px; }

/* Opmerkingen bij een wedstrijd: klein uitroepteken met een ballon eronder. */
/* Neutraal i-tje met alles wat je over de wedstrijd moet weten. */
.infomerk {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; vertical-align: 1px;
  background: var(--accent-licht); color: var(--accent-donker);
  font-size: 12px; font-weight: 700; font-style: italic; line-height: 1; cursor: pointer;
}
.infomerk:hover { background: #d5e7f5; }
.infoballon {
  font-style: normal; display: none; position: absolute; left: 0; top: 24px; width: 280px; z-index: 20;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); font-size: 13px; font-weight: 400;
  color: var(--tekst); text-align: left; cursor: default;
}
.infomerk.open .infoballon { display: block; }
.inforegel { padding: 5px 0; font-weight: 400; }
.inforegel + .inforegel { border-top: 1px solid #f1f2f4; }
.inforegel b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--tekst-zacht); margin-bottom: 1px; }
.inforegel.opmerking-in-ballon { display: grid; grid-template-columns: 1fr 20px; gap: 6px; align-items: start; background: #fffbeb; margin: 4px -12px -2px; padding: 6px 12px; }

/* Wat lucht onder het adres en boven de gastspeler-keuze. */
.blok > .klein:first-of-type { margin-bottom: 6px; }
.speler-regel + .toevoegrij { margin-top: 10px; }

.twee-koloms.zonder-detail { grid-template-columns: minmax(0, 1fr); }
.twee-koloms.zonder-detail .detail { display: none; }

/* ---- Eén stijl voor alle overzichtskaarten ---- */
.kaart > h2:first-child { font-size: 16px; margin-bottom: 4px; }
.kaart > h2 + p, .kaart > h2 + .klein { margin-top: 0; }
.kaart > p.klein { margin: 0 0 14px; }

/* Tabellen lopen van rand tot rand binnen de kaart. */
.kaart table { margin: 14px -20px 0; width: calc(100% + 40px); }
.kaart table:last-child { margin-bottom: -20px; }
.kaart table:last-child { margin-bottom: -20px; }
.kaart th, .kaart td { padding: 10px 20px; }
.kaart th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-zacht); font-weight: 600; border-bottom: 1px solid var(--rand);
}
.kaart tbody td { border-bottom: 1px solid #f1f2f4; }
.kaart tbody tr:last-child td { border-bottom: none; }

/* Een rij met knoppen onderaan een kaart, na een volle-breedte tabel. */
.kaart table + .toevoegrij { margin-top: 16px; padding-top: 4px; }

/* Teams: kop van een teamkaart met de leidersregel eronder. */
.kaart > h2 + .klein.zacht { margin-bottom: 2px; }

/* Rijtijden: brede kolommen voor de namen, smalle voor de getallen. */
#tab-locaties table th:nth-child(1), #tab-locaties table td:nth-child(1) { width: 22%; }
#tab-locaties table th:nth-child(2), #tab-locaties table td:nth-child(2) { width: 10%; }
#tab-locaties table th:nth-child(3), #tab-locaties table td:nth-child(3) { width: 26%; }
#tab-locaties table th:nth-child(4), #tab-locaties table td:nth-child(4),
#tab-locaties table th:nth-child(5), #tab-locaties table td:nth-child(5) { width: 92px; }
#tab-locaties table th:nth-child(6), #tab-locaties table td:nth-child(6) { width: 90px; text-align: center; }
#tab-locaties table td:last-child { width: 44px; text-align: right; }

/* Documenten: naam en notitie krijgen ruimte, de rest volgt. */
#tab-documenten table th:nth-child(1), #tab-documenten table td:nth-child(1) { width: 26%; }
#tab-documenten table th:nth-child(2), #tab-documenten table td:nth-child(2) { width: 19%; }
#tab-documenten table th:nth-child(3), #tab-documenten table td:nth-child(3) { width: 22%; }
#tab-documenten table td:last-child { width: 90px; text-align: right; }
#tab-documenten table td .klein.zacht { line-height: 1.4; }

/* Na een volle-breedte tabel weer lucht voor de knoppenregel. */
.kaart table + .onderbalk { margin-top: 20px; }
.kaart table + .toevoegrij { margin-top: 20px; }

/* Opmerkingen bij een speler: datum boven, tekst eronder, ruim invoervak. */
.notitie { display: grid; grid-template-columns: 1fr 20px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid #f1f2f4; }
.notitie:last-of-type { border-bottom: none; }
.notitie-tekst { white-space: pre-wrap; line-height: 1.45; }
.venster .blok textarea { min-height: 90px; margin-top: 8px; }
.toevoegrij.tussenruimte { margin-top: 8px; align-items: center; }

/* Gast- en leiderregel: de keuzelijst vult de ruimte, de knoppen blijven op één regel. */
.toevoegrij { align-items: center; }
.toevoegrij select { flex: 1; min-width: 0; }
.toevoegrij .knop { flex: none; white-space: nowrap; }
.detail .toevoegrij + .toevoegrij { margin-top: 8px; }

/* Kopjes binnen de selectie: spelers en leiding uit elkaar. */
.subkop {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-zacht); margin: 12px 0 4px;
}
.subkop:first-of-type { margin-top: 4px; }
.speler-regel.leiding { background: none; }

/* Aanvinken wat mee mag in het bericht aan de leiders. */
.deelvink { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tekst-zacht); cursor: pointer; }
.deelvink input { width: 14px; height: 14px; }
.venster.breed textarea { min-height: 260px; font-size: 13px; line-height: 1.5; }

/* Voorstel om een verlopen actie te laten vervallen. */
.verlopen-tip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 12px; border-radius: 6px;
  background: #fef3c7; color: #92400e; font-size: 12px;
}

.detail .wijziging { display: flex; align-items: center; gap: 8px; padding: 6px 20px 0; }

/* Alvast klaargezet voor zaterdagen zonder wedstrijd. */
.kaart.vooruit { margin-top: 20px; }
.vooruit-regel { display: grid; grid-template-columns: 110px auto 1fr 20px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f2f4; }
.vooruit-regel:last-of-type { border-bottom: none; }
.vooruit-invoer { display: grid; grid-template-columns: 150px 150px 1fr 1fr auto; gap: 8px; align-items: center; margin-top: 12px; }
.vooruit-invoer select, .vooruit-invoer input { width: 100%; }
.vooruit-invoer span { display: contents; }

.wedstrijd.afgelast .tegenstander { text-decoration: line-through; color: var(--tekst-zacht); }
.afgelast-schakelaar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }

/* Trainingen: per datum wie er is afgemeld. */
.training-regel { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.training-teams { display: grid; gap: 6px; }
.training-team { display: grid; grid-template-columns: 90px 190px auto 1fr; gap: 10px; align-items: center; }
.training-team .afwijkend { color: var(--accent-donker); font-weight: 600; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 10px; }
.dagregel { display: inline-flex; align-items: center; gap: 8px; width: 240px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.dagregel input { margin: 0; }
.dagregel.vervalt { color: var(--tekst-zacht); text-decoration: line-through; }
.dagregel.vervalt .badge { text-decoration: none; }
.vinkje { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.vinkje input { margin: 0; }
.training-regel:last-of-type { border-bottom: none; }
.training-regel.vervalt { opacity: .55; }
.afmeldingen { display: flex; flex-wrap: wrap; gap: 6px; }
.afmeldingen .badge { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; }
.afmeldingen .weg { color: inherit; }
h3.subkop { margin-top: 16px; }

/* Activiteiten: toernooien en andere opgaven op de registratiepagina */
.activiteit-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.activiteit-kop h3 { margin: 0 0 2px; font-size: 16px; }
.act-labels { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.activiteit-team { display: grid; grid-template-columns: 70px 220px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid #f1f2f4; }
.activiteit-team .klein div { margin-bottom: 2px; }
.activiteit-team .badge { text-transform: none; letter-spacing: 0; }
details.kaart > summary { cursor: pointer; font-weight: 600; }
details.kaart > .kaart { box-shadow: none; border: 1px solid var(--rand); margin-top: 12px; }