/* ============================================================================
   uwtornooi — design system (Tournify-stijl handoff: UwTornooi.dc.html)
   Cream + groen, Belgisch. Fonts: Bricolage Grotesque / Figtree / JetBrains Mono.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');

:root {
    --bg:        #fbfaf6;
    --ink:       #1a1814;
    --muted:     #5c584f;
    --muted-2:   #6b6760;
    --muted-3:   #8a857c;
    --muted-4:   #9a958b;
    --muted-5:   #bdb8ad;

    --line:      #ece9e0;
    --line-2:    #f0ede5;
    --line-3:    #f5f2ec;
    --line-4:    #eceae3;
    --line-5:    #e0ddd3;
    --line-6:    #d8d4c8;

    --green:        oklch(0.62 0.14 150);
    --green-dark:   oklch(0.42 0.1 150);
    --green-deep:   oklch(0.4 0.09 150);
    --green-text:   oklch(0.45 0.13 150);
    --green-text-2: oklch(0.5 0.13 150);
    --green-tint:   oklch(0.96 0.03 150);
    --green-tint-2: oklch(0.95 0.04 150);
    --green-line:   oklch(0.91 0.04 150);

    --red:       oklch(0.6 0.2 25);
    --red-text:  oklch(0.55 0.16 25);

    --display: 'Bricolage Grotesque', sans-serif;
    --body:    'Figtree', sans-serif;
    --mono:    'JetBrains Mono', monospace;

    --maxw: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
    font-family: var(--body);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ---- typografie ---- */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.h-hero  { font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.h-sec   { font-family: var(--display); font-weight: 800; font-size: 28px; margin: 0; }
.h-page  { font-family: var(--display); font-weight: 800; font-size: 26px; margin: 0; }
.mono    { font-family: var(--mono); }
.muted   { color: var(--muted-4); }

/* ---- knoppen ---- */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1;
    padding: 13px 20px; border-radius: 10px; border: 0; cursor: pointer;
    text-decoration: none; transition: filter .12s ease, transform .12s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-dark  { background: var(--ink); color: #fff; }
.btn-white { background: #fff; color: var(--green-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-5); }
.btn-lg    { font-size: 16px; padding: 16px 28px; border-radius: 11px; }
.btn-sm    { font-size: 13px; padding: 9px 15px; border-radius: 8px; }

/* ---- pill / badge ---- */
.pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 12px; line-height: 1;
    padding: 7px 12px; border-radius: 20px;
}
.pill-green { background: var(--green-tint-2); color: var(--green-text); }
/* Tegenhanger van pill-green: iets dat niet gelukt is (bv. een mislukte betaling). */
.pill-red   { background: #fdeaea;             color: var(--red-text); }
.pill-live  { color: var(--red-text); }
.pill-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }

/* tornooi-status: concept grijs · open groen · gesloten oranje · bezig geel · afgelopen rood */
/* Statuslabels zijn hele zinnen ("Inschrijvingen zijn afgesloten") — niet binnen
   de pill afbreken; de rij eromheen mag wél wrappen (zie .tor-kaart-kop). */
.pill-st           { font-size: 11px; background: var(--line-3); color: var(--muted-2); white-space: nowrap; }
.pill-st-concept   { background: var(--line-3);       color: var(--muted-2); }
.pill-st-open      { background: var(--green-tint-2); color: var(--green-text); }
.pill-st-gesloten  { background: #ffedd5;             color: #b45309; }
.pill-st-bezig     { background: #fdf5c9;             color: #8a6d00; }
.pill-st-afgelopen { background: #fdeaea;             color: var(--red-text); }
.dot-sm { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }

/* ---- kaarten ---- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card-hd { padding: 16px 20px; font-family: var(--display); font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--line-2); }
.card-pad { padding: 18px 20px; }
.brandmark { width: 1.5em; height: 1.5em; background: url('../images/logo/icoon.svg') center/contain no-repeat; display: inline-block; flex: none; }

/* ---- landing nav ---- */
.lnav { display: flex; align-items: center; justify-content: space-between; padding: 18px 56px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.01em; cursor: pointer; }
.brand .tld { color: var(--muted-4); font-weight: 600; }
.lnav-links { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 14px; color: var(--muted); }
.lnav-links span, .lnav-links a { cursor: pointer; }
.lnav-lang { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lnav-lang a { color: var(--muted-4); text-decoration: none; }
.lnav-lang a.actief { color: var(--ink); font-weight: 800; }

/* ---- landing secties (grid-layouts; responsive verderop) ---- */
.lhero   { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 54px 56px 64px; }
.lstats  { display: grid; grid-template-columns: repeat(5, 1fr); }
.lstat-num  { font-size: 32px; color: var(--green-text); line-height: 1; }
.lstat-word { font-size: 24px; } /* woordvariant ("eenvoudige") past niet op 32px */
.lsteps  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lsports { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.lcontact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; padding: 56px; }
.lcontact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sponsorstrip { padding: 40px 56px; }
.sponsorstrip-compact { padding: 22px 0 2px; margin-top: 36px; }

/* Vrije plek in de sponsorstrip ("Uw logo hier?"). Stond eerst als afbeelding
   tussen de sponsorlogo's, maar tekst in een afbeelding kan niet mee vertalen —
   daarom HTML met t(). Stippellijn = "hier is nog plaats". */
.sponsor-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 999px;
    border: 1.5px dashed var(--muted-5);
    font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .05em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    color: var(--muted-3); background: var(--line-3);
    transition: color .2s, border-color .2s, background .2s;
}
.sponsor-cta:hover { color: var(--green-text); border-color: var(--green); background: var(--green-tint-2); }
.sponsor-cta-compact { padding: 8px 14px; font-size: 11px; }

/* ---- social-link (Instagram: homepage-contactblok + footers) ---- */
.lsocial { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; font-weight: 600; }
.lsocial svg { width: 17px; height: 17px; flex: none; }
.lsocial:hover { color: var(--green-text); }
/* live-pagina: "powered by"-regel en de social-link naast elkaar, breekt af op telefoon */
.live-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px; }

/* ---- app-promotie (store-badges) ---- */
.lapp-box { background: var(--green-deep); border-radius: 18px; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.lapp-badges { display: flex; gap: 14px; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 11px; background: #000; color: #fff; text-decoration: none; border-radius: 12px; padding: 10px 18px; transition: transform .12s ease, box-shadow .12s ease; }
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge .sb-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge .sb-klein { font-size: 11px; opacity: .85; }
.store-badge .sb-groot { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.lapp-tekst { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.lapp-shot { flex: none; }
.lapp-shot img { width: 232px; max-width: 42vw; border-radius: 26px; box-shadow: 0 20px 55px rgba(0,0,0,.38); display: block; }

/* ---- standings (stand) ---- */
.stand-grid { display: grid; gap: 5px; align-items: center; }
.stand-head { font-weight: 700; font-size: 11px; color: var(--muted-4); text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; }
.stand-row  { padding: 12px; font-weight: 600; font-size: 13px; border-radius: 9px; }
.stand-row.lead { background: var(--green-tint); }
.stand-row .pos { font-weight: 800; color: var(--muted-5); }
.stand-row.lead .pos { color: var(--green-text-2); }

/* ---- clublogo's naast ploegnamen (stand, schema, uitslagen, bracket, ploegen) ---- */
.plg-team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; vertical-align: middle; }
.plg-team .plg-naam { min-width: 0; overflow-wrap: anywhere; }
.plg-logo {
    width: 22px; height: 22px; flex: none;
    border-radius: 5px; object-fit: contain; background: #fff;
}
.plg-logo--groot { width: 34px; height: 34px; border-radius: 9px; }
/* Lege plaatshouder: houdt de logobreedte vrij bij ploegen zonder logo, zodat
   de namen in de stand allemaal op dezelfde x-positie beginnen. */
.plg-logo--leeg { background: none; }
/* In de stand blijven de rijen even hoog, ook als maar enkele ploegen een logo
   hebben (negatieve marge: het logo mag buiten de tekstregel uitsteken). */
.stand-grid .plg-logo { width: 20px; height: 20px; margin-block: -3px; }
@media (max-width: 640px) {
    .plg-logo { width: 18px; height: 18px; border-radius: 4px; }
    .stand-grid .plg-logo { width: 18px; height: 18px; }
    .plg-logo--groot { width: 30px; height: 30px; border-radius: 8px; }
}

/* Binnenkant van een standkaart (kop + rijen). */
.stand-wrap { padding: 6px 10px 12px; }

/* Telefoon: smallere cijferkolommen in de stand, zodat de ploegnaam (met
   clublogo ernaast) op één regel blijft. De kolombreedtes staan inline per rij,
   vandaar !important. Rijen met 6 kolommen (ladder zonder rating) gebruiken
   gewoon de eerste zes waarden. */
@media (max-width: 560px) {
    .stand-grid {
        grid-template-columns: 20px minmax(0, 1fr) 20px 20px 20px 26px 28px !important;
        gap: 2px;
    }
    /* Sets-poules (volleybal, tennis, padel …) hebben één kolom extra: naast
       het setsaldo ook het saldo van de punten binnen de sets. Dat cijfer loopt
       op tot drie tekens ("−37"), vandaar de bredere laatste saldokolom. */
    .stand-grid--sets {
        grid-template-columns: 18px minmax(0, 1fr) 18px 18px 18px 24px 30px 26px !important;
    }
    /* De voorbeeldkaart op de homepage heeft maar 5 kolommen (#, ploeg, G, +/−,
       punten). Met de breedtes hierboven kreeg +/− 20px en plakte "−12" tegen
       het puntentotaal ("−122"), dus die kaart krijgt eigen breedtes. */
    .stand-grid--home {
        grid-template-columns: 20px minmax(0, 1fr) 26px 36px 32px !important;
        gap: 4px;
    }
    /* Kop en rijen moeten dezelfde horizontale padding houden, anders vallen de
       kolommen van de kop naast die van de rijen. */
    .stand-head { font-size: 10px; padding: 8px 4px; }
    .stand-row { padding: 11px 4px; }
    .stand-wrap { padding: 6px 4px 12px; }
}

/* ---- admin shell ---- */
.adm-top { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; }
.adm-grid { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 56px); }
.adm-side { background: var(--bg); border-right: 1px solid var(--line-4); padding: 18px 0; }
.adm-nav { display: flex; align-items: center; gap: 12px; padding: 12px 22px; cursor: pointer; font-size: 14px; line-height: 1; font-weight: 600; color: var(--muted-2); border-left: 3px solid transparent; text-decoration: none; }
.adm-nav .ic { width: 18px; height: 18px; border-radius: 5px; background: var(--line-6); flex: none; }
.adm-nav.active { font-weight: 700; color: var(--green-dark); border-left-color: var(--green-dark); }
.adm-nav.active .ic { background: var(--green); }
.adm-grp + .adm-grp { margin-top: 10px; }
/* hoofdgroep-kop met klein lijntje eronder */
.adm-grp-titel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin: 0 22px 6px; padding: 10px 0 7px; border-bottom: 1px solid var(--line-4); }
.adm-content { padding: 36px 44px; background: #fff; }

/* ---- starterschecklist (dashboard sec=algemeen, eerste setup) ---- */
.start-card { max-width: 640px; margin-bottom: 24px; }
.start-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.start-titel { font-family: var(--display); font-weight: 800; font-size: 16px; }
.start-sub { font-size: 13px; margin-top: 2px; line-height: 1.45; }
.start-voortgang { background: var(--green-tint); color: var(--green-text); font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: 20px; white-space: nowrap; flex: none; }
.start-stap { display: flex; align-items: center; gap: 14px; padding: 13px 20px; text-decoration: none; color: inherit; }
.start-stap + .start-stap { border-top: 1px solid var(--line-2); }
.start-stap:hover { background: var(--bg); }
.start-num { width: 26px; height: 26px; border-radius: 50%; background: var(--line-4); color: var(--muted-2); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.start-stap.done .start-num { background: var(--green); color: #fff; }
.start-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.start-lbl { font-weight: 700; font-size: 14px; }
.start-stap.done .start-lbl { color: var(--muted-2); text-decoration: line-through; }
.start-x { font-size: 12.5px; line-height: 1.45; }
.start-opt { background: #eef0f3; color: #5b6573; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 10px; margin-left: 7px; vertical-align: middle; }
.start-pijl { color: var(--muted-4); font-weight: 700; flex: none; }
.start-stap.done .start-pijl { visibility: hidden; }
@media (max-width: 640px) {
    .start-hd, .start-stap { padding-left: 14px; padding-right: 14px; }
}

/* ---- categorie-kleuren ---- */
/* nummer-badge in de categorielijst (achtergrondkleur = categoriekleur, inline) */
.cat-badge { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex: none; }
/* klein gekleurd bolletje vóór een categorienaam, overal op het dashboard */
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; }
/* swatch-palet onder een categorie in de indeling-lijst */
.cat-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding-left: 48px; }
.cat-swatch { width: 22px; height: 22px; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .1s ease; }
.cat-swatch:hover { transform: scale(1.12); }
.cat-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
@media (max-width: 640px) {
    .cat-swatches { padding-left: 0; }
}

/* ---- merk-kleurkiezer (eigen huisstijl) ---- */
.merk-swatch { width: 28px; height: 28px; border-radius: 7px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .1s ease; }
.merk-swatch:hover { transform: scale(1.12); }
.merk-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* ---- form-velden (read-only weergave uit design) ---- */
.field { border: 1px solid var(--line-5); border-radius: 10px; padding: 13px 15px; font-weight: 500; font-size: 15px; width: 100%; font-family: var(--body); color: var(--ink); background: #fff; }
.field-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 9px; }
/* Veldlabel met een leegmaakknopje ernaast (datumvelden: type="date" heeft er geen).
   De knop staat naast het label i.p.v. in het veld: de native kalender-icoon zit
   rechts in het veld en verschilt per browser/mobiel, daar botst hij niet mee. */
.lbl-wisrij { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.uwt-datum-wis {
    flex: none; margin: 0 0 9px; padding: 0; border: 0; background: none;
    font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1;
    color: var(--muted-2); text-decoration: underline; cursor: pointer;
}
.uwt-datum-wis:hover { color: var(--ink); }
.uwt-datum-wis[hidden] { display: none; }
/* Veldlabel met verduidelijking + hulp-icoontje (wikkelt op smalle schermen). */
.lbl-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lbl-alias { font-weight: 500; font-size: 12px; color: var(--muted-3); }
.lbl-help {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-6);
    font-size: 11px; font-weight: 700; line-height: 1; color: var(--muted-3); text-decoration: none;
}
.lbl-help:hover { background: var(--line-4); color: var(--ink); }
.dashed { border: 1px dashed var(--line-6); border-radius: 10px; padding: 13px; text-align: center; font-weight: 700; font-size: 13px; color: var(--muted-2); letter-spacing: .03em; cursor: pointer; }
.score-in { border: 1px solid var(--green); border-radius: 8px; padding: 9px 0; text-align: center; font-weight: 800; font-size: 16px; background: #fff; width: 100%; font-family: var(--body); }
.score-in.empty { border-color: var(--line-5); color: var(--muted-5); font-weight: 600; }

/* ---- live header / tabs ---- */
.live-hd { background: var(--green-dark); color: #fff; padding: 24px 0; }
.tabs { background: #fff; border-bottom: 1px solid var(--line-4); }
.tabs-inner { display: flex; gap: 6px; padding: 0 48px; max-width: 1180px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs-inner::-webkit-scrollbar { display: none; }
.tab { padding: 16px 18px; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1; color: var(--muted-3); border-bottom: 3px solid transparent; white-space: nowrap; flex: none; }
.tab.active { font-weight: 700; color: var(--green-dark); border-bottom-color: var(--green-dark); }

/* ---- live schema: wedstrijdenlijst (rij per wedstrijd) ---- */
.schema-row {
    display: grid;
    grid-template-columns: 90px 90px 1fr 60px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-3);
    font-weight: 600;
    font-size: 14px;
}
/* Telefoon: tijd + terrein op één regel, ploegen + score vol breed op de
   tweede regel. Zo krijgen lange ploegnamen de volle breedte i.p.v. in twee
   smalle 1fr-kolommen geperst te worden (waardoor ze werden afgekapt). */
@media (max-width: 640px) {
    .schema-row {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "tijd  veld  veld"
            "thuis score uit";
        column-gap: 10px;
        row-gap: 8px;
        padding: 14px 16px;
    }
    .schema-row > :nth-child(1) { grid-area: tijd; }
    .schema-row > :nth-child(2) { grid-area: veld; text-align: right; }
    .schema-row > :nth-child(3) { grid-area: thuis; }
    .schema-row > :nth-child(4) { grid-area: score; }
    .schema-row > :nth-child(5) { grid-area: uit; }
}

/* Moment in de wedstrijdenlijst: een blok waarin niet gespeeld wordt en dat de
   organisator publiek zette — de prijsuitreiking, een middagpauze, een eetmoment.
   Eigen klasse en niet .schema-row, want die verdeelt haar vijf kolommen op
   positie zodra het scherm smal wordt. */
.schema-moment-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line-3);
    border-left: 3px solid var(--green-dark);
    background: var(--bg);
    font-weight: 700;
    font-size: 14px;
}
.schema-moment-row-uur { white-space: nowrap; }
.schema-moment-row-veld { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted-4); }
@media (max-width: 640px) {
    .schema-moment-row { grid-template-columns: 1fr; row-gap: 4px; padding: 13px 16px; }
}

/* ---- live schema: dagblokken (meerdaags tornooi = per dag inklapbaar) ---- */
.dag-kop {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    font-weight: 700; font-size: 12px; color: var(--muted-2);
    cursor: pointer; list-style: none; user-select: none;
}
.dag-kop::-webkit-details-marker { display: none; }
.dag-kop:hover { background: var(--line-4); }
.dag-pijl { flex: none; font-size: 11px; color: var(--muted-4); transition: transform .15s ease; }
.dag-groep[open] > .dag-kop .dag-pijl { transform: rotate(90deg); }
.dag-aantal { margin-left: auto; font-weight: 600; color: var(--muted-4); }
.dag-toggle {
    margin-left: auto; border: 1px solid var(--line-5); background: #fff;
    border-radius: 999px; padding: 5px 12px; cursor: pointer;
    font-family: var(--body); font-weight: 600; font-size: 11px;
    text-transform: none; letter-spacing: 0; color: var(--muted-2);
}
.dag-toggle:hover { border-color: var(--line-6); color: var(--ink); }
@media (max-width: 640px) {
    .dag-kop { padding: 10px 16px; }
    .dag-aantal { font-size: 11px; }
}

/* ---- live uitslagen: per speeluur gebundeld, twee kaarten naast elkaar ----
   Drie smalle kolommen naast elkaar lazen te rommelig; per speeluur groeperen
   geeft de uitslagen dezelfde leesvolgorde als het schema. */
.uur-groep { margin-bottom: 24px; }
.uur-groep:last-child { margin-bottom: 0; }
.uur-kop {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line-3);
    font-weight: 700; font-size: 12px; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: .06em;
}
.uur-aantal {
    margin-left: auto; flex: none; font-weight: 600; font-size: 11px;
    color: var(--muted-4); text-transform: none; letter-spacing: 0;
}
.uitslag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) {
    .uitslag-grid { grid-template-columns: 1fr; }
}

/* ---- live schema: filterbalk (categorie + ploeg) ---- */
.live-filter {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 20px; border-bottom: 1px solid var(--line-3);
}
.live-filter-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted-3); flex: none;
}
.live-filter-rest { flex: 1 1 0; min-width: 0; }
.fchip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--line-5); border-radius: 999px; background: #fff;
    font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
    white-space: nowrap; cursor: pointer; line-height: 1.2;
}
.fchip:hover { border-color: var(--green); }
.fchip.is-actief { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.fchip.is-actief .cat-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }
.fchip-sel {
    font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink);
    background: #fff; border: 1px solid var(--line-5); border-radius: 999px;
    padding: 6px 10px; max-width: 230px; cursor: pointer;
}
.fchip-sel:focus { outline: none; border-color: var(--green); }
.fchip-sel.is-actief { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
/* Filterbalk als losse kaart (stand, uitslagen, ploegen): geen streep onderaan. */
.card > .live-filter:last-child, .card > .live-filter-actief:last-child { border-bottom: 0; }
/* Rij van de gefilterde ploeg in een klassement. */
.stand-row.is-filter { background: var(--green-tint); box-shadow: inset 3px 0 0 var(--green); }
/* Actieve ploegfilter: "Kalender van X" met wis-knop. */
.live-filter-actief {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 20px; background: var(--green-tint); border-bottom: 1px solid var(--green-line);
    font-weight: 700; font-size: 14px;
}
@media (max-width: 640px) {
    .live-filter { padding: 12px 16px; gap: 6px; }
    .live-filter-rest { flex-basis: 100%; }
    .fchip-sel { max-width: 100%; width: 100%; }
    .live-filter-actief { padding: 12px 16px; }
}

/* ---- live ploegen: kaart is een link naar de kalender van die ploeg ---- */
.plg-kaart {
    display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 11px;
    text-decoration: none; color: var(--ink);
    transition: border-color .12s ease, transform .12s ease;
}
.plg-kaart:hover { border-color: var(--green); transform: translateY(-1px); }
.plg-kaart .plg-pijl { margin-left: auto; color: var(--muted-5); font-size: 14px; flex: none; }
.plg-kaart:hover .plg-pijl { color: var(--green-text); }

/* ---- toggle switch (presentatie) ---- */
.toggle { width: 38px; height: 22px; border-radius: 20px; position: relative; display: inline-block; flex: none; background: var(--line-6); }
.toggle.on { background: var(--green); }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .15s ease; }
.toggle.on .knob { left: 19px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .lnav, .tabs-inner { padding-left: 20px; padding-right: 20px; }
    .h-hero { font-size: 38px; }
    .adm-grid { grid-template-columns: 1fr; }
    .adm-side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-4); }
    /* elke hoofdgroep blijft een eigen kolom (kop boven, items eronder) */
    .adm-grp { display: flex; flex-direction: column; flex: none; }
    .adm-grp + .adm-grp { margin-top: 0; border-left: 1px solid var(--line-4); }
    .adm-grp-titel { border-bottom: 0; margin: 0; padding: 10px 22px 4px; white-space: nowrap; }
    .adm-nav { white-space: nowrap; }

    /* hero: stapel kolommen, kaart onder de tekst */
    .lhero { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px 44px; }
    /* stappen + sporten naar minder kolommen */
    .lsteps { grid-template-columns: 1fr; gap: 28px; }
    .lsports { grid-template-columns: repeat(3, 1fr); }

    /* contact: intro boven het formulier */
    .lcontact { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }

    /* sponsorstrip: minder padding, logo's dichter bij elkaar */
    .sponsorstrip { padding: 32px 20px; }
    .sponsorstrip [style*="gap:34px 48px"] { gap: 24px 28px !important; }
}

@media (max-width: 640px) {
    /* nav laten afbreken, minder essentiële links verbergen */
    .lnav { flex-wrap: wrap; gap: 12px 18px; padding: 14px 18px; }
    .lnav-links { gap: 16px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
    .lnav-links a[href^="#"] { display: none; }

    .h-hero { font-size: 32px; }

    /* cijferstrip: 2×2 i.p.v. 4 kolommen, deelstrepen weg */
    .lstats { grid-template-columns: repeat(2, 1fr); }
    .lstats > div { border-right: 0 !important; }
    .lstat-word { font-size: 19px; }

    /* sporten: 2 kolommen op telefoon */
    .lsports { grid-template-columns: repeat(2, 1fr); }

    /* contact: velden onder elkaar, compactere padding */
    .lcontact { padding: 36px 18px; }
    .lcontact-row { grid-template-columns: 1fr; }

    /* algemene sectie-padding terugbrengen op telefoon */
    .lsports-wrap { padding: 36px 18px !important; }
    #prijzen { padding: 40px 18px !important; }

    /* app-promotie: tekst boven, badges eronder en vol breed */
    .lapp { padding: 0 18px 8px !important; }
    .lapp-box { padding: 28px 24px; }
    .lapp-badges { width: 100%; }
    .lapp-badges .store-badge { flex: 1 1 auto; justify-content: center; }
    .lapp-box { flex-direction: column-reverse; align-items: center; }
    .lapp-tekst { max-width: 100%; }
    .lapp-shot img { width: 210px; max-width: 66vw; margin: 0 auto; }

    /* footer-cta + footer compacter en gestapeld */
    .lcta { padding: 0 18px 44px !important; }
    .lcta-box { padding: 28px 24px !important; }
    .lcta-box .btn { width: 100%; justify-content: center; }
    .lfoot { padding: 24px 18px !important; flex-direction: column; align-items: flex-start; }
    /* zes links (incl. Instagram) passen niet op één telefoonregel */
    .lfoot-links { gap: 12px 16px !important; }

    /* live-pagina: header/content-padding terugbrengen */
    .livepad { padding-left: 18px !important; padding-right: 18px !important; }

    /* ---- ingelogde schermen op telefoon ----
       De content gebruikt inline grids/flex-rijen die op desktop ontworpen zijn
       (beheer-shell .adm-content + de _topbar-pagina's .pagewrap). Hier stapelen
       we alle meerkoloms inline-grids en laten flex-rijen afbreken, zodat elke
       sectie (huidig én nieuw) zonder horizontaal scrollen op mobiel werkt. */
    .adm-top { flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; }
    .adm-top > div { flex-wrap: wrap; }
    .adm-content { padding: 22px 16px !important; }
    .pagewrap { padding-left: 16px !important; padding-right: 16px !important; }
    .adm-content [style*="grid-template-columns"],
    .pagewrap [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .adm-content [style*="display:flex"],
    .pagewrap [style*="display:flex"] { flex-wrap: wrap; }
    /* velden/inputs met vaste inline-breedte vol laten lopen i.p.v. te overschrijden */
    .adm-content .field[style*="width:"],
    .pagewrap .field[style*="width:"] { max-width: 100%; }
}

/* ============================================================================
   Helpcentrum (help-*)
   ============================================================================ */
.help-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 48px; background: #fff; border-bottom: 1px solid var(--line);
}
.help-top .brand { font-size: 18px; text-decoration: none; }
.help-top-links { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 600; }
.help-hero {
    background: linear-gradient(135deg, var(--green-tint) 0%, #fff 100%);
    text-align: center; padding: 56px 24px 48px;
}
.help-hero h1 { font-size: 32px; margin: 0 0 8px; }
.help-hero p { color: var(--muted); margin: 0 0 24px; font-size: 16px; }
.help-search {
    max-width: 520px; margin: 0 auto; position: relative;
}
.help-search .field {
    width: 100%; padding: 14px 18px; font-size: 16px; border-radius: 12px;
    border: 2px solid var(--line-5); background: #fff; box-sizing: border-box;
}
.help-search .field:focus { border-color: var(--green); outline: none; }
.help-search-icon {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--muted-4); font-size: 20px; pointer-events: none;
}
.help-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.help-card {
    background: #fff; border-radius: 14px; padding: 22px;
    border: 1px solid var(--line); text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column; gap: 6px;
}
.help-card:hover { border-color: var(--green); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
/* geminimaliseerd categorie-overzicht (chips) zodra een categorie gekozen is */
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.help-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; transition: border-color .15s, box-shadow .15s, color .15s; }
.help-chip:hover { border-color: var(--green); color: var(--ink); }
.help-chip.actief { background: var(--green-tint); border-color: var(--green); color: var(--green-text); }
.help-card-icoon { font-size: 32px; line-height: 1; }
.help-card-titel { font-weight: 700; font-size: 16px; color: var(--ink); }
.help-card-aantal { font-size: 13px; color: var(--muted-4); }
.help-content {
    max-width: 780px; margin: 0 auto; padding: 40px 24px 60px;
}
.help-breadcrumb {
    font-size: 13px; color: var(--muted-4); margin-bottom: 18px;
}
.help-breadcrumb a { color: var(--muted-4); text-decoration: none; }
.help-breadcrumb a:hover { color: var(--green); }
.help-breadcrumb span { color: var(--muted-2); }
.help-artikel-header { margin-bottom: 28px; }
.help-artikel-header h1 { margin: 0 0 6px; font-size: 28px; }
.help-artikel-meta { font-size: 13px; color: var(--muted-4); }
.help-artikel-body {
    font-size: 16px; line-height: 1.7; color: var(--ink);
}
.help-artikel-body h2 { font-size: 22px; margin: 32px 0 12px; }
.help-artikel-body h3 { font-size: 18px; margin: 24px 0 10px; }
.help-artikel-body p { margin: 0 0 16px; }
.help-artikel-body ul, .help-artikel-body ol { margin: 0 0 16px; padding-left: 24px; }
.help-artikel-body li { margin-bottom: 6px; }
.help-artikel-body a { color: var(--green-text); text-decoration: underline; }
.help-artikel-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; }
.help-artikel-body blockquote {
    border-left: 4px solid var(--line-6); padding: 8px 16px; margin: 16px 0;
    color: var(--muted-2); background: var(--green-tint); border-radius: 0 8px 8px 0;
}
.help-artikel-body code {
    font-family: 'JetBrains Mono', monospace; font-size: 14px;
    background: var(--line-3); padding: 2px 6px; border-radius: 4px;
}
.help-artikel-body pre {
    background: var(--line-3); padding: 16px; border-radius: 10px; overflow-x: auto;
    margin: 16px 0;
}
.help-artikel-body pre code { background: none; padding: 0; }
.help-artikel-body hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.help-artikel-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.help-artikel-body th, .help-artikel-body td {
    border: 1px solid var(--line); padding: 8px 12px; text-align: left;
}
.help-artikel-body th { background: var(--green-tint); font-weight: 700; }
.help-feedback {
    margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
    text-align: center;
}
.help-feedback p { font-size: 14px; color: var(--muted-2); margin: 0 0 12px; font-weight: 600; }
.help-feedback-btns { display: flex; gap: 10px; justify-content: center; }
.help-feedback-btns button {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 20px; font-size: 18px; cursor: pointer; transition: all .12s;
}
.help-feedback-btns button:hover { border-color: var(--green); background: var(--green-tint); }
.help-feedback-btns button:disabled { opacity: .4; cursor: default; }
.help-gerelateerd {
    margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}
.help-gerelateerd h3 { font-size: 16px; margin: 0 0 14px; }
.help-gerelateerd-lijst { display: flex; flex-direction: column; gap: 8px; }
.help-gerelateerd-lijst a {
    font-size: 14px; color: var(--green-text); text-decoration: none; font-weight: 600;
}
.help-gerelateerd-lijst a:hover { text-decoration: underline; }
.help-geen { text-align: center; padding: 48px 24px; color: var(--muted-3); font-size: 16px; }

/* Contactblok onderaan het helpcentrum */
.help-contact {
    margin-top: 48px; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 28px 32px;
}
.help-contact h2 { margin: 0 0 6px; font-size: 20px; }
.help-contact > p { margin: 0 0 20px; font-size: 14px; color: var(--muted-2); line-height: 1.55; }
.help-contact-account {
    background: var(--green-tint); border-radius: 10px; padding: 12px 14px;
    margin-bottom: 16px; font-size: 13px; color: var(--muted-2);
}

/* Help admin (admin_help.php) */
.help-admin-grid {
    display: grid; grid-template-columns: 1fr 420px; gap: 18px; align-items: start;
}
.help-admin-cat-item {
    padding: 12px 16px; border-bottom: 1px solid var(--line-2);
    cursor: pointer; display: flex; align-items: center; gap: 10px;
    transition: background .1s;
}
.help-admin-cat-item:hover { background: var(--green-tint); }
.help-admin-cat-item.actief { background: var(--green-tint); font-weight: 700; }
.help-admin-art-item {
    padding: 8px 16px 8px 44px; border-bottom: 1px solid var(--line-3);
    display: flex; align-items: center; gap: 10px; font-size: 14px;
}
.help-admin-art-item:hover { background: var(--green-tint); }
.help-admin-art-item .btn { font-size: 12px; padding: 3px 10px; }
.help-form-row {
    display: flex; gap: 10px; margin-bottom: 12px;
}
.help-form-row > * { flex: 1; }
.help-form-taal-tabs {
    display: flex; gap: 4px; margin-bottom: 6px;
}
.help-form-taal-tab {
    padding: 4px 14px; border-radius: 6px 6px 0 0; font-size: 12px; font-weight: 700;
    cursor: pointer; background: var(--line-3); color: var(--muted-4);
    border: none;
}
.help-form-taal-tab.actief { background: var(--green); color: #fff; }
.help-form-taalgroep { display: none; }
.help-form-taalgroep.actief { display: block; }
.help-empty { padding: 20px; text-align: center; color: var(--muted-4); font-size: 14px; }

@media (max-width: 900px) {
    .help-top { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
    .help-hero { padding: 36px 18px 32px; }
    .help-hero h1 { font-size: 24px; }
    .help-grid { grid-template-columns: 1fr; }
    .help-content { padding: 24px 18px 40px; }
    .help-contact { padding: 20px 18px; margin-top: 36px; }
    .help-admin-grid { grid-template-columns: 1fr; }
    .help-form-row { flex-direction: column; }
}

/* ---- publiek tornooi-overzicht (index.php?view=tornooien) ---- */
.tor-lijst { display: flex; flex-direction: column; gap: 10px; }
.tor-kaart {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; text-decoration: none;
    display: flex; flex-direction: column; gap: 6px;
    transition: box-shadow .15s, border-color .15s;
}
.tor-kaart:hover { border-color: var(--green); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.tor-kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tor-kaart-naam { font-weight: 700; font-size: 16px; color: var(--ink); }
.tor-kaart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-4); }
.tor-meta-scheiding { opacity: .45; }
.tor-cta { margin-top: 28px; font-size: 14px; color: var(--muted-4); text-align: center; }
.tor-cta a { color: var(--green-text); font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
    .tor-kaart { padding: 14px 15px; }
    .tor-kaart-naam { font-size: 15px; }
    .tor-kaart-meta { font-size: 12px; }
    /* Adres op een eigen regel: anders wringt een lang adres de meta-rij uit elkaar. */
    .tor-meta-adres { width: 100%; }
    .tor-meta-adres + .tor-meta-scheiding, .tor-meta-scheiding:has(+ .tor-meta-adres) { display: none; }
}

/* ---- klassement (dashboard sec=klassement): kop met categoriefilter ---- */
.kl-kop {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 24px;
}
.kl-kop-sel { width: auto; padding: 8px 28px 8px 12px; font-weight: 600; }
@media (max-width: 640px) {
    /* Op een smal scherm onder de titel, over de volle breedte. */
    .kl-kop-sel { width: 100%; }
}

/* ---- klassement: per categorie kiezen waar de stand verschijnt (live/TV/app) ---- */
.kl-kanaal { margin-bottom: 18px; }
.kl-kanaal-hint { font-size: 13px; margin: 0 0 12px; line-height: 1.45; }
.kl-kanaal-rij {
    display: grid; grid-template-columns: 1fr repeat(3, 88px);
    align-items: center; gap: 6px;
    padding: 7px 0; border-top: 1px solid var(--line-3);
}
.kl-kanaal-kop {
    border-top: 0; padding-top: 0;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted-4); text-align: center;
    white-space: nowrap;
}
/* Zelfde raster met twee kanalen (presentatie: live + TV, zonder app). */
.kl-kanaal-2 .kl-kanaal-rij { grid-template-columns: 1fr repeat(2, 88px); }
.kl-kanaal-naam { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.kl-kanaal-vink { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kl-kanaal-vink input { width: auto; flex: none; margin: 0; cursor: pointer; }
.kl-kanaal-mob { display: none; }
@media (max-width: 560px) {
    /* Smal scherm: kolomkoppen weg, elk vinkje draagt zijn eigen label. */
    .kl-kanaal-rij { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; }
    .kl-kanaal-rij.kl-kanaal-kop { display: none; }
    .kl-kanaal-naam { flex: 0 0 100%; }
    .kl-kanaal-vink { gap: 7px; font-size: 13px; font-weight: 600; }
    .kl-kanaal-mob { display: inline; }
}

/* ---- presentatie: welke tabbladen ziet een bezoeker op de publieke link ---- */
.pres-tabs-kop {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-3);
    font-weight: 700; font-size: 14px;
}
.pres-tabs-hint { font-size: 13px; margin: 4px 0 10px; line-height: 1.45; }
.pres-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0 24px; }
.pres-tab-rij {
    display: flex; align-items: center; gap: 12px;
    position: relative; /* houdt de verborgen checkbox binnen zijn eigen rij */
    padding: 9px 0; border-top: 1px solid var(--line-3);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.pres-tab-naam { flex: 1; }
/* De echte checkbox blijft bereikbaar voor toetsenbord en screenreader, maar de
   schakelaar (.toggle) is wat je ziet. */
.pres-tab-rij input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pres-tab-rij input:checked + .toggle { background: var(--green); }
.pres-tab-rij input:checked + .toggle .knob { left: 19px; }
.pres-tab-rij input:focus-visible + .toggle { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.pres-tabs-melding { font-size: 13px; font-weight: 600; color: var(--red); margin-top: 10px; }

/* ---- schema-board: wedstrijden gegroepeerd per terrein (kolommen) ---- */
.schema-board {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 2px 16px;
    overflow-x: auto;
}
.schema-kolom {
    flex: 0 0 250px;
    width: 250px;
    background: var(--bg);
    border: 1px solid var(--line-4);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.schema-kolom-kop {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px;
    font-weight: 700; font-size: 14px; color: var(--ink);
    background: #fff;
    border-bottom: 1px solid var(--line-3);
}
.schema-kolom-kop-acties { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.schema-kolom-aantal { font-size: 11px; font-weight: 600; color: var(--muted-4); }
/* ✕ in de kolomkop: dit terrein even uit het beeld halen (zie .uwt-veldkies) */
.schema-kolom-verberg {
    border: 0; background: none; cursor: pointer;
    color: var(--muted-5); font-size: 12px; line-height: 1;
    padding: 3px 5px; border-radius: 6px;
}
.schema-kolom-verberg:hover { background: var(--bg); color: var(--ink); }
/* !important: de categorie/dag-filter zet zelf een inline display op de kolommen,
   en een verborgen terrein mag daardoor niet terug tevoorschijn komen. */
.schema-kolom.is-verborgen { display: none !important; }
.schema-kolom-body {
    display: flex; flex-direction: column; gap: 10px;
    padding: 10px; min-height: 56px;
}
.schema-kolom-leeg { font-size: 12px; padding: 6px; text-align: center; }

/* "Niet ingedeeld" = strook boven het board (i.p.v. een kolom ernaast), zodat de
   volle breedte naar de terreinen gaat. Blijft ook zichtbaar als ze leeg is: dan
   is het de dropzone om een wedstrijd weer uit het schema te halen. */
.schema-vrij {
    background: var(--bg);
    border: 1px solid var(--line-4);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}
.schema-vrij-kop {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 14px;
    font-weight: 700; font-size: 14px; color: var(--muted-3);
    background: #fff;
    border-bottom: 1px solid var(--line-3);
}
.schema-vrij-hint { font-weight: 500; font-size: 11px; }
/* "Alles inplannen": rechts in de kop, en weg zodra de strook leeg is. */
.schema-vrij-plan { margin-left: auto; }
.schema-vrij.is-leeg .schema-vrij-plan { display: none; }
.schema-kolom-body.schema-vrij-body {
    flex-direction: row; flex-wrap: wrap; align-items: flex-start;
    max-height: 42vh; overflow-y: auto;
}
.schema-vrij-body .schema-rij { flex: 0 0 216px; width: 216px; }
.schema-vrij-leeg { display: none; font-size: 12px; }
.schema-vrij.is-leeg .schema-kolom-body { min-height: 0; padding: 8px 14px; }
.schema-vrij.is-leeg .schema-vrij-leeg { display: block; }

.schema-kaart {
    display: flex; flex-direction: column; gap: 8px;
    background: #fff;
    border: 1px solid var(--line-5);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: grab;
}
.schema-kaart.is-conflict { border-color: var(--red); background: #fdecea; }
.schema-kaart.is-rust { border-color: #e08a00; background: #fff6e6; }
/* Kaart van een categorie die weggefilterd is, maar die je tóch te zien krijgt
   omdat ze in conflict staat: streepjesrand en wat lichter, zodat duidelijk is
   dat ze niet bij de gekozen categorie hoort. */
.schema-kaart.is-buiten-filter { border-style: dashed; opacity: .75; }
/* Tijdlijn: twee wedstrijden op hetzelfde uur en terrein staan naast elkaar in
   de kolom. Ze zijn dan smal, dus de inhoud mag er niet uit lopen. */
.schema-kaart.is-overlap { overflow: hidden; }
.schema-kaart-ghost { opacity: .4; border: 1px dashed var(--green); }
/* Ploegnaam = chip: er met de muis over gaan licht de wedstrijden van die ploeg
   al op, klikken zet die selectie vast. Subtiele achtergrond + eigen hover zodat
   je meteen ziet: dit is een knop, de rest van de kaart sleep je (grab-cursor). */
.schema-kaart-ploeg.uwt-ploeg {
    cursor: pointer; border-radius: 5px; padding: 1px 6px;
    background: var(--bg-2, rgba(0, 0, 0, .05));
    transition: background .12s, color .12s;
}
.schema-kaart-ploeg.uwt-ploeg:hover { background: var(--green); color: #fff; }
/* Opgelicht: élke kaart waar deze ploeg op staat toont haar naam groen, dus ook
   waar ze de tegenstander is. Zo spot je haar meteen in de rij. */
.schema-kaart-ploeg.uwt-ploeg.ploeg-op { background: var(--green); color: #fff; }
/* Vastgeklikt: blijft groen ook als de muis weg is, met een randje als verschil
   met een gewone hover. */
.schema-kaart-ploeg.uwt-ploeg.ploeg-vast {
    background: var(--green); color: #fff; box-shadow: 0 0 0 2px var(--green-tint, rgba(0, 0, 0, .12));
}
#schema-lijst.heeft-ploeg-selectie .schema-rij { opacity: .35; transition: opacity .12s; }
#schema-lijst.heeft-ploeg-selectie .schema-rij.ploeg-actief { opacity: 1; box-shadow: 0 0 0 2px var(--green); }
.schema-kaart-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.schema-kaart-tijd { display: flex; align-items: center; gap: 3px; }
/* Breedte op auto: de browser kent de intrinsieke breedte van zijn eigen
   time-input (font/OS-afhankelijk); een vaste px-breedte knipt op sommige
   pc's de minuten af. flex 0 0 auto: nooit meekrimpen tot onder de inhoud. */
.schema-kaart-tijd .uwt-plan-tijd {
    width: auto; min-width: 66px; flex: 0 0 auto;
    padding: 5px 4px; font-size: 12px; text-align: center;
}
.schema-kaart-tijd .uwt-plan-tijd::-webkit-calendar-picker-indicator { margin: 0 0 0 2px; padding: 0; }
.schema-nudge {
    flex: 0 0 auto; width: 24px; height: 28px; padding: 0;
    border: 1px solid var(--line-5); background: var(--bg); border-radius: 6px;
    cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted);
}
.schema-kaart-del { cursor: pointer; color: var(--red); font-size: 15px; opacity: .5; }
.schema-kaart-del:hover { opacity: 1; }
/* Ingeplande kaart: verwijderen kan pas vanuit "Niet ingedeeld", dus grijs en
   zonder hover-nadruk. Blijft klikbaar zodat een klik uitlegt wat er moet gebeuren. */
.schema-kaart-del.is-uit { color: var(--muted-5); opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.schema-kaart-del.is-uit:hover { opacity: .55; }
.schema-kaart-ploegen {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; line-height: 1.25;
}
.schema-kaart-ploeg { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.schema-kaart-ploeg.thuis { text-align: right; }
.schema-kaart-ploegen .vs { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--muted-4); }
.schema-kaart-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.schema-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    white-space: nowrap;
    background: var(--green-tint); color: var(--green-text);
}
.schema-badge--cat { background: var(--line-3); color: var(--muted-2); }
.schema-kaart-veld select { width: 100%; padding: 4px 6px; font-size: 11px; }

/* pushmeldingen-blok op de instellingenpagina */
.push-inst-rij {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 16px 18px;
}
.push-inst-tekst { min-width: 0; }
.push-inst-kop { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.push-inst-uitleg { font-size: 13px; line-height: 1.45; }
.push-inst-veld { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.push-inst-veld input { width: 80px; text-align: center; }
@media (max-width: 640px) {
    .push-inst-rij { flex-direction: column; align-items: flex-start; gap: 12px; }
    .push-inst-veld { align-self: flex-start; }
}

/* meldingen-bij-wijziging schakelaar (naast het slot-icoon) */
.schema-push-toggle {
    flex: 0 0 auto; cursor: pointer; user-select: none;
    font-size: 12px; font-weight: 700; line-height: 1;
    padding: 7px 12px; border-radius: 20px; white-space: nowrap;
    border: 1px solid var(--line-5); background: #fff; color: var(--muted);
}
.schema-push-toggle.aan {
    border-color: var(--green); background: var(--green-tint); color: var(--green-text);
}

/* banner: opgespaarde wijzigingen die nog gemeld kunnen worden */
.schema-push-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    border-left: 4px solid oklch(0.72 0.15 75); /* amber-accent */
    padding: 14px 18px; margin-bottom: 16px;
}
.schema-push-banner-tekst { font-weight: 600; font-size: 13px; color: var(--muted); }
.schema-push-banner-acties { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
@media (max-width: 640px) {
    .schema-push-banner { flex-direction: column; align-items: stretch; }
    .schema-push-banner-acties { justify-content: flex-end; }
}

/* banner (tabblad Resultaten): een uitslag heeft de volgende ronde of fase
   vrijgespeeld. Blijft plakken zodat hij ook zichtbaar is als de organisator
   halfweg de lijst een uitslag ingeeft. */
.res-nieuw-banner {
    position: sticky; top: 8px; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    background: var(--green-tint); border: 1px solid var(--green-line);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
/* display:flex zou het hidden-attribuut van de UA-stylesheet overrulen. */
.res-nieuw-banner[hidden] { display: none; }
.res-nieuw-kop { font-weight: 800; font-size: 14px; color: var(--green-text); }
.res-nieuw-sub { font-weight: 600; font-size: 12px; color: var(--muted-2); margin-top: 2px; }
@media (max-width: 640px) {
    .res-nieuw-banner { flex-direction: column; align-items: stretch; }
    .res-nieuw-banner .btn { text-align: center; }
}

/* scheidsrechterpagina (ref.php): autosave-melding boven de lijst en de
   statusregel per wedstrijd ('Opslaan…' / '✓ Opgeslagen' / foutmelding). */
.ref-autosave {
    font-weight: 600; font-size: 12px; color: var(--muted-2);
    background: var(--line-4); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 14px;
}
.ref-status {
    font-weight: 700; font-size: 11px; text-align: right;
    min-height: 15px; margin-top: 6px;
}
.ref-status.is-bezig { color: var(--muted-3); }
.ref-status.is-ok    { color: var(--green); }
.ref-status.is-fout  { color: var(--red); }
/* Knock-out op gelijkspel zonder penalty's: wachten, geen fout — links uitlijnen
   want dit is een volledige zin, geen kort label. */
.ref-status.is-wacht {
    color: #b45309; text-align: left; font-weight: 600; line-height: 1.35;
}
/* Darts: uitslag bewaard maar komt niet overeen met "naar X legs" — enkel
   een seintje, geen fout (zie hierboven bij is-wacht). */
.ref-status.is-waarschuwing {
    color: #b45309; text-align: left; font-weight: 600; line-height: 1.35;
}

/* categoriekop in de resultateninvoer (sortering op categorie): klikbaar, zodat
   je alles behalve de categorie waarin je bezig bent kan dichtklappen. */
.res-cat-kop {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 18px; background: var(--bg);
    border-bottom: 1px solid var(--line-3);
    font-weight: 700; font-size: 12px; color: var(--muted-2);
    text-transform: uppercase; letter-spacing: .05em;
    cursor: pointer; list-style: none; user-select: none;
}
.res-cat-kop::-webkit-details-marker { display: none; }
.res-cat-kop:hover { background: var(--line-4); }
.res-cat-pijl { flex: none; font-size: 11px; color: var(--muted-4); transition: transform .15s ease; }
.res-cat-groep[open] > .res-cat-kop .res-cat-pijl { transform: rotate(90deg); }
.res-cat-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-cat-aantal {
    margin-left: auto; flex: none; font-weight: 600; font-size: 11px;
    color: var(--muted-4); text-transform: none; letter-spacing: 0;
}
@media (max-width: 640px) {
    .res-cat-kop { padding: 9px 14px; gap: 6px; }
}

/* weergave-toggle (Lijst / Tijdlijn) */
.schema-modus-toggle { display: inline-flex; border: 1px solid var(--line-5); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.schema-modus-btn { border: 0; background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px 14px; cursor: pointer; }
.schema-modus-btn + .schema-modus-btn { border-left: 1px solid var(--line-5); }
.schema-modus-btn.actief { background: var(--green); color: #fff; }

/* terrein-kiezer: vanaf 6 terreinen kolommen tijdelijk verbergen */
.uwt-veldkies { position: relative; flex: 0 0 auto; }
.uwt-veldkies > summary {
    list-style: none; cursor: pointer; user-select: none;
    border: 1px solid var(--line-5); border-radius: 8px; background: #fff;
    color: var(--muted); font-size: 12px; font-weight: 700;
    padding: 6px 12px; white-space: nowrap;
}
.uwt-veldkies > summary::-webkit-details-marker { display: none; }
.uwt-veldkies > summary::marker { content: ''; }
.uwt-veldkies[open] > summary { background: var(--bg); }
.uwt-veldkies-tel { font-weight: 600; color: var(--muted-4); }
/* zodra er iets verborgen is: opvallen, zodat niemand zich afvraagt waar een terrein bleef */
.uwt-veldkies.heeft-verborgen > summary { border-color: var(--green); color: var(--green); }
.uwt-veldkies.heeft-verborgen .uwt-veldkies-tel { color: var(--green); }
.uwt-veldkies-paneel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 200px; max-width: min(280px, 86vw); max-height: 56vh; overflow-y: auto;
    padding: 8px; text-align: left;
    background: #fff; border: 1px solid var(--line-4); border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.uwt-veldkies-rij {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 7px 8px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--ink);
}
.uwt-veldkies-rij:hover { background: var(--bg); }
.uwt-veldkies-rij input { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; accent-color: var(--green); }
.uwt-veldkies-rij span { min-width: 0; overflow-wrap: anywhere; }
.uwt-veldkies-alle { width: 100%; margin-top: 6px; }
.uwt-veldkies-alle[disabled] { opacity: .5; cursor: default; }
.uwt-veldkies-hint { margin: 8px 2px 2px; font-size: 11px; line-height: 1.4; }

/* eerste-keer-tip bij de weergave-toggle (Lijst/Tijdlijn) en de tijdschaal */
.schema-tip {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    margin: -2px 0 14px auto; padding: 12px 14px; max-width: 480px;
    border: 1px solid var(--green-line); border-left: 4px solid var(--green);
    border-radius: 10px; background: var(--green-tint);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.schema-tip[hidden] { display: none; }
.schema-tip-body { flex: 1 1 220px; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.schema-tip-titel { display: block; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.schema-tip-ok { flex: 0 0 auto; }
@media (max-width: 640px) {
    .schema-tip { max-width: none; margin-left: 0; }
    .schema-tip-ok { width: 100%; }
}
/* wenk: het element waar de tip over gaat kort laten oplichten */
@keyframes uwt-wenk {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.62 0.14 150 / 0); }
    50%      { box-shadow: 0 0 0 4px oklch(0.62 0.14 150 / .4); }
}
.uwt-wenk { animation: uwt-wenk 1.5s ease-in-out 3; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .uwt-wenk { animation: none; } }

/* tijdlijn-modus (layout B): kaarten op tijd-as, hoogte ~ duur */
.schema-tijdas { flex: 0 0 46px; position: relative; }
.schema-tijdas-uur { position: absolute; right: 6px; font-size: 11px; font-weight: 600; color: var(--muted-4); transform: translateY(-50%); white-space: nowrap; }
.schema-tijdas-uur.schema-tijdas-min { font-size: 10px; font-weight: 500; color: var(--muted-5); }
.schema-board--tijdlijn .schema-kolom-body {
    padding: 0 8px;
    background-image: linear-gradient(to bottom, var(--line-3) 0, var(--line-3) 1px, transparent 1px);
    background-repeat: repeat-y;
}
/* Compacte kaartinhoud zodat tijd + ploegnamen binnen de kaarthoogte (= duur)
   passen. De inhoud begint bovenaan — dat is op de tijd-as net het aanvangsuur —
   zodat een te korte kaart onderaan afgesneden wordt en niet aan het uur. */
.schema-board--tijdlijn .schema-kaart { overflow: hidden; padding: 2px 8px 3px; gap: 0; cursor: default; justify-content: flex-start; }
/* Bovenste regel = uur + poule + categorie naast elkaar; de ploegnamen komen
   daaronder over de volle kaartbreedte, zodat lange clubnamen niet meer na een
   paar letters afgekapt worden. Eén flexrij die wrapt: de volgorde regelen we
   met order, want in de HTML staan de badges ná de ploegnamen. */
.schema-board--tijdlijn .schema-kaart {
    flex-direction: row; flex-wrap: wrap;
    align-items: center; align-content: flex-start; column-gap: 6px;
}
.schema-board--tijdlijn .schema-kaart-top { order: 1; flex: 0 0 auto; }
.schema-board--tijdlijn .schema-kaart-badges { order: 2; flex: 1 1 auto; min-width: 0; }
.schema-board--tijdlijn .schema-kaart-ploegen { order: 3; flex: 0 0 100%; min-width: 0; }
.schema-board--tijdlijn .schema-kaart-darts { order: 4; flex: 0 0 100%; min-width: 0; }
/* Past de volledige inhoud niet in de kaarthoogte? Dan vallen eerst de badges
   weg (JS meet dat en zet .is-kort), en bij een heel korte wedstrijd zet
   .is-mini het uur náást de ploegnamen. Zo blijft het uur altijd leesbaar. */
.schema-board--tijdlijn .schema-kaart.is-kort .schema-kaart-badges { display: none; }
.schema-board--tijdlijn .schema-kaart.is-mini { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 8px; }
.schema-board--tijdlijn .schema-kaart.is-mini .schema-kaart-top { flex: 0 0 auto; }
.schema-board--tijdlijn .schema-kaart.is-mini .schema-kaart-ploegen { flex: 1 1 auto; min-width: 0; }
.schema-board--tijdlijn .schema-kaart-tijd .uwt-plan-tijd {
    min-width: 0; padding: 0 2px; font-size: 11px; font-weight: 700;
    border: 0; background: transparent; box-shadow: none;
}
.schema-board--tijdlijn .schema-kaart-tijd .uwt-plan-tijd::-webkit-calendar-picker-indicator { display: none; }
.schema-board--tijdlijn .schema-kaart-ploegen { font-size: 11px; line-height: 1.2; }
.schema-board--tijdlijn .schema-kaart-ploeg { white-space: nowrap; }
.schema-board--tijdlijn .schema-kaart-ploegen .vs { font-size: 10px; }
.schema-board--tijdlijn.tijdlijn-drag .schema-kaart { cursor: grab; }
/* niet board-gebonden: een kaart uit de strook "niet ingedeeld" sleep je van
   buiten het board naar binnen en krijgt dezelfde sleep-look. */
.schema-kaart.tijdlijn-sleep {
    cursor: grabbing; z-index: 5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18); opacity: .92;
}
.schema-board--tijdlijn .schema-nudge,
.schema-board--tijdlijn .schema-kaart-veld,
.schema-board--tijdlijn .schema-kaart-datum,
.schema-board--tijdlijn .schema-kaart-del { display: none; }
.schema-board--tijdlijn .schema-kolom-leeg { display: none; }
/* fase/categorie-badges (bv. "kwartfinale") ook in de tijdlijn tonen, maar compact */
.schema-board--tijdlijn .schema-kaart-badges { gap: 3px; margin-top: 0; justify-content: flex-start; }
.schema-board--tijdlijn .schema-badge { font-size: 9px; padding: 1px 6px; }
/* datumveld op de kaart (enkel bij een meerdaags tornooi) */
.schema-kaart-datum .uwt-plan-datum { width: 100%; font-size: 12px; padding: 4px 6px; }

/* momenten-editor (pauze, prijsuitreiking, …) in de schema-instellingen */
.uwt-pauze-rij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uwt-pauze-rij + .uwt-pauze-rij { margin-top: 6px; }
.uwt-pauze-rij .pz-van, .uwt-pauze-rij .pz-tot { width: 105px; }
.uwt-pauze-rij .pz-soort { width: auto; max-width: 190px; }
/* de naam mag de rest van de regel opvullen; ze is het langste veld van de rij */
.uwt-pauze-rij .pz-titel { flex: 1 1 170px; min-width: 150px; }
.uwt-pauze-rij .pz-veld { width: auto; max-width: 170px; }
.uwt-pauze-rij .pz-dag { width: auto; max-width: 170px; }
.uwt-pauze-rij .pz-pub {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.uwt-pauze-rij .pz-pub input { width: auto; flex: none; margin: 0; }
.uwt-pauze-rij .pz-del { cursor: pointer; opacity: .6; }
.uwt-pauze-rij .pz-del:hover { opacity: 1; }
/* terreinen per pauze: vinkjes achter één knop, dezelfde kiezer als boven het bord
   (.uwt-veldkies). Klapt naar links open, want de knop staat middenin de rij, en
   .heeft-verborgen zet hem groen zodra er terreinen aangevinkt staan. */
.uwt-pauze-rij .uwt-pzvelden { position: relative; }
.uwt-pauze-rij .uwt-pzvelden > summary {
    padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis;
}
.uwt-pauze-rij .uwt-pzvelden .uwt-veldkies-paneel { right: auto; left: 0; z-index: 40; }
/* .card klipt zijn inhoud (overflow: hidden) voor de ronde hoeken; het open paneel
   viel daardoor weg op de kaartrand. Deze kaart heeft niets edge-to-edge staan, dus
   ze mag het paneel gewoon buiten haar rand laten hangen. */
#uwt-schema-inst-kaart { overflow: visible; }

/* pauzes inklapbaar: dichtgeklapt blijft enkel de samenvatting met het aantal staan */
.uwt-pauzes-box { border: 1px solid var(--line-5); border-radius: 10px; background: #fff; max-width: 100%; }
.uwt-pauzes-sam {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 600; color: var(--muted);
}
.uwt-pauzes-sam::-webkit-details-marker { display: none; }
.uwt-pauzes-sam::after {
    content: '▾'; margin-left: auto; font-size: 11px; color: var(--muted-3);
    transition: transform .15s ease;
}
.uwt-pauzes-box[open] .uwt-pauzes-sam::after { transform: rotate(180deg); }
.uwt-pauzes-box[open] .uwt-pauzes-sam { border-bottom: 1px solid var(--line-3); }
.uwt-pauzes-titel { text-transform: uppercase; letter-spacing: .02em; }
.uwt-pauzes-aantal {
    padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px;
    background: var(--green-tint); color: var(--green-text);
}
.uwt-pauzes-aantal.is-leeg { background: var(--line-3); color: var(--muted-3); }
.uwt-pauzes-body { padding: 10px 12px 12px; }

/* instellingen per categorie: [naam] [duur] [pauze] [rust] [speelrondes] per rij */
.uwt-duurcat-box { max-width: 600px; }
.uwt-duurcat-kop, .uwt-duurcat-rij {
    display: grid; grid-template-columns: minmax(70px, 1fr) repeat(4, 100px); gap: 6px; align-items: center;
}
.uwt-duurcat-kop { font-size: 11px; font-weight: 600; color: var(--muted-3); margin-bottom: 4px; }
.uwt-duurcat-kop span + span { text-align: center; }
.uwt-duurcat-kop .lbl-rij { justify-content: center; gap: 4px; }
.uwt-duurcat-rij + .uwt-duurcat-rij { margin-top: 6px; }
.uwt-duurcat-naam { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
/* min-width 0: zonder dit houdt een number-input zijn eigen minimumbreedte aan en
   kan een 1fr-kolom (smal scherm) niet krimpen — de kaart scrolt dan horizontaal. */
.uwt-duurcat-veld { min-width: 0; }
.uwt-duurcat-rij .field { width: 100%; min-width: 0; text-align: center; }
/* de kolomkoppen staan bovenaan; per veld enkel op smalle schermen een mini-label */
.uwt-duurcat-mini { display: none; font-size: 10px; font-weight: 600; color: var(--muted-3); }

/* "✓ Opgeslagen" naast de hint: de instellingen bewaren zichzelf, dus geen knop */
.uwt-inst-melding {
    font-size: 12px; font-weight: 600; color: var(--green-text);
    opacity: 0; transition: opacity .2s ease;
}
.uwt-inst-melding.is-zichtbaar { opacity: 1; }
.uwt-inst-melding.is-fout { color: var(--red-text, #c0392b); }

/* moment (middagpauze, prijsuitreiking, …) in de tijdlijn: gearceerde band waarin
   geen wedstrijd valt, met de naam van het moment erin zodra ze past */
.schema-pauze-band {
    position: absolute; left: 0; right: 0; pointer-events: none; overflow: hidden;
    background: repeating-linear-gradient(45deg, rgba(192, 57, 43, .06) 0 8px, rgba(192, 57, 43, .12) 8px 16px);
    border-top: 1px dashed rgba(192, 57, 43, .45); border-bottom: 1px dashed rgba(192, 57, 43, .45);
}
.schema-pauze-band-label {
    display: block; padding: 1px 6px; font-size: 10px; font-weight: 700;
    color: var(--muted-2); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}

/* hetzelfde moment in de lijstweergave: een smalle balk tussen de kaarten, op het
   uur waarop het valt. De lijst is de standaardweergave, dus dit is voor de meeste
   organisatoren de plek waar de prijsuitreiking in het schema staat. */
.schema-moment {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 4px 0; padding: 5px 8px; border-radius: 8px;
    border-left: 3px solid var(--green, #16a34a);
    background: repeating-linear-gradient(45deg, rgba(22, 163, 74, .05) 0 8px, rgba(22, 163, 74, .10) 8px 16px);
    font-size: 12px; line-height: 1.3;
}
.schema-moment-uur { font-weight: 700; white-space: nowrap; }
.schema-moment-label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.schema-moment-extra { font-size: 11px; color: var(--muted-4); }
/* Niet publiek = enkel een blokkering voor de organisator: rustiger en grijs. */
.schema-moment.is-prive {
    border-left-color: var(--line-5);
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .03) 0 8px, rgba(0, 0, 0, .06) 8px 16px);
}
.schema-moment.is-prive .schema-moment-label { font-weight: 500; color: var(--muted-2); }
/* In de tijdlijn doen de banden dit werk; een rij in de flow zou de as verschuiven. */
.schema-board--tijdlijn .schema-moment { display: none; }

@media (max-width: 640px) {
    .schema-board { padding: 4px 0 16px; gap: 12px; }
    .schema-kolom { flex-basis: 84vw; width: 84vw; }
    .schema-vrij-body .schema-rij { flex-basis: 100%; width: auto; }
    .schema-vrij-kop { font-size: 13px; }
    .uwt-pauzes-box { flex-basis: 100%; width: 100%; }
    /* per categorie: naam op regel 1, de vier velden met eigen label 2 per regel */
    .uwt-duurcat-box { max-width: none; }
    .uwt-duurcat-kop { display: none; }
    .uwt-duurcat-rij { grid-template-columns: 1fr 1fr; }
    .uwt-duurcat-naam { grid-column: 1 / 3; }
    .uwt-duurcat-rij + .uwt-duurcat-rij { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-3); }
    .uwt-duurcat-mini { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
    /* per moment één veld per regel: [van] – [tot] [🗑] / soort / naam / terreinen /
       dag / "tonen aan bezoekers". Elk veld volle breedte, dus tikbaar. */
    .uwt-pauze-rij { display: grid; grid-template-columns: 1fr auto 1fr 24px; row-gap: 6px; }
    .uwt-pauze-rij + .uwt-pauze-rij { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-3); }
    .uwt-pauze-rij .pz-van, .uwt-pauze-rij .pz-tot { width: auto; }
    .uwt-pauze-rij .pz-soort { grid-column: 1 / 5; grid-row: 2; width: auto; max-width: none; }
    .uwt-pauze-rij .pz-titel { grid-column: 1 / 5; grid-row: 3; width: auto; min-width: 0; }
    .uwt-pauze-rij .pz-veld { grid-column: 1 / 5; grid-row: 4; width: auto; max-width: none; }
    /* de terreinkiezer over de volle rijbreedte, dus met een even breed paneel */
    .uwt-pauze-rij .uwt-pzvelden .uwt-veldkies-paneel { min-width: 0; width: 100%; max-width: none; }
    /* Dagkeuze (meerdaags tornooi) op een eigen regel. */
    .uwt-pauze-rij .pz-dag { grid-column: 1 / 5; grid-row: 5; width: auto; max-width: none; }
    .uwt-pauze-rij .pz-pub { grid-column: 1 / 5; grid-row: 6; white-space: normal; }
    .uwt-pauze-rij .pz-del { grid-column: 4; grid-row: 1; text-align: center; align-self: center; }
}

/* ---- knock-out bracket (live + dashboard): altijd de boom ---- */
/* Basis = kolommen naast elkaar; dit is ook de fallback als de JS-layout niet
   draait. .ko-view--boom hieronder maakt er de klassieke boom van. */
.ko-card { padding: 36px 32px; overflow-x: auto; }
.ko-bracket { display: flex; gap: 40px; align-items: center; min-width: max-content; position: relative; }
.ko-ronde { display: flex; flex-direction: column; min-width: 190px; }
.ko-ronde-kop {
    font-weight: 700; font-size: 11px; color: var(--muted-4);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.ko-ronde-body { display: flex; flex-direction: column; gap: 18px; }
.ko-match { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: #fff; }
.ko-match.is-finale { border: 2px solid var(--green); }
.ko-rij {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 12px 14px; font-weight: 600; font-size: 14px;
}
.ko-rij > span:first-child { min-width: 0; }
.ko-rij + .ko-rij { border-top: 1px solid var(--line-3); }
.ko-rij.wint { background: var(--green-tint); font-weight: 700; }
.ko-rij.af { color: var(--muted-3); }
.ko-rij .ko-pen { color: var(--muted-4); font-weight: 600; font-size: 12px; }
.ko-sets { font-size: 10px; text-align: center; padding: 4px 14px 6px; border-top: 1px solid var(--line-3); color: var(--muted-4); }
.ko-lijnen { display: none; }

/* Boom: rondes verticaal gespreid + SVG-verbindingslijnen naar de wedstrijd die
   elke winnaar voedt (feeder-relatie uit tornooi_tbldoorgang). */
.ko-view--boom .ko-bracket { align-items: stretch; gap: 58px; }
/* De boom-layout (JS) zet body op position:relative met een expliciete hoogte en
   plaatst de wedstrijden absoluut; géén flex:1 hier, anders negeert flex-basis die
   hoogte. gap:0 want de verticale spreiding komt van de berekende posities. */
.ko-view--boom .ko-ronde-body { gap: 0; }
/* De troostfinale (3e plaats) is geen tak van de boom; ze wordt door JS absoluut
   onder de finale geplaatst i.p.v. als losse kolom rechts (die buiten beeld viel). */
.ko-view--boom .ko-ronde--troost { position: absolute; }
.ko-view--boom .ko-match { position: relative; z-index: 1; }
.ko-view--boom .ko-lijnen {
    display: block; position: absolute; top: 0; left: 0;
    pointer-events: none; z-index: 0; overflow: visible;
}
.ko-lijnen path { fill: none; stroke: var(--line); stroke-width: 2; }

/* Meerdere brackets: bundelen in een raster i.p.v. allemaal onder elkaar. Een
   bord is maar zo breed als het rondes heeft (.ko-ronde is min. 190px), dus
   krijgt elke kaart evenveel rasterkolommen als het bracket rondes telt. Zo
   staan smalle borden ("Plaatsen 3–4", één wedstrijd) met een paar naast
   elkaar, terwijl een volle boom de hele breedte houdt. Past een span niet in
   het aantal beschikbare kolommen, dan klemt de browser hem vanzelf af. */
.ko-wrap--raster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; align-items: start;
}
.ko-wrap--raster .ko-card { padding: 26px 24px; min-width: 0; }
/* Enkel -end zetten (niet de grid-column-shorthand), zodat .ko-card--nieuwecat
   hieronder de startkolom kan opleggen zonder de span te wissen. */
.ko-span-2 { grid-column-end: span 2; }
.ko-span-3 { grid-column-end: span 3; }
.ko-span-4 { grid-column-end: span 4; }
/* Elke categorie begint links op een nieuwe rij: borden van twee categorieën
   naast elkaar lezen verwarrend. */
.ko-wrap--raster .ko-card--nieuwecat { grid-column-start: 1; }
/* Op telefoon/tablet blijven de borden gewoon onder elkaar staan. */
@media (max-width: 900px) {
    .ko-wrap--raster { grid-template-columns: 1fr; }
    .ko-wrap--raster .ko-card { padding: 24px 18px; }
    .ko-span-2, .ko-span-3, .ko-span-4 { grid-column-end: span 1; }
}

/* ---- keuze-dialog na drop: ruilen vs. tussenin voegen ---- */
.uwt-drop-overlay {
    position: fixed; inset: 0; z-index: 9995;
    background: rgba(0, 0, 0, .38);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.uwt-drop-kaart {
    background: #fff; border-radius: 14px; padding: 22px;
    width: 100%; max-width: 380px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    display: flex; flex-direction: column; gap: 10px;
    /* Langere dialogen (bv. knock-out genereren) moeten op een telefoon
       scrollen i.p.v. onder de schermrand te verdwijnen. */
    max-height: calc(100vh - 40px); overflow-y: auto;
}
.uwt-drop-titel { font-weight: 700; font-size: 17px; color: var(--ink); }
.uwt-drop-uitleg { margin: 0 0 4px; font-size: 13px; color: var(--muted-3); }
.uwt-drop-act {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-align: left; padding: 12px 16px; height: auto; line-height: 1.35;
    white-space: normal;
}
.uwt-drop-act strong { font-size: 14px; }
.uwt-drop-act span { font-size: 12px; font-weight: 500; opacity: .82; }
.uwt-drop-annuleer {
    margin-top: 4px; align-self: center;
    background: transparent; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-3);
    padding: 6px 10px;
}
.uwt-drop-annuleer:hover { color: var(--ink); }

/* ---- "Deelnemer verwijderen": bevestiging + de vraag of we de club mailen ---- */
.uwt-dnd-kaart { max-width: 420px; }
.uwt-dnd-vink {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 12px; border: 1px solid var(--line-3); border-radius: 10px;
    font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.uwt-dnd-vink input { width: auto; flex: none; margin-top: 2px; }
.uwt-dnd-naar { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: var(--muted-3); }
.uwt-dnd-geen, .uwt-dnd-insch { margin: 0; font-size: 12px; color: var(--muted-3); line-height: 1.45; }
.uwt-dnd-knop {
    margin-top: 6px; align-self: stretch;
    background: var(--red, #c0392b); color: #fff;
}

/* ---- "Ploegen toevoegen": één blok per categorie, elk met eigen namenlijst ---- */
.uwt-pa-kaart { max-width: 460px; }
.uwt-pa-kaart .uwt-drop-act { align-items: center; text-align: center; }
.uwt-pa-kaart .uwt-drop-act:disabled { opacity: .45; cursor: not-allowed; }
.uwt-pa-blokken { display: flex; flex-direction: column; gap: 14px; }
.uwt-pa-blok { display: flex; flex-direction: column; gap: 6px; }
.uwt-pa-kop { display: flex; align-items: center; gap: 6px; }
.uwt-pa-kop .uwt-pa-nv { flex: 1; min-width: 0; font-weight: 700; }
.uwt-pa-weg {
    flex: none; background: transparent; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--muted-5); padding: 6px 8px; line-height: 1;
}
.uwt-pa-weg:hover { color: var(--red, #c0392b); }
.uwt-pa-ta { min-height: 108px; resize: vertical; line-height: 1.5; font-family: inherit; }
.uwt-pa-meer {
    align-self: flex-start; background: transparent; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-3); padding: 4px 0;
}
.uwt-pa-meer:hover { color: var(--ink); text-decoration: underline; }
.uwt-pa-email { display: block; }
@media (max-width: 640px) {
    /* Ruimer typvlak op een telefoon; 16px voorkomt dat iOS inzoomt bij focus. */
    .uwt-pa-ta { min-height: 130px; font-size: 16px; }
    .uwt-pa-kaart .uwt-pa-nv { font-size: 16px; }
}

/* ---- knock-out: doorgang-chips met keuzemenu + keuze "top N per poule" ---- */
.uwt-dg-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 4px 2px 9px; border: 1px solid var(--line-5); border-radius: 999px;
    background: #fff; cursor: pointer; user-select: none;
    font-weight: 600; color: var(--muted-3);
    transition: border-color .12s ease, color .12s ease;
    max-width: 100%;
}
.uwt-dg-chip:hover, .uwt-dg-chip:focus-within { border-color: var(--ink); color: var(--ink); }
.uwt-dg-slot { flex: none; }
/* Het <select> zelf blijft onzichtbaar in de chip: geen kader, wél de pijl. */
.uwt-dg-sel {
    max-width: 100%; min-width: 0;
    border: 0; background: transparent; cursor: pointer; outline: none;
    font: inherit; font-size: 11px; font-weight: 600; color: inherit;
    padding: 2px 2px 2px 0;
}
.uwt-dg-sel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* Positie die elders al speelt: grijs als waarschuwing, maar wél kiesbaar —
   kiezen ruilt de twee slots om. */
.uwt-dg-sel option.is-bezet { color: var(--muted-5); }
@media (max-width: 640px) {
    /* Op smalle schermen krijgt elke chip een eigen regel zodat de lange
       optielabels ("2e Poule B") niet afgekapt worden. */
    .uwt-dg-chip { width: 100%; }
    .uwt-dg-sel { flex: 1; }
}
/* Naambordje van één wedstrijd ("W3" of een eigen naam). Klikbaar: hernoemen.
   Het potlood staat er altijd bij zodat duidelijk is dat het te wijzigen is. */
.uwt-wed-nr {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    max-width: 45%; padding: 2px 8px; border: 1px solid var(--line-5); border-radius: 999px;
    background: #fff; cursor: pointer; user-select: none;
    font-size: 11px; font-weight: 700; color: var(--muted-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: border-color .12s ease, color .12s ease;
}
.uwt-wed-nr:hover, .uwt-wed-nr:focus-visible { border-color: var(--ink); color: var(--ink); }
.uwt-wed-nr.is-eigen { border-color: var(--ink); color: var(--ink); }
.uwt-wed-nr > span { opacity: .55; font-weight: 400; }
@media (max-width: 640px) {
    /* Smal scherm: het bordje mag de ploegnamen niet wegdrukken. */
    .uwt-wed-nr { max-width: 38%; }
}
.uwt-ko-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uwt-ko-keuze .uwt-drop-act { align-items: center; text-align: center; }
/* Tweede mogelijkheid in dezelfde dialoog: plaatsingswedstrijden. */
.uwt-ko-plaatsing { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.uwt-ko-plaatsing-titel { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.uwt-ko-plaatsing .uwt-drop-act { align-items: center; text-align: center; width: 100%; }

/* ---- "Schema genereren": keuzedialog categorie / poules / terreinen ---- */
.uwt-gen-kaart { max-width: 460px; }
.uwt-gen-kaart .uwt-drop-act { align-items: center; text-align: center; width: 100%; }
.gen-blok { display: flex; flex-direction: column; gap: 6px; }
.gen-blok + .gen-blok { padding-top: 12px; border-top: 1px solid var(--line-3); }
.gen-kop { display: flex; align-items: baseline; gap: 8px; }
.gen-kop .field-label { margin: 0; flex: 1; }
.gen-mini {
    background: transparent; border: 0; cursor: pointer; padding: 2px 4px;
    font: inherit; font-size: 12px; font-weight: 700; color: var(--muted-3);
}
.gen-mini:hover { color: var(--ink); text-decoration: underline; }
.gen-vinkjes {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 190px; overflow-y: auto;
}
.gen-vinkjes--rij { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.gen-groep {
    display: flex; align-items: center; gap: 6px; margin-top: 4px;
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted-2);
}
.gen-groep:first-child { margin-top: 0; }
.gen-vink {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.gen-vink input { width: auto; flex: none; }
.gen-hint { margin: 2px 0 0; font-size: 12px; }
/* Aanvangsuur in de dialoog: smal veld, op mobiel volle breedte (tikbaar). */
.gen-uur { width: 130px; max-width: 100%; }
@media (max-width: 640px) { .gen-uur { width: 100%; } }
/* Speeldagen: het einduur en het maximum per ploeg per dag horen bij hetzelfde
   blok als de dagvinkjes, dus krijgen ze wat lucht i.p.v. een scheidingslijn. */
.gen-blok > .gen-hint + .field-label { margin-top: 8px; }
/* "Wedstrijden aansluiten": het tijdsvenster van–tot, op één rij. Uitgegrijsd
   zolang "de hele dag" aanstaat, maar wél bruikbaar: wie een uur aanpast, kiest
   daarmee meteen "Enkel tussen". */
.aansl-uren { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aansl-uren.is-uit { opacity: .45; }
.aansl-en { font-size: 13px; font-weight: 600; color: var(--muted-2); }
@media (max-width: 640px) {
    .aansl-uren .gen-uur { width: auto; flex: 1 1 40%; min-width: 108px; }
}
@media (max-width: 640px) {
    .gen-vinkjes { max-height: 150px; }
}

/* ============================================================================
   Probleem melden — zwevende knop (links onder) + modal
   ============================================================================ */
/*  Rechtsonder i.p.v. linksonder: links stond hij over de laatste items van de
    dashboard-zijbalk. Standaard enkel het icoontje; het label schuift open bij
    hover/focus, zodat de knop zo min mogelijk van de pagina afdekt. */
.pm-fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 9990;
    display: inline-flex; align-items: center;
    background: var(--ink); color: #fff; border: 0; cursor: pointer;
    font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1;
    padding: 10px; border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18); opacity: .8;
    transition: opacity .15s ease, transform .12s ease;
}
.pm-fab:hover, .pm-fab:focus-visible { opacity: 1; }
.pm-fab:active { transform: translateY(1px); }
.pm-fab svg { width: 16px; height: 16px; flex: none; }
.pm-fab span {
    max-width: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
    transition: max-width .18s ease, margin-left .18s ease;
}
.pm-fab:hover span, .pm-fab:focus-visible span { max-width: 180px; margin-left: 8px; }

.pm-overlay {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 18, 15, .5); padding: 20px;
}
.pm-overlay.open { display: flex; }
.pm-modal {
    background: #fff; border-radius: 16px; width: 440px; max-width: 100%;
    max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.pm-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.pm-modal-title { font-family: var(--display); font-weight: 800; font-size: 19px; }
.pm-x {
    background: none; border: 0; cursor: pointer; color: var(--muted-3);
    font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px;
}
.pm-x:hover { color: var(--ink); background: var(--line-3); }
.pm-body { padding: 20px 22px 22px; }
.pm-row { margin-bottom: 16px; }
.pm-lbl {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted-2); margin: 0 0 6px;
}
.pm-field {
    width: 100%; box-sizing: border-box; font-family: var(--body); font-size: 15px;
    color: var(--ink); background: var(--bg); border: 1px solid var(--line-5);
    border-radius: 10px; padding: 11px 13px; transition: border-color .15s ease;
}
.pm-field:focus { outline: none; border-color: var(--green); }
textarea.pm-field { min-height: 130px; resize: vertical; line-height: 1.5; }
.pm-drop {
    border: 1.5px dashed var(--line-6); border-radius: 12px; padding: 18px 14px;
    text-align: center; cursor: pointer; color: var(--green-text);
    font-weight: 600; font-size: 14px; transition: border-color .15s ease, background .15s ease;
}
.pm-drop:hover, .pm-drop.drag { border-color: var(--green); background: var(--green-tint); }
.pm-drop-hint { color: var(--muted-4); font-weight: 500; font-size: 12px; margin-top: 5px; }
.pm-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-file {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; background: var(--line-3); border-radius: 8px; padding: 7px 11px;
}
.pm-file-x { background: none; border: 0; cursor: pointer; color: var(--muted-3); font-size: 17px; line-height: 1; flex: none; }
.pm-file-x:hover { color: var(--red-text); }
.pm-actions { margin-top: 4px; }
.pm-submit { width: 100%; justify-content: center; }
.pm-submit:disabled { opacity: .6; cursor: default; }
.pm-msg { font-size: 13px; margin: 12px 0 0; text-align: center; }
.pm-msg.err { color: var(--red-text); }
.pm-msg.ok { color: var(--green-text); }

@media (max-width: 520px) {
    .pm-fab { right: 12px; bottom: 12px; padding: 12px; }
    .pm-fab span { display: none; }              /* smal scherm: enkel icoon, discreet */
    .pm-overlay { padding: 0; align-items: flex-end; }
    .pm-modal { width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; }
}

/* ============================================================================
   AI-hulpassistent (zwevende chatwidget, zie includes/ai_chat_widget.php).
   Links onderin — bewust het spiegelbeeld van .pm-fab (rechts): op pagina's
   waar beide knoppen tonen (ingelogde gebruiker) mogen ze niet overlappen.
   ============================================================================ */
.ac-fab {
    position: fixed; left: 18px; bottom: 18px; z-index: 9990;
    display: inline-flex; align-items: center;
    background: var(--green); color: #fff; border: 0; cursor: pointer;
    font-family: var(--body); font-weight: 700; font-size: 13px; line-height: 1;
    padding: 10px; border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18); opacity: .85;
    transition: opacity .15s ease, transform .12s ease;
}
.ac-fab:hover, .ac-fab:focus-visible { opacity: 1; }
.ac-fab:active { transform: translateY(1px); }
.ac-fab svg { width: 18px; height: 18px; flex: none; }
.ac-fab span {
    max-width: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
    transition: max-width .18s ease, margin-left .18s ease;
}
.ac-fab:hover span, .ac-fab:focus-visible span { max-width: 180px; margin-left: 8px; }

.ac-overlay {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: flex-end; justify-content: flex-start;
    background: rgba(20, 18, 15, .5); padding: 20px;
}
.ac-overlay.open { display: flex; }
.ac-modal {
    background: #fff; border-radius: 16px; width: 380px; max-width: 100%;
    max-height: 78vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.ac-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--line); flex: none;
}
.ac-modal-title { font-family: var(--display); font-weight: 800; font-size: 17px; }
.ac-x {
    background: none; border: 0; cursor: pointer; color: var(--muted-3);
    font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px;
}
.ac-x:hover { color: var(--ink); background: var(--line-3); }
.ac-messages {
    flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: flex;
    flex-direction: column; gap: 10px; min-height: 220px;
}
.ac-msg {
    max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14px;
    line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.ac-msg-bot { align-self: flex-start; background: var(--line-3); color: var(--ink); border-bottom-left-radius: 4px; }
.ac-msg-user { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 4px; }
.ac-msg-err { color: var(--red-text); font-size: 13px; margin: 0 18px; text-align: center; }
.ac-inputrow {
    display: flex; align-items: flex-end; gap: 8px; padding: 12px 18px; flex: none;
    border-top: 1px solid var(--line);
}
.ac-input {
    flex: 1 1 auto; box-sizing: border-box; font-family: var(--body); font-size: 14px;
    color: var(--ink); background: var(--bg); border: 1px solid var(--line-5);
    border-radius: 10px; padding: 9px 12px; resize: none; max-height: 120px;
    line-height: 1.4; transition: border-color .15s ease;
}
.ac-input:focus { outline: none; border-color: var(--green); }
.ac-send { flex: none; }
.ac-footer {
    font-size: 11px; color: var(--muted-4); text-align: center; margin: 0;
    padding: 0 18px 14px; flex: none;
}
.ac-footer a { color: inherit; text-decoration: underline; }

@media (max-width: 520px) {
    .ac-fab { left: 12px; bottom: 12px; padding: 12px; }
    .ac-fab span { display: none; }
    .ac-overlay { padding: 0; align-items: flex-end; justify-content: center; }
    .ac-modal { width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; }
}

/* ============================================================================
   Help — snelzoek-dialog (topbalk "Help", zie includes/_helpdialog.php)
   ============================================================================ */
.hz-overlay {
    position: fixed; inset: 0; z-index: 10001; display: none;
    align-items: flex-start; justify-content: center;
    background: rgba(20, 18, 15, .5); padding: 8vh 20px 20px;
}
.hz-overlay.open { display: flex; }
.hz-modal {
    background: #fff; border-radius: 16px; width: 560px; max-width: 100%;
    max-height: 78vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.hz-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.hz-ic { font-size: 15px; opacity: .55; flex: none; }
.hz-input {
    flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
    font-family: var(--body); font-size: 16px; color: var(--ink); padding: 4px 0;
}
.hz-input::placeholder { color: var(--muted-3); }
.hz-x {
    background: none; border: 0; cursor: pointer; color: var(--muted-3);
    font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px; flex: none;
}
.hz-x:hover { color: var(--ink); background: var(--line-3); }
.hz-groep {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted-2); padding: 12px 18px 0; flex: none;
}
.hz-groep:empty { display: none; }
.hz-lijst { overflow-y: auto; padding: 8px; flex: 1 1 auto; }
.hz-item {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 10px 11px; border-radius: 10px; text-decoration: none; color: inherit;
}
.hz-item:hover, .hz-item.actief { background: var(--green-tint); }
.hz-item-ic { font-size: 16px; line-height: 1.4; flex: none; }
.hz-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hz-item-titel { font-weight: 700; font-size: 14px; color: var(--ink); }
.hz-item-cat { font-size: 11px; font-weight: 600; color: var(--muted-3); }
.hz-item-frag { font-size: 12.5px; color: var(--muted-4); line-height: 1.45; }
.hz-item mark { background: var(--green-tint-2); color: inherit; border-radius: 3px; padding: 0 1px; }
.hz-melding { padding: 18px 12px; text-align: center; font-size: 13.5px; color: var(--muted-4); }
.hz-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 18px; border-top: 1px solid var(--line); flex: none;
    background: var(--bg); font-size: 12.5px;
}
.hz-foot a { color: var(--green-text); font-weight: 700; text-decoration: none; }
.hz-hint { color: var(--muted-3); }

@media (max-width: 520px) {
    .hz-overlay { padding: 0; align-items: stretch; }
    .hz-modal { width: 100%; max-height: 100%; border-radius: 0; }
    .hz-hint { display: none; }
}

/* ── Helpsuggesties in "Probleem melden" en het contactformulier ────────────
   Verschijnt enkel zodra er iets te suggereren valt (JS zet [hidden] weg) en
   duwt de verstuurknop nooit uit beeld: maximaal 3 items, compact gezet. */
.hs-box {
    margin: 0 0 14px; padding: 11px 13px; border-radius: 10px;
    background: var(--green-tint); border: 1px solid var(--line-2, var(--line));
}
.hs-box[hidden] { display: none; }
.hs-titel {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--muted-2);
    margin-bottom: 8px; line-height: 1.35;
}
.hs-lijst { display: flex; flex-direction: column; gap: 4px; }
.hs-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 8px; border-radius: 8px; text-decoration: none;
    background: #fff; border: 1px solid var(--line);
}
.hs-item:hover, .hs-item:focus-visible { border-color: var(--green); }
.hs-item-ic { font-size: 15px; line-height: 1.35; flex: none; }
.hs-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hs-item-titel { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.hs-item-cat { font-size: 11px; font-weight: 600; color: var(--muted-3); }
.hs-item-frag {
    font-size: 12px; color: var(--muted-4); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-item mark { background: var(--green-tint-2); color: inherit; border-radius: 3px; padding: 0 1px; }

@media (max-width: 520px) {
    .hs-box { padding: 10px; }
    .hs-item-frag { -webkit-line-clamp: 1; }
}

/* ============================================================================
   Changelog — dialoog achter het versienummer (zie includes/_changelog.php)
   ============================================================================ */
.ver-knop {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 11px;
    color: rgba(255, 255, 255, .4);
}
.ver-knop:hover { color: rgba(255, 255, 255, .85); text-decoration: underline; }
.cl-overlay {
    position: fixed; inset: 0; z-index: 10001; display: none;
    align-items: flex-start; justify-content: center;
    background: rgba(20, 18, 15, .5); padding: 8vh 20px 20px;
}
.cl-overlay.open { display: flex; }
.cl-modal {
    background: #fff; border-radius: 16px; width: 560px; max-width: 100%;
    max-height: 78vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.cl-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.cl-head-ic { font-size: 20px; flex: none; }
.cl-head-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cl-head-titel { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.cl-head-sub { font-size: 12px; color: var(--muted-3); }
.cl-x {
    background: none; border: 0; cursor: pointer; color: var(--muted-3);
    font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px; flex: none;
}
.cl-x:hover { color: var(--ink); background: var(--line-3); }
.cl-lijst { overflow-y: auto; padding: 6px 18px 14px; flex: 1 1 auto; }
.cl-rel { padding: 14px 0; border-bottom: 1px solid var(--line-3); }
.cl-rel:last-child { border-bottom: 0; }
.cl-rel-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cl-ver { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.cl-datum { font-size: 12px; font-weight: 600; color: var(--muted-3); }
.cl-nu {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--green-text); background: var(--green-tint); border-radius: 20px; padding: 2px 8px;
}
.cl-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.cl-items li { font-size: 13.5px; line-height: 1.5; color: var(--muted-4); }
.cl-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 18px; border-top: 1px solid var(--line); flex: none;
    background: var(--bg); font-size: 12.5px;
}
.cl-foot a { color: var(--green-text); font-weight: 700; text-decoration: none; }
.cl-hint { color: var(--muted-3); }

@media (max-width: 520px) {
    .cl-overlay { padding: 0; align-items: stretch; }
    .cl-modal { width: 100%; max-height: 100%; border-radius: 0; }
    .cl-hint { display: none; }
}

/* Meldingsbalkje onder de topbalk: "er is een nieuwe versie" (_changelogbalk.php) */
.clbalk {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
    padding: 9px 24px; font-size: 13px; font-weight: 600;
    background: var(--green-tint); color: var(--green-dark);
    border-bottom: 1px solid var(--green-tint-2);
    transition: opacity .18s ease;
}
.clbalk-dicht { opacity: 0; }
.clbalk-tekst { flex: 1 1 auto; min-width: 160px; }
.clbalk-knop {
    background: var(--green); border: 0; color: #fff; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 12px;
    border-radius: 8px; padding: 7px 12px; flex: none;
}
.clbalk-knop:hover { background: var(--green-deep, var(--green)); }
.clbalk-nooit {
    background: none; border: 0; cursor: pointer; color: var(--green-dark);
    font-family: inherit; font-weight: 600; font-size: 12px; opacity: .75;
    text-decoration: underline; padding: 4px 0; flex: none;
}
.clbalk-nooit:hover { opacity: 1; }
.clbalk-x {
    background: none; border: 0; cursor: pointer; color: var(--green-dark);
    font-size: 20px; line-height: 1; padding: 0 4px; opacity: .55; flex: none;
}
.clbalk-x:hover { opacity: 1; }

/* Zelfde balkje, maar als waarschuwing: laatste dag om nog te wijzigen voor het
   tornooi op slot gaat (views/tornooi_dashboard.php). Oranje, zoals de
   slot-melding in de content. */
.slotbalk {
    background: #fff9ef; color: #9a6700;
    border-bottom: 1px solid #f0dfc0;
}

@media (max-width: 640px) {
    .clbalk { padding: 9px 16px; gap: 6px 10px; }
    .clbalk-tekst { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   Laddercompetitie (dashboard Ladder-tabblad)
   Class-based met media queries — tabellen scrollen horizontaal op mobiel.
--------------------------------------------------------------------------- */
.ladder-h { font-family: var(--display); font-weight: 700; font-size: 15px; margin: 0 0 12px; }
.ladder-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ladder-tabel { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.ladder-tabel th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted-3); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--line-2); }
.ladder-tabel td { padding: 9px 10px; border-bottom: 1px solid var(--line-3); vertical-align: top; }
.ladder-tabel .num { text-align: right; white-space: nowrap; }
.ladder-tabel th.num { text-align: right; }
.ladder-tabel tr:last-child td { border-bottom: 0; }
.ladder-del { cursor: pointer; color: var(--muted-4, #b3ada2); font-size: 15px; }
.ladder-del:hover { color: var(--red-text); }
.ladder-uitdaag { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ladder-uitdaag .field { width: auto; min-width: 150px; padding: 8px 12px; }
.ladder-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ladder-cfg label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted-2, #55504a); }
.ladder-cfg .field { width: 100%; }
.ladder-cfg-full { grid-column: 1 / -1; }
.ladder-cfg-check { flex-direction: row !important; align-items: center; gap: 8px; font-weight: 600; }
.ladder-cfg-check input { width: auto; }

@media (max-width: 640px) {
    .ladder-uitdaag .field { width: 100%; min-width: 0; }
    .ladder-cfg { grid-template-columns: 1fr; }
}

.ladder-klaar-banner {
    background: var(--green-tint); color: var(--green-dark, var(--green-text));
    border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
    font-weight: 600; font-size: 14px; text-align: center;
}

/* Speler-portaal (laddercompetitie, fase 2) */
.ladder-tabel tr.ladder-mijn td { background: var(--green-tint); font-weight: 600; }
.ladder-uit-rij {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line-3); font-size: 14px;
}
.ladder-uit-rij:last-child { border-bottom: 0; }

/* Telefoonnummer van de tegenstander (enkel bij toestemming): tikbaar op mobiel. */
.ladder-tel { white-space: nowrap; font-size: 13px; font-weight: 600; }

/* Checkbox met tekst op één regel in het inschrijfformulier (wraps netjes op mobiel). */
.inschr-check {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 14px; line-height: 1.4; cursor: pointer;
}
.inschr-check input { width: auto; flex: none; margin-top: 2px; }

/* Telefoon + deel-vinkje per inschrijving in het beheer (naast de punten). */
.inschr-tel-blok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.inschr-tel-blok label { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.inschr-tel-blok .field { width: 132px; padding: 4px 6px; font-size: 13px; }
.inschr-tel-blok input[type="checkbox"] { width: auto; }

/* Toewijzing scheidsrechter per wedstrijd (tabblad Scheidsrechters) */
.ref-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ref-filters .field { width: auto; padding: 8px 28px 8px 12px; font-weight: 600; }
.ref-filter-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.ref-filter-check input { width: auto; }
.ref-rij {
    display: grid; grid-template-columns: 74px minmax(0, 1fr) 210px;
    gap: 4px 14px; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid var(--line-3); font-size: 14px;
}
.ref-rij.is-conflict { background: #fdeaea; }
.ref-rij-tijd { font-size: 12px; color: var(--muted-2); font-weight: 600; white-space: nowrap; }
.ref-rij-dag { display: block; }
.ref-rij-info { min-width: 0; }
.ref-rij-ploegen { display: block; font-weight: 600; }
.ref-rij-meta {
    display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap;
    font-size: 12px; color: var(--muted-2); margin-top: 2px;
}
.ref-conflict-tag { color: var(--red-text); font-weight: 700; }
.ref-rij .field { padding: 8px 10px; }
/* Keuzepaneel bij de knop "Scheidsrechterkaartjes" (categorie / dag / formaat) */
.refcards { position: relative; }
.refcards > summary { list-style: none; cursor: pointer; }
.refcards > summary::-webkit-details-marker { display: none; }
.refcards-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    width: 260px; padding: 14px; text-align: left;
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.refcards-pop label { display: block; margin-bottom: 10px; }
.refcards-pop .field { width: 100%; }
.refcards-aantal { margin: 0 0 10px; font-size: 12px; }
.refcards-pop .btn[disabled] { opacity: .5; pointer-events: none; }
@media (max-width: 640px) {
    /* Op mobiel onder elkaar: uur + wedstrijd, dropdown over de volle breedte. */
    .ref-rij { grid-template-columns: 62px minmax(0, 1fr); padding: 12px 14px; }
    .ref-rij .field { grid-column: 1 / -1; margin-top: 6px; }
    .ref-rij-dag { display: inline; margin-right: 4px; }
    .ref-filters { width: 100%; }
    .ref-filters .field { flex: 1 1 140px; }
    /* Op mobiel geen zwevend paneel: gewoon onder de knop over de volle breedte. */
    .refcards { width: 100%; }
    .refcards > summary { width: 100%; justify-content: center; }
    .refcards-pop { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
}

/* Info-tooltip bij ladder-instellingen (werkt op hover én focus/tap → mobiel-vriendelijk) */
.ladder-lbl { display: inline-flex; align-items: center; gap: 6px; }
.uwt-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--line-2); color: var(--muted-3);
    font-size: 10px; font-weight: 800; font-style: italic; line-height: 1;
    cursor: help; position: relative; flex: none; user-select: none;
}
.uwt-tip:focus { outline: 2px solid var(--green, #1f9d57); outline-offset: 1px; }
.uwt-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    background: #1f2430; color: #fff; padding: 8px 11px; border-radius: 9px;
    font-size: 12px; font-weight: 500; font-style: normal; line-height: 1.4; text-align: left;
    width: max-content; max-width: 240px; white-space: normal;
    opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 60;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
/* CSS-bubbel enkel als fallback wanneer JS niet actief is (anders neemt .uwt-tip-pop over). */
html:not(.uwt-js-tips) .uwt-tip:hover::after,
html:not(.uwt-js-tips) .uwt-tip:focus::after { opacity: 1; }
@media (max-width: 640px) {
    /* Op smalle schermen links uitlijnen zodat de bubbel niet buiten beeld valt. */
    .uwt-tip::after { left: 0; transform: none; max-width: 78vw; }
}
/* Zwevende tooltip (JS): staat op <body> zodat overflow:hidden van de kaart hem niet afsnijdt,
   en wordt binnen het scherm geklemd zodat de tekst altijd volledig leesbaar is. */
.uwt-tip-pop {
    position: fixed; z-index: 2000; display: none;
    background: #1f2430; color: #fff; padding: 8px 11px; border-radius: 9px;
    font-size: 12px; font-weight: 500; font-style: normal; line-height: 1.4; text-align: left;
    max-width: min(320px, 92vw); white-space: normal;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.uwt-tip-pop.is-open { opacity: 1; }
/* Optionele kop in de tooltip (data-tip-titel) */
.uwt-tip-pop strong { display: block; font-weight: 800; margin-bottom: 4px; }

/* Speler: eigen wedstrijden / setscore-invoer */
.ladder-wed { padding: 10px 0; border-bottom: 1px solid var(--line-3); font-size: 14px; }
.ladder-wed:last-child { border-bottom: 0; }
.ladder-sets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ladder-set { display: inline-flex; gap: 4px; align-items: center; }
.ladder-set .field { width: 48px; padding: 5px 6px; text-align: center; }

/* ============================================================================
   Sponsors beheren per tornooi (views/tornooi_sponsors.php)
   ============================================================================ */
.sponsor-sec { max-width: 980px; }
.sponsor-melding { margin-bottom: 16px; font-weight: 600; font-size: 14px; }

/* Sponsoropties: label links, schakelaar rechts (één rij per optie) */
.sponsor-optie {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px; border-bottom: 1px solid var(--line-3);
}
.sponsor-optie-lbl { font-weight: 600; font-size: 14px; }
.sponsor-optie-sub { font-size: 12px; margin-top: 2px; }
.sponsor-optie-voet {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* Beheerderskaart: opties gratis activeren (enkel zichtbaar voor admins) */
.sponsor-adm { border-left: 4px solid #6d28d9; }
.sponsor-adm .sponsor-optie { flex-wrap: wrap; }
.sponsor-adm .sponsor-optie:last-of-type { border-bottom: 0; }

/* Schakelaar als knop (POST) — zelfde look als .toggle, zonder knop-styling */
.toggle-btn { padding: 0; border: 0; cursor: pointer; appearance: none; }

/* Lijst + formulier naast elkaar; op smalle schermen onder elkaar */
.sponsor-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
/* Niet betaald → pagina niet bewerkbaar (velden staan serverzijde al op disabled) */
.sponsor-slot { opacity: .6; }

.sponsor-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.sponsor-tabel tr { border-top: 1px solid var(--line-2); }
.sponsor-tabel td { padding: 12px 14px; vertical-align: middle; }
.sponsor-tabel td.logo { width: 84px; padding-left: 16px; }
.sponsor-tabel td.logo img { max-width: 64px; max-height: 40px; object-fit: contain; display: block; }
.sponsor-tabel td.acties { padding-right: 16px; text-align: right; white-space: nowrap; }
/* Hoofdsponsor: staat bovenaan de lijst en krijgt een gouden accent */
.sponsor-tabel tr.is-hoofd { background: #fffbeb; box-shadow: inset 3px 0 0 #d99e00; }
.sponsor-tabel tr.is-hoofd td.logo img { max-width: 76px; max-height: 48px; }
.sponsor-badge {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: #fef3c7; color: #92610a; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
/* Aanvinkveld "hoofdsponsor" in het formulier */
.sponsor-hoofd-veld {
    display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px;
    padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
}
.sponsor-hoofd-veld input { margin-top: 2px; flex: none; }
.sponsor-hoofd-veld:has(input:checked) { border-color: #d99e00; background: #fffbeb; }
.sponsor-hoofd-veld:has(input:disabled) { cursor: default; }
.sponsor-hoofd-lbl { display: block; font-weight: 600; font-size: 14px; }
.sponsor-hoofd-hint { display: block; font-size: 12px; margin-top: 2px; line-height: 1.45; }

/* Gratis uitproberen: voorbeeldlink van 10 min + proefrit van 24 u */
.sponsor-proef { border-left: 4px solid var(--green); }
.sponsor-proef-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.sponsor-proef-knoppen .btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 900px) {
    .sponsor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sponsor-optie { padding: 12px 16px; }
    .sponsor-tabel td.acties { white-space: normal; }
    .sponsor-proef-knoppen .btn { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   Balk bij een sponsorvoorbeeld op live.php / tv.php

   Een voorbeeld toont de eigen sponsors alsof de optie al genomen is. Die balk
   moet onmiskenbaar zijn: wie het presentatiescherm bedient is doorgaans zelf
   ingelogd en zou een stil voorbeeld anders de hele dag kunnen laten staan.
   --------------------------------------------------------------------------- */
.sp-vb-balk {
    background: #b45309;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.4;
}
@media (max-width: 640px) {
    .sp-vb-balk { padding: 8px 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Eigen slides op het presentatiescherm (dashboard, sec=presentatie)
   --------------------------------------------------------------------------- */
.tvs-sec { max-width: 980px; }
.tvs-kop-rij {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.tvs-kop-rij .btn { flex: none; }
.tvs-melding { margin-bottom: 16px; font-weight: 600; font-size: 14px; }
.tvs-kop-kaart {
    margin-bottom: 18px; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.tvs-kop-lbl { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.tvs-kop-sub { font-size: 13px; }
/* Slides staan klaar maar nog niet op het scherm: uitleg + knop naar Sponsors */
.tvs-slot-kaart { margin-bottom: 18px; border-left: 4px solid #e67e22; }
.tvs-slot-kop { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.tvs-slot-uitleg { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }

/* Verwijzing naar de sponsorsectie bij Publieke link en Presentatiescherm */
.pres-sponsor-tip { font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.pres-sponsor-tip a { font-weight: 600; white-space: nowrap; }

.tvs-lijst-kop { display: flex; justify-content: space-between; align-items: center; }
.tvs-lijst-aantal { font-weight: 600; font-size: 13px; }
.tvs-lijst { list-style: none; margin: 0; padding: 0; }
.tvs-lijst-voet {
    margin: 0; padding: 12px 16px 14px; font-size: 12px; line-height: 1.5;
    border-top: 1px solid var(--line-2);
}
.tvs-rij {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--line-2);
}
/* Uitgezette slide: staat in de lijst maar niet op het scherm */
.tvs-rij.is-uit { opacity: .55; }
.tvs-greep { cursor: grab; color: var(--muted-4); font-size: 15px; user-select: none; flex: none; }
.tvs-mini {
    flex: none; width: 62px; height: 40px; border-radius: 7px; overflow: hidden;
    background: var(--bg); border: 1px solid var(--line-2);
    display: flex; align-items: center; justify-content: center;
}
.tvs-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvs-mini-icoon { font-size: 18px; }
.tvs-info { flex: 1; min-width: 0; }
/* Titel + badges op één regel; een lange titel wordt na twee regels afgekapt
   zodat elke slide even hoog in de lijst staat. */
.tvs-naam { font-weight: 700; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.tvs-naam-tekst {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 100%;
}
.tvs-meta { font-size: 12px; margin-top: 2px; color: var(--muted); }
.tvs-badge {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    background: var(--line-2); color: var(--muted); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
.tvs-badge.uit { background: #fee2e2; color: #991b1b; }
.tvs-acties { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tvs-acties form { display: inline; }
.tvs-del { background: var(--red, #c0392b); color: #fff; }
/* Formulier: alleen de velden van het gekozen type */
.tvs-veld { margin-bottom: 12px; }
.tvs-hint { font-size: 12px; margin: -6px 0 14px; line-height: 1.45; }
.tvs-alleen-beeld, .tvs-alleen-qr { display: none; }
#tvs-form.is-beeld .tvs-alleen-beeld, #tvs-form.is-qr .tvs-alleen-qr { display: block; }
.tvs-form-beeld {
    display: block; width: 100%; max-height: 130px; object-fit: contain;
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; margin-bottom: 8px;
}
.tvs-talen { margin-bottom: 14px; }
.tvs-talen summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; }
.tvs-venster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tvs-actief-veld {
    display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px;
    padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
}
.tvs-actief-veld input { margin-top: 2px; flex: none; }
.tvs-actief-lbl { display: block; font-weight: 600; font-size: 14px; }
.tvs-actief-hint { display: block; font-size: 12px; margin-top: 2px; line-height: 1.45; }
.tvs-submit { width: 100%; justify-content: center; }
.tvs-annuleer { width: 100%; justify-content: center; margin-top: 8px; }

/* Modal "Slide toevoegen"/"Slide bewerken" — zelfde opzet als .pm-overlay */
.tvs-overlay {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 18, 15, .5); padding: 20px;
}
.tvs-overlay.open { display: flex; }
.tvs-modal {
    background: #fff; border-radius: 16px; width: 480px; max-width: 100%;
    max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.tvs-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.tvs-modal-title { font-family: var(--display); font-weight: 800; font-size: 19px; }
.tvs-modal-x {
    background: none; border: 0; cursor: pointer; color: var(--muted-3);
    font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px;
}
.tvs-modal-x:hover { color: var(--ink); background: var(--line-3); }
.tvs-modal-body { padding: 20px 22px 22px; }

@media (max-width: 640px) {
    /* Op een telefoon onder elkaar: greep + beeld + titel boven, knoppen eronder */
    .tvs-rij { flex-wrap: wrap; }
    .tvs-info { flex-basis: calc(100% - 100px); }
    .tvs-acties { flex-basis: 100%; justify-content: flex-start; padding-left: 34px; }
    .tvs-venster { grid-template-columns: 1fr; }
    .tvs-overlay { padding: 0; align-items: flex-end; }
    .tvs-modal { width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; }
}

/* Tabbladen "Inschrijvingen" / "Uitnodigen", nu samen onder één menu-item
   (dashboard, sec=inschrijvingen). Zelfde stijl als .club-tabs. */
.in-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.in-tab { padding: 9px 14px; border-radius: 9px; font-weight: 600; font-size: 14px;
          color: var(--muted-2); background: var(--line-3); }
.in-tab.active { background: var(--green-tint-2); color: var(--green-text); }

/* ---------------------------------------------------------------------------
   Uitnodigen (dashboard, sec=inschrijvingen&tab=uitnodigen)
   Links de twee formulieren (adressen, onderwerp+boodschap), rechts de
   opvolging. Onder 900px komt alles onder elkaar; de statuschips zijn een
   wrappende rij, zodat een telefoon nooit horizontaal moet scrollen.
   --------------------------------------------------------------------------- */
.uitn-sec { max-width: 1040px; }
/* "Ik verstuur de uitnodigingen zelf" — alternatief voor wie buiten dit
   systeem uitnodigt; telt toch mee op de starterschecklist. */
.uitn-zelf-kaart { margin-bottom: 18px; }
.uitn-zelf-lbl { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.uitn-melding { margin-bottom: 16px; font-weight: 600; font-size: 14px; }
.uitn-melding.ok { border-left: 4px solid var(--green); }
.uitn-melding.fout { border-left: 4px solid var(--red, #c0392b); }
.uitn-link-kaart { margin-bottom: 18px; border-left: 4px solid var(--green); }
.uitn-link-kaart.dicht { border-left-color: #e67e22; }
.uitn-link-kop { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.uitn-link-uitleg { font-size: 13px; line-height: 1.5; }
.uitn-link-kaart .btn { margin-top: 12px; }
.uitn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; align-items: start; }
.uitn-kaart { margin-bottom: 18px; }
.uitn-adressen { height: 130px; resize: vertical; font-family: inherit; }
.uitn-boodschap { height: 230px; resize: vertical; font-family: inherit; line-height: 1.5; }
.uitn-veld { margin-bottom: 14px; }
.uitn-hint { font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.uitn-submit { margin-top: 12px; }
.uitn-knoprij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.uitn-afzender { margin-top: 12px; }
/* Tellers boven de lijst: wrappen liever dan te krimpen */
.uitn-lijst-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.uitn-lijst-aantal { font-weight: 600; font-size: 13px; }
.uitn-som {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    padding: 12px 16px; border-bottom: 1px solid var(--line-2);
}
.uitn-som-cel { min-width: 62px; }
.uitn-som-getal { font-weight: 700; font-size: 17px; line-height: 1.2; }
.uitn-som-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.uitn-lijst { list-style: none; margin: 0; padding: 0; }
.uitn-rij {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-top: 1px solid var(--line-2);
}
/* Nog niet verstuurd: staat in de lijst, maar is nog niets geworden */
.uitn-rij.wacht { opacity: .7; }
.uitn-info { flex: 1; min-width: 0; }
.uitn-mail { font-weight: 600; font-size: 13px; word-break: break-all; }
.uitn-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.uitn-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.uitn-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--line-2); color: var(--muted-4); font-size: 11px; font-weight: 600;
}
.uitn-chip.aan { background: var(--green-tint); color: var(--green-text); }
.uitn-chip.fout { background: #fde9e7; color: var(--red-text, #9b1c1c); }
.uitn-del-form { flex: none; }
.uitn-del {
    background: none; border: 0; cursor: pointer; padding: 2px 4px;
    color: var(--muted-5); font-size: 14px; line-height: 1;
}
.uitn-chip.plan { background: #e0edff; color: #1d4ed8; }
.uitn-chip.nee { background: #fdf0e4; color: #9a6700; }
.uitn-reden { font-size: 12px; margin-top: 4px; font-style: italic; color: var(--muted); }
/* Voet van de lijst: CSV-export links, opruimknop rechts; wrapt op mobiel */
.uitn-lijst-voet {
    padding: 12px 16px; border-top: 1px solid var(--line-2);
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.uitn-wis-form { margin: 0; }
.uitn-lijst-noot { padding: 0 16px 14px; margin: 0; font-size: 12px; line-height: 1.5; }
/* Adressen overnemen uit een vorig tornooi of uit het adresboek */
.uitn-import { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.uitn-import-kop { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.uitn-import-rij { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.uitn-import-rij select { flex: 1 1 180px; min-width: 0; }
.uitn-import-rij .btn { flex: none; }
/* Testmail: adres + knop naast elkaar, onder elkaar op een telefoon */
.uitn-test-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.uitn-test-rij input { flex: 1 1 180px; min-width: 0; }
.uitn-test-rij .btn { flex: none; }
.uitn-her-uitleg { margin: 0 0 14px; }
/* Adresboek: inklapbaar, zodat de opvolging bovenaan blijft */
.uitn-ab > summary { cursor: pointer; list-style: none; }
.uitn-ab > summary::-webkit-details-marker { display: none; }
.uitn-ab-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.uitn-ab-kop::after { content: '▾'; color: var(--muted-4); font-size: 11px; }
.uitn-ab[open] .uitn-ab-kop::after { content: '▴'; }
.uitn-ab-zoek { display: flex; gap: 8px; flex-wrap: wrap; }
.uitn-ab-zoek input { flex: 1 1 160px; min-width: 0; }
.uitn-ab-acties { display: flex; align-items: center; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.uitn-ab-acties form { margin: 0; }
.uitn-ab-bounce { color: var(--red-text, #9b1c1c); font-weight: 600; }
.uitn-rij.bounce { background: #fffaf7; }

@media (max-width: 900px) {
    .uitn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .uitn-knoprij .btn { flex: 1 1 100%; justify-content: center; }
    .uitn-som-cel { min-width: 54px; }
    .uitn-test-rij .btn, .uitn-import-rij .btn { flex: 1 1 100%; justify-content: center; }
    /* Adresboekrij: adres boven, knoppen op een eigen regel eronder */
    .uitn-rij { flex-wrap: wrap; }
    .uitn-ab-acties { flex-basis: 100%; justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   Publieke afmeldpagina ("wij doen niet mee", ?view=uitnodiging_afmelden)
   --------------------------------------------------------------------------- */
.uitnafm-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
}
.uitnafm-kaart {
    background: #fff; border-radius: 18px; padding: 34px; width: 100%; max-width: 480px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22); text-align: center;
}
.uitnafm-brand { justify-content: center; font-size: 24px; margin-bottom: 20px; }
.uitnafm-titel { font-size: 20px; margin: 0 0 12px; color: var(--ink); }
.uitnafm-tekst { font-size: 14px; margin: 0 0 20px; line-height: 1.6; }
.uitnafm-form { margin: 0; text-align: left; }
.uitnafm-reden { height: 84px; resize: vertical; font-family: inherit; margin-bottom: 14px; }
.uitnafm-knop { width: 100%; justify-content: center; }
.uitnafm-link {
    display: inline-block; margin-top: 14px; font-size: 13px;
    color: var(--muted); text-decoration: underline;
}

/* Sponsorstrook onderaan de live-pagina: hoofdsponsors boven, groter */
.live-sponsors {
    background: var(--bg); border-top: 1px solid var(--line-2);
    padding: 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.live-sponsorgroep {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px;
}
.live-sponsors-lbl {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--muted-4);
}
.live-sponsorgroep.hoofd .live-sponsors-lbl { color: #92610a; }
.live-sponsor-logo {
    display: inline-flex; align-items: center; background: #fff;
    border-radius: 8px; padding: 4px 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
/* --sp-schaal (op .live-sponsorgroep): kleiner bij meer sponsors tegelijk, groter bij minder — zie sponsor_logo_schaal(). */
.live-sponsor-logo img { max-height: calc(28px * var(--sp-schaal, 1)); max-width: calc(110px * var(--sp-schaal, 1)); object-fit: contain; display: block; }
.live-sponsorgroep.hoofd .live-sponsor-logo {
    padding: 8px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.12); outline: 2px solid rgba(217,158,0,.7);
}
.live-sponsorgroep.hoofd .live-sponsor-logo img { max-height: calc(52px * var(--sp-schaal, 1)); max-width: calc(180px * var(--sp-schaal, 1)); }

@media (max-width: 640px) {
    .live-sponsors { padding: 14px 16px; }
    .live-sponsorgroep { gap: 10px 16px; }
    .live-sponsorgroep.hoofd .live-sponsor-logo { padding: 6px 12px; }
    .live-sponsorgroep.hoofd .live-sponsor-logo img { max-height: calc(38px * var(--sp-schaal, 1)); max-width: calc(130px * var(--sp-schaal, 1)); }
}

/* ---- Ploeglogo opladen in het beheer (tab Ploegen) ----
   De avatar naast de ploegnaam is zelf de knop: klikken opent de bestandskiezer,
   het kruisje rechtsboven wist het logo. Op een aanraakscherm is er geen hover,
   dus daar staat het kruisje meteen zichtbaar. */
.uwt-logo-knop {
    position: relative; flex: none; width: 28px; height: 28px;
    border-radius: 7px; cursor: pointer; display: block;
}
.uwt-logo-knop img { width: 100%; height: 100%; border-radius: 7px; display: block; object-fit: contain; background: #fff; }
.uwt-logo-knop:not(.heeft-logo) img { background: transparent; opacity: .5; }
.uwt-logo-knop .uwt-logo-file { display: none; }
.uwt-logo-knop::after {
    content: '✎'; position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    border-radius: 7px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 13px;
}
.uwt-logo-knop:hover::after, .uwt-logo-knop:focus-visible::after { display: flex; }
.uwt-logo-knop.is-bezig { opacity: .5; pointer-events: none; }
.uwt-logo-wis {
    position: absolute; top: -6px; right: -6px; z-index: 1; display: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--red, #c0392b); color: #fff;
    font-size: 9px; line-height: 16px; text-align: center;
}
.uwt-logo-knop.heeft-logo:hover .uwt-logo-wis,
.uwt-logo-knop.heeft-logo:focus-visible .uwt-logo-wis { display: block; }
@media (hover: none) {
    .uwt-logo-knop::after { display: none !important; }
    .uwt-logo-knop.heeft-logo .uwt-logo-wis { display: block; width: 18px; height: 18px; line-height: 18px; font-size: 10px; }
}

/* Drag-and-drop voor poule-indeling */
.uwt-ploeg-ghost { opacity: .4; border: 1px dashed var(--green); }
.uwt-ploeg-rij:hover { background: var(--green-tint); }
.uwt-poule-body { transition: min-height .15s; }
/* Is iedereen van deze categorie ingedeeld, dan is de strook "Niet ingedeeld"
   overbodig — maar ze blijft het enige mikpunt om een ploeg weer uit een poule
   te halen. Dus: weg als ze leeg is, terug zodra er gesleept wordt. */
.uwt-ni-card.is-leeg { display: none; }
body.uwt-sleept .uwt-ni-card.is-leeg { display: block; }

/* ============================================================================
   Clubcompetitie — aparte flow (club → reeks → speelmoment → wedstrijd)
   Eigen klassen, geen inline grids: .adm-content slaat inline
   grid-template-columns plat op mobiel (zie de media query rond regel 368).
   ============================================================================ */

.field-sm { padding: 8px 10px; font-size: 14px; border-radius: 8px; }

/* ----------------------------------------------------------------------------
   Teaser op de clubkiezer: wie nog geen toegang heeft, ziet eerst wát het is.
   ---------------------------------------------------------------------------- */
.club-teaser { background: #fff; border: 1px solid var(--line-2); border-radius: 14px;
               padding: 26px 26px 22px; margin: 0 0 22px; max-width: 900px; }
.club-teaser-kop { margin-bottom: 20px; }
.club-teaser-pill { display: inline-block; background: var(--green-tint-2); color: var(--green-text);
                    font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
                    padding: 5px 9px; border-radius: 6px; margin-bottom: 12px; }
.club-teaser-kop h2 { font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1.2;
                      margin: 0 0 8px; color: var(--ink); }
.club-teaser-kop p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

.club-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 26px; }
.club-teaser-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.club-teaser-ic { flex: none; font-size: 20px; line-height: 1.25; }
.club-teaser-item strong { display: block; font-size: 14px; margin-bottom: 3px; color: var(--ink); }
.club-teaser-item span { display: block; font-size: 13px; line-height: 1.55; color: var(--muted); }

.club-teaser-voet { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-3);
                    font-size: 13px; color: var(--muted); }
.club-teaser-voet a { color: var(--green-text); font-weight: 600; }

@media (max-width: 640px) {
    .club-teaser { padding: 20px 18px 18px; border-radius: 12px; }
    .club-teaser-kop h2 { font-size: 21px; }
    .club-teaser-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* clubkiezer */
.club-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.uwt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999;
               align-items: center; justify-content: center; padding: 20px; display: flex; }

/* ----------------------------------------------------------------------------
   Meldingen (uwtMelding in jscripts/app.js). Stonden voorheen ongestyled
   bovenaan de <body>, boven de donkere balk — dus onzichtbaar in de praktijk,
   waardoor geweigerde acties er stil uitzagen. Nu een toast bovenaan het scherm.
   ---------------------------------------------------------------------------- */
.alert { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
         z-index: 10000; max-width: min(560px, calc(100vw - 28px));
         padding: 12px 40px 12px 16px; border-radius: 10px;
         font-family: var(--body); font-weight: 600; font-size: 14px; line-height: 1.45;
         background: #fff; border: 1px solid var(--line-5); color: var(--ink);
         box-shadow: 0 6px 24px rgba(0,0,0,.14);
         opacity: 1; transition: opacity .2s, transform .2s; }
.alert.is-weg { opacity: 0; transform: translateX(-50%) translateY(-6px); }
.alert-danger  { background: #fdeaea;            border-color: #f3c9c9;          color: var(--red-text); }
.alert-success { background: var(--green-tint-2); border-color: var(--green-line); color: var(--green-text); }
.alert-warning { background: #fdf5c9;            border-color: #efe3a0;          color: #8a6d00; }
.alert-sluit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
               background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
               padding: 0 6px; color: inherit; opacity: .55; }
.alert-sluit:hover { opacity: 1; }

/* "+ Club aanmaken"-kaart tussen de clubkaarten op het dashboard */
.club-kaart-nieuw { display: flex; flex-direction: column; align-items: center; justify-content: center;
                    gap: 6px; min-height: 118px; border: 1px dashed var(--line-6); background: transparent;
                    color: var(--muted-2); font-weight: 600; font-size: 14px; text-align: center; padding: 18px; }
.club-kaart-nieuw:hover { border-color: var(--green-line); background: var(--green-tint); color: var(--green-text); }
.club-kaart-plus { font-size: 26px; line-height: 1; font-weight: 700; }

/* formulierraster */
.club-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.club-form-rij { min-width: 0; }
.club-form--deelnemer { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.club-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.club-check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.club-check input { margin-top: 3px; flex: none; }
.club-rechten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; }

/* Kaart "Kopiëren naar andere reeksen", onder de basisgegevens en de matchregels */
.club-kopie { margin-top: 18px; }

/* tabbladen (reeksen) */
.club-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; }
.club-tab { flex: 0 0 auto; padding: 9px 14px; border-radius: 9px; font-weight: 600; font-size: 14px;
            color: var(--muted-2); background: var(--line-3); white-space: nowrap; }
.club-tab.active { background: var(--green-tint-2); color: var(--green-text); }

/* tabellen */
.club-tabel { width: 100%; border-collapse: collapse; }
.club-tabel th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted-3);
                 text-transform: uppercase; letter-spacing: .03em; padding: 12px 14px;
                 border-bottom: 1px solid var(--line-2); }
.club-tabel td { padding: 10px 14px; border-bottom: 1px solid var(--line-3); font-size: 14px; vertical-align: middle; }
.club-tabel tr:last-child td { border-bottom: 0; }
.club-tabel tr.is-gestopt td { opacity: .55; }
.club-stand td { padding: 9px 14px; }

/* Reden waarom je je niet kan aanmelden, naast de uitgeschakelde knop */
.club-reden { font-size: 12px; line-height: 1.35; text-align: right; max-width: 34ch; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) { .club-reden { text-align: left; max-width: none; } }

/* lijsten en chips */
.club-lijst { list-style: none; margin: 0; padding: 0; }
.club-lijst li { padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 14px; }
.club-lijst li:last-child { border-bottom: 0; }
.club-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.club-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--line-3);
             border-radius: 8px; padding: 5px 8px; font-size: 13px; font-weight: 600; }
.chip-weg { background: none; border: 0; cursor: pointer; color: var(--muted-3); font-size: 12px; padding: 0 2px; }
.chip-weg:hover { color: var(--red-text); }

/* generator + kalender naast elkaar */
.club-split { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.club-split-zij { position: sticky; top: 16px; }
.club-split-hoofd { min-width: 0; }
.club-dagen { display: flex; gap: 4px; flex-wrap: wrap; }
.club-dag { display: flex; align-items: center; gap: 4px; background: var(--line-3); border-radius: 7px;
            padding: 6px 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.club-dag input { margin: 0; }

/* weekkalender: kolom per dag, chips per speelmoment */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-kolom { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; min-width: 0; }
.cal-kolom.is-vandaag { border-color: var(--green-line); }
.cal-kop { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line-3); background: var(--line-3); }
.cal-dag { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted-3); }
.cal-datum { display: block; font-size: 13px; font-weight: 700; }
.cal-body { padding: 6px; display: flex; flex-direction: column; gap: 5px; min-height: 60px; }
.cal-leeg { text-align: center; color: var(--muted-5); font-size: 13px; padding: 8px 0; }

.cal-blok { display: block; width: 100%; text-align: left; cursor: pointer;
            border: 1px solid var(--green-line); background: var(--green-tint); color: var(--green-text);
            border-radius: 8px; padding: 6px 7px; font-family: var(--body); }
.cal-blok:hover { background: var(--green-tint-2); }
.cal-blok .cal-tijd  { display: block; font-weight: 700; font-size: 13px; }
.cal-blok .cal-meta  { display: block; font-size: 11px; opacity: .85; }
.cal-blok .cal-reeks { display: block; font-size: 10px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-blok.is-aangemeld { border-color: #e8a91d; background: #fff7e6; color: #7a5b12; }
.cal-blok.is-bezet     { border-color: var(--line-6); background: #fff; color: var(--ink); }
.cal-blok.is-volzet    { border-color: var(--line-6); background: var(--line-3); color: var(--muted-2); }
.cal-blok.is-gesloten  { opacity: .5; }

/* Spelerblok op het publieke inschrijfformulier: per speler eigen contactgegevens */
.ci-speler { border: 1px solid var(--line-4); border-radius: 10px; padding: 14px 16px 16px;
             margin: 0 0 16px; background: #fff; }
.ci-speler legend { padding: 0 6px; font-family: var(--display); font-weight: 700; font-size: 14px; }

/* week/maand-schakelaar */
.cal-schakel { display: inline-flex; border: 1px solid var(--line-5); border-radius: 8px; overflow: hidden; }
.cal-schakel a { padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--muted-2); background: #fff; }
.cal-schakel a + a { border-left: 1px solid var(--line-5); }
.cal-schakel a.is-actief { background: var(--green-tint-2); color: var(--green-text); }

/* maandweergave: 7 kolommen, één vakje per dag */
.cal-maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-mkop { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
            color: var(--muted-3); padding: 4px 0 2px; }
.cal-mdag { background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 4px;
            min-height: 76px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-mdag.is-buiten { background: var(--line-3); opacity: .6; }
.cal-mdag.is-vandaag { border-color: var(--green-line); }
.cal-mdatum { font-size: 11px; font-weight: 700; color: var(--muted-3); }
.cal-blok.is-compact { padding: 3px 5px; }
.cal-blok.is-compact .cal-tijd { font-size: 11px; }
.cal-blok.is-compact .cal-meta { font-size: 10px; }

/* ── mobiel ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .club-split { grid-template-columns: 1fr; }
    .club-split-zij { position: static; }
    /* Kalender horizontaal scrollbaar i.p.v. 7 kolommen platdrukken. */
    .cal-grid { grid-auto-flow: column; grid-auto-columns: 132px; grid-template-columns: none;
                overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
    .club-form { grid-template-columns: 1fr; }
    .club-rechten { grid-template-columns: 1fr; }
    .cal-grid { grid-auto-columns: 118px; }

    /* Tabellen worden kaarten: elke cel krijgt zijn kolomnaam ervoor. */
    .club-tabel thead { display: none; }
    .club-tabel, .club-tabel tbody, .club-tabel tr, .club-tabel td { display: block; width: 100%; }
    .club-tabel tr { border-bottom: 1px solid var(--line-2); padding: 8px 0; }
    .club-tabel tr:last-child { border-bottom: 0; }
    .club-tabel td { border-bottom: 0; padding: 5px 14px; display: flex; align-items: center; gap: 10px; }
    .club-tabel td::before { content: attr(data-label); flex: 0 0 40%; font-size: 11px; font-weight: 700;
                             text-transform: uppercase; color: var(--muted-3); }
    .club-tabel td:not([data-label])::before { content: none; }
    .club-tabel td .field { flex: 1 1 auto; min-width: 0; }
    /* De stand blijft een tabel: die is smal genoeg en leest zo beter. */
    .club-stand thead { display: table-header-group; }
    .club-stand, .club-stand tbody, .club-stand tr, .club-stand td { display: revert; }
    .club-stand td { padding: 8px 6px; }
    .club-stand td::before { content: none; }
}

@media (max-width: 900px) {
    /* Maandraster horizontaal scrollbaar, net als de weekkalender. */
    .cal-maand { grid-auto-flow: row; grid-template-columns: repeat(7, 108px);
                 overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
    .cal-maand { grid-template-columns: repeat(7, 92px); }
    .cal-mdag { min-height: 64px; }
}

/* ============================================================================
   Ideeënbord (views/ideeen.php + views/idee.php)
   Alles zit achter een login; de vormgeving volgt de kaartstijl van het
   helpcentrum. Mobiel: één kolom, filters onder elkaar, wizard schermvullend.
   ============================================================================ */
.idee-wrap { padding: 36px 44px; width: 100%; }
.idee-kop {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.idee-terug { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted-3); margin-bottom: 16px; }
.idee-terug:hover { color: var(--green-text); }

/* ---- filterbalk ---- */
.idee-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.idee-zoek { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; }
.idee-zoek span { position: absolute; left: 12px; font-size: 14px; opacity: .5; pointer-events: none; }
.idee-zoek .field { width: 100%; padding-left: 34px; }
.idee-select { flex: 0 0 auto; max-width: 100%; }
.idee-mijn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--muted-2); cursor: pointer;
}
.idee-tip {
    background: var(--green-tint); border: 1px solid var(--green-line); border-radius: 12px;
    padding: 11px 15px; font-size: 13.5px; color: var(--green-text); margin-bottom: 20px;
}

/* ---- lijst ---- */
.idee-lijst { display: flex; flex-direction: column; gap: 12px; }
.idee-kaart {
    display: flex; align-items: flex-start; gap: 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.idee-kaart:hover { border-color: var(--green); box-shadow: 0 4px 20px rgba(0, 0, 0, .06); }
.idee-bol {
    flex: none; width: 46px; height: 46px; border-radius: 12px;
    background: var(--green-tint-2); display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1;
}
.idee-kaart-body { display: block; min-width: 0; }
.idee-kaart-zin { display: block; font-size: 15px; line-height: 1.55; color: var(--ink); }
.idee-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.idee-pill { background: var(--line-3); color: var(--muted-2); font-size: 11.5px; font-weight: 600; }
.idee-pill-wacht, .idee-pill-geweigerd { background: #fdf5c9; color: #8a6d00; }
.idee-pill-gepland, .idee-pill-klaar { background: var(--green-tint-2); color: var(--green-text); }
.idee-pill-eigen { background: var(--line-4); color: var(--muted); }

/* Leeg bord: een uitnodiging i.p.v. een melding dat er niets staat. */
.idee-uitnodiging { text-align: center; padding: 52px 28px; }
.idee-uitnodiging-bol {
    width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 18px;
    background: var(--green-tint-2); display: flex; align-items: center;
    justify-content: center; font-size: 30px; line-height: 1;
}
.idee-uitnodiging-kop { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.idee-uitnodiging-tekst {
    max-width: 440px; margin: 0 auto 22px; font-size: 14.5px;
    line-height: 1.6; color: var(--muted-3);
}

/* ---- detail ---- */
.idee-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.idee-detail-hoofd { overflow: hidden; }
.idee-detail-zij { display: flex; flex-direction: column; gap: 12px; }
.idee-detail-zin { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.idee-wachtblok {
    margin-top: 16px; background: #fdf5c9; color: #7a6100; border-radius: 10px;
    padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
}
.idee-notitie { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.idee-notitie-los {
    margin-top: 16px; background: var(--line-3); color: var(--muted);
    border-radius: 10px; padding: 12px 14px;
}
.idee-stemblok { background: var(--line-3); border-top: 1px solid var(--line); padding: 18px 20px; text-align: center; }
.idee-stemvraag { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.idee-stemknoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.idee-stem { background: #fff; }
.idee-stem.actief { border-color: var(--green); background: var(--green-tint); color: var(--green-text); }
.idee-stem:disabled { opacity: .6; cursor: default; }
.idee-stemhint { font-size: 12px; color: var(--muted-4); margin-top: 10px; }
.idee-reactie-tekst { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.idee-reactie-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; font-size: 12.5px; color: var(--muted-4);
}
.idee-reactie-x {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--red-text); text-decoration: underline;
}
.idee-reactie-kop { font-weight: 700; font-size: 15px; margin-bottom: 12px; }

/* ---- wizard ---- */
.idee-overlay {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 18, 15, .5); padding: 20px;
}
.idee-overlay.open { display: flex; }
.idee-modal {
    background: #fff; border-radius: 16px; width: 560px; max-width: 100%;
    max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.idee-modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.idee-modal-title { font-family: var(--display); font-weight: 800; font-size: 19px; flex: 1 1 auto; }
.idee-stapteller { font-size: 13px; font-weight: 600; color: var(--muted-3); flex: none; }
.idee-x {
    background: none; border: 0; cursor: pointer; color: var(--muted-3);
    font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 8px; flex: none;
}
.idee-x:hover { color: var(--ink); background: var(--line-3); }
.idee-modal-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; }
.idee-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); }
.idee-vraag { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.idee-radio { display: flex; align-items: center; gap: 12px; padding: 12px 4px; font-size: 15px; cursor: pointer; }
.idee-radio input { flex: none; width: 18px; height: 18px; accent-color: var(--green); }
.idee-prefixveld { display: flex; flex-direction: column; gap: 6px; }
.idee-prefix { font-weight: 700; font-size: 14px; color: var(--ink); }
.idee-prefixveld .field { width: 100%; box-sizing: border-box; resize: vertical; }
.idee-voorbeeld {
    font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.35;
    margin: 0 0 20px; color: var(--ink);
}
.idee-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.idee-chip {
    background: var(--line-3); border: 1px solid transparent; border-radius: 999px;
    padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--muted-2); cursor: pointer;
}
.idee-chip:hover { border-color: var(--green-line); }
.idee-chip.actief { background: var(--green); border-color: var(--green); color: #fff; }
.idee-modereer { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted-4); }
.idee-msg { font-size: 13px; margin: 14px 0 0; }
.idee-msg.err { color: var(--red-text); }
.idee-msg.ok { color: var(--green-text); }

@media (max-width: 900px) {
    .idee-detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .idee-wrap { padding: 24px 16px; }
    .idee-kop { align-items: flex-start; flex-direction: column; gap: 12px; }
    .idee-kop .btn { width: 100%; justify-content: center; }
    .idee-filters { flex-direction: column; align-items: stretch; gap: 10px; }
    .idee-zoek, .idee-select { flex: 1 1 auto; width: 100%; }
    .idee-kaart { padding: 15px 16px; gap: 12px; }
    .idee-bol { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }
    .idee-kaart-zin { font-size: 14.5px; }
    .idee-overlay { padding: 0; }
    .idee-modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .idee-modal-head { padding: 14px 16px; }
    .idee-modal-body { padding: 18px 16px; }
    .idee-modal-foot { padding: 14px 16px; }
    .idee-modal-foot .btn { flex: 1 1 auto; justify-content: center; }
    .idee-voorbeeld { font-size: 18px; }
    .idee-stemknoppen .btn { width: 100%; justify-content: center; }
    .idee-uitnodiging { padding: 38px 20px; }
    .idee-uitnodiging-kop { font-size: 19px; }
    .idee-uitnodiging .btn { width: 100%; justify-content: center; }
}

/* ---- eenmalige tip bij de Ideeën-link in de topbalk (includes/_ideeentip.php) ----
   Positie komt uit JS (paginacoördinaten), want de topbalk breekt op mobiel af.
   De breedte houdt rekening met smalle schermen: nooit breder dan het venster. */
.ideetip {
    position: absolute; z-index: 60; width: 320px; max-width: calc(100vw - 20px);
    background: #fff; border-radius: 14px; padding: 16px 18px 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24); border: 1px solid var(--line-5, #e0ddd3);
    opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease;
}
.ideetip.open { opacity: 1; transform: translateY(0); }
.ideetip-pijl {
    position: absolute; top: -7px; width: 13px; height: 13px; margin-left: -6px;
    background: #fff; border-left: 1px solid var(--line-5, #e0ddd3);
    border-top: 1px solid var(--line-5, #e0ddd3); transform: rotate(45deg); border-radius: 2px;
}
.ideetip-x {
    position: absolute; top: 6px; right: 8px; background: none; border: 0; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--muted-3, #8a857c); padding: 2px 6px;
}
.ideetip-x:hover { color: var(--ink, #1a1814); }
.ideetip-kop { font-size: 15px; font-weight: 800; color: var(--ink, #1a1814); margin: 0 22px 6px 0; }
.ideetip-tekst { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted, #5c584f); }
.ideetip-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ideetip-btn { font-size: 13px; padding: 8px 14px; }
.ideetip-later {
    background: none; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600;
    color: var(--muted-3, #8a857c); text-decoration: underline; padding: 6px 2px;
}
.ideetip-later:hover { color: var(--ink, #1a1814); }

/* De link zelf even laten ademen zolang de tip openstaat. */
.ideetip-pulse { color: #fff !important; animation: ideetip-pulse 1.8s ease-in-out 3; border-radius: 8px; }
@keyframes ideetip-pulse {
    0%, 100% { text-shadow: none; }
    50%      { text-shadow: 0 0 12px rgba(255, 255, 255, .85); }
}
@media (prefers-reduced-motion: reduce) {
    .ideetip { transition: none; }
    .ideetip-pulse { animation: none; }
}
@media (max-width: 640px) {
    .ideetip { width: 300px; padding: 14px 16px 12px; }
    .ideetip-acties { gap: 8px; }
}

/* ============================================================================
   Bijlagen (documenten) — uploadblok in het tornooi-dashboard
   Elke bijlage heeft een optionele beschrijving die de organisator hier
   inline bijwerkt en die op de live-pagina onder de bestandsnaam verschijnt.
   Mobiel: bestandskiezer, beschrijving en knop staan onder elkaar.
   ============================================================================ */
.bijlage-upload { display: flex; flex-direction: column; gap: 8px; }
.bijlage-upload .btn { align-self: flex-start; }

.bijlage-rij {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px;
}
.bijlage-rij-icoon { font-size: 16px; flex: none; line-height: 1.5; }
.bijlage-rij-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bijlage-rij-naam { font-weight: 600; color: var(--ink); text-decoration: none; word-break: break-all; }
.bijlage-rij-naam:hover { text-decoration: underline; }
.bijlage-desc {
    width: 100%; border: 1px solid var(--line); border-radius: 7px;
    padding: 5px 8px; font-family: var(--body); font-size: 12px; color: var(--muted-2);
    background: transparent;
}
.bijlage-desc:focus { outline: none; border-color: var(--muted-4); color: var(--ink); }
.bijlage-desc.is-ok { border-color: var(--green); }
.bijlage-rij-grootte { font-size: 11px; flex: none; line-height: 1.9; }
.bijlage-del { color: var(--muted-5); cursor: pointer; flex: none; padding: 2px 4px; line-height: 1.5; }
.bijlage-del:hover { color: var(--red); }

@media (max-width: 640px) {
    .bijlage-rij { flex-wrap: wrap; }
    .bijlage-rij-mid { flex: 1 1 100%; order: 2; }
    .bijlage-rij-grootte { order: 1; }
    .bijlage-del { order: 1; margin-left: auto; }
}

/* Publieke live-pagina: beschrijving als tweede regel in de downloadknop. */
.live-bijlage-desc { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted-2); margin-top: 3px; }

/* ============================================================================
   Online betalen (Mollie) — de betaalkaart
   Staat op twee plaatsen: het tornooidashboard (tabblad Inschrijvingen) en de
   clubinstellingen. Daarom hier en niet in een <style> op één van die pagina's.
   Mobiel: de keuzekaarten en de rekeningvelden zakken onder elkaar via
   auto-fit-grids, en de terugbetaalknop onder naam en bedrag.
   ============================================================================ */
/* ---- Online betalen (Mollie) ------------------------------------------------
   Twee kolommen op een gewoon scherm, alles onder elkaar op een telefoon. De
   keuzekaarten en de rekeninggegevens gebruiken daarom grid met auto-fit i.p.v.
   een vast aantal kolommen. */
.bet-schakelaar { display:flex; align-items:flex-start; gap:8px; font-weight:600; font-size:14px; cursor:pointer; }
.bet-schakelaar input { margin-top:3px; flex:none; }

.bet-keuze { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px; }
.bet-optie {
    display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-items:start;
    padding:12px 14px; border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.bet-optie:hover      { border-color:var(--muted-4); }
.bet-optie.is-actief  { border-color:var(--green); background:var(--green-tint); }
.bet-optie input      { margin-top:3px; grid-row:1 / span 2; }
.bet-optie-titel      { font-weight:700; font-size:14px; }
.bet-optie-uitleg     { font-size:12.5px; color:var(--muted-2); line-height:1.45; }

.bet-keyrij { display:flex; gap:8px; flex-wrap:wrap; }
.bet-keyrij .field { flex:1; min-width:200px; }

.bet-kader {
    border-left:4px solid var(--green); background:var(--green-tint);
    border-radius:8px; padding:10px 14px; font-size:13px; line-height:1.55; margin-bottom:16px;
}
/* Zonder inschrijfgeld valt er niets te betalen: de kaart blijft staan maar alle
   bediening is disabled. Neutraal kader i.p.v. groen, en de labels ernaast
   krijgen dezelfde gedempte toon als de uitgeschakelde velden zelf. */
.bet-kader-uit { border-left-color:var(--muted-5); background:var(--line-2); color:var(--muted-2); }
.bet-kaart-uit .bet-schakelaar,
.bet-kaart-uit .bet-optie-titel,
.bet-kaart-uit .field-label { color:var(--muted-4); }
.bet-kaart-uit .bet-schakelaar,
.bet-kaart-uit .bet-optie,
.bet-kaart-uit .bet-akkoord { cursor:default; }
.bet-kaart-uit .bet-optie:hover { border-color:var(--line); }
.bet-waarschuwing {
    border-left:4px solid #9a6700; background:#fff9ef; color:#9a6700;
    border-radius:8px; padding:9px 13px; font-size:12.5px; line-height:1.5; margin-top:10px;
}
.bet-uitslag { border-radius:8px; padding:9px 13px; font-size:12.5px; line-height:1.5; margin-top:10px; }
.bet-uitslag.is-ok  { background:var(--green-tint); color:var(--green-text); }
.bet-uitslag.is-nok { background:#fff5f4; color:var(--red-text); }

.bet-gekoppeld {
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    margin-top:10px; padding:8px 12px; border:1px solid var(--line); border-radius:9px;
    font-size:12.5px; color:var(--muted-2);
}
.bet-rekening { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.bet-akkoord  { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; cursor:pointer; margin-top:14px; }
.bet-akkoord input { margin-top:3px; flex:none; }

.bet-totalen {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px;
    margin-top:20px; padding-top:16px; border-top:1px solid var(--line-3);
}
.bet-tot-label { display:block; font-size:12px; color:var(--muted-2); margin-bottom:2px; }

/* Doorstortingen die wij al klaargezet hebben. Bedragen en status onder elkaar,
   zodat een lange statuslabel op een telefoon niet naast het bedrag knelt. */
.bet-uitbet     { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-3); }
.bet-uitbet-rij { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; font-size:14px; }

/* Ontvangen betalingen met terugbetaalknop. Op een telefoon zakt de knop onder
   de naam en het bedrag i.p.v. de rij uit te rekken. */
.bet-betaalrij {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:8px 0; border-top:1px solid var(--line-3); font-size:14px;
}
.bet-betaalrij-naam   { flex:1; min-width:140px; font-weight:600; }
.bet-betaalrij-bedrag { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.bet-betaalrij-reden  { font-size:11.5px; max-width:220px; line-height:1.35; }
@media (max-width: 560px) {
    .bet-betaalrij-naam  { flex:1 1 100%; }
    .bet-betaalrij-reden { max-width:none; flex:1 1 100%; }
}