/* Cloudworkspace — clubapp-ontwerpsysteem (v2, mobiel-eerst).
   Geen CDN (besluit B10): system-font-stack, inline SVG-iconen, vanilla CSS.

   Thema: base.html bindt de tenantkleuren aan --water (primair), --water-2 en
   --accent (secundair). Alle tinten, schaduwen en actieve staten worden met
   color-mix() daarvan afgeleid, zodat elke club er "eigen" uitziet met zijn
   kleuren + logo. Statuskleuren (groen/amber/rood) zijn bewust vast.

   Structuur: 1 tokens, 2 basis, 3 app-shell (header, zijbalk, tabbalk),
   4 componenten (knoppen, kaarten, lijsten, badges, formulieren, tabellen,
   lege staten), 5 modulespecifiek, 6 responsive, 7 legacy-aliassen.
   De smoketest-hooks (.top/.who/.nav/.btn.primary/.session-head/.kind/...)
   blijven structurele contracten. board.js is ongewijzigd. */

/* ---------- 1. Tokens ---------- */
:root {
    --ink: #14202b;
    --muted: #5a6a77;
    --line: #e2e8ee;
    --paper: #f4f6f9;
    --card: #fff;
    --water: #0f4c5c;   /* tenant-primair (base.html) */
    --water-2: #14718f;
    --accent: #d97706;  /* tenant-secundair */

    --tint-04: color-mix(in srgb, var(--water) 4%, #fff);
    --tint-08: color-mix(in srgb, var(--water) 8%, #fff);
    --tint-14: color-mix(in srgb, var(--water) 14%, #fff);
    --tint-24: color-mix(in srgb, var(--water) 24%, #fff);
    --ink-op-water: color-mix(in srgb, var(--water) 72%, #14202b);
    --ring: color-mix(in srgb, var(--water) 32%, transparent);
    --grad: linear-gradient(135deg, color-mix(in srgb, var(--water) 88%, #000), color-mix(in srgb, var(--water) 88%, #fff));

    --shadow-s: 0 1px 2px rgba(20, 32, 43, .06), 0 1px 1px rgba(20, 32, 43, .04);
    --shadow-m: 0 8px 24px rgba(20, 32, 43, .10);
    --shadow-l: 0 18px 44px rgba(20, 32, 43, .18);
    --radius-s: 10px;
    --radius-m: 14px;
    --radius-l: 18px;

    /* spacing-schaal */
    --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
    --tap: 44px;
    --nav-w: 236px;
    --tabbar-h: 62px;

    /* typografie-schaal */
    --fs-xs: .75rem; --fs-s: .85rem; --fs-m: 1rem; --fs-l: 1.15rem; --fs-xl: 1.5rem; --fs-xxl: 1.9rem;

    --ok: #157a45; --ok-bg: #e9f6ef; --ok-line: #b3ddc5;
    --warn: #8a5a00; --warn-bg: #fdf3d7; --warn-line: #ecd9a0;
    --no: #b42318; --no-bg: #fdecec; --no-line: #f3b4b4;
}

/* ---------- 2. Basis ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0 0 .45rem; line-height: 1.2; }
h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
h2 { font-size: var(--fs-l); font-weight: 750; letter-spacing: -.01em; }
h3 { font-size: var(--fs-m); font-weight: 700; }
p { margin: 0 0 .6rem; }
a { color: var(--water); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cw-lead { color: var(--muted); margin: .1rem 0 1.1rem; font-size: 1rem; }

/* ---------- 3. App-shell ---------- */
body { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-areas: "top top" "nav main"; grid-template-rows: auto 1fr; }
.top { grid-area: top; }
.nav { grid-area: nav; }
main { grid-area: main; }

.top {
    position: sticky; top: 0; z-index: 40;
    background: var(--grad);
    color: #fff;
    border-bottom: 4px solid var(--accent);
    box-shadow: var(--shadow-m);
}
.top a { color: #fff; }
.cw-top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: .55rem 1.2rem; min-height: 64px; }
.cw-top-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cw-top-brand > div { min-width: 0; }
.cw-logo { flex: none; height: 44px; max-width: 120px; width: auto; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.cw-crest { flex: none; width: 44px; height: 44px; color: #fff; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px; padding: 7px; }
.cw-brand { display: block; color: #fff; font-weight: 800; text-decoration: none; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-tagline-badge { margin: .1rem 0 0; font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.85); max-width: 52ch; }
.who { display: flex; align-items: center; gap: .6rem; color: #fff; flex: none; }
.who-naam { font-size: var(--fs-s); font-weight: 600; text-align: right; line-height: 1.2; }
.who-naam small { display: block; font-weight: 500; opacity: .8; font-size: var(--fs-xs); }
.who a { text-decoration: none; font-weight: 600; font-size: var(--fs-s); padding: .4rem .6rem; border-radius: 999px; }
.who a:hover { background: rgba(255,255,255,.16); }
.who form { margin: 0; display: inline; }
.who .btn { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); min-height: 38px; box-shadow: none; }
.who .btn:hover { background: #fff; color: var(--water); transform: none; }
/* Taalswitcher (i18n): NL/ES/EN-knoppen, geen JS */
.cw-taal { display: inline-flex; gap: 2px; padding: 2px; margin: 0; border-radius: 999px; background: rgba(255,255,255,.16); }
.cw-taal button { font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; min-width: 34px; min-height: 32px; padding: 0 .45rem; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; }
.cw-taal button:hover { background: rgba(255,255,255,.28); }
.cw-taal button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cw-taal button.actief { background: #fff; color: var(--water); cursor: default; }
.who .cw-taal { display: inline-flex; }
.cw-taal-groot { display: flex; background: #e6edf1; align-self: stretch; }
.cw-taal-groot button { flex: 1; min-height: 44px; color: var(--water); }
.cw-taal-groot button:hover { background: #d3dee5; }
.cw-taal-groot button.actief { background: var(--water); color: #fff; }
.av {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tint-14); color: var(--ink-op-water);
    font-weight: 800; font-size: .85rem; letter-spacing: .02em; text-transform: uppercase;
    border: 2px solid #fff; box-shadow: var(--shadow-s);
}
.av.sm { width: 32px; height: 32px; font-size: .75rem; border-width: 0; box-shadow: none; }
.av.lg { width: 56px; height: 56px; font-size: 1.15rem; }
.top .av { background: #fff; color: var(--water); border-color: rgba(255,255,255,.5); }

/* zijbalk (desktop) */
.nav {
    background: #fff; border-right: 1px solid var(--line);
    padding: 1rem .75rem; display: flex; flex-direction: column; gap: .15rem;
    position: sticky; top: 68px; align-self: start; height: calc(100vh - 68px); overflow-y: auto;
}
.nav a {
    display: flex; align-items: center; gap: .75rem;
    min-height: var(--tap); padding: .5rem .8rem;
    border-radius: var(--radius-s); text-decoration: none; color: var(--ink);
    font-weight: 600; font-size: .95rem; border: 0; background: transparent;
    transition: background .15s, color .15s;
}
.nav a .cw-icoon { color: var(--muted); }
.nav a:hover { background: var(--tint-08); color: var(--ink-op-water); }
.nav a.active { background: var(--tint-14); color: var(--ink-op-water); box-shadow: inset 4px 0 0 var(--water); }
.nav a.active .cw-icoon, .nav a:hover .cw-icoon { color: var(--water); }
.nav-kop { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; padding: .6rem .8rem .25rem; }

main { padding: 1.5rem 1.6rem 3rem; width: 100%; max-width: 1120px; margin: 0 auto; min-width: 0; }

/* tabbalk + meer-blad (alleen gsm) */
.tabbar, .meer { display: none; }

/* ---------- 4. Componenten ---------- */
/* knoppen */
:where(button), .btn, a.cw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: var(--tap); padding: .5rem 1.05rem;
    border-radius: var(--radius-s); border: 1px solid var(--line);
    background: #fff; color: var(--ink); font-weight: 650; font-size: .95rem; line-height: 1.2;
    text-decoration: none; text-align: center;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { border-color: var(--water); color: var(--ink-op-water); box-shadow: var(--shadow-s); }
.btn:active, :where(button):active { transform: scale(.98); }
.btn.primary, button.primary, a.cw-btn {
    background: var(--grad); color: #fff; border-color: transparent;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--water) 35%, transparent);
}
.btn.primary:hover, a.cw-btn:hover { filter: brightness(1.08); color: #fff; border-color: transparent; }
.btn.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.btn.no, button.danger, .btn.danger { background: var(--no-bg); border-color: var(--no-line); color: var(--no); }
.btn.secondary, button.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.on { outline: 2px solid var(--water); }
.btn.sm { min-height: 36px; padding: .3rem .75rem; font-size: var(--fs-s); }
.btn.block { display: flex; width: 100%; }
.btn .cw-icoon { width: 20px; height: 20px; }
/* knoppen zonder klasse (formulieren/tabelcellen): thema-primair; lage specificiteit zodat .btn/.tag/.tb-toolbar het overschrijven */
:where(button:not(.btn)) { background: var(--grad); color: #fff; border-color: transparent; }

/* paginakop */
.cw-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: 1rem; }
.cw-pagehead h1 { margin: 0; }
.cw-pagehead .cw-lead { margin: .15rem 0 0; }
.cw-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1.6rem 0 .6rem; }
.cw-sectionhead h2 { margin: 0; }
.cw-sectionhead a { font-weight: 650; font-size: var(--fs-s); text-decoration: none; }

/* kaarten */
.card, .cw-panel, .cw-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: 1.05rem 1.15rem; box-shadow: var(--shadow-s); color: inherit; text-decoration: none;
}
.cw-panel + .cw-panel { margin-top: var(--s4); }
a.card:hover, a.cw-card:hover { border-color: color-mix(in srgb, var(--water) 45%, var(--line)); box-shadow: var(--shadow-m); transform: translateY(-2px); color: inherit; }
.cw-card, a.card { display: block; transition: transform .16s, box-shadow .16s, border-color .16s; }
.card strong, .cw-card strong { display: block; margin-bottom: .2rem; font-size: 1.02rem; }
.card span, .cw-card span, .hint, .muted-text, .cw-muted { color: var(--muted); font-size: var(--fs-s); }
.hint { display: block; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.row, .cw-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.grid { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.cw-split { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* hero (volgende training / belangrijkste ding) */
.cw-hero {
    position: relative; overflow: hidden; color: #fff; text-decoration: none; display: block;
    background: var(--grad); border-radius: var(--radius-l); padding: 1.2rem 1.25rem;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--water) 32%, transparent);
}
.cw-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.1); }
.cw-hero-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; opacity: .85; margin: 0 0 .3rem; }
.cw-hero h2 { color: #fff; font-size: 1.35rem; margin: 0 0 .25rem; }
.cw-hero p { margin: 0; opacity: .92; font-size: .95rem; }
.cw-hero .btn { margin-top: .9rem; background: #fff; color: var(--water); border-color: transparent; position: relative; z-index: 1; }

/* dashboard-tegels */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: .75rem .85rem; box-shadow: var(--shadow-s); }
.stat b { display: block; font-size: 1.4rem; line-height: 1.1; color: var(--ink-op-water); }
.stat span { color: var(--muted); font-size: var(--fs-s); }
.cw-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1rem 0 1.2rem; }
.cw-dashboard .stat { display: flex; align-items: center; gap: .75rem; padding: .85rem .95rem; text-decoration: none; color: inherit; border-radius: var(--radius-l); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cw-dashboard .stat:hover { border-color: color-mix(in srgb, var(--water) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.cw-dashboard .stat.alert { border-color: var(--warn-line); background: var(--warn-bg); }
.cw-dashboard .stat b { font-size: 1.6rem; margin: 0; }
.cw-dashboard .stat .cw-stat-label { display: block; color: var(--muted); font-size: var(--fs-s); font-weight: 600; line-height: 1.2; }
.cw-stat-icoon { flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--tint-14); color: var(--water); }
.cw-stat-icoon svg { width: 22px; height: 22px; }
.cw-icoon { width: 24px; height: 24px; flex: none; }

/* snelkoppelingen (modules) */
.cw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.cw-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: var(--shadow-s); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cw-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: color-mix(in srgb, var(--water) 40%, var(--line)); }
.cw-tile .cw-stat-icoon { background: var(--grad); color: #fff; }
.cw-tile small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-s); margin-top: -.35rem; }

/* lijsten (vervangen tabellen) */
.cw-list { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); overflow: hidden; }
.cw-li { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; min-height: 60px; transition: background .12s; }
.cw-li:last-child { border-bottom: 0; }
a.cw-li:hover { background: var(--tint-04); color: inherit; }
.cw-li-main { flex: 1; min-width: 0; }
.cw-li-title { display: block; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cw-li-sub { display: block; color: var(--muted); font-size: var(--fs-s); line-height: 1.3; }
.cw-li-end { flex: none; display: flex; align-items: center; gap: .5rem; }
.cw-li .chev { color: var(--muted); width: 20px; height: 20px; }
.cw-li.is-done { opacity: .6; }
.cw-datebox { flex: none; width: 52px; text-align: center; border-radius: 12px; background: var(--tint-14); color: var(--ink-op-water); padding: .3rem 0; line-height: 1.05; }
.cw-datebox b { display: block; font-size: 1.3rem; font-weight: 800; }
.cw-datebox span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cw-datebox.today { background: var(--grad); color: #fff; }
.cw-datebox.today span, .cw-datebox.today b { color: #fff; }

/* segmented keuze (aanwezig / afwezig) */
.cw-seg { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.cw-seg-opt, .cw-seg .btn { min-height: var(--tap); min-width: 56px; }

/* sticky actiebalk onderaan (gsm) */
.cw-actionbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* pills / badges */
.pill { display: inline-flex; align-items: center; gap: .3rem; background: var(--tint-14); color: var(--ink-op-water); border-radius: 999px; padding: .15rem .65rem; font-size: var(--fs-s); font-weight: 650; border: 0; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.short { background: var(--no-bg); color: var(--no); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
a.pill { text-decoration: none; }
.kind { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--grad); font-weight: 750; border-radius: 6px; padding: .15rem .5rem; }
.cw-badge { display: inline-block; background: var(--tint-14); color: var(--ink-op-water); border-radius: 999px; padding: .15rem .6rem; font-size: var(--fs-xs); font-weight: 750; white-space: nowrap; }
.cw-badge.warn { background: var(--warn-bg); color: var(--warn); }
.cw-badge.ok { background: var(--ok-bg); color: var(--ok); }
.cw-badge.err { background: var(--no-bg); color: var(--no); }
.cw-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.cw-pills a { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; border-radius: 999px; padding: .3rem .95rem; font-size: .92rem; font-weight: 650; transition: background .15s, border-color .15s; }
.cw-pills a:hover { border-color: var(--water); background: var(--tint-04); }
.cw-pills a.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 2px 8px color-mix(in srgb, var(--water) 35%, transparent); }
.person { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); }

/* meldingen */
.messages-ok, .messages-error, .cw-ok, .cw-error { border-radius: var(--radius-s); padding: .7rem .95rem; margin: 0 0 1rem; font-weight: 600; border: 1px solid; border-left-width: 5px; }
.messages-ok, .cw-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); border-left-color: var(--ok); animation: cw-in .3s ease; }
.messages-error, .cw-error { background: var(--no-bg); color: var(--no); border-color: var(--no-line); border-left-color: var(--no); }
@keyframes cw-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cw-field-error { color: var(--no); font-size: var(--fs-s); font-weight: 600; margin: .15rem 0 .45rem; }

/* formulieren: één kolom, grote velden */
label { display: flex; flex-direction: column; gap: .3rem; font-size: var(--fs-s); font-weight: 650; color: var(--ink); }
.label-inline { flex-direction: row; align-items: center; }
input, select, textarea {
    width: 100%; max-width: 38rem; min-height: var(--tap);
    border: 1px solid #cdd7e0; border-radius: var(--radius-s); padding: .6rem .8rem;
    background: #fff; color: var(--ink); font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; max-width: none; accent-color: var(--water); flex: none; }
input[type="color"] { padding: .2rem; max-width: 6rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 3px var(--ring); }
textarea { min-height: 6rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-m); }
.cw-form p { margin: 0 0 .9rem; }
.cw-form label, .cw-field label { display: block; font-weight: 650; margin-bottom: .25rem; }
.cw-check { display: flex; gap: .55rem; align-items: center; font-weight: 500; min-height: var(--tap); }
.cw-check input { width: 22px; }
.cw-form .helptext, .helptext { color: var(--muted); font-size: var(--fs-s); display: block; }

/* tabellen */
table { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; }
.cw-table { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
th, td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--tint-04); }
tbody tr:hover { background: var(--tint-04); }
tbody tr:last-child td { border-bottom: 0; }
.cw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-m); }

/* lege staten */
.cw-empty { background: #fff; border: 1.5px dashed color-mix(in srgb, var(--water) 25%, var(--line)); border-radius: var(--radius-l); padding: 2rem 1.2rem; color: var(--muted); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.cw-empty-icoon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tint-14); color: var(--water); margin-bottom: .35rem; }
.cw-empty-icoon svg { width: 28px; height: 28px; }
.cw-empty-titel { font-weight: 750; color: var(--ink); font-size: 1.05rem; margin: 0; }
.cw-empty-tekst { margin: 0 0 .35rem; max-width: 46ch; }

/* ---------- 5. Modulespecifiek ---------- */
.session { border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; overflow: hidden; box-shadow: var(--shadow-s); transition: box-shadow .15s, border-color .15s; }
.session:hover { border-color: color-mix(in srgb, var(--water) 40%, var(--line)); box-shadow: var(--shadow-m); }
.session-head { width: 100%; display: flex; gap: .45rem .7rem; align-items: center; flex-wrap: wrap; text-align: left; background: transparent; border: 0; padding: .9rem 1.05rem; text-decoration: none; color: inherit; min-height: 60px; }
.session-head:hover { color: inherit; }
.session-body { padding: .2rem 1rem .9rem; background: #fff; }
.attendance-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .35rem; }
.attendance-table th, .attendance-table td { padding: .5rem .35rem; }
.attendance-badge-ok, .attendance-badge-no { display: inline-block; min-width: 1.6rem; padding: .1rem .4rem; font-weight: 650; border-radius: 6px; font-size: var(--fs-s); text-align: center; }
.attendance-badge-ok { background: var(--ok-bg); color: var(--ok); }
.attendance-badge-no { background: var(--no-bg); color: var(--no); }

.tag { border: 0; color: #fff; border-radius: 999px; padding: .55rem .9rem; font-weight: 650; min-height: var(--tap); }
.clock { font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 750; }
.pool { width: 100%; height: auto; background: #0d3d4a; border-radius: var(--radius-l); touch-action: none; box-shadow: var(--shadow-m); }
.pool.place-mode { outline: 3px solid var(--accent); }
.cw-veld { position: relative; background: var(--veld, #0d3d4a); border: 2px solid #475569; border-radius: var(--radius-l); overflow: hidden; touch-action: none; cursor: crosshair; box-shadow: var(--shadow-m); }
.cw-veld > svg.cw-veld-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cw-veld .cw-pin { z-index: 2; }
.cw-veld .cw-popover { z-index: 30; }

.video-frame, video { width: 100%; max-height: 70vh; background: #111; border-radius: var(--radius-l); }
.video-frame { aspect-ratio: 16/9; border: 0; }
.video-clip-card { border-left: 5px solid var(--water); }

.team-card { border-left: 5px solid var(--water); }
.team-members-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; padding: .6rem; background: var(--tint-04); border-radius: var(--radius-s); }
.team-member-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-s); }

/* login */
.cw-login-hero { display: grid; grid-template-columns: 1.05fr .95fr; max-width: 900px; margin: 1.5rem auto 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-l); border: 1px solid var(--line); }
.cw-login-kant { background: var(--grad); color: #fff; padding: 2.4rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: .7rem; border-bottom: 6px solid var(--accent); position: relative; overflow: hidden; }
.cw-login-kant::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.1); }
.cw-login-kant h1 { color: #fff; font-size: 1.8rem; margin: 0; }
.cw-login-kant p { color: rgba(255,255,255,.9); margin: 0; }
.cw-login-vorm { padding: 2.2rem 2rem; }
.cw-login-vorm h2 { margin-bottom: 1rem; }
.cw-login-vorm input { max-width: none; }
.cw-login-vorm .btn { width: 100%; }

/* ---------- Coordinaat-popover + tijdlijn ---------- */
.cw-popover { position: absolute; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 10px 26px rgba(16, 32, 51, .2); padding: .5rem .7rem; font-size: .85rem; max-width: 230px; pointer-events: none; }
.cw-timeline { position: relative; height: 20px; background: var(--tint-14); border-radius: 999px; margin: .5rem 0 .9rem; }
.cw-timeline-pin { position: absolute; top: 50%; width: 16px; height: 16px; min-height: 0; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); cursor: pointer; padding: 0; box-shadow: var(--shadow-s); }
.cw-timeline-pin:hover { transform: translate(-50%, -50%) scale(1.35); }
.cw-badge-btn { border: 0; color: #fff; border-radius: 999px; padding: .45rem .75rem; font-weight: 600; }

/* ---------- Tactisch bord ---------- */
svg.pool { width: 100%; max-width: 720px; height: auto; background: #0d3d4a; border-radius: var(--radius-l); display: block; touch-action: none; }

/* ---------- Afdruk ---------- */
.cw-print-block { break-inside: avoid; page-break-inside: avoid; }
.cw-print-plan svg { width: 100%; max-width: 480px; height: auto; background: #0d3d4a; border-radius: 8px; display: block; }
.cw-no-print { display: inline-flex; }
@page { size: A4; margin: 14mm; }
@media print {
    /* Trainingsplan: elke stap (fase) op een eigen A4-pagina, borden met kleur zoals op scherm */
    .cw-print-plan .cw-print-block { break-after: page; page-break-after: always; border: 0; box-shadow: none; padding: 0; }
    .cw-print-plan .cw-print-block:last-child { break-after: auto; page-break-after: auto; }
    .cw-print-plan svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; max-width: 100%; }
    .cw-print-plan figure { break-inside: avoid; page-break-inside: avoid; }
    .cw-no-print, .top, .nav, .tabbar, .meer { display: none !important; }
    body { display: block; background: #fff; }
    main { max-width: none; padding: 0; }
}

/* ---------- 6. Responsive ---------- */
@media (max-width: 1000px) { :root { --nav-w: 76px; } .nav a { flex-direction: column; gap: .15rem; font-size: .66rem; padding: .5rem .2rem; text-align: center; min-height: 58px; justify-content: center; } .nav-kop { display: none; } .nav { padding: .75rem .4rem; } .cw-tagline-badge { display: none; } }
@media (min-width: 860px) { .cw-split { grid-template-columns: 1.2fr .8fr; } }

@media (max-width: 760px) {
    body { display: block; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .top { position: sticky; }
    .cw-top-inner { padding: .45rem .9rem; min-height: 56px; }
    .cw-logo, .cw-crest { height: 38px; width: auto; }
    .cw-crest { width: 38px; }
    .cw-brand { font-size: 1.08rem; }
    .who-naam, .who a.who-profiel-tekst, .who .btn { display: none; }
    .nav { display: none; }
    main { padding: 1rem .9rem 1.5rem; }
    h1 { font-size: 1.4rem; }
    .grid { grid-template-columns: 1fr; }
    .cw-dashboard { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .cw-dashboard .stat { padding: .75rem; flex-direction: column; align-items: flex-start; gap: .4rem; }
    .cw-tiles { grid-template-columns: repeat(2, 1fr); }
    .cw-grid { grid-template-columns: 1fr; }
    .cw-login-hero { grid-template-columns: 1fr; margin: .25rem auto 0; border-radius: 18px; }
    .cw-login-kant { padding: 1.5rem 1.3rem; }
    .cw-login-vorm { padding: 1.4rem 1.3rem; }
    .cw-pills { flex-wrap: nowrap; overflow-x: auto; margin-inline: -.9rem; padding: 0 .9rem .3rem; scrollbar-width: none; }
    .cw-pills a { flex: none; }
    /* tabellen: scroll binnen eigen container, nooit de pagina */
    table:not(.attendance-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    input, select, textarea { max-width: none; }
    .btn.primary.cw-fab, .cw-fab { position: fixed; right: 1rem; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); z-index: 30; box-shadow: 0 8px 22px color-mix(in srgb, var(--water) 45%, transparent); border-radius: 999px; padding-inline: 1.3rem; }
    .cw-sticky-actions { position: sticky; bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); z-index: 20; background: linear-gradient(to top, var(--paper) 70%, transparent); padding: .8rem 0 .4rem; margin-inline: -.2rem; }
    .cw-sticky-actions .btn { flex: 1; }

    .tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(20, 32, 43, .08);
    }
    .tabbar a {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        text-decoration: none; color: var(--muted); font-size: .68rem; font-weight: 650; position: relative; min-height: var(--tap);
    }
    .tabbar a .cw-icoon { width: 24px; height: 24px; }
    .tabbar a.active { color: var(--water); }
    .tabbar a.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); }
    .meer { display: none; position: fixed; inset: 0; z-index: 60; }
    .meer:target { display: block; }
    .meer-bg { position: absolute; inset: 0; background: rgba(10, 20, 30, .5); }
    .meer-blad { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow: var(--shadow-l); animation: cw-up .22s ease; }
    .meer-blad::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 4px; background: var(--line); margin: 0 auto .9rem; }
    .meer-who { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
    .meer-who b { display: block; }
    .meer-who span { color: var(--muted); font-size: var(--fs-s); }
    .meer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
    .meer-grid a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .3rem; border-radius: var(--radius-m); background: var(--tint-04); color: var(--ink); text-decoration: none; font-weight: 650; font-size: .82rem; text-align: center; min-height: 78px; }
    .meer-grid a.active { background: var(--tint-14); color: var(--ink-op-water); }
    .meer-grid .cw-icoon { color: var(--water); width: 26px; height: 26px; }
    .meer-acties { display: flex; flex-direction: column; gap: .5rem; }
    .meer-acties form { margin: 0; }
    .meer-acties .btn { width: 100%; }
}
@keyframes cw-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 380px) { .cw-tiles { grid-template-columns: 1fr 1fr; } .cw-datebox { width: 46px; } }
@media (hover: none) { a.card:hover, a.cw-card:hover, .cw-tile:hover, .cw-dashboard .stat:hover { transform: none; } }

/* ---------- 7. Legacy-aliassen (bestaande templates) ---------- */
.cw-header, header.top { color: #fff; }
.cw-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.cw-nav a { color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-s); padding: .4rem .7rem; display: inline-block; }
.cw-account { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.cw-main { max-width: 1120px; margin: 0 auto; padding: 1rem; }
.item.on { outline: 2px solid var(--water); }
.list button.item, .list a.item { display: block; width: 100%; text-align: left; margin-bottom: .35rem; }

/* nav-iconen via CSS-masker: de linktekst blijft kaal (smoketest-contract) */
.nav a::before { content: ""; flex: none; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ni) center/contain no-repeat; mask: var(--ni) center/contain no-repeat; }
.nav a[href="/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 11 12 4l8.5 7%22%3E%3C/path%3E%3Cpath d=%22M5.5 9.8V20h13V9.8%22%3E%3C/path%3E%3Cpath d=%22M10 20v-5.5h4V20%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/teams/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228.5%22 cy=%228%22 r=%223.2%22%3E%3C/circle%3E  %3Cpath d=%22M2.8 19.5c0.6-3.1 2.9-4.8 5.7-4.8s5.1 1.7 5.7 4.8%22%3E%3C/path%3E  %3Ccircle cx=%2216.8%22 cy=%229.2%22 r=%222.4%22%3E%3C/circle%3E  %3Cpath d=%22M15.4 14.9c2.6 0.2 4.6 1.7 5.4 4.6%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/leden/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228.5%22 cy=%228%22 r=%223.2%22%3E%3C/circle%3E  %3Cpath d=%22M2.8 19.5c0.6-3.1 2.9-4.8 5.7-4.8s5.1 1.7 5.7 4.8%22%3E%3C/path%3E  %3Ccircle cx=%2216.8%22 cy=%229.2%22 r=%222.4%22%3E%3C/circle%3E  %3Cpath d=%22M15.4 14.9c2.6 0.2 4.6 1.7 5.4 4.6%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/aanwezigheid/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%225%22 width=%2217%22 height=%2215.5%22 rx=%222.5%22%3E%3C/rect%3E  %3Cpath d=%22M3.5 9.5h17%22%3E%3C/path%3E  %3Cpath d=%22M8 2.8v4%22%3E%3C/path%3E%3Cpath d=%22M16 2.8v4%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/boetepot/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22%3E%3C/circle%3E  %3Cpath d=%22M14.5 9.3c-0.6-0.8-1.5-1.2-2.6-1.2-1.6 0-2.8 0.8-2.8 2s1.1 1.7 2.9 2c2 0.3 3 0.9 3 2.2 0 1.3-1.3 2.1-3 2.1-1.3 0-2.3-0.4-3-1.3%22%3E%3C/path%3E  %3Cpath d=%22M12 6.2v11.6%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/ouders/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.8 4.8 5.4v5.9c0 4.6 3 7.9 7.2 9.7 4.2-1.8 7.2-5.1 7.2-9.7V5.4L12 2.8z%22%3E%3C/path%3E%3Cpath d=%22M8.8 12l2.4 2.4 4-4.6%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/instellingen/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h9M17 7h3M4 17h3M11 17h9%22%3E%3C/path%3E%3Ccircle cx=%2215%22 cy=%227%22 r=%222%22%3E%3C/circle%3E%3Ccircle cx=%229%22 cy=%2217%22 r=%222%22%3E%3C/circle%3E%3C/svg%3E"); }
.nav a[href="/mededelingen/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 15.5v-5a6 6 0 0 0-12 0v5l-1.6 2.3h15.2L18 15.5z%22%3E%3C/path%3E  %3Cpath d=%22M9.7 20a2.4 2.4 0 0 0 4.6 0%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/dossiers/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 6.2A1.7 1.7 0 0 1 5.2 4.5h4.1l2 2.6h7.5a1.7 1.7 0 0 1 1.7 1.7v9a1.7 1.7 0 0 1-1.7 1.7H5.2a1.7 1.7 0 0 1-1.7-1.7V6.2z%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/tactiek/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224.5%22 y=%223.5%22 width=%2215%22 height=%2217%22 rx=%222.5%22%3E%3C/rect%3E  %3Cpath d=%22M8.5 2.6v1.8%22%3E%3C/path%3E%3Cpath d=%22M15.5 2.6v1.8%22%3E%3C/path%3E  %3Cpath d=%22M8 9.5h5%22%3E%3C/path%3E  %3Cpath d=%22M8 13h8%22%3E%3C/path%3E  %3Cpath d=%22M8 16.5h4%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/video/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225.5%22 width=%2218%22 height=%2213%22 rx=%222.5%22%3E%3C/rect%3E  %3Cpath d=%22M10.2 9.4l4.8 2.6-4.8 2.6V9.4z%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a[href="/video/wedstrijden/"] { --ni: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20V4%22%3E%3C/path%3E%3Cpath d=%22M4 20h16%22%3E%3C/path%3E%3Cpath d=%22M8 16v-5%22%3E%3C/path%3E%3Cpath d=%22M12 16V8%22%3E%3C/path%3E%3Cpath d=%22M16 16v-3%22%3E%3C/path%3E%3C/svg%3E"); }
.nav a { --ni: none; }

/* ---------- Aanwezigheid ---------- */
.cw-filter { margin-bottom: .4rem; }
.cw-filter select { width: auto; min-width: 12rem; }
.session.is-past { opacity: .72; }
.session-head .cw-li-sub { white-space: normal; }
.cw-sessie-kaart .session-head { cursor: default; }
.cw-radio { position: relative; display: inline-flex; flex-direction: row; }
.cw-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cw-radio span { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: 56px; padding: .3rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 650; font-size: .88rem; color: var(--muted); transition: background .12s, color .12s, border-color .12s; }
.cw-radio input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }
.cw-radio.st-aanwezig input:checked + span { background: var(--ok); border-color: var(--ok); color: #fff; }
.cw-radio.st-afgemeld input:checked + span { background: var(--no); border-color: var(--no); color: #fff; }
.cw-radio input:checked + span { background: var(--water); border-color: var(--water); color: #fff; }
.cw-li-speler { align-items: flex-start; }
.cw-li-speler .cw-seg { margin: .4rem 0; }
.cw-reden { min-height: 38px; font-size: .9rem; padding: .35rem .7rem; max-width: 24rem; }
.cw-status-groot { font-size: 1.1rem; }
.cw-live-telling { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.cw-live-n { background: var(--tint-08); border-radius: 999px; padding: .25rem .8rem; font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.cw-live-n b { font-size: 1.05rem; color: var(--ink); }
.cw-live-n.ok { background: var(--ok-bg); color: var(--ok); } .cw-live-n.ok b { color: var(--ok); }
.cw-live-n.no { background: var(--no-bg); color: var(--no); } .cw-live-n.no b { color: var(--no); }
.cw-live-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cw-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem .25rem .3rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: var(--fs-s); }
.cw-bar { display: block; height: 6px; border-radius: 4px; background: var(--tint-14); margin-top: .35rem; overflow: hidden; }
.cw-bar i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
@media (max-width: 760px) { .cw-reden { max-width: none; } .cw-radio span { flex: 1; } .cw-seg { width: 100%; } .cw-radio { flex: 1; } }
.cw-li-title { overflow-wrap: break-word; }
@media (max-width: 760px) {
    .session-head .cw-li-end .kind { display: none; }
    .cw-radio span { min-width: 0; padding: .3rem .35rem; width: 100%; font-size: .82rem; }
    .cw-li-speler .av { display: none; }
    .cw-li-speler { padding-inline: .8rem; }
}

/* ---------- Boetepot ---------- */
.cw-bedrag { font-size: 2.2rem !important; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cw-hero + .cw-sectionhead { margin-top: 1.6rem; }
form.cw-li-end { margin: 0; }

/* ---------- Ouderportaal ---------- */
.cw-kind-kaart { display: flex !important; align-items: center; gap: .9rem; }
.cw-afmeld.is-afgemeld { border-left: 5px solid var(--no); background: var(--no-bg); }
.cw-afmeld-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; }
.cw-afmeld-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.cw-afmeld-form input { flex: 1 1 12rem; }
.cw-afmeld-form .btn { flex: 0 0 auto; }
@media (max-width: 760px) { .cw-afmeld-form .btn { flex: 1 1 100%; } }

/* checkbox/radio met tekst: rij, groot tapdoel */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { flex-direction: row; align-items: center; gap: .6rem; min-height: var(--tap); font-weight: 500; font-size: 1rem; }
.cw-bericht-tekst { font-size: 1.02rem; line-height: 1.65; margin: .9rem 0 0; }
@media (max-width: 760px) { main { padding-bottom: 5.5rem; } .cw-li .av { width: 34px; height: 34px; } }

/* ---------- Leden / profiel ---------- */
.cw-filterbar { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.cw-filterbar p { margin: 0; }
.cw-filterbar input, .cw-filterbar select { max-width: none; }
.cw-filter-acties { display: flex; gap: .5rem; }
@media (max-width: 760px) { .cw-filterbar { grid-template-columns: 1fr; } .cw-filter-acties .btn { flex: 1; } }
.cw-profielkop { display: flex; align-items: center; gap: 1rem; }
.cw-profielkop > div { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }

/* ---------- Dossiers: tijdlijn en uitklapformulieren ---------- */
.cw-rail { position: relative; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .75rem; }
.cw-rail::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--tint-24); border-radius: 2px; }
.cw-rail-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: .75rem 1rem; box-shadow: var(--shadow-s); }
.cw-rail-item::before { content: ""; position: absolute; left: -1.4rem; top: 1.05rem; width: 14px; height: 14px; border-radius: 50%; background: var(--water); border: 3px solid var(--paper); }
.cw-rail-item.measure::before { background: var(--accent); }
.cw-rail-item.test::before { background: var(--ok); }
.cw-rail-item p { margin: 0 0 .2rem; }
.cw-acc { padding: 0; }
.cw-acc > summary { list-style: none; cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; }
.cw-acc > summary::-webkit-details-marker { display: none; }
.cw-acc > summary::after { content: "+"; font-size: 1.4rem; color: var(--water); line-height: 1; }
.cw-acc[open] > summary::after { content: "–"; }
.cw-acc > form, .cw-acc > .cw-form { padding: 0 1.1rem 1.1rem; }

/* ---------- Video ---------- */
.cw-play { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cw-play .cw-icoon { width: 26px; height: 26px; }
.cw-plainlist { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.cw-plainlist li { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.cw-plainlist li:last-child { border-bottom: 0; }
.cw-plainlist a { font-weight: 700; }
fieldset { margin: 0 0 1rem; }
legend { font-weight: 700; padding: 0 .4rem; }

/* ---------- Match tracker / analyse ---------- */
.cw-klokkaart { text-align: center; }
.cw-klokkaart .clock { font-size: 3rem; margin: 0 0 .6rem; line-height: 1; color: var(--ink-op-water); }
.cw-klokkaart .row { justify-content: center; }
.cw-klokkaart form { margin: 0; }
.cw-veld { max-width: 100%; }
.cw-veld .cw-pin { min-width: 20px !important; min-height: 20px !important; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); padding: 0; }
.cw-veld .cw-pin::after { content: ""; position: absolute; inset: -10px; }
.cw-panel .tag { margin: 0; }
@media (max-width: 760px) {
    .cw-klokkaart .clock { font-size: 2.6rem; }
    .cw-klokkaart .row .btn { flex: 1 1 auto; }
    .cw-panel .tag { flex: 1 1 calc(50% - .5rem); margin: 0; font-size: 1rem; }
    .cw-veld { margin-inline: -.3rem; border-radius: var(--radius-m); }
}

.cw-fout { margin-top: 2rem; padding: 2.5rem 1.2rem; }
.cw-fout h1 { font-size: 1.4rem; }
/* Django-formulierfouten (form.as_p) */
.errorlist { list-style: none; margin: 0 0 .4rem; padding: 0; color: var(--no); font-weight: 600; font-size: var(--fs-s); }
.cw-form p, form p { margin: 0 0 .9rem; }
p.hint > a { display: inline-block; padding: .65rem .35rem; margin: -.4rem -.35rem; }
.cw-brand { padding: .5rem 0; }

/* Destructieve acties: apart, klein, nooit in de sticky actiebalk */
.cw-gevaar { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cw-bevestig { max-width: 32rem; }

/* home-hero en aandachtslijst */
.cw-hero-sessie { margin-bottom: 1rem; }
.cw-hero-sessie .btn { display: inline-flex; }
.cw-aandacht .cw-li { text-decoration: none; color: inherit; }
.cw-aandacht .cw-li-waarschuwing .cw-stat-icoon { background: var(--warn-bg); color: var(--warn); }

/* ---------- Tactiek: planeditor (een scherm: bord + gereedschap + stappen + opslaan) ---------- */
/* Focusmodus: op laptop wordt het menu een smalle iconenrail, zodat het bord ruimte krijgt. */
@media (min-width: 761px) {
    body.cw-focus { --nav-w: 76px; }
    body.cw-focus .nav { padding: .75rem .4rem; }
    body.cw-focus .nav a { flex-direction: column; gap: .15rem; font-size: .66rem; padding: .5rem .2rem; text-align: center; min-height: 58px; justify-content: center; }
    body.cw-focus .nav-kop { display: none; }
    /* geen vaste 100vh-hoogte: die rekte de pagina net voorbij het scherm */
    body.cw-focus .nav { height: auto; max-height: calc(100vh - 68px); }
    body.cw-focus main { max-width: none; padding: .5rem 1rem .4rem; }
}
.cw-ed { display: flex; flex-direction: column; gap: .5rem; }
.cw-ed-head {
    position: sticky; top: 68px; z-index: 30; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: .35rem .6rem; box-shadow: var(--shadow-s);
}
.cw-ed-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-s); color: var(--ink-op-water); text-decoration: none; flex: none; }
.cw-ed-back:hover { background: var(--tint-08); }
.cw-ed-back .cw-icoon { width: 24px; height: 24px; }
.cw-ed-titel { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.cw-ed-titel input { max-width: none; font-size: 1.15rem; font-weight: 750; border-color: transparent; background: transparent; letter-spacing: -.01em; }
.cw-ed-titel input:hover { border-color: var(--line); background: #fff; }
.cw-ed-titel input:focus { background: #fff; }
.cw-ed-meta { position: relative; flex: none; }
.cw-ed-meta > summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: var(--radius-s); font-weight: 650; font-size: var(--fs-s); background: #fff; }
.cw-ed-meta > summary::-webkit-details-marker { display: none; }
.cw-ed-meta > summary::after { content: "▾"; color: var(--water); }
.cw-ed-meta[open] > summary { border-color: var(--water); background: var(--tint-08); }
.cw-ed-meta-body { position: absolute; right: 0; top: calc(100% + 6px); width: min(22rem, 90vw); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 12px 30px rgba(20, 32, 43, .22); padding: 1rem; }
.cw-ed-meta-body p { margin: 0 0 .7rem; }
.cw-ed-meta-body input, .cw-ed-meta-body select { max-width: none; }
.cw-ed-meta-links { display: flex; gap: .6rem 1rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 0 !important; padding-top: .7rem; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.cw-ed-save { display: flex; align-items: center; gap: .7rem; flex: none; margin-left: auto; }
.cw-ed-save .btn.primary { min-height: 46px; padding-inline: 1.6rem; font-size: 1.05rem; }
.cw-status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-s); font-weight: 700; color: var(--ok); }
.cw-status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }
.cw-status[data-state="dirty"] { color: var(--warn); }
.cw-status[data-state="saving"] { color: var(--muted); }
.cw-status[data-state="saving"]::before { animation: cw-puls 1s ease-in-out infinite; }
.cw-status[data-state="error"] { color: var(--no); }
@keyframes cw-puls { 50% { opacity: .25; } }
.cw-ed-herstel { margin: 0; }

.cw-ed-main { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: .8rem; align-items: start; }
.cw-ed-bord { min-width: 0; }
.cw-bord { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: .5rem; display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: .7rem; box-shadow: var(--shadow-s); }

/* gereedschap (links) */
.tb-tools { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.tb-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.tb-tool {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 52px; padding: .3rem .1rem; border: 1px solid var(--line); border-radius: var(--radius-s);
    background: #fff; color: var(--ink); font-size: .7rem; font-weight: 650; line-height: 1.1;
}
.tb-tool:hover { border-color: var(--water); background: var(--tint-04); }
.tb-tool.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 2px 8px color-mix(in srgb, var(--water) 40%, transparent); }
.tb-tool .tb-ico { width: 22px; height: 22px; }
.tb-tool-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-tool kbd { position: absolute; top: 2px; right: 3px; font: 600 .6rem/1 system-ui, sans-serif; opacity: .55; }
.tb-pion { overflow: visible; }
.tb-colors { display: flex; gap: .3rem; justify-content: space-between; }
.tb-colors .swatch { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.tb-colors .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.tb-colors .swatch[data-color="#f5d90a"] { background: #f5d90a; }
.tb-colors .swatch[data-color="#ffffff"] { background: #fff; }
.tb-colors .swatch[data-color="#2563eb"] { background: #2563eb; }
.tb-colors .swatch[data-color="#dc2626"] { background: #dc2626; }
.tb-labelfield { font-size: .7rem; gap: .15rem; }
.tb-labelfield input { min-height: 38px; padding: .3rem .5rem; font-size: .95rem; }
.tb-edit { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }

/* knoppen op het bord (neutraal, thema via --water) */
.tb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap;
    min-height: 40px; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s);
    background: #fff; color: var(--ink); font-size: .85rem; font-weight: 650;
}
.tb-btn:hover:not(:disabled) { border-color: var(--water); color: var(--ink-op-water); background: var(--tint-04); }
.tb-btn.active { background: var(--tint-14); border-color: var(--water); color: var(--ink-op-water); }
.tb-btn:disabled { opacity: .4; cursor: default; }
.tb-btn.tb-icon { min-width: 40px; padding: .3rem; }
.tb-btn.tb-primair { background: var(--grad); color: #fff; border-color: transparent; }
.tb-btn.tb-primair:hover:not(:disabled) { color: #fff; filter: brightness(1.1); background: var(--grad); }
.tb-btn.no { background: var(--no-bg); border-color: var(--no-line); color: var(--no); }
.tb-ico { width: 18px; height: 18px; flex: none; }
.tb-tool:focus-visible, .tb-btn:focus-visible, .tb-chip:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }

/* bord (midden) */
.tb-stage { display: flex; flex-direction: column; gap: .35rem; min-width: 0; align-items: center; }
.tb-options { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; width: 100%; }
.tb-group { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.tb-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; }
.tb-caption-t { font-weight: 750; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-hint { color: var(--muted); font-size: .78rem; text-align: right; }
svg.pool {
    --bord-ar: 1.25;
    display: block; width: min(100%, calc((100vh - 19.9rem) * var(--bord-ar))); max-width: 100%; min-width: 14rem; height: auto; aspect-ratio: var(--bord-ar);
    background: #0d3d4a; border-radius: var(--radius-m); touch-action: none; user-select: none; -webkit-user-select: none;
}
svg.pool[data-tool="select"] { cursor: default; }
svg.pool:not([data-tool="select"]) { cursor: crosshair; }
svg.pool .tb-item { cursor: grab; }
svg.pool line.tb-item.is-selected, svg.pool rect.tb-item.is-selected { stroke-width: 5; filter: drop-shadow(0 0 2px #fff); }
.tb-step-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; width: 100%; padding: .35rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); }
.tb-step-title { font-weight: 750; font-size: .72rem; color: var(--ink-op-water); text-transform: uppercase; letter-spacing: .05em; }
.tb-step-count { font-size: .8rem; color: var(--muted); font-weight: 650; min-width: 4.2rem; }
.tb-steps-list { display: flex; gap: .25rem; flex-wrap: wrap; }
.tb-chip { min-width: 36px; min-height: 36px; padding: 0 .4rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--ink); font-weight: 750; }
.tb-chip:hover { border-color: var(--water); }
.tb-chip.active { background: var(--grad); color: #fff; border-color: transparent; }
.tb-play { margin-left: auto; }

/* stappen (rechts) */
.cw-ed-stappen { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: .7rem; box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: .5rem; min-width: 0; max-height: calc(100vh - 10.5rem); }
.cw-st-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cw-st-head h2 { margin: 0; font-size: 1.05rem; }
.cw-st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; overflow-y: auto; min-height: 0; }
.cw-st { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .3rem; background: var(--paper); }
.cw-st[hidden] { display: none; }
.cw-st.is-actief { background: var(--tint-08); border-color: var(--water); box-shadow: inset 4px 0 0 var(--water); }
.cw-st-rij { display: flex; align-items: center; gap: .3rem; }
.cw-st-nr { flex: none; width: 36px; height: 36px; min-height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-op-water); font-weight: 800; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
button.cw-st-nr:hover { border-color: var(--water); }
.cw-st.is-actief .cw-st-nr { background: var(--grad); color: #fff; border-color: transparent; }
.cw-st-titel { flex: 1; min-width: 0; min-height: 38px; padding: .3rem .5rem; font-size: .92rem; font-weight: 650; }
.cw-st-min { flex: none; width: 4rem; min-height: 38px; padding: .3rem .4rem; font-size: .92rem; text-align: right; }
.cw-st-del { flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: var(--muted); }
.cw-st-del:hover { background: var(--no-bg); color: var(--no); border-color: var(--no-line); }
.cw-st-del .cw-icoon { width: 18px; height: 18px; }
.cw-st-notitie { display: none; margin-top: .35rem; }
.cw-st.is-actief .cw-st-notitie { display: block; }
.cw-st-notitie label { font-size: .75rem; color: var(--muted); margin-bottom: .15rem; }
.cw-st-notitie textarea { min-height: 4.2rem; max-width: none; font-size: .9rem; padding: .4rem .55rem; }
.cw-st-leeg { margin: 0; }
.cw-st-acties { display: flex; gap: .4rem; flex-wrap: wrap; }
.cw-st-acties .btn { flex: 1 1 auto; }
.cw-lib { border: 1px solid var(--line); border-radius: var(--radius-m, 8px); background: #f7f9fb; padding: .5rem; display: flex; flex-direction: column; gap: .3rem; flex: none; font-size: .9rem; }
.cw-lib[hidden], .cw-lib-msg[hidden], .cw-lib-dup[hidden] { display: none; }
.cw-lib label { font-size: .85rem; }
.cw-lib-scope label { font-size: .85rem; line-height: 1.2; }
.cw-lib input[type="radio"] { margin-top: .15rem; }
.cw-lib input[type="text"], .cw-lib select { width: 100%; }
.cw-lib-scope { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.cw-lib-scope label { display: flex; gap: .4rem; align-items: flex-start; }
.cw-lib-acties, .cw-lib-dup { display: flex; gap: .4rem; margin: 0; }
.cw-lib-msg { margin: 0; font-size: .9rem; }
.cw-keys { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--muted); }
.cw-keys b { color: var(--ink); }

/* tablet: stappen onder het bord */
@media (max-width: 1100px) {
    .cw-ed-main { grid-template-columns: 1fr; }
    .cw-ed-stappen { max-height: none; }
    svg.pool { width: min(100%, calc((100vh - 17rem) * var(--bord-ar))); }
}
/* telefoon: gereedschap als horizontale strip boven het bord */
@media (max-width: 760px) {
    .cw-ed-head { top: 60px; gap: .4rem; padding: .3rem .4rem; }
    .cw-ed-titel { flex-basis: 8rem; }
    .cw-ed-meta { order: 5; flex: 1 1 100%; }
    .cw-ed-meta > summary { width: 100%; justify-content: space-between; }
    .cw-ed-meta-body { position: static; width: auto; margin-top: .4rem; box-shadow: none; }
    .cw-ed-save .cw-status { font-size: 0; gap: 0; }
    .cw-ed-save .cw-status::before { width: .8rem; height: .8rem; }
    .cw-ed-save .btn.primary { padding-inline: 1rem; }
    .cw-bord { grid-template-columns: 1fr; padding: .35rem; margin-inline: -.3rem; }
    .tb-tools { position: sticky; top: 118px; z-index: 15; background: #fff; padding-bottom: .25rem; flex-direction: row; align-items: stretch; overflow-x: auto; scrollbar-width: thin; gap: .5rem; }
    .tb-tool-grid { display: flex; flex: none; gap: .25rem; }
    .tb-tool { flex: none; width: 56px; min-height: 56px; }
    .tb-colors { flex: none; flex-wrap: wrap; width: 70px; align-content: center; gap: .3rem; justify-content: center; }
    .tb-labelfield { flex: none; width: 7rem; }
    .tb-edit { flex: none; display: flex; }
    .tb-btn { min-height: 44px; }
    .tb-btn.tb-icon { min-width: 44px; }
    .tb-chip { min-width: 44px; min-height: 44px; }
    .tb-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: .2rem; }
    .tb-options > * { flex: none; }
    .tb-caption { flex-direction: column; gap: 0; }
    .pool-hint { text-align: left; }
    svg.pool { width: 100%; min-width: 0; }
    .tb-play { margin-left: 0; }
    .cw-st-del, .cw-st-nr { width: 44px; height: 44px; min-height: 44px; }
    .cw-st-titel, .cw-st-min { min-height: 44px; }
    .cw-keys { display: none; }
}
@media (hover: none) { .tb-tool kbd, .cw-keys { display: none; } }

/* ---------- Video: tagger, tagvenster, clips ---------- */
.vt [hidden], .vt-pop [hidden], .vt-dialog [hidden] { display: none !important; }
.vt { display: flex; flex-direction: column; gap: .5rem; }
.vt-head { top: 0; }
.vt-title { margin: 0; font-size: 1.1rem; flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-headacts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-left: auto; }
.vt-link { font-size: var(--fs-s); font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.vt-link::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.vt-link[data-state="ok"] { color: var(--ok); }
.vt-link[data-state="off"] { color: var(--muted); }
.vt-errors { margin: 0; display: grid; gap: .3rem; }
.vt-err { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.vt-notice { margin: 0; padding: .4rem .8rem; border-radius: var(--radius-s); background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); font-weight: 650; }
.vt-notice[data-bad="1"] { background: var(--no-bg); border-color: var(--no-line); color: var(--no); }
.vt-main { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: .8rem; align-items: start; }
.vt-left, .vt-right { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.vt-stagebox { position: relative; background: #111; border-radius: var(--radius-m); overflow: hidden; }
.vt-stagebox iframe, .vt-stagebox video, .vt-stagebox .vt-noplayer { display: block; width: 100%; max-height: 62vh; aspect-ratio: 16/9; border: 0; background: #111; border-radius: 0; }
.vt-noplayer { color: #fff; display: grid; place-items: center; padding: 1rem; text-align: center; }
.vt-noplayer a { color: #fff; }
.vt-playerstate { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; margin: 0; padding: .4rem .7rem; background: rgba(180, 35, 24, .92); color: #fff; border-radius: var(--radius-s); font-weight: 650; }
.vt-manual { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.vt-manual input { width: 6rem; max-width: none; }
.vt-timeline { position: relative; height: 34px; cursor: pointer; margin: .2rem 0; touch-action: manipulation; }
.vt-track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 999px; background: var(--tint-14); }
.vt-clipbars { position: absolute; left: 0; right: 0; top: 13px; height: 8px; }
.vt-clipbar { position: absolute; top: 0; height: 8px; background: color-mix(in srgb, var(--water) 55%, transparent); border-radius: 4px; min-width: 4px; }
.vt-selrange { position: absolute; top: 9px; height: 16px; background: color-mix(in srgb, var(--accent) 40%, transparent); border: 1px solid var(--accent); border-radius: 4px; pointer-events: none; }
.vt-markers { position: absolute; inset: 0; pointer-events: none; }
.vt-marker { position: absolute; top: 50%; width: 14px; height: 14px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: var(--shadow-s); pointer-events: auto; cursor: pointer; }
.vt-marker:hover, .vt-marker:focus-visible { transform: translate(-50%, -50%) scale(1.4); }
.vt-marker.vt-bad { border-color: var(--no); }
.vt-playhead { position: absolute; top: 3px; bottom: 3px; width: 2px; background: var(--ink); pointer-events: none; transform: translateX(-1px); }
.vt-transport, .vt-cliptools { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.vt-transport .btn.sm, .vt-cliptools .btn.sm { min-height: 38px; }
.vt-transport select { max-width: 6rem; min-height: 38px; }
.vt-clock { font-variant-numeric: tabular-nums; font-weight: 650; margin-left: auto; }
.vt-cliptools .vt-clock { margin-left: .3rem; margin-right: auto; }
.vt-listhead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: space-between; margin-top: .2rem; }
.vt-h2 { font-size: 1rem; margin: 0; }
.vt-filters { display: flex; gap: .3rem; flex: 1; justify-content: flex-end; min-width: 0; }
.vt-filters select { flex: 1 1 0; min-width: 0; max-width: 9rem; min-height: 34px; padding: .2rem .4rem; font-size: .8rem; }
.vt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.vt-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); font-size: var(--fs-s); }
.vt-row.vt-pend { opacity: .6; }
.vt-row.vt-bad { border-color: var(--no); background: var(--no-bg); }
.vt-time { font-variant-numeric: tabular-nums; font-weight: 700; min-height: 0; padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--tint-04); color: var(--ink); }
.vt-pill { color: #fff; border-radius: 999px; padding: .1rem .6rem; font-weight: 700; }
.vt-info { color: var(--muted); }
.vt-note { font-style: italic; }
.vt-acts { margin-left: auto; display: inline-flex; gap: .25rem; }
.vt-acts .btn.sm { min-height: 30px; padding: .1rem .6rem; }
.vt-opts p { margin: 0 0 .4rem; }
.vt-opts label { font-size: var(--fs-s); font-weight: 650; display: block; }
.vt-opts select, .vt-opts input[type=text] { max-width: none; min-height: 38px; padding-block: .25rem; }
.vt-opts label { margin-bottom: .1rem; }
.vt-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.vt-sides { display: flex; gap: .3rem; border: 0; padding: 0; margin: 0 0 .4rem; }
.vt-side { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: .2rem .25rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.1; }
.vt-side input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vt-side:has(input:checked) { background: var(--grad); color: #fff; border-color: transparent; }
.vt-side:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 1px; }
.vt-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; max-height: calc(100vh - 31rem); min-height: 9rem; overflow-y: auto; padding: .1rem; align-content: start; }
.vt-tags.vt-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-tags.vt-dense .vt-tagbtn { min-height: 46px; font-size: .82rem; }
.vt-tags-big { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
.vt-tagbtn { position: relative; border: 0; color: #fff; border-radius: var(--radius-s); min-height: 52px; padding: .4rem .5rem; font-weight: 700; font-size: .95rem; text-shadow: 0 1px 1px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }
.vt-tagbtn kbd { position: absolute; top: 3px; right: 5px; font: 700 .65rem/1 system-ui, sans-serif; opacity: .8; }
.vt-tagbtn:active, .vt-tagbtn.vt-hit { transform: scale(.96); filter: brightness(1.2); }
.vt-tagbtn:disabled { opacity: .45; }
.vt-keys { margin: 0; }
.vt-fielddet summary { cursor: pointer; font-weight: 650; }
.vt-dialog { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.2rem; width: min(30rem, 94vw); box-shadow: var(--shadow-l); }
.vt-dialog::backdrop { background: rgba(20, 32, 43, .45); }
.vt-dialog h2 { margin-top: 0; font-size: 1.1rem; }
.vt-dialog p { margin: 0 0 .6rem; }
.vt-dlgacts { display: flex; gap: .5rem; justify-content: flex-end; }
.vt-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .1rem .6rem; max-height: 9rem; overflow-y: auto; }
.vt-detailgrid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.vt-cliplist li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.vt-rangebar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.vt-linkfield { max-width: 28rem; font-size: var(--fs-s); }
.vt-clipnote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .5rem .8rem; }
.vt-filterbar { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.vt-filterbar select { max-width: 12rem; }
.vt-kant { margin: .3rem 0; display: flex; gap: .5rem; align-items: center; }
/* tagvenster (popup) */
body.vt-popup { background: var(--paper); }
.vt-pop { max-width: 34rem; margin: 0 auto; padding: .6rem .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.vt-pophead { display: flex; gap: .6rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
body.vt-disconnected .vt-tags { opacity: .5; }
@media (min-width: 761px) {
    body.vt-page .vt-main { height: calc(100vh - 10rem); min-height: 28rem; }
    body.vt-page .vt-left { overflow-y: auto; padding-right: .2rem; }
    body.vt-page .vt-right { overflow-y: auto; max-height: 100%; }
    body.vt-page .vt-stagebox iframe, body.vt-page .vt-stagebox video, body.vt-page .vt-stagebox .vt-noplayer { max-height: 38vh; }
    body.vt-page .vt-stagebox { display: flex; justify-content: center; }
    body.vt-page .vt-stagebox iframe, body.vt-page .vt-stagebox video { width: auto; max-width: 100%; height: 38vh; }
    body.vt-page .vt-tags { max-height: none; flex: 1; }
}
@media (max-width: 900px) {
    /* een-venster-layout (telefoon/tablet): speler, bediening en tagknoppen eerst, dan de lijst; geen popup */
    .vt-main { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
    .vt-left, .vt-right { display: contents; }
    body.vt-page .vt-main { height: auto; min-height: 0; }
    body.vt-page .vt-left, body.vt-page .vt-right { overflow: visible; max-height: none; }
    body.vt-page .vt-stagebox iframe, body.vt-page .vt-stagebox video { width: 100%; height: auto; max-height: 56vh; }
    body.vt-page .vt-tags { max-height: none; overflow: visible; flex: none; }
    .vt-right > * { order: 1; }
    .vt-listhead, .vt-list, #vt-empty { order: 2; }
    #vt-open-controls, #vt-link { display: none; }
    .vt-main, .vt-detailgrid { grid-template-columns: minmax(0, 1fr); }
    .vt-tags { max-height: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .vt-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vt-clock { margin-left: 0; } }
.vt-sub { font-size: var(--fs-s); font-weight: 700; color: var(--muted); margin: .3rem 0 .1rem !important; }
.vt-inl { display: inline-flex; align-items: center; gap: .4rem; margin-right: .8rem; }
.vt-inl select { width: auto; min-width: 8rem; }

/* --- Spelersfiche ------------------------------------------------------ */
.cw-fichekop { display: flex; flex-direction: column; gap: .75rem; }
.cw-fichekop-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cw-fichekop-main { flex: 1; min-width: 12rem; display: grid; gap: .2rem; justify-items: start; }
.cw-fichekop-main .cw-li-sub { overflow-wrap: anywhere; }
.cw-fichekop-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.cw-ouderinfo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding-top: .75rem; border-top: 1px solid var(--line, #d9e2ea); }
.cw-ouderinfo-label { color: var(--muted); font-size: var(--fs-s); font-weight: 650; }
.cw-ouderinfo-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.cw-ouderinfo-lijst li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cw-uitn-rij form { margin: 0; }
.cw-fichekop-main h1 { margin: 0; font-size: var(--fs-xl, 1.5rem); }
.cw-volledig { min-width: 12rem; margin-left: auto; display: grid; gap: .25rem; }
.cw-volledig progress { width: 100%; height: .6rem; accent-color: var(--water); }
.cw-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--line, #d9e2ea); margin: 1rem 0; }
.cw-tabs a { padding: .6rem 1rem; text-decoration: none; font-weight: 650; border-radius: 10px 10px 0 0; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cw-tabs a:hover { color: var(--water); }
.cw-tabs a[aria-current="page"] { color: var(--water); border-bottom-color: var(--water); background: var(--tint-14); }
.cw-fichegrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr); gap: 1rem; align-items: start; }
.cw-fichegrid h2 { margin-top: 0; }
.cw-ficheform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.cw-ficheform > p { margin: 0 0 .9rem; }
.cw-ficheform > p:has(textarea), .cw-ficheform > p.cw-vink, .cw-ficheform > .cw-field-error, .cw-ficheform > .cw-fiche-acties { grid-column: 1 / -1; }
.cw-ficheform input:not([type="checkbox"]), .cw-ficheform select, .cw-ficheform textarea { width: 100%; max-width: none; }
.cw-vink label { display: flex; align-items: center; gap: .5rem; font-weight: 650; }
.cw-fiche-acties { display: flex; align-items: center; gap: 1rem; }
.cw-fichelijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; margin: 0; }
.cw-fichelijst dt { color: var(--muted); font-size: var(--fs-s); font-weight: 650; }
.cw-fichelijst dd { margin: 0; overflow-wrap: anywhere; }
.cw-fichezij ul { padding-left: 1.1rem; margin: .3rem 0 1rem; }
.cw-filter-vink label { display: flex; align-items: center; gap: .5rem; font-weight: 650; }
.cw-filterbar-leden { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
.cw-filterbar-leden .cw-filter-vink { grid-column: 1 / 4; }
@media (max-width: 900px) {
  .cw-fichegrid, .cw-ficheform, .cw-fichelijst { grid-template-columns: 1fr; }
  .cw-filterbar-leden { grid-template-columns: 1fr; }
  .cw-filterbar-leden .cw-filter-vink { grid-column: auto; }
}

/* YouTube click-to-load (privacy): poster over de lege iframe */
.cw-ytwrap { position: relative; }
.cw-ytposter { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1rem; text-align: center; color: #fff; background: #111; border-radius: var(--radius-l); }
.cw-ytposter[hidden] { display: none; }
.cw-ytposter p { margin: 0; max-width: 34rem; font-size: .85rem; }
.cw-ytnote { margin: .25rem 0 0; font-size: .75rem; }
/* Bibliotheekpaneel open: sneltoetsen-hint maakt plaats (laptop zonder scrollen). */
.cw-ed-stappen:has(.cw-lib:not([hidden])) .cw-keys { display: none; }
.cw-li-actie { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: flex-end; max-width: 18rem; }
.cw-li-actie select { max-width: 100%; }

/* Auteursrecht-voettekst (beheerpagina's) en watermerk (afschrikking, herleidbaarheid) */
.cw-copy { margin: 2rem 1rem 1rem; font-size: .68rem; line-height: 1.3; color: #6b7280; text-align: center; }
.cw-watermerk { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483000; user-select: none; }
.cw-wm-t { font: 500 11px sans-serif; fill: #808080; fill-opacity: .13; }
@media print { .cw-watermerk { position: fixed; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Demo-toegangspoort: volledig scherm, geen navigatie, niet weg te klikken. */
.cw-demopoort { margin: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: #f4f6f8; }
.cw-demopoort-kaart { box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; background: #fff; min-height: 100vh; }
.cw-demopoort-tekst { max-height: 46vh; overflow-y: auto; border: 1px solid #d0d7de; border-radius: 6px; padding: .75rem 1rem; margin: 1rem 0; font-size: .95rem; }
@media (min-width: 800px) { .cw-demopoort-kaart { min-height: auto; margin: 2rem auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); } }

/* ---------- Uitnodigingen ---------- */
.cw-dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.cw-dl dt { color: var(--muted); }
.cw-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cw-uitn-lijst { display: grid; gap: .8rem; margin: 1rem 0; }
.cw-uitn-link { display: block; word-break: break-all; font-size: var(--fs-s); }
.cw-uitn-bericht { white-space: pre-wrap; overflow-wrap: anywhere; }
@media print {
  .cw-uitn-lijst { display: block; margin: 0; }
  .cw-uitn-kaart { break-inside: avoid; page-break-inside: avoid; border: 1px solid #000; box-shadow: none; margin: 0 0 .6rem; padding: .5rem .7rem; }
  .cw-uitn-kaart h2 { font-size: 1rem; margin: 0; }
}
.cw-inline { display: inline; margin: 0; }