/* ============================================================
   Mijn Wedstrijden — design system (Claude Design, example/)
   Zelf-gehost: Anton (display) + Barlow (body) in fonts/design/.
   Prototype-pagina's laden ALLEEN dit bestand (geen style.css/refresh.css).
   ============================================================ */
@font-face{
  font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/design/anton-400.woff2') format('woff2');
}
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/design/barlow-400.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/design/barlow-500.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/design/barlow-600.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/design/barlow-700.woff2') format('woff2'); }
@font-face{ font-family:'Barlow'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/design/barlow-800.woff2') format('woff2'); }

/* ============================================================
   Mijn Wedstrijden — stylesheet
   Header (two-tier + dropdowns + context bar), nieuwspagina, footer
   Brand: grasgroen + rood + wit
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --green:        #0c5a26;
  --green-dark:   #08411b;
  --green-tint:   #eef5ef;
  --green-line:   #dbe6dd;
  --red:          #e02a2a;
  --red-dark:     #c11f1f;
  --ink:          #12271a;
  --text:         #253528;
  --muted:        #6a7a6e;
  --faint:        #9aa89d;
  --line:         #e0e4db;
  --bg:           #f4f6f1;
  --card:         #ffffff;
  --shadow-sm:    0 2px 8px -4px rgba(12,45,20,.25);
  --shadow-md:    0 18px 40px -26px rgba(12,45,20,.45);
  --shadow-lg:    0 22px 44px -18px rgba(12,45,20,.45);
  --radius:       14px;
  --radius-sm:    10px;
  --maxw:         1200px;
  --sans:         'Barlow', system-ui, sans-serif;
  --display:      'Anton', 'Barlow', sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--red); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); }
button { font-family: inherit; }
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* image placeholder (drop echte foto's hier in) */
.placeholder {
  background: repeating-linear-gradient(45deg, #e9ece4, #e9ece4 10px, #e3e7dd 10px, #e3e7dd 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: lowercase;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

/* accent top line */
.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right, var(--green) 0 50%, var(--red) 50% 100%);
}

/* --- utility strip --- */
.utility-bar { background: var(--green); }
.utility-bar .container {
  display: flex;
  align-items: center;
  min-height: 40px;
}
.utility-tagline {
  font-size: 13px;
  letter-spacing: .02em;
  color: #bcd7c1;
}
.utility-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.util-link {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #e6f2e8;
}
.util-link:hover { color: #fff; }
.util-sep { width: 1px; height: 14px; background: rgba(255,255,255,.25); }
/* "super" special: small dropdown living in the utility strip, before Contact */
.util-super { align-self: stretch; }
.util-super > .util-link { display: inline-flex; align-items: center; gap: 3px; height: 100%; cursor: pointer; }
.util-super > .util-link .caret { width: 11px; height: 11px; }
.util-super .dropdown { left: auto; right: -14px; text-align: left; }
.util-cta {
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 5px 14px;
}
.util-cta:hover { color: #fff; background: var(--red-dark); }

/* --- main bar --- */
.main-bar .container {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 92px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 60px; width: auto; }
.brand-name {
  font-family: var(--display);
  color: var(--green);
  font-size: 28px;
  line-height: .8;
  letter-spacing: .01em;
}

/* --- primary nav --- */
.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.nav-link {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
  color: #33473a;
  padding: 6px 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
}
.nav-link:hover { color: var(--green); }
.nav-link.is-active {
  color: var(--green);
  font-weight: 700;
  border-bottom-color: var(--red);
}
.nav-link .caret {
  transition: transform .18s ease;
  stroke: currentColor;
}

/* --- dropdown --- */
.nav-item { position: relative; display: inline-flex; }
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 250px;
  background: var(--card);
  border: 1px solid #e6e9e1;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.dropdown.has-groups {
  min-width: 380px;
  gap: 8px;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item:hover .nav-link .caret,
.nav-item:focus-within .nav-link .caret { transform: rotate(180deg); }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.dropdown-item::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.dropdown-item:hover { background: #f1f4ee; color: var(--ink); }
.dropdown-sep { height: 1px; background: #ecefe8; margin: 6px 10px; }
.dropdown-item.is-secondary { color: var(--muted); }
.dropdown-item.is-secondary::before { background: #c3ccbe; }
.dropdown-label {
  display: block;
  padding: 8px 13px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dropdown-group { position: relative; }
.dropdown-group > .dropdown-item {
  padding-right: 30px;
}
.dropdown-group > .dropdown-item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto;
  opacity: .55;
}
.dropdown-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  min-width: 235px;
  background: var(--card);
  border: 1px solid #e6e9e1;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.dropdown-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 10px;
}
.dropdown-group:hover .dropdown-submenu,
.dropdown-group:focus-within .dropdown-submenu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.dropdown.has-groups .dropdown-group {
  border: 1px solid #ecefe8;
  border-radius: 10px;
  background: #fbfcfa;
  padding: 6px;
}
.dropdown.has-groups .dropdown-group > .dropdown-item {
  background: #f1f4ee;
  color: var(--green);
  font-weight: 800;
}
.dropdown.has-groups .dropdown-group > .dropdown-item::after {
  display: none;
}
.dropdown.has-groups .dropdown-submenu {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  border: 0;
  box-shadow: none;
  padding: 6px 0 0;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.dropdown.has-groups .dropdown-submenu::before {
  display: none;
}
.dropdown.has-groups .dropdown-submenu .dropdown-item {
  font-size: 13px;
  padding: 8px 9px;
}
.dropdown.has-groups .dropdown-submenu .dropdown-item::before {
  width: 5px;
  height: 5px;
  background: #c3ccbe;
}
.nav-gear-svg { flex: none; }

/* --- tools (search + account) --- */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 8px;
}
/* Het zoekveld zelf. Zoeken opende ooit als eigen balk onder het hoofdmenu
   (.header-search-row); dat is vervangen door het paneel aan het zoekicoon
   (.search-pop hieronder), dus die balk en zijn animatie zijn weg. */
.header-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dde3d7;
  border-radius: 10px;
  /* rechts even veel lucht als boven en onder: met 8px stond de knop Zoek
     bijna tegen de rand van het veld terwijl links een ruime kantlijn zat */
  padding: 6px 6px 6px 14px;
  max-width: 620px;
}
.header-search-icon { stroke: var(--muted); flex: 0 0 auto; }
.header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 15px;
}
.header-search-input:focus { outline: none; }
.header-search-type {
  flex: 0 0 auto;
  height: 34px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  padding: 0 8px;
  color: var(--muted);
  font-weight: 700;
}
/* De knop staat ín het zoekveld, dus hij mag het veld niet vullen: met 40px
   hoog en 20px zijkant raakte hij de rand aan drie kanten en leek het veld om
   de knop heen gebouwd in plaats van andersom. Nu blijft er aan elke kant
   ruimte over, en op een smalle telefoon houdt de invoer er breedte aan over. */
.header-search-go { flex: 0 0 auto; height: 36px; padding: 0 14px; font-size: 13px; }
/* search as an in-menu popover, anchored to the search icon (not a detached strip) */
.nav-search { position: relative; display: inline-flex; }
.search-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; width: min(460px, 92vw); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; }
.search-pop[hidden] { display: none; }
.search-pop .header-search { max-width: none; margin: 0; }
.search-pop .header-search-results { position: static; width: auto; border: 0; box-shadow: none; padding: 0; margin-top: 8px; max-height: 60vh; }
/* Op een telefoon staat het zoekicoon niet tegen de schermrand (bel en avatar
   staan er nog rechts van), dus een paneel van 92vw dat aan dat icoon hangt
   begint ~120px links buiten beeld: het icoon, het begin van wat je typt en de
   eerste letters van elk resultaat vielen weg. Daar hangt het paneel — net als
   het belpaneel — aan het scherm; bovenkant en hoogte zet mwPlaatsSearch() in
   design_header.php, de hoogte via visualViewport zodat de lijst boven het
   toetsenbord blijft en zelf scrolt in plaats van eronder te verdwijnen. */
@media (max-width: 640px) {
  .search-pop {
    position: fixed;
    top: var(--mw-search-top, 110px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: var(--mw-search-hoogte, calc(100vh - var(--mw-search-top, 110px) - 12px));
    display: flex;
    flex-direction: column;
  }
  .search-pop .header-search { flex: 0 0 auto; padding-left: 12px; gap: 8px; }
  /* Op een telefoon deelt de knop de regel met het wisknopje ✕ en moet er van
     de zoekterm ook nog iets te lezen zijn: daar mag hij het kleinst. */
  .search-pop .header-search-go { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .search-pop .header-search-results { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
/* count pill in card headers (bv. zoekresultaten) */
.card-count { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.22); padding: 1px 9px; border-radius: 999px; vertical-align: middle; }
/* "mijn wedstrijden" dropdown = compacte 2-koloms tegels (speler-tabbladen) */
.dropdown.is-grid { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 6px; min-width: 300px; }
.dropdown.is-grid .dropdown-label { grid-column: 1 / -1; }
.dropdown.is-grid .dropdown-sep { display: none; }
.dropdown.is-grid .dropdown-item { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 13px; }
.dropdown.is-grid .dropdown-item::before { display: none; }
.dropdown.is-grid .dropdown-item:hover { border-color: var(--green-line); }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #f1f4ee;
  border: 1px solid #dde3d7;
  color: #33473a;
  cursor: pointer;
}
.icon-btn:hover { background: #e6ede1; }
.icon-btn svg { stroke: currentColor; }

.account {
  display: flex;
  align-items: center;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
/* De hele knop (avatar + naam + pijltje) is één link naar je eigen profiel; het
   menu eronder opent op hover, of op de eerste tik (script in design_header). */
.account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  cursor: pointer;
}
.account-trigger .caret { stroke: var(--muted, #6b7a6e); transition: transform .18s ease; }
.account:hover .account-trigger .caret,
.account:focus-within .account-trigger .caret,
.account.is-open .account-trigger .caret { transform: rotate(180deg); }
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.avatar-img { object-fit: cover; background: #fff; border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow-sm); }
.account-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; }
.account-name { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.team-switch { white-space: nowrap; }
.team-switch {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 12px;
  color: var(--green);
}
.team-switch::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.team-switch:hover { color: var(--red); }
.account-dropdown {
  left: auto;
  right: 0;
  min-width: 280px;
}
.account-dropdown .dropdown-item.is-current {
  background: var(--green-tint);
  color: var(--green);
  font-weight: 800;
}

/* login/aanmelden (uitgelogde staat) */
.auth-actions { display: flex; align-items: center; gap: 14px; padding-left: 8px; }
.btn-login { font-weight: 600; font-size: 15px; color: var(--green); }
.btn-signup {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: 0 6px 14px -6px rgba(224,42,42,.7);
}
.btn-signup:hover { color: #fff; background: var(--red-dark); }

/* --- context bar (welk team/profiel bekijk je) --- */
.context-bar { background: var(--green-tint); border-top: 1px solid var(--green-line); }
.context-bar .container {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  flex-wrap: wrap;
}
.context-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
}
.context-back:hover { color: var(--green); }
.context-sep { width: 1px; height: 18px; background: #cdddd0; }
.context-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7a8a7e;
}
.context-crest {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.context-team { font-weight: 700; font-size: 15px; color: var(--ink); }
/* ── de contextbalk op een telefoon ───────────────────────────────────────
   "‹ Terug | JE BEKIJKT [logo] Hercules 35+1" plus "SEIZOEN 2026-2027" is op
   390px anderhalf keer de schermbreedte, dus viel de balk uit elkaar over twee
   regels (op 320px zelfs drie) en werd de kop 75 tot 114px hoog. Wat er dan af
   moet is wat je ook zonder kunt: het woord bij het pijltje, "Je bekijkt" (het
   clublogo met de teamnaam zegt dat al) en het woord "seizoen" vóór de
   jaargang. Wat overblijft — pijltje · logo · team · jaargang — past op één
   regel, en een lange teamnaam kapt af in plaats van de balk open te breken. */
@media (max-width: 720px) {
  .context-bar .container { flex-wrap: nowrap; gap: 8px; min-height: 46px; }
  .context-back-txt,
  .context-label.is-bekijkt,
  .context-sep,
  .season-btn-woord { display: none; }
  .context-back { flex: none; }
  .context-crest { width: 22px; height: 22px; flex: none; }
  img.context-crest { width: 22px; height: 22px; }
  /* de teamnaam is het enige dat mag krimpen; de rest heeft een vaste maat */
  .context-team {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .context-actions { margin-left: 0; flex: none; gap: 8px; }
  .season-btn { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
}
.context-note { font-size: 14px; color: var(--muted); }
.context-follow {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 13px;
  color: var(--green);
  border: 1.5px solid #b6d3bd;
  border-radius: 999px;
  padding: 7px 16px;
}
.context-follow:hover { background: #e2efe4; color: var(--green); }

/* ============================================================
   PAGE / MAIN
   ============================================================ */
.page { padding: 40px 0 64px; }
/* Het Coachbord heeft geen sitekop (body.is-coachbord) en zijn harmonica moet
   het hele scherm vullen (coachbord-harmonica §1) — de gewone kop/voetruimte
   van .page zou daar zomaar 100px afsnoepen. Niet de hele pagina scrolt: alleen
   de inhoud van het openstaande harmonica-item (.cb-harmonica-inhoud) doet dat,
   dus body/.page staan vast op de schermhoogte en de voettekst blijft weg. */
body.is-coachbord { height: 100dvh; overflow: hidden; }
body.is-coachbord .site-footer { display: none; }
body.is-coachbord .page { padding: 0; height: 100dvh; overflow: hidden; display: flex; }
body.is-coachbord .page > .container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 12px; }
.page-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.page-grid > *,
.page .content,
.page .sidebar {
  min-width: 0;
  max-width: 100%;
}
.content-head { margin-bottom: 24px; }
.content-head h1 {
  font-family: var(--display);
  font-size: 40px;
  letter-spacing: .01em;
}
.content-head .content-sub { color: var(--muted); font-size: 16px; }

/* news cards */
.news-list { display: flex; flex-direction: column; gap: 20px; }
.news-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.news-card.is-featured { display: grid; grid-template-columns: 300px 1fr; }
.news-media { min-height: 200px; }
.news-card.is-featured .news-media { height: 100%; }
.news-card:not(.is-featured) .news-media { height: 170px; }
.news-body { padding: 22px 24px; }
.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.news-tag {
  color: var(--green);
  font-weight: 700;
}
.news-card h2 { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.news-card h2 a { color: var(--ink); }
.news-card h2 a:hover { color: var(--green); }
.news-excerpt { color: var(--text); margin: 0 0 16px; }
.news-foot { display: flex; align-items: center; gap: 18px; }
.reactions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
/* Likes op nieuws en reacties, en het nieuw-label (issue #56) */
.news-foot-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: none;
  font: 600 13px/1.2 inherit;
  color: var(--muted);
  cursor: pointer;
}
.like-btn:hover { border-color: var(--red); color: var(--red); }
.like-btn.is-leuk { border-color: var(--red); color: var(--red); background: #fdecec; }
.like-btn.is-busy { opacity: .6; cursor: progress; }
.like-btn.is-uit { cursor: default; }
.like-btn.is-uit:hover { border-color: var(--line); color: var(--muted); }
.like-hart { font-size: 14px; line-height: 1; }
.reactie-like { margin-left: 8px; }
.news-nieuw {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.persbericht_reactie.is-nieuw { box-shadow: inset 3px 0 0 var(--green); }

.read-more {
  margin-left: auto;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 13px;
  color: var(--green);
}
.read-more:hover { color: var(--red); }

/* comments */
.comments {
  margin-top: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 24px;
}
.comments h3 { font-size: 20px; margin-bottom: 18px; }
.comment { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.comment:first-of-type { border-top: 0; }
.comment .avatar { width: 40px; height: 40px; font-size: 14px; background: var(--green); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.comment-meta strong { color: var(--ink); font-size: 14px; }
.comment-body p { margin: 0; }

/* Reactielijst (issue #56). De AJAX-lijst gebruikte nog de tabelopmaak van vóór
   het redesign: een avatar van 75px in een tabelcel, een datum voluit en niets
   dat uitlijnde met de kaart eromheen. */
.comment-lijst { display: flex; flex-direction: column; }
.comment-av { flex: 0 0 40px; }
.comment-av img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
  display: block;
}
.comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-meta strong a { color: var(--ink); }
.comment-meta strong a:hover { color: var(--green); }
.comment-datum { white-space: nowrap; }
.comment-acties { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.comment-bewerk { font-size: 12px; font-weight: 700; color: var(--muted); }
.comment-bewerk:hover { color: var(--green); }
.comment-tekst { color: var(--text); word-break: break-word; }
.comment-tekst p:first-child { margin-top: 0; }
.comment-tekst p:last-child { margin-bottom: 0; }
.comment-tekst img { max-width: 100%; height: auto; }
.comment.is-nieuw { background: var(--green-tint); border-radius: var(--radius-sm); padding-left: 10px; padding-right: 10px; }
.comment-leeg { color: var(--muted); font-size: 14px; padding: 6px 0 2px; }
.comment-inklap {
  align-self: flex-start;
  margin-top: 10px;
  background: none;
  border: 0;
  padding: 4px 0;
  font: 700 12px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
}
.comment-inklap:hover { color: var(--green); }

/* Het aanloopje boven de ingeklapte reacties: gezichten en een halve zin, zodat
   je wílt weten wat er staat. "lees reacties (5)" alleen deed dat niet. */
.comment-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.comment-teaser:hover { border-color: var(--green); background: var(--green-tint); }
.teaser-avs { display: inline-flex; flex: 0 0 auto; }
.teaser-avs img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card);
  background: #fff;
  margin-left: -10px;
}
.teaser-avs img:first-child { margin-left: 0; }
.teaser-txt { font-size: 14px; color: var(--muted); min-width: 0; }
.teaser-txt strong { color: var(--ink); }
.teaser-cite { display: block; color: var(--text); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teaser-knop {
  margin-left: auto;
  flex: 0 0 auto;
  font: 800 11px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--green);
  white-space: nowrap;
}
.reactions.is-open { color: var(--green); }
.like-fout { font-size: 12px; color: var(--red); margin-left: 8px; }
@media (max-width: 560px) {
  .comment-teaser { align-items: flex-start; }
  .teaser-cite { white-space: normal; }
  .teaser-knop { align-self: center; }
}
.comment-form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.comment-form textarea {
  font-family: var(--sans);
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  resize: vertical;
  min-height: 84px;
  color: var(--text);
}
.comment-form textarea:focus { outline: none; border-color: var(--green); }
.btn-primary {
  align-self: flex-start;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  color: #fff;
  background: var(--green);
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  color: var(--green);
  background: #fff;
  border: 1.5px solid #b6d3bd;
  border-radius: 999px;
  padding: 10px 20px;
}
.btn-secondary:hover { background: var(--green-tint); color: var(--green); }

/* ---------- public entry pages ---------- */
.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.welcome-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 24px;
}
.welcome-copy {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 34px;
}
.welcome-copy h1,
.auth-copy h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 58px);
  line-height: .95;
  letter-spacing: .01em;
  max-width: 760px;
}
.lead,
.auth-copy p,
.action-panel p {
  color: var(--muted);
  font-size: 17px;
  max-width: 680px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.welcome-scoreboard {
  background: var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.18);
}
.scoreboard-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  padding: 14px 16px;
  color: #d8eadb;
}
.scoreboard-row strong {
  font-family: var(--display);
  color: #fff;
  font-size: 23px;
  line-height: 1;
}
.scoreboard-row.is-live { background: #fff; color: var(--muted); }
.scoreboard-row.is-live strong { color: var(--green); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.feature-card,
.search-card,
.form-card,
.auth-card,
.alert-card,
.success-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.feature-card { padding: 22px; }
.feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  margin-bottom: 12px;
}
.feature-card h2 { font-size: 20px; margin-bottom: 8px; }
.feature-card p { margin: 0; color: var(--muted); }
.action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: var(--green-tint);
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  padding: 22px;
}
.search-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.search-card { padding: 22px; }
.search-card label,
.auth-card label,
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 700;
  color: var(--ink);
}
.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 8px;
}
.search-tips { display: flex; flex-direction: column; gap: 12px; }
.mini-metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.mini-metric strong { display: block; color: var(--ink); }
.mini-metric span { color: var(--muted); font-size: 14px; }
.auth-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 28px;
  align-items: center;
}
.auth-copy {
  background: var(--green-tint);
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  padding: 30px;
}
.auth-card,
.form-card { padding: 24px; }
.auth-card { display: flex; flex-direction: column; gap: 12px; }
.check-row {
  flex-direction: row !important;
  align-items: center;
  color: var(--muted) !important;
}
.check-row input { width: auto; }
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-weight: 700;
  font-size: 14px;
}
.form-error { margin: -6px 0 2px; color: var(--red); font-weight: 700; font-size: 13px; }
.alert-card,
.success-card { padding: 16px 18px; margin-bottom: 18px; }
.alert-card { border-left: 4px solid var(--red); }
.success-card { border-left: 4px solid var(--green); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.form-grid .span-2 { grid-column: 1 / -1; }

/* ---------- sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .03em;
}
.card-head h1,
.card-head h2,
.card-head h3,
.card-head p {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.1;
}
.card-head small,
.card-head .muted {
  color: rgba(255,255,255,.78);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.card-body { padding: 18px; }

/* ---------- inklapbare kaartkoppen (bewerkscherm, mobiel eerst) ---------- */
/* Elke kop is een echte <button> binnen .card-head, ≥44px hoog. Wat hij
   in-/uitklapt krijgt de klasse .wb-kaart-inhoud; de [hidden] hieronder wint
   met opzet van elke display-regel op datzelfde element. Het lichtgroene
   scorebord (.wb-board, boven "type & team" bij de wedstrijdkaart) draagt
   deze klasse sinds Task 16 bewust niet meer — dat is de basisinfo en blijft
   dus altijd zichtbaar in de kop-zone, ook als de kaart is ingeklapt. */
.wb-kaart-kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* defensief: bij 320-390px past titel+vink ruim op één
    regel (geverifieerd met Playwright, ook met een kunstmatig lange
    ondertitel), maar een langere vertaling of grotere tekstgrootte mag nooit
    horizontaal overlopen — dan valt de kop terug op twee regels. Het chevron
    zit sinds Task 16 niet meer in deze button (zie hieronder), juist om te
    voorkomen dat zo'n regelval hem meesleept. */
  gap: 10px;
  row-gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.wb-kaart-kop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.wb-kaart-titel { flex: 1 1 auto; min-width: 0; }
.wb-kaart-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  font-size: 12px;
  font-family: var(--sans);
}
/* Task 16 (livetest ronde 2, spec §14): het chevron staat op een vaste plek —
   uiterst rechts in de kop, op élke kaart dezelfde positie — en verspringt
   dus niet meer doordat de vink of (bij opstelling/statistieken) de telling
   + "Afronden"-knop er soms wel en soms niet naast staan. Dat is alleen
   betrouwbaar als het géén kind is van de kop-button (waar die andere
   elementen ook staan), maar een eigen sibling ná de button, altijd als
   laatste kind van .card-head getekend, met margin-left:auto om de rest van
   de kop links te houden. */
.wb-kaart-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: auto;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.wb-kaart-kop[aria-expanded="true"] ~ .wb-kaart-chevron { margin-top: 2px; transform: rotate(-135deg); }
.wb-kaart-inhoud[hidden] { display: none !important; }

/* standings mini table */
.standings { width: 100%; border-collapse: collapse; font-size: 14px; }
.standings th, .standings td { padding: 8px 10px; text-align: left; }
.standings thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.standings td.num, .standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
.standings tbody tr:nth-child(even) { background: #f7f9f5; }
.standings tr.is-you td { background: var(--green-tint); font-weight: 700; color: var(--ink); }
.standings .pos { color: var(--faint); width: 22px; }
.standings tr.is-leader td {
  font-weight: 800;
  color: var(--ink);
}
.standings td.kit {
  width: 38px;
  padding-left: 2px;
  padding-right: 2px;
}
/* de zijbalk is smal: daar hetzelfde tenue, een maatje kleiner */
.standings .stand-shirt,
.stand-shirt-sm {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  padding: 2px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* topscorer list */
.scorer-list { list-style: none; margin: 0; padding: 0; }
.scorer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.scorer-list li:first-child { border-top: 0; }
.scorer-rank {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #f1f4ee;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.scorer-list li:first-child .scorer-rank {
  background: var(--green);
  color: #fff;
}
.scorer-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  flex: none;
}
.scorer-name { flex: 1; font-weight: 700; color: var(--ink); line-height: 1.15; }
.scorer-name:hover { color: var(--green); }
.scorer-goals {
  min-width: 34px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--green-tint);
  font-family: var(--display);
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* next match */
.match-card .card-body { text-align: center; }
.match-when { font-size: 14px; color: var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--green-dark);
  color: #cfe6d3;
  margin-top: 20px;
}
.site-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right, var(--red) 0 50%, var(--green) 50% 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 48px 24px 36px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-lockup { display: flex; align-items: center; gap: 12px; }
.footer-lockup img { height: 52px; width: auto; }
.footer-lockup .brand-name { color: #fff; font-size: 24px; }
.footer-tagline { font-size: 14px; color: #a9c8ae; max-width: 280px; }
.footer-col h4 {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  color: #fff;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: #bcd7c1; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom .copyright { font-size: 13px; color: #a9c8ae; letter-spacing: .02em; }
.footer-bottom .footer-legal { margin-left: auto; display: flex; gap: 18px; }
.footer-bottom .footer-legal a { font-size: 13px; color: #a9c8ae; }
.footer-bottom .footer-legal a:hover { color: #fff; }

/* ---------- notification badge ---------- */
.icon-btn.has-badge { position: relative; }
.icon-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* ---------- season selector (in context bar) ---------- */
.context-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.season-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--green);
  background: #fff;
  border: 1.5px solid #b6d3bd;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.season-btn:hover { background: #e2efe4; }
.season-btn .caret { stroke: currentColor; transition: transform .18s ease; }
.nav-item:hover .season-btn .caret,
.nav-item:focus-within .season-btn .caret { transform: rotate(180deg); }
.season-dropdown { left: auto; right: 0; min-width: 180px; }
.season-dropdown .dropdown-item { text-transform: none; letter-spacing: normal; }
.season-dropdown .dropdown-item::before { display: none; }
.season-dropdown .dropdown-item.is-current { background: var(--green-tint); color: var(--green); font-weight: 700; }

/* ============================================================
   TEAM PAGE
   ============================================================ */
.team-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 22px;
}
.team-hero-top { display: flex; align-items: center; gap: 18px; padding: 24px; }
.crest-lg {
  width: 76px; height: 76px;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.team-hero-id { flex: 1; }
.team-hero-id h1 { font-family: var(--display); font-size: 34px; letter-spacing: .01em; line-height: 1; }
.team-hero-id .team-sub { color: var(--muted); font-size: 15px; margin-top: 6px; }
.hero-fav {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid #e3c961;
  border-radius: 50%;
  background: #fff7cd;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.hero-fav:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.hero-fav.is-fan {
  background: #ffe88a;
}
.hero-fav img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.hero-fav #fantxt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.user-hero .team-hero-top {
  align-items: flex-start;
}
.user-avatar-lg {
  object-fit: cover;
}
.user-hero-bio {
  margin: 10px 0 0;
  color: var(--text);
  max-width: 720px;
  line-height: 1.5;
}
.user-hero .stat-val {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.user-hero ~ #profiel {
  display: none;
}
.team-stats-row { display: flex; border-top: 1px solid var(--line); }
.stat-cell { flex: 1; padding: 16px 10px; text-align: center; border-left: 1px solid var(--line); }
.stat-cell:first-child { border-left: 0; }
.stat-val { font-family: var(--display); font-size: 24px; color: var(--ink); line-height: 1; }
.stat-sub { display: block; min-height: 13px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.15; }
.stat-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; }
.stat-cell.is-record {
  background: #f7faf5;
}
.stat-cell.is-record .stat-val {
  font-size: 30px;
  color: var(--green);
}

.team-details-card,
.team-photo-card,
.team-history-card,
.overview-next-card {
  margin-bottom: 20px;
}
.team-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.team-detail-item {
  min-width: 0;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.team-detail-item:nth-child(1),
.team-detail-item:nth-child(2) {
  border-top: 0;
}
.team-detail-item:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.team-detail-label {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.team-detail-value {
  min-height: 22px;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.team-detail-value input {
  max-width: 100%;
}
.team-detail-media {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-shirt,
.detail-logo,
.detail-avatar {
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 3px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.detail-avatar {
  object-fit: cover;
  border-radius: 50%;
}
.detail-link {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.detail-link:hover { color: var(--red); }
.team-leader-search {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed #bfd5c4;
  border-radius: 8px;
  background: #f7faf5;
}
.team-photo-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.team-photo-card img {
  width: min(100%, 620px);
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.team-history-card .data-table strong {
  font-family: var(--display);
  color: var(--green);
}
.team-history-card .card-body {
  overflow-x: auto;
}
.team-history-card .data-table {
  min-width: 560px;
}
.match-location,
.result-location {
  color: var(--muted);
  font-size: 13px;
}
.match-location::before,
.result-location::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--red);
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.profile-tabs {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.tab {
  position: relative;
  padding: 12px 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 3px solid transparent; /* hoogte reserveren; de streep zelf is ::after */
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
/* onderstreping als los element zodat hij vanuit het midden kan ingroeien */
.tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px; /* over de rand van .tabs heen */
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.tab:hover,
.tab:focus-visible { color: var(--green); background: var(--green-tint); outline: none; }
.tab:hover::after,
.tab:focus-visible::after { transform: scaleX(1); }
.tab.is-active { color: var(--green); }
.tab.is-active::after { left: 0; right: 0; background: var(--red); transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .tab, .tab::after { transition: none; }
}
.club-logo-lg {
  background: #fff;
  object-fit: contain;
  padding: 8px;
}
.club-shirt-lg {
  width: 78px;
  height: 78px;
  object-fit: contain;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.club-photo {
  display: block;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 320px;
}
.club-details-card,
.club-teams-card,
.club-summary-card {
  margin-bottom: 20px;
}
.club-table-sub,
.club-table-team small,
.club-table-goals small,
.club-table-competition {
  display: block;
  color: var(--muted);
}
.club-record {
  color: var(--green);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
}
.club-team-table-wrap {
  overflow-x: auto;
}
.club-team-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.club-team-table th:nth-child(1) { width: 28%; }
.club-team-table th:nth-child(2) { width: 22%; }
.club-team-table th:nth-child(3) { width: 8%; }
.club-team-table th:nth-child(4) { width: 10%; }
.club-team-table th:nth-child(5) { width: 9%; }
.club-team-table th:nth-child(6) { width: 9%; }
.club-team-table th:nth-child(7) { width: 14%; }
.club-team-table th,
.club-team-table td {
  padding-left: 9px;
  padding-right: 9px;
}
.club-table-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
}
.club-table-team span {
  min-width: 0;
}
.club-table-team strong {
  display: block;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-table-team:hover strong {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.club-table-team small,
.club-table-sub {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.club-table-competition-cell {
  min-width: 0;
}
.club-table-competition {
  display: -webkit-box;
  max-height: 34px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.club-table-record {
  color: var(--green);
  font-family: var(--display);
  font-size: 18px;
}
.club-table-goals {
  color: var(--green);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
}
.club-table-goals small {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
}
.club-table-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  white-space: normal;
  text-align: stretch;
}
.club-table-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-left: 0;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}
.club-table-actions a:hover {
  border-color: var(--green);
  background: var(--green-tint);
}
.club-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.club-team-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.club-team-card.is-current {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint), var(--shadow-sm);
}
.club-team-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 12px;
  color: inherit;
}
.club-team-head:hover .club-team-title {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.club-team-shirt {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.club-team-id {
  min-width: 0;
  flex: 1;
}
.club-team-title,
.club-team-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-team-title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}
.club-team-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}
.club-team-badge {
  flex: none;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.club-team-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fbfcf8;
}
.club-team-stats div {
  min-width: 0;
  padding: 11px 8px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.club-team-stats div:nth-child(3n+1) {
  border-left: 0;
}
.club-team-stats div:nth-child(n+4) {
  border-top: 1px solid var(--line);
}
.club-team-stats strong,
.club-summary-list strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
}
.club-team-stats .is-record strong,
.club-team-stats .is-goals strong {
  color: var(--green);
}
.club-team-stats span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.club-team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 14px;
}
.club-team-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}
.club-team-actions a:hover {
  border-color: var(--green);
  background: var(--green-tint);
}
.club-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.club-summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.club-summary-list li:first-child {
  border-top: 0;
}
.club-summary-list span {
  color: var(--muted);
  font-size: 13px;
}
.club-best-team {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.club-best-team span {
  min-width: 0;
}
.club-best-team strong,
.club-best-team small {
  display: block;
}
.club-best-team strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-best-team small {
  margin-top: 4px;
  color: var(--muted);
}

.card + .card { margin-top: 20px; }
/* Task 16: dezelfde tussenruimte, ook waar iets anders dan een .card de
   sibling-keten breekt — verborgen velden of een <script> tussen twee kaarten
   in een formulier (.wb-kaart-gap, in plaats van een losse inline style per
   kaart), of kaarten die ná het sluiten van een <form> komen, zoals
   "Wedstrijdverloop" en "AI-verslag" in het bewerkscherm van een wedstrijd. */
.wb-kaart-gap { margin-top: 20px; }
#wb-form ~ .card { margin-top: 20px; }

/* De wedstrijdkaart (.result-row en alles erin) staat als één blok onderaan
   dit bestand: zoek op "DE WEDSTRIJDKAART".
   Hier stond de oude, verspreide opmaak. */

/* squad */
.squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.player { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.player .num {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.player .pname { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.1; }
.player .ppos { font-size: 12px; color: var(--muted); }
.selectie-card .card-body {
  overflow-x: auto;
}
.selectie-table {
  min-width: 860px;
}
.selectie-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.selectie-country {
  white-space: nowrap;
}
.selectie-country img,
.staff-player .ppos img {
  width: 22px;
  height: auto;
  margin-right: 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.staff-player {
  color: inherit;
}
.goal-badge {
  min-width: 44px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}
.goal-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff0b9;
  color: #7a5b00;
  font-family: var(--display);
  font-size: 16px;
  animation: goalPlusPulse 1.8s ease-in-out 2;
}
/* teamkolom in de statistiekenlijsten: tenue + naam op één regel, zodat je
   ziet vóór welk team een speler die doelpunten maakte */
.team-name-cell {
  color: var(--muted);
  font-weight: 700;
}
/* De flexbox zit op een <span> ín de cel, niet op de <td> zelf: een td met
   display:flex valt uit het tabelraster en dan lopen de kolommen niet meer
   door. */
.team-met-shirt,
.team-name-sub { display: flex; align-items: center; gap: 7px; min-width: 0; }
.team-met-shirt .stand-shirt,
.team-name-sub .stand-shirt {
  width: 26px; height: 26px; max-width: 26px; max-height: 26px;
  padding: 1px; border-radius: 6px; flex: none;
}
.stats-empty {
  margin: 6px 8px 14px;
}
@keyframes goalPlusPulse {
  0%, 100% { transform: scale(1); box-shadow: none; }
  45% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 224, 102, .35); }
}

/* laatste updates (news, secundair) */
.update-list { display: flex; flex-direction: column; }
.update-item { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-top: 1px solid var(--line); }
.update-item:first-child { border-top: 0; }
.update-date { width: 54px; font-size: 13px; color: var(--muted); flex: none; text-transform: uppercase; letter-spacing: .03em; }
.update-title { flex: 1; font-weight: 600; color: var(--ink); }
.update-item:hover .update-title { color: var(--green); }
.update-react { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); flex: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .page-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .welcome-hero,
  .search-landing,
  .auth-panel { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .main-bar .container { flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 14px; gap: 16px; }
  .main-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; gap: 22px; padding-bottom: 4px; }
  .nav-tools { margin-left: auto; }
  .utility-tagline { display: none; }
  /* de strip mag nooit de hele pagina laten scrollen: links links uitlijnen,
     compacter, en desnoods over twee regels (issue #39, mobiel-audit) */
  .utility-bar .container { flex-wrap: wrap; }
  .utility-links { margin-left: 0; flex-wrap: wrap; gap: 12px; row-gap: 2px; }
  .util-link { font-size: 12px; letter-spacing: .03em; }
}
@media (max-width: 860px) {
  .news-card.is-featured { grid-template-columns: 1fr; }
  .news-card.is-featured .news-media { height: 190px; }
  .content-head h1 { font-size: 32px; }
  .team-hero-top { flex-wrap: wrap; }
  .team-hero-cta { width: 100%; text-align: center; }
  .team-hero-id h1 { font-size: 28px; }
  .team-stats-row { flex-wrap: wrap; }
  .stat-cell { flex: 1 0 33.33%; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .account-meta { display: none; }
  .account-trigger .caret { display: none; }
  .brand-name { font-size: 24px; }
  .welcome-copy,
  .auth-copy,
  .auth-card,
  .form-card,
  .search-card { padding: 18px; }
  .action-panel { align-items: flex-start; flex-direction: column; }
  .search-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  table.standard_table,
  table.list {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.standard_table th,
  table.standard_table td,
  table.list th,
  table.list td {
    white-space: nowrap;
  }
  table.standard_table td img,
  table.list td img {
    max-width: none;
  }
}

/* ============================================================
   ADAPTER — legacy pagina-inhoud binnen de nieuwe shell
   (standard_table, buttons, koppen) totdat elke pagina is omgebouwd
   ============================================================ */
.page h2, .page h3 { font-family: var(--display); letter-spacing: .01em; color: var(--ink); font-weight: 400; }
.page h2 { font-size: 24px; margin: 18px 0 12px; }
.page h3 { font-size: 18px; margin: 14px 0 10px; }
table.standard_table,
table.list {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 20px;
}
table.standard_table th, table.standard_table td,
table.list th, table.list td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.standard_table thead th, table.standard_table th,
table.list thead th, table.list th, table.list tr.top td {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: #f7f9f5;
}
table.standard_table .title_header { background: var(--green); }
table.standard_table .title_header h3 { color: #fff; font-size: 15px; margin: 0; padding: 4px 0; }
table.standard_table tbody tr:hover, table.list tbody tr:hover { background: var(--green-tint); }
input[type=submit], button.button, .button, .general_button {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 13px; color: #fff; background: var(--green); border: 0; border-radius: 999px;
  padding: 9px 18px; cursor: pointer; text-decoration: none; display: inline-block;
}
input[type=submit]:hover, button.button:hover, .button:hover, .general_button:hover { background: var(--green-dark); color:#fff; }
/* display:inline-block hierboven wint van de browserregel [hidden]{display:none},
   waardoor el.hidden=true een knop gewoon zichtbaar liet. */
input[type=submit][hidden], button.button[hidden], .button[hidden], .general_button[hidden] { display: none; }
input[type=submit]:disabled, button.button:disabled, .button:disabled, .general_button:disabled { opacity: .55; cursor: default; }
input[type=submit]:disabled:hover, button.button:disabled:hover, .button:disabled:hover, .general_button:disabled:hover { background: var(--green); }
input[type=text], input[type=password], input[type=email], select, textarea {
  font-family: var(--sans); font-size: 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text); background: #fff;
  max-width: 100%; box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
textarea.invite { width: 100%; min-height: 220px; }
.info-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 20px; margin-bottom: 20px;
}
/* pagina-slicers in nieuwe stijl */
.page_slicer { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.page_slicer .slice {
  padding: 7px 14px; border: 1.5px solid #b6d3bd; border-radius: 999px; background: #fff;
  color: var(--green); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.page_slicer .slice:hover { background: var(--green-tint); color: var(--green); }
.page_slicer .slice.actief { background: var(--green); border-color: var(--green); color: #fff; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th,
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.data-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.data-table tbody tr:nth-child(even) { background: #f7f9f5; }
.data-table tr:hover td { background: var(--green-tint); }
.data-table tr.is-you td { background: var(--green-tint); }
.data-table .primary { font-weight: 800; color: var(--ink); }
.data-table .pos { width: 44px; color: var(--faint); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rownum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eef0ea;
  color: var(--muted);
  font-weight: 800;
}
.section-subhead {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--muted);
  background: #fff !important;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pill.goals { background: var(--green-tint); color: var(--green); }
.pill.yellow { background: #fdf3d3; color: #a67c00; }
.pill.red { background: #fbe0e0; color: var(--red-dark); }
.pill.muted { background: #eef0ea; color: var(--muted); }
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 20px 18px;
}
.stat-tile .tile-val {
  font-family: var(--display);
  font-size: 30px;
  color: var(--green);
  line-height: 1;
}
.stat-tile .tile-lbl {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

@media (max-width: 720px) {
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-team-grid { grid-template-columns: 1fr; }
  .club-team-head { align-items: flex-start; }
  .club-team-badge { margin-top: 4px; }
  .team-detail-grid { grid-template-columns: 1fr; }
  .team-detail-item,
  .team-detail-item:nth-child(2) { border-top: 1px solid var(--line); }
  .team-detail-item:first-child { border-top: 0; }
  .team-detail-item:nth-child(odd) { border-right: 0; }
}

/* ---------- crest-afbeeldingen (club-/teamlogo i.p.v. initialen) ---------- */
.crest-img { object-fit: contain; background: #fff; border: 1px solid var(--line); flex: none; }
img.context-crest { width: 26px; height: 26px; border-radius: 6px; padding: 1px; }
img.crest { width: 56px; height: 56px; border-radius: 10px; padding: 3px; }
img.crest-lg { width: 76px; height: 76px; border-radius: 14px; padding: 4px; }

/* ---------- grotere merknaam in de hoofdbalk ---------- */
.main-bar .brand-logo { height: 68px; }
.main-bar .brand-name { font-size: 38px; line-height: .85; }
/* iconen in legacy-tabellen naast elkaar, niet gestapeld */
table.standard_table td img, table.standard_table td a,
table.list td img, table.list td a { display: inline-block; vertical-align: middle; }
table.standard_table td img, table.list td img { margin: 0 3px; }

/* ---------- legacy agenda/supporter pages, aligned with the design shell ---------- */
#agenda_table1,
#agenda_table2,
#team_table {
  border-spacing: 0;
}
#agenda_table1 {
  border-left: 4px solid var(--green);
}
#agenda_table1 td {
  vertical-align: middle;
}
#agenda_table1 td:first-child {
  font-weight: 800;
  color: var(--ink);
}
#agenda_table1 td:last-child {
  text-align: right;
  color: var(--muted);
  font-weight: 600;
}
.agenda-sync-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 5px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
#agenda_table1 img,
.agenda-sync-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 5px;
  background: #fff;
  padding: 1px;
}
#agenda_table2 th,
#agenda_table2 td {
  vertical-align: middle;
}
#agenda_table2 tbody tr.link td {
  border-top: 12px solid #f5f7f2;
}
#agenda_table2 tbody tr.link td:first-child {
  border-top-left-radius: var(--radius-sm);
}
#agenda_table2 tbody tr.link td:last-child {
  border-top-right-radius: var(--radius-sm);
}
#agenda_table2 tr.link,
#team_table tr.link {
  cursor: pointer;
}
#agenda_table2 tr.link:hover td,
#team_table tr.link:hover td {
  background: var(--green-tint);
}
#agenda_table2 td:first-child {
  width: 78px;
}
.page .cal {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  width: 48px;
  min-width: 48px;
  height: 54px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #cfe0d2;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.page .cal .m,
.page .cal .d {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  text-indent: 0 !important;
  position: static !important;
  width: 100% !important;
}
.page .cal .m {
  height: 20px;
  background: var(--red) !important;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page .cal .d {
  flex: 1;
  color: var(--ink);
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
}
/* Vanaf "Nog te doen" spring je met #wed<id> naar één wedstrijd in de agenda.
   De marge houdt de rij vrij van de plakkende kop; de markering laat zien
   waar je terechtkwam. */

.agenda-shirt,
#agenda_table2 td img[src*="/club_tenue/"] {
  width: 42px;
  max-height: 42px;
  object-fit: contain;
  padding: 2px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.agenda-status-icon,
#agenda_table2 td img[src*="/stats/"] {
  width: 24px;
  height: 24px;
  object-fit: contain;
  padding: 2px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
}
.team-shirt-img,
.stand-shirt,
#stand_table img[src*="/club_tenue/"],
#statistieken_table img[src*="/club_tenue/"],
#statistieken_table_beker img[src*="/club_tenue/"] {
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
  padding: 3px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.player-avatar-sm,
#statistieken_table img.player-avatar-sm,
#statistieken_table_beker img.player-avatar-sm {
  width: 54px;
  height: 54px;
  max-width: 54px;
  object-fit: cover;
  border-radius: 50%;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
#stand_table tr.link td,
#statistieken_table tr.link td,
#statistieken_table_beker tr.link td {
  vertical-align: middle;
}
#stand_table tr.link:hover td,
#statistieken_table tr.link:hover td,
#statistieken_table_beker tr.link:hover td {
  background: var(--green-tint);
}
.user-career-table {
  margin-top: 22px;
}
.user-career-table .totalrow td {
  background: #f1f4ee;
  font-weight: 800;
}
#team_table td:first-child {
  width: 92px;
}
#team_table td:first-child img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
#team_table td img[src*="/vlaggen/"] {
  width: 22px;
  height: auto;
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid var(--line);
}

/* ============================================================================
   Iteration 2 — team tab refinements
   ============================================================================ */

/* selectie: goals get the same badge treatment used on the stats pages, sized
   down for a dense table row */
.goal-badge.sm { min-width: 34px; height: 28px; font-size: 17px; border-radius: 8px; padding: 0 9px; }

/* selectie country cell now shows the flag only */
.selectie-country { text-align: center; }
.selectie-country img { margin-right: 0; }

/* position group header — a clear green band instead of faint grey text */
.section-subhead {
  color: var(--green) !important;
  background: var(--green-tint) !important;
  border-left: 3px solid var(--green);
  border-top: 1px solid var(--green-line);
  border-bottom: 1px solid var(--green-line);
}

/* programma agenda card: centered, clickable location */
.result-location.is-link { cursor: pointer; color: var(--green); font-weight: 600; }
.result-location.is-link:hover { color: var(--red); text-decoration: underline; }
.result-location.is-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* statistieken: the "+X" correction reads as a positive bonus, no yellow blink */
.goal-plus { background: var(--green-tint); color: var(--green); animation: none; }

/* team_stats — Team facts as accomplishment cards */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 4px 2px; }
.fact-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--faint);
  border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm);
}
a.fact-card { color: inherit; }
a.fact-card:hover { border-color: var(--green-line); background: #fbfdfb; }
.fact-card.is-win { border-left-color: var(--green); }
.fact-card.is-loss { border-left-color: var(--red); }
.fact-card.is-goals { border-left-color: #e0a100; }
.fact-card.is-streak { border-left-color: var(--green); }
.fact-card.is-streak-bad { border-left-color: var(--red); }
.fact-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fact-score { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--ink); }
.fact-score em { font-style: normal; color: var(--faint); margin: 0 3px; font-size: 22px; }
.fact-card.is-win .fact-score { color: var(--green); }
.fact-card.is-loss .fact-score { color: var(--red); }
.fact-teams { font-size: 13px; font-weight: 600; color: var(--ink); }
.fact-date { font-size: 12px; color: var(--faint); }

/* team_stats — Team wedstrijden as a W/G/V balance chart */
.wgv { display: flex; flex-direction: column; gap: 9px; padding: 6px 4px; }
.wgv-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.wgv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wgv-legend b { color: var(--ink); font-weight: 800; }
.wgv-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.wgv-sw.is-win,  .wgv-seg.is-win  { background: var(--green); }
.wgv-sw.is-draw, .wgv-seg.is-draw { background: #5b6b60; }
.wgv-sw.is-loss, .wgv-seg.is-loss { background: var(--red-dark); }
.wgv-row { display: flex; align-items: center; gap: 12px; }
.wgv-label { width: 92px; flex: none; text-align: right; font-size: 13px; font-weight: 700; color: var(--muted); }
.wgv-track { flex: 1; min-width: 0; display: flex; gap: 2px; height: 26px; border-radius: 7px; overflow: hidden; background: #eef0ea; }
.wgv-seg { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-family: var(--display); font-size: 13px; }
.wgv-num { width: 34px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }
.wgv-subhead { margin-top: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }

/* beheer_foto — framed uploader with current-photo hero + styled file button */
.upload-card { max-width: 560px; }
.upload-hero { position: relative; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f3f7f4; }
.upload-hero img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.upload-hero-tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(12,90,38,.9); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.file-input { font: inherit; color: var(--ink); max-width: 100%; }
.file-input::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border: 0; border-radius: 8px;
  background: var(--green); color: #fff; font-family: var(--display); letter-spacing: .02em;
  font-size: 14px; cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--green-dark); }
.upload-hint { width: 100%; margin: 0; color: var(--faint); font-size: 12px; }

/* ============================================================================
   Iteration 3 — location pin marker + larger WGV chart
   ============================================================================ */
/* location marker: a map pin instead of the round dot (programma + uitslagen) */
.match-location::before,
.result-sub-loc::before,
.result-location::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 15px;
  border-radius: 0;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex: none;
}
/* pin + text on one centered baseline-aligned row */
.result-location { display: flex; align-items: center; justify-content: center; gap: 5px; }
.match-location { display: inline-flex; align-items: center; gap: 5px; }

/* WGV balance chart: a lot larger / more prominent */
.wgv { gap: 12px; }
.wgv-track { height: 40px; border-radius: 9px; }
.wgv-seg { font-size: 18px; }
.wgv-label { width: 108px; font-size: 15px; }
.wgv-num { width: 44px; font-size: 17px; }
.wgv-legend { font-size: 15px; gap: 22px; margin-bottom: 6px; }
.wgv-sw { width: 15px; height: 15px; }

/* selectie: nationality flag + age tucked under the player name */
.selectie-person-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.selectie-person-id .primary { line-height: 1.15; }
.selectie-person-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.selectie-person-sub img { width: 20px; height: auto; border-radius: 3px; border: 1px solid var(--line); vertical-align: middle; }
.selectie-table { min-width: 480px; }

/* season name shown small behind team names in the "Mijn seizoen" dropdown */
.dropdown-meta { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: normal; }
.dropdown-group > .dropdown-item .dropdown-meta { color: var(--faint); }

/* ============================================================================
   Iteration 4 — form guide (uitslagen), client-side stat panes, player profile
   ============================================================================ */

/* team_uitslagen — last-3 W/G/V form guide, right of each match card */
.form-guide { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin-left: auto; padding-left: 14px; flex: 0 0 auto; }
.form-line { display: flex; justify-content: flex-end; gap: 6px; }
.form-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  font-family: var(--display), sans-serif; font-size: 15px; line-height: 1; font-weight: 700;
  color: #fff; letter-spacing: .5px;
}
.form-badge.is-win  { background: var(--green); }
.form-badge.is-draw { background: #5b6b60; }
.form-badge.is-loss { background: var(--red-dark); }
.form-badge.is-empty { background: transparent; border: 1px dashed rgba(91,107,96,.45); }

/* team_programma: kleinere, subtielere vorm-badges (zachte tint i.p.v. vol vlak) */
.match-form { gap: 4px; }
.match-form .form-badge {
  width: 17px; height: 17px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0;
}
.match-form .form-badge.is-win  { background: var(--green-tint); color: var(--green); }
.match-form .form-badge.is-draw { background: #ecefea; color: #5b6b60; }
.match-form .form-badge.is-loss { background: #fbe7e7; color: var(--red-dark); }

/* team_statistieken — only the active category pane is shown; JS toggles [hidden] */
.stat-pane[hidden] { display: none; }
.page_slicer .slice { cursor: pointer; }

/* team_statistieken — totaalrij: totaal + gemiddelde, uitgelijnd onder de kolommen */
.statistieken_table .stat-total-row td,
.statistieken_table_beker .stat-total-row td {
  border-top: 2px solid var(--green);
  background: var(--green-tint);
  padding-top: 10px; padding-bottom: 10px;
}
.stat-total-row.is-sub td { border-top: 1px solid var(--line); background: #f3f7f4; }
.stat-total-label { font-family: var(--display); font-size: 15px; color: var(--ink); letter-spacing: .01em; }
.stat-total-val { font-family: var(--display); font-size: 20px; color: var(--green); }
.stat-total-avg { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }

/* user_profiel — personalia definition-style table */
.profile-detail-table td:first-child { width: 150px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.profile-detail-table td { vertical-align: top; }
.profile-detail-table input, .profile-detail-table select, .profile-detail-table textarea { max-width: 100%; }
.muted { color: var(--muted); }

/* user_scoreverloop — inline SVG chart framing */
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.chart-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-scroll { overflow-x: auto; }
.verloop-chart { display: block; width: 100%; min-width: 480px; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ============================================================================
   Iteration 5 — user profile: 2-row hero, phone note, user sidebar cards
   ============================================================================ */
.stat-caption {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 600; padding: 10px 16px 2px; border-top: 1px solid var(--line); background: var(--green-tint);
}
.stat-caption + .team-stats-row { border-top: 0; }
.hero-rugnr { display: inline-block; font-family: var(--display); color: var(--green); font-weight: 700; margin-right: 4px; }
.muted-note { color: var(--muted); font-size: 13px; font-style: italic; }

/* user_profiel — prominent rugnummer (shirtnummer) rechts in de hero */
.hero-number {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  font-family: var(--display);
  font-size: 72px;
  line-height: .85;
  color: var(--green);
  letter-spacing: -.01em;
}
.hero-number .hn-hash { font-size: .42em; color: var(--faint); margin-right: 2px; align-self: flex-start; }
@media (max-width: 720px) {
  .hero-number { font-size: 52px; margin-left: 0; }
}

.mini-team-list { list-style: none; margin: 0; padding: 0; }
.mini-team { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.mini-team:last-child { border-bottom: 0; }
.mini-crest { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; background: var(--faint); flex: none; }
.mini-crest-txt { display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-family: var(--display); font-size: 13px; }
.mini-team-name { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-team-name:hover { color: var(--green); }

.mini-stat-list { list-style: none; margin: 0; padding: 0; }
.mini-stat-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.mini-stat-list li:last-child { border-bottom: 0; }
.mini-stat-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mini-stat-val { font-family: var(--display); font-size: 20px; color: var(--green); line-height: 1; }

/* ============================================================================
   Iteration 6 — programma form (per team) + uitslagen single large verdict
   ============================================================================ */

/* team_statistieken — impact (met vs zonder) delta coloring + legend
   (design pages load mw-design.css, not refresh.css, so define it here) */
.impact-delta { font-variant-numeric: tabular-nums; font-weight: 700; }
.impact-delta.is-up { color: var(--green); }
.impact-delta.is-down { color: var(--red); }
.impact-delta.is-lowconf { opacity: .45; }
.impact-legend { margin: 10px 4px 2px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ============================================================================
   header live-search dropdown
   ============================================================================ */
.header-search-results {
  position: absolute; top: calc(100% + 6px); left: 12px; z-index: 80;
  width: min(560px, calc(100% - 24px));
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-height: 66vh; overflow-y: auto; padding: 6px;
}
.hsr-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.hsr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.hsr-item:hover { background: var(--green-tint); color: var(--green); }
.hsr-img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; background: #fff; border: 1px solid var(--line); flex: none; }
.hsr-txt { display: flex; flex-direction: column; min-width: 0; }
.hsr-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsr-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsr-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; }
/* shared empty state (previously used unstyled across many pages) */
.empty-state { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14px; background: #fafbf9; border: 1px dashed var(--line); border-radius: 10px; }

/* ============================================================
   user_agenda — moderne tijdlijn (wedstrijden + team-events)
   ============================================================ */
.agenda-wrap { max-width: 880px; margin: 0 auto; }
.agenda-wrap .result-row { scroll-margin-top: 90px; }

/* notificatie-bel in de header: reactie-teller als rode badge op het bel-icoon */
.nav-notif { position: relative; text-decoration: none; }
.nav-notif.has-notif { color: var(--green); }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  padding: 0 3px; border-radius: 999px; background: var(--red); color: #fff;
  font-family: var(--sans); font-size: 10.5px; font-weight: 800; line-height: 17px;
  text-align: center; border: 2px solid #fff;
}

/* kalender-abonnement — schone kaart, dezelfde taal als de rest (geen accentrand) */
.agenda-subscribe { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
.agenda-sub-text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agenda-sub-icon { width: 26px; height: 26px; color: var(--green); flex: 0 0 auto; }
.agenda-sub-text span { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--muted); }
.agenda-sub-text strong { font-size: 15px; color: var(--ink); }
.agenda-sub-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.agenda-cal-btn { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--green); background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
.agenda-cal-btn:hover { background: var(--green-tint); border-color: var(--green-line); }
.agenda-cal-btn.is-ghost { color: var(--muted); }
.agenda-help { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 4px; }
.agenda-help:hover { color: var(--green); text-decoration: underline; }

.result-event-title { font-weight: 600; color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.result-sub-loc { display: inline-flex; align-items: center; gap: 5px; }
.result-date-card.is-event .result-date-time { background: #c98a00; }

/* type-/evenement-label */
.agenda-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--green); background: var(--green-tint); border-radius: 5px; padding: 2px 7px; }
.agenda-tag.is-event { color: #8a6300; background: #fbf1d6; }

/* beschikbaarheid — segmented control / alleen-lezen pill
   Staat onder de wedstrijd, ingesprongen tot de teamnamen (zie
   .result-row:has(.result-main) bij DE WEDSTRIJDKAART). De pil krijgt dezelfde
   hoogte als de knoppenbalk: anders danst een agenda waarin allebei voorkomen. */
.agenda-avail { display: flex; flex-wrap: wrap; align-items: center; min-height: 40px; max-width: 360px; }
/* De foutregel onder de knoppen komt er alleen als het doorgeven misging; hij
   pakt de hele breedte, anders duwt hij de drie knoppen opzij. */
.avail-fout { flex-basis: 100%; width: 100%; font-size: 11.5px; font-weight: 700; color: var(--red); padding: 4px 2px 0; }
.avail-fout[hidden] { display: none; }
.agenda-avail-inner { display: flex; flex: 1; background: #f1f4ee; border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.agenda-avail-inner.is-busy { opacity: .5; pointer-events: none; }
.avail-btn { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; background: transparent; border: 0; padding: 8px 6px; border-radius: 6px; white-space: nowrap; }
.avail-btn:hover { color: var(--ink); }
.avail-btn.is-yes.is-active { background: var(--green); color: #fff; }
.avail-btn.is-maybe.is-active { background: #c98a00; color: #fff; }
.avail-btn.is-no.is-active { background: var(--red); color: #fff; }
.avail-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-radius: 8px; white-space: nowrap; display: inline-block; }
.avail-status.is-selected { color: #fff; background: var(--green); }
.avail-status.is-reserve { color: #8a6300; background: #fbf1d6; border: 1px solid #ecd28a; }
.avail-status.is-out { color: var(--muted); background: #eef1ec; border: 1px solid var(--line); }
.avail-status.is-none { color: var(--muted); background: #fff; border: 1px dashed var(--line); }

@media (max-width: 720px) {
  .agenda-avail { max-width: none; min-height: 38px; }
}
/* Op een telefoon van 320px past "Ik kan niet" niet meer op één regel; dan
   breekt de knop over twee regels en wordt de balk anderhalf keer zo hoog. */
@media (max-width: 380px) {
  .avail-btn { font-size: 11px; padding: 9px 3px; letter-spacing: -.01em; }
}

/* ── Maand/jaar-scheiding voor wedstrijdlijsten (gedeeld) ─────────────────
   Gebruikt door user_agenda, team_programma, team_uitslagen en
   user_laatstewedstrijden: één rustige scheidingsregel per maand, zodat een
   lange lijst leesbaar blijft zonder de rij-opmaak zelf te veranderen. */
.result-month {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 4px 4px 7px;
  margin: 18px 0 2px;
  border-bottom: 2px solid var(--line);
}
.card-body > .result-month:first-child { margin-top: 2px; }
.result-month + .result-row { border-top: 0; }
.result-month-name { font-family: var(--display); font-size: 16px; letter-spacing: .01em; color: var(--green); text-transform: uppercase; }
.result-month-yr { font-size: 12px; font-weight: 700; color: var(--faint); }

/* ============================================================
   wedstrijd_live — sideline matchday app
   ============================================================ */
.live-app {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
/* Hier twee keer misgegaan: een eigen display-waarde (flex, block) wint van het
   [hidden]-attribuut. Gevolg was een leeg meldingsblok dat bleef staan, en een
   onzichtbaar schermvullend vlak dat alle knoppen blokkeerde. Eén regel voor
   het hele Coachbord is betrouwbaarder dan het per element onthouden. */
.live-app [hidden] { display: none !important; }
.live-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.live-kicker {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.live-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
}
.live-hero p {
  margin: 7px 0 0;
  color: var(--muted);
}
/* Grid met twee vaste, gelijke kolommen (3ch) om het cijfer, met het
   koppelteken in een eigen middenkolom: zo staat het koppelteken altijd op de
   horizontale het midden van de kaart, ook bij "100 - 0" — een cijfer dat
   breder is dan 3ch groeit weg van het koppelteken (tekst gericht naar de
   rand het dichtst bij het koppelteken), nooit erlangs. */
/* Vaste, gedeelde breedte met .live-timer-card (hieronder) — het scorebord en
   de klok zijn allebei de kop van hun item en horen even breed te zijn. */
.live-score {
  display: grid;
  grid-template-columns: 3ch auto 3ch;
  align-items: center;
  justify-content: center;
  width: 200px;
  gap: 6px;
  padding: 13px 18px;
  border-radius: 8px;
  background: var(--green);
}
.live-score strong {
  color: #fff;
  font-family: var(--display);
  font-size: 48px;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.live-score strong:first-of-type { text-align: right; }
.live-score strong:last-of-type { text-align: left; }
.live-score span {
  text-align: center;
  color: #fff;
  font-family: var(--display);
  font-size: 48px;
  line-height: .9;
}
.live-score.is-pulse {
  animation: liveScorePulse .36s ease-out;
}
@keyframes liveScorePulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); border-color: var(--red); }
  100% { transform: scale(1); }
}
.live-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.live-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.live-clock {
  grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.live-timer-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 58px;
  width: 200px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--green);
  color: #fff;
}
.live-timer-card strong {
  font-family: var(--display);
  font-size: 30px;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.live-timer-card span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .88;
}
/* Klok stil midden in de wedstrijd: de klokkop kleurt amber, zodat je van een
   afstand ziet dat er niets meetelt — de statusregel eronder is daar te klein
   voor. Alleen dan: vóór de aftrap en na afloop blijft hij groen (de JS zet
   is-paused op !running && !finished && !notStarted, de server-render op de
   status 'paused', die pas na het startsignaal bestaat). */
.live-timer-card.is-paused { border-color: #d79a18; background: #d79a18; }
.live-clock button,
.live-controls button,
.live-form button {
  min-height: 44px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.live-clock button {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}
.live-clock button.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
/* Alleen met een echte muis. Op een touchscreen blijft :hover na een tik op de
   knop staan, en dan lijkt de laatst gebruikte knop permanent aan — precies de
   knoppen (Goal, Wissel) waarvan de stand iets betekent. */
@media (hover: hover) {
  .live-controls button:hover,
  .live-clock button:hover,
  .live-form button:hover {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
  }
}
.live-controls button[disabled] {
  border-color: var(--line);
  background: #eef1ec;
  color: var(--faint);
  cursor: not-allowed;
}
@media (hover: hover) {
  .live-controls button[disabled]:hover {
    border-color: var(--line);
    background: #eef1ec;
    color: var(--faint);
  }
  .live-app button.is-fine:hover {
    border-color: var(--green);
    background: var(--green-tint);
    color: var(--green);
  }
  .live-fast-player:hover { border-color: var(--green); background: var(--green-tint); }
  .live-timeline button:hover { border-color: var(--red); color: var(--red); }
}
/* Klok bijstellen: nodig, maar niet iets waar je per ongeluk op tikt — dus een
   rustige outline naast de volle knoppen. */
.live-app button.is-fine {
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
}
.live-controls button.is-end {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.live-controls button.is-end:hover {
  border-color: var(--red-dark);
  background: var(--red-dark);
}
.live-controls button.is-danger {
  border-color: var(--red);
  background: #fff;
  color: var(--red);
}
.live-controls button.is-danger:hover {
  background: var(--red);
  color: #fff;
}
.live-instruction {
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1px solid #cfe0cb;
  border-radius: 8px;
  background: var(--green-tint);
  color: var(--green);
  font-weight: 800;
}
/* Geen tekst (de neutrale "Tik een actie" is bewust weg) betekent geen balk. */
.live-instruction:empty { display: none; }
.live-error {
  min-height: 20px;
  margin: 0 0 10px;
  color: var(--red);
  font-weight: 800;
}
.live-fast-panel {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.live-fast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fbf6;
}
.live-fast-head strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
}
.live-fast-head button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}
.live-fast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  padding: 10px;
}
/* Tegel: schermvullend keuzeblad (coachbord-mobiel taak 4) — de naam voorop,
   duimgroot en drie per rij op mobiel (§5 van de spec). */
.live-fast-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 6px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}
.live-fast-player strong {
  font-size: 16px;
  line-height: 1.15;
}
.live-fast-player span {
  font-size: 11px;
  color: var(--muted);
  background: none;
  min-height: 0;
}
.live-fast-player.is-selected {
  border-color: var(--green);
  background: var(--green-tint);
}
/* Bijzondere tegels: Geen assist/Tegenstander/Tegenpartij nemen de volle
   breedte, en de kaartkleuren-tegels (Geel/Rood) zijn extra groot omdat ze
   de enige twee tegels op dat scherm zijn. */
.live-fast-player.is-breed { grid-column: 1 / -1; min-height: 64px; }
.live-fast-player.is-tegenstander { border-color: var(--muted); font-size: 18px; }
.live-fast-player.is-tegenpartij { border-color: var(--muted); }
/* De tussenstap van Tegengoal (Tegenstander / Eigen goal): net als Geel/Rood de
   enige twee tegels op het scherm, dus even groot en duimdik. */
.live-fast-player.is-keuze { min-height: 140px; }
.live-fast-player.is-keuze strong { font-size: 26px; }
.live-fast-player.is-eigen-goal { border-color: #d74732; color: #d74732; }
.live-fast-player.is-geel { background: #f6d34a; border-color: #d79a18; min-height: 140px; font-size: 26px; }
.live-fast-player.is-rood { background: var(--red); border-color: var(--red); color: #fff; min-height: 140px; font-size: 26px; }
/* --- Coachbord: klok bovenaan, knoppen eronder, veld/tijdlijn altijd in beeld
   (coachbord-mobiel-2 §4) — de twee standen, de greep en de "Acties"-balk uit
   ronde 1 zijn vervallen. ------------------------------------------------- */
/* Terug-knop en team-titel in twee gelijke kolommen om de middelste (de
   titel) heen, zodat de titel altijd echt gecentreerd staat — dezelfde greep
   als bij de klok-kop en de play/pauzeknop hierboven. */
.cb-kop {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 4px;
  margin: 0 -12px 4px;
  padding: 4px 8px;
  background: var(--green-dark);
  color: #fff;
  font-weight: 800;
}
.cb-kop-terug {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 22px;
  text-decoration: none;
}
.cb-kop-team {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
/* Duimdik: dit zijn knoppen die je langs de lijn blind moet raken, dus mogen
   ze een kop-regel best hoger maken dan een gewone tekstknop. */
.cb-knop { border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font-family: var(--display); font-size: 20px; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; min-height: 64px; padding: 0 14px; flex: 0 0 auto; }
.cb-knop-wissel { border-color: var(--green); background: var(--green); color: #fff; }
.cb-knop-kaart { border-color: #d79a18; color: #b57d0e; }
.cb-knop.is-active { outline: 3px solid var(--green); outline-offset: 2px; }
.cb-knop[disabled] { border-color: var(--line); background: #eef1ec; color: var(--faint); cursor: not-allowed; }
/* De twee +1-knoppen op het score-item zijn een afgeronde vierkant, net als de
   play/pauzeknop op het klok-item — Wissel/Kaart houden hun eigen bredere
   opmaak (langere tekst). Ze nemen de opmaak over die het scorebord zelf
   eerst had (dunne grijze lijn, groene tekst); het scorebord is nu groen met
   witte cijfers. */
.cb-harmonica-item[data-cb-item="score"] .cb-knop {
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border-color: var(--line);
  background: #f7faf5;
  color: var(--green);
}
/* Beide goal-knoppen heetten "+1" en waren allebei groen; het enige verschil
   was aan welke kant van de stand ze stonden (Sepp, 21-09-2026). Nu staat er
   een woord onder het cijfer — "goal" links, "tegen" rechts — en is de
   tegengoal-knop rood: kleur plus woord, dan hoef je de positie niet te
   onthouden. Zelfde opbouw als de onderschriften op de klokknoppen. */
.cb-harmonica-item[data-cb-item="score"] .cb-knop,
.cb-harmonica-playpause {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.cb-harmonica-item[data-cb-item="score"] .cb-knop .cb-knop-plus { font-size: 24px; line-height: 1; }
.cb-harmonica-item[data-cb-item="score"] .cb-knop small,
.cb-harmonica-playpause small {
  font: 600 10px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cb-harmonica-item[data-cb-item="score"] .cb-knop.cb-knop-tegen {
  border-color: var(--red);
  background: #fff5f5;
  color: var(--red);
}
/* Zonder deze regel wint de kaartopmaak hierboven van .cb-knop[disabled] —
   specifieker selector, dus de knop bleef er "actief" uitzien terwijl
   disabled=true al klopte. Zelfde grijze look als de play/pauzeknop. */
.cb-harmonica-item[data-cb-item="score"] .cb-knop[disabled] {
  border-color: var(--line);
  background: #eef1ec;
  color: var(--faint);
  cursor: not-allowed;
}
/* ------------------------------------------------------------------------
   Verticale harmonica (coachbord-harmonica-spec): klok · score · wissel,
   precies één open, samen vullen ze de rest van het scherm. De kop van elk
   item staat vast; de inhoud van het open item scrolt zelfstandig. Openen en
   sluiten animeert (.3s): flex-grow is een animeerbaar getal, dus zowel het
   item (vult de kolom) als zijn inhoud (klapt open binnen dat item) groeien
   samen mee in plaats van in één klap te wisselen. */
.cb-harmonica { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cb-harmonica-item {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  transition: flex-grow .3s ease, flex-shrink .3s ease;
}
.cb-harmonica-item:first-child { border-top: none; }
.cb-harmonica-item.is-open { flex: 1 1 auto; min-height: 0; }
.cb-harmonica-kop-rij { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; }
.cb-harmonica-kop {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  padding: 4px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* Score en klok: de knop(pen) staan vlak naast de inhoud, als één
   gecentreerde groep — in plaats van de kop over de hele rij te trekken
   (flex:1) en de knoppen zo naar de randen te duwen. Bij de klok staan er
   twee even brede knoppen (play/pauze links, skip rechts), dus blijft de
   klok vanzelf in het midden van de groep — en dus van de rij. */
.cb-harmonica-item[data-cb-item="score"] .cb-harmonica-kop-rij,
.cb-harmonica-item[data-cb-item="klok"] .cb-harmonica-kop-rij,
.cb-harmonica-item[data-cb-item="wissel"] .cb-harmonica-kop-rij {
  justify-content: center;
}
/* Wissel en Kaart samen even breed als het scorebord met zijn twee
   +1-knoppen (56 + 8 + 200 + 8 + 56 = 328px), en gelijk aan elkaar. */
.cb-harmonica-item[data-cb-item="wissel"] .cb-knop {
  width: 160px;
}
.cb-harmonica-item[data-cb-item="score"] .cb-harmonica-kop,
.cb-harmonica-item[data-cb-item="klok"] .cb-harmonica-kop {
  flex: 0 0 auto;
}
/* Play/pauze links, skip-naar-volgende-periode rechts van de klok — twee
   even brede knoppen, zelfde opmaak als de +1-knoppen bij de stand (dunne
   grijze lijn, lichte achtergrond), houden de klok tussen hen vanzelf
   gecentreerd. De kleur van het icoon zelf is niet belangrijk, zolang hij
   van tekst is (currentColor) en geen emoji — anders negeert het platform de
   CSS-kleur/opmaak (media-iconen: driehoek, "||", en twee driehoekjes+streep
   voor skip). */
.cb-harmonica-playpause {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #f7faf5;
  color: var(--green);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.cb-harmonica-playpause:before { content: '\25b6'; }
.cb-harmonica-playpause.is-running:before { content: '||'; letter-spacing: 2px; }
.cb-harmonica-playpause[data-clock-skip]:before { content: '\25b6\25b6|'; font-size: 16px; letter-spacing: 1px; }
.cb-harmonica-playpause[disabled] { border-color: var(--line); background: #eef1ec; color: var(--faint); cursor: not-allowed; }
.cb-harmonica-inhoud {
  flex: 0 0 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  transition: flex-grow .3s ease, padding .3s ease;
}
.cb-harmonica-item.is-open .cb-harmonica-inhoud {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 6px 0 20px;
}
.cb-klokopties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Na de wedstrijd: vervangt de klokopties zodra de wedstrijd afgelopen is —
   uitslag, waskoning en de gedeelde AI-verslagkaart. Regels met een klein
   label links, zodat het leest als een lijstje wat er nog te doen is. */
.cb-na { display: flex; flex-direction: column; gap: 10px; }
.cb-na-regel { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cb-na-label { flex: 0 0 84px; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cb-na-stand { font-family: var(--display); font-size: 24px; line-height: 1; }
.cb-na-waarde { flex: 1 1 auto; min-width: 0; font-size: 17px; }
.cb-na-link { margin-left: auto; font-size: 14px; white-space: nowrap; }
.cb-na-knop { margin-left: auto; min-height: 44px; flex: 0 0 auto; padding: 0 16px; }
.cb-na .card { margin: 0; }
.cb-actie {
  min-height: 56px;
  font-size: 17px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  padding: 6px 10px;
}
@media (hover: hover) {
  .cb-actie:hover {
    border-color: var(--green-dark);
    background: var(--green-dark);
  }
}
.cb-actie[disabled] {
  border-color: var(--line);
  background: #eef1ec;
  color: var(--faint);
  cursor: not-allowed;
}
/* Rust is het moment dat je het minst mag missen: eigen oranje kleur, net als
   de "loopt in blessuretijd"-status van de klok. */
.cb-actie-rust {
  border-color: #d79a18;
  background: #d79a18;
}
.cb-actie-end {
  border-color: var(--red);
  background: var(--red);
}
.cb-actie-danger {
  border-color: var(--red);
  background: #fff;
  color: var(--red);
}
.cb-actie-fine {
  border-color: var(--line);
  background: #fff;
  color: var(--muted);
}
.cb-actie-herstel {
  border-color: var(--ink);
  background: #fff;
  color: var(--ink);
}
/* Herstelpaneel: een <dialog>, dus de browser regelt de backdrop en het
   centreren bij showModal(). Zonder <dialog>-ondersteuning valt de JS terug
   op het open-attribuut; de basisopmaak hieronder werkt in beide gevallen. */
.cb-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(480px, calc(100% - 32px));
  max-height: 85vh;
  box-shadow: var(--shadow-md);
}
.cb-dialog::backdrop {
  background: rgba(20, 32, 22, .5);
}
.cb-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fbf6;
}
.cb-dialog-head strong {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink);
}
.cb-dialog-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cb-dialog-body {
  padding: 14px 16px;
  overflow-y: auto;
  max-height: calc(85vh - 56px);
}
.cb-herstel-laatste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff8f7;
  font-weight: 800;
}
.cb-herstel-laatste .cb-actie {
  min-height: 44px;
  font-size: 14px;
  padding: 6px 12px;
  flex: 0 0 auto;
}
.cb-herstel-finished {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.cb-herstel-finished .cb-actie,
.cb-herstel-add .cb-actie {
  min-height: 48px;
  font-size: 14px;
}
.cb-herstel-add {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.cb-herstel-add label {
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cb-herstel-add select,
.cb-herstel-add input,
.cb-herstel-wijzig-form select {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}
.cb-dialog-acties {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.cb-dialog-acties button[data-cb-add-cancel],
.cb-dialog-acties button[data-cb-wizard-back],
.cb-wizard-acties button[data-cb-wizard-back] {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}
.cb-wizard .cb-dialog-acties .cb-actie,
.cb-wizard .cb-wizard-acties .cb-actie {
  flex: 1;
}
.cb-herstel-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-herstel-lijst li.is-empty {
  padding: 20px 0;
  color: var(--muted);
  text-align: center;
}
.cb-herstel-rij {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.cb-herstel-rij-tekst {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 800;
  color: var(--ink);
}
.cb-herstel-minuut {
  color: var(--green);
  font-family: var(--display);
}
.cb-herstel-rij-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cb-herstel-rij-acties button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.cb-herstel-rij-acties button.is-danger {
  border-color: var(--red);
  color: var(--red);
}
.cb-herstel-wijzig-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.cb-herstel-wijzig-form label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* --- Startwizard: formatie/minuten, opstelling, controle (coachbord-herstellen
   taak 9) ------------------------------------------------------------------- */
.cb-wizard {
  width: min(560px, calc(100% - 32px));
}
.cb-wizard-stappen {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: cbwizardstap;
}
.cb-wizard-stappen li {
  flex: 1;
  padding: 8px 4px;
  border-bottom: 3px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cb-wizard-stappen li.is-active {
  border-color: var(--green);
  color: var(--ink);
}
/* De gewone .live-error staat buiten deze <dialog> en is dus onzichtbaar
   achter de backdrop; de wizard heeft daarom zijn eigen foutregel. */
.cb-wizard-fout {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: #fdf1ef;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}
.cb-wizard-stap label {
  display: block;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cb-wizard-stap select,
.cb-wizard-stap input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}
.cb-wizard-hint {
  margin: -4px 0 12px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}
.cb-wizard-uitleg {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
/* Basis en keeper: naamtegels in plaats van het veldje (coachbord-mobiel
   ronde 2, taak 3) — zelfde tegel als het Coachbord-keuzescherm
   (.live-fast-player), met eigen kleuren voor basis/bank/keeper. */
.cb-wizard-teller {
  font-weight: 900;
  margin: 0 0 8px;
}
.cb-wizard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cb-wizard-tegel.is-basis {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.cb-wizard-tegel.is-bank {
  background: #eef1ec;
  color: var(--muted);
}
.cb-wizard-tegel.is-keeper {
  border-color: #d79a18;
  background: #f6d34a;
  color: var(--ink);
}
.cb-wizard-acties {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.cb-wizard-samenvatting p {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
}
.cb-wizard-samenvatting p:first-child {
  font-family: var(--display);
  font-size: 19px;
}
.cb-wizard-start {
  display: block;
  width: 100%;
  min-height: 60px;
  margin-top: 4px;
  font-size: 19px;
}
.cb-wizard-later {
  margin: 10px 0 0;
  text-align: center;
}
.cb-link {
  border: none;
  background: none;
  padding: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

/* Wat er net is vastgelegd. Verdwijnt na een paar seconden weer. */
.live-melding {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 13px;
  border: 1px solid #cfe0cb;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.live-melding:before {
  content: "\2713";
  flex: none;
  color: var(--green);
  font-weight: 900;
}
/* De tijd waarop je de wisselbeslissing neemt, bij de naam in het keuzeblad. */
.live-fast-player em {
  font-size: 11px;
  color: var(--muted);
}
/* De kaart "Wedstrijdverloop" buiten het Coachbord: op de wedstrijdpagina
   (wedstrijd.php) en in het bewerkscherm (includes/tijdlijn_bewerk_kaart.php).
   Die kop is groen — hij hoorde bij het Coachbord-blok dat met de harmonica
   verdween, maar deze twee kaarten dragen de klasse nog en stonden daardoor
   met een gewone grijze kop. De regel grid-column: 1 / -1 die er ook bij hoorde
   komt níét terug: die gold binnen .live-layout, en dat raster bestaat niet
   meer (beide overgebleven kaarten staan in een flexkolom). */
.live-timeline-card .card-head {
  background: var(--green);
  color: #fff;
}
.wedstrijd-flow-card {
  margin-bottom: 18px;
}
.public-timeline .live-event-acties,
.public-timeline button {
  display: none;
}
.tl-toevoegen-wrap {
  margin-top: 10px;
  text-align: center;
}
/* Coachbord-herstellen taak 14 (fixronde 1): deze kaart zit in het
   bewerkscherm, dus BUITEN .live-app — het vangnet ".live-app [hidden]"
   hierboven geldt daar niet, en de generieke author-regel ".tl-dialog-body
   label { display: block }" hieronder wint anders van het UA [hidden]. Zonder
   deze regel bleef een verborgen veld (assist bij geen doelpunt voor, beide
   spelerskiezers bij een tegengoal) gewoon zichtbaar terwijl de JS zijn
   waarde stil op 0 zette. */
.tl-dialog-body [hidden] {
  display: none !important;
}
.tl-dialog-body label {
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tl-dialog-body select,
.tl-dialog-body input {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}
.tl-dialog-fout {
  margin-top: 10px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}
.live-playtime-row strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-playtime {
  display: grid;
  gap: 7px;
}
.live-playtime-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 94px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
}
.live-playtime-row.is-active {
  border-color: #cfe0cb;
  background: var(--green-tint);
}
.live-playtime-row span {
  color: var(--red);
  font-family: var(--display);
  font-size: 14px;
}
.live-playtime-row strong {
  margin-top: 0;
  font-size: 12px;
}
.live-playtime-row em {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
  color: var(--green);
  font-style: normal;
  text-align: right;
}
.live-playtime-row b,
.live-playtime-row small {
  display: grid;
  gap: 1px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-playtime-row b:before,
.live-playtime-row small:before {
  color: var(--faint);
  font-family: var(--body);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.live-playtime-row b:before { content: "veld"; }
.live-playtime-row small {
  color: var(--muted);
}
.live-playtime-row small:before { content: "bank"; }
.live-timeline {
  /* Coachbord-herstellen taak 6: rijhoogte in één custom property, zodat
     de tijdlijn op wedstrijd.php en het Coachbord dezelfde compacte maat delen.
     Taak 15 (livetest: "tijdlijn kan echt nog compacter"): verder omlaag. */
  --tl-rij: 1px;
  position: relative;
  list-style: none;
  padding: 8px 0 6px;
  margin: 0;
}
.live-timeline:before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  background: var(--line);
  transform: translateX(-50%);
}
.live-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px 48px 34px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: var(--tl-rij) 0;
  margin-bottom: 18px;
  border-top: 0;
}
.live-timeline li:last-child { margin-bottom: 0; }
.live-timeline li.is-empty {
  display: block;
  padding: 22px 0;
  color: var(--muted);
  text-align: center;
}
.live-timeline li.is-empty:before {
  display: none;
}
.live-event-text {
  grid-row: 1;
  display: grid;
  align-self: center;
  gap: 2px;
  min-width: 0;
}
.live-event-text strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-event-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
/* Taak 15: een wissel zet IN/UIT + beide namen voortaan op de titelregel
   zelf (mw_live_event_title()) — de subtitel blijft dan leeg en mag géén
   ruimte meer opeisen, anders staat er een lege regel te wachten. */
.live-event-text small:empty {
  display: none;
}
.sub-flow {
  display: block;
  color: var(--muted);
}
.sub-flow b {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  margin-right: 4px;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
}
.sub-flow-in {
  color: var(--green);
  font-size: 12px;
}
.sub-flow-in b {
  background: var(--green);
  color: #fff;
}
.sub-flow-out {
  color: var(--faint);
  font-size: 10.5px;
}
.sub-flow-out b {
  background: #edf2ee;
  color: var(--muted);
}
/* Coachbord-herstellen taak 15: tweede compactieronde op de tijdlijn
   (livetest-feedback "IN ook voor de naam van de IN zetten en UIT klein voor
   de uitgaande speler"). Een wissel zet IN/UIT als klein label vóór beide
   namen, ín de titelregel (de subtitel is nu leeg, zie
   .live-event-text small:empty hierboven) — dat mag best wrappen, dus flex
   in plaats van het gewone ellipsis-gedrag van .live-event-text strong.
   Het icoon vóór de naam (taak 6/15) is weer weg: dat stond dubbel op met
   het icoon op de tijdlijnknoop (.live-event-dot:before hieronder). */
:is(.event-goal_for, .event-yellow, .event-red, .event-substitution) .live-event-text strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.live-timeline li.is-left:is(.event-goal_for, .event-yellow, .event-red, .event-substitution) .live-event-text strong {
  justify-content: flex-end;
}
.live-timeline li.is-right:is(.event-goal_for, .event-yellow, .event-red, .event-substitution) .live-event-text strong {
  justify-content: flex-start;
}
/* Doelpunten springen eruit: vette naam + groene score-accentkleur, duidelijk
   anders dan een kaart (zwart/geel/rood) of een wissel (blauwgrijs/groen). */
.tl-goal-naam {
  color: var(--green);
  font-weight: 900;
}
/* Een eigen goal is voor ons een tegentreffer, geen doelpunt om te vieren —
   dezelfde vette opmaak maar de rode accentkleur van een tegengoal. */
.tl-eigen-goal {
  color: var(--red);
}
.tl-flow {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.tl-flow-tag {
  display: inline-flex;
  min-width: 22px;
  justify-content: center;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
}
.tl-flow-in {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
.tl-flow-in .tl-flow-tag {
  background: var(--green);
  color: #fff;
}
.tl-flow-out {
  color: var(--muted);
  font-size: 11.5px;
}
.tl-flow-out .tl-flow-tag {
  background: #edf2ee;
  color: var(--muted);
}
.live-timeline li.is-left .live-event-text {
  grid-column: 1;
  text-align: right;
}
.live-timeline li.is-right .live-event-text {
  grid-column: 5;
  text-align: left;
}
.live-timeline li.is-center .live-event-text {
  grid-column: 1 / -1;
  justify-self: center;
  z-index: 1;
  padding: 2px 9px;
  background: var(--card);
  text-align: center;
}
.live-timeline li.is-center .live-event-text strong {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* Zelfde hoogte als .live-minute (32px): met echt gelijke maten valt het
   wiskundig gecentreerd staan (align-items: center op .live-timeline li) ook
   optisch samen — bij ongelijke maten (was 24px) oogde de kleinere stip
   alsof hij hoger stond, ook al klopte het middelpunt al. */
.live-event-dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--green-tint);
  border: 1px solid #cfe0cb;
  z-index: 1;
}
.live-timeline li.is-right .live-event-dot {
  grid-column: 4;
}
.live-timeline li.is-center .live-event-dot {
  display: none;
}
/* De scharnierpunten van een wedstrijd (start, rust, einde) krijgen een eigen
   streep over de volle breedte in plaats van nog een grijs regeltje tussen de
   momenten — en dus ook geen eigen minuutbadge (0'/45'/90' zegt niets extra's
   naast het label zelf). */
.live-timeline li.event-match_start,
.live-timeline li.event-second_half,
.live-timeline li.event-match_end {
  position: relative;
  margin: 6px 0;
}
.live-timeline li.event-match_start::after,
.live-timeline li.event-second_half::after,
.live-timeline li.event-match_end::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--green);
  opacity: .55;
}
.live-timeline li.event-match_start .live-event-text,
.live-timeline li.event-second_half .live-event-text,
.live-timeline li.event-match_end .live-event-text {
  position: relative;
  z-index: 2;
  padding: 3px 12px;
  border: 1px solid var(--green);
  border-radius: 999px;
}
.live-timeline li.event-match_start .live-event-text strong,
.live-timeline li.event-second_half .live-event-text strong,
.live-timeline li.event-match_end .live-event-text strong {
  color: var(--green);
  font-weight: 800;
}
.live-timeline li.event-match_start .live-minute,
.live-timeline li.event-second_half .live-minute,
.live-timeline li.event-match_end .live-minute { display: none; }
.live-event-dot:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}
.event-goal_for .live-event-dot:before,
.event-goal_against .live-event-dot:before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent url("../img/stats/doelpunten.png") center / contain no-repeat;
}
.event-goal_against .live-event-dot:before {
  filter: grayscale(1);
  opacity: .8;
}
.event-yellow .live-event-dot {
  background: #fff5ce;
  border-color: #efd47a;
}
.event-yellow .live-event-dot:before,
.event-red .live-event-dot:before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tl-accent);
}
.event-red .live-event-dot {
  background: #fde7e2;
  border-color: #f1b8aa;
}
/* Een speler erbij of eraf zonder tegenhanger: pijl omhoog/omlaag, zodat je
   het in de tijdlijn onderscheidt van een echte ruil (⇄). */
.event-player_in .live-event-dot:before,
.event-player_out .live-event-dot:before {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.event-player_in .live-event-dot:before { content: "↑"; color: var(--green); }
.event-player_out .live-event-dot:before { content: "↓"; color: var(--muted); }
.event-player_out .live-event-dot { background: #f2f4f1; border-color: var(--line); }
.event-player_in .live-event-text strong { color: var(--green); }
.event-player_out .live-event-text strong { color: var(--muted); }
.event-substitution .live-event-dot:before {
  content: "⇄";
  width: auto;
  height: auto;
  background: transparent;
  color: var(--green);
  font-size: 15px;
  line-height: 1;
  text-align: center;
}
/* Coachbord-herstellen taak 6: kleurbalkje links per soort — --tl-accent wordt
   op .live-timeline li verbruikt (border-left, zie hierboven). Kaarten en
   goals delen de kleur van hun bijhorende kaart/doelpunt; wissels krijgen een
   neutraal blauwgrijs zodat ze niet als goal ogen. */
.event-goal_for { --tl-accent: var(--green); }
.event-goal_against { --tl-accent: var(--red); }
.event-red { --tl-accent: var(--red); }
.event-yellow { --tl-accent: #c98a00; }
.event-substitution { --tl-accent: #55707c; }
.event-player_in { --tl-accent: var(--green); }
.event-player_out { --tl-accent: #55707c; }
.live-minute {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--green);
  font-family: var(--display);
}
.live-timeline button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
  cursor: pointer;
}
/* Eén groep -1'/+1'/verwijder, verborgen tot je op de rij zelf tikt (nog een
   tik verbergt hem weer) — dat hield de tijdlijn eerder rommelig, met twee
   los van elkaar gepositioneerde knopjes per moment. */
.live-event-acties {
  grid-column: 5;
  display: inline-flex;
  gap: 4px;
  justify-self: start;
}
.live-timeline li.is-left .live-event-acties {
  grid-column: 1;
  justify-self: end;
}
.live-timeline li.is-right .live-event-acties {
  grid-column: 5;
}
.live-timeline li.is-center .live-event-acties {
  display: none;
}
.live-event-acties button {
  min-width: 34px;
  padding: 6px 7px;
  color: var(--green);
}
.live-event-verwijder {
  min-width: 0;
  width: 28px;
  padding: 0;
  color: var(--red);
  font-size: 16px;
  line-height: 1;
}
/* --- Wedstrijdverloop in de smalle aside (coachbord-herstellen taak 13,
   herstel na review) --------------------------------------------------------
   De aside is een vaste 340px kolom (.page-grid, hierboven); de gewone
   tijdlijn is een tweezijdige grid (minmax(0,1fr) 34px 48px 34px
   minmax(0,1fr)) die op wedstrijd_live.php de volle contentbreedte krijgt.
   In 340px kreeg elke helft zo weinig ruimte dat namen/titels zwaar
   afknapten. Vanaf 761px (de bovengrens van de bestaande mobiele
   tijdlijn-CSS hieronder, @media max-width:760px) staat de tijdlijn in de
   aside daarom in één kolom: tijd + gekleurde titelregel (de bestaande
   --tl-accent-linkerrand), geen links/rechts-splitsing meer. Onder 761px
   verandert er bewust niets: de aside is dan de volle paginabreedte
   (.page-grid schakelt naar 1fr) en de bestaande mobiele regels blijven van
   kracht — vandaar de eigen media query in plaats van gewoon .sidebar
   .live-timeline zonder grens, wat de mobiele regels met hogere
   specificiteit zou hebben overschreven. */
@media (min-width: 761px) {
  .sidebar .live-timeline li {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 10px;
    padding-left: 9px;
  }
  .sidebar .live-event-dot { display: none; }
  .sidebar .live-minute {
    grid-column: 1;
    justify-self: start;
    width: 40px;
  }
  .sidebar .live-timeline li.is-left .live-event-text,
  .sidebar .live-timeline li.is-right .live-event-text,
  .sidebar .live-timeline li.is-center .live-event-text {
    grid-column: 2;
    justify-self: stretch;
    background: none;
    padding: 0;
    text-align: left;
  }
  /* Taak 15: in de smalle aside staat alles al links uitgelijnd (hierboven) —
     de flex-end/flex-start-verdeling van de links/rechts-tijdlijn (voor het
     icoon/de IN-UIT-labels) moet hier weer gewoon links beginnen. */
  .sidebar .live-timeline li:is(.event-goal_for, .event-yellow, .event-red, .event-substitution) .live-event-text strong {
    justify-content: flex-start;
  }
}
/* --- Wedstrijdpagina: read-only mini-veld bij de opstelling (coachbord-
   herstellen taak 13) -------------------------------------------------------
   Gestreept gras met de spelers als chips op de x/y-procenten uit
   mw_live_formations(). Dit is sinds de harmonica het enige veldje dat er nog
   is: het Coachbord zelf heeft geen veld en geen bank meer, dus er valt ook
   niets meer mee te delen. Deze chips zijn platte links — niet te verslepen,
   niet aan te tikken om iemand te verzetten. */
.mini-veld {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 68 / 105;
  margin: 0 auto 10px;
  border: 2px solid #dfe8d8;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(255,255,255,.16) 49.7%, rgba(255,255,255,.48) 50%, rgba(255,255,255,.16) 50.3%),
    repeating-linear-gradient(0deg, #1c7a38 0 34px, #197235 34px 68px);
}
.mini-veld-chip {
  position: absolute;
  z-index: 1;
  display: block;
  width: min(80px, 27%);
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 4px;
  background: rgba(255,255,255,.96);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
.mini-veld-chip:hover { background: #fff; }
.mini-veld-rug {
  display: block;
  color: var(--red);
  font-family: var(--display);
  font-size: 12px;
  line-height: 1;
}
.mini-veld-naam {
  display: block;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-veld-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mini-veld-wissel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.mini-veld-wissel:hover { background: var(--green-tint); }
.mini-veld-wissel-av {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
}

/* Het videootje dat Safari op de iPhone wakker houdt. Het moet echt getekend
   worden — met display:none of visibility:hidden speelt Safari niet — dus twee
   pixels in een hoek, doorzichtig en niet aan te tikken. */
.live-wakker {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 2px;
  height: 2px;
  opacity: .01;
  pointer-events: none;
  border: 0;
}
/* Klein bolletje zolang het scherm door de app wordt aangehouden. */
.live-app.is-wakelock .live-timer-card { position: relative; }
.live-app.is-wakelock .live-timer-card:after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
}

@media (max-width: 760px) {
  .live-hero { grid-template-columns: 1fr; padding: 16px; }
  .live-hero h1 { font-size: 26px; }
  .live-score { justify-content: center; }
  /* Deze knoppen zijn momenten (rust, einde, tijd bijstellen), niet iets wat je
     elke minuut doet: compact houden, want de ruimte boven het veld is duur. */
  .live-controls { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
  .live-controls button { min-height: 40px; padding: 0 6px; font-size: 11px; }
  .live-instruction { padding: 8px 10px; font-size: 11.5px; font-weight: 700; }
  .live-error { min-height: 0; font-size: 12.5px; }
  .live-error:empty { margin: 0; }

  /* Als toast bovenaan, boven de harmonica: verscheen hij in de
     stroom, dan schoof het veld onder je vinger weg zodra er een melding kwam
     (ook van de andere telefoon). Overlappen mag: hij is er negen seconden. */
  .live-melding {
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    bottom: auto;
    z-index: 61;
    margin: 0;
    padding: 9px 11px;
    font-size: 12px;
    box-shadow: var(--shadow-md);
  }

  /* Schermvullend keuzeblad (coachbord-mobiel taak 4, §5): dekt het hele
     scherm, ook het bovenblok — &times; brengt je terug. Geen backdrop meer —
     een tik náást de tegels doet niets, alleen &times; sluit. */
  .live-fast-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }
  .live-fast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .live-fast-head strong { font-size: 22px; }
  .live-fast-head button { min-width: 44px; min-height: 44px; font-size: 22px; }

  /* Tijdlijn: de tijdknoppen zaten in dezelfde smalle kolom als de tekst. Nu
     onder de tekst, en breed genoeg om te raken. */
  .live-timeline li { grid-template-columns: minmax(0,1fr) 26px 40px 26px minmax(0,1fr); }
  .live-event-text strong { font-size: 12px; white-space: normal; }
  .live-event-acties { flex-wrap: wrap; }
  .live-event-acties button { min-width: 34px; min-height: 32px; padding: 4px 6px; }
  .live-event-verwijder { min-height: 32px; font-size: 15px; }
}

@media (max-width: 380px) {
  .live-controls button { font-size: 10.5px; }
}

/* Teamleider (beheer) hero-badge */
.tl-badge { display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--red); border-radius:5px; padding:2px 8px; vertical-align:middle; }
.tl-leader-row td { vertical-align:middle; }
.tl-owner-tag { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--green); background:var(--green-tint); border-radius:5px; padding:2px 8px; }

/* Teamleiders & rechten pagina */
.flash-ok { background:var(--green-tint); color:var(--green); border:1px solid #bfe0c6; border-radius:8px; padding:10px 14px; font-weight:700; font-size:13.5px; margin-bottom:16px; }
.tl-intro { color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 14px; }
.tl-rechten-table th.num, .tl-rechten-table td.num { text-align:center; width:120px; }
.tl-rechten-table input[type=checkbox] { width:18px; height:18px; accent-color:var(--green); cursor:pointer; }
.tl-rechten-table input[type=checkbox][disabled] { cursor:default; opacity:.6; }
.tl-actions { margin-top:16px; display:flex; justify-content:flex-end; }

/* Leader-only 'Beheer team' actiebalk op teamprofiel */
/* ── Alleen-voor-admins ──────────────────────────────────────────────────────
   Eén herkenbare rode markering voor alles wat uitsluitend beheerders zien:
   menu-items (.is-adminonly), knoppen (.btn-admin) en labels (.mw-adminonly). */
.dropdown-item.is-adminonly,
li.is-adminonly > a { color: var(--red); }
/* beheer-tabbladen: rood met een stip, onderstreping blijft (::after = de streep) */
.tab.is-adminonly { color: var(--red); }
.tab.is-adminonly:hover, .tab.is-adminonly:focus-visible { color: var(--red); background: #fbe9e9; }
.tab.is-adminonly::after { background: var(--red); }
.tab.is-adminonly::before { content: "●"; font-size: 9px; vertical-align: middle; margin-right: 5px; }
.dropdown-item.is-adminonly:hover,
li.is-adminonly > a:hover { background: #fbe9e9; color: var(--red); }
.dropdown-item.is-adminonly::after,
li.is-adminonly > a::after { content: "admin"; float: right; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 6px; margin-left: 8px; }
.mw-adminonly { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
/* rood = beheeractie (wijzig / nieuw …) en admin-only knoppen; groen blijft
   voor bevestigen/opslaan binnen een formulier */
.btn-admin,
.btn-beheer {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: var(--red); border: 1px solid var(--red); border-radius: 8px;
  padding: 8px 16px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-admin:hover,
.btn-beheer:hover { filter: brightness(1.08); color: #fff; }

/* programma: link naar mijn agenda i.p.v. de beschikbaarheidsknoppen */
.prog-agenda-link { display:inline-block; font-size:12px; font-weight:700; color:var(--green); text-decoration:none; padding:6px 10px; border:1px solid var(--line); border-radius:8px; white-space:nowrap; }
.prog-agenda-link:hover { background:var(--green-tint); border-color:var(--green); }
/* beheerknop in de tabbalk: rechts uitgelijnd achter de laatste tab, en niet
   meebewegend met de onderstreping van de tabs zelf */
.profile-tabs .tab-action { margin-left:auto; align-self:center; flex:none; padding:7px 14px; font-size:12.5px; margin-bottom:6px; }
.profile-tabs .tab-action svg { flex:none; }
@media (max-width:640px) { .profile-tabs .tab-action { margin-left:8px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Mobiel: kop, hoofdmenu, submenu's en tabbalken
   ---------------------------------------------------------------------------
   Drie dingen die op een telefoon misgingen:
   1. de merknaam nam met 38px over twee regels de halve kop in beslag;
   2. het hoofdmenu stond in kapitalen mét letterspatiëring, waardoor "mijn
      team", "mijn agenda" en "mijn wedstrijden" niet samen in beeld pasten
      en je moest schuiven om ze te vinden;
   3. submenu's openden alleen op :hover — dat bestaat niet op een aanraak-
      scherm — en werden bovendien afgeknipt door de overflow van .main-nav.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .brand { gap: 9px; }
  .brand-logo,
  .main-bar .brand-logo { height: 38px; }
  .brand-name,
  .main-bar .brand-name { font-size: 17px; line-height: .95; letter-spacing: .01em; }

  .main-bar .container { gap: 10px; padding: 10px 14px 8px; }

  /* Het voorvoegsel "mijn" verdwijnt: team / agenda / wedstrijden passen dan
     ruim samen op één regel, en met "teamleider" erbij nog net. */
  .nav-my { display: none; }

  /* Kapitalen met spatiëring kosten ruim een derde meer breedte dan gewone
     kleine letters; zonder die twee passen de mijn-items wél samen. De letter
     is bewust zo groot als de smalste gangbare telefoon toelaat: de vier items
     van een teamleider (team ▾ · agenda · wedstrijden ▾ · teamleider ▾) meten
     bij 15,5px 322px, en op 360px is er 332px — gemeten met Barlow zelf. */
  .main-nav { gap: 13px; padding-bottom: 2px; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-link {
    font-size: 15.5px;
    text-transform: none;
    letter-spacing: 0;
    gap: 4px;
    padding-bottom: 4px;
  }
  .nav-link .caret { width: 10px; height: 10px; }

  /* Een submenu binnen .main-nav (overflow-x:auto) wordt weggeknipt. Vast aan
     het scherm hangen omzeilt dat; de bovenkant zet het script per menu-item. */
  .main-nav .dropdown,
  .utility-links .dropdown {
    position: fixed;
    left: 10px;
    right: 10px;
    top: var(--mw-dd-top, 96px);
    min-width: 0;
    width: auto;
    max-height: calc(100vh - var(--mw-dd-top, 96px) - 14px);
    overflow-y: auto;
    z-index: 60;
  }
  .dropdown.has-groups { min-width: 0; }
  /* Ingetogen en compact: 7px boven en onder houdt een regel op zo'n 33px, nog
     altijd met een duim te raken maar met merkbaar minder lucht ertussen. */
  .dropdown { padding: 5px; }
  .dropdown-item { padding: 7px 11px; font-size: 13.5px; gap: 9px; line-height: 1.35; }
  .dropdown-item::before { width: 5px; height: 5px; }
  .dropdown-label { font-size: 10.5px; padding: 6px 11px 2px; letter-spacing: .06em; }
  .dropdown-meta { font-size: 10.5px; }
  .dropdown-sep { margin: 3px 9px; }

  /* Tabbalken: horizontaal schuiven zonder zichtbare balk, en compacter zodat
     er meer dan twee tabs tegelijk leesbaar zijn. */
  .tabs { gap: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 10px 10px; font-size: 12.5px; letter-spacing: .02em; }
  .profile-tabs .tab-action { padding: 7px 11px; font-size: 12px; }
  .page_slicer { gap: 6px; }
  .page_slicer .slice { font-size: 12.5px; padding: 6px 10px; }
}

@media (max-width: 380px) {
  .brand-name,
  .main-bar .brand-name { font-size: 15px; }
  .brand-logo,
  .main-bar .brand-logo { height: 34px; }
  .tab { padding: 9px 8px; font-size: 12px; }
}

/* Smaller dan 360px (iPhone SE van de eerste generatie, 320px) past het
   teamleidersmenu niet meer bij 15,5px: daar terug naar 13,5px, waarmee de
   vier items 282px meten op de 292px die er is. Drie items passen altijd. */
@media (max-width: 359px) {
  .main-nav { gap: 12px; }
  .nav-link { font-size: 13.5px; }
  .nav-link .caret { width: 9px; height: 9px; }
}

/* Op aanraakschermen bestaat hover niet: het submenu opent op een tik (zie het
   script in design_header.php) in plaats van bij het zweven van een muis. Zonder
   dit bleef een submenu na aanraking "hangen" of ging het helemaal niet open. */
@media (hover: none) {
  /* display er ook uit: anders blijft het onzichtbare paneel tikken opvangen */
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown { display: none; opacity: 0; visibility: hidden; }
  .nav-item.is-open .dropdown {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item.is-open .nav-link .caret,
  .nav-item.is-open .util-link .caret { transform: rotate(180deg); }
}

/* Foutmeldingen (vervangt de oude <font>-tags, issue #15) */
.error-message { color: var(--danger, #c00000); font-weight: 600; }


/* ---------- teamleider kiezen (team_profiel): typen en aanklikken ----------
   Hergebruikt de opmaak van de zoeksuggesties in de header (.hsr-*), maar in
   een eigen laag: die van de header hangt vast aan de headerbalk. */
.leader-pick { position: relative; max-width: 340px; }
.leader-pick input[type=text] { width: 100%; }
.hsr-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-height: 46vh; overflow-y: auto; padding: 6px;
}
.hsr-list[hidden] { display: none; }
/* de regels zijn knoppen: aanklikken slaat direct op */
.hsr-list .hsr-item {
  width: 100%; border: 0; background: none; font: inherit; text-align: left;
  cursor: pointer;
}
.hsr-list .hsr-item:hover,
.hsr-list .hsr-item.is-actief { background: var(--green-tint); color: var(--green); }

/* Kaart die een uitklaplijst moet kunnen tonen: .card knipt normaal alles af
   (overflow:hidden voor de ronde hoeken), en daar verdween de suggestielijst
   achter. */
.card.card-open { overflow: visible; }
/* overflow:visible laat de hoeken niet meer door de kaart afknippen: de kop en
   het laatste blok ronden daarom zelf af (kaartradius 14 minus de rand) */
.card.card-open > .card-head { border-radius: 13px 13px 0 0; }
.card.card-open > :last-child { border-radius: 0 0 13px 13px; }

/* Suggestielijst die in de pagina meeloopt in plaats van erboven te zweven.
   Nodig binnen tabellen: die schuiven horizontaal en knippen een zwevende
   lijst weg. */
.hsr-list.is-inline {
  position: static; max-height: 300px; margin-top: 6px; width: 100%;
}

/* het legacy uitnodigen-zoekveld in dezelfde taal als de rest */
.mw-pick { position: relative; max-width: 320px; }
.mw-pick .instant_search_field { width: 100%; }
.mw-pick .mw-pick-list {
  margin-top: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-md); padding: 4px;
  max-height: 280px; overflow-y: auto;
}
.mw-pick .mw-pick-list:empty { display: none; }
.mw-pick .mw-pick-list ul { list-style: none; margin: 0; padding: 0; }
.mw-pick .mw-pick-list li {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border-radius: 8px; font-size: 13.5px;
}
.mw-pick .mw-pick-list li:hover { background: var(--green-tint); }
.mw-pick .mw-pick-list li img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: none; }
.mw-pick .mw-pick-list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.mw-pick .mw-pick-list li:hover a { color: var(--green); }

/* Op een smal scherm schuiven tabellen horizontaal, en dat knipt een zwevende
   suggestielijst weg. Daar laten we hem gewoon meelopen in de pagina. */
@media (max-width: 720px) {
  .wb-results ul,
  .hsr-list { position: static; width: 100%; max-height: 260px; }
}

/* .data-table (o.a. het overzicht op team_profiel) miste de mobiele regel die
   .standard_table en .list wel hebben: op een smal scherm horizontaal schuiven
   in plaats van de pagina uit lopen. */
@media (max-width: 720px) {
  table.data-table {
    display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  table.data-table th,
  table.data-table td { padding: 9px 10px; font-size: 13px; }
  /* de teamkop en de gegevenskaart ademen mee */
  .team-hero-id h1 { font-size: 24px; overflow-wrap: anywhere; }
  .team-detail-label { font-size: 11px; }
  .leader-pick { max-width: 100%; }
  .mw-pick { max-width: 100%; }
}

/* team_statistieken — buiten mobiel staat de teamnaam in zijn eigen kolom en
   zijn de lange koppen van de impacttabel de gewone. */
.team-name-sub { display: none; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; letter-spacing: .01em; }
.th-kort { display: none; } /* korte kolomkop, alleen op mobiel (zie hieronder) */
.stat-aantal { white-space: nowrap; }

/* Kaartkop met ondertitel ("(laatste 30 dagen)"): gewoon gewicht, op mobiel
   een eigen regel onder de titel in plaats van rechts uitgelijnd afbreken. */
.card-head-sub { font-weight: 400; }
/* beheer_pagestats: periodekeuze en grafiek. De grafiek heeft een viewBox van
   900 breed; onder 560px schuift hij binnen zijn kaart in plaats van tot een
   onleesbaar reepje te krimpen. */
.ps-periode { margin: 0 0 12px; }
.ps-grafiek { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ps-grafiek svg { min-width: 560px; }
.stat-aantal .goal-plus { margin-left: 6px; vertical-align: middle; }
/* Deze regels staan bewust vóór het mobiele blok hieronder: daar zetten
   .team-name-sub en .th-kort op zichtbaar, en bij gelijke specificiteit wint
   de laatste regel. */

/* ═══════════════════════════════════════════════════════════════════════════
   Mobiel, tweede ronde: stand, statistiekenblok en wedstrijdlijsten
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  /* ---- stand: 13 kolommen passen niet, dus alleen wat je echt afleest ----
     Blijven staan: plaats, tenue, team, gespeeld, punten en saldo. Winst/
     gelijk/verlies, doelpunten voor en tegen en de actief-vlag vallen weg; die
     staan in de teamstatistieken. Geen schuifbalk meer: het past nu. Het tenue
     bleef eerder ook weg, maar juist daaraan herken je een ploeg in één
     oogopslag — hij krimpt hier mee in plaats van te verdwijnen. */
  table#stand_table.data-table { display: table; white-space: normal; overflow: visible; }
  /* td.kit img, niet .stand-shirt: de algemene maat komt uit een selector met
     een id én een attribuut (#stand_table img[src*="club_tenue"]) en die is
     specifieker dan id + class — de rijen bleven daardoor 46px hoog */
  #stand_table td.kit img { width: 28px; height: 28px; max-width: 28px; max-height: 28px; padding: 1px; border-radius: 6px; }
  #stand_table td.kit, #stand_table th.kit { width: 32px; padding-left: 2px; padding-right: 2px; }
  #stand_table th:nth-child(5),  #stand_table td:nth-child(5),   /* winst */
  #stand_table th:nth-child(6),  #stand_table td:nth-child(6),   /* gelijk */
  #stand_table th:nth-child(7),  #stand_table td:nth-child(7),   /* verlies */
  #stand_table th:nth-child(9),  #stand_table td:nth-child(9),   /* puntenaftrek */
  #stand_table th:nth-child(10), #stand_table td:nth-child(10),  /* doelpunten voor */
  #stand_table th:nth-child(11), #stand_table td:nth-child(11),  /* doelpunten tegen */
  #stand_table th:nth-child(13), #stand_table td:nth-child(13) { /* actief-vlag */
    display: none;
  }
  #stand_table th, #stand_table td { padding: 8px 5px; font-size: 13px; }
  #stand_table td.primary { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  #stand_table th:not(.kit):not(.pos) { width: auto; }

  /* ---- statistieken (topscorer, assists, kaarten, …): geen schuifbalk ----
     Acht kolommen liepen tot 470px door en Aantal en Gemiddelde vielen buiten
     beeld. Blijven staan: plaats, foto, naam, aantal (met de +correctie) en
     gemiddelde. De vlag valt weg en de teamnaam verhuist als tweede regel
     onder de naam (.team-name-sub, alleen hier zichtbaar). */
  table.statistieken_table.data-table,
  table.statistieken_table_beker.data-table,
  table.impact_table.data-table { display: table; white-space: normal; overflow: visible; table-layout: auto; }
  .statistieken_table .col-team, .statistieken_table_beker .col-team { display: none; }
  /* De vlagcel en de impact-avatar blijven als cel bestaan maar krijgen breedte
     nul: display:none haalt een cel uit het tabelraster, en omdat de naamkop
     drie kolommen overspant schoven Aantal en Gemiddelde dan onder de verkeerde
     kop. De teamkolom mag wél weg — die valt in kop én rij samen weg. */
  .statistieken_table .col-vlag, .statistieken_table_beker .col-vlag,
  .impact_table .col-avatar { width: 0; padding: 0; font-size: 0; line-height: 0; }
  .statistieken_table .col-vlag img, .statistieken_table_beker .col-vlag img,
  .impact_table .col-avatar img { display: none; }
  /* table.-prefix: de algemene mobiele regel voor .data-table hierboven is
     table.data-table td en wint anders op specificiteit */
  table.statistieken_table th, table.statistieken_table td,
  table.statistieken_table_beker th, table.statistieken_table_beker td,
  table.impact_table th, table.impact_table td { padding: 8px 5px; font-size: 13px; }
  .statistieken_table thead th, .statistieken_table_beker thead th,
  .impact_table thead th { font-size: 11px; letter-spacing: .03em; }
  .statistieken_table td[width], .statistieken_table th[width], .statistieken_table .pos,
  .statistieken_table_beker td[width], .statistieken_table_beker th[width], .statistieken_table_beker .pos,
  .impact_table td[width] { width: auto; }
  /* break-word, niet anywhere: met anywhere telt een naam als één letter breed
     en gaf de tabel die kolom zowat niets — "Piet Jansen" stond op 320px als
     één letter per regel. Nu is het langste woord de ondergrens. */
  .statistieken_table td.primary, .statistieken_table_beker td.primary,
  .impact_table td.primary { white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
  .statistieken_table img.player-avatar-sm,
  .statistieken_table_beker img.player-avatar-sm { width: 36px; height: 36px; max-width: 36px; padding: 1px; }
  .statistieken_table .rownum, .statistieken_table_beker .rownum { width: 22px; height: 22px; font-size: 12px; }
  .team-name-sub { display: flex; }
  .stat-aantal .goal-badge { min-width: 34px; height: 30px; padding: 0 8px; font-size: 17px; border-radius: 8px; }
  .stat-aantal .goal-plus { min-width: 26px; height: 22px; padding: 0 6px; font-size: 12px; margin-left: 4px; }
  .stat-total-label { font-size: 13px; }
  .stat-total-val { font-size: 17px; }

  /* ---- impact: gemist en G+A/wed vallen weg, de koppen worden kort ---- */
  .impact_table .col-mobiel-weg { display: none; }
  .impact_table .th-lang { display: none; }
  .impact_table .th-kort { display: inline; }

  /* ---- beheer_pagestats: de tabellen passen in plaats van te schuiven ----
     Kolommen die op een telefoon niet hoeven (totaal ooit, laatste bezoek,
     aantal pagina's) vallen weg, de koppen worden kort en een lange paginanaam
     mag afbreken. */
  table.ps-table { display: table; white-space: normal; overflow: visible; }
  table.ps-table th, table.ps-table td { white-space: normal; padding: 8px 6px; font-size: 13px; }
  table.ps-table thead th { font-size: 10.5px; letter-spacing: .03em; }
  table.ps-table .col-mobiel-weg { display: none; }
  table.ps-table .th-lang { display: none; }
  table.ps-table .th-kort { display: inline; }
  table.ps-table td.ps-pagina { overflow-wrap: anywhere; min-width: 110px; }
  table.ps-table td.ps-datum { white-space: nowrap; }
  table.ps-table td.ps-top { min-width: 120px; overflow-wrap: anywhere; }
  .card-head { flex-wrap: wrap; row-gap: 4px; }
  .card-head-sub { flex-basis: 100%; font-family: var(--sans); font-size: 12px; opacity: .85; }
}
/* Een telefoon van 320px: nog een tandje krapper, zodat de naam een woord
   breed blijft en de badge niet over de rand valt. */
@media (max-width: 360px) {
  table.statistieken_table th, table.statistieken_table td,
  table.statistieken_table_beker th, table.statistieken_table_beker td,
  table.impact_table th, table.impact_table td { padding: 7px 3px; font-size: 12.5px; }
  .statistieken_table img.player-avatar-sm,
  .statistieken_table_beker img.player-avatar-sm { width: 30px; height: 30px; max-width: 30px; }
  .stat-aantal .goal-badge { min-width: 30px; height: 27px; padding: 0 6px; font-size: 15px; }
  .stat-aantal .goal-plus { min-width: 22px; height: 20px; padding: 0 5px; font-size: 11px; margin-left: 3px; }
}


@media (max-width: 720px) {
  /* ---- statistiekenblok (speler en team): ingetogener ---- */
  .stat-cell { padding: 10px 6px; }
  .stat-val { font-size: 18px; }
  .stat-cell.is-record .stat-val { font-size: 21px; }
  .stat-lbl { font-size: 10px; letter-spacing: .03em; margin-top: 4px; }
  .stat-sub { font-size: 10px; margin-top: 3px; min-height: 0; }

  .content-head h1 { margin-bottom: 6px; }
  .card-body { padding: 14px; }
}

/* ============================================================
   MOTM-stemming op de wedstrijdpagina (issue #40)
   ============================================================ */
.motm-body { display: flex; flex-direction: column; gap: 18px; }
.motm-team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--display); font-size: 17px; color: var(--green); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 2px solid var(--red); }
.motm-totaal { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.motm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.motm-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; box-sizing: border-box; }
button.motm-opt { cursor: pointer; border-color: var(--line); background: var(--card); }
button.motm-opt:hover { background: var(--green-tint); border-color: #b6d3bd; }
.motm-opt.is-eigen { border-color: var(--green); background: var(--green-tint); }
.motm-opt.is-eigen .motm-naam::after { content: 'jouw stem'; margin-left: 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--green); border-radius: 5px; padding: 1px 6px; flex: none; }
.motm-opt.is-winnaar .motm-bar-fill { background: var(--red); }
.motm-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; border: 1px solid var(--line); }
.motm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.motm-naam { display: flex; align-items: center; font-weight: 600; font-size: 14px; min-width: 0; }
.motm-naam-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.motm-icoon { height: 15px; width: auto; margin-left: 6px; flex: none; }
.motm-bar { display: block; height: 7px; border-radius: 4px; background: #eef2ec; overflow: hidden; }
.motm-bar-fill { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .3s ease; }
.motm-pct { flex: none; width: 52px; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--display); font-size: 18px; line-height: 1; color: var(--ink); }
.motm-pct small { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted); }
.motm-status { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.motm-msg { min-height: 1px; margin-top: 4px; font-size: 13px; color: var(--red-dark); }
.motm-team.is-busy { opacity: .6; pointer-events: none; }
/* nog niet gestemd: geen tussenstand, wel een duidelijke oproep + Stem-knop per rij */
.motm-stemnu { font-family: var(--sans); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--red); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.motm-head-rechts { display: flex; align-items: baseline; gap: 10px; flex: none; }
/* Zelfde plek en formaat als "Stem nu", maar groen: je bent klaar, en je mag nog terug. */
.motm-gestemd { font-family: var(--sans); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--green); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.motm-kies { flex: none; font-family: var(--sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--green); border: 1.5px solid var(--green); border-radius: 8px; padding: 5px 12px; }
button.motm-opt:hover .motm-kies { background: var(--green); color: #fff; }

/* ============================================================
   Homepagina: volgende wedstrijd + nog te doen bovenaan (issue #40)
   Desktop: rechts boven de sidebar; mobiel: vóór het nieuws.
   ============================================================ */
.home-top { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home-top .card + .card { margin-top: 0; }
.page-grid.has-home-top { grid-template-rows: auto 1fr; }
.page-grid.has-home-top > .content { grid-column: 1; grid-row: 1 / span 2; }
.page-grid.has-home-top > .home-top { grid-column: 2; grid-row: 1; }
.page-grid.has-home-top > .sidebar { grid-column: 2; grid-row: 2; }
@media (max-width: 1000px) {
  .page-grid.has-home-top { grid-template-rows: none; }
  .page-grid.has-home-top > .content,
  .page-grid.has-home-top > .home-top,
  .page-grid.has-home-top > .sidebar { grid-column: 1; grid-row: auto; }
}
/* Man of the match op de wedstrijdpagina: op desktop rechtsboven — naast de
   opstelling en bóven Onderling — en op mobiel vóór de rest van de inhoud.
   Zelfde opzet als .home-top op de homepagina. */
.match-top { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-grid.has-match-top { grid-template-rows: auto 1fr; }
.page-grid.has-match-top > .content { grid-column: 1; grid-row: 1 / span 2; }
.page-grid.has-match-top > .match-top { grid-column: 2; grid-row: 1; }
.page-grid.has-match-top > .sidebar { grid-column: 2; grid-row: 2; }
@media (max-width: 1000px) {
  .page-grid.has-match-top { grid-template-rows: none; }
  .page-grid.has-match-top > .content,
  .page-grid.has-match-top > .match-top,
  .page-grid.has-match-top > .sidebar { grid-column: 1; grid-row: auto; }
}
/* Uitleg boven het profielformulier: waar blijven mijn gegevens? */
.profiel-privacy { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--green-tint); color: var(--ink); font-size: 12.5px; line-height: 1.5; }

/* ---------- recent actief (teamgenoten van de afgelopen 24 uur) ---------- */
.actief-body { padding: 6px 8px 10px; }
.actief-list { list-style: none; margin: 0; padding: 0; }
.actief-persoon { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.actief-persoon:hover { background: var(--green-tint); color: var(--ink); }
.actief-av { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.actief-naam { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actief-tijd { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* nog te doen */
.acties-card .card-body { padding: 6px 8px 10px; }
.acties-team { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.acties-list { list-style: none; margin: 0; padding: 0; }
.actie { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
a.actie:hover { background: var(--green-tint); color: var(--ink); }
.actie-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.actie.soort-opstelling .actie-dot { background: #e2a53a; }
.actie.soort-uitslag .actie-dot, .actie.soort-statistieken .actie-dot { background: var(--red); }
.actie-tekst { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.actie-sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actie-arrow { flex: none; color: var(--faint); }
.actie-form { margin: 0; flex: none; }
.actie-form .button { white-space: nowrap; }
.acties-flash { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--green-tint); color: var(--green); font-size: 13px; font-weight: 600; }
@media (max-width: 560px) {
  .actie.has-form { flex-wrap: wrap; }
  .actie-form { width: 100%; }
  .actie-form .button { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---------- notificatie-bel met "nog te doen" (issue #40) ---------- */
.notif-item { align-items: center; cursor: pointer; }
.notif-item .nav-notif { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.notif-item.has-notif .nav-notif { color: var(--green); }
.notif-item:hover .nav-notif { color: var(--green); }
.acties-dropdown {
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px 8px 10px;
  right: 0; left: auto;
}
/* overflow-y knipt de hoverbrug (.dropdown::before) van dit paneel af, waardoor
   het paneel sloot zodra de muis de kier tussen bel en paneel kruiste. Leg de
   brug daarom op de bel zelf, alleen zolang die open is. */
.notif-item:hover::after,
.notif-item[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 16px;
}
.acties-dropdown-head {
  padding: 8px 8px 6px; font-family: var(--display); font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.acties-leeg { padding: 14px 8px; font-size: 13px; color: var(--muted); }
.acties-dropdown .actie-sub { white-space: normal; }
/* Op een telefoon staat de bel niet tegen de schermrand, dus een paneel dat aan
   de bel hangt valt links buiten beeld. Daar hangt het aan het scherm; de
   bovenkant komt van --mw-notif-top, die de header zelf zet bij openen. */
@media (max-width: 640px) {
  .acties-dropdown {
    position: fixed;
    top: var(--mw-notif-top, 150px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - var(--mw-notif-top, 150px) - 16px);
  }
  .acties-dropdown::before { display: none; }
}
/* Ankers op de bewerkpagina en de stemkaart: de header plakt bovenaan, dus laat
   het doel daar niet onder verdwijnen (issue #40). */
#opstelling, #statistieken, #motm { scroll-margin-top: 90px; }
/* MOTM die door de stemming vastligt: tonen, niet te wijzigen (issue #40) */
.wb-motm-vast { text-align: center; }
.wb-motm-leeg { color: var(--faint); }
/* de bel sluit ook met Escape; het paneel blijft open zolang de focus erin zit */
.notif-item[aria-expanded="true"] > .acties-dropdown { display: flex; opacity: 1; visibility: visible; transform: translateY(0); }

/* AI-verslag: kaart met de knop, op de wedstrijdpagina en in het bewerkscherm */
.verslag-text{font-size:14px;line-height:1.6;color:var(--ink);margin-bottom:12px}
/* Het verslag leest als een krantenstuk: het model zet tussenkopjes met ## en
   mw_ai_verslag_html() maakt daar h4 van, op de kaart en in de nieuwslijst. */
.verslag-kop,
.news-excerpt .verslag-kop{font-family:var(--display);font-size:15px;line-height:1.25;color:var(--green);margin:16px 0 6px;letter-spacing:.01em}
.verslag-text>p:first-child,
.news-excerpt .verslag-kop:first-child{margin-top:0}
.verslag-empty{font-size:13px;color:var(--muted);margin-bottom:12px}
.verslag-msg{font-size:13px;color:var(--red-dark);margin-bottom:10px;min-height:1px}
.verslag-msg.is-ok{color:var(--muted)}
/* wachten is geen fout: die melding hoort niet in de foutkleur */
.verslag-msg.is-bezig{color:var(--muted)}
.verslag-btn{width:100%}
/* Sfeer van de wedstrijd: optionele notitie van de teamleider bij het genereren */
.verslag-sfeer{margin-bottom:12px}
.verslag-sfeer label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.verslag-sfeer input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit}
.verslag-inline .verslag-sfeer{flex-basis:100%;margin-bottom:0}
/* Wedstrijdverslag: Nieuw en Genereer AI-verslag naast elkaar (issue #40) */
.verslag-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.verslag-acties form { margin: 0; }
.verslag-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verslag-inline .verslag-btn { width: auto; }
.verslag-inline .verslag-msg { margin: 0; }
@media (max-width: 560px) {
  .verslag-acties { display: grid; grid-template-columns: 1fr; }
  .verslag-acties form, .verslag-inline, .verslag-inline .verslag-btn { width: 100%; box-sizing: border-box; }
  .verslag-acties .general_button { width: 100%; }
}

/* ── Voetregels op de wedstrijdkaarten ────────────────────────────────────────
   Stond als twee bijna identieke <style>-blokken in volgende_wedstrijd_kaart.php
   en laatste_wedstrijd_kaart.php, achter een global-vlag zodat alleen de eerste
   kaart hem uitprintte. Dat brak zodra er een regel bij kwam die maar in één van
   de twee kopieën stond. Eén plek dus. */
.kaart-voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.kaart-voet .avail-btn { padding: 5px 10px; font-size: 12px; }
.kaart-chip { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--green); border: 1.5px solid var(--green); border-radius: 8px; padding: 5px 11px; text-decoration: none; white-space: nowrap; }
.kaart-chip:hover { background: var(--green-tint); }
.kaart-chip.is-beheer { color: var(--red); border-color: var(--red); }
.kaart-chip.is-beheer:hover { background: #fbe9e9; }
/* snelknop naar het Coachbord: vol groen, want dit is dé actie langs de lijn */
.kaart-chip.is-coachbord { color: #fff; background: var(--green); border-color: var(--green); }
.kaart-chip.is-coachbord:hover { background: var(--green-dark); border-color: var(--green-dark); }
.kaart-form { display: inline; margin: 0; }
button.kaart-chip { background: none; font-family: inherit; line-height: 1.2; cursor: pointer; }
.kaart-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink);
  background: #f1f4ee; border-radius: 999px; padding: 4px 10px; }
.kaart-pill.is-motm { background: #fbf1d6; color: #8a6300; }
.next-game-card .kaart-rij + .kaart-rij { border-top: 1px solid var(--line); }

/* Persoonlijk feitje ("nog één goal tot je tiende"): één rustige regel met een
   sterretje ervoor, op de tint van de huisstijl zodat hij opvalt zonder te
   schreeuwen. Staat er niets te melden, dan rendert de div helemaal niet. */
.kaart-feit { display: flex; align-items: flex-start; gap: 8px; padding: 9px 16px 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.45; color: var(--ink); background: var(--green-tint, #eef5ef); }
.kaart-feit::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background-repeat: no-repeat; background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230c5a26'%3E%3Cpath d='M12 2l2.6 6.3 6.8.5-5.2 4.4 1.6 6.6L12 16.3 6.2 19.8l1.6-6.6L2.6 8.8l6.8-.5z'/%3E%3C/svg%3E"); }

/* Coachbord: wissels vrij bewerken — rode vlag bij een wisselmoment dat niet
   meer kan, en de checklist "Nog na te kijken" onder de tijdlijn (bewerkkaart
   en app). Zie mw_live_controle(). */
.live-timeline li.is-fout { --tl-accent: var(--red); }
.live-timeline li.is-fout .live-event-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(224,42,42,.18); }
.live-event-fout { display: block; margin-top: 2px; font-size: .78rem; font-style: normal; color: var(--red-dark); }
.tl-controle { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--red); border-left-width: 4px;
  border-radius: 8px; background: rgba(224,42,42,.06); }
.tl-controle-kop { display: block; margin-bottom: 4px; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--red-dark); }
.tl-controle-lijst { margin: 0; padding-left: 18px; }
.tl-controle-lijst li { margin: 4px 0; line-height: 1.4; }
.tl-controle-sprong { margin-left: 4px; white-space: nowrap; }
.tl-controle-rust { margin-left: 6px; padding: 2px 8px; font: inherit; font-size: .85rem; border: 1px solid var(--red);
  border-radius: 6px; background: #fff; color: var(--red-dark); cursor: pointer; }
.tl-controle-rust:hover { background: var(--red); color: #fff; }
.cb-herstel-rij.is-fout { border-left: 3px solid var(--red); padding-left: 8px; }

/* ── Lokaasveld op openbare formulieren (functions/functions_spam.php) ────────
   Bewust niet display:none of visibility:hidden: de betere spambots slaan een
   veld dat zo is verstopt over, en dan vangt het lokaas niets meer. Dit zet het
   uit beeld terwijl het voor een bot een gewoon invulbaar veld blijft. Een
   schermlezer en de tab-toets gaan er via aria-hidden en tabindex=-1 langsheen,
   dus een bezoeker komt er nooit in terecht. */
.mw-lokaas {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DE WEDSTRIJDKAART — één opmaak voor élke wedstrijdlijst
   ═══════════════════════════════════════════════════════════════════════════
   Hoort bij mw_wedstrijd_kaart() in functions/functions_wedstrijden.php.
   Programma, uitslagen, agenda, "volgende/laatste wedstrijd", het spelerprofiel
   en het beheerscherm delen deze regels; er is dus geen tweede wedstrijdopmaak
   meer die je apart moet bijwerken.

   Het geraamte ligt vast, ook als een gegeven ontbreekt:

     ┌─┬───────┬─────────────────────────────────────────────┐
     │▌│  za   │ thuisploeg                               4  │
     │ │  12   │ uitploeg                                 1  │
     │ │  sep  │ thuis · competitie · locatie · vorm         │
     │ │ 21:00 │ statistieken                                │
     └─┴───────┴─────────────────────────────────────────────┘

   Drie keuzes dragen het geheel:

   1. De ploegen staan op élke breedte onder elkaar, met hun eigen doelpunten
      erachter. Er was ook een "3 - 1" in een vak ertussen; op een telefoon was
      dat dubbelop en op een breed scherm de reden dat de kolommen niet
      uitlijnden (de middenkolom werd zo breed als zijn inhoud). Nu is er maar
      één plek waar een doelpunt kan staan.
   2. De uitkomst is een kleurstreep van 3px links, geen badge van 40px. Die
      badge zei met een W wat "4 - 1" met de winnaar vetgedrukt al zei.
   3. De aftraptijd staat onder de datum in plaats van in een rood balkje: dat
      is dezelfde vraag ("wanneer?"), en zo staan alle tijden van een lijst
      recht onder elkaar in plaats van te schuiven met de lengte van de
      locatienaam. Een gespeelde wedstrijd laat die plek gewoon leeg.
   ═══════════════════════════════════════════════════════════════════════════ */

.result-list { padding: 6px 0; }

.result-row {
  display: grid;
  grid-template-columns: 3px 52px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 12px 6px 13px 0;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.result-row:first-child { border-top: 0; }
.result-month + .result-row { border-top: 0; }
.result-row:hover .result-team-naam { color: var(--green); }
/* Vanuit "Nog te doen" of een mail spring je met #wed<id> naar één wedstrijd.
   --mw-kop is de gemeten hoogte van de plakkende kop (design_header.php);
   zonder die marge landt de rij eronder en denk je dat de link niets doet. */
.result-row[id^="wed"],
.result-row[id^="ev"] { scroll-margin-top: calc(var(--mw-kop, 190px) + 14px); }
.result-row[id^="wed"]:target,
.result-row[id^="ev"]:target { background: var(--green-tint); }
/* Staan er knoppen naast de rij (agenda, beheer), dan is de link zelf het
   raster en hangen de knoppen eronder in de derde kolom. Zo springt de rij
   met knoppen even ver in als de rij zonder. */
.result-row:has(.result-main) { display: block; padding-right: 0; }
.result-main {
  display: grid;
  grid-template-columns: 3px 52px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.result-main:hover .result-team-naam,
.result-main:hover .result-event-title { color: var(--green); }

/* ── 1. de kleurstreep: de uitkomst vanuit jouw ploeg ──────────────────────
   Altijd aanwezig (dus de kolom staat vast), maar alleen gekleurd als er iets
   te melden valt. Een afgelaste of nog te spelen wedstrijd heeft geen
   uitkomst; die laat de streep leeg in plaats van er een grijs stompje neer
   te zetten dat als een renderfout leest. */
.result-uitkomst { align-self: stretch; border-radius: 0 3px 3px 0; background: transparent; }
.result-uitkomst.is-win     { background: var(--green); }
.result-uitkomst.is-verlies { background: var(--red); }
.result-uitkomst.is-gelijk  { background: #8d9b91; }

/* ── 2. de datumkolom ──────────────────────────────────────────────────────
   Tekst, geen kaartje: het kader eromheen voegde niets toe naast de streep en
   de scheidingslijn tussen de rijen. Vaste breedte, want daar hangt de
   uitlijning van de hele lijst aan. */
.result-date-card {
  display: block;
  text-align: center;
  padding-top: 1px;
  color: inherit;
  text-decoration: none;
}
.result-date-dow {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.result-date-day {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.05;
}
.result-date-month {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
/* De aftraptijd: het enige gekleurde vlakje in de kolom, en groen in plaats
   van het oude rode balkje — rood is op deze site de kleur van "let op",
   en een aanvangstijd is geen waarschuwing. */
.result-date-time {
  display: block;
  margin-top: 4px;
  padding: 3px 1px;
  border-radius: 5px;
  background: var(--green-tint);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.result-date-card.is-event .result-date-time { background: #fbf1d6; color: #8a6300; }

/* ── 3. de ploegen ─────────────────────────────────────────────────────────
   Twee regels onder elkaar: shirt, naam, doelpunten. De namen krijgen zo de
   hele breedte — "Zwaluwen Utrecht '11 35+3" hoeft niet meer af te breken op
   een halve kolom — en de twee cijfers staan recht onder elkaar. */
.result-block { min-width: 0; }
.result-match { display: flex; flex-direction: column; gap: 3px; }
/* Op een breed scherm mag de uitslag niet losraken van de teamnaam; de kolom
   houdt wel een vaste plek, zodat de cijfers van alle rijen op elkaar staan. */
.result-match { max-width: 560px; }

.result-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text);
}
/* Teamnamen nooit afkappen: "Zwaluwen Utrecht '11 35+3" moet je heel kunnen
   lezen. Ze breken af over twee regels; de rij groeit gewoon mee. */
.result-team-naam { flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.25; }
.result-team.is-winnaar .result-team-naam { font-weight: 800; color: var(--ink); }
.result-shirt { width: 24px; height: 24px; object-fit: contain; flex: none; }
.result-team-score {
  flex: none;
  min-width: 20px;
  text-align: right;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.result-team.is-winnaar .result-team-score { color: var(--ink); }

/* ── 4. de metaregel ───────────────────────────────────────────────────────
   Afgelast · thuis/uit · soort · locatie · vorm · statistieken, in die
   volgorde. Wat ontbreekt laat geen gat achter — de rest schuift aan — maar
   de volgorde ligt vast, zodat je in een lijst altijd op dezelfde plek kijkt. */
.match-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-top: 7px;
}
/* "thuis competitie Sportpark De Engh" liep als één zin aan elkaar: drie
   labels in dezelfde kleur met alleen een gat ertussen. Een puntje ertussen
   maakt er weer drie losse feiten van. Alleen tussen de tekstlabels — de
   vormbalkjes en de statistieken zijn al blokjes op zichzelf. */
.match-meta > :is(.result-tag, .result-type, .result-location)
  + :is(.result-tag, .result-type, .result-location)::before {
  content: "·";
  margin-right: 7px;
  color: var(--faint);
  font-weight: 700;
}
.result-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-tag.is-afgelast { color: var(--red-dark); }
/* het soort wedstrijd (competitie/beker): rustig label, nooit de blikvanger */
.result-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.match-vorm { display: inline-flex; align-items: center; gap: 7px; }
.match-form { display: flex; gap: 3px; flex: none; }
/* Een ploeg zonder vorm (net gepromoveerd, eerste speelronde) liet een leeg
   flex-item staan; de gap eromheen schoof de wél gevulde reeks dan opzij. */
.match-form:empty { display: none; }
/* Twee reeksen naast elkaar: een streepje maakt zichtbaar waar de thuisploeg
   ophoudt en de tegenstander begint. Alleen als er écht twee zijn. */
.match-form.home:not(:empty) + .match-form.away:not(:empty) {
  padding-left: 7px;
  border-left: 1px solid var(--line);
}

/* statistiek-pillen van deze speler bij deze wedstrijd */
.result-pillen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
/* Boven de drie krijgen ze een eigen regel: anders duwen ze de locatie weg. */
.result-pillen.is-veel { flex-basis: 100%; margin-top: 1px; }
.result-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.result-pill img { width: 15px; height: 15px; object-fit: contain; display: block; }
/* Een ja/nee-statistiek (keeper, man van de wedstrijd, de was) heeft geen
   getal; alleen het icoon, in groen zodat het niet als een vergeten cijfer
   leest. Vandaar ook geen minimale breedte voor een getal dat er niet is. */
.result-pill.is-vlag img { filter: none; opacity: .95; }
.result-pill.is-geel img,
.result-pill.is-rood img { width: 13px; height: 16px; }

/* ── 5. een eigen regel onder de kaart ─────────────────────────────────────
   Het uitslag-invulveld van het beheerscherm, en (buiten de link) de
   beschikbaarheidsknoppen van de agenda. Allebei springen ze even ver in als
   de teamnamen, zodat de rij één linkerkantlijn houdt. */
.result-onder { display: block; margin-top: 8px; }
.result-row:has(.result-main) > *:not(.result-main) {
  display: block;
  margin: 8px 0 0 67px;
  padding-right: 6px;
}

/* ── 6. dezelfde kaart op een telefoon ─────────────────────────────────────
   Hetzelfde geraamte, alleen krapper: er is niets meer dat op een smal scherm
   van plek hoeft te veranderen. */
@media (max-width: 720px) {
  .result-row,
  .result-main { grid-template-columns: 3px 46px minmax(0, 1fr); column-gap: 10px; }
  .result-row { padding: 11px 4px 12px 0; }
  .result-date-day { font-size: 19px; }
  .result-date-time { font-size: 11.5px; }
  .result-team { font-size: 14.5px; gap: 7px; }
  .result-shirt { width: 22px; height: 22px; }
  .result-team-score { font-size: 17px; }
  .result-row:has(.result-main) > *:not(.result-main) { margin-left: 59px; }
}

/* Een telefoon van 320px: de teamnaam mag het krapst, de rest krimpt mee. */
@media (max-width: 380px) {
  .result-row,
  .result-main { grid-template-columns: 3px 42px minmax(0, 1fr); column-gap: 8px; }
  .result-team { font-size: 13.5px; gap: 6px; }
  .result-shirt { width: 20px; height: 20px; }
  .result-date-time { font-size: 11px; }
  .result-row:has(.result-main) > *:not(.result-main) { margin-left: 53px; }
}

/* ── 7. de wedstrijdkaart als losse kaart ("volgende/laatste wedstrijd") ───
   Dezelfde rij, maar dan als enige inhoud van een .card. Hij mag daar wat meer
   lucht hebben en heeft geen scheidingslijn nodig. */
.next-game-card .card-body { padding-top: 6px; padding-bottom: 6px; }
/* rechts wél lucht houden: het doelpuntenaantal staat nu achteraan de regel en
   liep met padding 0 tegen de rand van de kaart, die het afsneed */
.next-game-card .result-row { border-top: 0; padding: 10px 6px 10px 0; }

/* ── Standen: welk team is van jou? ────────────────────────────────────────
   Een poule heeft al gauw veertien regels en dan zoek je elke keer opnieuw naar
   de jouwe. De regel van je eigen team(s) krijgt een groene rand aan de
   linkerkant en een klein label achter de naam. .is-you (het team waar je op
   kijkt) blijft de zachte tint — dat zijn twee verschillende vragen: "welke
   pagina kijk ik" en "waar sta ík". mw_mijn_team_ids() bepaalt het laatste. */
.data-table tr.is-mijn-team td:first-child,
.standings tr.is-mijn-team td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.data-table tr.is-mijn-team td,
.standings tr.is-mijn-team td { background: var(--green-tint); }
.stand-jij {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* Krapper, maar wél inline: als "block" duwde dit label élke gemarkeerde rij
     een regel hoger, ook waar de naam kort genoeg was om het ernaast te zetten.
     Past het niet, dan wipt het vanzelf naar de volgende regel. */
  .stand-jij { margin-left: 5px; padding: 1px 5px; font-size: 9px; }
}

/* De kruistabel (?p=team_kruistabel) is een matrix van veertien bij veertien;
   daar wil je je eigen rij én kolom kunnen aanwijzen. Zelfde groen als in de
   stand, en het tenue komt uit dezelfde mw_team_shirt_img(). */
#alleuitslagen_table tr.is-mijn-team td { background: var(--green-tint); }
#alleuitslagen_table tr.is-mijn-team td:first-child { box-shadow: inset 3px 0 0 var(--green); }
#alleuitslagen_table th.is-mijn-team { background: var(--green-tint); box-shadow: inset 0 3px 0 var(--green); }
#alleuitslagen_table td.kit { white-space: nowrap; }
#alleuitslagen_table .stand-shirt { width: 34px; height: 34px; max-width: 34px; max-height: 34px; }

/* ── DE TENUEMUUR (?p=club_tenue) ───────────────────────────────────────────
   Ruim vijfhonderd shirtjes waaruit je er één aanwijst. Ze stonden elk in een
   eigen <form> zonder opmaak (die class zat alleen in het dode style.css) en
   liepen daardoor als een lange kolom over de pagina. Nu één raster, één
   formulier, en het gekozen tenue draagt de groene rand. */
.tenue-muur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
  margin: 14px 0 24px;
}
.tenue_button {
  display: block;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.tenue_button img { display: block; width: 100%; height: auto; }
.tenue_button:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.tenue_button.is-gekozen { border: 2px solid var(--green); padding: 3px; background: var(--green-tint); }

/* Een leeg tenue in de stand is voor een beheerder een link naar de tenuekiezer
   van die club; stippellijn zodat je ziet dat er iets te doen is. */
.kit-leeg { display: inline-block; line-height: 0; border-radius: 9px; outline: 1px dashed var(--line); }
.kit-leeg:hover { outline-color: var(--green); }

/* ── GEGEVENS BIJWERKEN (?p=beheer_data_bijwerken) ──────────────────────────
   Per club een kaart met wat er nu staat en wat de bronnen voorstellen. De
   tenuekeuze is bewust géén lijstje codes maar een rij shirtjes: aan "t_882"
   zie je niets, aan het plaatje alles. */
.md-filter {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px;
}
.md-filter label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.md-bronnen { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
.md-club { margin-bottom: 14px; }
.md-nu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.md-nu-vak {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 46px; padding: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; color: var(--faint);
}
.md-nu-vak img { max-height: 40px; max-width: 64px; object-fit: contain; }
.md-voorstellen td { vertical-align: middle; }

/* Meerdere bronnen voor hetzelfde veld: keuzerondjes onder elkaar in één cel,
   zodat zichtbaar is dat het alternatieven zijn en niet losse toevoegingen. */
.md-keuze { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px;
	border-radius: 6px; cursor: pointer; }
.md-keuze:hover { background: rgba(0,0,0,.04); }
.md-keuze input { margin: 0; flex: 0 0 auto; }
.md-keuze strong { flex: 0 1 auto; }
.md-keuze .content-sub { font-size: 12px; }
.md-keuze.is-top strong { color: var(--green); }
@media (prefers-color-scheme: dark) {
	.md-keuze:hover { background: rgba(255,255,255,.06); }
}
.md-voorbeeld {
  max-height: 44px; max-width: 90px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px;
}
.md-tenues { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.md-tenue { display: inline-block; cursor: pointer; line-height: 0; }
.md-tenue input { position: absolute; opacity: 0; pointer-events: none; }
.md-tenue img {
  width: 42px; height: 42px; object-fit: contain; padding: 2px;
  background: #fff; border: 2px solid var(--line); border-radius: 8px;
}
.md-tenue input:checked + img { border-color: var(--green); background: var(--green-tint); }
.md-kleurzoek { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.md-kleurzoek input { width: 190px; }
@media (max-width: 620px) {
  .md-filter { gap: 8px; }
  .md-voorstellen thead { display: none; }
  .md-voorstellen td { display: block; padding: 3px 8px; }
  .md-voorstellen tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
}
/* Een afgekeurd voorstel is normaal uit beeld; met "ook afgekeurde" komt het
   terug — gedempt, met de ↩ om de afkeuring in te trekken. */
.md-voorstellen tr.is-afgekeurd td { opacity: .55; }
.md-voorstellen tr.is-afgekeurd td:nth-child(2) { opacity: 1; }
.md-terug { cursor: pointer; white-space: nowrap; font-size: 15px; }
/* Waarom een bron niets zei — per bron één regel, zodat "geen voorstellen" niet
   leest als "de bron weet het niet" terwijl hij niet eens gevraagd kon worden. */
.md-stil { margin: 6px 0 0 18px; font-size: 13px; }
.md-stil li { margin: 2px 0; }
/* De clubcode met de hand invullen: de sleutel waar voetbal.nl op draait staat
   in het adres van de clubpagina, dus plakken moet net zo makkelijk zijn. */
.md-codeveld { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; }
.md-codeveld input { width: 280px; }
/* Meerdere gelijkende clubs op voetbal.nl: kaarten met logo, naam en plaats om
   uit te kiezen in plaats van een blinde gok op de eerste. */
.md-kaarten { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.md-kaart {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 120px; padding: 8px; text-align: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px;
}
.md-kaart:hover { background: rgba(0,0,0,.04); }
.md-kaart img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.md-kaart strong { font-size: 13px; }
.md-kaart .content-sub { font-size: 11px; }
.md-kaart input[type="radio"]:checked ~ strong { color: var(--green); }
@media (prefers-color-scheme: dark) {
	.md-kaart:hover { background: rgba(255,255,255,.06); }
}
/* Herkomst van de huidige waarde: bron, datum en wie — met "terug naar
   vorige" ernaast waar er nog een eerdere waarde is om naar terug te gaan.
   Eigen klasse (niet .md-terug): die draagt al het label bij een afgekeurd
   voorstel ("afkeuring intrekken", 15px) — dezelfde naam op deze knop (11px)
   liet de een de opmaak van de ander overnemen (fixronde 1, klein 5). */
.md-herkomst { margin-top: 4px; font-size: 11px; color: var(--faint); }
.md-terugknop {
  background: none; border: none; padding: 0; margin-left: 4px;
  color: inherit; text-decoration: underline; font: inherit; font-size: 11px;
  cursor: pointer;
}
/* Een allang bevestigd veld zonder nieuw voorstel (adres, telefoon,
   opgericht, …) valt uit de voorstellentabel — maar herkomst en "terug naar
   vorige" moeten er wel blijven (fixronde 1, belangrijk 2). */
.md-eerder { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.md-eerder-lijst { list-style: none; margin: 0; padding: 0; }
.md-eerder-lijst li { margin: 4px 0; font-size: 13px; }
/* Onzichtbare eerste submit-knop van het formulier: Enter in een tekstvak
   activeert anders de eerste submit-knop in DOM-volgorde (fixronde 1,
   kritiek 1) — met position:absolute blijft hij het default-doel zonder in
   beeld te komen; display:none/hidden zou hem daarvoor laten afvallen. */
.md-default-submit { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }