/*
 * SeriousSwim · portal voor zwemmers en ouders
 * Ontwerp: donkerblauwe kop met navigatie, witte kaarten met cijfertegels, kleur per slag.
 * Alles hangt onder .ss (pagina) of .ss-hero (kop), zodat de rest van de app er niets van merkt.
 */
:root {
    --ss-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ss-navy-950: #081b36;
    --ss-navy-900: #0b2545;
    --ss-navy-700: #154a86;
    --ss-ink: #10284a;
    --ss-text: #2f4259;
    --ss-muted: #6b7d93;
    --ss-line: #e5ebf2;
    --ss-bg: #f3f6fa;
    --ss-card: #ffffff;
    --ss-chip: #eef2f7;
    --ss-head: #f4f7fb;
    --ss-blue: #2a6fdb;
    --ss-blue-700: #1d58b8;
    --ss-blue-050: #eaf2fd;
    --ss-green: #17915a;
    --ss-green-500: #22a565;
    --ss-green-050: #e8f6ee;
    --ss-red: #d93a54;
    --ss-red-050: #fde6ea;
    --ss-amber: #f2a01d;
    --ss-amber-050: #fff2d9;
    --ss-teal: #129c87;
    --ss-teal-050: #dcf4ee;
    --ss-grey-050: #f1f3f6;
    --ss-radius: 16px;
    --ss-radius-md: 12px;
    --ss-shadow: 0 1px 2px rgba(16, 40, 74, .05), 0 6px 18px rgba(16, 40, 74, .06);
    /* Kleur per slag */
    --ss-vrij: #2a6fdb;    --ss-vrij-050: #eaf2fe;
    --ss-rug: #e0485f;     --ss-rug-050: #fdedf0;
    --ss-school: #1c9a5b;  --ss-school-050: #e8f6ee;
    --ss-vlinder: #7456e0; --ss-vlinder-050: #f1edfd;
    --ss-wissel: #ee8a1c;  --ss-wissel-050: #fff2e3;
}

/* ───────────── Pagina ───────────── */
body.ss-body { background: var(--ss-bg); }
body.ss-body > main { padding: 0 !important; margin: 0 !important; max-width: none; }
.ss { font-family: var(--ss-font); color: var(--ss-text); font-size: 15px; line-height: 1.45; }
.ss-main { max-width: 1280px; margin: 0 auto; padding: 20px 24px 48px; }
.ss button { font-family: var(--ss-font); }
.ss button:focus-visible, .ss a:focus-visible, .ss-hero button:focus-visible, .ss-hero a:focus-visible,
.ss select:focus-visible, .ss input:focus-visible { outline: 2px solid var(--ss-blue); outline-offset: 2px; }
.ss-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.min-w-0 { min-width: 0; }
.ss-kpi-sub, .ss-kpi-getal, .ss-kpi-label { overflow-wrap: anywhere; hyphens: auto; }

/* ───────────── Kop ───────────── */
.ss-hero {
    /* Geen overflow:hidden: dat knipte het profielmenu af zodra het openklapte. De achtergrond
       en de golfjes in ::before worden al door de elementrand begrensd, dus clippen hoeft niet. */
    position: relative; color: #fff; font-family: var(--ss-font);
    background:
        radial-gradient(90% 160% at 88% -20%, rgba(90, 170, 255, .42) 0%, rgba(90, 170, 255, 0) 60%),
        linear-gradient(100deg, var(--ss-navy-950) 0%, var(--ss-navy-900) 48%, var(--ss-navy-700) 100%);
}
.ss-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='56' viewBox='0 0 260 56'%3E%3Cpath d='M0 28 Q32.5 12 65 28 T130 28 T195 28 T260 28' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3Cpath d='M0 48 Q32.5 34 65 48 T130 48 T195 48 T260 48' fill='none' stroke='%23ffffff' stroke-width='.9' stroke-opacity='.6'/%3E%3C/svg%3E");
    background-size: 260px 56px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.ss-hero.met-foto { background: var(--ss-hero-foto) center 35% / cover no-repeat, var(--ss-navy-900); }
.ss-hero.met-foto::before { opacity: 1; background: linear-gradient(90deg, rgba(8, 27, 54, .92) 0%, rgba(8, 27, 54, .55) 55%, rgba(8, 27, 54, .25) 100%); -webkit-mask-image: none; mask-image: none; }
.ss-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 20px; }
.ss-brand { display: flex; align-items: center; gap: 16px; min-width: 0; color: #fff; text-decoration: none; }
.ss-brand:hover { color: #fff; }
.ss-merk { width: 68px; height: 40px; flex: none; }
.ss-titel { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.ss-ondertitel { display: block; margin-top: 3px; font-size: 16px; color: rgba(255, 255, 255, .86); }
.ss-nav { display: flex; gap: 6px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.ss-nav::-webkit-scrollbar { display: none; }
.ss-nav button, .ss-nav a {
    border: 0; background: transparent; color: #fff; font: 600 15px var(--ss-font); padding: 10px 18px;
    border-radius: 10px; white-space: nowrap; text-decoration: none; position: relative; display: inline-flex; gap: 6px; align-items: center;
}
.ss-nav button:hover, .ss-nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.ss-nav .active { background: var(--ss-blue); box-shadow: 0 2px 10px rgba(42, 111, 219, .45); }
.ss-nav .active:hover { background: var(--ss-blue); }
.ss-teller { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4462; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ss-me { flex: none; }
.ss-me-knop {
    display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 600 15px var(--ss-font);
    background: rgba(8, 27, 54, .6); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 9px 14px;
}
.ss-me-knop:hover { background: rgba(8, 27, 54, .8); color: #fff; }
.ss-me .dropdown-menu { border: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(8, 27, 54, .2); padding: 6px; font-family: var(--ss-font); min-width: 240px; }
.ss-me .dropdown-item { border-radius: 8px; padding: 8px 12px; color: var(--ss-ink); }
.ss-me .dropdown-item.active, .ss-me .dropdown-item:active { background: var(--ss-blue-050); color: var(--ss-blue); }
.ss-me .dropdown-header { color: var(--ss-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 991px) {
    .ss-hero-inner { flex-wrap: wrap; padding: 12px 14px 8px; gap: 10px 12px; }
    .ss-merk { width: 48px; height: 28px; }
    .ss-titel { font-size: 22px; }
    .ss-ondertitel { font-size: 14px; }
    .ss-me { margin-left: auto; }
    .ss-nav { order: 3; width: calc(100% + 28px); margin: 0 -14px; padding: 0 14px 4px; }
    .ss-nav button, .ss-nav a { padding: 8px 14px; font-size: 14px; }
    .ss-main { padding: 12px 12px 40px; }
}

/* ───────────── Cijfertegels ───────────── */
.ss-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.ss-kpi { background: var(--ss-card); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.ss-kpi-icoon { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 27px; flex: none; }
.ss-kpi-getal { font-size: 30px; font-weight: 700; color: var(--ss-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ss-kpi-label { font-size: 15px; color: var(--ss-ink); margin-top: 3px; }
.ss-kpi-sub { font-size: 13px; color: var(--ss-muted); margin-top: 5px; }
.ss-kpi-sub .ss-streep { display: inline-block; width: 1px; height: 12px; background: var(--ss-line); margin: 0 8px; vertical-align: -1px; }
.is-amber { background: var(--ss-amber-050); color: var(--ss-amber); }
.is-rose { background: var(--ss-red-050); color: var(--ss-red); }
.is-geel { background: var(--ss-grey-050); color: #f2b705; }
.is-teal { background: var(--ss-teal-050); color: var(--ss-teal); }
.is-blauw-tint { background: var(--ss-blue-050); color: var(--ss-blue); }
.is-groen-tint { background: var(--ss-green-050); color: var(--ss-green); }
@media (max-width: 991px) {
    .ss-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
    .ss-kpi { padding: 12px; gap: 10px; }
    .ss-kpi-icoon { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
    .ss-kpi-getal { font-size: 22px; }
    .ss-kpi-label { font-size: 14px; }
}
@media (max-width: 400px) {
    .ss-kpis { gap: 8px; }
    .ss-kpi { padding: 10px; gap: 8px; }
    .ss-kpi-icoon { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
    .ss-kpi-getal { font-size: 19px; }
    .ss-kpi-label { font-size: 13px; }
}

/* ───────────── Kaarten ───────────── */
.ss-kaart { background: var(--ss-card); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 22px 24px; margin-bottom: 20px; }
.ss-kaart-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ss-kaart-kop h2 { font-size: 22px; font-weight: 700; color: var(--ss-ink); margin: 0; letter-spacing: -.01em; }
.ss-kaart-kop > .bi { font-size: 26px; line-height: 1; }
.ss-kaart-kop .ss-link { margin-left: auto; }
.ss-kaart-sub { color: var(--ss-muted); font-size: 15px; margin: -10px 0 14px; }
.ss-kaart h3 { font-size: 17px; font-weight: 700; color: var(--ss-ink); margin: 18px 0 10px; }
.ss-kaart h3 small { font-weight: 400; color: var(--ss-muted); font-size: 15px; }
.ss-link { color: var(--ss-blue); font-weight: 500; font-size: 15px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; padding: 0; }
.ss-link:hover { color: var(--ss-blue-700); text-decoration: underline; }
.ss-info-knop { color: #8fb1ee; font-size: 20px; line-height: 1; background: none; border: 0; padding: 0; }
.ss-blauw { color: var(--ss-blue); }
.ss-goud { color: var(--ss-amber); }
.ss-groen { color: var(--ss-green); }
.ss-rood { color: var(--ss-red); }
.ss-amber { color: #9a5b00; }   /* amber als tekst: donkerder dan --ss-amber, anders onleesbaar op wit */
.ss-grijs { color: var(--ss-muted); }
@media (max-width: 991px) {
    .ss-kaart { padding: 16px 14px; margin-bottom: 12px; border-radius: 14px; }
    .ss-kaart-kop h2 { font-size: 19px; }
}

/* ───────────── Schakelaars, chips, keuzelijst ───────────── */
.ss-bediening { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--ss-line); margin-bottom: 14px; }
.ss-seg { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.ss-seg button { border: 0; border-radius: 10px; padding: 10px 22px; font-size: 15px; font-weight: 500; background: var(--ss-chip); color: var(--ss-text); }
.ss-seg button:hover { background: #e4e9f0; }
.ss-seg button.active { background: var(--ss-blue); color: #fff; font-weight: 600; }
.ss-seg.is-klein button { padding: 7px 16px; font-size: 14px; }
.ss-toggle { display: inline-flex; background: var(--ss-chip); border-radius: 999px; padding: 4px; margin-left: auto; }
.ss-toggle button { border: 0; background: transparent; border-radius: 999px; padding: 7px 18px; font-size: 14px; font-weight: 500; color: var(--ss-text); }
.ss-toggle button.active { background: var(--ss-blue); color: #fff; }
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.ss-chip { border: 1px solid var(--ss-line); background: var(--ss-card); color: var(--ss-text); border-radius: 999px; padding: 7px 18px; font-size: 14px; font-weight: 500; }
.ss-chip:hover { border-color: #cfd9e5; }
.ss-chip.active { background: var(--ss-blue); border-color: var(--ss-blue); color: #fff; }
.ss-label { color: var(--ss-text); font-size: 14px; }
.ss-keuze { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.ss-select {
    border: 1px solid var(--ss-line); border-radius: 10px; padding: 9px 38px 9px 14px; font: 500 14px var(--ss-font); color: var(--ss-ink); background: var(--ss-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310284a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; -webkit-appearance: none; appearance: none;
}
@media (max-width: 767px) {
    .ss-toggle, .ss-keuze { margin-left: 0; }
    .ss-seg button { padding: 8px 14px; font-size: 14px; }
}

/* ───────────── Kolommen per slag ───────────── */
.ss-slagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ss-slag { border-radius: 14px; padding: 14px 16px 8px; background: var(--c050); min-width: 0; }
[data-slag="vrij"]    { --c: var(--ss-vrij);    --c050: var(--ss-vrij-050); }
[data-slag="rug"]     { --c: var(--ss-rug);     --c050: var(--ss-rug-050); }
[data-slag="school"]  { --c: var(--ss-school);  --c050: var(--ss-school-050); }
[data-slag="vlinder"] { --c: var(--ss-vlinder); --c050: var(--ss-vlinder-050); }
[data-slag="wissel"]  { --c: var(--ss-wissel);  --c050: var(--ss-wissel-050); }
.ss-slag-kop { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--c); margin-bottom: 6px; }
.ss-slag-icoon { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; }
.ss-slag-icoon svg { width: 20px; height: 20px; }
.ss-slag-icoon.is-klein { width: 26px; height: 26px; }
.ss-slag-icoon.is-klein svg { width: 16px; height: 16px; }
.ss-rij { display: flex; justify-content: space-between; gap: 8px; padding: 9px 2px; border-bottom: 1px solid rgba(16, 40, 74, .07); font-size: 15px; color: var(--ss-text); }
.ss-rij:last-child { border-bottom: 0; }
.ss-rij strong { color: var(--ss-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-leeg { color: var(--ss-muted); font-size: 14px; padding: 6px 2px 10px; }
.ss-stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ss-muted)); margin-right: 8px; vertical-align: 1px; }
@media (max-width: 1199px) { .ss-slagen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ss-slagen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ss-slag { padding: 12px 12px 6px; } }

/* ───────────── Statuspanelen en recordkaarten ───────────── */
.ss-panelen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 22px; }
.ss-paneel { border-radius: 14px; padding: 12px; background: var(--p050); min-width: 0; }
.ss-paneel.is-groen { --p: var(--ss-green); --p050: var(--ss-green-050); }
.ss-paneel.is-blauw { --p: var(--ss-blue); --p050: var(--ss-blue-050); }
.ss-paneel-kop { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; font-weight: 700; font-size: 17px; color: var(--p); }
.ss-paneel-kop small { font-weight: 400; color: var(--ss-muted); font-size: 15px; }
.ss-aantal { margin-left: auto; background: rgba(255, 255, 255, .75); border-radius: 8px; padding: 1px 10px; font-weight: 700; color: var(--p); }
.ss-paneel-inhoud { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ss-rec { background: var(--ss-card); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16, 40, 74, .05); min-width: 0; }
.ss-rec-titel { font-weight: 700; color: var(--ss-ink); font-size: 17px; }
.ss-rec-titel small { font-weight: 400; color: var(--ss-muted); font-size: 14px; }
.ss-rec-cat { color: var(--ss-muted); font-size: 14px; }
.ss-rec-cijfers { display: flex; align-items: flex-end; gap: 12px 22px; margin-top: 10px; flex-wrap: wrap; }
.ss-cijfer small { display: block; color: var(--ss-muted); font-size: 13px; }
.ss-cijfer strong { font-size: 18px; color: var(--ss-ink); font-variant-numeric: tabular-nums; }
.ss-rec-cijfers .ss-badge { margin-left: auto; }
.ss-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ss-badge.is-klein { padding: 3px 10px; font-size: 12px; font-weight: 500; }
.ss-badge.is-rood { background: var(--ss-red-050); color: var(--ss-red); }
.ss-badge.is-groen { background: var(--ss-green-050); color: var(--ss-green); }
.ss-badge.is-blauw { background: var(--ss-blue-050); color: var(--ss-blue); }
.ss-badge.is-grijs { background: var(--ss-chip); color: var(--ss-text); }
.ss-badge.is-amber { background: var(--ss-amber-050); color: #9a5c00; }
.ss-voortgang { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ss-voortgang-balk { flex: 1; height: 10px; background: #e7ecf2; border-radius: 999px; overflow: hidden; }
.ss-voortgang-balk span { display: block; height: 100%; background: var(--ss-green-500); border-radius: 999px; }
.ss-voortgang b { font-size: 15px; color: var(--ss-ink); font-variant-numeric: tabular-nums; }
.ss-vinkje { color: var(--ss-green); font-weight: 600; margin-top: 8px; display: flex; gap: 6px; align-items: center; }
@media (max-width: 991px) { .ss-panelen { grid-template-columns: minmax(0, 1fr); } }

/* ───────────── Tabellen ───────────── */
.ss-tabel-wrap { overflow-x: auto; }
.ss-tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; min-width: 620px; }
.ss-tabel th { background: var(--ss-head); color: var(--ss-ink); font-weight: 600; font-size: 14px; text-align: left; padding: 10px 12px; white-space: nowrap; }
.ss-tabel th:first-child { border-radius: 10px 0 0 10px; }
.ss-tabel th:last-child { border-radius: 0 10px 10px 0; }
.ss-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--ss-line); color: var(--ss-text); font-variant-numeric: tabular-nums; vertical-align: middle; }
.ss-tabel td small { color: var(--ss-muted); font-size: 13px; }
.ss-tabel .ss-plus { color: var(--ss-red); }
.ss-tabel .ss-min { color: var(--ss-green); }
.ss-tabel-voet { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ───────────── Tegels met tags ───────────── */
.ss-tegels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ss-tegel { border: 1px solid var(--ss-line); border-radius: 12px; padding: 14px 16px; background: var(--ss-card); min-width: 0; }
.ss-tegel-kop { display: flex; gap: 10px; align-items: flex-start; }
.ss-tegel-titel { font-weight: 700; color: var(--ss-ink); font-size: 17px; }
.ss-tegel-sub { color: var(--ss-muted); font-size: 14px; }
.ss-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ss-tag { background: var(--ss-blue-050); color: var(--ss-blue); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500; }
.ss-tegel.is-meer { background: var(--ss-head); border-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.ss-tegel.is-meer b { font-size: 22px; color: var(--ss-ink); }
@media (max-width: 1199px) { .ss-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ss-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────────── Infobalk, lijsten, knoppen ───────────── */
.ss-info { display: flex; gap: 10px; align-items: center; background: #eef3f9; border-radius: 12px; padding: 12px 16px; color: var(--ss-text); font-size: 14px; margin-top: 16px; }
.ss-info > .bi { color: #5b8def; font-size: 18px; flex: none; }
.ss-lijst { display: grid; gap: 10px; }
.ss-item { border: 1px solid var(--ss-line); border-radius: 12px; padding: 14px 16px; background: var(--ss-card); min-width: 0; }
.ss-item.is-vandaag { border-color: #b9d0f5; box-shadow: inset 4px 0 0 var(--ss-blue); }
.ss-item.is-voorbij { opacity: .65; }
.ss-item-kop { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.ss-item-titel { font-weight: 700; color: var(--ss-ink); font-size: 16px; }
.ss-meta { color: var(--ss-muted); font-size: 14px; }
.ss-wanneer { font-size: 14px; line-height: 1.45; margin: 2px 0 4px; }
.ss-wanneer i { color: var(--ss-muted); width: 1.1em; display: inline-block; }
.ss-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ss-knop { border: 1px solid transparent; border-radius: 10px; padding: 8px 16px; font: 600 14px var(--ss-font); background: var(--ss-blue); color: #fff; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.ss-knop:hover { background: var(--ss-blue-700); color: #fff; }
.ss-knop.is-licht { background: var(--ss-chip); color: var(--ss-text); }
.ss-knop.is-licht:hover { background: #e2e8f0; color: var(--ss-ink); }
.ss-knop.is-rand { background: var(--ss-card); border-color: var(--ss-line); color: var(--ss-ink); }
.ss-knop.is-rand:hover { border-color: #cbd6e2; }
.ss-knop.is-groen { background: var(--ss-green-500); }
.ss-knop.is-groen:hover { background: var(--ss-green); }
.ss-knop.is-rood { background: var(--ss-card); border-color: #f3c3cc; color: var(--ss-red); }
.ss-knop.is-rood:hover { background: var(--ss-red-050); }
.ss-knop.is-actief-groen { background: var(--ss-green-050); border-color: #bfe5cf; color: var(--ss-green); }
.ss-knop.is-actief-rood { background: var(--ss-red-050); border-color: #f3c3cc; color: var(--ss-red); }
.ss-knop:disabled { opacity: .6; }

/* Bootstrap-onderdelen die in de portal blijven, in dezelfde stijl */
.ss .btn-primary { --bs-btn-bg: var(--ss-blue); --bs-btn-border-color: var(--ss-blue); --bs-btn-hover-bg: var(--ss-blue-700); --bs-btn-hover-border-color: var(--ss-blue-700); --bs-btn-active-bg: var(--ss-blue-700); }
.ss .btn-outline-primary { --bs-btn-color: var(--ss-blue); --bs-btn-border-color: #bcd2f5; --bs-btn-hover-bg: var(--ss-blue); --bs-btn-hover-border-color: var(--ss-blue); }
.ss .btn { border-radius: 10px; font-weight: 600; }
.ss .form-check-input:checked { background-color: var(--ss-blue); border-color: var(--ss-blue); }
.ss .alert { border-radius: 12px; }

/* Wedstrijddag: de verwachte tijd per zwemmer (portal/wedstrijddag.js). Licht op als het zover is. */
#wedstrijddag-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#wedstrijddag-box[hidden] { display: none; }
#klokmee-box { margin-bottom: 14px; }
.wd-kop { font-size: 13px; color: var(--ss-muted); margin: 0 2px -4px; }
/* Wedstrijdcentrum in de portal: kop met tegels en het verloop rond de stand (zoals bij de ploegleiding) */
.wd-centrum { border-radius: 16px; padding: 13px 14px; background: var(--ss-navy-900); color: #fff; }
.wd-centrum .r1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wd-centrum .l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.wd-centrum .h { font-size: 18px; font-weight: 750; line-height: 1.2; }
.wd-centrum .e { font-size: 13px; opacity: .82; }
.wd-centrum .st { flex: none; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.14); }
.wd-centrum .st.live { background: #17915a; }
.wd-centrum .o { font-size: 12px; opacity: .72; margin-top: 8px; }
.wd-centrum .o .oud { color: #ffd166; opacity: 1; font-weight: 600; }
.wd-tegels { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.wd-tegels div { background: rgba(255,255,255,.10); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.wd-tegels b { display: block; font-size: 19px; font-weight: 750; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wd-tegels span { font-size: 11px; opacity: .78; line-height: 1.2; display: block; }
/* Wedstrijdverloop: strook met series (afgerond, bezig, volgende, gepland), de serie van nu, de status en een klok */
.wv { background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 14px; display: grid; gap: 12px; }
.wv-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wv-logo, .wv-ik { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ss-blue-050); display: grid; place-items: center; font-size: 21px; }
.wv-titel { flex: 1 1 160px; min-width: 0; }
.wv-titel h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ss-ink); letter-spacing: -.01em; }
.wv-titel div { font-size: 12.5px; color: var(--ss-muted); }
.wv-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wv-klok { display: grid; justify-items: end; line-height: 1.05; padding: 5px 10px; border-radius: 12px; background: var(--ss-navy-900); color: #fff; }
.wv-klok span { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wv-klok small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.wv-stem { border: 1px solid #bcd2f5; background: var(--ss-blue-050); color: var(--ss-blue-700); border-radius: 99px; padding: 7px 12px; font-size: 13px; font-weight: 700; }
.wv-stem[aria-pressed="true"] { background: var(--ss-blue); border-color: var(--ss-blue); color: #fff; }
.wv-melding { font-size: 12.5px; border-radius: 10px; padding: 7px 10px; background: var(--ss-amber-050); color: #6b4a07; }
.wv-melding.zacht { background: var(--ss-blue-050); color: var(--ss-navy-700); }
.wv-strook { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.wv-kaart { position: relative; flex: none; min-width: 84px; border: 1px solid var(--ss-line); border-radius: 12px; padding: 8px 10px 10px; text-align: center; background: var(--ss-card); font-variant-numeric: tabular-nums; }
.wv-kaart .p { font-size: 14px; font-weight: 800; color: var(--ss-ink); white-space: nowrap; }
.wv-kaart .p i { font-style: normal; margin-right: 3px; }
.wv-kaart .s { font-size: 12px; color: var(--ss-muted); }
.wv-kaart .t { font-size: 17px; font-weight: 800; color: var(--ss-ink); margin-top: 2px; }
.wv-kaart .lab { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border-radius: 99px; padding: 1px 9px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.wv-kaart.af { background: var(--ss-green-050); border-color: #bfe5cf; }
.wv-kaart.af .p i { color: var(--ss-green); }
.wv-kaart.bezig { background: var(--ss-red-050); border: 2px solid var(--ss-red); }
.wv-kaart.bezig .p i, .wv-kaart.bezig .p { color: var(--ss-red); }
.wv-kaart.bezig .lab { background: var(--ss-red); }
.wv-kaart.volgende { background: var(--ss-amber-050); border: 2px solid #f7c873; }
.wv-kaart.volgende .p i { color: var(--ss-amber); }
.wv-kaart.volgende .lab { background: var(--ss-amber); }
.wv-kaart.jij { box-shadow: inset 0 0 0 2px var(--ss-teal); }
.wv-kaart .lab.jij { background: var(--ss-teal); }
.wv-onder { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 640px) { .wv-onder { grid-template-columns: minmax(0, 1fr); } }
.wv-detail, .wv-status { border: 1px solid var(--ss-line); border-radius: 14px; padding: 12px; min-width: 0; }
.wv-dkop { display: flex; gap: 10px; align-items: center; }
.wv-dkop .h { font-size: 17px; font-weight: 800; color: var(--ss-ink); }
.wv-dkop .e { font-size: 13px; color: var(--ss-muted); }
.wv-badge { display: inline-block; vertical-align: 2px; margin-left: 4px; border-radius: 99px; padding: 1px 9px; font-size: 11px; font-weight: 700; color: #fff; background: var(--ss-amber); }
.wv-badge.bezig { background: var(--ss-red); }
.wv-drijen { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; margin-top: 8px; }
.wv-drijen > div:first-child > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ss-line); font-size: 13.5px; }
.wv-drijen > div:first-child > div:last-child { border-bottom: 0; }
.wv-drijen span { color: var(--ss-muted); }
.wv-drijen b { color: var(--ss-ink); font-variant-numeric: tabular-nums; }
/* Het bad: lijnen met rood-witte banen in plaats van een foto */
.wv-bad { border-radius: 12px; display: grid; place-content: center; text-align: center; color: var(--ss-navy-900); min-height: 96px;
    background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(217, 58, 84, .55) 22px 25px, transparent 25px 27px), linear-gradient(160deg, #bfe3f7, #5fb4e6); }
.wv-bad b { font-size: 34px; line-height: 1; background: #fff; border-radius: 8px; padding: 2px 10px; box-shadow: 0 2px 6px rgba(8, 27, 54, .2); }
.wv-bad small { margin-top: 4px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(8, 27, 54, .4); }
.wv-skop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wv-skop b { font-size: 16px; color: var(--ss-ink); }
.wv-live { border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: var(--ss-red); background: var(--ss-red-050); }
.wv-live.stil { color: var(--ss-muted); background: var(--ss-grey-050); }
.wv-balk { height: 12px; border-radius: 99px; background: var(--ss-chip); margin: 12px 0 8px; overflow: hidden; }
.wv-balk span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ss-navy-700), var(--ss-blue)); }
.wv-pct { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ss-text); font-variant-numeric: tabular-nums; }
.wv-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ss-text); }
.wv-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.wv-legenda i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; background: var(--ss-grey-050); border: 1px solid var(--ss-line); }
.wv-legenda i.af { background: var(--ss-green); border-color: var(--ss-green); }
.wv-legenda i.bezig { background: var(--ss-red); border-color: var(--ss-red); }
.wv-legenda i.volgende { background: var(--ss-amber-050); border-color: var(--ss-amber); color: var(--ss-amber); }
.wv-legenda i.jij { background: var(--ss-card); border: 2px solid var(--ss-teal); }
.wd-verloop { display: flex; gap: 5px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: none; }
.wd-verloop span { flex: none; min-width: 50px; border-radius: 9px; padding: 4px 6px; text-align: center; font-size: 11px; line-height: 1.2; background: var(--ss-card); color: var(--ss-muted); border: 1px solid #dbe3ec; font-variant-numeric: tabular-nums; }
.wd-verloop b { display: block; font-size: 13px; color: var(--ss-ink); }
.wd-verloop .af { opacity: .55; }
.wd-verloop .jij { background: #fff2d9; border-color: #f2a01d; color: #6b4a07; }
.wd-verloop .nu { background: var(--ss-navy-900); border-color: var(--ss-navy-900); color: #dbe7f5; opacity: 1; }
.wd-verloop .nu b { color: #fff; }
.wd-hero { border-radius: 16px; padding: 15px; background: var(--ss-navy-900); color: #fff; }
.wd-hero .lab { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.wd-hero .ev { font-size: 18px; font-weight: 700; margin-top: 1px; }
.wd-hero .tijd { font-size: 37px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin-top: 7px; font-variant-numeric: tabular-nums; }
.wd-hero .bij { font-size: 14px; opacity: .88; }
.wd-plek { display: flex; gap: 6px; margin-top: 11px; }
.wd-plek span { flex: 1; background: rgba(255,255,255,.13); border-radius: 9px; padding: 5px 3px; text-align: center; font-size: 11px; line-height: 1.2; }
.wd-plek b { display: block; font-size: 19px; line-height: 1.15; }
.wd-plek b .nr-est { height: 1.3em; min-width: 1.3em; border-width: 2px; }
.wd-hero.dichtbij { background: #fff2d9; color: #3c2b05; border: 2px solid #f2a01d; animation: wd-licht 1.7s ease-in-out infinite; }
.wd-hero.dichtbij .wd-plek span { background: #fff; }
.wd-hero.opblok { background: #fbe7de; color: #5c2412; border: 2px solid #c25738; animation: wd-licht-rood 1.05s ease-in-out infinite; }
.wd-hero.opblok .wd-plek span { background: #fff; }
.wd-hero.water { background: #17915a; }
.wd-hero.klaar { background: #e8f6ee; color: #0e5a3a; }
.wd-hero.klaar .tijd { font-size: 23px; }
.wd-hero.net { background: var(--ss-navy-900); }        /* net gezwommen: geklokt of officieel, met de verschillen */
.wd-vs { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.wd-vs div { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border-radius: 9px; padding: 6px 10px; font-size: 13px; }
.wd-vs b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wd-vs .goed b { color: #8ce3b0; }
.wd-vs .pr { background: #f5c542; color: #3b2a00; }
.wd-vs .pr b { color: #3b2a00; }
.wd-hero .wd-off { font-size: 12px; opacity: .8; margin-top: 9px; }
.wd-start .m .goed { color: var(--ss-green); font-weight: 650; }
.wd-start .m .pr { background: #f5c542; color: #3b2a00; border-radius: 6px; padding: 0 5px; font-weight: 650; }
@keyframes wd-licht { 0%,100% { box-shadow: 0 0 0 0 rgba(242,160,29,0); } 50% { box-shadow: 0 0 0 5px rgba(242,160,29,.33), 0 0 14px rgba(242,160,29,.42); } }
@keyframes wd-licht-rood { 0%,100% { box-shadow: 0 0 0 0 rgba(194,87,56,0); } 50% { box-shadow: 0 0 0 6px rgba(194,87,56,.34), 0 0 18px rgba(194,87,56,.42); } }
@media (prefers-reduced-motion: reduce) { .wd-hero.dichtbij, .wd-hero.opblok { animation: none; border-width: 3px; } }
.wd-lijstkop { font-size: 13px; font-weight: 700; color: var(--ss-ink); margin: 3px 2px -3px; }
.wd-start { background: var(--ss-card); border-radius: 13px; padding: 9px 11px; display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 9px; border: 2px solid transparent; }
.wd-start.volgende { border-color: var(--ss-blue); }
.wd-start.geweest { opacity: .58; }
.wd-start .t { font-weight: 700; color: var(--ss-ink); font-size: 14px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wd-start .n { font-weight: 650; color: var(--ss-ink); }
.wd-start .m { font-size: 12.5px; color: var(--ss-muted); }
.wd-slag { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.wd-s-vrij { background: #2a6fdb; } .wd-s-rug { background: #e0485f; } .wd-s-school { background: #1c9a5b; } .wd-s-vlinder { background: #7456e0; } .wd-s-wissel { background: #ee8a1c; }
.wd-seintje { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ss-card); border-radius: 13px; padding: 9px 12px; font-size: 13.5px; }
.wd-seintje small { display: block; color: var(--ss-muted); font-size: 12px; }
.wd-schak { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 24px; background: #c9d4df; position: relative; flex: none; cursor: pointer; margin: 0; }
.wd-schak::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.wd-schak:checked { background: #17915a; }
.wd-schak:checked::after { left: 21px; }

/* Wedstrijddag: een mededeling van de ploegleiding (wat de jury veranderde) */
.wd-meld { margin: 8px 0; padding: 9px 12px; border-radius: 12px; background: #e7f0fb; color: #173f6b; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.wd-meld b { margin-right: 4px; }