/* Membrix demo — gedeelde stijl op basis van assets/tokens.css (huisstijl A+).
   Eén thema (licht), bewust: het product is licht met één donker vlak per scherm. */

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg-000); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: left; transition: transform var(--duur-tik) var(--uitloop), background var(--duur-overgang) var(--uitloop), color var(--duur-overgang) var(--uitloop), box-shadow var(--duur-overgang) var(--uitloop); }
button:active { transform: scale(var(--schaal-indrukken)); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
svg { flex-shrink: 0; }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- typografie ---------- */
h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 15px; font-weight: 700; }
.label { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.dim { color: var(--ink-dim); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger); } .info { color: var(--info); } .brand { color: var(--brand); } .brand-strong { color: var(--brand-strong); }
.stat { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-md { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-sm { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.time { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }

/* ---------- shell: bestuur (desktop) ---------- */
.app { display: flex; min-height: 100%; }
.sidebar { position: sticky; top: 0; height: 100vh; width: 240px; flex-shrink: 0; background: var(--bg-inverse); color: #E6EFE9; display: flex; flex-direction: column; padding: 18px 12px 14px; gap: 6px; }
.sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; color: #FFFFFF; }
.sidebar .wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: #FFFFFF; }
.sidebar .clubbtn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); color: #E6EFE9; width: 100%; }
.sidebar .clubbtn:hover { background: rgba(255,255,255,.1); }
.sidebar .clubbtn .ini { width: 26px; height: 26px; border-radius: 8px; background: #E4572E; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sidebar .clubbtn .txt, .sidebar .userbtn .txt { flex: 1 1 auto; min-width: 0; }
.sidebar .name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .meta { display: block; font-size: 11px; color: #9DB3A6; }
.sidebar .searchbtn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); color: #9DB3A6; width: 100%; font-size: 13px; }
.sidebar .searchbtn span { flex: 1 1 auto; }
.sidebar .searchbtn kbd { font: inherit; font-size: 11px; border-radius: 5px; padding: 1px 5px; background: rgba(255,255,255,.08); color: #B9C9C0; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #B9C9C0; transition: background var(--duur-overgang), color var(--duur-overgang); }
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #FFFFFF; }
.sidebar nav a.active { background: rgba(255,255,255,.08); color: #FFFFFF; font-weight: 600; }
.sidebar nav a.active svg { stroke: var(--mint); }
.sidebar .userbtn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: #E6EFE9; width: 100%; margin-top: auto; }
.sidebar .userbtn:hover { background: rgba(255,255,255,.07); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #3B5F50; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.avatar.lg { width: 40px; height: 40px; font-size: 13px; }
.avatar.md { width: 32px; height: 32px; font-size: 11px; }
.avatar.sm { width: 24px; height: 24px; font-size: 9px; }
.avatar.xl { width: 56px; height: 56px; font-size: 18px; }
.page { flex: 1 1 auto; min-width: 0; padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 14px; }
.page-head { display: flex; align-items: center; gap: 10px; }
.page-head .titles { flex: 1 1 auto; min-width: 0; }
.page-head h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.page-head .sub { font-size: 13px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--ink); }

/* ---------- vlakken en lay-out ---------- */
.surface { background: var(--bg-100); border-radius: var(--radius-lg); }
.surface.pad { padding: 16px 20px; }
.surface.pad-sm { padding: 14px 18px; }
.surface-krijt { background: var(--bg-000); border-radius: 12px; padding: 14px 16px; }
.surface-dark { background: var(--bg-inverse); color: #E6EFE9; border-radius: var(--radius-lg); padding: 16px 18px 8px; }
.surface-dark h2, .surface-dark .white { color: #FFFFFF; }
.surface-dark .muted { color: #9DB3A6; }
.surface-dark .ink2 { color: #B9C9C0; }
.surface-dark .hair, .surface-dark .list .item, .surface-dark .table .tr { border-color: rgba(255,255,255,.10); }
.surface-dark a { color: var(--mint); }
.surface-dark .knoop { background: var(--mint); box-shadow: 0 0 0 2px var(--bg-inverse), 0 0 0 3.5px var(--mint); }
.surface-dark .knoop.danger { background: var(--danger-dot); box-shadow: 0 0 0 2px var(--bg-inverse), 0 0 0 3.5px var(--danger-dot); }
.surface-dark .stat-sm, .surface-dark .stat-md { color: var(--mint); }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols { display: flex; gap: 16px; align-items: flex-start; }
.cols > * { min-width: 0; }
.cols.stretch { align-items: stretch; }
.grow { flex: 1 1 auto; min-width: 0; }
.w-380 { width: 380px; flex-shrink: 0; }
.w-300 { width: 300px; flex-shrink: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.tight { gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.hair { border-top: 1px solid var(--line-hair); }
.sec-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; }
.sec-head h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-head .meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sec-body { padding: 0 18px 14px; }
.stripe { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-tonal); }
.stripe > i { display: block; height: 100%; }
.stripe .ok { background: var(--brand); } .stripe .warn { background: var(--warn-dot); } .stripe .danger { background: var(--danger-dot); } .stripe .info { background: var(--info); }

/* tegels en cijfers */
.tile { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--bg-100); border-radius: var(--radius-lg); color: var(--ink); transition: background var(--duur-overgang); }
a.tile:hover { background: var(--bg-200); }
.tile .stat { font-size: 44px; }
.kpi { display: flex; align-items: flex-end; gap: 32px; }
.kpi > div { min-width: 0; }
.kpi .stat-md { margin-top: 6px; }
.kpi .sub { font-size: 12px; font-weight: 600; margin-top: 6px; white-space: nowrap; }
.kpi .unit { font-size: 14px; font-weight: 600; color: var(--ink-3); font-family: var(--font-sans); letter-spacing: 0; }

/* ---------- knoppen, chips, statussen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink); background: var(--bg-tonal); }
.btn:hover { background: #E5E3DC; color: var(--ink); }
.btn.pri { background: var(--ink); color: #FFFFFF; }
.btn.pri:hover { background: #2B2F36; color: #FFFFFF; }
.btn.mint { background: var(--mint); color: var(--bg-inverse); font-weight: 700; }
.btn.mint:hover { background: #5BD3A9; color: var(--bg-inverse); }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--bg-tonal); color: var(--brand-strong); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.danger:hover { background: #FBD3CF; color: var(--danger); }
.btn.ondark { background: rgba(255,255,255,.08); color: #E6EFE9; }
.btn.ondark:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }
.btn.sm { height: 30px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 12px; }
.btn.xs { height: 28px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 12px; }
.btn.md { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.btn.lg { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 14px; }
.btn.icon { width: 38px; padding: 0; }
.btn.icon.sm { width: 30px; }
.btn.icon.md { width: 36px; }
.btn.block { width: 100%; }
.btn.disabled, .btn[aria-disabled="true"] { background: #9A9FA8; color: #FFFFFF; cursor: default; }
.btn { position: relative; }
.btn .badge { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); border: 2px solid var(--bg-tonal); }
.btn.pri .badge { border-color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--bg-tonal); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip:hover { background: #E5E3DC; }
.chip.active { background: var(--ink); color: #FFFFFF; font-weight: 600; }
.chip.sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--bg-tonal); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--brand-strong); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.danger { background: var(--danger-soft); color: var(--danger); } .pill.info { background: var(--info-soft); color: var(--info); }
.pill.type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 5px; }
.segment { display: inline-flex; background: var(--bg-tonal); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.segment button { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); text-align: center; }
.segment button.active { background: var(--ink); color: #FFFFFF; font-weight: 600; }
.segment.lg { width: 100%; border-radius: 12px; }
.segment.lg button { height: 40px; flex: 1 1 0; font-size: 13px; font-weight: 600; border-radius: 10px; }
.segment.light button.active { background: var(--bg-100); color: var(--ink); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-hair); padding: 0 18px; }
.tabs button, .tabs a { height: 40px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tabs button:hover, .tabs a:hover { color: var(--ink); }
.tabs button.active, .tabs a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.tabs .n { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--bg-tonal); border-radius: 999px; padding: 1px 6px; }
.tag { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; background: var(--ink-3); }
.tag.voetbal { background: var(--sport-voetbal); } .tag.hockey { background: var(--sport-hockey); } .tag.turnen { background: var(--sport-turnen); } .tag.zwemmen { background: var(--sport-zwemmen); } .tag.club { background: var(--ink-3); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status.ok { color: var(--ok); } .status.warn { color: var(--warn); } .status.danger { color: var(--danger); } .status.info { color: var(--info); } .status.neutral { color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; display: inline-block; }
.dot.ok { background: var(--ok-dot); } .dot.warn { background: var(--warn-dot); } .dot.danger { background: var(--danger-dot); } .dot.info { background: var(--info); } .dot.mint { background: var(--mint); } .dot.brand { background: var(--brand); }

/* de knoop: het merkgebaar */
.knoop { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--bg-100), 0 0 0 3.5px var(--brand); flex-shrink: 0; display: inline-block; }
.knoop.off { background: var(--line-strong); box-shadow: none; }
.knoop.danger { background: var(--danger-dot); box-shadow: 0 0 0 2px var(--bg-100), 0 0 0 3.5px var(--danger-dot); }
.knoop.warn { background: var(--warn-dot); box-shadow: 0 0 0 2px var(--bg-100), 0 0 0 3.5px var(--warn-dot); }
.knoop.lg { width: 26px; height: 26px; box-shadow: 0 0 0 5px var(--bg-inverse), 0 0 0 8px var(--mint); background: var(--mint); }
.knoop-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--bg-tonal); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.knoop-toggle .k { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px var(--mint); transform: scale(0.4); opacity: 0; transition: transform var(--duur-overgang) var(--uitloop), opacity var(--duur-overgang) var(--uitloop); flex-shrink: 0; }
.knoop-toggle.on { background: var(--ink); color: #FFFFFF; }
.knoop-toggle.on .k { transform: scale(1); opacity: 1; }
.knoop-toggle.sq { width: 44px; height: 44px; padding: 0; border-radius: 12px; flex-shrink: 0; }
.knoop-toggle.circle { width: 22px; height: 22px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.knoop-toggle.circle .k { width: 8px; height: 8px; box-shadow: none; }
.knoop-toggle.warn.on { background: var(--warn-soft); color: var(--warn); }
.knoop-toggle.danger.on { background: var(--danger-soft); color: var(--danger); }
.knoop-toggle.warn.on .k, .knoop-toggle.danger.on .k { display: none; }
.knoop-toggle.wide { height: 40px; padding: 0 14px; }
.progress-dots { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.progress-dots i { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--line-strong); display: inline-block; flex-shrink: 0; }
.progress-dots i.done { background: var(--brand); }
.progress-dots i.cur { background: var(--ink); }
.done { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.done .knoop { box-shadow: 0 0 0 2px var(--brand-soft), 0 0 0 3.5px var(--brand); }
.bar { height: 6px; border-radius: 3px; background: var(--bg-tonal); overflow: hidden; flex: 1 1 auto; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width var(--duur-lang) var(--uitloop); }
.bar > i.warn { background: var(--warn-dot); } .bar > i.danger { background: var(--danger-dot); } .bar > i.info { background: var(--info); } .bar > i.hockey { background: var(--sport-hockey); } .bar > i.turnen { background: var(--sport-turnen); } .bar > i.zwemmen { background: var(--sport-zwemmen); }
.bar.lg { height: 8px; border-radius: 4px; }
.bar.sm { height: 5px; }

/* ---------- tabellen en lijsten ---------- */
.table { display: flex; flex-direction: column; }
.table .th, .table .tr { display: grid; grid-template-columns: var(--cols); align-items: center; padding: 0 18px; column-gap: 10px; }
.table .th { height: 34px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.table .tr { min-height: 40px; border-top: 1px solid var(--line-hair); font-size: 12.5px; transition: background var(--duur-overgang); }
.table .tr.tall { min-height: 50px; }
.table .tr:hover { background: var(--bg-200); }
.table .tr > * { min-width: 0; }
.table .tr[data-href] { cursor: pointer; }
.cell-2 > div:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-2 > div:last-child { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; gap: 6px; justify-content: flex-end; }
.table-foot { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line-hair); font-size: 12.5px; color: var(--ink-3); }
.list { display: flex; flex-direction: column; }
.list .item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line-hair); transition: background var(--duur-overgang); }
.list .item:first-child { border-top: 0; }
.list .item .body { flex: 1 1 auto; min-width: 0; }
.list .item .title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .item .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .item[data-href] { cursor: pointer; }
.list .item[data-href]:hover { background: var(--bg-200); }
.list.tight .item { padding: 9px 18px; }
.list.flush .item { padding-left: 0; padding-right: 0; }
.bullets { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.bullets li { display: flex; gap: 8px; align-items: flex-start; }
.bullets li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 5px; }
.bullets.warn li::before { background: var(--warn-dot); }

/* ---------- formulieren ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.field .hint { font-size: 11.5px; font-weight: 500; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.input, .select, .textarea { height: 38px; padding: 0 12px; border-radius: var(--radius-md); border: 0; background: var(--bg-tonal); color: var(--ink); font-size: 13.5px; font-weight: 500; width: 100%; }
.surface-krijt .input, .surface-krijt .select, .surface-krijt .textarea { background: var(--bg-100); }
.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 72px; line-height: 1.4; }
.input::placeholder, .textarea::placeholder { color: var(--ink-dim); font-weight: 400; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--brand); }
.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23656B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span2 { grid-column: span 2; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 32px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--radius-md); background: var(--bg-tonal); color: var(--ink-3); }
.search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 13px; color: var(--ink); }
.search input::placeholder { color: var(--ink-dim); }

/* ---------- lagen: modals, laden, sheets, popovers, toasts ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(21, 23, 27, 0.32); opacity: 0; transition: opacity var(--duur-lang) var(--uitloop); z-index: 50; }
.backdrop.is-open { opacity: 1; }
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -48%) scale(0.98); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow: auto; background: var(--bg-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet); z-index: 60; opacity: 0; transition: opacity var(--duur-lang) var(--uitloop), transform var(--duur-lang) var(--uitloop); }
.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal.wide { width: min(760px, calc(100% - 32px)); }
.modal.narrow { width: min(440px, calc(100% - 32px)); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 8px; }
.modal-head h2 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-head .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.modal-body { padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line-hair); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--bg-100); box-shadow: var(--shadow-sheet); z-index: 60; transform: translateX(24px); opacity: 0; transition: opacity var(--duur-lang) var(--uitloop), transform var(--duur-lang) var(--uitloop); overflow: auto; display: flex; flex-direction: column; }
.drawer.is-open { transform: none; opacity: 1; }
.drawer.wide { width: min(640px, 100%); }
.drawer .modal-head { padding: 22px 22px 8px; }
.drawer .modal-body { padding: 8px 22px 16px; flex: 1 1 auto; }
.drawer .modal-foot { padding: 12px 22px 22px; margin-top: auto; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--bg-100); box-shadow: var(--shadow-sheet); z-index: 60; transform: translateX(24px); opacity: 0; transition: opacity var(--duur-lang) var(--uitloop), transform var(--duur-lang) var(--uitloop); overflow: auto; display: flex; flex-direction: column; }
.panel.is-open { transform: none; opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-100); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet); z-index: 60; transform: translateY(24px); opacity: 0; transition: opacity var(--duur-lang) var(--uitloop), transform var(--duur-lang) var(--uitloop); max-height: 88%; overflow: auto; padding-bottom: 20px; }
.sheet.is-open { transform: none; opacity: 1; }
.sheet .modal-head { padding: 18px 20px 6px; }
.sheet .modal-body { padding: 6px 20px 10px; }
.sheet .modal-foot { border-top: 0; padding: 8px 20px 12px; }
.sheet .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; }
.popover { position: fixed; z-index: 70; background: var(--bg-100); border-radius: 12px; box-shadow: var(--shadow-float); padding: 6px; min-width: 220px; opacity: 0; transform: translateY(-4px); transition: opacity var(--duur-overgang) var(--uitloop), transform var(--duur-overgang) var(--uitloop); }
.popover.is-open { opacity: 1; transform: none; }
.popover a, .popover button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.popover a:hover, .popover button:hover { background: var(--bg-tonal); color: var(--ink); }
.popover .hair { margin: 4px 0; }
.popover .head { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px 4px; }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; }
.toast { pointer-events: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--bg-inverse); color: #FFFFFF; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sheet); opacity: 0; transform: translateY(8px); transition: opacity var(--duur-lang) var(--uitloop), transform var(--duur-lang) var(--uitloop); white-space: nowrap; }
.toast.is-open { opacity: 1; transform: none; }
.toast .knoop { background: var(--mint); box-shadow: 0 0 0 2px var(--bg-inverse), 0 0 0 3.5px var(--mint); }
.toast button { color: var(--mint); font-weight: 600; margin-left: 6px; }
.cmdk { position: fixed; left: 50%; top: 12%; transform: translateX(-50%) translateY(-6px); width: min(640px, calc(100% - 32px)); background: var(--bg-100); border-radius: 16px; box-shadow: var(--shadow-sheet); z-index: 60; opacity: 0; transition: opacity var(--duur-lang) var(--uitloop), transform var(--duur-lang) var(--uitloop); overflow: hidden; }
.cmdk.is-open { opacity: 1; transform: translateX(-50%); }
.cmdk .input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-hair); color: var(--ink-3); }
.cmdk input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 15px; outline: 0; color: var(--ink); }
.cmdk .results { display: flex; flex-direction: column; padding: 6px; max-height: 380px; overflow: auto; }
.cmdk .results a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; }
.cmdk .results a:hover, .cmdk .results a.sel { background: var(--bg-tonal); }
.cmdk .results .kind { font-size: 11px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.cmdk .empty { padding: 16px; font-size: 13px; color: var(--ink-3); }
.melding { display: flex; gap: 12px; align-items: flex-start; padding: 12px 20px; border-top: 1px solid var(--line-hair); color: var(--ink); transition: background var(--duur-overgang); }
.melding:hover { background: var(--bg-200); color: var(--ink); }
.melding .body { flex: 1 1 auto; min-width: 0; }
.melding .title { font-size: 13.5px; font-weight: 600; }
.melding .text { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.melding .when { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.melding .knoop { margin-top: 5px; }
.melding.read .knoop { background: var(--line-strong); box-shadow: none; }
.hint-kbd { font-size: 11px; color: var(--ink-3); display: flex; gap: 12px; padding: 8px 16px 12px; border-top: 1px solid var(--line-hair); }
.hint-kbd kbd { font: inherit; background: var(--bg-tonal); border-radius: 4px; padding: 1px 5px; }

/* ---------- shell: mobiel (ouder, speler, trainer) ---------- */
body[data-app="ouder"], body[data-app="speler"], body[data-app="trainer"] { background: var(--bg-tonal); display: flex; justify-content: center; align-items: flex-start; padding: 28px 16px 40px; min-height: 100%; }
.phone { position: relative; width: 390px; height: 844px; flex-shrink: 0; border-radius: 44px; border: 8px solid #15171B; background: var(--bg-000); box-shadow: var(--shadow-sheet); overflow: hidden; }
.phone.dark { background: var(--bg-inverse); }
.phone .screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-width: none; }
.phone .screen::-webkit-scrollbar { display: none; }
.phone .screen > main { flex: 1 0 auto; display: flex; flex-direction: column; min-height: calc(100% - 34px); }
.phone.has-tabs .screen > main { padding-bottom: 96px; }
.statusbar { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 12px 28px 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.statusbar .sig { display: flex; gap: 3px; align-items: flex-end; }
.statusbar .sig i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.phone.dark .statusbar, .dark-screen .statusbar { color: #FFFFFF; }
.m-head { padding: 16px 20px 12px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.m-head .titles { flex: 1 1 auto; min-width: 0; }
.m-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.m-head h1.sm { font-size: 22px; letter-spacing: -0.02em; }
.m-head .sub { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.m-body { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.m-foot { position: sticky; bottom: 0; padding: 12px 20px 22px; background: var(--bg-100); display: flex; align-items: center; gap: 10px; margin-top: auto; flex-shrink: 0; }
.m-section { display: flex; flex-direction: column; gap: 8px; }
.m-section > .row > .label, .m-section > .label { padding-left: 2px; }
.m-card { background: var(--bg-100); border-radius: 16px; overflow: hidden; }
.m-card.pad { padding: 14px; }
.m-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line-hair); color: var(--ink); }
.m-item:first-child { border-top: 0; }
.m-item .body { flex: 1 1 auto; min-width: 0; }
.m-item .title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-item .meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-item[data-href], a.m-item { cursor: pointer; }
.m-item[data-href]:hover, a.m-item:hover { background: var(--bg-200); }
.m-time { width: 50px; flex-shrink: 0; }
.m-time .d { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.m-time .t { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.iconbtn { width: 44px; height: 44px; border-radius: 14px; background: var(--bg-100); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.iconbtn.ondark { background: rgba(255,255,255,.08); color: #E6EFE9; }
.iconbtn .badge { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); border: 2px solid var(--bg-100); }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; padding: 8px 8px 24px; background: var(--bg-100); display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); z-index: 5; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--ink-3); min-height: 44px; position: relative; }
.tabbar a.active { color: var(--brand); font-weight: 600; }
.tabbar a.active::after { content: ""; position: absolute; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.push { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 45; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--bg-inverse); color: #FFFFFF; box-shadow: var(--shadow-sheet); transform: translateY(-140%); transition: transform var(--duur-lang) var(--uitloop); cursor: pointer; }
.push.is-open { transform: none; }
.push .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push .x { font-size: 12px; color: #B9C9C0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push .app-ico { width: 28px; height: 28px; border-radius: 8px; background: #F4F3EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.push.desktop { position: fixed; left: auto; right: 24px; top: 24px; width: 360px; }
.phone .backdrop, .phone .modal, .phone .sheet, .phone .panel, .phone .toasts, .phone .cmdk { position: absolute; }
.phone .modal { width: calc(100% - 32px); max-height: calc(100% - 64px); }
.phone .panel { width: 100%; }
.phone .toasts { bottom: 100px; }
.phone .cmdk { top: 8%; width: calc(100% - 24px); }
/* aanvullingen uit de bouw van de mobiele schermen */
.m-head { flex-wrap: wrap; row-gap: 12px; }
.m-head .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat, .stat-md, .stat-sm, .time { white-space: nowrap; flex-shrink: 0; }
.knoop-toggle.score { width: 34px; height: 44px; padding: 0; border-radius: 10px; flex-shrink: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.knoop-toggle.sq svg { color: var(--ink-dim); }
.knoop-toggle.sq.on svg { color: inherit; }
.bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--bg-tonal); font-size: 13px; line-height: 1.45; align-self: flex-start; }
.bubble.me { align-self: flex-end; background: var(--ink); color: #FFFFFF; border-radius: 14px 14px 4px 14px; }
.bubble-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.m-item .body .wrap { white-space: normal; line-height: 1.45; }
.m-item.compact { padding: 6px 10px 6px 12px; gap: 10px; }
.avatar.xs30 { width: 30px; height: 30px; font-size: 11px; }
.dark-screen { background: var(--bg-inverse); color: #E6EFE9; }
.dark-screen .m-body.light { background: var(--bg-000); color: var(--ink); border-radius: 24px 24px 0 0; padding: 18px 20px 28px; flex: 1 1 auto; }

/* aanvullingen uit de bouw van agenda, aanbod en lidgelden */
.knoop-toggle.sm { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.kpi > div { flex-shrink: 0; }
.kpi .stat-md { white-space: nowrap; }
.kpi .sub { overflow: hidden; text-overflow: ellipsis; }
.surface-dark .list .item > a, .surface-dark .list .item > button { color: var(--mint); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.btn.flat { background: transparent; }
.agenda-blk { position: absolute; width: 100px; display: block; border-radius: 8px; border-left: 3px solid; padding: 6px 8px; overflow: hidden; color: var(--ink); z-index: 1; transition: left var(--duur-lang) var(--uitloop), background var(--duur-overgang) var(--uitloop), box-shadow var(--duur-overgang) var(--uitloop); }
.agenda-blk:hover { filter: brightness(0.97); }
.agenda-blk .t { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda-blk.voetbal { background: #E1F2EA; border-left-color: var(--sport-voetbal); } .agenda-blk.voetbal .t { color: #0B5C44; }
.agenda-blk.hockey { background: #DBEAFE; border-left-color: var(--sport-hockey); } .agenda-blk.hockey .t { color: #1E40AF; }
.agenda-blk.turnen { background: #FFEDD5; border-left-color: var(--sport-turnen); } .agenda-blk.turnen .t { color: #9A3412; }
.agenda-blk.zwemmen { background: #E0F2FE; border-left-color: var(--sport-zwemmen); } .agenda-blk.zwemmen .t { color: #155E75; }
.agenda-blk.club { background: var(--bg-tonal); border-left-color: var(--ink-3); } .agenda-blk.club .t { color: var(--ink-2); }
.agenda-blk.conflict { background: var(--danger-soft); border-left-color: var(--danger-dot); box-shadow: 0 0 0 2px #FFFFFF; z-index: 3; } .agenda-blk.conflict .t { color: var(--danger); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line-hair); }
.week > div { padding: 12px 10px 14px; min-width: 0; } .week > div + div { border-left: 1px solid var(--line-hair); } .week .today { background: var(--bg-000); }
.maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 88px; border-top: 1px solid var(--line-hair); border-left: 1px solid var(--line-hair); }
.maand > div { padding: 8px 8px 6px; border-right: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair); min-width: 0; } .maand .today { background: var(--bg-000); } .maand .other { color: var(--ink-dim); }
.day-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: #FFFFFF; }
.timeline { position: relative; padding-top: 6px; } .timeline::before { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; border-top: 2px solid var(--line-hair); }
.timeline .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; } .timeline .knoop { display: block; margin-bottom: 8px; }
.banner { display: flex; align-items: center; gap: 10px; margin: 14px 18px 0; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; background: var(--bg-tonal); } .banner.warn { background: var(--warn-soft); } .banner.ok { background: var(--ok-soft); } .banner.danger { background: var(--danger-soft); }
.kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 7px 10px; font-size: 12.5px; } .kv > :nth-child(odd) { color: var(--ink-3); }

/* aanvullingen uit de bouw van leden, lid 360°, groepen en signalen */
.table .tr.sel { background: #F0F7F3; }
.bulkbar { position: sticky; bottom: 16px; margin: 0 auto 12px; width: max-content; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; background: var(--bg-inverse); color: #FFFFFF; border-radius: 14px; box-shadow: var(--shadow-sheet); white-space: nowrap; z-index: 5; }
.bulkbar .knoop { background: var(--mint); box-shadow: 0 0 0 2px var(--bg-inverse), 0 0 0 3.5px var(--mint); margin-right: 8px; }
.table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand); margin: 0; }
.segment { flex-shrink: 0; } .segment button { white-space: nowrap; }
.surface-dark .lnk { color: var(--mint); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.kpi-tile { padding: 10px 14px; min-width: 112px; background: var(--bg-100); border-radius: 12px; }
.kpi-tile .stat-sm { font-size: 26px; margin-top: 4px; } .kpi-tile .tiny { margin-top: 3px; white-space: nowrap; }
.eval-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.bar > i.ink { background: var(--ink); } .bar > i.zelf { background: #9BD8BF; }
.att-strip { display: flex; gap: 5px; } .att-strip > span { flex: 1; height: 10px; border-radius: 5px; background: var(--line-strong); }
.att-strip > .ok { background: var(--brand); } .att-strip > .warn { background: var(--warn-dot); }
.list .item.signal { align-items: flex-start; padding: 12px 18px; } .list .item.signal .knoop { margin-top: 5px; } .list .item.signal .text { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; white-space: normal; }
.knoop-toggle.row { width: 100%; justify-content: flex-start; } .knoop-toggle.row .meta { margin-left: auto; font-size: 11.5px; font-weight: 500; opacity: .75; white-space: nowrap; }
.contact { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-000); border-radius: 12px; }

/* aanvullingen uit de bouw van evaluaties, communicatie, documenten, seizoen en instellingen */
.rail-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; width: 100%; color: var(--ink); }
.rail-step:hover { background: var(--bg-200); }
.rail-step.active { background: var(--bg-000); }
.rail-step .txt { flex: 1 1 auto; min-width: 0; }
.rail-step .title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-step .meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-step .knoop { box-shadow: 0 0 0 2px var(--bg-100), 0 0 0 3.5px var(--brand); }
.rail-step.active .knoop { box-shadow: 0 0 0 2px var(--bg-000), 0 0 0 3.5px var(--brand); }
.rail-step.active .knoop.off { background: #FFFFFF; box-shadow: 0 0 0 2px var(--bg-000), 0 0 0 3.5px var(--ink); }
.stap-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line-hair); margin-top: auto; }
.row > .cell-2, .list .item .cell-2 { min-width: 0; }
.list .item > a.small, .list .item > button.small { white-space: nowrap; flex-shrink: 0; }

/* aanvullingen uit de bouw van het ouderportaal */
.m-item.wrap { flex-wrap: wrap; row-gap: 8px; }
.m-item .acts { flex-basis: 100%; display: flex; align-items: center; gap: 4px; padding-left: 82px; }
.m-kid { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
button.m-item { width: 100%; }
.m-item.prose { display: block; line-height: 1.45; }
.pill.type.turnen { background: #FFEDD5; color: #C2410C; } .pill.type.zwemmen { background: #E0F2FE; color: #0E7490; } .pill.type.voetbal { background: #E1F2EA; color: #0B5C44; } .pill.type.hockey { background: #DBEAFE; color: #1D4ED8; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; white-space: nowrap; } .price .old { font-size: 12.5px; color: var(--ink-dim); text-decoration: line-through; }
.surface-dark .btn.ghost { color: var(--mint); }

/* zelf toegevoegde of bewerkte gegevens */
.is-new { animation: nieuw 1600ms var(--uitloop); }
@keyframes nieuw { from { background: var(--brand-soft); } to { background: transparent; } }
.reveal { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--bg-000); border-radius: 12px; }
.reveal .form-grid { gap: 10px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches label { position: relative; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; }
.swatches input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatches input:checked + span { box-shadow: 0 0 0 2px var(--bg-100), 0 0 0 4px var(--ink); }
.swatches span { position: absolute; inset: 0; border-radius: 8px; }
.tag.custom { background: var(--ink-3); }
:root { --sport-dans: #BE185D; --sport-tennis: #4D7C0F; --sport-volleybal: #0F766E; --sport-atletiek: #7C2D12; --sport-club: #656B75; --sport-alle: #656B75; }
.knoop-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.knoop-btn .knoop { transition: transform var(--duur-overgang) var(--uitloop), background var(--duur-overgang) var(--uitloop); }
.knoop-btn:hover .knoop { transform: scale(1.2); }
.is-done > .body .title, .is-done .cell-2 > div:first-child { text-decoration: line-through; color: var(--ink-3); }
.is-done > .body .meta { color: var(--ink-dim); }
.is-done .knoop-btn .knoop { background: var(--line-strong); box-shadow: none; }
.is-done .actions, .is-done > .btn, .is-done > a.btn { opacity: 0.45; }
.demo-roles button { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; background: var(--bg-100); box-shadow: var(--shadow-float); }
.demo-roles button:hover { color: var(--ink); }
.tag.basketbal { background: var(--sport-basketbal); } .tag.wielrennen { background: var(--sport-wielrennen); } .tag.dans { background: #BE185D; } .tag.tennis { background: #4D7C0F; } .tag.volleybal { background: #0F766E; } .tag.atletiek { background: #7C2D12; }
.dark-screen h1 { color: #FFFFFF; }
.dark-screen .sub { color: #9DB3A6; }
.demo-back { position: fixed; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-radius: 10px; background: var(--bg-100); box-shadow: var(--shadow-float); z-index: 10; }
.demo-back:hover { color: var(--ink); }
.demo-roles { position: fixed; right: 16px; top: 16px; display: flex; gap: 6px; z-index: 10; }
.demo-roles a { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; background: var(--bg-100); box-shadow: var(--shadow-float); }
.demo-roles a.active { background: var(--ink); color: #FFFFFF; }
@media (max-width: 480px) {
  body[data-app="ouder"], body[data-app="speler"], body[data-app="trainer"] { padding: 0; display: block; background: var(--bg-000); }
  .phone { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .demo-back, .demo-roles { display: none; }
}
@media (max-width: 1100px) {
  .sidebar { width: 200px; }
  .page { padding: 20px 16px 40px; }
  .w-380 { width: 320px; }
  .cols.responsive { flex-direction: column; }
  .cols.responsive > .w-380, .cols.responsive > .w-300 { width: 100%; }
}

/* aanvullingen uit de mobiele apps */
.toast button { pointer-events: auto; }
.knoop-toggle.block { width: 100%; height: 44px; border-radius: 12px; font-size: 13px; }
.m-item .meta .in-agenda { color: var(--brand-strong); font-weight: 600; }