/*
 * Switch Volley Stars — componenten
 * ---------------------------------
 * Een stylesheet voor de hub en alle vier de level-apps.
 * Klassenamen zijn bewust gelijk gebleven aan de oude apps, zodat de
 * render-functies blijven werken; alleen de vormgeving is nieuw.
 */

/* ============================================================
   1. Layout
   ============================================================ */

.wrap { max-width: 720px; margin: 0 auto; padding: 0 14px; }

@media (min-width: 760px) { .wrap { max-width: 900px; padding: 0 24px; } }

body.has-nav { padding-bottom: var(--nav-height); }

.page { display: none; }
.page.active { display: block; animation: page-in var(--t-med) both; }

@keyframes page-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   2. Header
   ============================================================ */

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Dunne accentbalk in de kleur van het level */
.sticky-top::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--level);
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 760px) { .header { max-width: 900px; padding: 11px 24px; } }

.header-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.header-left .logo-switch { height: 26px; width: auto; }
.header-left .logo-level  { height: 34px; width: auto; border-radius: var(--r-sm); }

.header-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.header-title strong {
    font-size: max(0.83rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
    line-height: 1.2;
    white-space: nowrap;
}
.header-title span {
    font-size: max(0.66rem, 12px);
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right { text-align: right; min-width: 0; }
.today-date {
    font-size: max(0.66rem, 12px);
    font-weight: 600;
    color: var(--subtle);
    white-space: nowrap;
}
.countdown {
    font-size: max(0.68rem, 12px);
    font-weight: 700;
    color: var(--vs-orange);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 172px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. Onderbalk
   ============================================================ */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--nav-offset, 0px);
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 26px rgba(39, 40, 91, 0.10);
    padding: 4px 8px var(--nav-safe);
}

.nav-inner {
    display: flex;
    gap: 3px;
    max-width: 560px;
    margin: 0 auto;
}

.nav-tab {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border-radius: var(--r-lg);
    border: 1px solid transparent;
    color: var(--subtle);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav-tab svg { width: 21px; height: 21px; display: block; }
.nav-tab span {
    font-size: max(0.6rem, 11px);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.nav-tab.active {
    background: var(--vs-orange-soft);
    color: var(--vs-orange-dark);
    border-color: rgba(236, 103, 36, 0.22);
}
.nav-tab:active { transform: scale(0.96); }

/* ============================================================
   4. Sectietitels
   ============================================================ */

.sec-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 9px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--vs-orange);
    font-size: max(0.76rem, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--vs-navy);
}
.sec-title .hint {
    font-size: max(0.64rem, 11px);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--subtle);
}
.page > .sec-title:first-child { margin-top: 14px; }

/* ============================================================
   5. Kaarten
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--vs-navy);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
    overflow: hidden;
}
.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
}
.card-number {
    flex: 0 0 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--vs-navy-soft);
    font-size: 15px;
}
.card-title    { font-size: max(0.83rem, 12px); font-weight: 700; color: var(--vs-navy); }
.card-subtitle { font-size: max(0.66rem, 12px); font-weight: 500; color: var(--muted); }
.card-content  { padding: 12px 13px; font-size: max(0.74rem, 12px); color: var(--text); }
.card-content p + p { margin-top: 8px; }

/* ============================================================
   6. Kiezers
   ============================================================ */

.weekend-selector {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px 0 4px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
}
.weekend-selector::-webkit-scrollbar { display: none; }

.weekend-btn {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--muted);
    font-size: max(0.7rem, 12px);
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--t-fast);
}
.weekend-btn.past { opacity: 0.5; }
.weekend-btn.current { border-color: var(--vs-orange); color: var(--vs-orange-dark); }
.weekend-btn.active {
    background: var(--vs-navy);
    border-color: var(--vs-navy);
    color: var(--on-dark);
    opacity: 1;
}
.weekend-btn:active { transform: scale(0.96); }

.team-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 2px;
}
.team-btn {
    padding: 6px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--vs-navy);
    font-size: max(0.7rem, 12px);
    font-weight: 700;
    transition: all var(--t-fast);
}
.team-btn.active {
    background: var(--vs-orange);
    border-color: var(--vs-orange);
    color: var(--on-dark);
}
.team-btn:active { transform: scale(0.96); }

/* ============================================================
   7. Overzichtskaart per team
   ============================================================ */

.overview-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--level);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: 12px 13px;
    margin-bottom: 9px;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.overview-card:active { transform: scale(0.995); }
.overview-card.cancelled {
    border-left-color: var(--surface-3);
    background: var(--surface-2);
    box-shadow: none;
}

.overview-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.overview-team {
    font-size: max(0.92rem, 13px);
    font-weight: 700;
    color: var(--vs-navy);
    letter-spacing: -0.01em;
}
.overview-time {
    font-size: max(0.74rem, 12px);
    font-weight: 700;
    color: var(--vs-orange-dark);
    font-variant-numeric: tabular-nums;
}
.overview-location {
    font-size: max(0.7rem, 12px);
    color: var(--muted);
    line-height: 1.5;
}
.overview-location a { font-weight: 600; }
.overview-spelers {
    margin-top: 7px;
    font-size: max(0.68rem, 12px);
    color: var(--text);
    line-height: 1.6;
}
.overview-begeleiders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}
.overview-begeleider {
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: var(--vs-teal-soft);
    color: #0B6E66;
    font-size: max(0.64rem, 11px);
    font-weight: 600;
}
.overview-begeleider.empty {
    background: var(--surface-2);
    color: var(--subtle);
    border: 1px dashed var(--border-strong);
}

/* ============================================================
   8. Wedstrijdregel
   ============================================================ */

.wedstrijd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 9px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.wedstrijd:last-child { border-bottom: 0; }
.wedstrijd.deleted { opacity: 0.45; text-decoration: line-through; }

.wed-tijd {
    flex: 0 0 42px;
    font-size: max(0.78rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
    font-variant-numeric: tabular-nums;
}
/* Kolom 2 van de wedstrijdrij: badge boven, tegenstander eronder */
.wed-info {
    flex: 1 1 130px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.wed-tegenstander {
    min-width: 0;
    font-size: max(0.74rem, 12px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
/* Losse hulptekst; bewust een andere klasse dan de rij-container hierboven */
.muted-note { font-size: max(0.64rem, 11px); color: var(--subtle); }
.wed-veld {
    font-size: max(0.64rem, 11px);
    font-weight: 600;
    color: var(--subtle);
}
.wed-type {
    padding: 2px 7px;
    border-radius: var(--r-sm);
    font-size: max(0.6rem, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wed-type.thuis, .thuis-badge {
    background: var(--vs-teal-soft);
    color: #0B6E66;
}
.wed-type.uit, .uit-badge {
    background: var(--vs-orange-soft);
    color: var(--vs-orange-dark);
}
.thuis-badge, .uit-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-size: max(0.6rem, 10px);
    font-weight: 700;
}
.wed-score {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    font-size: max(0.68rem, 11px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--surface-3);
    color: var(--muted);
}
.wed-score.win  { background: var(--ok-soft);     color: #0B6E66; }
.wed-score.loss { background: var(--danger-soft); color: var(--danger); }
.wed-score.draw { background: var(--vs-navy-soft); color: var(--vs-navy); }
.wed-score, .wed-tellen { margin-left: auto; }
/* Bewerkknoppen zakken naar een eigen regel zodra het krap wordt */
.wed-actions {
    flex: 1 1 100%;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}
.modified-badge {
    font-size: max(0.58rem, 10px);
    font-weight: 700;
    color: var(--warn);
    text-transform: uppercase;
}

/* ============================================================
   9. Spelers en begeleiders
   ============================================================ */

.spelers-box, .begeleiders-box {
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 11px;
    margin-top: 10px;
}
.spelers-title, .begeleiders-title {
    font-size: max(0.62rem, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtle);
    margin-bottom: 7px;
}
.speler-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: max(0.72rem, 12px);
}
.speler-name { color: var(--text); font-weight: 500; }
.speler-name.afwezig { color: var(--subtle); text-decoration: line-through; }
.invaller-label {
    margin-left: 5px;
    font-size: max(0.62rem, 11px);
    font-style: italic;
    color: var(--vs-orange-dark);
}
.spelers-inline { line-height: 1.7; }

.afwezig-btn {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--muted);
    font-size: max(0.6rem, 11px);
    font-weight: 600;
}
.afwezig-btn.active {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}
.invaller-input {
    width: 100%;
    margin: 4px 0 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
}

.begeleider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    font-size: max(0.72rem, 12px);
}
.begeleider-label { color: var(--muted); font-weight: 600; }
.begeleider-value { color: var(--vs-navy); font-weight: 600; }

/* ============================================================
   10. Uitklapbare secties
   ============================================================ */

.info-section, .spelregels-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin: 10px 0;
    overflow: hidden;
}
.info-toggle, .spelregels-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    font-size: max(0.74rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
    text-align: left;
}
.info-toggle span:last-child, .spelregels-toggle span:last-child {
    color: var(--vs-orange);
    font-size: 11px;
    transition: transform var(--t-fast);
}
.info-content, .spelregels-content {
    display: none;
    padding: 0 13px 12px;
}
.info-content.show, .spelregels-content.show { display: block; }
.info-item {
    display: flex;
    gap: 9px;
    padding: 5px 0;
    font-size: max(0.7rem, 12px);
    color: var(--muted);
    line-height: 1.5;
}
.info-icon { flex: 0 0 18px; }

/* ============================================================
   11. Spelregels
   ============================================================ */

.spelregels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}
@media (max-width: 400px) { .spelregels-grid { grid-template-columns: repeat(2, 1fr); } }

.spelregel-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 9px 6px;
    text-align: center;
}
.spelregel-item .icon  { font-size: 17px; line-height: 1.4; }
.spelregel-item .label {
    font-size: max(0.58rem, 10px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--subtle);
}
.spelregel-item .value {
    font-size: max(0.72rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
}

.spelregels-list li {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    font-size: max(0.7rem, 12px);
    color: var(--muted);
    line-height: 1.5;
}
.spelregels-list .num {
    flex: 0 0 18px;
    font-weight: 700;
    color: var(--vs-orange);
    font-variant-numeric: tabular-nums;
}

.video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface-3);
    margin-bottom: 10px;
}
.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pdf-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--vs-orange-soft);
    border: 1px solid rgba(236, 103, 36, 0.25);
    color: var(--vs-orange-dark);
    font-size: max(0.7rem, 12px);
    font-weight: 700;
}

/* Clubafspraken */
.afspraak-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--level);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 12px 13px;
    margin-bottom: 8px;
}
.afspraak-card .ic {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--vs-navy-soft);
    font-size: 17px;
}
.afspraak-card h4 {
    font-size: max(0.76rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
    margin-bottom: 3px;
}
.afspraak-card p {
    font-size: max(0.7rem, 12px);
    color: var(--muted);
    line-height: 1.55;
}

/* ============================================================
   12. Locaties
   ============================================================ */

.location-box {
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 11px;
    margin-bottom: 8px;
}
.location-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    font-size: max(0.7rem, 12px);
    padding: 3px 0;
}
.location-label {
    font-size: max(0.6rem, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--subtle);
    margin-bottom: 2px;
}
.location-value { color: var(--text); font-weight: 600; }
/* Rechtstreekse label/waarde-paren (trainingskaart) staan tegenover elkaar */
.location-row > .location-value { text-align: right; }
.location-row > .location-label { margin-bottom: 0; }

/* Locatie links, verzameltijd rechts */
.location-main { flex: 1 1 auto; min-width: 0; }
.location-time { flex: 0 0 auto; text-align: right; }

.location-address { font-size: max(0.66rem, 11px); color: var(--muted); }
/* Adressen staan altijd op één regel: de plaats staat al op de zaalregel erboven. */
.location-address .maps-link > span, .alle-route { white-space: nowrap; }
.location-big { font-size: max(1rem, 15px); font-weight: 700; color: var(--vs-orange-dark); font-variant-numeric: tabular-nums; }

/* ============================================================
   13. Tabellen
   ============================================================ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.speelschema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: max(0.68rem, 11px);
}
.speelschema-table th {
    padding: 7px 6px;
    text-align: left;
    font-size: max(0.6rem, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--subtle);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.speelschema-table td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.speelschema-table tbody tr:nth-child(even) { background: rgba(244, 245, 248, 0.6); }
.speelschema-table strong { color: var(--vs-navy); font-variant-numeric: tabular-nums; }

/* ============================================================
   14. Totaalschema
   ============================================================ */

.totaal-day {
    margin: 16px 0 7px;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    background: var(--vs-navy-soft);
    font-size: max(0.66rem, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vs-navy);
}
.totaal-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--level);
    border-radius: var(--r-md);
    padding: 9px 11px;
    margin-bottom: 6px;
}
.totaal-row.past { opacity: 0.62; }
.totaal-time {
    font-size: max(0.74rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
    font-variant-numeric: tabular-nums;
}
.totaal-teams { min-width: 0; }
.totaal-teams .me {
    font-size: max(0.72rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
}
.totaal-teams .opp {
    font-size: max(0.68rem, 12px);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.totaal-meta {
    font-size: max(0.6rem, 10px);
    color: var(--subtle);
    margin-top: 2px;
}

/* ============================================================
   15. Knoppen
   ============================================================ */

.btn-add, .btn-small, .btn-edit, .btn-remove, .btn-cancel, .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--vs-navy);
    background: var(--surface);
    color: var(--vs-navy);
    font-size: max(0.72rem, 12px);
    font-weight: 700;
    transition: transform var(--t-fast), background var(--t-fast);
}
.btn-add:active, .btn-small:active { transform: scale(0.97); }
.btn-add svg { flex: 0 0 auto; }

.btn-add, .btn-submit {
    background: var(--vs-orange);
    border-color: var(--vs-orange);
    color: var(--on-dark);
}
.btn-small { padding: 6px 11px; font-size: max(0.64rem, 11px); }
.btn-remove, .btn-cancel {
    border-color: var(--border-strong);
    color: var(--muted);
}
.btn-remove { border-color: rgba(220, 38, 38, 0.35); color: var(--danger); }
.wed-edit, .wed-delete, .edit-btn, .btn-add-opmerking {
    padding: 4px 9px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--muted);
    font-size: max(0.6rem, 11px);
    font-weight: 600;
}
.wed-delete { border-color: rgba(220, 38, 38, 0.3); color: var(--danger); }

/* Bewerken en verwijderen zijn alleen zichtbaar in beheermodus */
.wed-edit, .wed-delete { display: none; }
.admin-mode .wed-edit, .admin-mode .wed-delete { display: inline-block; }
body:not(.admin-mode) .wed-actions { display: none; }

/* 'TELLEN' is een label, geen knop */
.wed-tellen {
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: var(--vs-teal-soft);
    color: #0B6E66;
    font-size: max(0.58rem, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* Zwevende adminknop */
.admin-toggle {
    position: fixed;
    right: 14px;
    bottom: calc(var(--nav-height) + 12px + var(--nav-offset, 0px));
    z-index: 95;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-float);
    display: grid;
    place-items: center;
    font-size: 18px;
}
.admin-toggle.active {
    background: var(--vs-orange);
    border-color: var(--vs-orange);
    color: var(--on-dark);
}

.andere-levels {
    position: fixed;
    left: 14px;
    bottom: calc(var(--nav-height) + 12px + var(--nav-offset, 0px));
    z-index: 95;
    padding: 8px 13px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-float);
    color: var(--vs-navy);
    font-size: max(0.66rem, 11px);
    font-weight: 700;
}

/* ============================================================
   16. Notities, waarschuwingen, statusbalk
   ============================================================ */

.opmerking-box {
    background: var(--warn-soft);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--r-md);
    padding: 10px 11px;
    margin-top: 10px;
}
.opmerking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.opmerking-label {
    font-size: max(0.6rem, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #92610B;
}
.opmerking-text { font-size: max(0.7rem, 12px); color: var(--text); white-space: pre-line; }

.warning-box, .cancelled-notice {
    background: var(--warn-soft);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--r-md);
    padding: 12px;
    text-align: center;
    font-size: max(0.72rem, 12px);
    color: #92610B;
}
.cancelled-notice .icon { font-size: 26px; display: block; margin-bottom: 6px; }

.status-bar {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: max(0.66rem, 11px);
    font-weight: 600;
    max-width: 720px;
    margin: 0 auto;
}
.status-bar.ok      { color: #0B6E66; }
.status-bar.error   { color: var(--danger); }
.status-bar.loading { color: var(--subtle); }

.legenda { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.legenda-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: max(0.62rem, 11px);
    color: var(--muted);
}
.legenda-color { width: 11px; height: 11px; border-radius: 3px; }

/* ============================================================
   17. Modals
   ============================================================ */

.form-modal, .pin-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(30, 32, 56, 0.55);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.form-modal.active, .pin-modal.active,
.form-modal.show,   .pin-modal.show   { display: flex; }

.form-box, .pin-box {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float);
    overflow: hidden;
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
}
.form-title, .pin-box h3 {
    padding: 14px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: max(0.86rem, 13px);
    font-weight: 700;
    color: var(--vs-navy);
}
.form-body, .form-content { padding: 14px 16px; overflow-y: auto; }
.pin-box { text-align: center; padding-bottom: 16px; }
.pin-box p {
    padding: 12px 16px 0;
    font-size: max(0.7rem, 12px);
    color: var(--muted);
}
.pin-box input[type="password"] {
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 12px;
    text-align: center;
    letter-spacing: .12em;
    font-size: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
}
.pin-remember { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 16px 14px; color: var(--text); font-size: 13px; cursor: pointer; }
.pin-remember input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--vs-orange); }
.pin-buttons, .form-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px;
}
.form-actions { padding: 0 16px 16px; }
.pin-btn { flex: 1; padding: 11px; border-radius: var(--r-md); font-weight: 700; }
.pin-btn.cancel { background: var(--surface-3); color: var(--muted); }
.pin-btn.ok     { background: var(--vs-orange); color: var(--on-dark); }
.btn-cancel, .btn-submit { flex: 1; }

.form-row   { margin-bottom: 12px; }
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: max(0.66rem, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--subtle);
}
.form-options { display: flex; flex-wrap: wrap; gap: 6px; }
.form-option {
    padding: 8px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: max(0.7rem, 12px);
    font-weight: 600;
}
.form-option.selected {
    background: var(--vs-orange);
    border-color: var(--vs-orange);
    color: var(--on-dark);
}
.edit-input, textarea.edit-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* ============================================================
   18. Adminmodus
   ============================================================ */

body:not(.admin-mode) .admin-only { display: none !important; }

/* ============================================================
   19. Voettekst
   ============================================================ */

.footer {
    padding: 20px 14px calc(20px + var(--nav-height));
    text-align: center;
    font-size: max(0.62rem, 11px);
    color: var(--subtle);
}
.footer a { color: var(--muted); font-weight: 600; }

/* ============================================================
   20. Printen
   ============================================================ */

.print-header { display: none; }

@media print {
    .sticky-top, .bottom-nav, .admin-toggle, .andere-levels,
    .weekend-selector, .team-selector, .footer,
    .status-bar, .info-section, .form-modal, .pin-modal { display: none !important; }

    body { background: #fff; padding: 0; font-size: 11pt; }
    .page { display: none !important; }
    .page.active { display: block !important; }

    .print-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 2px solid #000;
    }
    .print-header h1 { font-size: 15pt; }
    .print-header p  { font-size: 10pt; color: #444; }

    .card, .overview-card, .totaal-row {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #999 !important;
    }
    * { color: #000 !important; }
}

/* ============================================================
   21. Hub — startscherm
   ============================================================ */

.hub {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

.hub-head {
    text-align: center;
    padding: 26px 0 18px;
}
.hub-head img { width: 178px; height: auto; }
.hub-head p {
    margin-top: 10px;
    font-size: max(0.7rem, 12px);
    font-weight: 600;
    color: var(--muted);
}

.level-card {
    display: block;
    background: var(--surface);
    border: 1.5px solid var(--tint, var(--vs-orange));
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    padding: 13px 14px;
    margin-bottom: 10px;
    color: inherit;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.level-card:active { transform: scale(0.99); }
@media (hover: hover) {
    .level-card:hover { box-shadow: var(--shadow-md); }
}

.level-main {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 12px;
}
.level-main img { width: 46px; height: 46px; border-radius: var(--r-md); }
.level-name {
    font-size: max(0.94rem, 14px);
    font-weight: 700;
    color: var(--vs-navy);
    letter-spacing: -0.01em;
}
.level-meta {
    font-size: max(0.68rem, 12px);
    font-weight: 500;
    color: var(--muted);
}
.level-arrow {
    font-size: 20px;
    color: var(--tint, var(--vs-orange));
    line-height: 1;
}

.team-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}
.team-chip {
    padding: 5px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--vs-navy);
    font-size: max(0.66rem, 11px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: all var(--t-fast);
}
.team-chip:active { transform: scale(0.95); }
@media (hover: hover) {
    .team-chip:hover {
        background: var(--tint, var(--vs-orange));
        border-color: var(--tint, var(--vs-orange));
        color: var(--on-dark);
    }
}

.hub-news { margin-top: 24px; }
.news-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--vs-navy);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 11px 13px;
    margin-bottom: 8px;
}
.news-date {
    font-size: max(0.6rem, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--subtle);
    margin-bottom: 3px;
}
.news-text { font-size: max(0.72rem, 12px); color: var(--text); line-height: 1.5; }

.hub-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}
.hub-links a {
    flex: 1 1 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 6px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: max(0.64rem, 11px);
    font-weight: 600;
    text-align: center;
}

.totaal-day-zaal {
    float: right;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted);
}
@media (max-width: 460px) {
    .totaal-day-zaal { float: none; display: block; margin-top: 2px; }
}

/* In de zalenlijst is .location-main de naam van de zaal */
#locatiesContent .location-main {
    font-size: max(0.78rem, 12px);
    font-weight: 700;
    color: var(--vs-navy);
    margin-bottom: 2px;
}
#locatiesContent .location-address { display: block; }

/* Speeldagen op de levelkaart: één regel, eerstvolgende met nadruk */
.level-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: max(0.68rem, 12px);
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.level-dates .next { color: var(--vs-orange-dark); font-weight: 700; }
.level-dates .past { color: var(--subtle); text-decoration: line-through; }
.level-dates .sep  { color: var(--border-strong); }

/* De chips sluiten dan direct op de datumregel aan */
.level-dates + .team-chips { border-top: 0; padding-top: 7px; margin-top: 0; }

/* Wie het doet: twee regels onder het logo */
.hub-mensen {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    font-size: max(0.7rem, 12px);
    font-weight: 500;
    color: var(--muted);
}
.hub-mensen strong {
    font-weight: 700;
    color: var(--vs-navy);
    margin-right: 5px;
}

/* ============================================================
   INTROFILMPJE
   Ligt over het startscherm tot het klaar is of overgeslagen wordt.
   De markup staat in de HTML zodat er geen flits van de app is; het
   filmpje zelf wordt pas door JS ingeladen (zie index.html).
   ============================================================ */
.intro {
    position: fixed;
    inset: 0;
    z-index: 300;   /* boven de modals, die op 200 zitten */
    background: var(--vs-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity .45s ease;
}
.intro[hidden] { display: none; }
.intro.weg { opacity: 0; pointer-events: none; }

/* Vult het scherm zonder te vervormen; de randen mogen wegvallen. */
.intro video,
.intro .intro-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.intro .intro-poster {
    position: absolute;
    inset: 0;
    filter: blur(1px);
}
.intro video { position: relative; z-index: 1; }

.intro-skip {
    position: absolute;
    z-index: 2;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    min-width: 168px;
    min-height: 56px;
    padding: 14px 26px;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: rgba(20, 21, 51, .94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-family: inherit;
    font-size: max(1.05rem, 18px);
    font-weight: 700;
    cursor: pointer;
}
.intro-skip[hidden] { display: none; }
.intro-skip:focus-visible { outline: 3px solid var(--vs-orange); outline-offset: 4px; }
.intro-skip:active { transform: scale(.97); }

/* Wie bewegende beelden liever niet krijgt, krijgt ze niet. */
@media (prefers-reduced-motion: reduce) {
    .intro { display: none !important; }
}
/* Op het brede werkvlak (laptop, tablet) nooit; het script slaat hem daar ook over. */
@media (min-width: 760px) {
    .intro { display: none !important; }
}

/* ============================================================
   ACHTERGRONDBEELD OP HET STARTSCHERM
   Clubbeelden achter de kaarten. Het bestand heeft geen alfakanaal
   (H.264 kan dat niet), dus "doorzichtig" doen we met een scrim erover
   en halfdoorzichtige kaarten erop. Alleen op de hub.
   ============================================================ */
.hub-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: var(--vs-navy);
}
.hub-bg img,
.hub-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Licht onscherp: het is decor, geen inhoud. De schaal voorkomt dat
       de blur doorzichtige randen langs het beeld trekt. */
    filter: blur(3px);
    transform: scale(1.08);
}
/* De scrim bepaalt of de tekst erop leesbaar is; donker bovenin waar het
   logo staat, iets opener onderin. */
.hub-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(24, 25, 60, .82) 0%, rgba(24, 25, 60, .62) 45%, rgba(24, 25, 60, .78) 100%);
}

/* ------------------------------------------------------------
   De hub bovenop het beeld
   ------------------------------------------------------------ */
body.met-video { background: transparent; }
body.met-video .hub-mensen { color: rgba(255, 255, 255, .82); }
body.met-video .hub-mensen strong { color: #FFFFFF; }

/* Transparante kaarten met een volledige rand in de eigen levelkleur. */
body.met-video .level-card {
    background: rgba(255, 255, 255, .64);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.1);
    border-color: var(--tint, var(--vs-orange));
    box-shadow: 0 4px 16px rgba(10, 11, 35, .22);
}
body.met-video .team-chip {
    background: rgba(255, 255, 255, .26);
    border-color: var(--tint, var(--vs-orange));
}
body.met-video .hub-links a {
    background: rgba(236, 103, 36, .28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1.5px solid #FFFFFF;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(24, 25, 60, .4);
}
body.met-video .hub-links .hub-link-switch { border-color: #000000; }

.hub a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--vs-navy);
}
@media (hover: hover) {
    body.met-video .team-chip:hover {
        background: rgba(255, 255, 255, .65);
        color: var(--vs-navy);
    }
    body.met-video .hub-links a:hover { background: rgba(236, 103, 36, .42); }
}

body.met-video .footer,
body.met-video .footer a { color: rgba(255, 255, 255, .72); }
body.met-video .news-card {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
body.met-video .hub-section-title { color: rgba(255, 255, 255, .88); }

/* ------------------------------------------------------------
   Compactere levelkaart: titel + datums samen in twee regels,
   daaronder alleen de teams.
   ------------------------------------------------------------ */
.level-main { grid-template-columns: 36px minmax(0, 1fr) 12px; gap: 10px; }
.level-main img { width: 36px; height: 36px; }
.level-body { min-width: 0; }
.level-top {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.level-top .level-name {
    font-size: max(0.88rem, 14px);
    font-weight: 700;
    color: var(--vs-navy);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.level-tag {
    flex: none;
    margin-left: auto;
    font-size: max(0.64rem, 11px);
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
/* De datumregel zit nu ín het titelblok: geen streep, geen eigen rij. */
.level-body .level-dates {
    margin-top: 2px;
    padding-top: 0;
    border-top: 0;
    font-size: max(0.66rem, 11px);
}
.level-card { padding: 9px 10px; margin-bottom: 6px; }
.team-chips { margin-top: 6px; padding-top: 5px; gap: 5px; border-top-color: rgba(39, 40, 91, .16); }
.team-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 3px 9px; font-size: max(0.68rem, 12px); }

/* Gespeelde speeldagen: de doorhaling draagt de betekenis, dus de kleur
   hoeft niet zo licht dat hij onleesbaar wordt (was 2,5:1). */
body.met-video .level-dates .past { color: #5F657B; }


/* ============================================================
   TEAMKEUZE ALS DROPDOWN
   Zes teams namen als knoppen twee regels; dit is er één. Patroon
   overgenomen van jo11: pill, eigen pijltje van twee gradients zodat
   er geen extra bestand nodig is, en label ingebakken in de optie.
   ============================================================ */
.team-selector { margin-bottom: 12px; }

.pill-select {
    height: 38px;
    padding: 0 34px 0 14px;
    font-family: inherit;
    font-size: max(0.8rem, 14px);
    font-weight: 700;
    color: var(--vs-navy);
    background-color: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.pill-select:focus-visible {
    outline: 2px solid var(--vs-orange);
    outline-offset: 1px;
}
.team-select {
    width: 100%;
    max-width: 240px;
    border-color: rgba(236, 103, 36, .45);
}

/* Donkere kleine tekst blijft leesbaar op de transparantere kaarten. */
body.met-video .level-dates,
body.met-video .level-tag { color: #34384F; }
/* Gespeelde dagen kregen op de doorzichtige kaart 4,36:1 en zakten daarmee net
   door de eis. Ze delen nu de kleur van de andere datums; de doorhaling draagt
   het onderscheid, en dat is ook zonder kleurwaarneming te zien. */
body.met-video .level-dates .past { color: #34384F; }


body.met-video .level-dates .next { color: #963008; }

/* Mobiele clubstijl: heldere acties, levelkleuren en rustige vectoriconen. */
.vs-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
button, a, select { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem) !important; }
body.has-nav { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav { bottom: var(--nav-offset, 0px); padding: 6px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(255,255,255,.98); }
.nav-tab { min-height: 56px; color: #4A4F66; border-radius: 14px; }
.nav-icon { display: grid; place-items: center; width: 30px; height: 28px; }
.nav-tab .vs-icon { width: 24px; height: 24px; }
.nav-tab.active { color: #FFFFFF; background: #27285B; border-color: var(--level); box-shadow: inset 0 -3px var(--level); }
.home-link { position: fixed; z-index: 95; left: max(12px, env(safe-area-inset-left)); bottom: calc(88px + env(safe-area-inset-bottom) + var(--nav-offset, 0px)); width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid #FFFFFF; border-radius: 50%; background: #27285B; color: #FF922F; box-shadow: 0 3px 12px #27285B25; }
.sticky-top { padding-top: env(safe-area-inset-top, 0px); }
.header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
@media (max-width: 380px) { .header { gap: 5px; }.header-right { max-width: 44%; }.countdown { font-size: 11px; }.header-title strong { font-size: 12px; } }

body.met-video .level-card { background: rgba(255,255,255,.54); border: 3px solid var(--tint); padding: 10px; }
.level-main { grid-template-columns: 36px minmax(0,1fr) 30px; gap: 8px; align-items: start; }
.level-main > img { align-self: center; }
.level-top { align-items: center; gap: 9px; }
.level-top .level-name { white-space: normal; overflow: visible; line-height: 1.2; color: #191A3F; font-weight: 600; }
body.met-video .level-tag { color: var(--level-ink); font-size: 15px; font-weight: 600; margin-right: 4px; line-height: 1.25; }
.level-tag strong { font-weight: 600; }.level-tag span { display: block; font-size: 12px; font-weight: 500; }
.level-arrow { align-self: start; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px; background: #27285B; color: var(--chip-ink); }
.level-arrow svg { width: 23px; height: 23px; }
.team-chips { justify-content: center; gap: 6px; padding-top: 7px; }
body.met-video .team-chip { min-width: 45px; min-height: 34px; padding: 4px 9px; background: #27285B; color: var(--chip-ink); border: 1.5px solid var(--tint); font-size: 13px; font-weight: 600; }
body.met-video .level-dates, body.met-video .level-dates .past { color: #25273E; }
body.met-video .level-dates .next { color: #702306; }
body.met-video .hub-links a { background: #FF7A00; color: #191A3F; font-weight: 600; text-shadow: none; min-height: 42px; }
@media (hover:hover) { body.met-video .hub-links a:hover { background: #FF942E; } body.met-video .team-chip:hover { background: #343573; color: var(--chip-ink); } }
@media (max-width: 350px) { .level-top { flex-wrap: wrap; gap: 3px; }.level-tag { margin-left: 0; }.level-tag span { display: inline; }.level-dates { column-gap: 3px; } }

.match-schedule { font-size: 11px; table-layout: auto; }
.match-schedule th, .match-schedule td { padding: 9px 4px; white-space: nowrap; }
.match-schedule th { font-size: 9px; letter-spacing: .1px; }
.match-schedule .match-time { width: 36px; font-weight: 400; font-variant-numeric: tabular-nums; }
.match-schedule .match-own { min-width: 76px; font-weight: 600; }
.match-schedule .match-opponent { width: 100%; }
.match-schedule .match-badge { padding: 3px; border-radius: 7px; }
.match-badge .vs-icon { width: 15px; height: 15px; }
.thuis-badge { background: #27285B; color: #FFD09D; }
.uit-badge { background: #FFF0DE; color: #9E4400; }
.wed-type { display: flex; align-items: center; gap: 5px; padding: 3px 7px; background: #FFF0DE; color: #843600; }
.wed-type .vs-icon { width: 16px; height: 16px; }
.wed-tijd { font-weight: 400; }
.overview-time .vs-icon, .overview-location .vs-icon { width: 17px; height: 17px; }
.afspraak-card .ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FF7A00; color: white; flex: 0 0 36px; }
@media print { .home-link { display: none !important; } }

/* Afdrukken / opslaan als PDF, geïnspireerd op het ouderdocument. */
#switchPrintDocument { display: none; }
@media print {
    @page { size: A4; margin: 13mm 14mm 15mm; }
    html, body { min-height: 0; height: auto; overflow: visible; background: #FFF; }
    body.has-print-document { background: #FFF !important; }
    body.has-print-document > * { display: none !important; }
    body.has-print-document > #switchPrintDocument { display: block !important; }
    #switchPrintDocument, #switchPrintDocument * { color: #222 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #switchPrintDocument { font: 9pt/1.45 Arial, sans-serif; }
    #switchPrintDocument p { margin: 0 0 5pt; }
    #switchPrintDocument h1 { font-size: 20pt; line-height: 1.15; margin: 4pt 0 2pt; color: #27285B !important; }
    .print-doc-header { border-top: 3pt solid #EC721E; border-bottom: .6pt solid #27285B; padding: 8pt 0 8pt; margin-bottom: 10pt; min-height: 46pt; }
    .print-doc-header img { float: right; width: 70pt; height: 52pt; object-fit: contain; margin-left: 12pt; }
    #switchPrintDocument .print-doc-header > p { font-size: 9pt; margin: 0; color: #5A5C6E !important; }
    .print-section { position: relative; padding: 9pt 10pt 9pt 44pt; border-left: 1pt solid #FF7A00; margin: 0 0 0 14pt; break-inside: avoid; }
    #switchPrintDocument .print-section h2 { font-size: 11pt; font-weight: 700; line-height: 1.25; text-transform: uppercase; margin: 0 0 6pt; break-after: avoid; }
    #switchPrintDocument h3 { font-size: 9pt; margin: 7pt 0 3pt; }
    .print-section-icon { position: absolute; top: 9pt; left: -14pt; width: 28pt; height: 28pt; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FF7A00; }
    #switchPrintDocument .print-section-icon, #switchPrintDocument .print-section-icon * { color: #FFF !important; }
    .print-section-icon .vs-icon { width: 17pt; height: 17pt; }
    .print-match-table { border-collapse: collapse; width: 100%; font-size: 8pt; }
    .print-match-table th, .print-match-table td { text-align: left; padding: 5pt 3pt; border-bottom: .5pt solid #D8D5D1; vertical-align: top; }
    .print-match-table th { background: #ECEAE7; font-size: 7.5pt; }
    .print-match-table td:first-child, .print-match-table td:nth-child(2) { white-space: nowrap; }
    .print-match-table td:nth-child(3) { width: 36%; }
    .print-match-table small { display: block; font-size: 6.5pt; white-space: nowrap; }
    .print-match-table thead { display: table-header-group; }
    .print-match-table tr { break-inside: avoid; }
    .print-rule-list { list-style: decimal outside; padding-left: 15pt; margin: 8pt 0 6pt; }
    /* De zes kenmerken van het level als tegels, zoals op het Spelregels-tabblad. */
    .print-spec-tiles { display: flex; gap: 5pt; list-style: none; margin: 0 0 4pt; padding: 0; }
    .print-spec-tiles li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2pt; padding: 6pt 3pt 5pt; border: .5pt solid #DEDBD7; border-radius: 4pt; background: #FAF9F7; text-align: center; break-inside: avoid; }
    .print-spec-tiles .vs-icon { width: 14pt; height: 14pt; }
    #switchPrintDocument .print-spec-tiles .vs-icon, #switchPrintDocument .print-spec-tiles .vs-icon * { color: #27285B !important; stroke: #27285B !important; }
    #switchPrintDocument .print-spec-label { font-size: 6.5pt; color: #5A5C6E !important; }
    #switchPrintDocument .print-spec-value { font-size: 8.5pt; font-weight: 700; color: #27285B !important; }
    /* Het spelregelblok (tegels plus regels) blijft bij elkaar; het schuift liever naar een nieuwe pagina. */
    .print-section.print-rules { break-inside: avoid; }
    .print-rule-list li { padding: 2pt 0; }
    .print-multiline { white-space: pre-wrap; overflow-wrap: anywhere; }
    #switchPrintDocument .print-note { font-size: 7pt; margin: 7pt 0; color: #555 !important; }
    .print-doc-footer { border-top: 3pt solid #FF7A00; margin-top: 12pt; padding-top: 6pt; font-size: 7pt; }
}

/* Clublogo en clubnaam blijven samen in het teamschema. */
.club-logo { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; background: #FFF; overflow: hidden; }
.club-logo-fallback { display: grid; place-items: center; color: #8A5700; }
.club-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #FFF; }
.wed-tegenstander { display: flex; align-items: center; gap: 6px; }
.wed-tegenstander > span:last-child { overflow-wrap: anywhere; }
.team-schedule-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
@media print {
    #switchPrintDocument .print-section-icon svg, #switchPrintDocument .print-section-icon svg * { stroke: #FFF !important; }
    #switchPrintDocument .print-section:has(.print-match-table) { break-inside: auto; }
}

/* Rustige ouderapp: compacte koppen en één regel per wedstrijd. */
body.has-nav { background: #EEF0F5; --subtle: #4E546C; --border: #DCE0EA; }
body.has-nav .card, body.has-nav .overview-card { border: 1px solid #DCE0EA; box-shadow: 0 2px 7px #27285B0A; }
body.has-nav .card-title, body.has-nav .sec-title, body.has-nav .header-title strong { font-weight: 600; }
body.met-video .level-top { align-items: baseline; gap: 5px; }
body.met-video .level-top .level-name { flex: 1; font-size: 14px; white-space: nowrap; }
body.met-video .level-tag { display: inline-flex; align-items: baseline; gap: 3px; margin: 0; color: #27285B; font-size: 12px; line-height: 1.25; }
body.met-video .level-tag span { display: inline; font-size: 11px; font-weight: 500; }
body.met-video .level-tag .level-dot { font-weight: 400; }
body.met-video .level-body .level-dates { margin-top: 3px; line-height: 1.3; }
body.met-video .level-main { align-items: start; }
@media (max-width: 350px) {
    body.met-video .level-main { grid-template-columns: 28px minmax(0,1fr) 26px; gap: 5px; }
    body.met-video .level-main img { width: 28px; height: 28px; }
    body.met-video .level-top { flex-wrap: nowrap; }
    body.met-video .level-top .level-name { font-size: 12px; }
    body.met-video .level-tag { font-size: 11px; gap: 2px; }
    body.met-video .level-tag span { font-size: 10px; }
    body.met-video .level-arrow { width: 26px; height: 26px; }
}
.header { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 4px 10px; padding-top: 8px; padding-bottom: 7px; }
.header-left { grid-column: 1; }
.header-title strong { font-size: 15px; }
.header-title span { font-size: 12px; }
.header-right { grid-column: 1 / -1; max-width: none; text-align: left; padding-left: 43px; }
.header-right .countdown { color: #3F455C; font-size: 11px; font-weight: 500; line-height: 1.4; }
.app-menu-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #D4D8E4; background: #F5F6FA; color: #27285B; border-radius: 11px; }
.app-menu-button .vs-icon { width: 22px; height: 22px; }
.app-menu { position: fixed; inset: max(12px, env(safe-area-inset-top)) 12px auto auto; width: min(320px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 14px; border: 1px solid #DCE0EA; border-radius: 18px; background: #FFF; color: #27285B; box-shadow: 0 12px 45px #161A4433; }
.app-menu::backdrop, .driver-modal::backdrop { background: #171C465C; }
.app-menu-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.app-menu-heading h2 { flex: 1; font-size: 14px; font-weight: 600; margin: 0; }
.app-menu-heading > button { width: 36px; height: 36px; border: 0; border-radius: 10px; color: #27285B; background: #F0F2F7; font-size: 24px; }
.app-menu nav { display: grid; gap: 3px; }
.app-menu nav > a, .app-menu nav > button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 9px 12px; background: #FFF; border: 0; border-radius: 10px; color: #27285B; text-align: left; font: 500 13px Poppins, sans-serif; }
.app-menu nav > :hover, .app-menu nav > :focus-visible { background: #F2F4F9; }
.app-menu nav > .menu-admin { border-top: 1px solid #E1E4ED; border-radius: 0; margin-top: 5px; }
.app-menu nav > .menu-admin.active { background: #EEF1F8; color: #27285B; font-weight: 600; }
.nav-icon img { object-fit: contain; width: 28px; height: 28px; }
.nav-tab { min-height: 54px; font-weight: 500; }
.nav-tab.active { font-weight: 600; }
.team-schedule-title { margin: 14px 0 4px; font-size: 13px; }
.team-schedule-title strong { font-weight: 600; }
.schedule-help { color: #454B63; font-size: 10px; margin: 0 0 8px; }
#teamContent .wedstrijd { display: grid; grid-template-columns: 35px minmax(0,1fr) 22px 29px; gap: 5px; padding: 4px 5px; border: 0; border-bottom: 1px solid #DFE3EC; border-left: 3px solid transparent; margin: 0 -3px; min-height: 50px; }
#teamContent .wedstrijd.thuis { border-left-color: #EE792A; background: #FFF5EA; }
#teamContent .wedstrijd.uit { background: #FFF; }
#teamContent .wed-tijd { font-size: 12px; font-weight: 400; }
#teamContent .wed-tegenstander { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 42px; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; color: #27285B; font-family: inherit; font-size: 12px; font-weight: 500; }
#teamContent .wed-tegenstander .club-logo { width: 22px; height: 22px; flex-basis: 22px; }
#teamContent .opponent-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#teamContent .match-side { white-space: nowrap; font-size: 10px; color: #3F4459; flex-shrink: 0; }
#teamContent .match-modified { color: #8D4500; }
#teamContent .wed-veld { color: #3F455C; font-size: 11px; text-align: center; }
#teamContent .wed-score { font-size: 10px; padding: 3px 2px; text-align: center; white-space: nowrap; }
#teamContent .wed-score-empty { text-align: center; color: #444A60; font-size: 11px; }
#teamContent .wed-actions { grid-column: 1 / -1; justify-content: flex-end; }
body:not(.admin-mode) #teamContent .wed-actions { display: none; }
body.has-nav .begeleiders-box, .drivers-box { background: #F4F6FA; border: 1px solid #DCE0EA; border-radius: 12px; padding: 12px; margin-top: 16px; margin-bottom: 12px; }
.begeleiders-title, .drivers-title { display: flex; gap: 7px; align-items: center; color: #27285B; font-size: 13px; font-weight: 600; }
.begeleider-label { display: flex; align-items: center; gap: 5px; }
.btn-small.btn-add, .driver-signup, .driver-submit { min-height: 40px; padding: 8px 12px; border: 1px solid #CE6520; border-radius: 10px; background: #FF7A00; color: #242550; font: 600 12px Poppins, sans-serif; }
.drivers-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 8px; }
.drivers-capacity { color: #3F455C; font-size: 11px; }
.drivers-list { list-style: none; padding: 0; margin: 0; }
.driver-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid #DCE0EA; }
.driver-row > div { min-width: 0; }
.driver-name { font-weight: 600; color: #27285B; font-size: 12px; overflow-wrap: anywhere; }
.driver-places { display: block; font-size: 11px; color: #3F4859; }
.driver-departure { display: block; margin-top: 3px; font-size: 11px; color: #3F4859; overflow-wrap: anywhere; }
.driver-remove { background: #FFF; color: #3F455C; border: 1px solid #CDD2DF; min-height: 36px; flex-shrink: 0; }
.drivers-empty, .driver-status { font-size: 12px; color: #444A62; line-height: 1.5; }
.driver-signup { margin-top: 8px; }
.driver-modal { border: 1px solid #DCE0EA; border-radius: 18px; padding: 18px; background: #FFF; color: #27285B; width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
.driver-form { display: grid; gap: 8px; }
.driver-form-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.driver-form-heading h2 { font-size: 17px; font-weight: 600; margin: 0; }
.driver-close { width: 36px; height: 36px; border: 0; border-radius: 9px; background: #F0F2F7; color: #27285B; font-size: 24px; }
.driver-form-context, .driver-form-help { font-size: 12px; color: #444A62; margin: 0 0 5px; }
.driver-form label { font-size: 12px; font-weight: 600; }
.driver-form input, .driver-form select { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #BFC5D5; border-radius: 10px; background: #FFF; color: #27285B; }
.driver-form-status { font-size: 12px; color: #3F455C; line-height: 1.5; }
.driver-form-status.is-error { color: #9C2B20; }
.driver-submit { min-height: 44px; }
.driver-submit:disabled, .driver-signup:disabled { opacity: .55; }
@media print { .app-menu, .driver-modal { display: none !important; } }

/* Koppelingen en routes: dezelfde fijne lijn als het appmenu. */
.hub-connections { margin-top: 18px; scroll-margin-top: 16px; }
.hub-connections h2 { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 500; color: #27285B; }
body.met-video .hub-connections h2 { color: #FFF; }
.hub-connections h2 .vs-icon { width: 16px; height: 16px; }
.hub-connections .hub-links { margin-top: 9px; }
.hub-links a { gap: 5px; white-space: nowrap; }
.hub-links [data-vs-icon], .hub-route [data-vs-icon] { display: inline-flex; flex-shrink: 0; }
.hub-links .vs-icon { width: 14px; height: 14px; }
.hub-route { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 9px; border: 1px solid #FFFFFF85; border-radius: 12px; background: #27285BD9; color: #FFF; font-size: 12px; font-weight: 500; }
.hub-route .vs-icon { width: 17px; height: 17px; }
.hub-route [data-vs-icon="map"] { color: #FFAE68; }
.maps-link { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-weight: 500; vertical-align: middle; }
.maps-link .vs-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.maps-link .vs-icon:first-child { color: #A4480F; }
.maps-link .vs-icon:last-child { width: 14px; height: 14px; flex-basis: 14px; }
.app-menu nav > a > [data-vs-icon="external"] { display: inline-flex; margin-left: auto; }
.app-menu nav > a > [data-vs-icon="external"] .vs-icon { width: 16px; height: 16px; }
@media (max-width: 350px) { .hub-links a { gap: 3px; padding-inline: 4px; font-size: 10px; }.hub-links .vs-icon { width: 12px; height: 12px; } }

/* Oranje navigatie en compacte ouderrollen bij het doorlopende teamschema. */
.bottom-nav .nav-tab { color: #444A60; border-color: transparent; }
.bottom-nav .nav-tab .vs-icon { color: #CB611C; }
.bottom-nav .nav-tab.active { background: #FFF0E2; color: #8E3E0D; border-color: #EF9C62; box-shadow: none; }
.bottom-nav .nav-tab.active .vs-icon { color: #C45810; }
.app-menu-button { color: #C65B15; background: #FFF5EB; border-color: #F1D6BF; }
.app-menu .vs-icon { color: #5A6078; }
.app-menu .menu-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 5px 0 9px; }
.menu-pages button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 70px; padding: 8px 3px; border: 1px solid #F1D6BF; border-radius: 12px; background: #FFF6ED; color: #64391C; font: 500 11px Poppins, sans-serif; }
.menu-pages button [data-vs-icon] { display: flex; }
.menu-pages button[aria-current="page"] { background: #FFE1C5; border-color: #DE7B34; }
.menu-pages button:hover, .menu-pages button:focus-visible { background: #FFE8D4; }
#page-training .sec-title, #page-spelregels .sec-title, #page-totaal .sec-title { border-bottom-color: #EC7A2D; }
#page-training .card-number { background: #FFF0E2; color: #C35B17; }
.team-day { margin-bottom: 14px; }
.team-day .card-header { padding: 11px 12px; gap: 9px; border-bottom: 1px solid #E6E8EF; }
.team-day .card-header .card-number { width: 32px; height: 32px; min-width: 32px; background: #FFF0E2; color: #CB611C; border-radius: 10px; }
.team-day .card-header .card-number .vs-icon { width: 20px; height: 20px; }
.team-day .card-title { font-size: 11px; font-weight: 500; color: #4E546C; }
.team-day-date { font-size: 14px; font-weight: 600; line-height: 1.4; color: #27285B; }
.team-day .location-box { margin: 0 0 7px; padding: 9px; border-radius: 10px; }
.team-day .location-label { font-size: 10px; font-weight: 500; }
.team-day .location-value { font-size: 12px; font-weight: 500; }
.team-day .location-big { font-size: 16px; }
.team-day .location-address { font-size: 10px; }
.team-day .location-label .vs-icon { width: 14px; height: 14px; color: #C65B15; }
.team-attendance { margin: 0 0 9px; padding: 0; background: transparent; }
.team-attendance summary { cursor: pointer; min-height: 36px; font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.team-attendance summary::after { content: '+'; margin-left: auto; color: var(--vs-orange-tekst); }
.team-attendance[open] summary::after { content: '−'; }
.team-attendance summary .vs-icon { color: #C65B15; width: 17px; height: 17px; }
.team-attendance .spelers-inline { padding-bottom: 8px; }
.team-help { margin: 12px 0 8px; padding: 0 9px 3px; border: 1px solid #E6DDD6; background: #FFFAF6; border-radius: 11px; }
.team-help-heading { display: flex; align-items: center; justify-content: space-between; min-height: 34px; color: #6B5140; font-size: 10px; font-weight: 500; }
body.has-nav .team-help .begeleiders-box, .team-help .drivers-box { margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0; }
.team-help .begeleider-row, .team-help .drivers-heading { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 3px 0; min-height: 44px; border-top: 1px solid #EEE4DC; }
.team-help .begeleider-row > div { display: flex; align-items: center; flex: 1; gap: 7px; min-width: 0; }
.team-help .begeleider-label, .team-help .drivers-title { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 11px; font-weight: 500; color: #3D425A; }
.team-help .drivers-title strong { font-weight: 500; }
.team-help .begeleider-value, .team-help .drivers-capacity { margin-left: auto; min-width: 0; font-size: 11px; font-weight: 400; line-height: 1.35; color: #4A5062; text-align: right; overflow-wrap: anywhere; }
.team-help .begeleider-label .vs-icon, .team-help .drivers-title .vs-icon { width: 19px; height: 19px; color: #C05A19; flex-shrink: 0; }
.team-help .btn-small { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; margin: 0 0 0 4px; border: 1px solid #E9B28C; border-radius: 10px; background: #FFE4CB; color: #98420D; font-size: 19px; }
.team-help .btn-small .vs-icon { width: 18px; height: 18px; }
.team-help .driver-row { padding: 5px 0 5px 25px; }
.team-help .driver-name { display: inline; font-size: 11px; font-weight: 500; }
.team-help .driver-places { display: inline; margin-left: 6px; font-size: 10px; }
.team-help .driver-departure { font-size: 10px; margin-top: 2px; }
.team-help.is-archived .begeleider-row > button { display: none; }
.team-archive { margin: 18px 0; border-top: 1px solid #D7DBE5; }
.team-archive > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 500; color: #46404A; }
.team-archive > summary::-webkit-details-marker { display: none; }
.team-archive > summary .vs-icon { width: 19px; height: 19px; color: #C15B19; }
.team-archive > summary > .vs-icon:last-child { margin-left: auto; width: 16px; height: 16px; }
.team-archive[open] > summary > .vs-icon:last-child { transform: rotate(90deg); }
.archive-count { font-size: 10px; padding: 2px 7px; border-radius: 8px; background: #E7E9EF; }
.team-archive-content .team-day { box-shadow: none; }
.team-empty { padding: 14px; font-size: 12px; }
.parent-form-context { margin: 0; padding: 0 18px 8px; font-size: 11px; color: #4E546C; }

/* VolleyStars v0.23: rechtermenu, datumprinter en mobiele PDF-acties. */
.app-menu { inset: max(64px, env(safe-area-inset-top)) 10px auto auto; width: min(224px, calc(100% - 32px)); max-height: calc(100dvh - 90px); padding: 0; border-radius: 16px; }
.app-menu-heading { margin: 0; padding: 12px; border-bottom: 1px solid #E8E4E0; }
.app-menu nav { display: block; padding-bottom: 5px; }
.app-menu nav > button, .app-menu nav > a { min-height: 46px; border-radius: 0; border-bottom: 1px solid #F0ECE8; padding: 11px 14px; }
.menu-level-switch { background: #F7F8FC; border-bottom: 1px solid #E3E6EF; }
.menu-level-switch summary { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; list-style: none; }
.menu-level-switch summary > span { flex: 1; color: #5A6078; font-size: 10px; font-weight: 500; }
.menu-level-switch summary strong { display: block; font-size: 12px; font-weight: 600; color: #27285B; }
.menu-level-switch img { object-fit: contain; }
.menu-level-switch summary > .vs-icon { width: 17px; height: 17px; }
.menu-level-switch[open] summary > .vs-icon { transform: rotate(90deg); }
.menu-level-switch a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px; font-size: 12px; color: #27285B; }
.menu-level-switch a[aria-current] { background: #E7EBF5; font-weight: 600; }
.menu-group { border-bottom: 1px solid #EEE9E4; }
.menu-group > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #27285B; cursor: pointer; list-style: none; }
.menu-group summary::-webkit-details-marker, .menu-level-switch summary::-webkit-details-marker { display: none; }
.menu-group > summary > span:last-child { margin-left: auto; }
.menu-group > summary > span { display: flex; }
.menu-group > summary > span:last-child .vs-icon { width: 16px; height: 16px; }
.menu-group[open] > summary > span:last-child { transform: rotate(90deg); }
.menu-subitems { padding: 0 8px 7px 37px; }
.menu-subitems > button, .menu-subitems > a { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 7px; width: 100%; border: 0; border-radius: 8px; background: #FFF; color: #3F4459; text-align: left; font: 500 12px Poppins, sans-serif; }
.menu-subitems > button[aria-current="page"], .menu-subitems > button[aria-current="true"], .menu-subitems > a[aria-current="true"], .menu-subitems > button:hover, .menu-subitems > a:hover { background: #EEF1F8; color: #27285B; font-weight: 600; }
.menu-subitems .vs-icon { width: 18px; height: 18px; }
.menu-subitems > a { text-decoration: none; }
.menu-subitems > a img { flex: 0 0 auto; border-radius: 5px; }
.team-day .card-header > div:nth-child(2) { flex: 1; min-width: 0; }
.day-print-button, .day-image-button { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #E9C9AE; border-radius: 10px; background: #FFF4E9; color: #BA5816; }
.day-print-button .vs-icon, .day-image-button .vs-icon { width: 20px; height: 20px; }
.day-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; }
#teamContent .team-attendance { margin: 0 0 2px; padding: 0; }
#teamContent .team-attendance > summary { min-height: 30px; margin: 0; padding: 2px 0; line-height: 1.3; }
#teamContent .team-attendance:not([open]) { margin-bottom: 0; }
.header-right .countdown { line-height: 1.45; font-size: 11px; }
.pdf-dialog { width: min(400px, calc(100% - 30px)); padding: 18px; border: 1px solid #E7D4C4; border-radius: 16px; background: #FFF; color: #27285B; }
.pdf-dialog::backdrop { background: #171C4666; }
.pdf-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pdf-dialog h2 { margin: 0; font-size: 18px; font-weight: 600; }
.pdf-dialog-header button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: #FFF0E2; color: #A94D12; font-size: 24px; }
.pdf-status { margin: 12px 0; font-size: 12px; line-height: 1.5; color: #4A5064; }
.pdf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pdf-actions a, .pdf-actions button { min-height: 44px; padding: 10px 12px; border: 1px solid #E4AC82; border-radius: 10px; background: #FFF0E2; color: #8A410F; font: 500 12px Poppins, sans-serif; }
.pdf-actions [hidden] { display: none; }
.pdf-keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pdf-keuzes button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 96px; padding: 12px 6px 10px; border: 1px solid #DCE0EA; border-radius: 12px; background: #FFFFFF; color: #27285B; font: 600 13px Poppins, sans-serif; }
.pdf-actions[hidden] { display: none; }
.pdf-keuzes button small { font-size: 11px; font-weight: 400; color: #4A5062; }
.pdf-keuzes button:active { background: #F2F4F9; }
.pdf-keuzes[hidden] { display: none; }
@media print { .pdf-dialog { display: none !important; } }
.has-nav .sticky-top { background: #111111; border-bottom-color: #343434; }
.has-nav .sticky-top::before { background: #FF8200; }
.has-nav .header-title { flex: 1; }
.has-nav .header-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.has-nav .header-title strong { color: #FFFFFF; font-weight: 600; }
.has-nav .header-title span, .has-nav .header-right .countdown { color: #FF9A3D; }
.has-nav .header-right .countdown { max-width: none; white-space: normal; }
.has-nav .app-menu-button { background: #202020; border-color: #555555; color: #FF9A3D; }
.has-nav .header-team-selector { margin: 0 0 0 auto; padding: 4px 0; flex: 0 0 80px; }
.has-nav .header-team-selector .team-select { width: 80px; min-height: 36px; padding: 5px 22px 5px 9px; border: 1px solid #AD601D; border-radius: 9px; background-color: #222222; color: #FFFFFF; font-size: 16px; font-weight: 500; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
.has-nav .header-team-selector option { color: #FFFFFF; background: #222222; }
.has-nav .team-day .card-title, .has-nav .location-label, .has-nav .spelers-title { color: #27285B; }
@media (max-width: 380px) {
    .has-nav .header { column-gap: 6px; }
    .has-nav .header-left { gap: 6px; }
    .has-nav .header-left .logo-level { height: 30px; }
    .has-nav .header-title strong { font-size: 12px; }
    .has-nav .header-title-row { gap: 4px; }
    .has-nav .header-team-selector { flex-basis: 72px; }
    .has-nav .header-team-selector .team-select { width: 72px; padding-left: 6px; }
}

/* VolleyStars v0.24: navy koppen, donkerder grijs, oranje wedstrijdregel en een strakker menu. */
body.has-nav { --muted: #454B63; --subtle: #4E546C; }
.has-nav .spelers-title, .has-nav .begeleiders-title, .has-nav .location-label, .has-nav .speelschema-table th,
.has-nav .spelregel-item .label, .has-nav .team-day .card-title, .has-nav .totaal-day, .has-nav .sec-title { color: #27285B; }
.has-nav .speelschema-table th { font-weight: 600; }

/* Header: logo groter en bovenaan, teamknop op de titelregel, los van het menu. */
.has-nav .header { align-items: start; }
.has-nav .header-left { align-items: flex-start; gap: 10px; }
.has-nav .header-left .logo-level { height: 48px; border-radius: 8px; }
.has-nav .header-title-row { gap: 10px; min-height: 40px; }
.has-nav .header-title strong { line-height: 1.25; }
.has-nav .header-team-selector { flex: 0 0 auto; margin: 0 12px 0 auto; padding: 0; }
.has-nav .header-team-selector .team-select { width: auto; min-width: 116px; height: 40px; min-height: 40px; padding: 0 28px 0 11px; border-color: #FF8200; font-weight: 600; background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; }
.has-nav .app-menu-button { align-self: start; }

/* Volgende wedstrijd als oranje regel met zwarte tekst en een balletje. */
.has-nav .header-right { grid-column: 1 / -1; padding: 0; margin: 6px calc(-1 * max(14px, env(safe-area-inset-right))) -7px calc(-1 * max(14px, env(safe-area-inset-left))); }
.has-nav .header-right:has(.countdown:empty) { display: none; }
.has-nav .header-right .countdown { display: flex; align-items: center; gap: 8px; padding: 7px max(14px, env(safe-area-inset-right)) 7px max(14px, env(safe-area-inset-left)); background: #FF8200; color: #111111; font-size: 12px; font-weight: 600; line-height: 1.35; }
.has-nav .header-right .countdown:empty { display: none; }
.has-nav .header-right .countdown::before { content: '\1F3D0'; flex: 0 0 auto; font-size: 15px; line-height: 1; }

/* Datumknoppen over de volle breedte, herkenbaar als knop. */
.has-nav .weekend-selector { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; margin: 0; padding: 12px 0 4px; }
.has-nav .weekend-btn { flex: 1 1 0; min-width: 58px; padding: 9px 4px; border: 1.5px solid var(--vs-orange); border-radius: 10px; background: #FFF; color: #27285B; font-size: 12px; font-weight: 600; text-align: center; box-shadow: 0 1px 2px #27285B14; }
.has-nav .weekend-btn.past { opacity: .55; border-color: #F1B590; }
.has-nav .weekend-btn.current { color: #B34A0E; }
.has-nav .weekend-btn.active { background: #27285B; border-color: var(--vs-orange); color: #FFFFFF; opacity: 1; }

/* Thuisteam eerst, eigen team in oranje, streepje ertussen. */
.match-pair-inner { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.match-schedule .match-pair { width: 100%; }
.match-schedule .match-own, .totaal-teams .match-own { min-width: 0; font-weight: 600; color: #C4500F; }
.match-schedule .match-opponent, .totaal-teams .match-opponent { width: auto; font-weight: 500; color: #27285B; }
.match-dash { color: #7A7F95; font-weight: 400; }
.uit-badge .vs-icon, .thuis-badge .vs-icon { width: 16px; height: 16px; }

/* Totaalschema: clublogo, één regel per wedstrijd, veld in een eigen kolom. */
.has-nav .totaal-row { grid-template-columns: 40px 26px minmax(0, 1fr) auto auto; gap: 8px; padding: 8px 10px; }
.has-nav .totaal-row .club-logo { width: 26px; height: 26px; flex-basis: 26px; border: 1px solid #E8EAF0; }
.has-nav .totaal-time { font-size: 12px; }
.has-nav .totaal-teams .match-pair-inner { display: flex; font-size: 12px; }
.has-nav .totaal-teams .match-own { white-space: nowrap; }
.has-nav .totaal-teams .match-opponent { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.has-nav .totaal-veld { min-width: 22px; font-size: 11px; font-weight: 600; color: #27285B; text-align: center; font-variant-numeric: tabular-nums; }
.has-nav .totaal-result .thuis-badge, .has-nav .totaal-result .uit-badge { display: inline-block; min-width: 22px; padding: 3px 5px; text-align: center; }
.has-nav .totaal-day { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.has-nav .totaal-day-zaal { float: none; display: inline-flex; align-items: center; gap: 3px; margin: 0 0 0 auto; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #3F455C; }
.pin-icon { display: inline-block; font-size: 13px; line-height: 1; }
.maps-link .pin-icon { font-size: 14px; }

/* Ouderhulp krijgt hetzelfde kopje als Spelers. */
.has-nav .team-help-heading.spelers-title { margin: 0; min-height: 36px; font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: #27285B; }
.has-nav .team-help-heading > span { display: flex; align-items: center; gap: 6px; }
.has-nav .team-help-heading > span .vs-icon { width: 17px; height: 17px; color: #C65B15; }

.pdf-dialog { padding: 14px; }
.pdf-dialog h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pdf-dialog h2 .vs-icon { width: 20px; height: 20px; color: #C45810; }
.pdf-status { margin: 8px 0 12px; font-size: 12px; }
.pdf-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
.pdf-actions a, .pdf-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 7px 4px; font-size: 11px; font-weight: 500; text-align: center; }
.pdf-actions .vs-icon { width: 20px; height: 20px; color: #C45810; }

/* Zijmenu: logo en titel zijn de weg naar de startpagina; submenu compacter. */
.app-menu-home { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 2px 6px 2px 2px; border-radius: 10px; color: inherit; }
.app-menu-home:hover, .app-menu-home:focus-visible { background: #F2F4F9; }
.menu-subitems { padding: 0 8px 4px 37px; }
.menu-subitems > button, .menu-subitems > a { min-height: 34px; padding: 5px 7px; }
.app-menu nav > button, .app-menu nav > a { min-height: 44px; }

@media (max-width: 380px) {
    .has-nav .header-left { gap: 7px; }
    .has-nav .header-left .logo-level { height: 40px; }
    .has-nav .header-title-row { gap: 6px; }
    .has-nav .header-team-selector { flex-basis: auto; margin-right: 8px; }
    .has-nav .header-team-selector .team-select { width: auto; min-width: 104px; padding: 0 24px 0 8px; }
}

/* Levelkaart: de hele kaart (behalve de teamknopjes) opent het level; een rustig
   chevron zonder vlak volstaat als hint. */
.level-arrow { width: 26px; height: 30px; margin-top: 0; border-radius: 0; background: transparent; color: #27285B; opacity: .8; }
.level-arrow svg { width: 22px; height: 22px; }
body.met-video .level-arrow { background: transparent; color: #27285B; }
@media (max-width: 350px) { body.met-video .level-arrow { width: 22px; height: 26px; } }

/* Header: ondertitel direct onder de titel, teamknop ernaast over beide regels;
   de oranje wedstrijdregel is een smalle strook. */
.has-nav .header-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: start; }
.has-nav .header-title-row { display: contents; }
.has-nav .header-title strong { grid-column: 1; grid-row: 1; align-self: end; line-height: 1.2; }
.has-nav .header-title > span { grid-column: 1; grid-row: 2; margin-top: 1px; line-height: 1.3; }
.has-nav .header-team-selector { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0 12px 0 0; }
.has-nav .header-title strong:only-child { align-self: start; }
.has-nav .header-right { margin-top: 4px; }
.has-nav .header-right .countdown { padding-top: 3px; padding-bottom: 3px; font-size: 11px; line-height: 1.3; }
.has-nav .header-right .countdown::before { font-size: 12px; }
@media (max-width: 380px) { .has-nav .header-team-selector { margin-right: 8px; } }

/* Afdrukken: geen geforceerde paginawissels meer (die lieten halflege pagina's
   achter) en geen ruimte onder het document die een lege laatste pagina geeft. */
@media print {
    body.has-print-document { padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; }
    #switchPrintDocument { margin: 0; padding: 0; }
    #switchPrintDocument > :last-child { margin-bottom: 0; padding-bottom: 0; }
    #switchPrintDocument h1, #switchPrintDocument h2, #switchPrintDocument h3 { break-after: avoid; }
    .print-section { break-inside: avoid; }
    .print-section:has(.print-match-table) { break-inside: auto; }
    .print-doc-footer { break-inside: avoid; break-before: avoid; }
    .print-rule-list li, .print-facts tr { break-inside: avoid; }
}

/* Ruimte voor de ondertitel naast de teamknop op 390 px. */
.has-nav .header { column-gap: 8px; }
.has-nav .header-left { gap: 8px; }
.has-nav .header-left .logo-level { height: 44px; }
.has-nav .header-team-selector { margin-right: 8px; }
.has-nav .header-team-selector .team-select { min-width: 0; padding: 0 26px 0 10px; background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; }
.has-nav .header-title > span { font-size: 12px; }
@media (max-width: 380px) { .has-nav .header-title > span { font-size: 11px; } }
@media (max-width: 380px) {
    .has-nav .header-team-selector .team-select { padding: 0 22px 0 8px; background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; }
    .has-nav .header-title > span { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Startpagina: speeldagen als lichte ondertekst, niet als knoppen. */
body.met-video .level-body .level-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.3; color: #4A4F66; }
body.met-video .level-dates .next { color: #963008; font-weight: 600; }
body.met-video .level-dates .past { color: #5F657B; font-weight: 400; text-decoration: line-through; }
body.met-video .level-dates .sep { color: #9A9FB2; font-weight: 400; }

/* Header: lager. Logo 36 px, teamknop 32 px in de titelfont, smalle strook. */
.has-nav .header { padding-top: 5px; padding-bottom: 5px; column-gap: 8px; }
.has-nav .header-left { gap: 8px; }
.has-nav .header-left .logo-level { height: 36px; border-radius: 6px; }
.has-nav .header-title { column-gap: 8px; }
.has-nav .header-title-row { min-height: 0; }
.has-nav .header-title strong { font-size: 14px; line-height: 1.2; }
.has-nav .header-title > span { font-size: 11px; line-height: 1.25; margin-top: 2px; }
.has-nav .header-team-selector .team-select { height: 32px; min-height: 32px; padding: 0 24px 0 9px; border-radius: 8px; font: 600 16px/1 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
/* 16 px blijft de ondergrens: onder die maat zoomt iOS Safari in bij het kiezen van een team. */
.has-nav .app-menu-button { width: 34px; height: 34px; border-radius: 9px; }
.has-nav .app-menu-button .vs-icon { width: 20px; height: 20px; }
.has-nav .header-right { margin-top: 3px; margin-bottom: -5px; }
.has-nav .header-right .countdown { padding-top: 2px; padding-bottom: 2px; font-size: 11px; line-height: 1.25; }
.has-nav .header-right .countdown::before { font-size: 11px; }
.has-nav .sticky-top::before { height: 2px; }
@media (max-width: 380px) {
    .has-nav .header-left .logo-level { height: 32px; }
    .has-nav .header-title strong { font-size: 13px; }
    .has-nav .header-team-selector .team-select { padding: 0 20px 0 7px; background-position: calc(100% - 11px) 50%, calc(100% - 6px) 50%; }
}
/* De oranje wedstrijdregel: echt smal, klein lettertype. */
.has-nav .header-right { margin-top: 2px; }
.has-nav .header-right .countdown { gap: 5px; padding-top: 1px; padding-bottom: 1px; font-size: 10px; font-weight: 500; line-height: 1.3; }
.has-nav .header-right .countdown::before { font-size: 10px; }

/* VolleyStars v0.25: alleen het gekozen team oranje, totaalschema op twee regels,
   rustiger teamkaart met turquoise aanmeldregels, spelers zichtbaar voor ouders. */
.match-schedule .match-own, .totaal-teams .match-own { color: #27285B; font-weight: 500; }
.match-schedule .match-own.is-mine, .totaal-teams .match-own.is-mine { color: #C4500F; font-weight: 600; }
.match-schedule .match-opponent { font-weight: 500; }
.match-count { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #C45810; }
.match-count .vs-icon { width: 15px; height: 15px; }
.match-route { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.match-route .pin-icon { font-size: 13px; }
.match-schedule th:nth-child(3), .match-schedule th:nth-child(4), .match-schedule td:nth-child(3), .match-schedule td:nth-child(4) { padding-left: 2px; padding-right: 2px; }

/* Totaalschema: thuisteam boven, uitteam eronder, zaal met route, veld, uitslag. */
.has-nav .totaal-row { grid-template-columns: 40px minmax(0, 1fr) auto 24px 28px; gap: 4px 8px; padding: 6px 10px; }
.has-nav .totaal-row.thuis { border-left-color: var(--vs-orange); }
.has-nav .totaal-row.uit { border-left-color: #C9CDD9; }
.has-nav .totaal-teams { display: grid; gap: 3px; }
.totaal-team { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 22px; }
.has-nav .totaal-row .totaal-team .club-logo { width: 22px; height: 22px; flex-basis: 22px; border: 1px solid #E8EAF0; }
.totaal-team .name { min-width: 0; font-size: 12px; line-height: 1.25; color: #27285B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-nav .totaal-hall { min-width: 0; }
.hall-link { display: inline-flex; align-items: center; gap: 1px; max-width: 92px; font-size: 11px; font-weight: 500; line-height: 1.2; color: #8A410F; white-space: nowrap; }
.hall-link > span:first-child, .hall-link .pin-icon { flex-shrink: 0; }
.hall-link .pin-icon { font-size: 12px; }
.has-nav .totaal-veld { min-width: 24px; }
.has-nav .totaal-result { min-width: 28px; text-align: center; }
.totaal-nog { font-size: 11px; color: #8B90A6; }
.has-nav .totaal-day { display: block; }

/* Overzicht: spelers direct achter het team, als ze bekend zijn. */
.overview-header { align-items: flex-start; }
.overview-team-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; flex: 1; min-width: 0; }
.overview-team-players { font-size: 11px; font-weight: 500; line-height: 1.4; color: #3F4459; }
.overview-team-players .speler-name.afwezig { color: #6F7488; }
.team-day-players { margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.4; color: #3F4459; }

/* Teamkaart: minder oranje. Thuiswedstrijden houden alleen de oranje streep. */
#teamContent .wedstrijd.thuis { background: #FFFDFB; }
.team-day .card-header .card-number { background: #EEF0F5; color: #27285B; }
.day-print-button, .day-image-button { border-color: #D8DCE6; background: #FFFFFF; color: #27285B; }
.team-help { border-color: #E3E6EE; background: #FFFFFF; }
.team-help .begeleider-row, .team-help .drivers-heading { margin: 4px 0; padding: 3px 6px 3px 10px; min-height: 42px; border: 0; border-radius: 9px; background: #0B7F76; color: #FFFFFF; }
.team-help .begeleider-label, .team-help .drivers-title, .team-help .begeleider-value, .team-help .drivers-capacity, .team-help .drivers-title strong { color: #FFFFFF; }
.team-help .begeleider-value.empty { color: #EDFBF9; }   /* 4,59:1 op #0B7F76; #D6F2EF haalde maar 4,13:1 */
.team-help .begeleider-label .vs-icon, .team-help .drivers-title .vs-icon { color: #FFFFFF; }
.team-help .btn-small, .team-help .btn-small.btn-add, .team-help .driver-signup, .team-help .btn-small.btn-remove { border: 1px solid #FFFFFF; background: #FFFFFF; color: #0B7F76; }
.team-help .driver-row { padding-left: 12px; }
.team-help .drivers-list { margin: 0 0 4px; }
.team-help .drivers-empty, .team-help .driver-status { padding: 0 0 6px 12px; }

/* Header en datumknoppen. */
/* v0.29: de balk ongeveer 1,3 keer zo hoog (13 → 17 px), tekst blijft klein. */
.has-nav .header-right .countdown { padding-top: 2px; padding-bottom: 2px; line-height: 1.3; }
.has-nav .weekend-btn { padding: 6px 4px; }

/* Startpagina: "Level 3 · 2 vs 2" in één font. */
body.met-video .level-tag { display: inline; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.25; color: #27285B; white-space: nowrap; }
@media (max-width: 350px) { body.met-video .level-tag { font-size: 11px; } }

/* Wegklikbare hint bovenaan: zet VolleyStars op je beginscherm. (Dit blok raakte
   in v0.24 per ongeluk mee verwijderd met de datumknoppen van de startpagina.) */
.install-hint { position: relative; z-index: 91; display: flex; align-items: center; gap: 8px; padding: 8px max(10px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); padding-top: max(8px, env(safe-area-inset-top)); background: #FFF1E4; color: #27285B; border-bottom: 1px solid #F1D6BF; font-size: 12px; line-height: 1.4; }
.install-hint[hidden] { display: none; }
.install-hint-body { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.install-hint-logo { flex: 0 0 28px; display: grid; place-items: center; }
.install-hint-logo img { width: 28px; height: 28px; object-fit: contain; }
.install-hint p { margin: 0; min-width: 0; }
.install-hint strong { font-weight: 600; }
.install-hint-steps { color: #3F4459; }
.install-key { display: inline-grid; place-items: center; width: 20px; height: 18px; margin: 0 1px; vertical-align: -4px; border: 1px solid #D9C4B2; border-radius: 5px; background: #FFF; color: #C45810; }
.install-key .vs-icon { width: 14px; height: 14px; }
.install-hint-action { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 1px solid #CE6520; border-radius: 9px; background: #FF7A00; color: #242550; font: 600 12px Poppins, sans-serif; }
.install-hint-close { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #8A410F; font-size: 24px; line-height: 1; }
.install-hint-close:hover, .install-hint-close:focus-visible { background: #FFE1C5; }
.install-card-action { display: inline-flex; margin-bottom: 8px; }
.install-card-action .vs-icon { width: 18px; height: 18px; }
[data-install-card] p { margin: 0 0 6px; }
[data-install-card] .install-key { vertical-align: -5px; }
body.met-video .install-hint { border-bottom-color: #E8C9AE; }
@media (min-width: 760px) { .install-hint { font-size: 13px; } .install-hint-body { max-width: 900px; margin: 0 auto; } }
@media print { .install-hint { display: none !important; } }

/* Installatiemelding: zichtbare toetsenbordfocus, menuteksten die niet afbreken, en op
   heel smalle telefoons geen logo zodat de tekst ruimte houdt. */
.install-hint button:focus-visible { outline: 3px solid #27285B; outline-offset: 2px; }
.install-step { white-space: nowrap; }
@media (max-width: 359px) { .install-hint-logo { display: none; } .install-hint { gap: 6px; } }

/* Installatiemelding v0.26: één korte regel "Als app: …", wegklikbaar. */
.install-hint { gap: 6px; padding: 3px 4px 3px max(12px, env(safe-area-inset-left)); padding-top: max(3px, env(safe-area-inset-top)); min-height: 30px; font-size: 11px; line-height: 1.3; }
.install-hint-body { gap: 0; }
/* De regel mag alleen tussen stappen afbreken (.install-step blijft heel); een te lange
   tekst (in-app-browsers) loopt dan door op een tweede regel in plaats van afgekapt te worden. */
.install-hint p { white-space: normal; }
.install-key { width: 18px; height: 16px; margin: 0; vertical-align: -3px; }
.install-key .vs-icon { width: 13px; height: 13px; }
.install-hint-action { min-height: 28px; padding: 3px 10px; font-size: 11px; border-radius: 7px; }
.install-hint-close { flex: 0 0 30px; width: 30px; height: 30px; font-size: 20px; }

/* Teamkaart boven de speeldagen op het Team-tabblad. */
.team-card { padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid var(--level); }
.team-card-head { display: flex; align-items: center; gap: 10px; }
.team-card-badge { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #FFF0E2; color: #C35B17; }
.team-card-badge .vs-icon { width: 22px; height: 22px; }
.team-card-text { min-width: 0; }
.team-card-title { font-size: 17px; font-weight: 600; line-height: 1.2; color: #27285B; }
.team-card-meta { margin-top: 2px; font-size: 11px; font-weight: 500; color: #3F455C; }
.team-card-players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.team-card-player { padding: 4px 10px; border-radius: 999px; background: #27285B; color: #FFFFFF; font-size: 12px; font-weight: 500; }
.team-card-empty { margin: 8px 0 0; font-size: 11px; color: #4A5062; }
.team-day-poule { margin-left: 6px; font-size: 11px; font-weight: 500; color: #4A5062; }

/* Totaal: filter en sortering. Vier compacte blokjes (Tijd–Team, Zaal–Veld); de native
   select ligt er onzichtbaar op 16 px overheen, zodat iOS niet inzoomt bij openen. */
.totaal-controls { margin: 4px 0 8px; }
/* Zes filters op twee regels van drie: bovenaan zaal-veld-tijd, eronder level-poule-team.
   Smaller dan de vier van hiervoor, dus de sleutel staat boven de waarde in plaats van ernaast. */
.totaal-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
/* Alleen /totaal/ heeft er zes; het totaalschema van een level houdt zijn vier op 2x2. */
#alleControls .totaal-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.totaal-filter { position: relative; display: grid; align-content: center; gap: 0; min-width: 0; min-height: 34px; padding: 3px 16px 3px 8px; border: 1px solid #C9CDD9; border-radius: 8px; background-color: #FFF; color: #27285B; font: 500 12px Poppins, sans-serif; background-image: linear-gradient(45deg, transparent 50%, #4A5062 50%), linear-gradient(135deg, #4A5062 50%, transparent 50%); background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.totaal-filter-key { font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .4px; text-transform: uppercase; color: #4A5062; }
/* Uitgeschakeld, maar leesbaar: 50% dekking zakt door de contrasteis heen. */
.totaal-filter.is-leeg { border-style: dashed; background-color: #F7F8FB; }
.totaal-filter.is-leeg .totaal-filter-value { color: #6B7080; }
.totaal-filter.is-leeg select { cursor: default; }
.totaal-filter-value { display: flex; min-width: 0; gap: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.25; font-weight: 600; }
/* Bij een teamnaam knipt de clubnaam en blijft de teamcode heel: "L4-1" is nu juist het verschil. */
.totaal-filter-knip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.totaal-filter-heel { flex: 0 0 auto; }
.totaal-filter:not(.is-active) .totaal-filter-value { color: #6B7080; font-weight: 500; }
.totaal-filter.is-active { border-color: #EC6724; background-color: #FFF6EE; }
.totaal-filter.is-active .totaal-filter-key { color: #B84A0E; }
.totaal-filter select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.totaal-filter:focus-within { outline: 2px solid #27285B; outline-offset: 1px; }
.totaal-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; font-size: 10px; font-weight: 500; color: #4A5062; }
.totaal-sort-btn { min-height: 24px; padding: 2px 8px; border: 1px solid #DCE0EA; border-radius: 999px; background: #FFF; color: #27285B; font: 500 10px Poppins, sans-serif; }
.totaal-sort-btn[aria-pressed="true"] { background: #27285B; border-color: #27285B; color: #FFF; }
.totaal-reset { margin-left: auto; min-height: 24px; padding: 2px 8px; border: 1px solid #E9C9AE; border-radius: 999px; background: #FFF4E9; color: #8A410F; font: 500 10px Poppins, sans-serif; }
.link-btn { padding: 0; border: 0; background: none; color: #C4500F; font: inherit; font-weight: 600; text-decoration: underline; }

/* Beheer: blokken met vaste teams. */
.blok-intro { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #3F455C; }
.blok-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border: 1px solid #DCE0EA; border-left: 3px solid #12AA9E; border-radius: 10px; background: #FFF; }
.blok-item.is-active { border-color: #EC6724; border-left-color: #EC6724; background: #FFF8F2; }
.blok-item-text { min-width: 0; }
.blok-item-name { font-size: 13px; font-weight: 600; color: #27285B; }
.blok-item-meta { font-size: 11px; color: #4A5062; }
.blok-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.blok-edit { min-height: 34px; padding: 5px 10px; border: 1px solid #27285B; border-radius: 9px; background: #FFF; color: #27285B; font-size: 12px; }
.blok-delete { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 9px; }
.blok-new { width: 100%; margin-top: 8px; }
.blok-new:disabled { opacity: .55; }
.blok-close { margin-left: auto; align-self: center; min-height: 34px; padding: 5px 10px; border: 1px solid #27285B; border-radius: 9px; background: #FFF; color: #27285B; font-size: 12px; white-space: nowrap; }
.blok-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #3F455C; }
.blok-note.ok { color: #0B7F76; }
.blok-team { margin-bottom: 8px; padding: 9px 10px; border: 1px solid #DCE0EA; border-radius: 11px; background: #FFF; }
.blok-team.is-open { border-color: #EC6724; box-shadow: 0 0 0 2px #FFE1C5; }
.blok-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.blok-team-name { font-size: 14px; font-weight: 600; color: #27285B; }
.blok-team-count { margin-left: 7px; font-size: 11px; font-weight: 500; color: #4A5062; }
.blok-add { min-height: 34px; padding: 5px 11px; border: 1px solid #CE6520; border-radius: 9px; background: #FF7A00; color: #242550; font: 600 12px Poppins, sans-serif; }
.blok-add.is-open { background: #27285B; border-color: #27285B; color: #FFF; }
.blok-add:disabled { opacity: .5; }
.blok-team-players { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.blok-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #ECEDF4; color: #27285B; font-size: 12px; font-weight: 500; }
.blok-chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #8A3C00; font-size: 16px; line-height: 1; }
.blok-chip button:hover, .blok-chip button:focus-visible { background: #FFE1C5; }
.blok-empty { font-size: 11px; color: #70758A; }
.blok-picker { margin-top: 9px; padding: 9px 10px; border-radius: 9px; background: #FFF6ED; }
.blok-picker-title { margin-bottom: 6px; font-size: 11px; font-weight: 600; color: #8A410F; }
.blok-picker-list { display: flex; flex-wrap: wrap; gap: 5px; }
.blok-pick { min-height: 34px; padding: 5px 11px; border: 1px solid #E9C9AE; border-radius: 9px; background: #FFF; color: #27285B; font: 500 12px Poppins, sans-serif; }
.blok-pick-new { border-style: dashed; color: #8A410F; }

/* Iconenpakket spelregels & afspraken: webp-illustraties (5:4) in plaats van emoji. */
.regel-beeld, .info-beeld { display: block; object-fit: contain; flex: 0 0 auto; }
.info-item { align-items: center; gap: 10px; }
.info-item .info-beeld { width: 32px; height: 26px; flex-basis: 32px; }
.spelregel-item .regel-beeld { width: 44px; height: 35px; margin: 0 auto 5px; }
.afspraak-card { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
.afspraak-card .ic.beeld { width: 44px; height: 36px; flex: 0 0 44px; border-radius: 0; background: transparent; margin-top: -2px; }
.afspraak-card .ic.beeld .regel-beeld { width: 44px; height: 35px; }

/* Begeleider en teller met dezelfde illustraties als op Spelregels, iets kleiner. */
.overview-begeleider { display: inline-flex; align-items: center; gap: 5px; }
.overview-begeleider .regel-beeld { width: 20px; height: 16px; }
.team-help .begeleider-label .regel-beeld { width: 24px; height: 19px; flex-shrink: 0; }
.blok-hint { margin: 2px 0 8px; }

/* Menu-iconen: illustraties in de onderbalk en het zijmenu. */
.nav-icon .nav-beeld { display: block; width: 30px; height: 24px; object-fit: contain; transition: transform .15s ease; }
.bottom-nav .nav-tab:not(.active) .nav-beeld { filter: saturate(.6); opacity: .8; }
.bottom-nav .nav-tab.active .nav-beeld { transform: scale(1.08); }
.menu-beeld { display: flex; flex: 0 0 24px; width: 24px; height: 19px; }
.menu-beeld img { width: 24px; height: 19px; object-fit: contain; }

/* Trek omlaag om te vernieuwen (aanraakschermen); de melding hangt boven de header. */
.pull-refresh-indicator { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 9998; padding: 7px 13px; white-space: nowrap; border: 1px solid #E9C9AE; border-radius: 999px; background: #FFFFFF; color: #27285B; font: 600 12px Poppins, sans-serif; box-shadow: 0 6px 18px rgba(23, 28, 70, .18); opacity: 0; pointer-events: none; transform: translate(-50%, -60px); transition: transform .16s ease, opacity .16s ease; }
.pull-refresh-indicator.visible { opacity: 1; transform: translate(-50%, 0); }
.pull-refresh-indicator.is-ready { background: #27285B; border-color: rgba(255, 255, 255, .75); color: #FFFFFF; }

/* v0.30: tab-illustraties ook bovenaan de pagina's; compactere teamdagkaart. */
.sec-lead { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sec-beeld { width: 30px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.info-toggle .sec-beeld { width: 26px; height: 21px; }
.team-card-badge.beeld .regel-beeld { width: 32px; height: 26px; }
.team-day .location-box { padding: 8px 9px 5px; }
.team-day .maps-link { min-height: 26px; }
#teamContent .wedstrijd { padding: 2px 5px; min-height: 42px; }
#teamContent .wed-tegenstander { min-height: 34px; }

/* v0.31: printvenster met de eigen iconen, neutraal en compact. */
.pdf-dialog { padding: 14px 14px 12px; border-color: #DCE0EA; }
.pdf-dialog h2 .vs-icon { color: #27285B; }
.pdf-dialog-header button { width: 32px; height: 32px; border-radius: 8px; background: #F2F4F9; color: #27285B; font-size: 20px; }
.pdf-status { margin: 6px 0 10px; font-size: 12px; line-height: 1.4; color: #4A5062; }
.pdf-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pdf-actions a, .pdf-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; padding: 8px 4px; border: 1px solid #DCE0EA; border-radius: 12px; background: #FFFFFF; color: #27285B; font: 500 11px Poppins, sans-serif; text-decoration: none; }
.pdf-actions a:active, .pdf-actions button:active { background: #F2F4F9; }
.pdf-actions .pdf-beeld { width: 30px; height: 30px; object-fit: contain; }
.pdf-actions .vs-icon { width: 24px; height: 24px; color: #27285B; }
.pdf-actions [hidden] { display: none; }
@media (max-width: 340px) { .pdf-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdf-dialog button:focus-visible, .pdf-dialog a:focus-visible { outline: 2px solid #27285B; outline-offset: 2px; }

/* v0.31: levellogo is een knop naar het overzicht. */
.header-home { display: flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.header-home:focus-visible { outline: 2px solid #FF9A3D; outline-offset: 2px; }

/* v0.31: startpagina: ruimere, vergevingsgezinde teamknopjes; de hele kaart is klikbaar. */
.level-card { cursor: pointer; }
.team-chips { gap: 8px 9px; padding-top: 7px; }
.team-chip { min-height: 34px; padding: 4px 12px; }

/* v0.32: deelbalk onder het overzicht, in de tegelstijl van het printvenster. */

/* v0.33: levelbreed totaaloverzicht (/totaal/) en de ingang op de startpagina. */
body.no-nav { padding-bottom: 0; }
.no-nav .wrap { padding-bottom: 28px; }
.header-back { display: grid; place-items: center; text-decoration: none; }
.totaal-level { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #EEF0F6; color: #27285B; font-size: 10px; font-weight: 600; line-height: 1.4; vertical-align: middle; }
.alle-levels .totaal-row[role="button"] { cursor: pointer; }
.alle-levels .totaal-row:focus-visible { outline: 2px solid #27285B; outline-offset: 1px; }
.alle-levels .totaal-sort > span { margin-right: auto; }
.copy-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 12px 22px; border-radius: 999px; background: #128C7E; color: #FFF; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .3s; }
.copy-toast.show { opacity: 1; }
.hub-tool { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 10px 12px; border: 1.5px solid #27285B; border-radius: var(--r-xl); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); }
.hub-tool img { width: 40px; height: 32px; object-fit: contain; }
.hub-tool strong { display: block; font-size: 14px; font-weight: 700; color: #27285B; letter-spacing: -0.01em; }
.hub-tool small { display: block; font-size: 11px; color: #4A5062; }
.hub-tool .level-arrow { color: #27285B; }
.hub-tool:active { transform: scale(0.99); }

/* v0.34: details- en beheerdialoog op /totaal/; tijdveld in de level-app. */
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alle-levels .header { gap: 8px; }
.alle-levels .header-left { flex: 1 1 auto; min-width: 0; }
.alle-levels .header-title { min-width: 0; }
.alle-levels .header-title > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alle-levels .header-right { display: none; }
.header-admin.active { background: #FFF0E2; color: #C45810; }
.alle-dialog { width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #DCE0EA; border-radius: 18px; background: #FFF; color: #27285B; overflow: auto; }
.alle-dialog::backdrop { background: #171C4666; }
.alle-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid #EEF0F6; }
.alle-dialog-head h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.alle-dialog-head p { margin: 3px 0 0; font-size: 11px; color: #4A5062; }
#alleDialogBody { padding: 10px 14px 14px; }
.alle-info { display: grid; gap: 5px; font-size: 12px; color: #27285B; }
.alle-info > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; }
.alle-info-label { font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #4A5062; padding-top: 2px; }
.alle-info a { color: #C4500F; }
.alle-section-title { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #27285B; }
.alle-rol { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; border-bottom: 1px solid #EEF0F6; font-size: 12px; }
.alle-rol-label { font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #4A5062; }
.alle-rol-value.empty { color: #6B7080; }
.alle-rol .btn-small { min-width: 34px; min-height: 30px; }
.alle-kiezer { margin-top: 10px; padding: 10px; border: 1px solid #E9C9AE; border-radius: 12px; background: #FFF8F2; }
.alle-kiezer .form-options { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.alle-kiezer .form-option { padding: 7px 12px; border: 1px solid #C9CDD9; border-radius: 999px; background: #FFF; color: #27285B; font: 600 12px Poppins, sans-serif; }
.alle-beheer { margin-top: 12px; padding: 10px; border: 1px solid #DCE0EA; border-radius: 12px; background: #F8F9FC; }
.alle-beheer .form-row { margin-bottom: 8px; }
.alle-score { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.alle-score .edit-input { width: 100%; }
.alle-beheer .form-actions { display: flex; gap: 8px; margin-top: 4px; }
.alle-beheer .form-actions button { flex: 1; }
.alle-hint { margin: 8px 0 0; font-size: 10px; color: #6B7080; }
.admin-mode .totaal-row.is-edited { border-left-color: #12AA9E; }
.totaal-row.is-edited .totaal-veld { color: #0B7F76; }

/* v0.35: smaller side menu without orange marking; print buttons and Beheer carry the illustrations. */
.menu-print { flex: 0 0 18px; width: 18px; height: 18px; object-fit: contain; }
.btn-beeld { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.day-print-button .btn-beeld, .day-image-button .btn-beeld { width: 20px; height: 20px; }
.day-print-button, .day-image-button { border-color: #D4D8E4; background: #F5F6FA; }
.app-menu nav > .menu-levels { border-top: 1px solid #E1E4ED; margin-top: 5px; }
.app-menu nav > .menu-levels .menu-beeld img { width: 22px; height: 22px; }
.header-admin img { width: 24px; height: 19px; object-fit: contain; }
.header-admin.active { background: #EEF1F8; color: #27285B; border-color: #27285B; }

/* v0.36: deelknoppen als iconen op de datumregel van het Overzicht (geen aparte balk). */
.sec-title-share { gap: 8px; }
.sec-title-share > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-icons { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.share-icons button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #DCE0EA; border-radius: 10px; background: #FFFFFF; color: #27285B; }
.share-icons button:active { background: #F2F4F9; }
.share-icons img { width: 26px; height: 26px; object-fit: contain; }
.share-icons .vs-icon { width: 24px; height: 24px; color: #1FA855; }
@media print { .share-icons { display: none; } }
/* Met een hint ernaast (Totaal) krimpt eerst de hint, niet de titel. */
.sec-title-share > span:first-child { flex: 1 0 auto; max-width: 62%; }
.sec-title-share > .hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* De levelnaam op Spelregels krijgt op een smal scherm een beletselteken in plaats van een afgesneden letter. */
.sec-title-share .sec-lead > [data-level-naam] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 4px; padding: 7px 8px 7px 12px; border: 1px solid #DCE0EA; border-radius: 12px; background: #FFFFFF; font-size: 12px; font-weight: 600; color: #27285B; }
.share-row-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row-label .vs-icon { width: 18px; height: 18px; flex: 0 0 auto; }
@media print { .share-row { display: none; } }
@media (max-width: 380px) {
    .sec-title-share > span:first-child { font-size: 11px; letter-spacing: .2px; }
    .share-icons { gap: 3px; }
    .sec-title-share .share-icons button { width: 32px; height: 32px; border-radius: 9px; }
    .sec-title-share .share-icons img { width: 23px; height: 23px; }
    .sec-title-share .share-icons .vs-icon { width: 21px; height: 21px; }
}

/* v0.37: startpagina — doorzichtiger kaarten, kleiner logo, badges over de twee tekstregels,
   korte lijn in de levelkleur boven de teamknopjes. De datums zijn donkerder om leesbaar
   te blijven op de doorzichtiger kaart. */
.hub-head { padding: 10px 0 12px; }
.hub-head img { width: 146px; }
.hub-head p { margin-top: 8px; }
body.met-video .level-card { background: rgba(255, 255, 255, .46); -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1); }
body.met-video .level-main { grid-template-columns: 48px minmax(0, 1fr) 26px; gap: 9px; align-items: start; }
body.met-video .level-main > img { width: 48px; height: 48px; align-self: start; margin-top: -6px; border-radius: 0; }
body.met-video .level-top .level-name { color: #0E0F2C; }
body.met-video .level-tag { color: #0E0F2C; }
body.met-video .level-body .level-dates { color: #0E0F2C; font-weight: 600; }
/* De eerstvolgende speeldag als klein pilletje in de kleuren van de teamknopjes: leesbaar
   ongeacht wat de video eronder doet. */
body.met-video .level-dates .next { display: inline-block; padding: 0 6px; border-radius: 6px; background: #27285B; color: var(--chip-ink); font-weight: 700; line-height: 1.4; }
body.met-video .level-dates .past { color: #15163A; font-weight: 500; }
body.met-video .level-dates .sep { color: #4A4F66; }
body.met-video .team-chips { position: relative; border-top: 0; margin-top: 8px; padding-top: 9px; }
body.met-video .team-chips::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; border-radius: 2px; background: var(--tint); opacity: .5; }
@media (max-width: 350px) {
    body.met-video .level-main { grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 6px; }
    body.met-video .level-main > img { width: 36px; height: 36px; margin-top: 0; }
}

/* v0.38: bewerkvenster — beide teams kiesbaar, tijd en veld zonder overlap, compacter. */
.form-row-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-row-split > div { min-width: 0; }
.edit-input { min-width: 0; }
input[type="time"].edit-input { -webkit-appearance: none; appearance: none; min-height: 42px; }
.form-row-compact { margin-bottom: 8px; }
.form-row-compact .form-label { margin-bottom: 4px; font-size: 10px; }
.form-row-compact .edit-input { padding: 8px 10px; min-height: 40px; }
/* Een keuzelijst opent op iOS een eigen wiel en zoomt niet; die mag dus kleiner dan 16 px. */
select.edit-select { -webkit-appearance: none; appearance: none; padding-right: 30px; font-size: 14px !important; font-weight: 500; color: #27285B; background-image: linear-gradient(45deg, transparent 50%, #27285B 50%), linear-gradient(135deg, #27285B 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
#editModal .form-title { padding: 12px 16px; font-size: 14px; }
#editModal .form-body { padding-top: 12px; }

/* v0.39: route- en rijden-illustraties op elke kaartlink en bij Rijden (geen pijl of 📍 meer). */
.ui-beeld { display: inline-block; flex: 0 0 auto; object-fit: contain; vertical-align: -3px; }
.hall-link .ui-beeld { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }
.maps-link { display: inline-flex; align-items: center; gap: 5px; }
.match-route { display: inline-flex; align-items: center; }
.programme-detail-route .ui-beeld, .alle-route .ui-beeld { margin-right: 3px; vertical-align: -3px; }
.hub-route .ui-beeld { width: 20px; height: 20px; }
.team-help-heading .ui-beeld, .alle-section-title .ui-beeld { vertical-align: -5px; margin-right: 2px; }
.drivers-title .ui-beeld { width: 24px; height: 19px; margin-right: 4px; vertical-align: -4px; }
.alle-rol-label .ui-beeld { vertical-align: -4px; margin-right: 2px; }
/* v0.40: teamknopjes altijd op één rij (zes bij level 3), gelijk verdeeld tot 64 px breed. */
body.met-video .team-chips { flex-wrap: nowrap; gap: 5px; }
body.met-video .team-chip { flex: 1 1 0; min-width: 0; max-width: 64px; padding: 4px 2px; }
@media (max-width: 350px) {
    body.met-video .team-chips { gap: 4px; }
    body.met-video .team-chip { font-size: 12px; }
}
/* v0.45: invulvensters compact en helder: kleinere koppen en labels, 40 px-velden, chauffeur met plaatsen-teller. */
.form-title, .pin-box h3 { padding: 11px 14px; font-size: 14px; }
.form-body, .form-content { padding: 12px 14px; }
.form-actions { padding: 0 14px 14px; }
.form-row { margin-bottom: 9px; }
.form-label { margin-bottom: 4px; font-size: 10px; }
.edit-input, textarea.edit-input { padding: 8px 10px; min-height: 40px; border-radius: 10px; }
.form-option { padding: 7px 11px; font-size: 12px; }
.parent-form-context { margin: 0; padding: 8px 14px 0; font-size: 11px; color: #4A5062; }
.driver-modal { padding: 12px 14px 14px; border-radius: 16px; width: min(400px, calc(100% - 24px)); }
.driver-form { gap: 5px; }
.driver-form-heading { margin-bottom: 2px; }
.driver-form-heading h2 { font-size: 15px; }
.driver-close { width: 32px; height: 32px; font-size: 22px; }
.driver-form-context { font-size: 11px; margin: 0 0 4px; }
.driver-form label { margin-top: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #4E546C; }
.driver-form label span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.driver-form input, .driver-form select { min-height: 40px; padding: 7px 10px; border-radius: 10px; }
.driver-form select { -webkit-appearance: none; appearance: none; padding-right: 30px; font-size: 14px !important; font-weight: 500; background-image: linear-gradient(45deg, transparent 50%, #27285B 50%), linear-gradient(135deg, #27285B 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.driver-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 40px; border: 1px solid #BFC5D5; border-radius: 10px; overflow: hidden; background: #FFF; }
.driver-step { height: 100%; border: 0; background: #F0F2F7; color: #27285B; font: 600 20px Poppins, sans-serif; }
.driver-step:disabled { color: #A9AEC0; }
.driver-stepper output { text-align: center; font: 600 16px Poppins, sans-serif; color: #27285B; }
.driver-form-status { font-size: 11px; }
.driver-form-status:empty { display: none; }
.driver-submit { min-height: 40px; margin-top: 4px; }

/* v0.46: sporthal- en datum-illustraties, minder regelafstand, kop Wedstrijden op Team. */
.location-label .ui-beeld, .overview-location .ui-beeld, .team-attendance summary .ui-beeld { vertical-align: -3px; }
.team-day .card-header .card-number .ui-beeld { width: 22px; height: 22px; }
/* De zaalnaam mag over twee regels: hij draagt de plaats, en die staat sinds de
   adresregel alleen de straat toont nergens anders meer. Afkappen zou hem laten
   verdwijnen op een smal scherm. */
.location-hall { overflow-wrap: break-word; }
.overview-location { display: grid; gap: 1px; min-width: 0; }
.overview-hall { display: flex; align-items: center; gap: 6px; min-width: 0; }
.overview-hall > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-section-title { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #4E546C; }
/* Spelregels: de tien punten stonden te ruim uit elkaar (halve regelafstand). */
.spelregels-list li { padding: 2px 0; line-height: 1.35; }
/* Overzicht: de kop groter, de regels eronder dichter op elkaar. */
.info-toggle { font-size: max(0.83rem, 13px); }
.info-content { padding-top: 0; }
.info-item { padding: 2px 0; line-height: 1.35; }

/* v0.47: clublogo's liggend (3:2) op wit, zonder rand; de meeste clublogo's zijn breder dan hoog. */
.club-logo { width: 42px; height: 28px; flex-basis: 42px; border-radius: 5px; border: 0; }
.club-logo img { padding: 1px; }
#teamContent .wed-tegenstander .club-logo { width: 33px; height: 22px; flex-basis: 33px; }
.has-nav .totaal-row .club-logo,
.has-nav .totaal-row .totaal-team .club-logo { width: 33px; height: 22px; flex-basis: 33px; border: 0; }
.alle-levels .totaal-row .club-logo { width: 33px; height: 22px; flex-basis: 33px; border: 0; }
/* v0.48: uitslagen overal in hetzelfde font. Op het totaaloverzicht onder elkaar zonder streepje,
   bij sets in twee strakke kolommen; geen groene of rode markering meer. */
.wed-score, .wed-score.win, .wed-score.loss, .wed-score.draw {
    padding: 0; border: 0; border-radius: 0; background: transparent; color: #27285B;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
button.wed-score { min-height: 28px; cursor: pointer; }
#teamContent .wed-score { font-size: 12px; padding: 0; }
.score-stack { display: inline-grid; gap: 1px; justify-items: end; font-size: 12px; font-weight: 600; color: #27285B; font-variant-numeric: tabular-nums; line-height: 1.25; }
.score-line { display: grid; grid-auto-flow: column; gap: 9px; min-height: 22px; align-items: center; }
.score-stack.sets .score-line { grid-template-columns: repeat(2, 2ch); }
.score-stack:not(.sets) .score-line { grid-template-columns: 2ch; }
.score-line > span { text-align: right; }
.has-nav .totaal-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.has-nav .totaal-hall { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.hall-plain { font-size: 11px; color: #4A5062; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-nav .totaal-hall .totaal-veld { min-width: 0; font-size: 11px; font-weight: 600; color: #27285B; }
.has-nav .totaal-result { min-width: 0; text-align: right; }
.alle-levels .totaal-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; }

/* v0.49: invaller kiezen uit de overige spelers van het level. */
.invaller-rij { display: grid; gap: 5px; margin: 0 0 7px; padding-left: 2px; }
.invaller-select { width: 100%; min-height: 36px; padding: 6px 28px 6px 10px; border: 1px solid #BFC5D5; border-radius: 9px; background-color: #FFF; color: #27285B; font: 500 13px Poppins, sans-serif; }
.invaller-rij .invaller-input { margin: 0; }
.invaller-rij .invaller-input[hidden] { display: none; }

/* v0.50: afwezig en invaller ook op de teamkaart en de wedstrijdkaart van de dag. */
.team-card-player.is-afwezig { background: #EEF0F5; color: #5A6078; text-decoration: line-through; }
.team-card-player.is-invaller { background: #0B7F76; }
.team-card-player.is-invaller::before { content: '↔ '; opacity: .8; }
.team-day-players .speler-name.afwezig { text-decoration: line-through; color: #5A6078; }
.team-day-players .invaller-label { margin-left: 3px; color: #0B7F76; font-weight: 600; }

/* v0.51: doorklikken naar de teampagina vanaf Overzicht, Totaal en het wedstrijdvenster. */
.overview-card.is-link, .has-nav .totaal-row.is-link, .match-schedule tr.is-link { cursor: pointer; }
.overview-card.is-link:focus-visible, .has-nav .totaal-row.is-link:focus-visible, .match-schedule tr.is-link:focus-visible { outline: 2px solid #27285B; outline-offset: 1px; }
@media (hover: hover) {
    .overview-card.is-link:hover { border-color: #C9CFE0; box-shadow: 0 3px 12px rgba(39, 40, 91, .12); }
    .has-nav .totaal-row.is-link:hover, .match-schedule tr.is-link:hover { background: #F4F6FA; }
}
.alle-teamlink { display: flex; align-items: center; gap: 7px; min-height: 42px; margin: 10px 0 2px; padding: 8px 11px; border: 1px solid #DCE0EA; border-radius: 11px; background: #F7F8FC; color: #27285B; font-size: 12px; font-weight: 600; text-decoration: none; }
.alle-teamlink:hover, .alle-teamlink:focus-visible { background: #EEF1F8; }

.excel-knop { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #1D6F42; color: #FFF; font: 700 9px Poppins, sans-serif; letter-spacing: .3px; }

/* ------------------------------------------------------------
   v0.52 · Startscherm: knoppen laten meer van het beeld door.
   De totaalknop krijgt dezelfde doorschijnendheid als de
   levelkaarten, een paarse rand en een smallere maat.
   ------------------------------------------------------------ */
body.met-video .hub-tool {
    width: 100%;
    margin: 2px 0 12px;
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 9px;
    padding: 8px 12px;
    border: 2px solid var(--vs-orange);
    background: rgba(255, 255, 255, .46);
    -webkit-backdrop-filter: blur(9px) saturate(1.1) brightness(1.3);
    backdrop-filter: blur(9px) saturate(1.1) brightness(1.3);
    box-shadow: 0 4px 14px rgba(10, 11, 35, .2);
}
body.met-video .hub-tool img { width: 32px; height: 26px; }
body.met-video .hub-tool strong { color: #0E0F2C; font-size: 13px; }
body.met-video .hub-tool .level-arrow { color: #0E0F2C; }
@media (max-width: 350px) {
    body.met-video .hub-tool { grid-template-columns: 28px minmax(0, 1fr) 12px; padding: 7px 10px; }
    body.met-video .hub-tool img { width: 28px; height: 22px; }
    body.met-video .hub-tool strong { font-size: 12px; }
}

/* De overige knoppen op het startscherm een stap doorzichtiger. */

/* ------------------------------------------------------------
   v0.52 · Overzicht: zaal én adres op één regel, met alleen het
   Maps-icoon erachter. Daardoor vervalt de losse adresregel en
   wordt de kaart een regel korter.
   ------------------------------------------------------------ */
.overview-location { line-height: 1.35; }
.overview-hall { flex-wrap: nowrap; gap: 6px; }
.maps-icon-link { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px; }
.maps-icon-link .ui-beeld { width: 18px; height: 18px; vertical-align: -4px; }
.overview-begeleiders { margin-top: 7px; padding-top: 7px; }
.overview-time { display: inline-flex; align-items: center; gap: 5px; font-size: max(0.9rem, 15px); }
.overview-time .ui-beeld { width: 20px; height: 20px; }
.location-label .ui-beeld { vertical-align: -3px; }
@media (max-width: 350px) {
    .overview-time { font-size: max(0.84rem, 14px); }
    /* Op de smalste telefoons liever twee regels dan een afgekapt adres. */
    .overview-hall { align-items: flex-start; }
    .overview-hall > span { font-size: 11px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
    .maps-icon-link { margin-top: 1px; }
}

/* ------------------------------------------------------------
   v0.53 · Teamkaart: één kopstijl, één regelhoogte.
   ------------------------------------------------------------ */

/* "Wedstrijden" krijgt hetzelfde kopje als "Spelers" erboven. */
.team-section-title { margin: 0; min-height: 30px; padding: 2px 0; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .5px; color: #27285B; }
.team-section-title .ui-beeld { width: 18px; height: 18px; vertical-align: 0; }

/* Locatie en Verzamelen: gelijke regelhoogte, dus staan de twee kopjes op
   dezelfde lijn, ongeacht of het plaatje breed (zaal) of vierkant (klok) is. */
.team-day .location-main > .location-label,
.team-day .location-time > .location-label {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    margin-bottom: 3px;
}
.team-day .location-time > .location-label { justify-content: flex-end; }
.team-day .location-main > .location-label .ui-beeld,
.team-day .location-time > .location-label .ui-beeld { width: auto; height: 18px; vertical-align: 0; }

/* Het kopje "Ouderhulp" draagt de begeleider; de auto blijft op de rij Rijden. */
.team-help-heading > span .regel-beeld { width: 24px; height: 19px; }
.alle-section-title { display: flex; align-items: center; gap: 6px; }
.alle-section-title .regel-beeld { width: 24px; height: 19px; }

/* ------------------------------------------------------------
   v0.54 · Startscherm: alle knoppen even breed, dezelfde rand in
   het donkerblauw-paars van de app, en een stap doorzichtiger.
   ------------------------------------------------------------ */
/* Doorzichtiger mag, maar de tekst moet leesbaar blijven ook op een donker
   filmbeeld. Daarom trekt elke knop het beeld erachter naar zijn eigen kant:
   lichte knoppen maken het lichter, donkere knoppen donkerder. Valt
   backdrop-filter weg, dan blijft de dekking zelf hoog genoeg. */
/* De koppelingen waren oranje met donkere tekst. Dat is de enige combinatie op
   dit scherm die niet doorzichtiger kán: op een donker filmbeeld zakt het
   contrast dan onder 4,5:1. In hetzelfde donkerblauw-paars met witte tekst kan
   het wel, en staan alle knoppen bovendien in één kleurfamilie. */
body.met-video .hub-links a {
    flex: 1 1 0;
    min-width: 0;
    border: 2px solid var(--vs-orange);
    background: rgba(39, 40, 91, .66);
    -webkit-backdrop-filter: blur(8px) brightness(.7);
    backdrop-filter: blur(8px) brightness(.7);
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(12, 13, 40, .5);
}
body.met-video .hub-links a .vs-icon { color: #FFC48A; }
body.met-video .hub-links .hub-link-switch { border-color: var(--vs-orange); }
@media (hover: hover) { body.met-video .hub-links a:hover { background: rgba(52, 53, 115, .74); } }
body.met-video .hub-route {
    border: 2px solid var(--vs-orange);
    background: rgba(39, 40, 91, .66);
    -webkit-backdrop-filter: blur(8px) brightness(.7);
    backdrop-filter: blur(8px) brightness(.7);
}
body.met-video .team-chip {
    background: rgba(39, 40, 91, .82);
    -webkit-backdrop-filter: blur(6px) brightness(.7);
    backdrop-filter: blur(6px) brightness(.7);
}
@media (hover: hover) { body.met-video .team-chip:hover { background: rgba(52, 53, 115, .86); color: var(--chip-ink); } }

/* v0.54 · Zichtbaar maken wat een filter wegdrukt, in plaats van stil weglaten. */
.totaal-verborgen { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--vs-orange-soft); color: #8A410F; font-weight: 600; }

/* v0.54 · Beheer en menu naast elkaar in de kop van /totaal/. */
/* De kop is een raster met een vaste knopkolom van 40px; met twee knoppen
   moet die kolom meegroeien, anders valt de menuknop buiten het scherm. */
.alle-levels .header { grid-template-columns: minmax(0, 1fr) auto; }
.header-buttons { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.header-buttons > .app-menu-button { flex: 0 0 auto; }

/* ------------------------------------------------------------
   v0.59 · Knoppen donker en ver doorzichtig.
   Een licht vlak met donkere tekst kan niet ver open: op een donker
   filmbeeld verdwijnt de tekst. Andersom wel. De scrim over het
   filmpje houdt de ondergrond in een donkere band, dus een donker
   vlak met witte tekst blijft leesbaar tot ver onder de 30% dekking
   — en dan zie je het beeld er echt doorheen, in kleur, zonder het
   grijze waas dat een contrast-filter erover legt.
   ------------------------------------------------------------ */
body.met-video .hub-tool,
body.met-video .hub-links a,
body.met-video .hub-route {
    background: rgba(16, 17, 48, .16);
    -webkit-backdrop-filter: blur(3px) saturate(1.2);
    backdrop-filter: blur(3px) saturate(1.2);
    border: 2px solid var(--vs-orange);
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(8, 9, 30, .75);
}
body.met-video .hub-tool strong { color: #FFFFFF; }
body.met-video .hub-tool .level-arrow { color: #FFB877; }
body.met-video .hub-links a .vs-icon,
body.met-video .hub-route .vs-icon { color: #FFB877; }
@media (hover: hover) {
    body.met-video .hub-tool:hover,
    body.met-video .hub-links a:hover,
    body.met-video .hub-route:hover { background: rgba(16, 17, 48, .42); }
}

/* ------------------------------------------------------------
   v0.58 · De statusbalk gaat over werk dat nog niet is opgeslagen.
   Die mag dus niet wegscrollen en niet vanzelf verdwijnen.
   ------------------------------------------------------------ */
.status-bar { background: var(--surface); border-top: 1px solid transparent; }
.status-bar.error { background: #FDECEC; border-top-color: #F3C9C9; color: #A11B1B; }
.status-bar.loading { background: var(--surface-2); border-top-color: var(--border); }
.status-actie { margin-left: auto; min-height: 30px; padding: 4px 11px; border: 1px solid currentColor; border-radius: var(--r-pill); background: transparent; color: inherit; font: 600 11px Poppins, sans-serif; }
/* De laadstip deelt de oranje wedstrijdbalk; geen losse regel boven de tabs. */
.has-nav .header-right.connection-strip { display: flex; align-items: center; gap: 8px; min-height: 17px; padding-right: max(14px, env(safe-area-inset-right)); background: #FF8200; }
.has-nav .header-right.connection-strip:has(.countdown:empty):not(:has(#connDot.is-live)) { display: none; }
.has-nav .connection-strip .countdown { flex: 1; min-width: 0; padding-right: 0; }
#connDot { display: none; flex: 0 0 8px; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--ok); }
#connDot.is-live { display: inline-block; }

/* ------------------------------------------------------------
   v0.60 · Totaalschema: zaal en veld direct achter de teams.
   De teamkolom stond op 1fr en slokte alle overgebleven ruimte op:
   210px breed terwijl de breedste teamregel er 132 nodig heeft (gemeten
   over alle vier de levels). Daardoor stond de zaal 75px verderop en
   hield de uitslag amper ruimte over. De kolom krijgt nu een vaste maat
   die op elke rij gelijk is, en de vrije ruimte gaat naar de uitslag.
   ------------------------------------------------------------ */
.has-nav .totaal-row,
.alle-levels .totaal-row { grid-template-columns: 40px minmax(0, 136px) auto minmax(30px, 1fr); }
@media (max-width: 350px) {
    .has-nav .totaal-row,
    .alle-levels .totaal-row { grid-template-columns: 36px minmax(0, 112px) auto minmax(28px, 1fr); }
}

/* ------------------------------------------------------------
   v0.62 · Zaalmodus op /totaal/: het hele schema van een sporthal,
   ook de wedstrijden waar Switch niet in speelt. Eén regel per
   wedstrijd, zonder Switch te bevoorrechten — dat is wat er straks
   ook uit de print komt.
   ------------------------------------------------------------ */
.totaal-modus { margin: 8px 0 4px; }
.modus-rij { display: flex; gap: 6px; }
.modus-knop { flex: 1 1 0; min-height: 38px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font: 600 12px Poppins, sans-serif; }
.modus-knop.active { background: var(--vs-navy); border-color: var(--vs-navy); color: #FFFFFF; }
.sorteer-knop { min-height: 30px; margin-left: 5px; padding: 3px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font: 600 11px Poppins, sans-serif; }
.sorteer-knop.active { background: var(--vs-navy); border-color: var(--vs-navy); color: #FFFFFF; }

.zaal-rij { display: grid; grid-template-columns: 46px 30px minmax(0, 1fr) 28px; gap: 4px 8px; align-items: center; min-height: 46px; padding: 6px 10px; border: 1px solid var(--border); border-left: 3px solid var(--surface-3); border-radius: var(--r-md); background: var(--surface); margin-bottom: 5px; }
.zaal-rij.heeft-switch { border-left-color: var(--vs-orange); }
.zaal-tijd { font: 700 13px Poppins, sans-serif; color: var(--vs-navy); font-variant-numeric: tabular-nums; }
.zaal-veld { font: 700 12px Poppins, sans-serif; color: var(--vs-navy); text-align: center; }
.zaal-teams { display: grid; gap: 2px; min-width: 0; font-size: 12px; color: var(--text); }
.zaal-teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaal-poule { font-size: 11px; font-weight: 600; color: var(--subtle); text-align: right; }
@media (max-width: 350px) {
    .zaal-rij { grid-template-columns: 42px 26px minmax(0, 1fr) 24px; padding: 6px 8px; }
    .zaal-teams { font-size: 11px; }
}

/* v0.63 · Het wedstrijdkaartje op /totaal/: club en team apart, plus een
   notitie en een afgelasting die zichtbaar blijft. */
.kant-keuze { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 6px; }
.alle-afgelast { display: inline-block; margin-bottom: 8px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font: 700 11px Poppins, sans-serif; letter-spacing: .4px; text-transform: uppercase; }
/* Drie knoppen naast elkaar op 390px: elk label op één regel, Opslaan wat ruimer. */
.form-actions-drie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 6px; }
.form-actions-drie > button { padding-inline: 6px; font-size: .82rem; white-space: nowrap; }
.form-actions-drie .btn-cancel.is-aan { border-color: var(--vs-teal); color: #0B6E66; }
/* De kaart zelf: label links, waarde rechts, en niets wat er twee keer staat. */
.alle-dialog-head p:empty { display: none; }
.totaal-row.is-afgelast { opacity: .72; }
.totaal-row.is-afgelast .totaal-time { text-decoration: line-through; }
.totaal-row.heeft-notitie .totaal-time::after { content: '•'; margin-left: 3px; color: var(--vs-orange); }
/* Dezelfde afgelasting op het overzicht van een level: doorgehaalde tijd, een stip bij een notitie. */
.match-schedule tr.is-afgelast { opacity: .72; }
.match-schedule tr.is-afgelast .match-time { text-decoration: line-through; }
/* v1.04: ook op het Team-tabblad, voor een door Nevobo vervallen wedstrijd. */
.wedstrijd.is-afgelast { opacity: .72; }
.wedstrijd.is-afgelast .wed-tijd { text-decoration: line-through; }
.match-schedule tr.heeft-notitie .match-time::after { content: '•'; margin-left: 3px; color: var(--vs-orange); }
#alleNotitie { width: 100%; resize: vertical; font: 400 13px Poppins, sans-serif; }

/* ---------- v0.64 · Poule-indeling op /totaal/ ---------- */
/* Achttien poules over vier levels: een kopje per level, daaronder de poules
   naast elkaar zodra het scherm dat toelaat. Switch-teams zwaarder en oranje. */
.poule-level { margin: 0 0 18px; }
.poule-level-kop {
    position: sticky; top: 0; z-index: 1;
    background: var(--vs-navy); color: #FFFFFF;
    font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
    padding: 7px 11px; border-radius: 9px; margin: 0 0 9px;
}
.poule-kaarten { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 620px) { .poule-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .poule-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.poule-kaart { background: var(--surface, #FFFFFF); border: 1px solid var(--line, #E4E6EF); border-radius: 12px; padding: 10px 12px 11px; }
.poule-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-bottom: 6px; border-bottom: 2px solid var(--vs-orange); }
.poule-naam { font-weight: 700; color: var(--vs-navy); font-size: .95rem; }
.poule-klasse { font-size: .78rem; color: var(--muted); }
.poule-ronde { font-size: .78rem; color: var(--muted); }
.poule-code { margin-left: auto; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Waar en wanneer die poule speelt: twee blokjes onder de kop. */
.poule-speeldagen { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 7px 0 0; }
.poule-speeldag { display: inline-flex; align-items: baseline; gap: 5px; font-size: .78rem; }
.poule-speeldag .ui-beeld { align-self: center; opacity: .85; }
.poule-speeldag-dag { font-weight: 700; color: var(--vs-navy); font-variant-numeric: tabular-nums; }
.poule-speeldag-zaal { color: var(--muted); }
.poule-teams { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: poule; }
.poule-teams li { counter-increment: poule; display: flex; gap: 8px; padding: 2px 0; font-size: .88rem; color: var(--text, #2D2F3C); }
.poule-teams li::before { content: counter(poule) '.'; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 15px; }
.poule-teams li.is-switch { font-weight: 700; color: var(--vs-orange-tekst); }
@media print {
    .poule-level-kop { position: static; background: none; color: #000000; border-bottom: 2px solid #000000; border-radius: 0; }
    .poule-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .poule-kaart { break-inside: avoid; }
    .poule-teams li.is-switch { color: #000000; }
    .poule-speeldag-dag { color: #000000; }
}

/* ---------- v0.65 · Wedstrijden en Ouderhulp inklapbaar ---------- */
/* Net als Spelers, maar standaard uitgeklapt: wie ze dicht wil hebben klapt ze zelf dicht,
   en die keuze blijft staan als de app opnieuw tekent. */
/* Eén teken voor alle drie de blokken, hetzelfde dat Spelers al had. */
.team-klapper > summary { cursor: pointer; list-style: none; }
.team-klapper > summary::-webkit-details-marker { display: none; }
.team-klapper > summary::after { content: '+'; margin-left: auto; color: var(--vs-orange-tekst); font-weight: 700; }
.team-klapper[open] > summary::after { content: '\2212'; }
.team-klapper > summary:focus-visible { outline: 2px solid var(--vs-orange); outline-offset: 2px; border-radius: 6px; }
/* Op papier hoort alles zichtbaar te zijn, ook wat op het scherm dichtgeklapt staat. */
@media print {
    .team-klapper > summary::after { content: '' !important; }
    .team-klapper:not([open]) > *:not(summary) { display: block !important; }
}

/* ---------- v0.65 · Levelkop: logo groter, onderkant gelijk met de tekst ---------- */
/* Het logo stond gecentreerd naast een tekstblok van twee regels en stak daardoor
   3,5 px onder de tekst uit. Onderaan uitlijnen zet ze op één lijn. */
.has-nav .header-left { align-items: flex-end; }
.has-nav .header-left .logo-level { height: 42px; border-radius: 8px; }
.has-nav .header-left .header-home { display: flex; }
@media (max-width: 380px) {
    .has-nav .header-left .logo-level { height: 38px; }
}

/* ---------- v0.65 · Switch-scores in oranje op het totaalschema ---------- */
.score-line.is-switch { color: var(--vs-orange-tekst); font-weight: 700; }
@media print { .score-line.is-switch { color: #000000; } }

/* ---------- v0.68 · Alleen Switch, of de hele regio ---------- */
/* Onder de filters: uitvinken haalt de wedstrijden van de andere clubs in dezelfde
   poules erbij. Die komen uit het zaalprogramma en zijn niet te bewerken. */
.totaal-vink { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0 0; padding: 3px 9px 3px 5px; border: 1px solid #C9CDD9; border-radius: 999px; background: #FFF; color: #4A5062; font: 600 11px Poppins, sans-serif; cursor: pointer; }
.totaal-vink.is-aan { border-color: var(--vs-orange); background: #FFF6EE; color: var(--vs-orange-tekst); }
.totaal-vink input { width: 15px; height: 15px; margin: 0; accent-color: var(--vs-orange); }
.totaal-vink:focus-within { outline: 2px solid var(--vs-navy); outline-offset: 1px; }
/* Een wedstrijd van twee andere clubs: geen oranje eigen kant, wel gewoon leesbaar.
   De oranje rand links markeert een thuiswedstrijd van Switch; die hoort hier niet. */
.has-nav .totaal-row.is-extern, .totaal-row.is-extern { border-left-color: #C9CDD9; }
.totaal-row.is-extern .match-own, .totaal-row.is-extern .match-opponent { color: var(--text, #2D2F3C); font-weight: 500; }
@media print { .totaal-vink { display: none; } .totaal-row.is-extern { opacity: 1; } }

/* ---------- v0.69 · Ouderhulp: uitleg in de kop, waarschuwing als niemand er is ---------- */
/* Het informatieteken staat in de klapkop zelf, niet op een eigen regel eronder. */
.team-help-heading { gap: 6px; }
.role-help-knop { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; background: none; color: #B65317; cursor: pointer; }
.role-help-knop .vs-icon { width: 16px; height: 16px; }
.role-help-knop:focus-visible { outline: 2px solid var(--vs-orange); outline-offset: 1px; border-radius: 6px; }
.role-help-tekst { margin: 2px 0 6px; padding: 10px 11px; border: 1px solid #E5CBB8; border-radius: 10px; background: #FFF; color: #3F4459; font: 400 12px/1.5 Poppins, sans-serif; text-transform: none; letter-spacing: 0; }
/* De kop is een summary: het teken duwt de rest niet weg. */
.has-nav .team-help-heading > span:first-child { flex: 0 1 auto; min-width: 0; }
.has-nav .team-help-heading .role-help-knop { margin-right: auto; }
/* Ontbreekt er een begeleider én een teller, dan zegt de app dat. */
.hulp-waarschuwing { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 2px; text-align: left; font-size: 11px; }
.hulp-waarschuwing .vs-icon { flex: 0 0 auto; width: 15px; height: 15px; }
.overview-begeleiders.hulp-ontbreekt .overview-begeleider.empty { color: var(--vs-orange-tekst); }
@media print { .role-help-knop { display: none; } .role-help-tekst { display: none !important; } }

/* ---------- Wedstrijddag: het teamblok is het document ----------
   Aanvulling op het printblok hierboven. Let op de #switchPrintDocument-prefix bij elke
   kleur: `#switchPrintDocument *` zet alles op #222 !important en wint van elke selector
   zonder id. */
@media print {
    /* Pariteit met de PDF, die niets in kapitalen zet. */
    #switchPrintDocument .print-section h2 { text-transform: none; }

    /* Vaste witte achtergrond voor het teamblok en de algemene informatie. */
    .print-section.print-team, .print-section.print-lead { background: #FFF; }
    .print-section.print-day { background: #F1EFEC; padding: 8pt 10pt 8pt 44pt; min-height: 30pt; box-sizing: border-box; break-after: avoid; }
    .print-section.print-day .print-section-icon { top: 5pt; }
    #switchPrintDocument .print-section.print-day h2 { font-size: 12pt; margin: 0; }

    /* Algemene informatie: bovenaan, bewust licht. Bekende kost die je vóór vertrek afvinkt. */
    .print-section.print-lead { padding: 7pt 10pt 7pt 44pt; }
    #switchPrintDocument .print-lead h2 { font-size: 8.5pt; letter-spacing: .6pt; text-transform: uppercase; margin: 0 0 4pt; color: #5A5C6E !important; }
    .print-info-list { list-style: none; margin: 0; padding: 0; }
    .print-info-list li { display: flex; align-items: center; gap: 6pt; padding: 1.6pt 0; font-size: 8.5pt; }
    .print-info-list .vs-icon { width: 11pt; height: 11pt; flex: 0 0 11pt; }
    #switchPrintDocument .print-info-list .vs-icon, #switchPrintDocument .print-info-list .vs-icon * { color: #27285B !important; stroke: #27285B !important; }

    /* Teamblok: teamnaam groot, spelers kleiner maar duidelijk, op dezelfde regel. */
    .print-section.print-team { padding: 14pt 10pt 12pt 44pt; border-left-width: 2.5pt; break-inside: auto; }
    #switchPrintDocument .print-team h2 { font-size: 11pt; margin: 0 0 7pt; }
    .print-team-id { font-size: 17pt; font-weight: 700; letter-spacing: -.2pt; margin-right: 7pt; }
    .print-team-players { font-size: 10pt; font-weight: 700; }
    #switchPrintDocument .print-team-id, #switchPrintDocument .print-team-players { color: #27285B !important; }
    .print-team-players:empty::after { content: "Nog in te delen"; font-weight: 400; }

    /* De vijf feiten die de ochtend bepalen. */
    .print-facts { border-collapse: collapse; width: 100%; margin: 0 0 9pt; }
    .print-facts tr { border-bottom: .5pt solid #E2DFDB; break-inside: avoid; }
    .print-facts tr:nth-child(even) { background: #F8F7F5; }
    /* Labels zoals de PDF ze zet: klein en grijs, geen kapitalen. */
    .print-facts th { width: 14%; padding: 4.5pt 6pt 4.5pt 0; text-align: left; vertical-align: middle;
        font-size: 7.5pt; font-weight: 600; letter-spacing: .2pt; text-transform: none; white-space: nowrap; }
    .print-facts td { width: 36%; padding: 4.5pt 6pt 4.5pt 0; vertical-align: middle; font-size: 10.5pt; font-weight: 700; }
    .print-facts td[colspan] { width: auto; }
    #switchPrintDocument .print-facts th { color: #5A5C6E !important; }
    #switchPrintDocument .print-facts td { color: #27285B !important; }

    /* Ontbrekende begeleider of teller: label en waarde in de waarschuwingskleur. Een
       randdriehoek in plaats van clip-path: die drukt op elke printengine betrouwbaar af. */
    .print-facts th.print-warn, .print-facts td.print-warn { background: #FFF0DE; }
    #switchPrintDocument .print-facts th.print-warn,
    #switchPrintDocument .print-facts td.print-warn { color: #9E4400 !important; }
    .print-facts th.print-warn::before { content: ""; display: inline-block; width: 0; height: 0;
        margin-right: 4pt; vertical-align: -.5pt;
        border-left: 4.2pt solid transparent; border-right: 4.2pt solid transparent; border-bottom: 7.4pt solid #EC721E; }
    /* Een teammelding (bijvoorbeeld een afgelaste dag) en een gewone opsomming. */
    #switchPrintDocument .print-alert { font-weight: 700; color: #9E4400 !important; }
    .print-plain { margin: 0; padding-left: 12pt; }
    .print-plain li { padding: 1.5pt 0; }
    .print-halls td:first-child, .print-halls td:nth-child(2) { white-space: normal; }

    /* De eigen wedstrijden, binnen het teamblok. Vijf kolommen; de zeskoloms regels
       hierboven blijven staan voor het competitieoverzicht. */
    .print-team .print-match-table { font-size: 8.5pt; }
    .print-team .print-match-table th:nth-child(1), .print-team .print-match-table td:nth-child(1) { width: 11%; }
    .print-team .print-match-table th:nth-child(2), .print-team .print-match-table td:nth-child(2) { width: auto; white-space: normal; }
    .print-team .print-match-table th:nth-child(3), .print-team .print-match-table td:nth-child(3) { width: 12%; }
    .print-team .print-match-table th:nth-child(4), .print-team .print-match-table td:nth-child(4) { width: 11%; }
    .print-team .print-match-table th:nth-child(5), .print-team .print-match-table td:nth-child(5) { width: 18%; }

    #switchPrintDocument .print-team h3 { font-size: 7.5pt; letter-spacing: .6pt; text-transform: uppercase;
        margin: 9pt 0 2pt; color: #5A5C6E !important; }
}

/* v0.83 · Rustig werkvlak voor laptop en tablet; telefoon en print behouden hun eigen indeling. */
@media screen and (min-width: 760px) {
  .hub { max-width: 1000px; padding: 0 24px 20px; }
  .hub-head { padding: 18px 0 14px; }
  .hub-head img { width: 150px; }
  .hub-head .hub-mensen { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
  .hub #levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hub .level-card { margin: 0; padding: 12px; }
  .hub .level-top { flex-wrap: wrap; gap: 3px 10px; }
  .hub .level-name { font-size: 17px; }
  .hub .level-tag { font-size: 12px; }
  .hub .level-dates { font-size: 12px; }
  .hub .hub-tool { margin-top: 12px; }
  .hub .hub-connections { margin-top: 12px; }
  .hub .footer { padding-top: 12px; }
  body.has-nav:not(.alle-levels) .wrap,
  body.has-nav:not(.alle-levels) .header { max-width: 1040px; padding-inline: 24px; }
  body.has-nav:not(.alle-levels) .nav-inner { max-width: 820px; }
  body.has-nav:not(.alle-levels) .nav-tab { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; font-size: 13px; }
  body.has-nav:not(.alle-levels) .nav-icon { margin: 0; }
  body.has-nav:not(.alle-levels) #overviewContent,
  body.has-nav:not(.alle-levels) #teamContent,
  body.has-nav:not(.alle-levels) .team-archive-content,
  body.has-nav:not(.alle-levels) #locatiesContent,
  body.has-nav:not(.alle-levels) #afsprakenList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  body.has-nav:not(.alle-levels) #overviewContent > :not(.overview-card),
  body.has-nav:not(.alle-levels) #teamContent > :not(.team-day) { grid-column: 1 / -1; }
  body.has-nav:not(.alle-levels) #overviewContent > .overview-card,
  body.has-nav:not(.alle-levels) #teamContent > .team-day,
  body.has-nav:not(.alle-levels) .team-archive-content > .team-day,
  body.has-nav:not(.alle-levels) #locatiesContent > .card,
  body.has-nav:not(.alle-levels) #afsprakenList > * { margin: 0; min-width: 0; }
  body.has-nav:not(.alle-levels) #page-training .card-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  body.has-nav:not(.alle-levels) #page-training .card-content > * { margin: 0; }
  body.has-nav:not(.alle-levels) .video-wrap { max-width: 560px; margin-inline: auto; }
  body.has-nav:not(.alle-levels) .sec-title { font-size: 15px; margin-block: 14px 10px; }
  body.has-nav:not(.alle-levels) .weekend-selector { margin-block: 10px; }
}
@media screen and (min-width: 1000px) {
  body.has-nav:not(.alle-levels) #page-spelregels.active { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
  body.has-nav:not(.alle-levels) #page-spelregels > :not(.card) { grid-column: 1 / -1; }
  body.has-nav:not(.alle-levels) #page-spelregels > .card { margin: 0; }
}

/* v1.03 · Totaaloverzicht op laptop en tablet: breder werkvlak, tabs als rij, klokblokken naast elkaar.
   Telefoon (< 760 px) en print veranderen niet. */
@media screen and (min-width: 760px) {
  body.alle-levels .wrap,
  body.alle-levels .header { max-width: 1040px; padding-inline: 24px; }
  body.alle-levels .status-bar { max-width: 1040px; }
  body.alle-levels .nav-inner { max-width: 900px; }
  body.alle-levels .nav-tab { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; font-size: 13px; }
  body.alle-levels .nav-icon { margin: 0; }
}
@media screen and (min-width: 1000px) {
  body.alle-levels .shc-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
}
@media screen and (min-width: 1200px) {
  body.alle-levels .wrap,
  body.alle-levels .header,
  body.alle-levels .status-bar { max-width: 1280px; }
}

/* v0.88 · Teambeheer boven Sorteer en optisch gelijke footericonen. */
.team-dag-beheer { margin: 10px 0 8px; }
.team-dag-beheer > button { width: auto; min-height: 34px; padding: 5px 11px; border-width: 1px; font: 600 12px/1.3 Poppins, sans-serif; }
.team-dag-body { padding: 14px; }
.team-dag-body .form-row { margin-bottom: 12px; }
.team-dag-body .form-actions { display: flex; gap: 8px; margin-top: 14px; }
.team-dag-body .form-actions button { flex: 1; min-height: 44px; }
.team-dag-body button:disabled { opacity: .5; cursor: default; }
.team-dag-body .team-actie-preview { font-size: 13px; line-height: 1.6; }

/* Dezelfde typografie voor alle hoofditems in het zijmenu. */
.app-menu nav > a,
.app-menu nav > button,
.app-menu nav > .menu-group > summary {
  font: 500 13px/1.4 Poppins, sans-serif;
}

/* PDF blijft in de app met altijd bereikbare bediening. */
body.pdf-reading { overflow: hidden; }
.pdf-reader { inset: 0; margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; background: #EDEFF5; color: #27285B; }
.pdf-reader[open] { display: flex; flex-direction: column; }
.pdf-reader-header { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; background: #fff; border-bottom: 2px solid #F47721; }
.pdf-reader-header h2 { flex: 1; min-width: 0; margin: 0; font: 500 11px/1.3 Poppins, sans-serif; overflow-wrap: anywhere; }
.pdf-reader button { flex: 0 0 auto; min-width: 40px; min-height: 44px; padding: 6px 9px; border: 1px solid #D0D5E2; border-radius: 9px; background: #fff; color: #27285B; font: 600 12px Poppins, sans-serif; }
.pdf-reader [data-reader-close] { background: #FFF0E2; border-color: #F47721; }
.pdf-reader button:disabled { opacity: .4; }
.pdf-reader [hidden] { display: none; }
.pdf-reader-status { flex: 0 0 auto; padding: 8px 12px; font: 400 12px/1.4 Poppins, sans-serif; }
.pdf-reader-status:empty { display: none; }
.pdf-reader-pages { flex: 1; min-height: 0; overflow: auto; padding: 12px; overscroll-behavior: contain; }
.pdf-reader canvas { display: block; margin: 0 auto; background: white; }
.pdf-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pdf-reader-controls { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); background: #fff; font: 500 12px Poppins, sans-serif; }
.pdf-reader-controls button { font-size: 18px; }
.pdf-reader button:focus-visible { outline: 2px solid #F47721; outline-offset: 2px; }
@media print { .pdf-reader { display: none !important; } }

/* ---------- Overzicht: het speelschema als kaart, uitgelijnd met de teamkaarten ---------- */
.overview-schedule { background: var(--surface); border: 1px solid #DCE0EA; border-radius: var(--r-lg); box-shadow: 0 2px 7px rgba(39, 40, 91, 0.04); padding: 6px 13px 12px; margin-bottom: 9px; overflow: hidden; }
.overview-schedule .sec-title { margin: 0 0 6px; }
.overview-schedule .table-wrap { margin: 0 -13px -12px; }
.overview-schedule .speelschema-table th:first-child, .overview-schedule .speelschema-table td:first-child { padding-left: 13px; }
.overview-schedule .speelschema-table th:last-child, .overview-schedule .speelschema-table td:last-child { padding-right: 13px; }