/* css/vsm.css - Ontwerp van VSM (Voetbal Spel Manager), fase 3. Laadt op elke beheerpagina NA de eigen stijl,
   zodat het de oude opmaak overschrijft. Clubkleuren komen uit css/thema.css + thema.php (--vsm-*).
   Rustige krijtgrond, witte kaarten, clubkleur alleen als accent. Letters: Barlow Condensed (titels, cijfers)
   en Figtree (tekst), zelf gehost in fonts/ (geen Google). Ontwerp: zie CLAUDE.md, "Fase 3, ontwerp". */

@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-variabel.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
    --vsm-grond: #f4f3ef;
    --vsm-vlak: #ffffff;
    --vsm-vlak2: #faf9f6;
    --vsm-lijn: #e3e1da;
    --vsm-lijn-licht: #eeece6;
    --vsm-lijn-sterk: #d6d3cb;
    --vsm-inkt: #17181a;
    --vsm-grijs: #5b5f66;
    --vsm-grijs2: #8a8e95;
    --vsm-goed: #1f5b3e;  --vsm-goed-zacht: #e3f1ea;
    --vsm-let: #7a4b00;   --vsm-let-zacht: #fff1d6;
    --vsm-fout: #a3242f;  --vsm-fout-zacht: #fbe4e4;
    --vsm-info: #1d4f7a;  --vsm-info-zacht: #e2edf6;
    --vsm-letter: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vsm-cijfer: 'Barlow Condensed', 'Figtree', system-ui, sans-serif;
    --vsm-radius: 10px;

    /* Variabelen van spellen.html en scores.html, gelijkgetrokken met dit ontwerp. */
    --bg: var(--vsm-grond);
    --bg2: var(--vsm-vlak);
    --bg3: #f1efea;
    --rand: var(--vsm-lijn);
    --tekst: var(--vsm-inkt);
    --tekst2: var(--vsm-grijs);
    --radius: var(--vsm-radius);
    --radius-sm: 8px;
    --schaduw: none;
    --groen: #1f7a4d;
    --groen-dk: #175c3a;
    --oranje: #a85d00;
    --rood: var(--vsm-fout);
}

html { background: var(--vsm-grond); }
[hidden] { display: none !important; }
body {
    font-family: var(--vsm-letter);
    background: var(--vsm-grond);
    color: var(--vsm-inkt);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--vsm-primair-tekst); }
:focus-visible { outline: 3px solid rgba(var(--vsm-primair-rgb), .45); outline-offset: 2px; }

/* ── Bovenbalk (js/hoofdmenu.js) ───────────────────────────────────────── */
.vsm-balk { background: var(--vsm-secundair); color: var(--vsm-op-secundair); border-bottom: 3px solid var(--vsm-primair); position: relative; z-index: 50; }
.vsm-balk .vb-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.vsm-balk a { color: inherit; text-decoration: none; }
.vb-club { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vb-embleem { width: 38px; height: 38px; border-radius: 50%; background: var(--vsm-primair); color: var(--vsm-op-primair); display: flex; align-items: center; justify-content: center;
    font: 700 15px var(--vsm-cijfer); letter-spacing: .02em; flex: 0 0 38px; }
.vb-logo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.vb-clubtekst { line-height: 1.15; min-width: 0; }
.vb-clubtekst b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.vb-evenement { display: block; font-size: 12px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.vb-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
.vb-item, .vb-item.nav-tab { flex: none; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500;
    opacity: .8; min-height: 40px; white-space: nowrap; color: inherit; transition: none; }
.vb-item i { font-size: 13px; opacity: .9; }
.vb-item:hover, .vb-item.nav-tab:hover { opacity: 1; background: rgba(127, 127, 127, .16); }
.vb-item.active, .vb-item.nav-tab.active { opacity: 1; color: inherit; background: rgba(127, 127, 127, .18); box-shadow: inset 0 -2px 0 var(--vsm-primair); font-weight: 600; }
.vb-gebruiker { position: relative; margin-left: auto; }
.vb-knop { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(127, 127, 127, .45); border-radius: 999px; padding: 6px 12px; background: transparent;
    color: inherit; font-size: 13px; cursor: pointer; min-height: 36px; }
.vb-knop:hover { background: rgba(127, 127, 127, .16); }
.vb-pijl { font-size: 10px; }
.vb-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: var(--vsm-inkt); border: 1px solid var(--vsm-lijn); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14); min-width: 210px; padding: 6px; z-index: 60; }
.vb-menu[hidden] { display: none; }
.vb-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 14px; color: var(--vsm-inkt) !important; }
.vb-menu-item i { width: 16px; color: var(--vsm-grijs); }
.vb-menu-item:hover, .vb-menu-item.active { background: var(--vsm-grond); }
.vb-menu-item.scheiding { margin-top: 4px; border-top: 1px solid var(--vsm-lijn-licht); border-radius: 0 0 6px 6px; }
#hoofdnav[hidden] { display: none !important; }
@media (max-width: 760px) {
    .vsm-balk .vb-in { padding: 8px 16px; }
    .vb-nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .vb-item { padding: 8px 10px; }
}
@media print { .vsm-balk { display: none !important; } }

/* ── Pagina ─────────────────────────────────────────────────────────────── */
.container { max-width: 1240px; padding: 26px 24px 48px; }
.header {
    background: none !important; backdrop-filter: none; box-shadow: none !important; border-radius: 0;
    padding: 0 !important; margin: 0 0 22px !important; text-align: left !important; color: var(--vsm-inkt);
}
.header h1 { font-family: var(--vsm-cijfer) !important; font-weight: 800 !important; font-size: 2.6rem !important; line-height: 1 !important;
    color: var(--vsm-inkt) !important; margin: 0 0 6px !important; letter-spacing: .005em; }
.header h1 > i:first-child { display: none; }
.header p { color: var(--vsm-grijs) !important; font-size: .95rem !important; margin: 0; }
.spellen-modus-badge { display: none !important; }
.vsm-cijfer, .disp { font-family: var(--vsm-cijfer); font-variant-numeric: tabular-nums; }

/* Sectiekop met "middenlijn" */
.vsm-kop { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 13px var(--vsm-letter); letter-spacing: .08em; text-transform: uppercase; color: #4a4e55; }
.vsm-kop::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--vsm-primair); flex: 0 0 18px; }

/* ── Kaarten (styles.css: .card, .tab-content) ─────────────────────────── */
.tab-content { background: none !important; backdrop-filter: none; box-shadow: none !important; padding: 0 !important; border-radius: 0; min-height: 0; }
.card { background: var(--vsm-vlak); border: 1px solid var(--vsm-lijn); border-radius: var(--vsm-radius); box-shadow: none; padding: 22px 24px; }
.card:hover { transform: none; }
.card h3 { font: 700 1.05rem var(--vsm-letter); color: var(--vsm-inkt); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.card h3 > i:first-child { width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; font-size: .85rem;
    background: var(--vsm-primair-zacht); color: var(--vsm-primair-tekst); flex: 0 0 32px; }

/* ── Knoppen ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 8px; font: 600 14px var(--vsm-letter); padding: 10px 16px; min-height: 40px;
    border: 1px solid var(--vsm-lijn-sterk); background: var(--vsm-vlak); color: var(--vsm-inkt);
    box-shadow: none; transform: none; filter: none; transition: background .15s, border-color .15s;
}
.btn:hover { transform: none; box-shadow: none; filter: none; background: var(--vsm-vlak2); border-color: #c5c1b7; }
.btn-primary, .btn.btn-primary { background: var(--vsm-primair); border-color: var(--vsm-primair); color: var(--vsm-op-primair); }
.btn-primary:hover { background: var(--vsm-primair); border-color: var(--vsm-primair); filter: brightness(1.08); }
.btn-success, .btn-secondary, .btn-oranje, .btn-info, .btn-warning { background: var(--vsm-vlak); color: var(--vsm-inkt); border-color: var(--vsm-lijn-sterk); }
.btn-success i { color: var(--groen); }
.btn-oranje i { color: var(--vsm-primair-tekst); }
.btn-danger, .btn.btn-danger { background: var(--vsm-vlak); color: var(--vsm-fout); border-color: #e7b9bd; }
.btn-danger:hover { background: var(--vsm-fout-zacht); }
.btn-sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }
.btn-lg { padding: 12px 22px; font-size: 15px; min-height: 46px; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.delete-btn { background: var(--vsm-vlak); color: var(--vsm-fout); border: 1px solid #e7b9bd; border-radius: 6px; }
.delete-btn:hover { background: var(--vsm-fout-zacht); }
.edit-btn { background: var(--vsm-vlak); color: var(--vsm-inkt); border: 1px solid var(--vsm-lijn-sterk); border-radius: 6px; }
.edit-btn:hover { background: var(--vsm-vlak2); }

/* ── Formulieren ───────────────────────────────────────────────────────── */
.form-group label { font-weight: 600; font-size: 14px; color: var(--vsm-inkt); }
.form-control { border: 1px solid var(--vsm-lijn-sterk); border-radius: 8px; padding: 10px 12px; font-size: 15px; background: #fff; color: var(--vsm-inkt); }
.form-control:focus { border-color: var(--vsm-primair); box-shadow: 0 0 0 3px rgba(var(--vsm-primair-rgb), .15); }
.text-muted, .form-text { color: var(--vsm-grijs) !important; font-size: 13px; }

/* ── Meldingen en labels ───────────────────────────────────────────────── */
.alert { border-radius: 8px; padding: 12px 16px; font-size: 14px; background: var(--vsm-vlak2); border: 1px solid var(--vsm-lijn); }
.alert-success { background: var(--vsm-goed-zacht); color: var(--vsm-goed); border-color: #c6e3d3; }
.alert-danger { background: var(--vsm-fout-zacht); color: var(--vsm-fout); border-color: #f0c7ca; }
.alert-info { background: var(--vsm-info-zacht); color: var(--vsm-info); border-color: #c7dbec; }
.alert-warning { background: var(--vsm-let-zacht); color: var(--vsm-let); border-color: #f3dca8; }
.badge { border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.badge-success { background: var(--vsm-goed-zacht); color: var(--vsm-goed); }
.badge-primary { background: var(--vsm-primair-zacht); color: var(--vsm-primair-tekst); }
.badge-warning { background: var(--vsm-let-zacht); color: var(--vsm-let); }
.badge-secondary { background: #ecebe6; color: #4a4e55; }
.badge-info { background: var(--vsm-info-zacht); color: var(--vsm-info); }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.table th { background: none; color: var(--vsm-grijs); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--vsm-lijn); }
.table td { border-bottom: 1px solid var(--vsm-lijn-licht); }
.table tr:hover { background: var(--vsm-vlak2); }

/* ── Dashboard-tegels (styles.css) ─────────────────────────────────────── */
.stats-grid { gap: 0; border: 1px solid var(--vsm-lijn); border-radius: var(--vsm-radius); overflow: hidden; background: var(--vsm-vlak); }
.stat-card { background: var(--vsm-vlak); color: var(--vsm-inkt); box-shadow: none; border-radius: 0; text-align: left; padding: 18px 22px; border-left: 1px solid var(--vsm-lijn-licht); }
.stat-card:first-child { border-left: 0; }
.stat-number { font: 700 2.6rem/1 var(--vsm-cijfer); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.stat-label { color: var(--vsm-grijs); opacity: 1; font-size: 14px; }
.stat-sub { color: var(--vsm-grijs2); opacity: 1; }
.dash-plaats { font-family: var(--vsm-cijfer); color: var(--vsm-grijs2); }
.dash-top3 li:first-child { border-left: 0; }
.dash-top3 li:first-child .dash-plaats { color: var(--vsm-primair-tekst); }
.dash-punten { font: 700 1.3rem var(--vsm-cijfer); color: var(--vsm-inkt); }
.dash-kop { color: var(--vsm-inkt); }
.loading { color: var(--vsm-grijs); }

/* ── Subtabbladen (styles.css: spel-sub-nav, spellen.html: .tabs) ─────── */
.tabs, .spel-sub-nav-tabs { background: none !important; border: 0 !important; border-bottom: 1px solid #dddad2 !important; border-radius: 0 !important;
    padding: 0 !important; box-shadow: none !important; gap: 4px; margin-bottom: 22px; overflow-x: auto; }
.tab-btn, .spel-sub-nav-tab { flex: 0 0 auto !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
    border-bottom: 3px solid transparent !important; margin-bottom: -1px; padding: 12px 14px !important; color: var(--vsm-grijs) !important;
    font: 600 14px var(--vsm-letter) !important; min-height: 44px; white-space: nowrap; }
.tab-btn:hover, .spel-sub-nav-tab:hover { color: var(--vsm-inkt) !important; }
.tab-btn.actief, .spel-sub-nav-tab.active { color: var(--vsm-inkt) !important; border-bottom-color: var(--vsm-primair) !important; }

/* ── Stappen van de wizard (spellen.html) ─────────────────────────────── */
.stap-label { color: var(--vsm-grijs) !important; }
.stap-label.actief { color: var(--vsm-inkt) !important; }
.stap-streep { background: var(--vsm-lijn) !important; }
.stap-cirkel { background: var(--vsm-vlak); border-color: var(--vsm-lijn-sterk); font-family: var(--vsm-cijfer); font-size: 15px; }
.stap-cirkel.actief { color: var(--vsm-op-primair); }

/* ── Kaarten in spellen.html ───────────────────────────────────────────── */
.kaart { border-radius: var(--vsm-radius); box-shadow: none; }
.kaart-titel { font-family: var(--vsm-letter) !important; }
.ikon-blauw { background: var(--vsm-primair-zacht) !important; color: var(--vsm-primair-tekst) !important; }
.ikon-paars { background: #ecebe6 !important; color: #4a4e55 !important; }

/* ── Sessie (spellen.html): kop en uitklapmenu's Printen / Meer ────────── */
#detail-naam { font: 800 1.9rem/1.05 var(--vsm-cijfer) !important; color: var(--vsm-inkt); }
#detail-acties { flex-wrap: wrap; justify-content: flex-end; }
.tienkamp-acties { align-items: center; }
.vsm-uitklap { position: relative; }
.vsm-uitklap-pijl { font-size: 10px; margin-left: 2px; }
.vsm-uitklap-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; max-width: min(360px, 90vw); padding: 6px;
    background: var(--vsm-vlak); border: 1px solid var(--vsm-lijn); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    display: flex; flex-direction: column; gap: 2px; }
.vsm-uitklap-menu[hidden] { display: none; }
.vsm-uitklap-menu .btn { justify-content: flex-start; border: 0; background: none; min-height: 38px; padding: 8px 12px; font-weight: 500; text-align: left;
    white-space: normal; color: var(--vsm-inkt); }
.vsm-uitklap-menu .btn:hover { background: var(--vsm-grond); }
.vsm-uitklap-menu .btn i { width: 18px; color: var(--vsm-grijs); }
@media print { .vsm-uitklap-menu { display: none !important; } }

/* ── Overzicht (index.html#dashboard, js/ui/dashboard.js) ─────────────── */
.dash-kern { margin-bottom: 20px; }
.dash-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "programma klassement" "todo klassement"; gap: 20px; margin-bottom: 20px; align-items: start; }
.dash-raster .card { margin-bottom: 0; }
.dash-programma { grid-area: programma; }
.dash-klassement { grid-area: klassement; }
.dash-todo { grid-area: todo; }
@media (max-width: 900px) { .dash-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "programma" "klassement" "todo"; } }
.dash-klassement h3 > i:first-child { background: #fdf0d3; color: #a86b00; }
.dash-programma-lijst, .dash-todo-lijst { list-style: none; margin: 0; padding: 0; }
.dash-programma-lijst li + li { border-top: 1px solid var(--vsm-lijn-licht); }
.dash-programma-lijst a { display: flex; align-items: center; gap: 16px; padding: 11px 4px; color: var(--vsm-inkt); text-decoration: none; border-radius: 6px; }
.dash-programma-lijst a:hover { background: var(--vsm-vlak2); }
.dash-programma-lijst a > i { color: var(--vsm-grijs2); font-size: 12px; }
.dash-tijd { font: 700 1.35rem/1 var(--vsm-cijfer); min-width: 3.4em; font-variant-numeric: tabular-nums; }
.dash-tijd small { display: block; font: 500 12px var(--vsm-letter); color: var(--vsm-grijs); margin-top: 3px; }
.dash-sessie { flex: 1; min-width: 0; }
.dash-sessie b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-sessie small { color: var(--vsm-grijs); font-size: 13px; }
.dash-todo-lijst li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.dash-todo-lijst li i { color: var(--vsm-lijn-sterk); font-size: 15px; }
.dash-todo-lijst li.klaar { color: var(--vsm-grijs); }
.dash-todo-lijst li.klaar i { color: var(--vsm-goed); }
.dash-todo-lijst a { font-weight: 600; }
.dash-klaar { color: var(--vsm-goed); font-weight: 600; margin: 0 0 8px; }
.dash-top3 { list-style: none; margin: 0 0 12px; padding: 0; }
.dash-top3 li { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--vsm-lijn-licht); border-left: 0 !important; }
.dash-top3 li:last-child { border-bottom: 0; }
.dash-plaats { font: 700 1.4rem/1 var(--vsm-cijfer); min-width: 1.6em; text-align: center; color: var(--vsm-grijs2); }
.dash-top3 li.eerste .dash-plaats { color: #c98a10; }
.dash-naam { flex: 1; min-width: 0; font-weight: 600; }
.dash-naam small { display: block; font-weight: 400; color: var(--vsm-grijs); font-size: 12px; }
.dash-punten { font: 700 1.5rem/1 var(--vsm-cijfer); color: var(--vsm-inkt); }
.dash-top3 li.eerste .dash-punten { color: var(--vsm-primair-tekst); }
.dash-team { font-size: 14px; color: var(--vsm-grijs); margin: 0 0 12px; }
.dash-team i { color: var(--vsm-grijs2); margin-right: 4px; }
.dash-team b { color: var(--vsm-inkt); }
.dash-link { color: var(--vsm-primair-tekst); font-weight: 600; font-size: 14px; text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.dash-kop { font: 700 13px var(--vsm-letter); letter-spacing: .06em; text-transform: uppercase; color: var(--vsm-grijs); margin: 20px 0 8px; }
.dash-kop i { margin-right: 4px; }
.dash-feitjes { padding-left: 18px; margin: 0; }
.dash-feitjes li { margin-bottom: 6px; }
.dash-leeg { color: var(--vsm-grijs); }

/* Voettekst met productvermelding */
.vsm-voet { max-width: 1240px; margin: 0 auto; padding: 0 24px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--vsm-grijs); font-size: 12px; }
.vsm-voet img { width: 16px; height: 16px; vertical-align: -3px; margin: 0 4px; }
.vsm-voet b { font: 800 13px var(--vsm-cijfer); letter-spacing: .04em; color: var(--vsm-inkt); }
@media print { .vsm-voet { display: none; } }