:root{
  --groen:#0a7d34; --groen-donker:#065a25; --lijn:#e2e6ea;
  --grijs:#f4f6f8; --tekst:#1c2733; --rood:#c0392b; --oranje:#d68910;
  /* De twee tinten van de koppelstreep op 'Alle spelers'. Bewust géén groen,
     rood of oranje: die drie betekenen in deze app iets (merk, fout,
     waarschuwing), en dit streepje betekent niets — het scheidt alleen het
     ene koppel van het volgende. Zie app/static/spelers-sorteren.js. */
  --koppel-a:#4f7fbf; --koppel-b:#9b6bbf;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--tekst);background:var(--grijs);line-height:1.45}
a{color:var(--groen-donker);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;
  background:var(--groen);color:#fff;padding:.6rem 1rem;flex-wrap:wrap;gap:.5rem}
.topbar a{color:#fff}
/* Het merk linksboven: beeldmerk (app/static/logo.svg) plus woordmerk. De
   <a> is een flexbox zodat schild en naam op de middellijn uitlijnen, en de
   onderstreping bij hover hoort alleen bij de naam — over het schild heen
   loopt hij lelijk. De hoogte van het schild bepaalt de hoogte van de balk;
   groter dan 30 px duwt de topbar zichtbaar open. */
.brand a{display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:1.15rem}
.brand a:hover{text-decoration:none}
.brand a:hover .brand-naam{text-decoration:underline}
.brand-logo{flex:none;display:block;height:30px;width:auto}
.brand-naam{font-weight:800;font-size:1.05rem;letter-spacing:.13em;
  text-transform:uppercase}
.nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.nav .who{opacity:.85;font-size:.85rem}
.nav .logout{background:rgba(255,255,255,.15);padding:.25rem .6rem;border-radius:4px}

.countdown-bar{background:#fff;border-bottom:1px solid var(--lijn);
  padding:.5rem 1rem;font-size:.95rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.aanvul-bar{background:var(--grijs);border-bottom:1px solid var(--lijn);
  padding:.5rem 1rem;font-size:.95rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.aanvul-bar-zelf{background:#fff6e6;border-bottom-color:#f3dca6;color:#7a5300}
.aanvul-bar-zelf .badge{background:var(--oranje);color:#fff;border-color:var(--oranje);font-weight:600}
/* Score-correctie-balk: een al gesloten ronde is achteraf bijgesteld.
   Zelfde vorm als de countdown-/aanvulbalk, maar in waarschuwingsgeel zodat
   hij opvalt zonder als fout te lezen (rood is voorbehouden aan 'gesloten'). */
.correctie-bar{background:#fff6e6;border-bottom:1px solid #f3dca6;color:#7a5300;
  padding:.5rem 1rem;font-size:.95rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
/* Wegklikken (static/meldingen.js zet `.hidden` op de balk). Zonder deze regel
   doet dat `hidden` níéts: de `display:flex` hierboven komt uit een
   class-selector en die weegt zwaarder dan de `[hidden]{display:none}` van de
   browser zelf. Zo stond het van 08-09 tot 10-09-2026 in de code — de balk
   bleef staan en alleen het knopje verdween (bij de volgende paginaweergave
   springt meldingen.js na `balk.hidden = true` uit de lus, vóór de regel die
   het knopje zichtbaar maakt). Overal waar JavaScript `.hidden` zet en de CSS
   een `display` geeft, hoort dit paar bij elkaar: zie ook `.chat-kiezer`,
   `.tip-bubbel`, `.ruilkeuzes`, `.meer-spelers` en `.unread-dot`.
   Deze ene regel dekt beide meldingsbalken — de rondebalk en de correctiebalk
   dragen allebei `.correctie-bar`. */
.correctie-bar[hidden]{display:none}
.correctie-bar a{color:#7a5300;font-weight:600}
.correctie-bar .badge{background:#fff;border-color:#f3dca6;color:#7a5300;font-weight:600}
.correctie-icoon{font-size:1.1rem;line-height:1}
/* De uitklap "Wat is er bijgesteld?" in de correctiebalk (static/
   correctie-details.js vult hem bij het openen). De balk is een flexrij, dus
   zonder `flex-basis:100%` gaat deze <details> náást de tekst staan en wordt
   hij bij het openklappen een smalle kolom. Op een eigen regel dus, en met een
   scheidingslijn zodat de open lijst niet aan de meldingstekst plakt. */
.correctie-detail{flex-basis:100%;font-size:.95rem}
.correctie-detail summary{cursor:pointer;font-weight:600}
.correctie-detail[open]{border-top:1px solid #f3dca6;padding-top:.4rem;margin-top:.2rem}
.correctie-detail .correctie-lijst{color:#7a5300}
/* Het OK-knopje waarmee een deelnemer déze melding wegklikt (static/
   meldingen.js). `margin-left:auto` duwt hem naar de rechterkant van de balk;
   op een smal scherm wikkelt de balk en komt hij gewoon onderaan te staan.
   Bewust rustig: een omlijnd knopje in de kleur van de balk, want hij mag niet
   met de link concurreren. */
.melding-ok{margin-left:auto;background:#fff;border:1px solid #f3dca6;
  color:#7a5300;font:inherit;font-weight:600;line-height:1;
  padding:.25rem .7rem;border-radius:4px;cursor:pointer}
.melding-ok:hover{background:#f3dca6}
/* Live-balk: er speelt NU een wedstrijd. Bewust een tweede balk naast de rode
   ronde-balk (besluit 39) — die gaat over het wisselslot, deze over de
   wedstrijd, en ze gelden niet altijd tegelijk. Groen omdat het goed nieuws is
   en niet iets waar je wat aan moet doen; de kloppende stip doet het werk dat
   in de andere balken een icoon doet. */
.live-bar{background:#eaf7ee;border-bottom:1px solid #b7e0c4;color:#0b5c2b;
  padding:.5rem 1rem;font-size:.95rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.live-bar a{color:#0b5c2b;font-weight:600}
.live-bar .muted{color:#3d7a55}
.live-inhoud{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.live-stip{width:.6rem;height:.6rem;border-radius:50%;background:var(--rood);
  flex:none;animation:live-klop 1.6s ease-in-out infinite}
@keyframes live-klop{0%,100%{opacity:1}50%{opacity:.25}}
/* Wie bewegende beelden liever niet heeft, krijgt gewoon een stip. */
@media (prefers-reduced-motion: reduce){.live-stip{animation:none}}
/* Menu-item dat alleen bestaat zolang er een ronde loopt. Lichter dan de rest
   van de balk, zodat het opvalt tussen de vaste items zonder te schreeuwen. */
.nav .nav-live{background:rgba(255,255,255,.22);padding:.25rem .7rem;
  border-radius:20px;font-weight:600}
.nav .nav-live:hover{background:rgba(255,255,255,.32);text-decoration:none}
/* 'Ronde nu' — de live-pagina. */
.live-wedstrijden{list-style:none;margin:0;padding:0}
.live-wedstrijden li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.4rem 0;border-bottom:1px solid var(--lijn)}
.live-wedstrijden li:last-child{border-bottom:0}
.live-wedstrijden li.bezig{background:#f4fbf6;margin:0 -.5rem;padding-left:.5rem;
  padding-right:.5rem;border-radius:4px}
.live-wedstrijden .uitslag{flex:1 1 18rem}
/* Nog niet begonnen: geen 0-0 maar 'nnb'. Gedempt, want het is een afwezigheid
   en geen uitslag. */
.live-wedstrijden .nnb{color:#7b8794;font-weight:600;letter-spacing:.02em}
/* De uitklapper mag de regel niet uit zijn flex-opmaak trekken: het <details>
   vult de hele li en de <summary> is zelf de flex-rij. */
.live-wedstrijden li:has(> .live-detail){display:block}
.live-wedstrijden .live-detail{width:100%}
.live-wedstrijden .live-detail>summary{display:flex;gap:.6rem;align-items:center;
  flex-wrap:wrap;cursor:pointer;list-style:revert}
.live-wedstrijden .live-detail>summary::-webkit-details-marker{display:revert}
/* Hoe oud de gegevens van de bron zijn. Gedempt oranje: het is geen fout, maar
   je moet het wel meewegen bij wat je ziet. */
.bron-vertraging{font-size:.8rem;color:#8a5a00;background:#fff6e6;
  border:1px solid #f3dca6;border-radius:20px;padding:.05rem .6rem;white-space:nowrap}
.bron-vertraging.bij{color:#0b5c2b;background:#eaf7ee;border-color:#b7e0c4}
.badge.achter{background:#fff6e6;border-color:#f3dca6;color:#8a5a00;font-weight:600}
/* Rust: de wedstrijd ligt stil. Neutraal grijsblauw en niet groen of oranje —
   er is niets aan de hand en er gebeurt niets. */
.badge.rust{background:#eef2f6;border-color:#d3dde6;color:#4b5b6b;font-weight:600}
table.live-stand tr.ikzelf{background:#f4fbf6;font-weight:600}
table.live-stand .team-naam{vertical-align:middle}
.pijl{font-weight:600}
.pijl.omhoog{color:var(--groen)}
.pijl.omlaag{color:var(--rood)}
/* Top van de ronde: een speler wiens punten nergens terechtkwamen. Gedempt én
   doorgestreept, zodat het ook zonder kleur te zien is — op een zwart-witte
   telefoon in de zon is grijs alleen niet genoeg. De streep staat op de naam en
   niet op de hele rij: club, punten en opbouw kloppen gewoon, alleen de speler
   telde voor niemand mee. */
table.live-top tr.onbenut{color:#7b8794}
.onbenut .speler{text-decoration:line-through;text-decoration-thickness:1px}
/* De verloopgrafiek van één ronde staat verderop, bij de andere twee
   lijngrafieken — zie '.verloopgrafiek'. */
/* Korte oplichting nadat de tabellen ververst zijn, zodat je ziet dát er iets
   veranderde zonder dat de pagina onder je vandaan springt. */
#live-tabellen.net-ververst{animation:live-oplichten 1.2s ease-out}
@keyframes live-oplichten{from{background:#eaf7ee}to{background:transparent}}
@media (prefers-reduced-motion: reduce){#live-tabellen.net-ververst{animation:none}}
.badge{background:var(--grijs);border:1px solid var(--lijn);border-radius:20px;
  padding:.1rem .7rem;font-size:.85rem}
.badge.closed{background:#fdeaea;color:var(--rood);border-color:#f5c6c6}
.badge.live{background:#fff;border-color:#b7e0c4;color:#0b5c2b;font-weight:600}
.badge.correctie{background:#fff6e6;color:#9a6a00;border-color:#f3dca6;font-weight:600}
/* Uitklapbaar correctie-detail onder een ronde-rij op de Scores-pagina. */
.correctie-rij>td{background:#fffaf0;border-top:0}
.correctie-rij summary{cursor:pointer;color:#7a5300;font-weight:600;font-size:.9rem}
.correctie-lijst{margin:.6rem 0 .3rem;padding-left:1.2rem;font-size:.9rem}
.correctie-lijst li{margin-bottom:.5rem}
.correctie-lijst .badge{margin-right:.3rem}

/* Voortgangsbalk bij "Bereken scores" (app/static/scores-voortgang.js).
   Plakt bovenaan zodat hij zichtbaar blijft als je tijdens het berekenen
   door de rondelijst scrolt. */
.bereken-balk{position:sticky;top:0;z-index:5;background:#fff;
  border:1px solid var(--lijn);border-radius:8px;padding:.7rem .9rem;
  margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.bereken-kop{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap}
.bereken-tekst{flex:1 1 auto;min-width:0;color:#4a5a68}
.bereken-teller{font-variant-numeric:tabular-nums;font-weight:700;color:var(--groen-donker)}
.bereken-spoor{height:8px;background:var(--grijs);border-radius:99px;
  overflow:hidden;margin-top:.5rem}
.bereken-vulling{height:100%;width:0;background:var(--groen);border-radius:99px;
  transition:width .25s ease}

/* Rondepagina: signaal of de laatste berekening compleet was, en het
   uitklapmenu met de spelersscores per wedstrijd. */
.run-status{margin-bottom:.35rem}
.run-status.klaar .badge{background:#eafaf0;color:var(--groen-donker);border-color:#bfe8cf}
.run-status.deels .badge{font-weight:600}
.wedstrijd-detail>summary{cursor:pointer;list-style:revert}
.wedstrijd-detail>summary:hover{background:var(--grijs);border-radius:4px}
.wedstrijd-spelers{margin:.4rem 0 .6rem .8rem;padding-left:.6rem;
  border-left:2px solid var(--lijn)}
.wedstrijd-kolommen{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.club-scores h4{margin:.2rem 0 .3rem;font-size:.85rem;color:var(--groen-donker)}
table.spelers-scores{border:none;border-radius:0;background:transparent}
table.spelers-scores th,table.spelers-scores td{padding:.15rem .35rem;font-size:.72rem;
  border-bottom:1px solid var(--lijn)}
table.spelers-scores th{background:transparent;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.03em;color:#7a8894}
table.spelers-scores td.punten{font-variant-numeric:tabular-nums;font-weight:700;
  text-align:right;white-space:nowrap}
/* Mailvoorbeeld op het adminscherm: de tabellen brengen hun eigen inline
   opmaak mee (mailclients kennen geen stylesheet), dus hier alleen ruimte
   maken en breed laten scrollen op smalle schermen. */
.mail-preview{overflow-x:auto}
.mail-preview h3{margin:1.2rem 0 .4rem}
.mail-preview h3:first-child{margin-top:0}
.cd{font-variant-numeric:tabular-nums;font-weight:700}

.container{max-width:1000px;margin:1.2rem auto;padding:0 1rem}
.container.container-wide{max-width:none;width:100%;padding:0 1.5rem}
.footer{text-align:center;color:#8a97a3;font-size:.8rem;padding:2rem 0 1rem}
.app-versie{margin-left:.4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;opacity:.7}

h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.4rem 0 .6rem}

.card{background:#fff;border:1px solid var(--lijn);border-radius:8px;
  padding:1rem 1.2rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:1rem;text-align:center}
.stat .n{font-size:1.8rem;font-weight:700;color:var(--groen-donker)}
.stat .l{color:#6b7a88;font-size:.85rem}

table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);
  border-radius:8px;overflow:hidden}
th,td{padding:.5rem .7rem;text-align:left;border-bottom:1px solid var(--lijn);font-size:.92rem}
th{background:var(--grijs);font-weight:600}
tr:last-child td{border-bottom:none}

.flash{padding:.6rem .9rem;border-radius:6px;margin-bottom:.7rem;border:1px solid}
.flash.success{background:#eafaf0;border-color:#bfe8cd;color:#0a7d34}
.flash.info{background:#eaf2fb;border-color:#c5dbf2;color:#1b5eae}
.flash.warning{background:#fff6e6;border-color:#f3dca6;color:#9a6a00}
.flash.danger{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}

input,select,button{font:inherit;padding:.45rem .6rem;border:1px solid #c7d0d8;
  border-radius:6px;background:#fff}
/* Tekstveld voor een tijdstip in het vaste formaat JJJJ-MM-DD UU:MM (zie de
   |dt_veld-filter in app/main.py). Cijfers even breed, zodat de kolom niet
   danst; rood zodra het formaat niet klopt. */
input.tijdveld{width:10.5rem;max-width:100%;font-variant-numeric:tabular-nums}
input.tijdveld:invalid{border-color:var(--rood);background:#fdeaea}
button,.btn{background:var(--groen);color:#fff;border:none;cursor:pointer;padding:.5rem .9rem}
button:hover,.btn:hover{background:var(--groen-donker);text-decoration:none}
button.sec{background:#e9edf1;color:var(--tekst)}
button.sec:hover{background:#dbe1e7}
button.danger{background:var(--rood)}
.inline{display:inline}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
form.stack{display:grid;gap:.6rem;max-width:420px}

.auth{max-width:380px;margin:3rem auto}
.auth .card{padding:1.5rem}
.muted{color:#7a8894;font-size:.85rem}

.linie-titel{margin-top:1.2rem;color:var(--groen-donker);border-bottom:2px solid var(--lijn);
  padding-bottom:.2rem}
.koppel{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .2rem;border-bottom:1px solid var(--lijn)}
.koppel .spelers{display:flex;gap:.6rem;flex-wrap:wrap}
.speler{padding:.2rem .5rem;border-radius:6px;border:1px solid var(--lijn)}
.speler.basis{background:#eafaf0;border-color:#bfe8cd;font-weight:600}
.speler.reserve{opacity:.7}
.club-tag{font-size:.75rem;color:#6b7a88}

/* Spel-switcher en rol-badge in de navigatie */
.spel-kiezer{display:inline-flex;align-items:center;gap:.3rem;margin-left:.4rem}
.spel-kiezer .spel-label{color:#e8f5ec;font-size:.8rem}
.spel-kiezer select{padding:.3rem .4rem;border-radius:6px}
.badge.admin-badge{background:#2b6cb0;color:#fff;margin-right:.3rem}

/* ---------------- Opstelling als voetbalveld ---------------- */
.team-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.team-acties{display:flex;gap:.5rem;flex-wrap:wrap}
.club-badge{display:block}

.pitch{
  position:relative;
  background:
    repeating-linear-gradient(0deg, #1f9a4d 0 42px, #1c8f47 42px 84px);
  border:3px solid rgba(255,255,255,.85);
  border-radius:12px;
  padding:1.1rem .6rem;
  margin-top:1rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;
  min-height:560px;
  overflow:hidden;
}
/* Veldmarkeringen: middenlijn + middencirkel + strafschopgebieden */
.pitch-markings{position:absolute;inset:0;pointer-events:none}
.pitch-markings::before{ /* middenlijn */
  content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;
  background:rgba(255,255,255,.55)}
.pitch-markings::after{ /* middencirkel */
  content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;
  transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.55);border-radius:50%}

.pitch-row{position:relative;z-index:1;display:flex;justify-content:center;
  gap:.5rem;flex-wrap:wrap}

.pos{
  position:relative;                 /* anker voor .pos-punten linksboven */
  background:rgba(255,255,255,.94);
  border-radius:10px;
  padding:.5rem .5rem .55rem;
  width:118px;min-height:118px;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  text-align:center;
}
/* Behaalde punten van de opgestelde speler, in de linkerbovenhoek van de
   tegel. Absoluut gepositioneerd zodat de clublogo's op één lijn blijven. */
.pos-punten{
  position:absolute;top:4px;left:4px;
  min-width:20px;padding:0 .3rem;
  font-size:.72rem;font-weight:700;line-height:1.45;
  border-radius:9px;border:1px solid transparent;cursor:help;
}
.pos-punten.plus{background:#eafaf0;border-color:#bfe8cd;color:#0a7d34}
.pos-punten.nul{background:#f2f5f7;border-color:#dde4e9;color:#7a8894}
.pos-punten.min{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}
/* De club moet nog spelen: een streepje, geen nul. Bewust bleker en zonder
   omlijning dan .nul — die twee staan tijdens een speeldag naast elkaar op het
   veld, en het verschil tussen 'nog niets te zeggen' en 'niets gescoord' moet
   je in één oogopslag zien. Zie player._wacht_uitleg. */
.pos-punten.wacht{background:transparent;border-color:transparent;color:#9aa7b2;
  font-weight:600}
.pos.is-incompleet{outline:2px dashed #d68910;outline-offset:-2px;background:rgba(255,251,240,.96)}
.pos-badge{line-height:0}
.pos-club{font-size:.68rem;color:#5b6b78;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.pos .naam{font-size:.82rem;line-height:1.15;display:flex;align-items:center;gap:.25rem;justify-content:center}
.pos .naam.basis{font-weight:700;color:#0b3d1f}
.pos .naam.reserve{color:#8794a0;font-size:.76rem}
.pos .naam.leeg{color:#c07a10;font-style:italic;font-size:.78rem}
/* Bewust niemand opgesteld (docs/PLAN_LEGE_PLEK.md). Leest als een basisplek —
   want dat is het: deze plek dóét mee, hij levert alleen niets op — maar in het
   grijs en cursief, zodat hij niet te verwarren is met een naam. De stip ervoor
   komt uit dezelfde regel als bij een gewone basisspeler. */
.pos .naam.leeg-opgesteld{font-weight:700;color:#6b7884;font-style:italic;cursor:help}
.pos .naam.leeg-opgesteld .stip{background:#b6c0c9}
/* Speler die de deelnemer zelf uit het koppel heeft gehaald omdat hij niet meer
   in de Eredivisie speelt. Blijft staan in de ronde-historie (zie
   templates/player/_team_view.html); doorgestreept zodat duidelijk is dat hij
   niet meer opgesteld kan worden. */
.pos .naam.vertrokken{color:#98a4ae;font-size:.76rem;text-decoration:line-through;cursor:help}
/* Doorklik naar het spelersprofiel op 'Score per koppel' (02-09-2026). De link
   mag de tegel niet blauw maken: kleur en gewicht komen van .basis/.reserve/
   .vertrokken, de link voegt alleen de onderstreping bij hover toe. Op een
   vertrokken lid staat al een line-through; die laten we staan en zetten er
   geen tweede streep onder. */
.pos .naam a{color:inherit;text-decoration:none}
.pos .naam a:hover,.pos .naam a:focus-visible{text-decoration:underline}
.pos .naam.vertrokken a:hover,.pos .naam.vertrokken a:focus-visible{text-decoration:line-through}
.stip{width:8px;height:8px;border-radius:50%;background:#0a7d34;display:inline-block;flex:0 0 auto}
.leeg-vak{display:inline-block;width:12px;height:12px;border:2px dashed #d68910;border-radius:3px;vertical-align:-2px}
.stip-rood{width:8px;height:8px;border-radius:50%;background:var(--rood);display:inline-block;
  flex:0 0 auto;vertical-align:1px;margin-left:.15rem;cursor:help}
.kruis-rood{font-size:.72em;margin-left:.15rem;cursor:help;line-height:1}

/* -------- Mijn team: wisselen, bevestigen, terugdraaien (28-08-2026) ------ */
/* De ⇄-knop is dezelfde als in Koppelbeheer (.wissel-basis-reserve): één knop
   die basis en reserve omdraait, waarna de basisspeler bovenaan komt. Op een
   ronde die op slot zit blijft hij klikbaar en wordt hij rood — klikken levert
   dan de uitleg op waarom het niet kan. Een uitgeschakelde knop zou die vraag
   onbeantwoord laten, en dat is juist de vraag die je op zo'n moment hebt. */
.pos .wissel-knop{margin-top:.2rem;font-weight:600;font-size:.95rem;line-height:1;
  padding:.15rem .5rem;background:var(--grijs);color:var(--tekst);
  border:1px solid var(--lijn);border-radius:6px;cursor:pointer}
.pos .wissel-knop:hover{background:#eafaf0;border-color:#bfe8cd;color:var(--groen-donker)}
.pos .wissel-knop.op-slot{background:#fdeaea;border-color:#f5c6c6;color:var(--rood);cursor:help}
.pos .wissel-knop.op-slot:hover{background:var(--rood);border-color:var(--rood);color:#fff}

/* Twee-staps bevestiging ('Invullen', 'Uit koppel halen'): de knop wapent zich
   bij de eerste klik. Oranje en niet rood — dit is een waarschuwing vooraf,
   geen foutmelding achteraf. */
.bevestig-knop.gewapend{background:var(--oranje);border-color:var(--oranje);
  color:#fff;font-weight:600}

/* De ⟳-knop: transfermodus voor één koppel (docs/PLAN_RUILEN.md §5). Zelfde
   vorm en zelfde op-slot-gedrag als de ⇄ hierboven, want het is dezelfde
   afspraak — de knop blijft klikbaar als het niet mag en vertelt dan waarom.
   Bewust ⟳ en niet 🔁: dat laatste is in de activiteitenfeed al het icoon voor
   een wissel (activiteit.ICONEN), en dat zijn twee verschillende dingen. */
.pos .ruil-knop,.pos .ruil-ja,.pos .ruil-nee{margin-top:.2rem;font-weight:600;
  font-size:.95rem;line-height:1;padding:.15rem .5rem;background:var(--grijs);
  color:var(--tekst);border:1px solid var(--lijn);border-radius:6px;
  cursor:pointer}
.pos .ruil-knop:hover,.pos .ruil-ja:hover{background:#eafaf0;
  border-color:#bfe8cd;color:var(--groen-donker)}
.pos .ruil-knop.op-slot{background:#fdeaea;border-color:#f5c6c6;
  color:var(--rood);cursor:help}
.pos .ruil-knop.op-slot:hover{background:var(--rood);border-color:var(--rood);
  color:#fff}
.pos .ruil-nee:hover{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}

/* De keuzelijsten die onder de ⟳ openklappen: één regel per bezette plek, met
   de naam die eruit gaat ervoor. Krap gehouden — dit staat op een veldtegel,
   die op een telefoon niet breder is dan een duim.

   Twee dingen die hier per se bij horen, en die op 07-09-2026 allebei ontbraken:

   1. De `[hidden]`-regel. Een `display` uit deze stylesheet wint van de
      `[hidden]{display:none}` van de browser zelf, want een class-selector
      weegt zwaarder dan de user-agent-stylesheet. Zonder de regel hieronder
      doet het `hidden` in team.html dus niets en staan de keuzelijsten er
      permanent — ook zonder dat er op de ⟳ geklikt is. Elders in dit bestand
      staat om dezelfde reden `.chat-kiezer[hidden]`, `.tip-bubbel[hidden]` en
      drie keer `.unread-dot[hidden]`: overal waar JavaScript `.hidden` zet en
      de CSS een `display` geeft, hoort dit paar bij elkaar.

   2. Een breedte. Een `<select>` is zonder breedte zo breed als zijn langste
      optie, en spelersnamen zijn langer dan een tegel van 118px. Zonder de
      regels hieronder rekt de lijst buiten de tegel uit — aan beide kanten,
      want `.pos` centreert — en staat de hele rij scheef. Dezelfde aanpak als
      `.pos .invul` onderaan dit bestand: de vorm vult de tegel, de lijst kapt
      af op 106px. De browser kort de optietekst dan zelf in; `text-overflow`
      werkt op een `<select>` niet. */
.ruilvorm{width:100%}
.ruilkeuzes{margin:.3rem 0 .2rem;display:flex;flex-direction:column;gap:.25rem;
  width:100%}
.ruilkeuzes[hidden]{display:none}
.ruilregel{display:flex;flex-direction:column;gap:.1rem;font-size:.82rem}
.ruilregel .ruil-uit{font-weight:600;opacity:.75}
.ruilregel select{font-size:.82rem;padding:.1rem .2rem;width:100%;max-width:106px}

/* De aanvoerdersband, rechtsboven op de tegel — tegenover .pos-punten, dat
   linksboven zit. Absoluut gepositioneerd, want in de flow zou hij de
   clublogo's uit elkaar duwen en zijn de tegels niet meer op één lijn.

   Drie standen, en het verschil moet je zonder tooltip kunnen zien:
     dof + streepjesrand   niet de aanvoerder — een lege plek waar hij kán
     oranje + vol          jouw aanvoerder in deze ronde
     oranje + streepjes    overgenomen uit een eerdere ronde: hij telt gewoon,
                           maar je hebt hem deze week nog niet zelf bevestigd

   Rood op slot, precies als de ⇄ en de ⟳: de knop blijft klikbaar en vertelt
   waarom het niet kan. Zie app/aanvoerder.py::aanvoerder_reden. */
.pos .bandvorm{position:absolute;top:4px;right:4px;line-height:0}
.pos .band{width:22px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;line-height:1;
  border-radius:50%;cursor:pointer;
  background:#fff;border:1px dashed #cdd6dd;color:#b3bfc8}
.pos .band:hover{background:#fff6e8;border-style:solid;
  border-color:var(--oranje);color:var(--oranje)}
.pos .band.aan{background:var(--oranje);border:1px solid var(--oranje);
  color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pos .band.aan.overgenomen{border-style:dashed;border-color:#fff;
  background:#e8a33d}
.pos .band.aan:hover{background:#d68910;border-color:#d68910;color:#fff}
/* Op de alleen-lezen weergave (ronde-historie, Andere teams) is de band geen
   knop maar een merkteken: zelfde plek, zelfde vorm, geen cursor. */
.pos .band.vast{position:absolute;top:4px;right:4px;cursor:help}
.pos .band.op-slot{cursor:help}
.pos .band.op-slot:not(.aan){border-color:#f5c6c6;color:#e2a3a3;
  background:#fdf3f3}
.pos .band.op-slot:not(.aan):hover{background:#fdeaea;border-color:#f5c6c6;
  color:var(--rood)}

/* Het uitklapbare lijstje met de wissels van deze ronde. Staat open zodra de
   ronde op slot zit: dan is dit het enige wat er nog over te zeggen valt. */
.wijzigingen-blok{background:#fff;border:1px solid var(--lijn);border-radius:8px;
  padding:.5rem .8rem;margin-top:.8rem}
.wijzigingen-blok>summary{cursor:pointer;font-weight:600;font-size:.92rem}
.wijzigingen{margin:.5rem 0 0;padding-left:1.4rem;font-size:.88rem}
.wijzigingen li{padding:.15rem 0}
.wijzigingen li .muted{font-size:.78rem;margin-right:.3rem}

/* Superadmin: op 'Andere teams' een ❌-speler uit een koppel halen en de plek
   vullen. Bewust met een lijntje losgezet van de namen erboven: die tonen de
   bezetting van de bekeken ronde, dit blok werkt op het koppel zoals het nu
   is. Zie player._superadmin_koppelacties. */
.pos .sa-koppel{width:100%;margin-top:.3rem;padding-top:.3rem;
  border-top:1px dashed var(--lijn);display:flex;flex-direction:column;
  gap:.25rem;align-items:center}
.pos .sa-koppel .invul{margin-top:0}
/* Het koppel staat niet zo in de startlijst van koppelbeheer: er is met een
   oudere indeling geveild. Oranje, want dit is een waarschuwing over de
   opzet van het spel en geen fout in de app. */
.pos .sa-afwijking{font-size:.68rem;font-weight:600;color:var(--oranje);
  line-height:1.2;text-align:center;cursor:help}

/* De controle bij 'Veiling starten': klopt de koppelvoorraad van dit spel nog
   met de startlijst? Na de start werkt koppelbeheer dit spel niet meer bij, dus
   dit is het laatste moment waarop het te repareren valt. Neutraal grijs zolang
   alles klopt; oranje zodra er verschil is — een waarschuwing over de opzet,
   geen fout in de app. */
.startlijst-check{border:1px solid var(--lijn);border-radius:8px;
  padding:.6rem .8rem;margin:.8rem 0;background:#fafbfc}
.startlijst-check p{margin:.2rem 0}
.startlijst-check.mismatch{border-color:var(--oranje);background:#fff8f0}
.startlijst-check .mismatch-kop{color:var(--oranje);font-weight:600;
  margin-top:.5rem}
.startlijst-check .mismatch-lijst{margin:.4rem 0 0;padding-left:1.2rem;
  font-size:.85rem}
.startlijst-check .mismatch-lijst li{padding:.2rem 0}

/* Koppels zonder eigenaar op de veilingpagina: restanten die hun spelers van
   de transferlijst houden. Oranje kader — er moet iets gebeuren, maar er is
   niets stuk. */
.card.wees-koppels{border-color:var(--oranje);background:#fff8f0}
.wees-koppels h2{margin:0 0 .4rem;color:var(--oranje)}
.wees-lijst{margin:.5rem 0 0;padding-left:1.2rem;font-size:.9rem}
.wees-lijst li{padding:.2rem 0}
.wees-bezwaar{color:var(--rood);font-size:.82rem}

/* Superadmin: linie wijzigen (spelerslijst + koppel-tegels) */
.linie-wijzig-form{display:flex;gap:.25rem;align-items:center}
.linie-wijzig-form select{padding:.15rem .3rem;font-size:.82rem;border:1px solid var(--lijn);
  border-radius:6px;background:#fff}

button.mini,.btn.mini{padding:.2rem .55rem;font-size:.78rem}
.pos .invul{display:flex;flex-direction:column;gap:.25rem;width:100%;margin-top:.15rem}
.pos .invul select{padding:.2rem;font-size:.75rem;max-width:106px}
.mini-txt{font-size:.68rem}
/* De definities van .tabel-knijp/.tabel-scroll en .tabel-veeg staan bij elkaar
   in het tabellenblok verderop, zodat het verschil op één plek te lezen is. */
.tabel-knijp .row,.tabel-scroll .row,.tabel-veeg .row{row-gap:.3rem}
/* Een wedstrijdregel hoort op één regel te staan zolang dat kan: "Ajax 2-1
   PSV (2026-09-06 18:45)" halverwege afbreken leest slecht. In een geknepen
   tabel is er geen keuze — daar moet hij wél wikkelen, anders steekt hij zijn
   cel uit. In een brede tabel is er ruimte, dus daar blijft nowrap staan. */
.wedstrijd-regel{white-space:nowrap}
.tabel-knijp .wedstrijd-regel,
.tabel-scroll .wedstrijd-regel{white-space:normal}
.wedstrijd-regel+.wedstrijd-regel{margin-top:.15rem}
.legenda{white-space:nowrap}
.legenda.reserve-txt{color:#8794a0}

@media (max-width:640px){
  .pos{width:31%;min-width:96px}
  .pitch{min-height:auto}
}

/* Feed 'andere klojo's' */
.klojos h2{margin-top:0}
.klojo-lijst{list-style:none;padding:0;margin:.3rem 0 0}
.klojo-lijst li{padding:.35rem 0;border-bottom:1px solid var(--lijn);font-size:.92rem}
.klojo-lijst li:last-child{border-bottom:none}

/* Echte logo-afbeeldingen netjes binnen het vak houden */
.club-logo-img{object-fit:contain}
/* Niet-wissel-acties in de feed vallen rood op */
.klojo-lijst li.rood{color:var(--rood)}
.klojo-lijst li.rood strong{color:var(--rood)}

/* Kosten onder een koppel op het veld */
.pos-kosten{font-size:.7rem;color:#0b3d1f;font-weight:700;background:#eafaf0;
  border:1px solid #bfe8cd;border-radius:10px;padding:0 .4rem;margin-top:.05rem}
/* Eigen acties: groen */
.klojo-lijst li.groen,.klojo-lijst li.groen strong{color:var(--groen-donker)}
/* Eigen rij in de ranglijst accentueren */
tr.ik td{background:#eafaf0;font-weight:600}

/* Titel met avatar */
.titel-met-avatar{display:flex;align-items:center;gap:.7rem}
.titel-met-avatar h1{margin:0}
.avatar{display:block;border-radius:22%}
.avatar-preview{margin:.3rem 0 .6rem}

/* Profiel-dropdown in de nav */
.profiel-menu{position:relative;display:inline-block}
.profiel-knop{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.14);
  border:none;color:#fff;padding:.25rem .5rem;border-radius:20px;cursor:pointer;font-weight:600}
.profiel-knop .avatar{border-radius:50%}
.dropdown{display:none;position:absolute;right:0;top:110%;background:#fff;color:#22303a;
  border:1px solid var(--lijn);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.18);
  min-width:190px;z-index:20;overflow:hidden}
.dropdown.open{display:block}
.dropdown a{display:block;padding:.6rem .8rem;color:#22303a;text-decoration:none}
.dropdown a:hover{background:#eef5f0}

/* Klikbare teamnaam. Sinds 13-09-2026 staat hij overal waar een teamnaam op
   het scherm komt; wie hem zet is app/__init__.py::_teamlink.
   `color:inherit` is daarvoor de belangrijkste regel: de link moet in een
   tabelcel, een chatregel en een tegel onopvallend meelopen met de tekst
   eromheen, en pas bij hover laten zien dat er iets te klikken valt. */
.team-link{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:inherit}
.team-link:hover{text-decoration:underline}
.team-link .avatar{border-radius:50%}
/* Staat de link om een avatar én een naam heen, dan neemt hij de tussenruimte
   over van het blok waar hij in zit — anders verspringt de indeling een paar
   pixels zodra een naam klikbaar wordt. */
.cc-titel .team-link,.cc-zijde-kop .team-link{gap:.55rem}
.cc-historie .cc-cel .team-link{gap:.4rem}
/* In een lopende regel tekst (chat, 'van X · 3 dagen geleden') is inline-flex
   juist verkeerd: dat trekt de naam uit de zin. */
.chat-meta .team-link,.mini-txt .team-link{display:inline}

/* Prijs-kaarten (Gouden Pik / Loden Lul) */
.grid.twee{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.prijs h3{margin:.1rem 0 .5rem}
.prijs.goud{border-left:4px solid #d4af37}
.prijs.lood{border-left:4px solid #7a7f87}
@media (max-width:640px){.grid.twee{grid-template-columns:1fr}}

/* Ronde-navigatie (bekijken) */
.ronde-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:.6rem 0}

/* Chat */
.chat-lijst{display:flex;flex-direction:column;gap:.5rem;max-height:55vh;overflow-y:auto;margin-bottom:.7rem}
.chat-regel{display:flex;gap:.5rem;align-items:flex-start}
.chat-regel.ik{flex-direction:row-reverse;text-align:right}
.chat-avatar .avatar{border-radius:50%}
.chat-body{background:#f1f6f2;border-radius:10px;padding:.4rem .6rem;max-width:75%}
.chat-regel.ik .chat-body{background:#e3f0e8}
.chat-meta{font-size:.78rem}
.chat-tekst{white-space:pre-wrap;word-break:break-word}
.chat-form{display:flex;gap:.5rem}
.chat-form input[type=text]{flex:1}

/* Reacties onder een bericht (👍 en de rest). De balk staat in .chat-body, dus
   hij volgt vanzelf de rechtse uitlijning van je eigen berichten. */
.chat-reacties{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem;
  align-items:center}
.chat-regel.ik .chat-reacties{justify-content:flex-end}
.chat-reactie,.chat-reactie-open,.chat-kiezer-knop{
  border:1px solid var(--lijn);background:#fff;border-radius:999px;
  padding:.05rem .4rem;font-size:.85rem;line-height:1.5;cursor:pointer}
.chat-reactie{display:inline-flex;align-items:center;gap:.2rem}
.chat-reactie-aantal{font-size:.75rem;color:#5a6570}
/* Zelf gereageerd: groene rand, zoals elk 'dit ben jij'-merk in de app. */
.chat-reactie.ik{border-color:var(--groen);background:#eaf5ee}
.chat-reactie.ik .chat-reactie-aantal{color:var(--groen-donker)}
.chat-reactie:hover,.chat-reactie-open:hover,.chat-kiezer-knop:hover{
  border-color:var(--groen)}
/* De ＋ blijft altijd zichtbaar en niet alleen bij hover: op een telefoon
   bestaat hover niet, en dan is er geen manier om te ontdekken dat je kunt
   reageren. Wel gedempt, zodat hij de gegeven reacties niet overschreeuwt. */
.chat-reactie-open{color:#8a939c;opacity:.75}
.chat-reactie-open:hover{opacity:1;color:var(--tekst)}
.chat-kiezer{display:flex;gap:.2rem;padding:.2rem;background:#fff;
  border:1px solid var(--lijn);border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.12)}
.chat-kiezer-knop{border:0;font-size:1.05rem;padding:.1rem .25rem}
.chat-kiezer[hidden]{display:none}

/* Mailpreview */
.mail-body{white-space:pre-wrap;background:#f7faf8;border:1px solid var(--lijn);
  border-radius:8px;padding:.8rem;font-family:inherit}

/* Ronde-historie */
.ronde-nav.card{padding:.55rem .8rem}
.ronde-nav .sprong select{min-width:190px}
.btn.disabled{opacity:.35;pointer-events:none}
.ronde-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.5rem 0 .9rem}
.ronde-meta .ronde-punten{margin-left:auto}

/* Geüploade avatar-afbeeldingen */
.avatar-img{object-fit:cover;border-radius:22%;display:block}
.team-link .avatar-img,.chat-avatar .avatar-img,.profiel-knop .avatar-img{border-radius:50%}

/* Beheerwijzigingen bovenaan de logging (prioriteit) */
.beheer-log{border-left:4px solid var(--oranje);background:#fff9f0}
.beheer-log h2{margin-top:.2rem}

/* Documentatie-viewer */
.docs-layout{display:grid;grid-template-columns:220px 1fr;gap:1rem;align-items:start}
.docs-index .docs-lijst{list-style:none;padding:0;margin:0}
.docs-index .docs-lijst li{margin:.15rem 0}
.docs-index .docs-lijst a{display:block;padding:.35rem .5rem;border-radius:6px}
.docs-index .docs-lijst a.actief{background:var(--groen);color:#fff}
.markdown h1,.markdown h2,.markdown h3{margin-top:1.1rem}
.markdown pre{background:#0f172a;color:#e2e8f0;padding:.8rem;border-radius:8px;overflow:auto}
.markdown code{background:#eef2f5;padding:.1rem .3rem;border-radius:4px}
.markdown pre code{background:transparent;padding:0}
.markdown table{border-collapse:collapse;width:100%}
.markdown table th,.markdown table td{border:1px solid var(--lijn);padding:.35rem .5rem;text-align:left}
.markdown blockquote{border-left:3px solid var(--lijn);margin:.6rem 0;padding:.2rem .8rem;color:#5b6b78}
@media (max-width:720px){.docs-layout{grid-template-columns:1fr}}

/* Uitleg (/uitleg) — de vier deelnemerstabbladen en de release-uitklappers.
   Hergebruikt .subtabs, .card en .markdown; hier staat alleen wat nieuw is. */
.uitleg-kop{margin:.2rem 0 .1rem}
.uitleg-voet{margin-top:1.2rem}
.release-lijst{display:flex;flex-direction:column;gap:.6rem}
/* De hele samenvatting is het tikvlak, niet alleen het driehoekje: op een
   telefoon is dat verschil het verschil tussen werken en niet werken.
   Zie docs/UI_MOBIEL.md. */
.release>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2rem .6rem;min-height:44px;padding:.2rem 0;list-style-position:inside}
.release>summary:hover .release-titel{text-decoration:underline}
.release-titel{font-weight:600}
.release-datum{color:#5b6b78;font-size:.9rem}
/* Het eerste kopje in een opengeklapte release plakt anders tegen de
   samenvatting aan. */
.release[open]>.markdown{margin-top:.5rem;border-top:1px solid var(--lijn);padding-top:.7rem}
.release[open]>.markdown>:first-child{margin-top:0}

/* Mail-voorbeeld */
.mail-preview{border:1px dashed var(--lijn);border-radius:8px;padding:.8rem;background:#fff;min-height:2rem}

/* Alle spelers-pagina */
.pagina-kop{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
/* Beheerknoppen rechtsboven een leespagina. Ze staan bewust los van de inhoud:
   de pagina is om te lezen, het instellen gebeurt op een eigen pagina. */
.kop-knoppen{display:flex;gap:.5rem;flex-wrap:wrap}

/* Rondepagina: de spelregels per ronde, altijd alle vier met ✓ of ✗. Alleen
   tonen wat AAN staat maakt 'uit' onzichtbaar — dan moet je weten wat de
   standaard is om te kunnen zien dat er iets van afwijkt. Kleur doet er een
   schepje bovenop, maar het teken zelf draagt de betekenis (zie ook het
   title-attribuut per vinkje). */
.spelregels{display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;
  font-size:.78rem}
.regel-vink{white-space:nowrap}
.regel-vink.aan{color:var(--groen-donker);font-weight:600}
/* 'Uit' is gedempt maar moet leesbaar blijven: het is net zo goed informatie
   als 'aan'. Grijs op wit haalt hier ruim de contrasteis. */
.regel-vink.uit{color:#6b7480}
/* De wedstrijden van één ronde, standaard dichtgeklapt — op de lopende en de
   eerstvolgende ronde na (zie player.rondes). */
.ronde-wedstrijden > summary{cursor:pointer;font-weight:600;padding:.15rem 0}
.ronde-wedstrijden[open] > summary{margin-bottom:.3rem}
.ververs-form button{padding:.45rem .9rem;background:var(--groen);color:#fff;border:0;
  border-radius:6px;cursor:pointer;font-weight:600}
.ververs-form button:hover:enabled{background:var(--groen-donker)}
.ververs-form button:disabled{opacity:.6;cursor:wait}
/* Superadmin-blok op 'Alle spelers': turbomode en de export van
   spelerswijzigingen. Bewust één omhulsel met een eigen randje in plaats van
   twee losse knoppen in de balk erboven: dit zijn beheerhandelingen die niets
   met de spelerslijst eronder te maken hebben, en zo lezen ze ook als een
   aparte groep. Beide regels wikkelen zelf, dus er is geen extra breekpunt
   nodig (zie docs/UI_MOBIEL.md). */
.superadmin-blok{display:flex;flex-direction:column;gap:.5rem;margin:.8rem 0 1rem;
  background:var(--grijs);border:1px dashed var(--lijn);border-radius:8px;
  padding:.7rem .8rem}
.superadmin-blok .sa-regel{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.9rem}
.superadmin-blok label{font-weight:600}
.superadmin-blok input[type=datetime-local]{padding:.35rem .5rem;
  border:1px solid var(--lijn);border-radius:6px;background:#fff}
.superadmin-blok button{padding:.35rem .8rem;background:var(--grijs);
  border:1px solid var(--lijn);border-radius:6px;color:var(--tekst);cursor:pointer}
.superadmin-blok button:hover{background:#fff}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.8rem 0 1rem;
  background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:.7rem .8rem}
.filters input[type=text], .filters select{padding:.35rem .5rem;border:1px solid var(--lijn);
  border-radius:6px;background:#fff}
.filters button{padding:.4rem .8rem;background:var(--groen);color:#fff;border:0;border-radius:6px;cursor:pointer}
.filters button:hover{background:var(--groen-donker)}
.filters .btn-secundair{padding:.4rem .8rem;background:var(--grijs);border:1px solid var(--lijn);
  border-radius:6px;color:var(--tekst)}
.filters .inline-check{font-size:.9rem;color:#5b6b78;display:inline-flex;align-items:center;gap:.3rem}
/* Statusfilter op 'Alle spelers': vier keuzerondjes die bij elkaar horen.
   Een eigen omhulsel met een randje, zodat ze als één keuze lezen en niet
   als losse vinkjes tussen de andere filters. */
.filters .statusfilter{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  border:1px solid var(--lijn);border-radius:6px;padding:.25rem .6rem;background:var(--grijs)}
.filters .statusfilter .inline-check{cursor:pointer}
/* Sorteren op 'Alle spelers' — de knoppen in de tabelkop. Een <button> en
   geen klikbare <th>, zodat je er met Tab en Enter ook bij kunt. Hij erft de
   opmaak van de kop en ziet er dus niet uit als een knop; het pijltje is wat
   verklapt dat er iets te klikken valt. Zie app/static/spelers-sorteren.js. */
.spelerslijst th.sorteerbaar{padding:0}
.spelerslijst th.sorteerbaar .sorteerknop{
  display:flex;align-items:center;gap:.3rem;width:100%;
  background:none;border:0;padding:.55rem .6rem;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left}
.spelerslijst th.sorteerbaar .sorteerknop:hover{background:rgba(0,0,0,.05)}
.spelerslijst th.sorteerbaar .sorteerpijl{
  font-size:.72rem;line-height:1;opacity:.35;flex:none}
.spelerslijst th.sorteerbaar.gesorteerd .sorteerknop{font-weight:700}
.spelerslijst th.sorteerbaar.gesorteerd .sorteerpijl{opacity:1}
/* De regel onder de filters: de keuzelijst 'Sorteer op' (alleen zichtbaar
   waar de tabelkop dat niet is — zie de mediaquery van 760 px) en het vinkje
   'Koppels bij elkaar', dat op elk scherm meedoet. */
.sorteerbalk{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  margin:0 0 .8rem}
.sorteerbalk .sorteerkeuze{display:none;align-items:center;gap:.4rem}
.sorteerbalk label{font-size:.9rem;color:#5b6b78}
.sorteerbalk #sorteer-richting{padding:.25rem .55rem;line-height:1.2}
/* De koppelbeugel: de twee spelers van één koppel worden links omvat door een
   beugel — een verticale streep met een haakje aan de boven- en onderkant — met
   een 🔗 op de naad tussen de twee rijen. Het volgende koppel krijgt de andere
   tint, zodat twee koppels achter elkaar niet als één blok van vier lezen.

   Vier klassen, gezet door spelers-sorteren.js en alleen zolang 'Koppels bij
   elkaar' aanstaat: `koppel-a`/`koppel-b` kiezen de tint, `koppel-start` en
   `koppel-eind` zetten de haakjes. Een half bezet koppel krijgt allebei op
   dezelfde rij: een beugel van één rij hoog, zonder kettinkje — er is geen
   naad om er een op te hangen.

   De tint gaat als `--streep` op de rij en niet als losse regel per kleur:
   anders moet elke regel hieronder twee keer, één keer voor a en één voor b.

   De beugel is een pseudo-element en geen `border-left` op de cel: de tabel
   staat op `border-collapse:collapse`, waar een randje op een cel met de
   tabelrand gaat onderhandelen en de kolom een halve pixel opschuift. */
.spelerslijst tr.koppel-a{--streep:var(--koppel-a)}
.spelerslijst tr.koppel-b{--streep:var(--koppel-b)}
.spelerslijst tr.koppel-a>td:first-child,
.spelerslijst tr.koppel-b>td:first-child{position:relative}
/* De staande streep. `bottom:-1px` overbrugt de scheidingslijn tussen twee
   rijen, zodat de beugel van het bovenste lid doorloopt in die van het
   onderste in plaats van er een streepje open te laten. */
.spelerslijst tr.koppel-a>td:first-child::before,
.spelerslijst tr.koppel-b>td:first-child::before{
  content:"";position:absolute;left:0;top:0;bottom:-1px;width:9px;
  border-left:4px solid var(--streep)}
.spelerslijst tr.koppel-start>td:first-child::before{
  top:4px;border-top:2px solid var(--streep);border-top-left-radius:5px}
.spelerslijst tr.koppel-eind>td:first-child::before{
  bottom:4px;border-bottom:2px solid var(--streep);border-bottom-left-radius:5px}
/* Het kettinkje hangt op de naad: het staat op de ónderste rij, tegen zijn
   bovenrand, en wordt een halve hoogte omhooggeschoven. `:not(.koppel-start)`
   sluit het half bezette koppel uit — dat is één rij en heeft geen naad. */
.spelerslijst tr.koppel-eind:not(.koppel-start)>td:first-child::after{
  content:"🔗";position:absolute;left:-2px;top:-1px;z-index:1;
  transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:1.5px solid var(--streep);
  font-size:10px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.spelerslijst .foto-cel{width:52px}
.spelerslijst .inactief{opacity:.55}
/* De vijf cijferkolommen op 'Alle spelers' (punten, voorseizoen, totaal,
   basis, invaller) en de twee kolommen van het vergelijkingsstaatje op het
   spelersprofiel. tabular-nums houdt de cijfers onder elkaar uitgelijnd, zodat
   je een kolom kunt scannen zonder te lezen. */
td.getal,th.getal{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vergelijking table{width:auto;min-width:min(100%,26rem)}
.vergelijking th:first-child{width:13rem}
.vergelijking td.getal.beter{font-weight:700;color:var(--groen-donker)}
.spelerfoto{border-radius:50%;object-fit:cover;background:var(--grijs);
  border:1px solid var(--lijn);vertical-align:middle}
.spelerfoto.placeholder{display:inline-flex;align-items:center;justify-content:center;
  color:#b6c0c9;width:42px;height:42px;font-size:1.4rem}
.spelerfoto.groot{width:180px;height:180px}
.spelerprofiel{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;
  background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:1.2rem}
.spelerprofiel h1{margin-top:0}
/* Kerncijfers op het spelersprofiel (wedstrijden, wissels) */
.speler-stats{list-style:none;margin:.6rem 0 0;padding:0}
.speler-stats li{margin:.25rem 0}
.badge.muted{background:var(--grijs);color:#7a8894;border-color:var(--lijn)}
.badge.keeper-badge{background:#fff6e6;color:#9a6a00;border-color:#f3dca6;font-weight:600}
.badge.badge-nieuw{background:#eafaf0;color:var(--groen-donker);border-color:#bfe8cf;font-weight:600;margin-left:.3rem}

/* Superadmin koppelbeheer */
.club-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;margin-top:.6rem}
.club-tegel{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--lijn);
  border-radius:8px;padding:.6rem .8rem;text-decoration:none;color:var(--tekst);font-weight:600}
.club-tegel:hover{background:var(--grijs);border-color:var(--groen)}
/* Clubnaam + het transferlijst-regeltje eronder. Een kolom binnen de flex-rij
   van de tegel, zodat de badges rechts op hun plek blijven staan. min-width:0
   zodat een lange clubnaam de tegel niet oprekt maar afkapt. */
.club-tegel-tekst{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.club-tegel-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* V/M/A = aantal spelers op de transferlijst per linie; = koppels met nog
   een lege wisselplek. Bewust klein en grijs: het is signalering bij het
   kiezen van een club, niet de hoofdinhoud van de tegel. Tabular-nums houdt
   de cijferkolommen recht onder elkaar over de tegels heen. */
.club-tegel-transfer{display:flex;gap:.35rem;font-size:.72rem;font-weight:500;
  color:#7a8894;font-variant-numeric:tabular-nums;cursor:help}
.club-tegel-transfer .tr-linie{background:var(--grijs);border-radius:4px;padding:0 .3rem}
.club-tegel-transfer .tr-leeg{color:#9a6a00;margin-left:.15rem}
/* Signaalbadges op een clubtegel: ❌ (niet meer in de hoofdselectie) en ↔
   (staat in een koppel van een andere linie). Beide kunnen tegelijk. De
   eerste badge duwt zichzelf naar rechts; een volgende sluit er tegenaan. */
.club-tegel .badge{margin-left:auto;font-weight:700;cursor:help}
.club-tegel .badge ~ .badge{margin-left:.3rem}
.club-tegel .inactief-badge{background:#fdeaea;color:var(--rood);
  border-color:#f5c6c6}
.club-tegel .mismatch-badge{background:#fff6e6;color:#9a6a00;
  border-color:#f3dca6}
.koppel-veld{display:grid;grid-template-columns:1fr 260px;gap:1rem;align-items:flex-start}
@media (max-width:900px){.koppel-veld{grid-template-columns:1fr}}
.koppel-veld-hoofd{background:#0a7d34;background:linear-gradient(180deg,#0a7d34,#0f8f3d);
  border-radius:10px;padding:1rem;color:#fff}
.koppel-veld-hoofd .linie-titel{color:#fff;border-bottom-color:rgba(255,255,255,.25);
  margin-top:.5rem;margin-bottom:.6rem}
.koppel-veld-hoofd .linie-titel .muted{color:rgba(255,255,255,.75)}
.koppel-rij{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:.5rem}
.koppel-tegel{background:rgba(255,255,255,.95);color:var(--tekst);border-radius:8px;padding:.5rem;
  min-width:200px;flex:1 1 200px;max-width:230px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.koppel-pos{font-size:.75rem;color:#7a8894;font-weight:600;margin-bottom:.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.koppel-p{display:flex;gap:.3rem;align-items:center;margin:.2rem 0}
.koppel-p select{flex:1;padding:.3rem .4rem;border:1px solid var(--lijn);border-radius:6px;
  background:#fff;font-size:.88rem}
.koppel-p .mini.sec,.koppel-pos .mini.sec{padding:.15rem .45rem;background:var(--grijs);color:var(--tekst);
  border:1px solid var(--lijn);border-radius:6px;cursor:pointer;font-size:.85rem;line-height:1}
.koppel-p .mini.sec:hover,.koppel-pos .mini.sec:hover{background:#fdeaea;color:var(--rood);border-color:#f5c6c6}
.koppel-pos .wissel-basis-reserve{font-weight:600}
.koppel-transfer{background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:.8rem 1rem;
  position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto}
.koppel-transfer h3{margin-top:.6rem;margin-bottom:.3rem;font-size:1rem}
.koppel-transfer h4{margin:.6rem 0 .2rem;font-size:.9rem;color:var(--groen-donker)}
.transfer-lijst,.keeper-lijst{list-style:none;padding-left:0;margin:0 0 .5rem}
.transfer-lijst li,.keeper-lijst li{padding:.2rem 0;border-bottom:1px dashed var(--lijn);font-size:.9rem}
.transfer-lijst li:last-child,.keeper-lijst li:last-child{border-bottom:none}
.opslaan-balk{margin-top:1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.opslaan-balk button.primair{padding:.5rem 1rem;background:var(--groen);color:#fff;border:0;
  border-radius:6px;cursor:pointer;font-weight:600}
.opslaan-balk button.primair:hover{background:var(--groen-donker)}

/* WYSIWYG-toolbar (mail + chat) */
.wysiwyg-container{border:1px solid var(--lijn);border-radius:8px;background:#fff}
.wysiwyg-container .wysiwyg-bar{border-top-left-radius:8px;border-top-right-radius:8px}
.wysiwyg-bar{display:flex;gap:.15rem;padding:.3rem;background:var(--grijs);border-bottom:1px solid var(--lijn);
  flex-wrap:wrap;align-items:center}
.wysiwyg-knop{border:1px solid transparent;background:transparent;padding:.15rem .5rem;
  cursor:pointer;font-size:.9rem;border-radius:4px;color:var(--tekst);min-width:1.9rem}
.wysiwyg-knop:hover{background:#fff;border-color:var(--lijn)}
.wysiwyg-knop.stijl-bold{font-weight:800}
.wysiwyg-knop.stijl-italic{font-style:italic}
.wysiwyg-knop.stijl-underline{text-decoration:underline}
.wysiwyg-sep{width:1px;height:1.2rem;background:var(--lijn);margin:0 .2rem}

/* Emoji-picker */
.wysiwyg-emoji-wrap{position:relative;display:inline-block}
.wysiwyg-emoji-panel{position:absolute;top:100%;left:0;z-index:50;
  background:#fff;border:1px solid var(--lijn);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);padding:.5rem;
  width:340px;max-height:380px;display:flex;flex-direction:column;
  margin-top:.25rem}
.wysiwyg-emoji-panel[hidden]{display:none}
.wysiwyg-emoji-zoek{width:100%;padding:.35rem .5rem;border:1px solid var(--lijn);
  border-radius:6px;margin-bottom:.4rem;font-size:.9rem;background:#fff}
.wysiwyg-emoji-inhoud{overflow-y:auto;flex:1}
.wysiwyg-emoji-kop{font-size:.72rem;color:#7a8894;font-weight:700;
  margin:.5rem 0 .25rem;text-transform:uppercase;letter-spacing:.04em;
  position:sticky;top:0;background:#fff;padding:.15rem 0;z-index:1}
.wysiwyg-emoji-kop:first-child{margin-top:0}
.wysiwyg-emoji-rij{display:grid;grid-template-columns:repeat(8,1fr);gap:.1rem}
.wysiwyg-emoji{background:transparent;border:1px solid transparent;padding:.2rem 0;
  font-size:1.3rem;line-height:1;border-radius:4px;cursor:pointer;text-align:center}
.wysiwyg-emoji:hover{background:var(--grijs);border-color:var(--lijn)}
.wysiwyg-emoji-leeg{padding:.6rem;color:#7a8894;font-size:.85rem;text-align:center}
.wysiwyg-editor{min-height:5em;padding:.6rem .8rem;outline:none;line-height:1.5}
.wysiwyg-editor p{margin:.3em 0}
.wysiwyg-editor h3{margin:.4em 0;font-size:1.05em}
.wysiwyg-editor a{color:var(--groen-donker);text-decoration:underline}
.wysiwyg-editor:focus{background:#fdfefd}
.wysiwyg-editor.klein{min-height:2.4em}

/* Chat + ongelezen-bolletje */
.chat-nav{position:relative}
.unread-dot{display:inline-block;width:.55rem;height:.55rem;background:#e53935;border-radius:50%;
  margin-left:.35rem;vertical-align:middle;box-shadow:0 0 0 2px var(--groen)}
.chat-nav .unread-dot[hidden]{display:none}
.feedback-nav{position:relative}
.feedback-nav .unread-dot[hidden]{display:none}
/* Hetzelfde bolletje op de subtabbladen van Bugs & ideeën. Daar staat het op
   een lichte ondergrond, dus de groene ring van de navigatiebalk zou een
   randje om niets zijn — vandaar de witte. */
.subtabs .subtab .unread-dot{box-shadow:0 0 0 2px #fff;margin-left:.3rem}
.subtabs .subtab .unread-dot[hidden]{display:none}

/* Weekmail: schrijfvak links, inzichten rechts.
   minmax(0,1fr) en niet 1fr: anders duwt de brede rondetabel in het
   voorbeeld de rechterkolom van het scherm af. */
.mail-kolommen{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  align-items:start}
@media (max-width:1100px){.mail-kolommen{grid-template-columns:1fr}}
.mail-inzichten{position:sticky;top:.6rem;max-height:calc(100vh - 2rem);overflow-y:auto}
.mail-inzichten h2{margin:0 0 .2rem;font-size:1.05rem}
.mail-inzichten h3{margin:1rem 0 .35rem;font-size:.9rem;color:var(--groen-donker);
  text-transform:uppercase;letter-spacing:.03em}

.inzicht-punten{list-style:none;margin:.2rem 0;padding:0;display:grid;gap:.35rem}
.inzicht-punten li{display:grid;grid-template-columns:1.3rem 1fr auto;gap:.4rem;
  align-items:start;padding:.4rem .5rem;border:1px solid var(--lijn);border-radius:6px;
  background:#fbfdfc;font-size:.85rem;line-height:1.35}
.inzicht-punten li:hover{background:#f2f9f5}
.inzicht-icoon{line-height:1.35}
.inzicht-tekst{min-width:0;overflow-wrap:break-word}
/* Een awardregel waarvan de houder gewisseld is. Alleen vet, geen kleur en
   geen label: de regel zegt met "(was: …)" zelf al wat er gebeurd is. Het vet
   overleeft het kopieerknopje niet (dat pakt textContent) — bewust, zie
   app/static/weekmail-inzichten.js. */
.inzicht-tekst.gewisseld{font-weight:700}
/* Kopieerknop pas zichtbaar bij hover/focus: anders is het een muur van
   emoji naast elke regel. Op touch (geen hover) altijd tonen. */
.inzicht-punten .kopieer{opacity:0;transition:opacity .12s;padding:.05rem .3rem;
  background:transparent;border:1px solid transparent;color:inherit}
.inzicht-punten li:hover .kopieer,.inzicht-punten .kopieer:focus{opacity:1}
@media (hover:none){.inzicht-punten .kopieer{opacity:1}}
.inzicht-ai li{background:#fffdf6;border-color:#f0e3c2}
.inzicht-ai li:hover{background:#fdf6e6}

.inzicht-waarschuwing{background:#fff6e6;border:1px solid #f3dca6;border-radius:6px;
  padding:.5rem .6rem;margin:.5rem 0 .2rem;color:#7a5300}
.inzicht-waarschuwing h3{margin:0 0 .2rem;color:#7a5300}
.inzicht-waarschuwing p{margin:.2rem 0}
.inzicht-detail{margin-top:.35rem}
.inzicht-detail>summary{cursor:pointer;font-size:.8rem;font-weight:600}
.inzicht-lijst{margin:.3rem 0 .2rem;padding-left:1.1rem;font-size:.8rem}
.inzicht-lijst li{margin-bottom:.2rem}

/* Tabbladen onder een hoofditem (Scores: Klassement · Prijzengeld · Awards ·
   Alle spelers · Score per koppel · Rondje geld).
   Bewust plat en scrollbaar in plaats van een uitklapmenu: op een telefoon is
   een rij tabjes met de duim te raken, een dropdown niet.

   Tot 26-08-2026 waren het losse pillen: mooi, maar ze lazen als knoppen bij
   de pagina in plaats van als een menu, en de actieve pil (groen gevuld) leek
   eerder een knop die je moest indrukken dan de plek waar je stond. Nu staan
   ze op een doorlopende onderlijn en heeft de actieve tab een gat in die
   lijn, zodat hij zichtbaar vastzit aan de inhoud eronder — de klassieke
   tabblad-vorm, die iedereen herkent zonder uitleg. */
.subtabs{display:flex;gap:.15rem;margin:0 0 1rem;overflow-x:auto;
  padding:0;border-bottom:2px solid var(--lijn);align-items:flex-end}
.subtabs .subtab{white-space:nowrap;padding:.45rem .85rem;
  border:1px solid transparent;border-bottom:0;
  border-radius:8px 8px 0 0;margin-bottom:-2px;
  background:transparent;color:#4a5a66;font-size:.9rem;line-height:1.3}
.subtabs .subtab:hover{text-decoration:none;background:var(--grijs);color:var(--tekst)}
.subtabs .subtab.actief{background:#fff;border-color:var(--lijn);
  color:var(--groen);font-weight:700;
  /* Het gat in de onderlijn: even dik en even wit als de tab zelf. */
  box-shadow:0 2px 0 0 #fff;
  border-top:3px solid var(--groen);padding-top:calc(.45rem - 2px)}
.subtabs .subtab.actief:hover{background:#fff}

/* De naam van de subpagina, direct onder de tabbalk. Staat er bewust ónder
   en niet in de H1: die zegt 'Scores' en blijft op alle zes de pagina's
   hetzelfde staan, zodat de tabbalk als één menu leest. */
.subtab-kop{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;margin:0 0 .8rem}
.subtab-kop h2{margin:0;font-size:1.15rem}

/* AI Van Gaal — de chatpagina en het beheerderslog.
   De draad is scrollbaar met een vaste hoogte: zo blijft het invoerveld in
   beeld, ook als de geschiedenis lang wordt. Antwoorden komen als opgemaakte
   HTML binnen (vet, opsommingen), dus die krijgen hier hun marges terug —
   Markdown zonder styling leest net zo slecht als Markdown met sterretjes. */
.assistent-draad{max-height:60vh;overflow-y:auto;padding:.2rem;margin-bottom:.8rem}
.assistent-regel{margin:0 0 .9rem;padding:.5rem .7rem;border-radius:8px;
  border:1px solid var(--lijn);background:#fff}
.assistent-regel.user{background:#f4f8f4;border-color:#dae7da}
.assistent-regel strong{display:inline-block;font-size:.85rem;margin-right:.5rem}
.assistent-regel time{font-size:.75rem}
.assistent-tekst{margin-top:.25rem}
.assistent-tekst p{margin:.35rem 0}
.assistent-tekst ul,.assistent-tekst ol{margin:.35rem 0;padding-left:1.2rem}
.assistent-tekst li{margin-bottom:.25rem}
.assistent-tekst h3,.assistent-tekst h4{margin:.6rem 0 .2rem;font-size:.95rem}
.assistent-tekst code{background:#f3f3f3;padding:.05rem .25rem;border-radius:3px}
/* Waar een nieuw gesprek begon: vanaf hier is de bot het voorgaande kwijt. */
.assistent-scheiding{border:0;border-top:1px dashed var(--lijn);margin:1rem 0}
#assistent-form{gap:.4rem}
#assistent-vraag{flex:1;min-width:12rem}

/* Awards — de tegels op de vierde tab onder 'Scores' (docs/PLAN_AWARDS.md).
   Een auto-fill-raster in plaats van een vast aantal kolommen: twintig tegels
   moeten op een telefoon net zo goed leesbaar zijn als op een breed scherm,
   en het aantal awards dat aanstaat verschilt per spel. */
.award-raster{display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.award-tegel{display:flex;flex-direction:column;margin:0;
  border-left:4px solid var(--groen)}
.award-tegel.award-geheim{border-left-color:#b08cd9}
.award-kop{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-bottom:.5rem}
.award-kop h3{margin:0;font-size:1rem;flex:1}
.award-emoji{font-size:1.5rem;line-height:1}
.badge.award-prijs{background:#f6efd6;border-color:#e0d09a;color:#6b5a12}
.award-winnaars{list-style:none;margin:0 0 .4rem;padding:0}
.award-winnaars li{margin-bottom:.35rem}
.award-score{font-weight:600}
.award-leeg{margin:.2rem 0 .6rem}
/* De voet blijft onderaan plakken, zodat de uitklappers van naast elkaar
   liggende tegels op één lijn staan ook als de ene twee winnaars heeft. */
.award-voet{margin-top:auto;padding-top:.5rem;border-top:1px solid var(--lijn)}
.award-uitleg summary,.award-top summary{cursor:pointer;font-size:.85rem}
.award-uitleg p{margin:.4rem 0;font-size:.85rem}
.award-vraag{display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;
  text-align:center;border-radius:50%;border:1px solid var(--lijn);
  font-size:.75rem;font-weight:700}
.award-uitleg-geheim{margin:0 0 .3rem}
.award-toplijst{margin:.4rem 0 0;padding-left:1.3rem;font-size:.85rem}
.award-toplijst li{margin-bottom:.2rem}
.award-toplijst li.ik{font-weight:600}

/* ---------------------------------------------------------------------------
   Tooltips die ook op een telefoon werken (app/static/tooltips.js).

   Elke `title=` in de app wordt door dat script omgezet naar `data-tip` en
   krijgt hieronder zijn vorm. Twee soorten aanknopingspunten:

     .heeft-tip  het element is zelf aan te tikken (badge, ❌, ⓘ, kolomkop) —
                 alles wat niet al iets anders doet als je erop tikt;
     .tip-knop   een los ⓘ-knopje náást een link of knop, want daar zou een
                 tik de tooltip in de weg zitten van waar de knop voor is.

   Zie docs/UI_TOOLTIPS.md voor de afspraak bij nieuw werk.
   --------------------------------------------------------------------------- */
.tip-bubbel{position:fixed;z-index:100;max-width:340px;
  background:var(--tekst);color:#fff;border-radius:6px;
  padding:.45rem .6rem;font-size:.8rem;line-height:1.35;
  white-space:pre-line;               /* &#10; in een title blijft een regeleinde */
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.tip-bubbel[hidden]{display:none}
/* Pijltje naar het element toe. --pijl zet tooltips.js, zodat hij ook klopt
   als de bubbel tegen de schermrand is geschoven. */
.tip-bubbel::after{content:"";position:absolute;left:var(--pijl,50%);
  margin-left:-6px;border:6px solid transparent;border-top-color:var(--tekst);
  top:100%}
.tip-bubbel.onder::after{top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:var(--tekst)}

/* Het element zelf is de knop. Stippellijn als hint dat er meer te lezen is —
   maar niet onder een badge of een puntenbolletje: die hebben al een eigen
   rand en zien er dan uit alsof ze stuk zijn. */
.heeft-tip{cursor:help;text-decoration:underline dotted;
  text-decoration-thickness:1px;text-underline-offset:2px}
.badge.heeft-tip,.pos-punten.heeft-tip,.tip-klein,.pijl.heeft-tip,
.kruis-rood.heeft-tip,.app-versie.heeft-tip{text-decoration:none}
.heeft-tip:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
/* Een leeg element (het rode stipje bij een gewijzigde linie) is 8 pixels
   groot. Onzichtbaar vergroot raakvlak, zodat een vinger het kan raken. */
.tip-klein{position:relative}
.tip-klein::after{content:"";position:absolute;inset:-9px}

/* Het losse ⓘ naast een link of knop. Zelfde maatvoering als .award-vraag. */
.tip-knop{display:inline-flex;align-items:center;justify-content:center;
  width:1.15rem;height:1.15rem;padding:0;margin:0 0 0 .25rem;
  border:1px solid var(--lijn);border-radius:50%;
  background:var(--grijs);color:#5b6b78;
  font-size:.72rem;font-weight:700;line-height:1;vertical-align:middle;
  cursor:help;flex:none}
.tip-knop:hover,.tip-knop.tip-open{background:#fff;color:var(--groen-donker);
  border-color:var(--groen)}
.tip-knop:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
/* Op een telefoon is 1,15rem te klein om te raken: daar vergroten we het
   raakvlak zonder het knopje zelf groter te maken. */
@media (pointer:coarse){
  .tip-knop{position:relative}
  .tip-knop::after{content:"";position:absolute;inset:-8px}
}
/* Een tooltip hoort bij het scherm, niet bij een uitdraai. */
@media print{.tip-bubbel,.tip-knop{display:none}}

/* ===========================================================================
   MOBIEL — alles onder 760 px.

   Ruim de helft van de deelnemers opent SuperElf op een telefoon. Tot deze
   versie had de app precies één mediaquery voor smalle schermen, en die
   regelde alleen de kaartjes op het veld. Gevolg, gemeten op 390 px:

     * menubalk + statusbalk namen 386 van de 844 beeldpunten in beslag;
     * zeven pagina's scrolden zijwaarts (Alle spelers 835 px breed);
     * tientallen knopjes waren kleiner dan 32 px;
     * tekst van 10,9 px (.mini-txt).

   Alles hieronder is puur opmaak. De enige plek waar HTML voor nodig was, is
   de ☰-knop in base.html (aan/uit door app/static/mobiel.js).
   Zie docs/UI_MOBIEL.md voor de afspraak bij nieuw werk.
   =========================================================================== */

/* --- Tabellen -------------------------------------------------------------
   Twee helpers, en het verschil is belangrijk:

     .tabel-knijp   KNIJPT de kolommen samen en breekt de tekst af. Voor
                    tabellen met weinig kolommen en korte inhoud, waar
                    afbreken prettiger is dan vegen.
     .tabel-veeg    Tekent de tabel zo breed als zijn inhoud nodig heeft en
                    zet er een zijwaartse veeg omheen. Voor alles wat op een
                    telefoon niet past.

   `.tabel-knijp` heette tot 11-09-2026 `.tabel-scroll`, en die naam heeft drie
   sessies achter elkaar iemand op het verkeerde been gezet — inclusief de
   documentatie, die hem als scrollende helper aanbeval. Hij scrolt niet en
   heeft dat nooit gedaan: `table-layout:fixed` op een tabel van 100% breed
   past altijd, dus die `overflow-x` slaat nooit aan. De naam zegt nu wat hij
   doet. `.tabel-scroll` blijft als alias bestaan zodat een gemist template
   niet stilletjes zijn opmaak verliest.

   Vuistregel: past de inhoud niet op 390 px, dan `.tabel-veeg`. Meer dan zes
   kolommen krijgt er vanzelf een weergaveknop bij — zie tabelweergave.js. */
.tabel-knijp,.tabel-scroll{overflow-x:auto}
.tabel-knijp table,.tabel-scroll table{table-layout:fixed}
.tabel-knijp td,.tabel-knijp th,
.tabel-scroll td,.tabel-scroll th{overflow-wrap:break-word;word-break:break-word}

.tabel-veeg{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--lijn);border-radius:8px;background:#fff}
/* `width:max-content` is wat "breed tekenen" daadwerkelijk doet. Alleen
   `table-layout:auto` is niet genoeg: `table{width:100%}` houdt de tabel dan
   nog steeds op de breedte van zijn container, en een `<colgroup>` met
   percentages verdeelt díé breedte gewoon opnieuw — dus bleef alles even krap
   als eerst. `min-width:100%` zorgt dat een smalle tabel de volle breedte
   blijft vullen in plaats van links te blijven hangen.
   `col{width:auto}` zet de percentages uit een `<colgroup>` opzij: die zijn
   voor een laptop bedacht en op een telefoon juist de oorzaak.
   `overflow:visible` haalt de `overflow:hidden` weg die op elke `table` staat
   (voor de afgeronde hoek). Die hoek is hier toch al uit, en zolang er
   `hidden` staat werkt `position:sticky` op een cel niet — dat is waarom de
   eerste kolom in de vorige poging niet bleef staan. */
.tabel-veeg table{table-layout:auto;width:max-content;min-width:100%;
  border:0;border-radius:0;margin:0;overflow:visible}
.tabel-veeg col{width:auto}

/* De keuze tussen vegen en kaartjes, boven een tabel met .kaartbaar. Staat
   hier BOVEN de mediaquery en niet erin: bij gelijke specificiteit wint de
   laatste regel, en `display:none` onderaan het bestand zou de knop op een
   telefoon onzichtbaar houden — precies wat er met de ☰-knop is gebeurd
   (docs/UI_MOBIEL.md, "Zet basisregels niet ná de mediaquery"). Boven 760 px
   valt er niets te kiezen: dan past de tabel gewoon. */
.weergavekeuze{display:none;gap:.3rem;align-items:center;margin:0 0 .5rem}
.weergavekeuze .weergave-knop{background:#e9edf1;color:var(--tekst);
  padding:.35rem .7rem;font-size:.85rem;border-radius:6px}
.weergavekeuze .weergave-knop[aria-pressed="true"]{background:var(--groen);
  color:#fff}
.weergavekeuze .weergave-label{color:#6b7a88;font-size:.8rem;margin-right:.2rem}
/* Deelnemers (admin/participants.html) — acht kolommen, waarvan er drie
   knoppen en invoervelden bevatten. Die tabel moet op een laptop in één keer
   te zien zijn: wie iemand is staat links, wat je met hem doet rechts, en je
   hebt ze allebei tegelijk nodig. De pagina staat daarom op `container-wide`
   en de tabel op vaste kolomverhoudingen (`<colgroup>` in de template).

   `table-layout:fixed` is wat die verhoudingen bindend maakt: zonder dat
   bepaalt de breedste cel de kolom, en dan duwt één lang e-mailadres de
   knoppen alsnog van het scherm. Daar hoort bij dat alles wat van zichzelf
   niet buigt hier wél moet buigen:

     * invoervelden krijgen de breedte van hun cel in plaats van een vaste
       pixelmaat (die stonden in de template op 170 en 130 px);
     * lange woorden zonder spatie — e-mailadressen — breken af;
     * knoppenrijen mogen wikkelen in plaats van hun cel op te rekken.

   Op een telefoon blijft `.tabel-veeg` gewoon zijn werk doen: onder de
   min-width van 640 px veeg je zijwaarts, want acht kolommen op 375 px
   krijgt geen enkele opmaak leesbaar. */
.deelnemers{table-layout:fixed}
.deelnemers td,.deelnemers th{vertical-align:top;overflow-wrap:break-word;
  word-break:break-word}
.deelnemers input[type=text]{width:100%;min-width:0;box-sizing:border-box}
.deelnemers select{max-width:100%}
.deelnemers .row{gap:.3rem;row-gap:.3rem}
.deelnemers button{white-space:nowrap}

/* De weekmail-voorbeeldweergave is opgemaakte mail-HTML met een eigen tabel
   erin; die kunnen we niet omhullen zonder de mail zelf te veranderen. */
.mail-preview{overflow-x:auto}

/* Boven 760 px bestaan de ☰-knop en de 'toon meer'-knop niet. Deze twee
   regels staan bewust vóór de mediaquery: bij gelijke specificiteit wint de
   laatste regel, dus erna zouden ze de mediaquery overrulen en zou de
   ☰-knop altijd verborgen blijven. */
.menu-knop{display:none}
.meer-spelers{display:none}
/* Onder 760 px krijgt deze knop `display:block` (zie de mediaquery hieronder),
   en dat wint van de `[hidden]{display:none}` van de browser zelf. Zonder de
   regel hier doet `knop.hidden = true` in spelers/lijst.html dus niets, en
   blijft er op een telefoon een knop staan waar niets meer achter zit — bij een
   lijst korter dan vijftig zelfs een lege. Zie tests/test_css_verbergen.py. */
.meer-spelers[hidden]{display:none}

@media (max-width:760px){

  /* --- 1. Navigatie: één regel + uitklapmenu --------------------------- */
  .topbar{flex-wrap:wrap;padding:.5rem .8rem;gap:.4rem}
  .brand{flex:1 1 auto;min-width:0}
  /* Naast de ☰-knop is er minder ruimte: schild iets kleiner en de letters
     dichter op elkaar, zodat 'SUPERELF' op één regel blijft staan. Geen nieuw
     breekpunt — dit hangt aan de bestaande 760 px (docs/UI_MOBIEL.md). */
  .brand-logo{height:26px}
  .brand-naam{font-size:.98rem;letter-spacing:.08em}
  .menu-knop{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;padding:0;
    background:rgba(255,255,255,.18);border:0;border-radius:8px;
    color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
  .menu-knop:hover{background:rgba(255,255,255,.3)}
  .menu-knop:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .nav{display:none}
  .topbar.menu-open .nav{display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:0;margin-top:.4rem;
    border-top:1px solid rgba(255,255,255,.25)}
  .topbar.menu-open .nav>a{padding:.7rem .2rem;
    border-bottom:1px solid rgba(255,255,255,.15)}
  /* De drie uitklapmenu's (Beheer, Superbeheer, profiel) en de
     spel-keuzelijst worden in het paneel gewone blokken; zwevend zouden ze
     buiten beeld vallen. */
  .topbar.menu-open .nav .profiel-menu,
  .topbar.menu-open .nav .spel-kiezer{width:100%;margin:.45rem 0}
  .topbar.menu-open .nav .profiel-knop{width:100%;justify-content:flex-start;
    min-height:44px}
  .topbar.menu-open .nav .dropdown{position:static;width:100%;min-width:0;
    margin-top:.3rem;box-shadow:none}
  .topbar.menu-open .nav .spel-kiezer{display:flex}
  .topbar.menu-open .nav .spel-kiezer select{flex:1;min-height:44px}

  /* --- 2. Statusbalken: compacter, niets weggelaten -------------------- */
  .countdown-bar,.live-bar,.aanvul-bar,.correctie-bar{
    padding:.4rem .8rem;font-size:.85rem;gap:.4rem}
  .container{margin:.8rem auto;padding:0 .8rem}
  .card{padding:.9rem}

  /* --- 3. Tikvlakken: 44 px, want een vinger is geen muispijl ---------- */
  button,.btn,select,textarea,
  input:not([type=checkbox]):not([type=radio]){min-height:44px}
  /* In de beheertabellen staan rijen vol icoonknopjes; 44 px zou die rijen
     uit elkaar trekken. 40 px is daar het compromis. */
  button.mini,.btn.mini{min-height:40px;min-width:40px}
  .nav a,.subtabs .subtab{min-height:40px;display:inline-flex;align-items:center}
  /* ...behalve de items IN een uitklapmenu. Die inline-flex hierboven geldt
     ook voor hen, en dan gaan ze naast elkaar staan zodra er meer dan één op
     een regel past: 'Spellen  Koppelbeheer' op één regel, 'Rondebeheer
     Scores beheren' op de volgende. In een uitklapmenu hoort elk item zijn
     eigen regel te hebben — anders is het geen lijst maar een wolk woorden.
     (26-08-2026; viel op toen het beheermenu in twee menu's werd gesplitst,
     maar het gold daarvoor net zo goed.) */
  .topbar.menu-open .nav .dropdown a{display:flex;width:100%}
  /* Uitklappers zijn knoppen, ook al zien ze eruit als tekst: op de
     Awards-pagina staan er negentien onder elkaar, elk 20 px hoog. */
  summary{min-height:40px;display:flex;align-items:center;gap:.3rem}

  /* --- 4. Tekst: niets onder 12 px ------------------------------------ */
  .mini-txt{font-size:.75rem}
  .muted{font-size:.8rem}
  /* Op het veld stonden clubnaam (10,9 px) en veilingprijs (11,2 px) onder de
     grens. Nu de kaartjes 47% breed zijn in plaats van 31%, past 12 px. */
  .pos-club,.pos-kosten{font-size:.75rem}
  /* Het ⓘ van de tooltiplaag is een icoon, maar 11,5 px leest ook als icoon
     te klein op een telefoon. */
  .tip-knop{font-size:.75rem;width:1.25rem;height:1.25rem}
  th,td{font-size:.85rem;padding:.45rem .5rem}

  /* --- 5. Formulieren: label bóven het veld ---------------------------- */
  /* Naast elkaar wikkelde een lang label ("Teamnaam (coach — geldt in álle
     spellen)") om het invoerveld heen. En zonder deze max-width staken de
     velden op Profiel en de koppel-import 15 px buiten het scherm. */
  form.stack{max-width:100%}
  form.stack label{display:block;margin-bottom:.15rem;font-weight:600;
    font-size:.85rem}
  input,select,textarea{max-width:100%}
  form.stack input,form.stack select,form.stack textarea{width:100%;min-width:0}

  /* --- 6. Sub-tabs: laat zien dat er meer is dan past ------------------ */
  /* Ze scrolden al, maar niets verried dat: op Scores stonden Prijzengeld en
     Rondje geld onzichtbaar buiten beeld. De vervaagde rechterrand doet dat
     wel. */
  .subtabs{scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
  .subtabs .subtab{scroll-snap-align:start}

  /* --- 7. Het veld: twee kaartjes per rij ------------------------------ */
  /* Bij drie was 31% te smal: "R. van WOLFSWINKEL" liep buiten zijn kaartje. */
  .pos{width:47%;min-width:0}
  .pitch{min-height:auto}

  /* --- 8. Kaartjes in plaats van kolommen ------------------------------ */
  /* Elf kolommen worden één kaartje per rij: op 'Alle spelers' foto, naam en
     club als kop, de rest als label/waarde eronder. De labels komen uit
     data-label, dat de template per cel meegeeft — anders zou je bij "—" niet
     weten waar het een antwoord op is. De vijf cijfers (punten, voorseizoen,
     totaal, basis, invaller) krijgen elk een eigen regel en staan bewust niet
     naast elkaar: op een kaartje zonder kolomkoppen is een rij losse getallen
     onleesbaar.

     Twee tabellen gebruiken deze vorm, en ze komen er anders in terecht:

       table.spelerslijst   ALTIJD kaartjes onder 760 px. Een deelnemer leest
                            één speler; vegen is daar geen optie.
       .kaartbaar           kaartjes ALLEEN als de lezer erom vraagt, via de
                            knop van .weergavekeuze. De klasse `weergave-kaart`
                            staat dan op <html> (zie tabelweergave.js).

     Waarom die tweede vorm een keuze is en geen regel: in een beheertabel wil
     je kolommen kunnen vergelijken ("wie is er nog niet uitgenodigd?"), en dat
     gooien kaartjes weg. Maar de aanname dat beheer alleen op een laptop
     gebeurt, klopt niet — vandaar de knop in plaats van een besluit.
     Zie docs/UI_MOBIEL.md. */
  /* De kaartvorm hangt aan `.tabel-veeg` en niet aan een klasse die JavaScript
     op de tabel moet zetten. Dat scheelt een flits: de keuze staat al als
     `weergave-kaart` op <html> vóór de eerste paint (tabelweergave.js laadt in
     de <head>), dus de browser tekent meteen de goede vorm. Zou de selector
     een klasse op de tábel vragen, dan moest JS eerst het element vinden — en
     dat kan pas als het al geschilderd is. `table.kaartbaar` blijft als
     handmatige opt-in staan voor een tabel buiten een veeg-omhulsel. */
  table.spelerslijst,
  html.weergave-kaart table.kaartbaar,
  html.weergave-kaart .tabel-veeg table{display:block;border:0;
    background:transparent;overflow:visible}
  table.spelerslijst thead,
  html.weergave-kaart table.kaartbaar thead,
  html.weergave-kaart .tabel-veeg table thead{position:absolute;left:-9999px}
  table.spelerslijst tbody,table.spelerslijst tr,table.spelerslijst td,
  html.weergave-kaart table.kaartbaar tbody,
  html.weergave-kaart table.kaartbaar tr,
  html.weergave-kaart table.kaartbaar td,
  html.weergave-kaart .tabel-veeg table tbody,
  html.weergave-kaart .tabel-veeg table tr,
  html.weergave-kaart .tabel-veeg table td{
    display:block;width:auto}
  table.spelerslijst tr,
  html.weergave-kaart table.kaartbaar tr,
  html.weergave-kaart .tabel-veeg table tr{background:#fff;border:1px solid var(--lijn);
    border-radius:8px;margin-bottom:.6rem;padding:.7rem .9rem;overflow:hidden}
  table.spelerslijst tr.inactief{background:#fdf7f7}
  table.spelerslijst td,
  html.weergave-kaart table.kaartbaar td,
  html.weergave-kaart .tabel-veeg table td{border:0;padding:.12rem 0;font-size:.88rem;
    display:flex;gap:.5rem;align-items:baseline}
  table.spelerslijst td::before,
  html.weergave-kaart table.kaartbaar td::before,
  html.weergave-kaart .tabel-veeg table td::before{content:attr(data-label);flex:none;width:6.6rem;
    color:#8a97a3;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;
    line-height:1.6}
  html.weergave-kaart .tabel-veeg table td:not([data-label])::before{display:none}
  html.weergave-kaart .tabel-veeg table td.kaartkop{display:block;
    font-size:1.02rem;margin-bottom:.45rem}
  /* Foto, naam en club vormen samen de kop van het kaartje en krijgen dus
     geen label — die spreken voor zich. */
  table.spelerslijst td.foto-cel{float:left;margin:0 .7rem .2rem 0;padding:0}
  table.spelerslijst td.naam-cel{font-size:1.02rem;font-weight:600;display:block}
  table.spelerslijst td.club-cel{color:#6b7a88;font-size:.8rem;display:block;
    margin-bottom:.45rem}
  table.spelerslijst td.foto-cel::before,
  table.spelerslijst td.naam-cel::before,
  table.spelerslijst td.club-cel::before{display:none}
  table.spelerslijst td.naam-cel a{display:inline-block;min-height:30px}
  table.spelerslijst select{min-height:38px;font-size:.85rem;padding:.2rem .4rem}

  /* Niet 473 kaartjes tegelijk: dat is honderdduizend beeldpunten scrollen.
     spelers/lijst.html toont er 50 en laadt de rest per 50 bij. */
  table.spelerslijst tr.verborgen{display:none}
  .meer-spelers{display:block;width:100%;margin:.2rem 0 1rem}

  /* De <thead> staat hierboven buiten beeld, dus de sorteerknoppen in de
     kolomkoppen zijn hier onbereikbaar. De keuzelijst boven de tabel is
     hetzelfde in andere vorm; op een breed scherm is die juist verborgen. */
  .sorteerbalk .sorteerkeuze{display:inline-flex}

  /* De koppelmarkering verhuist van de eerste cel naar het kaartje, en wordt
     hier een gewone streep zonder beugel of kettinkje.

     Waarom niet dezelfde beugel: die eerste cel is in deze weergave de
     zwevende foto (`float:left`, padding 0), dus daar zou de beugel langs het
     pasfotootje lopen in plaats van langs het kaartje. En de kaartjes staan
     met een marge uit elkaar, dus er ís geen naad tussen twee leden om een
     kettinkje op te hangen; het kaartje heeft bovendien `overflow:hidden` (dat
     houdt de zwevende foto binnen), wat alles wat over de rand steekt afknipt.

     Dat kan hier ook: op een kaartje staat "in koppel met …" voluit in beeld,
     en twee opeenvolgende kaartjes in dezelfde kleur lezen als één paar. */
  table.spelerslijst tr.koppel-a,
  table.spelerslijst tr.koppel-b{box-shadow:inset 4px 0 0 var(--streep)}
  table.spelerslijst tr.koppel-a>td:first-child::before,
  table.spelerslijst tr.koppel-b>td:first-child::before,
  table.spelerslijst tr.koppel-eind>td:first-child::after{content:none}

  /* --- 9. Brede tabellen: vegen of kaartjes, de lezer kiest ------------- */
  /* De keuzebalk staat alleen hier: boven 760 px is er niets te kiezen, want
     dan past de tabel gewoon. */
  .weergavekeuze{display:flex}

  /* TABELVORM. `.deelnemers` stond op `table-layout:fixed` met een <colgroup>
     van vaste percentages — verhoudingen die voor een laptop van 1400 px
     bedacht zijn. Op de 640 px van `.tabel-veeg` is 13% nog maar 83 px, en
     daar moet een knop van 145 px in ("→ veilingmeester"). Knoppen staan op
     `white-space:nowrap`, dus die steken uit; alles wat wél buigt (namen,
     e-mailadressen) breekt intussen midden in een woord af.

     Het breed tekenen zelf staat nu bij `.tabel-veeg table` hierboven: dat
     geldt voor élke veeg-tabel en niet alleen voor de omklapbare. In de
     eerste poging (07-09-2026) stond hier alleen `table-layout:auto`, en dat
     deed vrijwel niets — `table{width:100%}` hield de tabel op zijn container
     en de `<colgroup>` verdeelde díé breedte gewoon opnieuw. Pas met
     `width:max-content` en `col{width:auto}` wordt hij echt breed. */

  /* En dan het echte gevaar van vegen: veeg je naar de knoppen, dan is de
     eerste kolom uit beeld en druk je op 'Verwijderen' zonder te zien bij
     wie. De identiteitskolom blijft daarom staan — op élke veeg-tabel, niet
     alleen op de omklapbare.

     Dit werkte in de eerste poging niet, en niet om de reden die er toen bij
     stond (`border-collapse:collapse`). De oorzaak was `overflow:hidden`, dat
     in de basisregel op élke `table` staat voor de afgeronde hoek: zolang een
     voorouder een andere overflow dan `visible` heeft, doet `position:sticky`
     niets. `.tabel-veeg table` zet dat nu terug. */
  .tabel-veeg th:first-child,
  .tabel-veeg td:first-child{position:sticky;left:0;z-index:1;
    background:#fff;box-shadow:1px 0 0 var(--lijn)}
  .tabel-veeg th:first-child{background:var(--grijs);z-index:2}
  /* Een rij die zijn eigen achtergrond heeft (jouw eigen regel in de
     live-stand, een geblokkeerde deelnemer) zou die in de vastgezette kolom
     kwijtraken: de cel tekent zijn eigen wit eroverheen. `inherit` pakt de
     kleur van de rij als die er een heeft. */
  .tabel-veeg tr.ikzelf td:first-child,
  .tabel-veeg tr.inactief td:first-child{background:inherit}

  /* KAARTVORM. Geen kolommen meer, dus ook niets om vast te zetten: sticky
     eruit, anders plakt de eerste regel van elk kaartje aan de linkerrand. */
  html.weergave-kaart .kaartbaar th:first-child,
  html.weergave-kaart .kaartbaar td:first-child,
  html.weergave-kaart .tabel-veeg th:first-child,
  html.weergave-kaart .tabel-veeg td:first-child{position:static;
    box-shadow:none;background:transparent}
  /* `content:attr(data-label)` geeft een lege string als het attribuut er niet
     is — maar het blokje van 6.6rem staat er dan wél, als een inspring waar
     niets in staat. Cellen zonder label krijgen dus helemaal geen ::before. */
  html.weergave-kaart .kaartbaar td:not([data-label])::before{display:none}
  /* De eerste cel is de kop van het kaartje (bij Deelnemers: teamnaam en
     naam), zoals de naamcel dat op 'Alle spelers' is. Die draagt geen label:
     hij zegt zelf al wie dit is. */
  html.weergave-kaart .kaartbaar td.kaartkop{display:block;font-size:1.02rem;
    margin-bottom:.45rem}
  /* De veeg-container heeft in kaartvorm niets meer te vegen. Zonder dit
     houdt hij zijn rand en zijn witte vlak om een rij losse kaartjes heen. */
  html.weergave-kaart .tabel-veeg{overflow-x:visible;border:0;
    background:transparent;border-radius:0}
  html.weergave-kaart .tabel-veeg table{min-width:0}
}


/* ========================================================================== *
 *  'Waar ben je mee bezig' — de vier blokken
 *
 *  Zie docs/PLAN_BEZIG.md en app/activiteit.py. De pagina bestaat uit
 *  'Jouw beurt' (taaklijst), de tijdlijn, 'Wat het spel deed' en 'Het spel om
 *  je heen'.
 * ========================================================================== */

/* ---------------------------------------------------------------- blok 1 */
.bezig-beurt .taaklijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bezig-beurt .taaklijst li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .45rem .6rem;
  border-left: 3px solid #d7dbe0;
  border-radius: 4px;
  margin-bottom: .35rem;
  background: rgba(0, 0, 0, .02);
}

/* Urgent = er kan iets misgaan als je niets doet (open plek, vertrokken
   speler, laatste joker). Bewust maar één niveau nadruk: als alles opvalt,
   valt niets op. */
.bezig-beurt .taaklijst li.urgent {
  border-left-color: #d4351c;
  background: rgba(212, 53, 28, .06);
}

.bezig-beurt .taak-icoon { flex: 0 0 1.3em; }
/* `flex: 1 1 0` en min-width: 0 zijn hier geen franje. Met flex-basis auto is
   de gewenste breedte van dit vak de volle tekst; op een telefoon wijkt het
   dan (door flex-wrap) naar de regel ónder het icoon, en wordt elke taak drie
   regels hoog. Met basis 0 groeit het vak juist in wat er overblijft. */
.bezig-beurt .taak-tekst { flex: 1 1 0; min-width: 0; }
.bezig-beurt .taak-link {
  flex: 0 0 auto;
  font-size: .85em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- blok 2 */
.bezig-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
}

.bezig-filters .filter-knop {
  font-size: .82em;
  padding: .18rem .55rem;
  border: 1px solid #cfd4da;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.bezig-filters .filter-knop.aan {
  background: #1f6f43;
  border-color: #1f6f43;
  color: #fff;
}

.tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tijdlijn .tijdlijn-dag {
  font-weight: 700;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  margin: .9rem 0 .3rem;
}

.tijdlijn .tijdlijn-dag:first-child { margin-top: 0; }

.tijdlijn .tijdlijn-item {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.tijdlijn .tl-icoon { flex: 0 0 1.3em; }
/* Zie de toelichting bij .taak-tekst hierboven: zonder min-width: 0 valt de
   tekst op een smal scherm onder het icoon. */
.tijdlijn .tl-tekst { flex: 1 1 0; min-width: 0; }
.tijdlijn .tl-link { text-decoration: none; }

/* De tijd rechts, en op een telefoon onder de tekst in plaats van ernaast
   geknepen. */
.tijdlijn .tl-tijd {
  flex: 0 0 auto;
  font-size: .8em;
  white-space: nowrap;
}

/* Je eigen acties blijven groen — dat was het enige dat de oude pagina goed
   deed en het scheelt echt bij het scannen. */
.tijdlijn .tijdlijn-item.eigen .tl-tekst { color: #1f6f43; }

.tijdlijn.rustig .tijdlijn-item { opacity: .85; }

.bezig-meer { margin: .8rem 0 0; }

/* ---------------------------------------------------------------- blok 4 */
.bezig-omheen .sfeerlijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bezig-omheen .sfeerlijst li {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  padding: .25rem 0;
}

.bezig-omheen .sfeer-icoon { flex: 0 0 1.3em; }

/* --------------------------------------------------- automatisch verversen */
/* Kort oplichten na een verversing: je ziet dát er iets veranderd is zonder
   dat de pagina onder je vandaan springt. */
#bezig-blokken.net-ververst .card {
  transition: background-color .4s ease;
  background-color: rgba(31, 111, 67, .07);
}

/* Op een telefoon zakt alleen de TIJD naar een eigen regel. Het icoon en de
   tekst blijven naast elkaar staan (vandaar de min-width: 0 hierboven) —
   anders wordt elke regel drie regels hoog en scrol je je scheel. */
@media (max-width: 560px) {
  .tijdlijn .tijdlijn-item,
  .bezig-beurt .taaklijst li {
    flex-wrap: wrap;
  }
  .tijdlijn .tl-tijd,
  .bezig-beurt .taak-link {
    flex-basis: 100%;
    padding-left: 1.9em;
    text-align: left;
  }
}

/* Nieuw sinds je vorige bezoek: één streep op de overgang, en een subtiel
   accent op de regels erboven. Bewust geen felle kleur — het gaat om "dit heb
   je nog niet gezien", niet om "hier is iets mis". */
.tijdlijn .tijdlijn-streep{display:flex;align-items:center;gap:.6rem;
  margin:.7rem 0 .3rem;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.05em;color:#8a97a3}
.tijdlijn .tijdlijn-streep::before,
.tijdlijn .tijdlijn-streep::after{content:"";flex:1 1 auto;height:1px;
  background:#d7dbe0}
.tijdlijn .tijdlijn-item.is-nieuw{background:rgba(31,111,67,.045)}
.tijdlijn .tijdlijn-item.is-nieuw .tl-icoon{position:relative}
.tijdlijn .tijdlijn-item.is-nieuw .tl-icoon::after{content:"";position:absolute;
  top:-.1em;right:-.15em;width:.42em;height:.42em;border-radius:50%;
  background:#1f6f43}

/* ---------------------------------------------------------------------------
   Score per koppel (Scores → Score per koppel, 26-08-2026)
   ---------------------------------------------------------------------------
   Hetzelfde veld als 'Mijn team' (.pitch/.pitch-row/.pos), maar dan per CLUB
   in plaats van per deelnemer. Op elke tegel staat er meer: naast de namen
   ook de prijs, de eigenaar, de veilingronde en de punten. De tegels mogen
   daarom hoger worden dan op de teampagina — de breedte blijft gelijk, zodat
   een rij van vier nog steeds als een linie leest.
   Zie docs/releases/2026-08-26.md. */

/* Een plek die de 4-3-3 wél kent, maar waar dit spel geen koppel (meer)
   heeft. Grijs en met een streepjesrand: duidelijk een lege plek, en op het
   groene veld ook meteen te onderscheiden van een tegel die er wél is. */
.pos.pos-leeg{background:rgba(150,161,171,.9);
  border:2px dashed rgba(255,255,255,.7);box-shadow:none;
  align-items:center;justify-content:center;cursor:help}
.pos-leeg-tekst{font-size:.72rem;color:#fff;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;text-align:center}

/* Een ronde die niet meetelt voor het klassement (voorseizoen) op de
   scorepagina. Gedempt in plaats van weggelaten: de punten zijn echt en
   tellen mee voor de voorseizoen-awards, ze horen alleen niet bij het totaal
   erboven. Zie app/templates/player/scores.html. */
tr.telt-niet-mee td{opacity:.62}
tr.telt-niet-mee td:first-child{opacity:1}

/* Een koppel dat nog bestaat maar (nog) geen eigenaar heeft. Sinds
   28-08-2026 staan de spelers er gewoon op — vóór en tijdens de veiling is
   dit scherm de catalogus waaruit geboden wordt, en zonder namen valt er
   niets te beslissen. Het moet wél op één blik van een verkocht koppel te
   onderscheiden zijn: vandaar de streepjesrand van het lege vlak, maar met
   een lichte vulling en iets gedempte tekst in plaats van massief grijs. */
.pos.pos-onverkocht{background:rgba(255,255,255,.72);
  border:2px dashed rgba(120,134,146,.55);box-shadow:none}
.pos.pos-onverkocht .naam{color:#5b6b78}
.pos-tekoop{color:#8a5a00}

/* Veilingronde ('Verdediging #2') of herkomst ('aanvulronde'). Bovenaan de
   tegel, want het is de sorteersleutel van de rij: links geveild, rechts
   aangevuld. */
.pos-herkomst{font-size:.65rem;font-weight:700;color:#5b6b78;
  text-transform:uppercase;letter-spacing:.02em;cursor:help;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Behaald en haalbaar naast elkaar, in de rij mee. Op 'Mijn team' zweeft de
   puntenbadge linksboven in de tegel; hier kan dat niet, want daar staat al
   de veilingronde en eronder de prijs en de eigenaar. Ze staan daarom als
   één regel bij elkaar: '4 van 6' leest als één feit, twee getallen op
   verschillende plekken als twee. */
.pos-score{display:flex;align-items:center;gap:.25rem;cursor:help;
  margin-top:.15rem}
.pos-punten.in-rij{position:static;top:auto;left:auto;cursor:inherit}
.pos-haalbaar{font-size:.68rem;font-weight:600;color:#7a8894;line-height:1.4}

/* Het maximum uit het voorseizoen (🔮), vóór en tijdens de veiling. Zelfde
   vorm als de puntenbadge hierboven, want het is hetzelfde soort feit — maar
   in paars, omdat het over ándere ronden gaat: die vóór de veiling, die niet
   meetellen voor het klassement. Zou hij groen zijn, dan leest hij als een
   stand in dit spel. Zie 2026-08-29-voorseizoen-koppels.md. */
.pos-voorseizoen{min-width:20px;padding:0 .3rem;
  font-size:.72rem;font-weight:700;line-height:1.45;
  border-radius:9px;border:1px solid #ded0f0;background:#f4eefc;color:#5b3a8c;
  cursor:help;white-space:nowrap}
.pos-voorseizoen.nul{background:#f2f5f7;border-color:#dde4e9;color:#7a8894}
.pos-voorseizoen.min{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}

/* Het veld met de transferlijst ernaast — vóór en tijdens de veiling en in de
   aanvulronde. Hergebruikt de tweekolomsindeling van het koppelbeheer
   (.koppel-veld / .koppel-transfer, zie hierboven), zodat het lijstje er
   hetzelfde uitziet als op het scherm waar het bewerkt wordt. `min-width:0`
   omdat een grid-kolom anders niet onder zijn inhoud kan krimpen: zonder die
   regel duwt het veld de aside van het scherm af op een smal venster. Onder
   900 px zet .koppel-veld zichzelf al onder elkaar. */
.koppel-veld > .pitch{min-width:0}
.koppel-transfer .transfer-lijst li{display:flex;align-items:baseline;
  justify-content:space-between;gap:.4rem}
.transfer-punten{font-size:.72rem;font-weight:700;line-height:1.45;
  padding:0 .3rem;border-radius:9px;border:1px solid #ded0f0;
  background:#f4eefc;color:#5b3a8c;cursor:help;white-space:nowrap}
.transfer-punten.nul{background:#f2f5f7;border-color:#dde4e9;color:#7a8894}
.transfer-punten.min{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}

.pos-eigenaar{display:flex;align-items:center;gap:.25rem;margin-top:auto;
  max-width:100%;color:var(--tekst);font-size:.72rem;font-weight:600}
.pos-eigenaar:hover{text-decoration:none;color:var(--groen)}
.pos-eigenaar-naam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 🤝 op een clubtegel: koppels van die club met een eigenaar. Zelfde vorm als
   de V/M/A-cijfers ernaast (zie .club-tegel-transfer), maar in het groen —
   het is het getal waar deze pagina om draait. */
.club-tegel-transfer .tr-gekocht{background:#eafaf0;color:#0a7d34;
  border-radius:4px;padding:0 .3rem;font-weight:700;white-space:nowrap}
/* Vier cijfers plus het ⓘ van de tooltiplaag passen niet altijd op één regel
   van een tegel van 180 px; laat ze dan netjes doorlopen in plaats van uit de
   tegel te steken. */
.club-tegel-transfer{flex-wrap:wrap;row-gap:.15rem}

@media (max-width:760px){
  /* Twee kaartjes per rij, net als op de teampagina — maar met de extra
     regels erop moet de tekst iets kleiner om binnen de tegel te blijven. */
  .pos-herkomst{font-size:.62rem}
  .pos-eigenaar{font-size:.7rem}
}

/* ------------------------------------------------------------------ */
/* Spelinstellingen: de kaarten op /beheer/instellingen (26-08-2026).   */
/* ------------------------------------------------------------------ */
/* Eén kaart per onderwerp, met de huidige stand erop. auto-fit met een
   minimum van 280 px: op een breed scherm drie naast elkaar, op een tablet
   twee, op een telefoon één — zonder een mediaquery per breedte. */
.grid.beheer-kaarten{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start}
/* De knop hoort onderaan de kaart te staan, ook als de ene kaart een langere
   uitleg heeft dan zijn buurman: anders zweven de knoppen op drie hoogtes. */
.beheer-kaart{display:flex;flex-direction:column;margin-bottom:0}
.beheer-kaart h2{margin-top:0}
.beheer-kaart>p:last-child{margin-top:auto;margin-bottom:0}
/* De regel met badges tussen de uitleg en de knop. Zonder eigen ruimte
   plakken de badges tegen de tekst erboven. */
.beheer-stand{margin:.5rem 0 .7rem;display:flex;flex-wrap:wrap;gap:.35rem}

/* ------------------------------------------------------------------ */
/* Prijzengeld: het verloop van het geld per ronde (26-08-2026).        */
/* ------------------------------------------------------------------ */
/* Eén inline-SVG met een viewBox, geen tekenbibliotheek: de lijnen worden
   op de server uitgerekend (app/prijzengeld.py::geld_per_ronde) en hier
   alleen nog gekleurd. Scheelt een download van een paar honderd kB en
   werkt ook als JavaScript uitstaat.
   min-width: op een telefoon liever horizontaal scrollen (de grafiek staat
   in een .tabel-scroll) dan een plaatje waarin de rondes op elkaar vallen. */
.geldgrafiek{width:100%;min-width:520px;height:auto;display:block}
.gg-raster{stroke:var(--lijn);stroke-width:1}
.gg-aslijn{stroke:#c7ced6;stroke-width:1.5}
.gg-as{fill:#6b7681;font-size:14px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.gg-astitel{font-size:13px;font-style:italic}
.gg-lijn{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/* De legenda doet het werk dat een tooltip niet kan doen op een telefoon:
   welke kleur is wie, en waar staat hij nu. */
.gg-legenda{list-style:none;margin:.7rem 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:.3rem .9rem;font-size:.85rem}
.gg-legenda li{display:flex;align-items:center;gap:.35rem}
.gg-legenda li.ik{font-weight:600}
.gg-vlek{width:.75rem;height:.75rem;border-radius:2px;flex:none}


/* ------------------------------------------------------------------ */
/* Klassementgrafiek: hetzelfde plaatje, veertien lijnen (08-09-2026)  */
/* ------------------------------------------------------------------ */
/* De prijzengeldgrafiek heeft in de praktijk een handvol lijnen: alleen wie
   iets won krijgt er een. Het klassement heeft er één per deelnemer, en bij
   veertien deelnemers is "welke lijn is van mij" niet meer te zien. Twee
   dingen lossen dat op, en het eerste werkt ook zonder JavaScript:

   1. je eigen lijn is dikker en ligt bovenop;
   2. via de legenda licht je één lijn uit (app/static/klassement-grafiek.js);
      de rest wordt grijs in plaats van verborgen, zodat je nog steeds ziet
      waar die ene lijn zich tussen de andere bevindt. */
.klassementgrafiek{min-width:560px}
.klassementgrafiek .gg-reeks.ik .gg-lijn{stroke-width:4}
.klassementgrafiek .gg-reeks.ik circle{r:6}

/* Uitgelicht: alles wat niet de gekozen reeks is, wordt gedempt. De klasse
   staat op de <svg>, zodat er precies één regel nodig is om het weer uit te
   zetten. */
.klassementgrafiek.uitgelicht .gg-reeks{opacity:.13}
.klassementgrafiek.uitgelicht .gg-reeks.uit{opacity:1}
.klassementgrafiek.uitgelicht .gg-reeks.uit .gg-lijn{stroke-width:4}
.klassementgrafiek .gg-reeks{transition:opacity .12s ease-out}

/* De legenda is bij deze grafiek een rij knoppen. Ze moeten er hetzelfde
   uitzien als de gewone legenda-regels ernaast: geen knopachtergrond, geen
   rand, wel een duidelijke focusring voor het toetsenbord. */
.gg-legenda .gg-knop{display:flex;align-items:center;gap:.35rem;
  background:none;border:0;padding:.15rem .2rem;margin:0;font:inherit;
  color:inherit;cursor:pointer;border-radius:4px;text-align:left}
.gg-legenda .gg-knop:hover{background:rgba(0,0,0,.05)}
.gg-legenda .gg-knop:focus-visible{outline:2px solid var(--groen);
  outline-offset:1px}
.gg-legenda .gg-knop[aria-pressed="true"]{background:rgba(0,0,0,.08);
  font-weight:600}


/* ------------------------------------------------------------------ */
/* Verloopgrafiek: één ronde, de klok op de x-as (13-09-2026)          */
/* ------------------------------------------------------------------ */
/* Zelfde tekenvlak en assen als hierboven, maar met een andere vraag: niet
   "waar sta ik in het seizoen" maar "wanneer ging het in dit uur mis". Daarom
   géén palet en géén legenda — alle lijnen grijs en alleen de jouwe in kleur.
   Twaalf kleuren die elk twintig minuten door elkaar heen lopen leveren een
   kluwen op waar niemand zijn eigen lijn in terugvindt.

   De namen staan aan het eind van de lijn in plaats van in een legenda; de
   ruimte daarvoor komt uit grafiek.RECHTS_LABELS. */
/* Zijwaarts vegen om een grafiek die breder is dan het scherm. Bewust niet
   `.tabel-knijp` (die knijpt tabelkolommen samen, en dit is geen tabel) en niet
   `.tabel-veeg` (die zet er een rand en een witte achtergrond omheen, en de
   kaart eromheen is al wit). */
.grafiek-veeg{overflow-x:auto;-webkit-overflow-scrolling:touch}
.verloopgrafiek .gg-lijn{stroke:#c3ccd4;stroke-width:1.5}
.verloopgrafiek .gg-reeks circle{fill:#c3ccd4}
.verloopgrafiek .gg-reeks.ik .gg-lijn{stroke:var(--groen);stroke-width:3.5}
.verloopgrafiek .gg-reeks.ik circle{fill:var(--groen);r:5}
.verloopgrafiek .gg-naam{fill:#6b7681;font-size:13px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.verloopgrafiek .gg-naam.ik{fill:var(--groen-donker);font-weight:700}


/* ===========================================================================
   Bugs & ideeën (app/feedback.py)
   ---------------------------------------------------------------------------
   Eén stijlblok voor de drie tabbladen. De tabbalk zelf, de kaarten en de
   badges komen uit wat er al stond (.subtabs, .card, .badge); hier staat
   alleen wat deze pagina's er extra bij nodig hebben.
   =========================================================================== */
.feedback-lijst{display:flex;flex-direction:column;gap:.8rem}
.feedback-nieuw{margin-bottom:1rem}
.feedback-nieuw summary{cursor:pointer}
.feedback-nieuw label{display:block;margin-top:.6rem;font-weight:600}
.feedback-nieuw input[type=text],.feedback-nieuw select,
.feedback-bewerk input[type=text],.feedback-bewerk select{width:100%;max-width:34rem}
.feedback-velden{display:flex;gap:1rem;flex-wrap:wrap}
.feedback-velden > span{flex:1 1 16rem}

/* Een melding. De linkerrand geeft de ernst weer, zodat je zonder lezen ziet
   waar het dringend is. Een opgeloste melding gaat naar de achtergrond maar
   blijft leesbaar — hij staat er nog een week. */
.feedback-item{border-left:4px solid var(--lijn)}
.feedback-item.ernst-blokkerend{border-left-color:#e53935}
.feedback-item.ernst-hinderlijk{border-left-color:#e8a33d}
.feedback-item.ernst-klein{border-left-color:#9bb3a3}
.feedback-item.is-opgelost{opacity:.72}
.feedback-kop{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.feedback-kop h3{margin:0;font-size:1.05rem}
.feedback-tekst{word-break:break-word}
.feedback-tekst p{margin:.3rem 0}
.feedback-tekst ul,.feedback-tekst ol{margin:.3rem 0 .3rem 1.2rem}

.badge.status-open{background:#eef4fb;border-color:#c9dcf0;color:#245b8f}
.badge.status-bezig{background:#fff6e6;border-color:#f3dca6;color:#8a5a00;font-weight:600}
.badge.status-opgelost{background:#eafaf0;border-color:#bfe8cf;color:var(--groen-donker)}
.badge.ernst-badge{text-transform:lowercase}
.badge.ernst-blokkerend{background:#fdeaea;border-color:#f5c6c6;color:var(--rood);font-weight:600}
.badge.ernst-hinderlijk{background:#fff6e6;border-color:#f3dca6;color:#8a5a00}

.feedback-bijlagen{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.feedback-bijlagen img{max-height:120px;border:1px solid var(--lijn);border-radius:6px}

.feedback-antwoord{background:#f1f6f2;border-left:3px solid var(--groen);
  border-radius:0 8px 8px 0;padding:.5rem .7rem;margin:.6rem 0}

.feedback-beheer{border-top:1px dashed var(--lijn);margin-top:.7rem;padding-top:.6rem;
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.feedback-beheer .inline-form{display:flex;gap:.4rem;align-items:center}
.feedback-beheer summary,.feedback-bewerk summary{cursor:pointer}
.feedback-antwoordvak{flex:1 1 100%}

/* Stemmen. De gekozen knop is ingedrukt en niet alleen gekleurd, zodat je
   ook zonder kleur ziet waar je stem staat. */
.idee-stemmen{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 .2rem}
.stemknop{background:#fff;color:var(--tekst);border:1px solid var(--lijn);
  border-radius:20px;padding:.35rem .8rem;cursor:pointer}
.stemknop:hover{background:var(--grijs)}
.stemknop.gekozen{background:var(--groen);color:#fff;border-color:var(--groen);font-weight:600}
.stemknop[disabled]{cursor:default;opacity:.75}
.stemknop .telling{font-weight:700;margin-left:.25rem}
.idee-reacties{margin-top:.5rem}
.idee-reacties .chat-lijst{max-height:none;margin-bottom:.5rem}

@media (max-width:760px){
  .feedback-beheer{flex-direction:column;align-items:stretch}
  .feedback-velden{flex-direction:column;gap:0}
}

/* ── CorruptieCup (docs/PLAN_CORRUPTIECUP.md) ───────────────────────────────
   De pagina is twee kolommen: links de blokken, rechts de uitleg. Op een
   telefoon klapt de uitleg eronder — hij is lang, en boven de tijdlijn zou hij
   het scherm vullen voordat je iets van het spel gezien hebt. */
.cc-kolommen{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:1.25rem;
  align-items:start}
@media (max-width:1100px){.cc-kolommen{grid-template-columns:1fr}}
.cc-uitleg .card{position:sticky;top:1rem;font-size:.94rem}
@media (max-width:1100px){.cc-uitleg .card{position:static}}
.cc-uitleg h4{font-size:.92rem;margin:1rem 0 .25rem;color:var(--groen-donker)}
.cc-uitleg p{margin:.4rem 0}
.cc-rollen{margin:.4rem 0;padding-left:1.1rem}
.cc-rollen li{margin:.35rem 0}
.cc-kop{margin:0 0 .4rem;font-size:1.05rem}
.cc-subkop{margin:1.1rem 0 .35rem;font-size:.95rem}

/* De titels van nu: icoon, avatar, teamnaam. Verder niets — de rolnaam en de
   score staan in de title=, zodat vier kaarten op één rij passen. */
.cc-titels{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.6rem;margin-top:.5rem}
.cc-titel{display:flex;gap:.55rem;align-items:center;border:1px solid var(--lijn);
  border-radius:8px;padding:.55rem .7rem;background:#fff}
.cc-titel .cc-em{font-size:1.4rem;line-height:1;flex:none}
.cc-titel .cc-team{font-weight:600;font-size:.95rem;line-height:1.2}
.cc-infantino{background:#fffdf2;border-color:#e8d99a}
.cc-emir{background:#fdfdf7;border-color:#e6e6cf}
.cc-plastic_zak{background:#fdf6f2;border-color:#eccfbe}
.cc-jet{background:#fdeaea;border-color:#f5c6c6}

/* De troonlijn: per ronde het rondje van de nummer 1 van dat moment. */
.cc-troonlijn{display:flex;gap:.35rem;overflow-x:auto;padding:.3rem .1rem .5rem;
  align-items:flex-end}
.cc-troon{display:grid;justify-items:center;gap:.25rem;min-width:2.6rem;flex:none}
.cc-rondenr{font-size:.72rem;color:#5b6b74;font-variant-numeric:tabular-nums}
.cc-plek.cc-leeg{width:1.9rem;height:1.9rem;border-radius:50%;
  border:1px dashed var(--lijn);background:var(--grijs)}
.cc-plek.cc-komt{width:1.9rem;height:1.9rem;border-radius:50%;
  border:1px dashed var(--oranje);background:#fff8e6;display:grid;
  place-items:center;color:var(--oranje);font-weight:700;font-size:.9rem}
.cc-plek.cc-reeks img,.cc-plek.cc-reeks .avatar{outline:2px solid #e8d99a;
  outline-offset:2px;border-radius:50%}

/* De ruilkaart: twee ploegen naast elkaar met een → en een ← ertussen, zodat
   de beweging in één blik te zien is in plaats van in zes losse regels. */
.cc-ruil{display:grid;grid-template-columns:1fr 3.2rem 1fr;gap:.5rem;
  border:1px solid var(--lijn);border-radius:8px;overflow:hidden;
  margin-bottom:.8rem;background:var(--grijs)}
@media (max-width:640px){.cc-ruil{grid-template-columns:1fr}}
.cc-zijde{background:#fff;padding:.6rem .7rem}
.cc-zijde-kop{display:flex;gap:.55rem;align-items:center;margin-bottom:.5rem}
.cc-rol{font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#5b6b74}
.cc-zijde .cc-team{font-weight:600;font-size:.95rem}
.cc-midden{display:grid;place-items:center;gap:.9rem;color:var(--groen);
  font-size:1.5rem;font-weight:700}
@media (max-width:640px){.cc-midden{grid-auto-flow:column;padding:.3rem 0}}
.cc-geeft{font-size:.78rem;color:#5b6b74;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:.2rem}

.cc-item{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;
  border-bottom:1px dotted var(--lijn);font-size:.93rem;flex-wrap:wrap}
.cc-item:last-child{border-bottom:none}
.cc-koppel{font-weight:600}
.cc-spelers{display:block;font-size:.82rem;color:#5b6b74;margin-top:.05rem}
.cc-basis{display:inline-block;font-size:.68rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--groen-donker);
  background:#eafaf0;border:1px solid #bfe8cf;border-radius:20px;padding:0 .35rem}
.cc-punt{font-variant-numeric:tabular-nums;font-size:.8rem;color:#5b6b74;
  background:var(--grijs);border:1px solid var(--lijn);border-radius:20px;
  padding:.02rem .4rem;margin-left:auto}
.cc-punt.min{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}
.cc-merk{display:inline-block;font-size:.68rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;border-radius:20px;
  padding:0 .35rem}
.cc-merk.geloot{background:#eef2fb;border:1px solid #c9d6ee;color:#2c4a86}
.cc-merk.verdacht{background:#fdeaea;border:1px solid #f5c6c6;color:var(--rood)}

/* Het ronde-detail met de pijlen. */
.cc-rondenav{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;border-bottom:1px solid var(--lijn);padding-bottom:.5rem;
  margin-bottom:.7rem;flex-wrap:wrap}
.cc-rondenav .cc-kop{margin:0}
.cc-pijl{border:1px solid var(--lijn);border-radius:6px;padding:.25rem .6rem;
  font-size:.88rem;background:#fff;white-space:nowrap}
.cc-pijl.uit{color:#5b6b74;background:var(--grijs);opacity:.55}
.cc-detailrij{display:grid;grid-template-columns:1.6rem auto 1fr auto auto;
  gap:.5rem;align-items:center;padding:.32rem .3rem;
  border-bottom:1px dotted var(--lijn);font-size:.93rem}
.cc-detailrij:last-of-type{border-bottom:none}
.cc-detailrij .cc-em{font-size:1.1rem;text-align:center}
.cc-score{font-variant-numeric:tabular-nums;font-weight:700;min-width:2.2rem;
  text-align:right}
.cc-verschil{font-variant-numeric:tabular-nums;font-size:.8rem;border-radius:20px;
  padding:.02rem .45rem;border:1px solid var(--lijn);background:var(--grijs);
  color:#5b6b74;min-width:4.6rem;text-align:center}
.cc-verschil.plus{background:#eafaf0;border-color:#bfe8cf;color:var(--groen-donker)}
.cc-verschil.min{background:#fdeaea;border-color:#f5c6c6;color:var(--rood)}

.cc-historie .cc-cel{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.cc-nietmee td{background:var(--grijs);color:#5b6b74;font-style:italic}
.pos-leen{font-size:.65rem;font-weight:700;letter-spacing:.02em;
  background:#fff8e6;border:1px solid #f0d9a0;color:#8a5a00;border-radius:20px;
  padding:0 .35rem;margin:.15rem 0;cursor:help}
.cc-anders td{background:#fff8e6}