/*
 * Wedstrijdanalyse.
 *
 * Dezelfde stijl als beheer.cloudsys.nl: lichte achtergrond, haarlijnen, ruime
 * kaarten en hetzelfde blauw. Twee gereedschappen van dezelfde maker horen er
 * hetzelfde uit te zien; dan hoef je niet elke keer opnieuw te leren waar iets
 * zit.
 *
 * Op één plek wijkt het bewust af: **het videovlak blijft donker.** Je kijkt
 * er beelden in, en een fel wit vlak eromheen vermoeit de ogen en wast het
 * beeld uit. Dat is dezelfde reden waarom een montagepakket licht is aan de
 * randen en donker in het midden.
 */

:root {
  /* Het groen komt uit het voorbeeld dat Michiel stuurde: emerald met neutrale
     grijzen. De namen blijven "blauw" heten — die staan op zo'n honderd plekken
     in de stijl, en ze allemaal hernoemen levert alleen een kans op een gemiste
     plek op. Wat er staat is de rol, niet de kleur. */
  --blauw:       #047857;
  --blauw-600:   #065f46;
  --blauw-700:   #064e3b;
  --blauw-50:    #ecfdf5;
  --blauw-100:   #a7f3d0;

  /* Bijna zwart en neutraal grijs, niet blauwig: naast groen krijgt een
     blauwe grijstint meteen een paarse zweem. */
  --inkt:        #09090b;
  --inkt-zacht:  #3f3f46;
  --zacht:       #71717a;
  --zwak:        #a1a1aa;

  --lijn:        #e4e4e7;
  --lijn-fijn:   #f4f4f5;
  --doek:        #fafafa;
  --vlak:        #ffffff;
  --vlak2:       #f4f4f5;

  --groen:       #15803d;
  --groen-bg:    #e9f7ef;
  --amber:       #b45309;
  --amber-bg:    #fff6e8;
  --rood:        #b91c1c;
  --rood-bg:     #fdeced;

  /* Het donkere vlak voor de beelden. */
  --film:        #0b1220;
  --film-lijn:   #1e293b;

  --rond:        14px;
  --rond-klein:  10px;
  --schaduw:     0 1px 2px rgba(15,23,41,.04), 0 1px 3px rgba(15,23,41,.03);
  --schaduw-op:  0 4px 6px -2px rgba(15,23,41,.06), 0 12px 28px -8px rgba(15,23,41,.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--doek);
  color: var(--inkt);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

.getal { font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.sub { display: block; color: var(--zacht); font-size: 12.5px; }
.laden { padding: 60px; text-align: center; color: var(--zacht); }

/* ── Merk ───────────────────────────────────────────────────────────────── */

.merk { font-weight: 700; letter-spacing: -.03em; color: var(--inkt); font-size: 24px; }
.merk span { color: var(--blauw); }

/* ── Aanmelden ──────────────────────────────────────────────────────────── */

.aanmelden { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kaart {
  width: 100%; max-width: 420px; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: 16px; padding: 34px;
  box-shadow: var(--schaduw-op);
}
.onder { color: var(--zacht); font-size: 13.5px; margin: 6px 0 26px; }

/* ── Velden ─────────────────────────────────────────────────────────────── */

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--zacht); margin-bottom: 6px; }
.veld { margin-bottom: 16px; }

input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 11px 14px; font: inherit;
  border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  background: var(--vlak); color: var(--inkt);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(4,120,87,.22); border-color: var(--blauw);
}
textarea { resize: vertical; min-height: 74px; }

/* Het wedstrijdverslag. Ruim, en toch niet over de hele breedte uitgerekt:
   vijftien regels die van rand tot rand lopen leest niemand meer terug. */
textarea.verslag { min-height: 280px; max-width: 62em; line-height: 1.55; }

.rij  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rij3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 560px) { .rij, .rij3 { grid-template-columns: 1fr; } }

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--blauw); border-radius: var(--rond-klein);
  background: var(--blauw); color: #fff; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.knop:hover:not(:disabled) { background: var(--blauw-600); border-color: var(--blauw-600); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.stil { background: var(--vlak); border-color: var(--lijn); color: var(--inkt-zacht); font-weight: 550; }
.knop.stil:hover:not(:disabled) { background: var(--doek); border-color: #dbe2ec; color: var(--inkt); }
.knop.stil.aan { background: var(--blauw-50); border-color: var(--blauw-100); color: var(--blauw-700); }
/* Ná .stil, en met een eigen tekstkleur: anders wint het donkere grijs van
   .stil en staat er donkere tekst op rood. Dat leest niet, en juist deze knop
   moet je goed kunnen lezen. */
.knop.gevaar, .knop.stil.gevaar {
  background: var(--rood); border-color: var(--rood); color: #fff; font-weight: 600;
}
.knop.gevaar:hover:not(:disabled), .knop.stil.gevaar:hover:not(:disabled) {
  background: #991b1b; border-color: #991b1b; color: #fff;
}
.knop.klein { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.knop.breed { width: 100%; }

/* ── Meldingen ──────────────────────────────────────────────────────────── */

.melding {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--rond-klein);
  font-size: 13.5px; background: var(--doek); color: var(--zacht);
}
.melding.fout { background: var(--rood-bg); color: var(--rood); }
.melding.goed { background: var(--groen-bg); color: var(--groen); }

.merkje {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #f1f4f9; color: var(--zacht);
}
.merkje.goed  { background: var(--groen-bg); color: var(--groen); }
.merkje.beter { background: var(--amber-bg); color: var(--amber); }
.merkje.fout  { background: var(--rood-bg);  color: var(--rood); }

/* ── Het geraamte ───────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } }

.zijbalk {
  background: var(--vlak); border-right: 1px solid var(--lijn);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh;
}
@media (max-width: 860px) {
  .zijbalk { position: static; height: auto; flex-direction: row; align-items: center;
             border-right: 0; border-bottom: 1px solid var(--lijn); overflow-x: auto; }
  .zijbalk .merk { font-size: 18px; flex: none; }
  .zijbalk .voet { display: none; }
}

.zijbalk nav { display: grid; gap: 1px; align-content: start; flex: 1; }
@media (max-width: 860px) { .zijbalk nav { display: flex; gap: 4px; } }

.zijbalk nav button {
  position: relative;
  display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px 10px 14px;
  font: inherit; font-size: 14.5px; font-weight: 550; color: var(--inkt-zacht);
  background: none; border: 0; border-radius: 9px; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.zijbalk nav button::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--blauw); opacity: 0; transition: opacity .12s;
}
.zijbalk nav button:hover { background: var(--doek); color: var(--inkt); }
.zijbalk nav button.aan {
  /* Grijs vlak met groene tekst, zoals in het voorbeeld — niet een groen vlak.
     De kleur zit in de letters en het balkje, en dat leest rustiger in een
     lijst waar je de hele dag langs kijkt. */
  background: var(--lijn-fijn); color: var(--blauw); font-weight: 650;
}
.zijbalk nav button.aan::before { opacity: 1; }
@media (max-width: 860px) {
  .zijbalk nav button { width: auto; grid-template-columns: 20px auto; padding: 8px 12px; }
  .zijbalk nav button::before { display: none; }
}

.nav-ico {
  width: 20px; height: 20px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.zijbalk .voet { border-top: 1px solid var(--lijn); padding-top: 14px; }

main { min-width: 0; padding: 30px 32px 48px; display: grid; gap: 22px;
       align-content: start; width: 100%; max-width: 1360px; }
@media (max-width: 700px) { main { padding: 18px 14px 32px; } }

/* ── Kaarten ────────────────────────────────────────────────────────────── */

.paneel {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond); box-shadow: var(--schaduw); overflow: hidden;
}
.paneel > .kop, .paneel > h2 { padding: 20px 24px; }
.paneel > .kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                 border-bottom: 1px solid var(--lijn-fijn); }
.kop h2 { flex: 1; min-width: 0; }
.kop .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.uitleg { margin: 0; padding: 0 24px 20px; color: var(--zacht); font-size: 14px; }
.paneel > .kop + .uitleg { padding-top: 16px; }
.leeg { padding: 44px 24px; text-align: center; color: var(--zacht); }
.keuzes { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 18px; }
/* Het cijfer bij een sneltoets: klein en grijs, want het is een hulpje en
   geen deel van de naam. */
.keuzes button .nr { color: var(--zwak); font-size: 11px; margin-right: 5px; font-weight: 600; }

/* ── Tabellen ───────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--zwak); font-weight: 650; padding: 12px 24px;
  border-bottom: 1px solid var(--lijn); white-space: nowrap;
}
td { padding: 15px 24px; border-bottom: 1px solid var(--lijn-fijn); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: #fbfcfe; }

/* ── Dialoog ────────────────────────────────────────────────────────────── */

.laag {
  position: fixed; inset: 0; background: rgba(15,23,41,.5); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.dialoog {
  width: 100%; max-width: 480px; background: var(--vlak); border-radius: 16px;
  overflow: hidden; box-shadow: 0 20px 50px -12px rgba(15,23,41,.35);
}
.dialoog.breed { max-width: 820px; }
.dkop { display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--lijn-fijn); }
.dkop h2 { margin: 0; }
.dkop button { margin-left: auto; border: 0; background: none; font-size: 22px;
               cursor: pointer; color: var(--zacht); }
.dlijf { padding: 22px; max-height: 68vh; overflow-y: auto; }
.dvoet { display: flex; gap: 10px; justify-content: flex-end;
         padding: 16px 22px; border-top: 1px solid var(--lijn-fijn); }
.dvoet .gevaar { margin-right: auto; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--inkt); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 14px; z-index: 60; box-shadow: var(--schaduw-op);
}
.toast.fout { background: var(--rood); }

/* ── Het beeld ──────────────────────────────────────────────────────────── */
/*
 * Hier blijft het donker. Je kijkt naar beelden, en een wit vlak eromheen
 * vermoeit en wast het beeld uit — precies waarom een montagepakket licht is
 * aan de randen en donker in het midden.
 */

.analyse { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .analyse { grid-template-columns: 1fr; } }

.beeld {
  background: var(--film); border: 1px solid var(--film-lijn);
  border-radius: var(--rond); overflow: hidden; box-shadow: var(--schaduw);
}
.beeld video { width: 100%; display: block; background: #000; }
.geenbeeld { padding: 60px 24px; text-align: center; color: #64748b; }

.bediening {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: #101a2c; border-top: 1px solid var(--film-lijn);
  color: #cbd5e1;
}
.bediening .tijd   { font-variant-numeric: tabular-nums; font-size: 13px; color: #94a3b8; }
.bediening .minuut { font-weight: 700; color: #fff; }
.bediening .rechts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.bediening .knop.stil { background: #1c2941; border-color: #2b3b57; color: #cbd5e1; }
.bediening .knop.stil:hover { background: #24344f; color: #fff; }
.bediening .knop.stil.aan { background: var(--blauw); border-color: var(--blauw); color: #fff; }

.tijdbalk {
  position: relative; height: 34px; background: #101a2c; cursor: pointer;
  border-top: 1px solid var(--film-lijn);
}
.tijdbalk .gespeeld { position: absolute; inset: 0 auto 0 0; background: rgba(16,185,129,.30); }
.tijdbalk .naald    { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; }
.tijdbalk .stip {
  position: absolute; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--amber); border: 1px solid #fff;
}
.tijdbalk .stip.goed  { background: #22c55e; }
.tijdbalk .stip.beter { background: #f59e0b; }

.sneltoetsen { padding: 10px 14px; font-size: 12px; color: #64748b; background: #0e1626; }

/* ── Momenten ───────────────────────────────────────────────────────────── */

.momenten { display: grid; gap: 10px; }
.moment {
  background: var(--vlak); border: 1px solid var(--lijn); border-left: 3px solid var(--zwak);
  border-radius: var(--rond-klein); padding: 12px 14px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.moment:hover { box-shadow: var(--schaduw-op); }
.moment.goed  { border-left-color: #16a34a; }
.moment.beter { border-left-color: #f59e0b; }
.moment .kop,
.moment .kop2 { display: flex; align-items: baseline; gap: 8px; }
.kop2 { display: flex; align-items: baseline; gap: 8px; }
.moment .tijd { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13px; }
.moment .soort   { color: var(--zacht); font-size: 12.5px; }
.moment .wie     { margin-left: auto; color: var(--zwak); font-size: 12px; }
.moment .notitie { margin: 6px 0 0; font-size: 13.5px; color: var(--inkt-zacht); }

/* ── Opstellingen ─────────────────────────────────────────────────────────── */

.opstelling { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .opstelling { grid-template-columns: 1fr; } }

.veldvak {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond); box-shadow: var(--schaduw); overflow: hidden;
}

/*
 * Het gras.
 *
 * Vaste verhouding, want een veld dat met het venster meerekt wordt op een
 * telefoon een postzegel en op een breed scherm een landingsbaan — en dan
 * klopt de opstelling niet meer met wat je in je hoofd hebt. De banen zijn
 * gemaaid gras: twee tinten die om en om lopen.
 */
/* Hoogte begrensd op wat er in beeld past. Een veld op ware verhouding is op
   een breed scherm zo hoog dat je moet scrollen om je spitsen te zien — en dan
   kun je de opstelling niet meer in één blik overzien, wat het hele punt is. */
.veld-gras {
  position: relative; aspect-ratio: 68 / 105; width: 100%;
  max-height: calc(100vh - 210px); margin: 0 auto;
  background:
    repeating-linear-gradient(0deg, #3f9a53 0 9.09%, #46a55b 9.09% 18.18%);
  touch-action: none; user-select: none;
}

/* De belijning: buitenlijn, middenlijn, cirkel en twee strafschopgebieden.
   Met randen en niet met plaatjes, zodat hij op elk formaat scherp blijft. */
.lijnen { position: absolute; inset: 0; pointer-events: none; }
.lijnen::before {
  content: ''; position: absolute; inset: 3%;
  border: 2px solid rgba(255,255,255,.55);
}
.lijnen::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.55); border-radius: 50%;
  box-shadow: 0 0 0 0 transparent;
}
.veldvak::before {
  content: ''; position: absolute; pointer-events: none;
}

.pion {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 3px; cursor: grab;
  text-align: center; width: 74px;
}
.pion.pakt { cursor: grabbing; z-index: 5; }
.pion .shirt {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--inkt); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.18);
}
.pion .pnaam {
  font-size: 11.5px; font-weight: 600; color: #fff; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 74px;
}
.pion.leegplek .shirt {
  background: rgba(255,255,255,.22); color: #fff; box-shadow: none;
  border: 2px dashed rgba(255,255,255,.65); font-weight: 500;
}
.pion.leegplek .pnaam { opacity: .75; font-weight: 500; }

/* ── De bank ──────────────────────────────────────────────────────────────── */

.bank { display: grid; gap: 6px; padding: 0 16px 16px; }
.bankspeler {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 11px; border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  background: var(--vlak); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bankspeler:hover { border-color: var(--blauw); background: var(--blauw-50); }
.bankspeler.aan { border-color: var(--blauw); background: var(--blauw-50); }
.bankspeler.alopgesteld { opacity: .6; }
.shirt.klein {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--blauw-50); color: var(--blauw);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.bankspeler .sub { margin-top: 1px; }

/* ── Trainingen en aanwezigheid ─────────────────────────────────────────── */

.tabbalk {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--vlak2); padding: 4px; border-radius: var(--rond-klein);
  width: fit-content;
}
.tabbalk button {
  border: 0; background: none; cursor: pointer;
  padding: 7px 16px; border-radius: 7px;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--zacht);
}
.tabbalk button:hover { color: var(--inkt); }
.tabbalk button.aan { background: var(--vlak); color: var(--blauw); box-shadow: var(--schaduw); }

tr.klikbaar { cursor: pointer; }
tr.klikbaar:hover td { background: var(--lijn-fijn); }

/* Eén regel per speler. Op een telefoon langs de kant vallen de knoppen onder
   de naam in plaats van ernaast — anders worden ze zo smal dat je ernaast tikt. */
.presrij {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--lijn-fijn);
}
.presrij:last-child { border-bottom: 0; }

.presnaam { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; flex-wrap: wrap; }
.presnaam strong { font-weight: 600; }
.presnaam .sub { width: 100%; margin-left: 38px; }

.rugnr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  background: var(--vlak2); border-radius: 8px;
  font-size: 12.5px; font-weight: 650; color: var(--zacht);
  font-variant-numeric: tabular-nums;
}

.standen { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.presrij .standen button { width: 78px; text-align: center; padding-left: 4px; padding-right: 4px; }
.standen button {
  border: 1px solid var(--lijn); background: var(--vlak); cursor: pointer;
  padding: 6px 11px; border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--zacht);
  white-space: nowrap;
}
.standen button:hover { border-color: var(--zwak); color: var(--inkt); }
.standen button.aan       { border-color: transparent; }
.standen button.aan.goed  { background: var(--groen-bg); color: var(--groen); }
.standen button.aan.beter { background: var(--amber-bg); color: var(--amber); }
.standen button.aan.fout  { background: var(--rood-bg);  color: var(--rood); }

.opkomst { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.opkomst-baan { flex: 1; height: 6px; background: var(--lijn); border-radius: 3px; overflow: hidden; }
.opkomst-balk { height: 100%; border-radius: 3px; min-width: 2px; background: var(--zwak); }
.opkomst-balk.goed  { background: var(--groen); }
.opkomst-balk.beter { background: var(--amber); }
.opkomst-balk.fout  { background: var(--rood); }
.opkomst span { font-size: 12.5px; color: var(--zacht); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .presrij { flex-wrap: wrap; }
  .presnaam { flex: 1 0 100%; }
  .standen { margin-left: 0; flex: 1; }
  .presrij .standen button { width: auto; flex: 1; }
}

.notitie {
  border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  padding: 10px 12px; margin-bottom: 8px; background: var(--vlak);
}
.notitie p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.notkop { display: flex; align-items: center; gap: 8px; }
.notkop .sub { display: inline; }
.wegknop {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--zwak); font-size: 18px; line-height: 1; padding: 0 4px;
}
.wegknop:hover { color: var(--rood); }

/* Een lichte cel in een tabel. Niet .sub gebruiken: die staat op display:block,
   en een <td> die geen tabelcel meer is valt uit de rij. */
td.zwakcel { color: var(--zwak); }

/* De datumvelden in een kopbalk zijn geen formulier maar een filter: die horen
   naast elkaar en zo breed als een datum, niet zo breed als het paneel. */
.kop .rechts input[type="date"] {
  width: 148px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak);
  font-family: inherit; color: var(--inkt);
}
.kop .rechts input[type="date"]:focus { outline: 2px solid var(--blauw-100); border-color: var(--blauw); }
.standen.breed button { flex: 1; text-align: center; padding: 8px 10px; }

.notknop {
  border: 1px solid var(--lijn); background: var(--vlak); cursor: pointer;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  color: var(--zacht); font-size: 14px; line-height: 1;
}
.notknop:hover { border-color: var(--blauw); color: var(--blauw); }
.notknop svg {
  width: 15px; height: 15px; display: block; margin: 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.merkje { white-space: nowrap; }
.scheiding { border: 0; border-top: 1px solid var(--lijn-fijn); margin: 18px 0; }

/* ── Uitlijnen binnen een paneel ────────────────────────────────────────────
   Een paneel geeft zijn kop en zijn uitleg 24px lucht aan de zijkant, maar de
   velden en de knoprijen hingen daar los van: die begonnen tegen de rand van
   het paneel en dus 24 pixels links van het kopje erboven. Op één paneel valt
   dat nauwelijks op, op drie onder elkaar zie je een zaagtand. Dit zet alles
   wat rechtstreeks in een paneel hangt op dezelfde marge. */
.paneel > .veld,
.paneel > .rij,
.paneel > .rij3,
.paneel > .knoprij,
.paneel > .vlakin,
.paneel > .meldvak { padding-left: 24px; padding-right: 24px; }

.paneel > hr { margin-left: 24px; margin-right: 24px; }

.knoprij { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 20px; }

/* Een leeg meldingsvak mag geen ruimte innemen: anders staat er onder elk
   paneel een gat te wachten op een melding die er misschien nooit komt. */
.meldvak:empty { display: none; }
.meldvak > :last-child { margin-bottom: 20px; }

.vlakin { padding-bottom: 10px; }

/* Het laatste veld boven een knoprij hoeft geen dubbele marge. */
.paneel > .veld:last-child,
.paneel > .rij:last-child { padding-bottom: 20px; }

/* De eigen club oplichten in de stand: zonder dat moet je hem elke keer zoeken. */
tbody tr.wijzelf td { background: var(--blauw-50); }
tbody tr.wijzelf td strong { color: var(--blauw-700); }
tbody tr.wijzelf:hover td { background: var(--blauw-50); }

/* Een keuzemenu in een kopbalk is een filter en geen formulierveld. Zonder
   `width: auto` erft hij de 100% van een gewoon veld, vult hij de hele regel en
   valt de knop ernaast op de volgende regel. */
.kop .rechts select {
  width: auto; max-width: 260px;
  padding: 7px 10px; font-size: 13px; border: 1px solid var(--lijn);
  border-radius: 8px; background: var(--vlak); font-family: inherit; color: var(--inkt);
}

/* Een tabel in een dialoog: krapper dan in een paneel, want er is minder plek,
   en breder mag hij schuiven in plaats van de dialoog uit te rekken. */
.dlijf table { font-size: 13.5px; }
.dlijf th { padding: 10px 12px; }
.dlijf td { padding: 11px 12px; }
.schuif { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.nowrap { white-space: nowrap; }

/* Een vinkje met tekst ernaast. Het hele blok is klikbaar — een vinkje van
   13 pixels raak je op een tablet met je duim niet. */
.schakel {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  background: var(--vlak); font-weight: 400;
}
.schakel:hover { border-color: var(--zwak); }
.schakel input { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--blauw); }
.schakel strong { display: block; font-weight: 600; font-size: 14px; color: var(--inkt); }
.schakel .sub { margin-top: 2px; }
.schakel:has(input:checked) { border-color: var(--blauw-100); background: var(--blauw-50); }

/* ── Het beginscherm ────────────────────────────────────────────────────── */

/* De eerstvolgende bijeenkomst krijgt een groene rand: het is het enige op dit
   scherm waar je nú iets mee moet. */
.paneel.nu { border-color: var(--blauw-100); }
.paneel.nu .wanneer { color: var(--blauw); }

.tellers { display: flex; gap: 10px; padding: 0 24px 22px; }
.teller {
  flex: 1; border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  padding: 14px 16px; background: var(--vlak);
}
.teller b {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--zwak);
}
.teller span { font-size: 12.5px; color: var(--zacht); }
.teller.goed b { color: var(--groen); }
.teller.fout b { color: var(--rood); }

@media (max-width: 620px) {
  .tellers { flex-direction: column; gap: 8px; }
  .teller { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .teller b { font-size: 20px; }
}

/* ── De wedstrijddag ────────────────────────────────────────────────────── */

.wdagrij {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--lijn-fijn);
}
.wdagrij:last-child { border-bottom: 0; }
.wdagnaam { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.wdagnaam strong { font-weight: 600; display: block; }
.wdagnaam .sub { display: block; }

.wdagrij .standen { margin-left: auto; }
.wdagrij .standen button { width: 62px; text-align: center; padding-left: 4px; padding-right: 4px; }

/* De cijfers staan altijd op dezelfde plek, ook bij wie niet speelde: anders
   springt de hele lijst opzij zodra je iemand op "niet" zet. */
.cijfers { display: flex; align-items: center; gap: 6px; width: 264px; justify-content: flex-end; }
.cijfers[hidden] { display: flex; visibility: hidden; }

.cijfer { position: relative; display: block; }
.cijfer input {
  width: 58px; padding: 6px 20px 6px 8px; font-size: 13px; text-align: right;
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak);
  font-family: inherit; font-variant-numeric: tabular-nums; color: var(--inkt);
  -moz-appearance: textfield;
}
.cijfer input::-webkit-outer-spin-button,
.cijfer input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cijfer span {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--zwak); pointer-events: none;
}

.kaartknop {
  width: 17px; height: 24px; border-radius: 3px; cursor: pointer; padding: 0;
  border: 1px solid var(--lijn); background: var(--vlak2);
  font-size: 10px; font-weight: 700; color: var(--vlak); line-height: 1;
}
.kaartknop.geel.aan { background: #eab308; border-color: #ca8a04; color: #422006; }
.kaartknop.rood.aan { background: #dc2626; border-color: #b91c1c; }
.kaartknop:hover { border-color: var(--zwak); }

@media (max-width: 900px) {
  .wdagrij { flex-wrap: wrap; }
  .wdagnaam { flex: 1 0 100%; }
  .wdagrij .standen { margin-left: 0; }
  .cijfers { width: auto; flex: 1; }
}

/* Een kaartje in een tabel: klein rechthoekje, zoals op het wedstrijdformulier. */
.kaartje {
  display: inline-block; width: 12px; height: 16px; border-radius: 2px;
  vertical-align: -3px; margin-left: 3px; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 16px; color: #422006;
}
.kaartje.geel { background: #eab308; }
.kaartje.rood { background: #dc2626; }
.uitleg code {
  background: var(--vlak2); border-radius: 5px; padding: 1px 6px;
  font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--inkt-zacht); word-break: break-all;
}
.melding .sub { display: block; }

/* ── Het tactisch bord ─────────────────────────────────────────────────────
 *
 * Hetzelfde gras als bij de opstellingen, met een laag erover voor de lijnen en
 * de zones. De stukken zijn gewone elementen op percentages, want die moeten
 * met de vinger te pakken zijn; de lijnen zijn SVG in pixels, omdat een pijlpunt
 * op een uitgerekt vlak een vlek wordt.
 */
.bordwerk { display: grid; gap: 10px; margin-bottom: 14px; }
.gereed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gereed .scheiding { width: 1px; height: 22px; background: var(--lijn); margin: 0 4px; }
.gereed .knop.klein { padding: 6px 10px; }
.gereed .knop.aan {
  background: var(--blauw); border-color: var(--blauw); color: #fff;
}

.bordlaag { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bordlaag .zone { fill: rgba(255, 214, 0, .22); stroke: rgba(255, 214, 0, .8); stroke-width: 1.5; }
.bordlaag .lijn { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round;
                  stroke-linecap: round; }
.bordlaag .lijn.pas     { stroke-dasharray: 9 6; }
.bordlaag .lijn.schot   { stroke-width: 5.5; }
.bordlaag .lijn.schotin { stroke: #3f9a53; stroke-width: 1.6; }
.bordlaag .lijn.bezig   { opacity: .75; }

/* Een stuk op het bord. */
.stuk {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 2px;
  cursor: grab; text-align: center; touch-action: none;
}
.stuk.pakt { cursor: grabbing; z-index: 6; }
.stuk .knoop {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.2);
}
.stuk .snaam {
  font-size: 11px; font-weight: 600; color: #fff; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stuk.eigen  .knoop { background: #fff;     color: var(--inkt); }
.stuk.tegen  .knoop { background: #d43b3b;  color: #fff; }
.stuk.keeper .knoop { background: #ffd400;  color: #3a2d00; }

/* De attributen uit de kofferbak. */
.stuk.bal .knoop {
  width: 17px; height: 17px; background: #fff; border: 2px solid #1c1c1c;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.stuk.pion .knoop {
  width: 0; height: 0; background: none; box-shadow: none;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 18px solid #ff7a18;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.stuk.doel .knoop {
  width: 46px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.25);
  border: 2.5px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.stuk.hoepel .knoop {
  width: 30px; height: 30px; background: none; border: 4px solid #24a0ff;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.stuk.ladder .knoop {
  width: 26px; height: 54px; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,.3);
  border: 2px solid #fff;
  background: repeating-linear-gradient(0deg, transparent 0 9px, #fff 9px 11px);
}
.stuk.tekst .knoop {
  width: auto; height: auto; border-radius: var(--rond-klein);
  padding: 5px 9px; background: rgba(20,20,20,.78); color: #fff;
  font-size: 12.5px; font-weight: 600; max-width: 160px; white-space: normal;
  line-height: 1.25;
}

/* Gum aan: dan is duidelijk dat aanwijzen weghalen betekent. */
.veld-gras.gummen .stuk { cursor: crosshair; }
.veld-gras.gummen .stuk:hover .knoop { outline: 2px solid #ff4d4d; outline-offset: 2px; }
.veld-gras.tekenen .stuk { pointer-events: none; }

.bordklad { min-height: 120px; }

/* ── De voorbereiding van een training ─────────────────────────────────────
 *
 * Een rij regels met een nummer, wat je doet, en hoe lang. Zo dicht bij het
 * papieren formulier als het kan: je leest van boven naar beneden mee terwijl
 * je op het veld staat.
 */
.onderdeel {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  background: var(--vlak); margin-bottom: 6px;
}
.onderdeel .dnr {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blauw-50); color: var(--blauw); font-size: 12.5px; font-weight: 700;
}
.onderdeel .dwat { min-width: 0; }
.onderdeel .dwat strong { font-size: 14.5px; }
.onderdeel .dwat .sub { white-space: normal; }
.onderdeel .dmin {
  font-size: 13px; font-weight: 700; color: var(--zacht);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.onderdeel .dknoppen { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.merkje.klein { font-size: 11px; padding: 1px 6px; margin-left: 6px; }
.sub.fout { color: var(--rood); font-weight: 700; }

@media (max-width: 700px) {
  .onderdeel { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .onderdeel .dknoppen { grid-column: 2 / -1; justify-content: flex-start; }
}