/* LPD V2 — project-glue (NIET uit de design-handoff).
   De handoff-CSS bevat bewust geen media query; het stappenplan vraagt de
   omschakeling top-nav (>=768px) <-> bottom-nav (<768px) hier te implementeren. */

/* Mobiel: verberg de top-nav, toon de bottom-tab-bar (vast onderaan). */
@media (max-width: 767.98px) {
    .lpd-topnav {
        display: none;
    }

    .lpd-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    /* Ruimte zodat de vaste bottom-nav de inhoud/footer niet overlapt. */
    body.lpd-has-bottomnav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Desktop: verberg de bottom-tab-bar, toon de top-nav. */
@media (min-width: 768px) {
    .lpd-bottomnav {
        display: none;
    }

    /* Gedeelde shell-breedte: nav én inhoud tot 1200px op grote schermen.

       flex-wrap blijft bewust op wrap. Met nowrap liep de balk over zodra een gebruiker is
       aangemeld: de pillenrij (434px) en het rechtercluster (426px) kunnen geen van beide
       krimpen, de merknaam was dan al tot breedte 0 gekrompen, en wat overbleef schoof buiten
       de balk. De afmeldknop was daardoor niet meer aanklikbaar en de pagina kreeg een
       horizontale schuifbalk. Nu zakt het rechtercluster naar een tweede regel in plaats van
       te verdwijnen; op brede schermen verandert er niets, want dan past alles op één regel. */
    .lpd-topnav .inner {
        flex-wrap: wrap;
        max-width: 1200px;
        /* 10px in plaats van 14px: met 14px kwam de balk op 1280px één pixel tekort en zakte het
           rechtercluster onnodig naar een tweede regel. Flexbox breekt af op de natuurlijke
           breedtes, dus een krimpbare merknaam voorkomt dat niet. */
        gap: 10px;
    }

    /* De merknaam mag krimpen zodat de balk op brede schermen op één regel past, maar niet tot
       niets: met min-width 0 verdwenen logo en liganaam volledig zodra het krap werd. */
    .lpd-topnav .brand {
        min-width: 7rem;
    }

    .lpd-shell {
        max-width: 1200px;
    }

    .lpd-topnav nav {
        flex-wrap: nowrap;
    }

    /* Merknaam mag krimpen i.p.v. de nav naar een tweede regel te duwen. */
    .lpd-topnav .brand {
        min-width: 0;
    }

    .lpd-topnav-actions {
        flex-shrink: 0;
    }
}

/* Rechter cluster in de top-nav (seizoen-keuze, Meer, auth-knoppen). */
.lpd-topnav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dropdown-menu's in de nav mogen NIET de nav-link/pill-styling erven.
   (.lpd-topnav nav a en .lpd-bottomnav a zetten kleur/opmaak op alle <a>.) */
.lpd-topnav .dropdown-menu .dropdown-item,
.lpd-bottomnav .dropdown-menu .dropdown-item {
    color: var(--t-body);
    background: none;
    border-radius: 0;
    padding: 6px 16px;
    font-size: .95rem;
    font-weight: 500;
}

    .lpd-topnav .dropdown-menu .dropdown-item:hover,
    .lpd-bottomnav .dropdown-menu .dropdown-item:hover {
        color: var(--c-accent-deep);
        background: var(--c-tint);
    }

    .lpd-topnav .dropdown-menu .dropdown-item i,
    .lpd-bottomnav .dropdown-menu .dropdown-item i {
        width: 18px;
        margin-right: 6px;
        color: var(--t-subtle);
    }

/* Icoon in de top-nav pills van de tekst houden — de design-CSS zet hier geen
   marge, waardoor icoon en label tegen elkaar plakten. */
.lpd-topnav nav a i {
    margin-right: 7px;
}

    /* Home is enkel een icoon (zie _TopNav): dan geen naloop-marge. */
    .lpd-topnav nav a i:only-child {
        margin-right: 0;
    }

/* Speeldag = het belangrijkste nav-item: in rust een gekleurde accent-OUTLINE
   zodat het opvalt tussen de vlakke pills. Zit je op de speeldag-pagina, dan vult
   .active het pill met accent — zo blijft "belangrijk item" vs "huidige pagina"
   zichtbaar. Outline via inset box-shadow → geen layout-shift t.o.v. de andere pills. */
.lpd-topnav nav a.nav-primary {
    box-shadow: inset 0 0 0 1.5px var(--c-accent);
    color: var(--c-accent-deep);
    font-weight: 700;
}

    .lpd-topnav nav a.nav-primary i {
        color: var(--c-accent);
    }

    .lpd-topnav nav a.nav-primary:not(.active):hover {
        background: var(--c-tint);
    }

    /* Actieve pagina: gevuld accent i.p.v. enkel de outline. */
    .lpd-topnav nav a.nav-primary.active {
        background: var(--c-accent);
        color: var(--c-on-accent);
        box-shadow: var(--sh-accent);
    }

        .lpd-topnav nav a.nav-primary.active i {
            color: inherit;
        }

/* Winnaar in een matchrow (kalender + wedstrijdformulier) duidelijker maken:
   de handoff zette enkel 700 vs 600 — te subtiel volgens de klant. Winnaar krijgt
   de accentkleur; in een beslist duel wordt de verliezer gedempt (:has → niet bij
   nog-te-spelen of gelijkspel, waar geen kant .won heeft). */
.lpd-matchrow .home.won,
.lpd-matchrow .away.won {
    color: var(--c-accent-deep);
    font-weight: 700;
}

.lpd-matchrow:has(.won) .home:not(.won),
.lpd-matchrow:has(.won) .away:not(.won) {
    color: var(--t-muted);
    font-weight: 500;
}

/* ── Speeldag (V2) ─────────────────────────────────────────────
   Smalle, leesbare kolom (lijstweergave) binnen de bredere shell. */
.spd-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.spd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-top: 16px;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
}

    .spd-header .spd-center {
        flex: 1;
        text-align: center;
        min-width: 0;
    }

    .spd-header .spd-title {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        color: var(--t-strong);
    }

        .spd-header .spd-title i {
            color: var(--c-accent);
            margin-right: 8px;
        }

    .spd-header .spd-meta {
        font-size: 11px;
        color: var(--t-muted);
        margin-top: 2px;
    }

.spd-disabled {
    opacity: .35;
    pointer-events: none;
}

.spd-afdeling {
    margin-top: 14px;
    animation: lpd-rise .5s var(--ease, ease) both;
    /* Ruimte onder de plakkende snelnavigatie bij het scrollen naar een afdeling */
    scroll-margin-top: 60px;
}

/* Snelnavigatie naar een afdeling. Blijft bovenaan hangen omdat de pagina met
   meerdere afdelingen lang wordt, zeker op mobiel. */
.spd-jump {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-top: 12px;
    padding: 8px 0;
    background: var(--s-page);
    overflow-x: auto;
    scrollbar-width: none;
}

    .spd-jump::-webkit-scrollbar {
        display: none;
    }

/* Volledige kalender: speeldag-scheiding + afdelinggroep (zonder entree-animatie
   omdat de lijst lang kan zijn). */
.cal-sd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 22px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--c-accent);
}

.cal-sd-naam {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--t-strong);
}

.cal-sd-datum {
    margin-left: auto;
    font-size: 11px;
    color: var(--t-muted);
}

.cal-afd {
    margin-top: 12px;
}

/* Uitblinkers — volledige lijst per categorie, in V2-stijl. */
.spd-stats {
    display: flex;
    gap: 10px;
}

.spd-stat {
    flex: 1;
    min-width: 0;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
    padding: 10px 12px;
}

.spd-stat-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--c-accent-deep);
    margin-bottom: 8px;
}

    .spd-stat-cat i {
        color: var(--c-accent);
    }

.spd-stat-row {
    padding: 5px 0;
    border-top: 1px solid var(--b-hairline);
}

    .spd-stat-row:first-of-type {
        border-top: none;
    }

.spd-stat-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--t-strong);
}

.spd-stat-team {
    font-size: 10.5px;
    color: var(--t-muted);
}

.spd-stat-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--c-accent-deep);
}

@media (max-width: 767.98px) {
    .spd-stats {
        flex-direction: column;
    }
}

/* ── Wedstrijdformulier (V2) ───────────────────────────────── */
.wf-wrap {
    max-width: 720px; /* gelijk aan de speeldag (.spd-wrap) — consistente breedte + meer ruimte voor de dichtere formulier-rijen */
    margin: 0 auto;
}

.wf-header {
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
    padding: 12px 16px;
    margin-top: 16px;
}

.wf-headtop {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--c-accent);
    background: var(--c-tint);
    color: var(--c-accent-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s var(--ease, ease), color .15s, border-color .15s;
}

    .wf-back:hover {
        background: var(--c-accent);
        border-color: var(--c-accent);
        color: #fff;
    }

    .wf-back i {
        font-size: 11px;
    }

/* Score bovenaan het wedstrijdformulier: kleur de LEIDER i.p.v. vast de thuisploeg.
   De design-CSS zette .big op accent en enkel .uit op donker → altijd thuis gekleurd.
   Nu: beide standaard donker, en het accent gaat naar de kant met de leider-klasse
   (bij gelijke stand krijgt geen van beide de klasse → allebei neutraal). */
.lpd-score .big .thuis {
    color: var(--t-strong);
}

.lpd-score .big.lead-thuis .thuis {
    color: var(--c-accent);
}

.lpd-score .big.lead-uit .uit {
    color: var(--c-accent);
}

.wf-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    min-width: 0;
}

.wf-phases {
    margin-top: 10px;
}

.wf-alert {
    margin-top: 12px;
}

.lpd-feats {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 12px 0 4px;
}

.wf-section {
    padding: 12px 0 5px;
}

.wf-section-accent {
    color: var(--c-accent-deep);
}

.wf-card-accent {
    border-color: var(--c-tint-border);
}

/* Game-rij op het formulier: index-nummer + de bestaande .lpd-matchrow opmaak. */
.lpd-matchrow .wf-nr {
    width: 18px;
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    color: var(--c-accent);
    text-align: center;
}

.lpd-matchrow .center.wf-center-actief {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wf-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
}

    .wf-actions .lpd-iconbtn {
        width: 26px;
        height: 26px;
    }

.wf-todo {
    font-style: italic;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--t-subtle);
    font-size: 11px;
}

/* Gemaskeerde (verborgen) speler tijdens de blinde opstelling: de rij sterretjes
   gedempt tonen zodat ze als "verborgen" leest i.p.v. als een echte naam. */
.wf-masked {
    color: var(--t-muted);
    letter-spacing: 2px;
}

.wf-dash {
    color: var(--t-subtle);
}

.wf-spelers {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
}

    .wf-spelers .lpd-btn {
        flex: 1;
    }

.wf-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--c-tint-soft);
    border: 1px solid var(--c-tint-border);
    border-radius: var(--r-ctl);
    font-size: 12px;
    color: var(--c-accent-deep);
}

    .wf-banner i {
        color: var(--c-accent);
    }

.wf-confirm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

/* Eén kaart per prestatiesoort, de twee ploegen staan erbinnen naast elkaar. */
.wf-prestaties {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.wf-prestatie {
    padding: 16px 18px;
}

.wf-prestatie-head {
    margin-bottom: 14px;
}

/* Ploegen worden gescheiden door ruimte, niet door lijnen */
.wf-prestatie-teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.wf-prestatie-team {
    min-width: 0;
}

.wf-prestatie-teamnaam {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--t-muted);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-prestatie-empty {
    color: var(--t-subtle);
    font-size: 12px;
}

.wf-prestatie-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 12px;
}

.wf-prestatie-name {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 600;
    min-width: 0;
}

    .wf-prestatie-name i {
        color: var(--t-subtle);
        margin-right: 3px;
    }

.wf-prestatie-val {
    color: var(--t-secondary);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}

.wf-del {
    color: var(--err);
    font-size: 12px;
    cursor: pointer;
    flex: none;
}

@media (max-width: 767.98px) {
    /* Op mobiel de ploegen onder elkaar, met ruimte ertussen in plaats van naast elkaar */
    .wf-prestatie-teams {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* GameScore — score ingeven (leg-picker) */
.wf-score-card {
    margin-top: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wf-scoreteam-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    margin-bottom: 8px;
    color: var(--t-strong);
}

.wf-scorevs {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--t-muted);
}

.wf-scoreactions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

/* Sub-formulieren (spelers kiezen / prestatie-ingave / bevestigen) */
.wf-form-card {
    margin-top: 14px;
    padding: 16px;
}

.wf-field {
    margin-bottom: 12px;
}

    .wf-field:last-child {
        margin-bottom: 0;
    }

    .wf-field label {
        display: block;
        margin-bottom: 5px;
    }

    .wf-field select.lpd-input + select.lpd-input {
        margin-top: 8px;
    }

.wf-of {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--t-muted);
    margin: 6px 0;
}

.wf-hint {
    font-size: 12px;
    color: var(--t-muted);
    margin-bottom: 12px;
}

select.lpd-input {
    cursor: pointer;
}

textarea.lpd-input {
    resize: vertical;
    min-height: 72px;
}

/* ── Ranking (V2) ──────────────────────────────────────────── */
.rnk-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

/* Selector-pills mogen over meerdere regels vallen i.p.v. de rij te laten overlopen.
   De design-CSS zet enkel display:flex (geen wrap), waardoor bv. de bekerranking met
   veel poules een horizontale scrollbalk gaf. De bestaande gap:8px vult meteen de
   verticale ruimte tussen de regels. Geldt voor alle pill-selectors (ranking/beker/ploegen);
   met weinig items verandert er niets (er valt dan niets te wrappen). */
.lpd-pills {
    flex-wrap: wrap;
}

.rnk-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

    .rnk-title h1 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.5rem;
        margin: 0;
    }

        .rnk-title h1 i {
            color: var(--c-accent);
            margin-right: 10px;
        }

    .rnk-title .lpd-pills {
        margin-left: auto;
    }

.rnk-afdeling {
    margin-top: 4px;
}

/* De kaart mag horizontaal scrollen op smalle schermen (brede tabel). */
.rnk-table {
    overflow-x: auto;
}

.rnk-team-row {
    display: grid;
    grid-template-columns: 44px 1fr 72px 66px 56px 56px 56px 62px 62px 62px 62px;
    align-items: center;
    text-align: center;
    min-width: 760px;
}

.rnk-ind-row {
    display: grid;
    grid-template-columns: 44px 1fr 76px 66px 56px 76px 76px 62px 62px;
    align-items: center;
    text-align: center;
    min-width: 680px;
}

.rnk-beker-row {
    display: grid;
    grid-template-columns: 44px 1fr 72px 66px 56px 56px 62px 62px 62px 62px;
    align-items: center;
    text-align: center;
    min-width: 700px;
}

.rnk-head {
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 8px 0;
}

.rnk-row {
    padding: 9px 0;
    border-bottom: 1px solid var(--b-hairline);
    font-size: 13px;
}

    .rnk-row.alt {
        background: var(--row-alt);
    }

    .rnk-row:last-child {
        border-bottom: none;
    }

.rnk-name-h {
    text-align: left;
    padding-left: 6px;
}

.rnk-name {
    text-align: left;
    padding-left: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
}

.rnk-ind-name {
    text-align: left;
    padding-left: 6px;
}

    .rnk-ind-name b {
        font-family: var(--font-display);
        font-size: 13.5px;
    }

.rnk-sub {
    color: var(--t-muted);
    font-size: 11.5px;
}

.rnk-nr {
    font-family: var(--font-display);
    font-weight: 700;
}

    .rnk-nr.top {
        color: var(--c-accent);
    }

    .rnk-nr.rest {
        color: var(--t-muted);
    }

/* Gewonnen en verloren wedstrijden bewust in gewone tekstkleur: groen/rood gaf de
   tabel een waardeoordeel dat er niet hoort. --t-strong volgt de donkere modus mee. */
.rnk-ok {
    color: var(--t-strong);
    font-weight: 700;
}

.rnk-err {
    color: var(--t-strong);
}

.rnk-muted {
    color: var(--t-muted);
}

/* Podium-bekers voor top-3 (goud/zilver/brons) i.p.v. een gemarkeerde punten-cel. */
.rnk-cup {
    font-size: 15px;
}

.rnk-gold {
    color: #d4af37;
}

.rnk-silver {
    color: #9aa0a6;
}

.rnk-bronze {
    color: #cd7f32;
}

/* Mobiele rangchip toont de beker zonder het chip-kader/vulkleur. */
.lpd-rankrow .nr.cup {
    border: none;
    background: transparent;
    font-size: 16px;
}

/* Desktop-tabel vs mobiele uitklaprijen. */
.rnk-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .rnk-desktop {
        display: none;
    }

    .rnk-mobile {
        display: block;
    }

    /* De band welded normaal met de eerste .lpd-card; op mobiel is dat de (verborgen)
       desktop-kaart, dus laat de zichtbare mobiele kaart met de band versmelten. */
    .lpd-band + .rnk-desktop + .rnk-mobile {
        border-radius: 0 0 var(--r-card) var(--r-card);
        border-top: none;
    }
}

.rnk-m > summary {
    list-style: none;
    cursor: pointer;
}

    .rnk-m > summary::-webkit-details-marker {
        display: none;
    }

.rnk-m .rnk-m-chev {
    color: var(--c-accent);
    font-size: 11px;
    flex: none;
    transition: transform .2s var(--ease, ease);
}

.rnk-m[open] .rnk-m-chev {
    transform: rotate(180deg);
}

.rnk-m[open] > summary {
    background: var(--c-tint-soft);
}

.rnk-m:last-child > summary {
    border-bottom: none;
}

.rnk-m-body {
    padding: 8px 14px 12px;
    background: var(--c-tint-soft);
    border-bottom: 1px solid var(--b-hairline);
}

.rnk-m:last-child .rnk-m-body {
    border-bottom: none;
}

.rnk-m-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12.5px;
    border-top: 1px solid var(--b-hairline);
}

    .rnk-m-stat:first-child {
        border-top: none;
    }

    .rnk-m-stat > span:first-child {
        color: var(--t-muted);
    }

    .rnk-m-stat > span:last-child {
        font-family: var(--font-display);
        font-weight: 600;
    }

/* ── Ploegen (overzicht) + Ploeg (detail) V2 ──────────────── */
.pl-wrap {
    max-width: 560px;
    margin: 0 auto;
}

.pl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
}

    .pl-header .pl-title {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
    }

        .pl-header .pl-title i {
            color: var(--c-accent);
            margin-right: 8px;
        }

.pl-pills-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

.pl-section {
    padding: 16px 0 5px;
}

.pl-speeldag {
    margin-top: 12px;
}

/* Uitklapbare ploegkaart (native <details>) */
.pl-team > summary {
    list-style: none;
    cursor: pointer;
}

    .pl-team > summary::-webkit-details-marker {
        display: none;
    }

.pl-team .pl-chevron {
    color: var(--c-accent);
    font-size: 11px;
    flex: none;
    transition: transform .2s var(--ease, ease);
}

.pl-team[open] > summary {
    background: var(--c-tint-soft);
}

.pl-team[open] .pl-chevron {
    transform: rotate(180deg);
}

.pl-team-body {
    padding: 0 14px 12px;
    background: var(--c-tint-soft);
    border-bottom: 1px solid var(--b-hairline);
}

.pl-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    padding-top: 8px;
}

.pl-ic {
    color: var(--c-accent);
    width: 16px;
    margin-top: 2px;
    flex: none;
}

.pl-grow {
    flex: 1;
    line-height: 1.4;
    min-width: 0;
}

.pl-muted {
    color: var(--t-muted);
}

.pl-phone {
    color: var(--c-accent-deep);
    font-weight: 600;
    white-space: nowrap;
}

.pl-team-body .lpd-btn {
    margin-top: 10px;
}

/* Ploeg-detail */
.pld-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--s-card);
    border: 1px solid var(--b-1);
    border-radius: var(--r-card);
}

.pld-titleblock {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.pld-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}

.pld-meta {
    font-size: 11px;
    color: var(--t-muted);
    margin-top: 2px;
}

.pld-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.pl-loc-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
    font-size: 12.5px;
}

.pl-card-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--b-hairline);
}

.pl-cap-row {
    background: var(--c-tint-soft);
}

.pl-cap-sub {
    color: var(--c-accent-deep) !important;
    font-weight: 600;
}

/* Bottom-nav "Meer" (dropup) — boven de vaste balk laten uitklappen. */
.lpd-bottomnav .dropup {
    display: flex;
    align-items: center;
}

.lpd-bottomnav .dropdown-toggle-no-caret {
    cursor: pointer;
}

.lpd-bottomnav .dropdown-menu {
    z-index: 1031;
    font-size: 1rem;
}

/* ── Footer-sectie "Dit seizoen" ───────────────────────────────
   Vervangt de oude "Wist je dit al?"-trivia-carousel. Staat in de donkere footer,
   dus lichte tekst met accent-highlights. Gevoed door SeizoenInfoViewComponent. */
.ftr-info {
    color: rgba(255, 255, 255, .85);
    /* De footer staat op een DONKERE achtergrond (merkkleur-donker; bij het HDV-thema
       zelfs zwart). De normale --c-accent (= merkkleur) is daar te donker → onleesbaar.
       Lokaal een lichte, thema-onafhankelijke accentkleur zetten; alle .ftr-* iconen en
       randen erven die via var(--c-accent). */
    --c-accent: #f6a96b;
}

    .ftr-info h2 {
        color: #fff;
    }

.ftr-info-leeg {
    color: rgba(255, 255, 255, .6);
    font-style: italic;
}

.ftr-next {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
}

    .ftr-next:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    .ftr-next > i {
        color: var(--c-accent);
        font-size: 18px;
        flex-shrink: 0;
    }

.ftr-next-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}

.ftr-next-val {
    display: block;
    font-weight: 700;
}

.ftr-aankondiging {
    display: flex;
    gap: 10px;
    max-width: 480px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border-left: 3px solid var(--c-accent);
}

    .ftr-aankondiging > i {
        color: var(--c-accent);
        margin-top: 3px;
        flex-shrink: 0;
    }

.ftr-aankondiging-body {
    font-size: 14px;
    line-height: 1.4;
}

    /* Wit + onderstreept: leesbare, klikbare link op elke (donkere) footer-achtergrond. */
    .ftr-aankondiging-body a {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
    }

.ftr-feiten {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 480px;
}

    .ftr-feiten li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        font-size: 14px;
    }

        .ftr-feiten li:last-child {
            border-bottom: none;
        }

        .ftr-feiten li > i {
            color: var(--c-accent);
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }

    .ftr-feiten strong {
        color: #fff;
    }

/* ── Spelers zoeken (V2) ───────────────────────────────────────
   Vervangt de oude spz-* uit site.css. Zoekformulier = .lpd-inputgroup;
   resultaten = klikbare rijen (rij → teampagina) in een .lpd-card. */
.spz-form {
    margin-top: 14px;
}

.spz-count {
    margin: 12px 2px 6px;
    font-size: 12px;
    color: var(--t-muted);
}

.spz-note {
    margin-top: 12px;
    padding: 16px 18px;
    text-align: center;
    color: var(--t-muted);
}

    .spz-note strong {
        color: var(--t-strong);
    }

.spz-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--b-hairline);
    text-decoration: none;
    color: inherit;
}

    .spz-row:last-child {
        border-bottom: none;
    }

    .spz-row:hover {
        background: var(--c-tint-soft);
    }

.spz-ico {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-tint-soft);
    color: var(--t-muted);
}

    .spz-ico.kap {
        background: var(--c-tint);
        color: var(--c-accent-deep);
    }

.spz-nm {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    color: var(--t-body);
}

    .spz-nm strong {
        color: var(--t-strong);
        font-weight: 700;
    }

.spz-team {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-accent-deep);
    white-space: nowrap;
}

    .spz-team i {
        margin-right: 4px;
    }

/* ── Reglementen (V2) ──────────────────────────────────────────
   De reglement-HTML (CKEditor) leesbaar renderen binnen een V2-kaart. */
.reg-content {
    margin-top: 14px;
    padding: 20px 22px;
    line-height: 1.6;
    color: var(--t-body);
}

    .reg-content > :first-child {
        margin-top: 0;
    }

    .reg-content h1,
    .reg-content h2,
    .reg-content h3,
    .reg-content h4 {
        font-family: var(--font-display);
        color: var(--t-strong);
        margin-top: 1.3em;
    }

    .reg-content a {
        color: var(--c-accent-deep);
    }

    .reg-content ul,
    .reg-content ol {
        padding-left: 1.4em;
    }

    .reg-content img {
        max-width: 100%;
        height: auto;
    }

    .reg-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0;
    }

    .reg-content th,
    .reg-content td {
        border: 1px solid var(--b-1);
        padding: 6px 8px;
        text-align: left;
    }

/* ── Dark-mode toggle (nav) ────────────────────────────────────
   Maan in lichte modus (klik → donker), zon in donkere modus (klik → licht).
   Icoon-wissel puur via CSS op basis van body.mode-dark; geen JS-icoonsync nodig. */
.lpd-darktoggle .dt-sun {
    display: none;
}

body.mode-dark .lpd-darktoggle .dt-moon {
    display: none;
}

body.mode-dark .lpd-darktoggle .dt-sun {
    display: inline-block;
}

/* Vriendschappelijke wedstrijden */
.wf-hint {
    font-size: 13px;
    color: var(--t-muted);
    margin-bottom: 8px;
}

.wf-blind {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--t-muted);
}

.wf-kiesspelers {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* Eigen naam: .wf-prestatie bestaat al voor het competitieformulier hierboven */
.vr-prestatie {
    padding: 12px 14px;
}

    .vr-prestatie + .vr-prestatie {
        border-top: 1px solid var(--b-hairline);
    }

/* Actieknop boven een lijst: wf-scoreactions heeft enkel marge bovenaan, want dat
   staat altijd onderaan een formulier. Hier staat er nog inhoud onder. */
.wf-listactions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
}

/* Sponsorbalk bovenaan (hoofdsponsors). Zelfde component als de balk onderaan; enkel de
   bovenrand valt weg, want die zou verdubbelen met de onderrand van de navigatie. */
.lpd-sponsorbar.boven{border-top:none}

/* Wedstrijdtype (competitie/beker) in een kalenderrij. Alleen de ploegpagina toont dit per rij;
   de kolom moet dan iets breder omdat "Eindronde beker" er anders niet in past. */
.lpd-matchrow.cal-met-type .center{width:86px}
.lpd-matchrow .center .cal-type{font-weight:700;color:var(--c-accent-deep)}

/* ── Donkere modus voor de legacy-schermen ───────────────────────────────────────
   De beheerschermen (en enkele publieke schermen) zijn nog Bootstrap + site.css en
   gaan uit van donkere tekst op wit. In .mode-dark wordt de pagina donker, maar die
   kleuren bleven staan: tabeltekst kwam op #212529 tegen een achtergrond van #17130f
   en was dus onleesbaar, en een navbar bg-light gaf lichte tekst op een lichte balk.
   Hieronder worden Bootstrap-variabelen op de V2-tokens gezet in plaats van kleuren
   hard te overschrijven, zodat varianten als .table-dark hun eigen kleur houden. */

.mode-dark .table{
    --bs-table-color: var(--t-body);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--b-1);
    --bs-table-striped-color: var(--t-body);
    --bs-table-striped-bg: var(--row-alt);
    --bs-table-hover-color: var(--t-strong);
    --bs-table-hover-bg: var(--s-muted);
    --bs-table-active-color: var(--t-strong);
    --bs-table-active-bg: var(--s-muted);
    color: var(--t-body);
}

.mode-dark .text-muted{ color: var(--t-muted) !important; }

.mode-dark .bg-light{ background-color: var(--s-card) !important; }

.mode-dark .navbar{
    --bs-navbar-color: var(--t-body);
    --bs-navbar-hover-color: var(--t-strong);
    --bs-navbar-active-color: var(--t-strong);
    --bs-navbar-brand-color: var(--t-strong);
    --bs-navbar-brand-hover-color: var(--t-strong);
}

.mode-dark .navbar.bg-light h1,
.mode-dark .navbar.bg-light h2,
.mode-dark .navbar.bg-light h3{ color: var(--t-strong); }

.mode-dark .card{
    background-color: var(--s-card);
    border-color: var(--b-1);
    color: var(--t-body);
}

/* Invoervelden hebben een eigen oppervlak nodig. --s-card gaf ze exact de kleur van de kaart
   waar ze in staan (verhouding 1.00) en op de kale beheerpagina 1.07 tegen de achtergrond: het
   veld was niet te zien. Een veld hoort iets lichter te zijn dan zijn ondergrond, met een rand
   die er duidelijk tegen afsteekt. Bewust lichter dan de kaart maar donkerder dan --s-head,
   zodat een veld niet op een sectiekop lijkt. */
.mode-dark{
    --s-field: color-mix(in oklab, var(--s-card), white 12%);
    --b-field: color-mix(in oklab, var(--s-card), white 30%);
}

.mode-dark .form-control,
.mode-dark .form-select,
.mode-dark .lpd-input{
    background-color: var(--s-field);
    border-color: var(--b-field);
    color: var(--t-strong);
}

.mode-dark .form-control::placeholder{ color: var(--t-subtle); }

.mode-dark .form-control:focus,
.mode-dark .form-select:focus,
.mode-dark .lpd-input:focus{
    background-color: var(--s-field);
    color: var(--t-strong);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 .25rem var(--c-tint);
}

.mode-dark .form-control:disabled,
.mode-dark .form-control[readonly]{
    background-color: var(--s-muted);
    color: var(--t-muted);
}

/* Het chevron-icoon van een select is een donkere SVG en verdwijnt anders in de rand. */
.mode-dark .form-select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3988e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.mode-dark .alert-secondary{
    background-color: var(--s-muted);
    border-color: var(--b-2);
    color: var(--t-body);
}

/* Legacy kleurhulpklassen uit site.css. .color-dark-orange is de donkere variant van de
   competitiekleur en .bg-light-orange de lichte tint; ze worden zowel los gebruikt (koppen op
   de paginakleur) als samen (een gekleurd blok, bv. een kalenderitem). Ze moeten daarom als
   paar meedraaien: enkel de tekst omkeren zou lichte tekst op een lichte tint geven. */
.mode-dark .color-dark-orange{ color: var(--c-accent-deep); }
.mode-dark .bg-light-orange{ background: var(--c-tint); }
.mode-dark .bg-gray{ background-color: var(--s-muted); }
.mode-dark .border-light-orange{ border-color: var(--c-tint-border); }

/* Legacy linkkleur. site.css zet "a, a.nav-link { color: var(--primary-nav-color) }" en die
   variabele is per liga ingesteld: bij HDV is ze zwart en bij DTL donkerpaars, dus op de
   donkere pagina onleesbaar. De variabele dient uitsluitend als linkkleur, dus ze kan in
   donkere modus veilig naar het V2-linktoken wijzen - dat is per liga al de lichtere variant. */
.mode-dark{
    --primary-nav-color: var(--link-color);
    --primary-nav-color-hover: var(--link-hover);
}

/* Uitklapmenu's (o.a. "Meer" in de navigatie). Het menu hield de witte Bootstrap-achtergrond
   terwijl de items al --t-body kregen: lichte tekst op wit. Het menu volgt nu de donkere modus. */
.mode-dark .dropdown-menu{
    --bs-dropdown-bg: var(--s-card);
    --bs-dropdown-color: var(--t-body);
    --bs-dropdown-link-color: var(--t-body);
    --bs-dropdown-link-hover-color: var(--t-strong);
    --bs-dropdown-link-hover-bg: var(--s-muted);
    --bs-dropdown-link-active-color: var(--t-strong);
    --bs-dropdown-link-active-bg: var(--s-muted);
    --bs-dropdown-border-color: var(--b-1);
    --bs-dropdown-divider-bg: var(--b-hairline);
    --bs-dropdown-header-color: var(--t-muted);
}

/* --s-head is het "sterk contrasterende" oppervlak met witte tekst: de sectiekop boven een kaart
   (.lpd-band), en ook .lpd-btn-dark, .lpd-iconbtn.dark en .lpd-pill.dark. In lichte modus is dat
   bijna zwart op een witte pagina - sterk zichtbaar. In donkere modus stond het op #0f0c09 en dus
   DONKERDER dan de pagina (#17130f) en de kaart (#1f1a15): de hiërarchie stond op zijn kop en de
   koppen waren nauwelijks te zien. Hier een neutraal oppervlak dat juist lichter is dan de kaart.
   Bewust neutraal en niet getint: een getinte variant scoort beter bij DCM maar valt weg bij HDV,
   waarvan de merkkleur zelf bijna zwart is. */
.mode-dark{
    --s-head: color-mix(in oklab, var(--s-card), white 18%);
}

/* ── Beheeroverzicht ─────────────────────────────────────────────────────────────
   V2-versie van Views/Administration/Index.cshtml. Alles op tokens, dus per liga
   gethematiseerd en meelopend met de donkere modus. */

.adm-hero {
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: var(--r-card-lg);
    padding: 22px 26px;
    margin: 18px 0 24px;
}

.adm-hero .titel {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
}

.adm-hero .sub {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: .06em;
    /* Iets gedempt t.o.v. de titel, maar afgeleid van de tekstkleur zodat het ook klopt
       wanneer de accentkleur licht is en de tekst dus donker wordt. */
    color: color-mix(in oklab, var(--c-on-accent), transparent 25%);
}

.adm-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .adm-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .adm-cols { grid-template-columns: 1fr; }
    .adm-hero .titel { font-size: 26px; }
}

.adm-colhead {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-tint);
    color: var(--c-accent-deep);
    border-radius: var(--r-card);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
}

.adm-groep { margin-bottom: 20px; }

.adm-groep .lpd-band {
    font-size: 15px;
    padding: 11px 16px;
}

.adm-teller {
    margin-left: auto;
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: var(--r-chip);
    min-width: 24px;
    padding: 1px 7px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.adm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--b-hairline);
    color: var(--c-accent-deep);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
}

.adm-item:last-child { border-bottom: none; }

.adm-item:hover {
    background: var(--c-tint-soft);
    color: var(--c-accent-deep);
    text-decoration: none;
}

.adm-item-icoon {
    width: 18px;
    text-align: center;
    color: var(--t-subtle);
}

.adm-item-titel { flex: 1; min-width: 0; }

.adm-item-chevron {
    font-size: 11px;
    color: var(--t-subtle);
}