:root{
            /* === NEUTRALE START — geldt totdat Pascal ZetThema() aanroept ===
               Bedoeld om paars-flits te vermijden bij niet-paarse merken.
               Login-gradient is hier nog wit; verschijnt pas in z'n volle glorie
               zodra een specifiek thema actief is. */
            --primair:#94a3b8;
            --primair-licht:#cbd5e1;
            --primair-zacht:#f1f5f9;
            --secundair:#475569;
            --tekst:#1f2937;
            --tekst-zacht:#6b7280;
            --rand:#e5e7eb;
            --kaart:#ffffff;
            --achtergrond:#f3f4f6;
            --succes:#059669;
            --waarschuwing:#d97706;
            --fout:#dc2626;
            --schaduw:0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --schaduw-md:0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
            --schaduw-lg:0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
            --radius:14px;
            --radius-sm:10px;
            /* RGB-versie van primair voor rgba() in radial-gradients */
            --primair-rgb:148,163,184;
            /* Login-gradient wit/zacht zodat geen merk-kleur flitst */
            --gradient-banner:linear-gradient(to right,#cbd5e1 0%,#94a3b8 50%,#475569 100%);
            --gradient-login: linear-gradient(to bottom,#f8fafc 0%,#f1f5f9 100%);
            --gradient-zijbalk: linear-gradient(to bottom,#3a3f4a 0%,#1a1d24 100%);
            --themecolor-mobiel:#f8fafc;
            /* Onthou dat we nog geen thema hebben — voorkomt zichtbare overgang */
            --thema-overgang: opacity .2s ease;

            /* === GLASS / FROSTED-GLASS ===
               Definieert de transparante "glas"-achtergronden voor kaarten,
               tabs en dialogen. Werkt op moderne browsers (iOS Safari 14+,
               Chrome 76+, Firefox 103+). Op oudere browsers vallen we netjes
               terug op een opaque background dankzij @supports. */
            --glas:rgba(255,255,255,0.55);
            --glas-sterker:rgba(255,255,255,0.75);
            --glas-rand:rgba(255,255,255,0.7);
            --glas-blur:18px;
            --glas-saturatie:1.6;
        }

        /* Login-kaart: opaque wachten tot Pascal het thema heeft gezet.
           Veiligheid: na 800ms verschijnt hij sowieso, ook als thema nog mist. */
        :root:not([data-thema]) .login-kaart{
            animation: kaartVeilig .25s ease 0.8s forwards;
            opacity:0;
        }
        :root[data-thema] .login-kaart{
            opacity:1;
            animation:none;
        }
        @keyframes kaartVeilig{
            to{opacity:1}
        }

/* BEGIN THEMA */
:root[data-thema="jt"]{
    --primair:#390094;
    --primair-licht:#5200e0;
    --primair-zacht:#ede9fe;
    --secundair:#01000a;
    --primair-rgb:57,0,148;
    --gradient-banner:linear-gradient(to left,#5200e0 0%,#390094 50%,#100a47 100%);
    --gradient-login:linear-gradient(to top,#5200e0 0%,#6b49a2 50%,#7562d5 100%);
    --themecolor-mobiel:#7c3aed;
    --gradient-zijbalk:linear-gradient(to bottom,#160038 0%,#0a001b 100%);
}
/* END THEMA */


        *{box-sizing:border-box;margin:0;padding:0}
        /* Body en html op volledige viewport, geen margins, donkere fallback-
           kleur tijdens boot-fase. Bij app-actief / login-actief wordt deze
           overschreven door de regels verderop in dit stylesheet. */
        html, body{
            height:100%;
            min-height:100vh;
            min-height:100dvh;
            min-height:-webkit-fill-available;     /* iOS Safari alternatief */
            margin:0;
            padding:0;
            background-color:#000000;
            /* Voorkom dat iOS rubber-band scroll de body laat verschuiven en
               wit zichtbaar wordt onderaan */
            overscroll-behavior:none;
            -webkit-overflow-scrolling:touch;
        }
        /* iOS-specifieke fix: html krijgt -webkit-fill-available zodat hij
           onder de adresbalk doorloopt (height:100% is daar te kort). */
        @supports (-webkit-touch-callout: none) {
            html, body {
                min-height:-webkit-fill-available;
            }
        }
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
            /* Zwarte gradient als startachtergrond — past bij de boot-spinner.
               Voorkomt wit-flash tussen DOM-load en boot. body.app-actief en
               body.login-actief overrulen dit hieronder met de juiste themakleur. */
            background:linear-gradient(135deg,#1f2937 0%,#0f172a 50%,#000000 100%);
            color:var(--tekst);
            font-size:15px;
            line-height:1.5;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            /* App-feel: voorkom tap-flash, tekstselectie op UI */
            -webkit-tap-highlight-color:transparent;
            -webkit-touch-callout:none;
            user-select:none;
            -webkit-user-select:none;
            /* Geen overscroll-behavior op body — laat scroll natuurlijk werken.
               Het oude 'overscroll-behavior:none' veroorzaakte stroef scrollen
               aan het einde van de lijst op sommige browsers. */
        }
        /* Inputs/textareas mogen wél tekst selecteren */
        input, textarea, [contenteditable="true"]{
            user-select:text;
            -webkit-user-select:text;
        }
        /* Verwijder ugly tap-highlight op alle interactieve elementen */
        button, a, [onclick], [role="button"], .tab, tbody tr, .categorie-item,
        .nav-knop, .knop, .login-knop{
            -webkit-tap-highlight-color:transparent;
        }
        /* Smooth scroll waar mogelijk */
        html{ scroll-behavior:smooth; }

        /* ============== LAYOUT ============== */
        .app{
            display:none;                    /* Verborgen tot login geslaagd is */
            grid-template-columns:240px 1fr;
            position:fixed;
            /* Vult de hele viewport — exact zoals de boot-spinner. inset:0
               is op iOS Safari de meest betrouwbare manier omdat het samen
               met viewport-fit=cover de safe-area gebieden meedekt. */
            top:0; left:0; right:0; bottom:0;
            /* Forceer FULL viewport-hoogte op iOS Safari die anders 'visual
               viewport' gebruikt (kleiner door browser-chrome). */
            height:100vh;
            height:100dvh;
            height:-webkit-fill-available;
            width:100vw;
            z-index:1000;
            /* Mooie kleurrijke gradient achtergrond — geeft het glass-effect z'n
               karakter doordat de kaarten erdoor schemeren. */
            background:
                radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--primair) 20%, transparent) 0%, transparent 45%),
                radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--secundair) 22%, transparent) 0%, transparent 50%),
                radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--primair-licht) 25%, transparent) 0%, transparent 60%),
                linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
            background-attachment:fixed;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;     /* iOS momentum scrolling */
            touch-action:pan-y;                   /* sta verticaal scrollen toe */
            border-radius:0 !important;
        }
        /* Wordt zichtbaar gemaakt door ToonHTMLPortaal(True) in Pascal */
        body.app-actief .app{
            display:grid;
            animation:appIn .35s cubic-bezier(.16,1,.3,1);
        }
        /* Wanneer app/login actief: body kleur terug naar normaal — de
           overlay heeft toch een eigen volledige achtergrond.
           Op mobiel: body krijgt de tab-bar kleur zodat de safe-area onder
           de fixed tab-bar ook groen lijkt (geen donker strookje meer).

           NB: de definitieve regels staan verderop met !important (zoek op
           'body.login-actief'). Daar wordt de neutrale donkere kleur voor
           login gezet, en de thema-kleur voor app-actief. */
        @keyframes appIn{
            from{opacity:0; transform:scale(1.02)}
            to{opacity:1; transform:scale(1)}
        }

        /* ============== LOGIN-SCHERM (glassmorphism) ============== */
        .login{
            position:fixed;
            top:0; left:0; right:0; bottom:0;
            /* Geen expliciete height — top:0+bottom:0 zorgt al voor volledig
               vullen van de viewport. Op iOS PWA leverde 100vh/100dvh een
               te kleine hoogte op, waardoor onder het element een gekleurd
               blok verscheen. */
            width:100vw;
            z-index:1100;
            display:none;                       /* verborgen tot Pascal hem opent */
            align-items:center; justify-content:center;
            padding:24px;
            /* Safe-area padding voor iPhone notch/home-indicator */
            padding-top:max(24px, env(safe-area-inset-top));
            padding-bottom:max(24px, env(safe-area-inset-bottom));
            padding-left:max(24px, env(safe-area-inset-left));
            padding-right:max(24px, env(safe-area-inset-right));
            /* Achtergrond: sfeerfoto (sport/fitness) met donkere overlay erbovenop
               zodat de glas-kaart goed leesbaar blijft. Gradient-fallback komt
               eronder voor het geval de foto niet laadt. Vervang URL door eigen
               foto via setLoginAchtergrond() vanuit JS of Pascal.
               default = strong fitness foto van Unsplash, mag je vervangen.

               Donkere gradient over de foto = leesbaarheid verzekeren ongeacht
               welke foto er gebruikt wordt. */
            background:
                linear-gradient(135deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.75) 100%),
                var(--gradient-login),
                #0f172a;
            background-size:cover;
            background-position:center center;
            background-repeat:no-repeat;
            overflow-y:auto;
            transition:opacity .3s ease, transform .3s ease;
        }
        /* Wanneer setLoginAchtergrond een foto-URL heeft gezet, krijgt body
           de class 'login-met-foto' en gebruiken we de foto. CSS-variabele
           --login-achtergrond-foto wordt door JS gezet. */
        body.login-met-foto .login{
            background:
                linear-gradient(135deg, rgba(15,23,42, var(--login-overlay-start,.55)) 0%, rgba(15,23,42, var(--login-overlay-end,.75)) 100%),
                var(--login-achtergrond-foto, none),
                #0f172a !important;
            background-size:cover !important;
            background-position:center center !important;
            background-repeat:no-repeat !important;
        }
        body.login-actief .login{
            display:flex;                       /* getoond als Pascal het zegt */
            animation:loginFadeIn .4s ease-out;
        }
        body.app-actief .login{
            display:none;                       /* na succesvolle login altijd verborgen */
        }
        /* Wegglij-animatie bij login → dashboard */
        body.uitlog-bezig .login{
            opacity:0;
            transform:scale(.96);
        }

        @keyframes loginFadeIn{
            from{opacity:0}
            to{opacity:1}
        }

        /* Decoratieve achtergrond-cirkels — alleen zichtbaar zodra een thema actief is.
           Bij glassmorphism (login-met-foto) verbergen we ze: de foto vormt de
           visuele identiteit, de cirkels zouden alleen rommelig staan. */
        .login::before, .login::after{
            content:'';
            position:absolute;
            border-radius:50%;
            filter:blur(80px);
            opacity:0;                          /* default onzichtbaar */
            transition:opacity .35s ease;
            pointer-events:none;
        }
        :root[data-thema] .login::before,
        :root[data-thema] .login::after{
            opacity:.4;                         /* zichtbaar zodra thema actief is */
        }
        body.login-met-foto .login::before,
        body.login-met-foto .login::after{
            opacity:0 !important;               /* foto-modus: cirkels weg */
        }
        .login::before{
            width:480px; height:480px;
            background:var(--primair-licht);
            top:-160px; right:-160px;
        }
        .login::after{
            width:520px; height:520px;
            background:var(--primair);
            bottom:-200px; left:-200px;
        }

        .login-kaart{
            position:relative; z-index:1;
            /* Glassmorphism: doorzichtige witte laag met sterke blur achter zich.
               De achtergrond-foto schemert subtiel door, blur maakt hem zacht. */
            background:rgba(255,255,255,.12);
            backdrop-filter:blur(24px) saturate(1.5);
            -webkit-backdrop-filter:blur(24px) saturate(1.5);
            border:1px solid rgba(255,255,255,.18);
            border-radius:24px;
            padding:48px 40px;
            max-width:440px; width:100%;
            box-shadow:
                0 24px 60px rgba(0,0,0,.45),
                0 0 0 1px rgba(255,255,255,.06),
                inset 0 1px 0 rgba(255,255,255,.15);
            animation:loginKaartIn .5s cubic-bezier(.16,1,.3,1);
            /* Tekst-kleur op glas-kaart is wit voor contrast met donkere overlay */
            color:#fff;
        }

        /* Fallback voor browsers zonder backdrop-filter ondersteuning
           (oude iOS Safari < 16.4, oude Edge): toon een donkere semi-
           transparante kaart in plaats. Glas-effect mist, maar kaart
           blijft leesbaar. */
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
            .login-kaart{
                background:rgba(15,23,42,.85);
                border-color:rgba(255,255,255,.10);
            }
        }

        @keyframes loginKaartIn{
            from{opacity:0; transform:translateY(20px)}
            to{opacity:1; transform:translateY(0)}
        }

        .login-logo{
            width:72px; height:72px;
            border-radius:50%;
            background:linear-gradient(135deg,var(--primair) 0%,var(--secundair) 100%);
            color:#fff;
            display:flex; align-items:center; justify-content:center;
            font-size:24px; font-weight:700; letter-spacing:.5px;
            margin:0 auto 24px;
            box-shadow:0 8px 20px rgba(var(--primair-rgb),.35);
        }

        .login-titel{
            font-size:24px; font-weight:700;
            color:#fff;
            text-shadow:0 1px 8px rgba(0,0,0,.2);
            text-align:center; margin-bottom:8px;
        }

        .login-subtitel{
            font-size:14px;
            color:rgba(255,255,255,.78);
            text-align:center; margin-bottom:32px;
        }

        .login-veld{
            margin-bottom:18px;
        }

        .login-veld label{
            display:block;
            font-size:13px; font-weight:600;
            color:rgba(255,255,255,.85);
            margin-bottom:6px;
            letter-spacing:.2px;
        }

        .login-veld input{
            width:100%;
            padding:12px 14px;
            /* Glas-velden: lichte transparante achtergrond zodat de blur
               eronder zichtbaar blijft. Subtiele witte rand. */
            border:1.5px solid rgba(255,255,255,.18);
            border-radius:10px;
            font-size:15px; font-family:inherit;
            background:rgba(255,255,255,.10);
            color:#fff;
            transition:all .15s;
            outline:none;
            backdrop-filter:blur(4px);
            -webkit-backdrop-filter:blur(4px);
        }
        .login-veld input:focus{
            border-color:rgba(255,255,255,.55);
            background:rgba(255,255,255,.18);
            box-shadow:0 0 0 3px rgba(255,255,255,.10);
        }
        .login-veld input::placeholder{ color:rgba(255,255,255,.45); }
        /* Verberg de gele/witte autofill achtergrond van Chrome op donkere kaart */
        .login-veld input:-webkit-autofill,
        .login-veld input:-webkit-autofill:hover,
        .login-veld input:-webkit-autofill:focus{
            -webkit-text-fill-color:#fff;
            -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.10) inset;
            transition:background-color 5000s ease-in-out 0s;
        }

        .login-helper{
            font-size:12px;
            color:rgba(255,255,255,.55);
            margin-top:6px;
        }

        .login-onthoud{
            display:flex; align-items:center; gap:8px;
            font-size:13px;
            color:rgba(255,255,255,.78);
            margin-bottom:20px; user-select:none; cursor:pointer;
        }
        .login-onthoud input{
            width:16px; height:16px; cursor:pointer;
            accent-color:#fff;
        }

        .login-knop{
            width:100%;
            padding:13px;
            border:none; border-radius:10px;
            /* Knop iets lichter en met meer presence dan op witte kaart,
               anders verdwijnt hij in het glas. */
            background:linear-gradient(135deg,var(--primair-licht) 0%,var(--primair) 100%);
            color:#fff;
            font-size:15px; font-weight:700; font-family:inherit;
            letter-spacing:.3px;
            cursor:pointer;
            transition:all .15s;
            display:flex; align-items:center; justify-content:center; gap:8px;
            position:relative; overflow:hidden;     /* voor ripple */
            box-shadow:0 8px 24px rgba(0,0,0,.25);
        }
        .login-knop:hover:not(:disabled){
            transform:translateY(-1px);
            box-shadow:0 12px 28px rgba(0,0,0,.35);
            filter:brightness(1.08);
        }
        .login-knop:active:not(:disabled){
            transform:translateY(0) scale(.98);
        }
        .login-knop:disabled{
            opacity:.6; cursor:not-allowed;
        }
        /* Touch-ripple effect — verschijnt waar de gebruiker tikt */
        .login-knop::after{
            content:""; position:absolute; inset:0;
            background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.4) 0%, transparent 50%);
            opacity:0; transition:opacity .4s;
            pointer-events:none;
        }
        .login-knop.tap::after{ opacity:1; transition:none; }

        .login-spinner{
            width:16px; height:16px;
            border:2px solid rgba(255,255,255,.3);
            border-top-color:#fff;
            border-radius:50%;
            animation:loginSpin .7s linear infinite;
            display:none;
        }
        .login-knop.bezig .login-spinner{ display:block; }

        @keyframes loginSpin{
            to{transform:rotate(360deg)}
        }

        /* === LOGIN-PROGRESS — 10 sec balk die naar rechts vult ===
           Verschijnt onder de login-knop terwijl de Pascal-bridge bezig is.
           Vult zich smooth gedurende 10 seconden. Daarna timeout-melding
           met een retry-knop. */
        .login-progress{
            display:none;
            margin-top:14px;
            text-align:center;
        }
        .login-bezig .login-progress{ display:block; }

        .login-progress-balk-wrap{
            position:relative;
            height:6px;
            border-radius:999px;
            background:rgba(255,255,255,.12);
            overflow:hidden;
        }
        .login-progress-balk{
            position:absolute;
            inset:0 100% 0 0;        /* start: 100% rechts geklemd = 0% breed */
            background:linear-gradient(90deg, var(--primair-licht), var(--primair));
            border-radius:999px;
            transition:right 10s linear;
        }
        /* Activatie-class: balk gaat naar rechts vullen */
        .login-progress-balk.vol{
            right:0;                 /* 0% rechts = 100% breed */
        }
        .login-progress-tekst{
            margin-top:10px;
            font-size:13px;
            color:rgba(255,255,255,.72);
        }

        /* === LOGIN-TIMEOUT — verschijnt na 10 sec wachten === */
        .login-timeout{
            display:none;
            margin-top:14px;
            padding:14px 16px;
            border-radius:12px;
            background:rgba(245,158,11,.14);
            border:1px solid rgba(251,191,36,.4);
            text-align:center;
        }
        .login-timeout-actief .login-timeout{ display:block; }
        .login-timeout-actief .login-progress{ display:none; }
        .login-timeout-titel{
            font-weight:600;
            color:#fef3c7;
            margin-bottom:4px;
        }
        .login-timeout-uitleg{
            font-size:13px;
            color:rgba(255,255,255,.72);
            margin-bottom:12px;
        }
        .login-retry-knop{
            background:var(--primair);
            color:#fff;
            border:none;
            border-radius:10px;
            padding:10px 22px;
            font-size:14px;
            font-weight:600;
            cursor:pointer;
            transition:transform .15s ease, background .15s ease;
        }
        .login-retry-knop:hover{
            background:var(--primair-licht);
        }
        .login-retry-knop:active{
            transform:scale(.96);
        }

        /* Offline-QR-knop binnen het login-timeout-blok (verschijnt als de
           login hangt én er offline-gegevens zijn). Secundaire stijl: omlijnd
           in plaats van gevuld, zodat 'Opnieuw proberen' de primaire actie
           blijft. */
        .login-offline-qr-knop{
            display:inline-flex; align-items:center; justify-content:center;
            gap:7px;
            margin-top:10px;
            background:transparent;
            color:var(--primair);
            border:1.5px solid var(--primair);
            border-radius:10px;
            padding:9px 18px;
            font-size:14px;
            font-weight:600;
            cursor:pointer;
            transition:transform .15s ease, background .15s ease;
        }
        .login-offline-qr-knop:hover{
            background:var(--primair-zacht, rgba(0,0,0,.04));
        }
        .login-offline-qr-knop:active{
            transform:scale(.96);
        }

        .login-fout{
            display:none;
            /* Foutmelding: rode tint die ook op donkere kaart leesbaar blijft */
            background:rgba(220,38,38,.18);
            border:1px solid rgba(248,113,113,.45);
            color:#fecaca;
            font-size:13px;
            padding:10px 12px;
            border-radius:8px;
            margin-bottom:18px;
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
        }
        .login-fout.zichtbaar{ display:block; }

        .login-onder{
            margin-top:24px;
            text-align:center;
        }
        .login-hulp{
            display:inline-block;
            font-size:13px;
            color:#fff;
            text-decoration:none;
            font-weight:600;
            opacity:.85;
            transition:opacity .15s;
        }
        .login-hulp:hover{ opacity:1; text-decoration:underline; }

        /* Offline-QR-link: standaard verborgen, alleen zichtbaar wanneer er
           lokaal opgeslagen QR-gegevens zijn (initLoginForm zet de class). */
        .login-offline-qr{
            display:none;            /* default verborgen */
            align-items:center;
            justify-content:center;
            gap:6px;
            margin-top:14px;
            padding:9px 16px;
            font-size:13px;
            color:#fff;
            text-decoration:none;
            font-weight:600;
            border:1px solid rgba(255,255,255,.35);
            border-radius:999px;
            opacity:.9;
            transition:opacity .15s, background .15s;
        }
        .login-offline-qr:hover{
            opacity:1;
            background:rgba(255,255,255,.12);
        }
        /* Tonen zodra het login-scherm weet dat er offline-gegevens zijn. */
        body.heeft-offline-qr .login-offline-qr{
            display:inline-flex;
        }

        .login-versie{
            margin-top:16px;
            font-size:11px;
            color:rgba(255,255,255,.4);
            text-align:center;
        }

        /* ============== ZIJBALK ============== */
        /* Veiligheidsmaatregel (alle schermbreedtes): containers die het scherm
           raken (volle breedte/hoogte balken) hebben gegarandeerd geen afgeronde
           hoeken aan de schermrand. Voorkomt witte/zwarte driehoekjes in de hoeken. */
        html, body, .app, .hoofd{
            border-radius:0;
        }
        .zijbalk, .nav, .acties{
            border-radius:0;
        }
        /* Achter de balken zetten we de header-kleur als body-achtergrond,
           zodat een eventueel sub-pixel-afrondings-artefact niet lekt.
           Op mobiel: ook de safe-area onder de tab-bar is dezelfde groen-tint
           wat zorgt dat er geen donker strookje onderaan zichtbaar is.
           !important nodig omdat de boot-fase regels ook background-color
           op body zetten. */
        body.app-actief{
            background:var(--secundair) !important;
            background-color:var(--secundair) !important;
        }
        /* Login-scherm krijgt een NEUTRALE donkere achtergrond ipv de
           thema-kleur. Reden: var(--secundair) is per project een andere
           donkere tint (paars/rood/groen/blauw). Onder de login-kaart op iOS
           bleef die tint zichtbaar in de safe-area / overscroll, met een
           groot gekleurd blok als gevolg. #0f172a matcht de donkere overlay
           van de login-foto en is dus onzichtbaar. */
        body.login-actief{
            background:#0f172a !important;
            background-color:#0f172a !important;
        }
        /* HTML ook groen maken zodra app actief — anders schemert de donkere
           inline html-style door de body heen bij iOS Safari/PWA. */
        html:has(body.app-actief){
          background:#0f172a !important;
        }

        .zijbalk{
            background:var(--gradient-zijbalk);
            color:#fff;
            display:flex;
            flex-direction:column;
            padding:24px 16px;
            position:sticky;
            top:0;
            height:100vh;
            border-radius:0;            /* strak tegen schermrand op desktop */
        }
        .merk{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:8px;
            padding:8px 4px;
        }
        .merk-logo{
            width:36px;height:36px;
            border-radius:50%;
            background:#fff;
            display:flex;align-items:center;justify-content:center;
            font-weight:700;color:var(--primair);
            font-size:14px;
            flex-shrink:0;
            overflow:hidden;            /* afbeelding wordt netjes geknipt door radius */
        }
        /* Wanneer er een echte afbeelding (img-tag) in zit: laat hem het hele
           rondje vullen, behoud verhouding, geen tekst-fallback meer zichtbaar. */
        .merk-logo img,
        .login-logo img,
        .boot-logo img{
            width:100%;
            height:100%;
            object-fit:contain;          /* schaalt mee met behoud van verhouding */
            display:block;
        }
        /* Wanneer er een logo-img is: maak de achtergrond doorzichtig zodat
           de img zelf de visuele identiteit draagt (geen wit cirkeltje meer). */
        .merk-logo.heeft-img,
        .login-logo.heeft-img{
            background:transparent;
            padding:2px;
        }
        .merk-naam{font-weight:600;font-size:15px;letter-spacing:.3px}
        .versie{
            font-size:11px;
            color:rgba(255,255,255,.5);
            margin-bottom:24px;
            padding:0 4px;
        }
        .nav{display:flex;flex-direction:column;gap:4px;
             /* Op desktop: positie boven de zijbalk-container, in de linker grid-kolom */
             position:fixed;
             top:120px;
             left:16px;
             width:208px;
             z-index:51;}
        .nav-knop{
            display:flex;align-items:center;gap:12px;
            background:transparent;
            border:none;
            color:rgba(255,255,255,.85);
            font:inherit;
            padding:12px 14px;
            border-radius:var(--radius-sm);
            text-align:left;
            cursor:pointer;
            transition:background .15s,color .15s;
            width:100%;
        }
        .nav-knop:hover{background:rgba(255,255,255,.08);color:#fff}
        .nav-knop.actief{
            background:rgba(var(--primair-rgb),.25);
            color:#fff;
            box-shadow:inset 3px 0 0 var(--primair-licht);
        }
        .nav-knop svg{width:18px;height:18px;flex-shrink:0;opacity:.8}
        .nav-knop.actief svg{opacity:1}
        .nav-bottom{margin-top:auto;display:flex;flex-direction:column;gap:4px}
        .klant-info{
            padding:12px 14px;
            border-radius:var(--radius-sm);
            background:rgba(255,255,255,.06);
            margin-bottom:8px;
        }
        .klant-info .label{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}
        .klant-info .waarde{font-size:13px;color:#fff;margin-top:2px;font-weight:500}

        /* ============== HOOFDINHOUD ============== */
        .hoofd{
            display:flex;
            flex-direction:column;
            min-height:100vh;
            min-height:100dvh;          /* dynamic viewport, iOS Safari */
        }
        .banner{
            position:relative;
            height:200px;
            background:var(--gradient-banner);
            overflow:hidden;
            flex-shrink:0;
            border-radius:0;            /* strakke rechthoekige banner op alle schermbreedtes */
        }
        .banner::before{
            content:"";
            position:absolute;inset:0;
            background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.08) 0%,transparent 50%);
        }
        .banner-inhoud{
            position:relative;
            height:100%;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:0 32px;
        }
        .banner-logo{
            width:140px;height:140px;
            border-radius:50%;
            background:#fff;
            display:flex;align-items:center;justify-content:center;
            box-shadow:0 8px 32px rgba(0,0,0,.25);
            overflow:hidden;
        }
        .banner-logo span{
            font-weight:800;
            color:var(--primair);
            font-size:22px;
            letter-spacing:1px;
            text-align:center;
            line-height:1.1;
            padding:0 10px;             /* iets ruimte van de cirkel-rand */
            /* NOOIT mid-woord afbreken (bv. "HAAKSB/ERGEN"): de naam blijft op
               EEN regel; de JS (schaalLogoCirkel) krimpt de font tot hij past.
               Was 'word-break:break-word', wat juist de afbreking veroorzaakte. */
            white-space:nowrap;
        }
        /* Img in banner-logo: schaalt mee, behoud verhouding, verbergt span */
        .banner-logo img{
            width:80%;
            height:80%;
            object-fit:contain;
            display:block;
        }
        .banner-logo.heeft-img span{
            display:none;
        }
        .banner-titel{
            position:absolute;
            bottom:20px;left:32px;
            color:#fff;
        }
        .banner-titel h1{font-size:22px;font-weight:600;letter-spacing:.3px}
        .banner-titel p{font-size:13px;opacity:.85;margin-top:2px}

        /* ============================================================
           BANNER-STIJLEN — Aurora / Flits / Glass   (multi-tenant)
           ------------------------------------------------------------
           De stijl wordt gelezen van het :root-element (de <html>), dus
           op DEZELFDE plek waar je data-thema zet:
               document.documentElement.setAttribute(
                   "data-bannerstijl", (branding.bannerStijl)||"aurora");
           Geen attribuut = Aurora (zie selector hieronder). Waarden:
           "aurora" | "flits" | "glass" | "klassiek".
           Gebruikt de thema-vars --gradient-banner / --primair-rgb /
           --primair-licht; boog en strepen zijn doorschijnend wit (werkt
           bij elk merk). Decoratie in ::after; de bestaande ::before-
           highlight en de logo-cirkel blijven intact. Inhoud staat met
           z-index bovenop. Banner-titel houdt zijn position:absolute.
           ============================================================ */
        .banner::after{
            content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
        }
        .banner > .banner-inhoud{ z-index:2; }   /* al position:relative */
        .banner > .banner-titel{ z-index:2; }    /* al position:absolute  */

        /* ---- Aurora (tevens standaard als er geen data-bannerstijl is) ---- */
        :root:not([data-bannerstijl="flits"]):not([data-bannerstijl="glass"]):not([data-bannerstijl="klassiek"]) .banner{
            background:
                url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201152%20219%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M58%20201%20C403%20246%20760%20-22%201117%2031%27%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C0.5%29%27%20stroke-width%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M58%20201%20C403%20246%20760%20-22%201117%2031%27%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C0.18%29%27%20stroke-width%3D%276%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat,
                radial-gradient(70% 150% at 82% 10%, rgba(var(--primair-rgb), .40), transparent 60%),
                var(--gradient-banner);
        }
        :root:not([data-bannerstijl="flits"]):not([data-bannerstijl="glass"]):not([data-bannerstijl="klassiek"]) .banner::after{
            background:radial-gradient(circle, rgba(255,255,255,.10) 1.3px, transparent 1.6px) 0 0 / 22px 22px;
            -webkit-mask:linear-gradient(to right, transparent 52%, #000 72%);
                    mask:linear-gradient(to right, transparent 52%, #000 72%);
        }

        /* ---- Flits: schuine lichtstrepen + swoosh + accentbalk links ---- */
        :root[data-bannerstijl="flits"] .banner{
            background:
                linear-gradient(105deg, transparent 55%, rgba(var(--primair-rgb), .22) 100%),
                var(--gradient-banner);
            border-left:5px solid rgba(255,255,255,.55);
        }
        :root[data-bannerstijl="flits"] .banner::after{
            background:
                repeating-linear-gradient(110deg,
                    transparent 0 20px,
                    rgba(255,255,255,.12) 20px 23px,
                    transparent 23px 30px,
                    rgba(255,255,255,.06) 30px 33px,
                    transparent 33px 56px);
        }

        /* ---- Glass: zachte gloeden + frosted paneel achter het logo ---- */
        :root[data-bannerstijl="glass"] .banner{
            background:
                radial-gradient(60% 130% at 85% 6%, rgba(var(--primair-rgb), .42), transparent 60%),
                radial-gradient(55% 120% at 12% 100%, rgba(var(--primair-rgb), .26), transparent 60%),
                var(--gradient-banner);
        }
        :root[data-bannerstijl="glass"] .banner::after{
            inset:14% 23%;
            border-radius:22px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.22);
            -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
        }

        /* ---- Klassiek: geen decoratie (oude, vlakke gradient-banner) ---- */
        :root[data-bannerstijl="klassiek"] .banner::after{ background:none; }


        .inhoud{
            padding:24px 32px 32px;
            display:grid;
            grid-template-columns:minmax(320px,1fr) minmax(280px,1.2fr);
            gap:20px;
            max-width:1200px;
            width:100%;
            margin:0 auto;
        }

        /* ============== KAARTEN ============== */
        .kaart{
            background:var(--glas);
            backdrop-filter:blur(var(--glas-blur)) saturate(var(--glas-saturatie));
            -webkit-backdrop-filter:blur(var(--glas-blur)) saturate(var(--glas-saturatie));
            border-radius:var(--radius);
            box-shadow:0 8px 32px rgba(31,38,135,0.10), 0 1px 2px rgba(0,0,0,0.04);
            border:1px solid var(--glas-rand);
            overflow:hidden;
        }
        /* Fallback: browsers zonder backdrop-filter krijgen opaque kaart */
        @supports not (backdrop-filter: blur(1px)) {
            .kaart{ background:rgba(255,255,255,0.95); }
        }
        .kaart-kop{
            padding:16px 20px;
            border-bottom:1px solid rgba(0,0,0,.06);
            display:flex;align-items:center;justify-content:space-between;
        }
        .kaart-titel{font-size:14px;font-weight:600;color:var(--tekst)}
        .kaart-inhoud{padding:18px 20px}

        /* ============== KALENDER ============== */
        .kalender-kop{
            display:flex;align-items:center;justify-content:space-between;
            padding:14px 18px;
            background:linear-gradient(135deg,var(--primair) 0%,var(--primair-licht) 100%);
            color:#fff;
            border-radius:var(--radius) var(--radius) 0 0;
        }
        .kalender-titel{font-size:15px;font-weight:600;letter-spacing:.3px;text-transform:capitalize}
        .kalender-knop{
            background:rgba(255,255,255,.15);
            border:none;
            width:30px;height:30px;
            border-radius:50%;
            color:#fff;
            cursor:pointer;
            display:flex;align-items:center;justify-content:center;
            transition:background .15s;
        }
        .kalender-knop:hover{background:rgba(255,255,255,.25)}
        .kalender-knop svg{width:14px;height:14px}
        .kalender-grid{
            display:grid;
            grid-template-columns:repeat(7,1fr);
            gap:4px;
            padding:14px;
        }
        .kalender-weekdag{
            text-align:center;
            font-size:11px;
            font-weight:600;
            color:var(--tekst-zacht);
            text-transform:uppercase;
            letter-spacing:.5px;
            padding:6px 0;
        }
        .kalender-dag{
            aspect-ratio:1;
            display:flex;align-items:center;justify-content:center;
            font-size:14px;
            border-radius:8px;
            cursor:pointer;
            transition:all .15s;
            border:1px solid transparent;
            color:var(--tekst);
            background:transparent;
            font-family:inherit;
            position:relative;
        }
        .kalender-dag:hover:not(.leeg):not(.geselecteerd){background:var(--primair-zacht);color:var(--primair)}
        .kalender-dag.geselecteerd{
            background:var(--primair);
            color:#fff;
            font-weight:600;
            box-shadow:0 2px 8px rgba(var(--primair-rgb),.35);
        }
        .kalender-dag.vandaag:not(.geselecteerd){
            border-color:var(--primair);
            color:var(--primair);
            font-weight:600;
        }
        .kalender-dag.heeft-les::after{
            content:"";
            position:absolute;
            bottom:4px;left:50%;
            transform:translateX(-50%);
            width:4px;height:4px;
            border-radius:50%;
            background:var(--primair);
        }
        .kalender-dag.geselecteerd.heeft-les::after{background:#fff}
        .kalender-dag.leeg{cursor:default;pointer-events:none}

        /* ============== CATEGORIEEN ============== */
        .categorie-lijst{
            max-height:380px;
            overflow-y:auto;
            padding:8px;
        }
        .categorie-lijst::-webkit-scrollbar{width:8px}
        .categorie-lijst::-webkit-scrollbar-track{background:transparent}
        .categorie-lijst::-webkit-scrollbar-thumb{background:var(--rand);border-radius:4px}
        .categorie-lijst::-webkit-scrollbar-thumb:hover{background:#cbd5e1}
        .categorie-item{
            display:flex;
            align-items:center;
            gap:12px;
            padding:10px 12px;
            border-radius:var(--radius-sm);
            cursor:pointer;
            transition:all .15s;
            font-size:14px;
            font-weight:500;
            color:var(--tekst);
            border:1px solid transparent;
            margin-bottom:4px;
        }
        /* Hover bewust in neutraal lichtblauw-grijs zodat het duidelijk
           verschilt van de actieve (themakleur) state. Anders zou hover
           over een Sproei-categorie er hetzelfde uitzien als geselecteerd. */
        .categorie-item:hover{
            background:#eef2f7;          /* lichtgrijs-blauw */
            color:var(--tekst);
        }
        .categorie-item.actief{
            background:var(--primair-zacht);
            color:var(--primair);
            font-weight:600;
            border-color:rgba(var(--primair-rgb),.2);
            box-shadow:var(--schaduw);
        }
        /* Hover op een actieve category blijft de actieve themakleur tonen
           (anders flikkert hij naar grijs en weer terug bij muis-bewegen). */
        .categorie-item.actief:hover{
            background:var(--primair-zacht);
            color:var(--primair);
        }
        /* Verwijder de oude '●' marker — de actieve tegel toont al voldoende
           visuele feedback samen met de gekleurde achtergrond */
        .categorie-item.actief::before{ display:none }
        .categorie-item .categorie-naam{
            flex:1;
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

        /* ============== FOTO-CATEGORIEËN (modern) ==============
           ALLEEN ACTIEF onder body.look-modern. In klassieke modus blijft
           de oorspronkelijke rij-weergave. */
        body.look-modern .categorie-lijst.foto-modus{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            padding:0;
        }
        body.look-modern .categorie-lijst.foto-modus .categorie-item{
            position:relative;
            aspect-ratio:4 / 5;
            padding:0;
            margin:0;
            overflow:hidden;
            border-radius:16px;
            border:none;
            background:#1f2937;     /* fallback achter de foto */
            transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
            cursor:pointer;
        }
        body.look-modern .categorie-lijst.foto-modus .categorie-item:hover{
            transform:translateY(-3px) scale(1.02);
            box-shadow:0 12px 28px rgba(0,0,0,.18);
        }
        body.look-modern .categorie-lijst.foto-modus .categorie-item.actief{
            transform:translateY(-3px) scale(1.02);
            box-shadow:0 0 0 3px var(--primair),
                       0 12px 28px rgba(var(--primair-rgb),.35);
        }
        .categorie-foto{
            position:absolute; inset:0;
            width:100%; height:100%;
            object-fit:cover;
            transition:transform .5s cubic-bezier(.16,1,.3,1);
            display:block;
        }
        body.look-modern .categorie-lijst.foto-modus .categorie-item:hover .categorie-foto{
            transform:scale(1.08);
        }
        /* Donker overlay onderaan zodat de naam altijd leesbaar is, ongeacht foto */
        .categorie-foto-overlay{
            position:absolute; inset:0;
            background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85) 100%);
            pointer-events:none;
        }
        .categorie-foto-info{
            position:absolute; left:12px; right:12px; bottom:12px;
            color:#fff;
            z-index:1;
            display:flex; flex-direction:column; gap:4px;
        }
        body.look-modern .categorie-lijst.foto-modus .categorie-naam{
            font-size:15px;
            font-weight:700;
            letter-spacing:-.2px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            color:#fff;
            text-shadow:0 1px 4px rgba(0,0,0,.4);
        }
        /* Kleinere/zachtere tegel binnen de foto-modus, want de foto IS de visuele
           identiteit. Tegel komt linksboven als optioneel kleurmerk. */
        body.look-modern .categorie-lijst.foto-modus .categorie-tegel{
            position:absolute; top:10px; left:10px;
            width:32px; height:32px;
            font-size:11px;
            border-radius:9px;
            box-shadow:0 4px 10px rgba(0,0,0,.25);
            opacity:.92;
        }
        /* Fallback wanneer de foto niet wil laden: gradient toont alleen tegel + naam.
           De fallback-class wordt door JS gezet bij img.onerror. */
        body.look-modern .categorie-lijst.foto-modus .categorie-item.foto-mislukt{
            background:linear-gradient(135deg, var(--primair) 0%, var(--secundair) 100%);
        }
        body.look-modern .categorie-lijst.foto-modus .categorie-item.foto-mislukt .categorie-foto{
            display:none;
        }

        /* ============== WEEK-PILLEN KALENDER (modern) ==============
           ALLEEN ZICHTBAAR onder body.look-modern. In klassieke modus blijft
           het oorspronkelijke maand-grid (en de bestaande mobiele
           horizontale week-strip) onveranderd. */
        body:not(.look-modern) .week-pillen-wrapper{ display:none !important; }
        body:not(.look-modern) .kalender-knop-terug-week{ display:none !important; }

        .week-pillen-wrapper{
            margin-bottom:14px;
        }
        .week-pillen-titel{
            display:flex; align-items:center; justify-content:space-between;
            gap:8px;
            margin-bottom:10px;
            padding:0 2px;
        }
        .week-pillen-label{
            font-size:13px; font-weight:600; color:var(--tekst-zacht);
            /* Krimp/ellipsis als de ruimte krap wordt, i.p.v. de toggle weg te
               duwen of mee af te breken. */
            min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }
        .week-pillen-toggle{
            font-size:12px; font-weight:600;
            color:var(--primair);
            background:none; border:none;
            cursor:pointer;
            padding:4px 8px; border-radius:6px;
            transition:background .15s;
            /* Knoptekst altijd volledig op EEN regel (bv. "Week doorschuiven"):
               nooit mid-woord afbreken, en niet meekrimpen met de flex-rij. */
            white-space:nowrap; flex-shrink:0;
        }
        .week-pillen-toggle:hover{
            background:var(--primair-zacht);
        }
        .week-pillen{
            display:grid;
            grid-template-columns:repeat(7, 1fr);
            gap:6px;
        }
        .week-pil{
            aspect-ratio:1 / 1.4;
            background:#f3f4f6;
            border:1.5px solid transparent;
            border-radius:14px;
            display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            padding:8px 4px;
            cursor:pointer;
            transition:all .2s cubic-bezier(.16,1,.3,1);
            position:relative;
            user-select:none;
        }
        .week-pil:hover{
            background:var(--primair-zacht);
            border-color:rgba(var(--primair-rgb),.3);
        }
        .week-pil.actief{
            background:linear-gradient(135deg, var(--primair) 0%, var(--secundair) 100%);
            color:#fff;
            box-shadow:0 6px 16px rgba(var(--primair-rgb),.35);
            transform:translateY(-2px);
            border-color:transparent;
        }
        .week-pil.vandaag:not(.actief){
            border-color:var(--primair);
            background:#fff;
        }
        .week-pil-dag{
            font-size:10px;
            font-weight:600;
            text-transform:uppercase;
            letter-spacing:.4px;
            color:var(--tekst-zacht);
            margin-bottom:4px;
        }
        .week-pil.actief .week-pil-dag{ color:rgba(255,255,255,.85) }
        .week-pil-num{
            font-size:18px;
            font-weight:700;
            color:var(--tekst);
            line-height:1;
        }
        .week-pil.actief .week-pil-num{ color:#fff }
        .week-pil-stip{
            width:5px; height:5px; border-radius:50%;
            background:var(--primair);
            margin-top:5px;
            visibility:hidden;
        }
        .week-pil.heeft-lessen .week-pil-stip{ visibility:visible }
        .week-pil.actief .week-pil-stip{ background:#fff }

        /* Kalender-modus toggle: alleen één van beide tegelijk zichtbaar.
           ALLEEN binnen look-modern. In klassieke modus altijd maandgrid. */
        body.look-modern.kalender-week-modus .kalender-grid{ display:none; }
        body.look-modern.kalender-week-modus .week-pillen-wrapper{ display:block; }
        body.look-modern:not(.kalender-week-modus) .week-pillen-wrapper{ display:none; }
        /* In week-modus: terug-week-knop verbergen, in maand-modus tonen */
        body.look-modern.kalender-week-modus .kalender-knop-terug-week{ display:none; }
        body.look-modern:not(.kalender-week-modus) .kalender-knop-terug-week{ display:flex; }

        /* ============== LES-KAARTEN (mobile vervangt de tabel) ==============
           ALLEEN ACTIEF onder body.look-modern. In klassieke modus blijft
           de tabel (incl. bestaande mobiele tabel-styling) zoals hij is. */
        .les-kaart-lijst{
            display:none;
            flex-direction:column;
            gap:10px;
            padding:14px 16px 18px;
        }
        body.look-modern.les-kaart-modus .les-kaart-lijst{ display:flex; }
        body.look-modern.les-kaart-modus .reservering-tabel-scroll{ display:none; }

        .les-kaart{
            background:#fff;
            border:1px solid var(--rand);
            border-radius:18px;
            padding:14px;
            display:flex;
            gap:14px;
            transition:all .2s cubic-bezier(.16,1,.3,1);
            animation:lesKaartIn .35s cubic-bezier(.16,1,.3,1) both;
        }
        .les-kaart:nth-child(1){ animation-delay:.04s }
        .les-kaart:nth-child(2){ animation-delay:.08s }
        .les-kaart:nth-child(3){ animation-delay:.12s }
        .les-kaart:nth-child(4){ animation-delay:.16s }
        .les-kaart:nth-child(5){ animation-delay:.20s }
        .les-kaart:nth-child(n+6){ animation-delay:.24s }
        @keyframes lesKaartIn{
            from{ opacity:0; transform:translateY(8px) }
            to{ opacity:1; transform:translateY(0) }
        }
        .les-kaart:hover{
            border-color:var(--primair);
            box-shadow:0 8px 20px rgba(var(--primair-rgb),.10);
            transform:translateY(-1px);
        }
        .les-kaart.gereserveerd{
            border-color:var(--primair);
            background:linear-gradient(135deg, #fff 0%, var(--primair-zacht) 100%);
        }
        .les-kaart.verstreken{
            opacity:.6;
        }
        .les-kaart-foto{
            width:84px; height:84px;
            border-radius:14px;
            overflow:hidden;
            flex-shrink:0;
            position:relative;
            background:linear-gradient(135deg, var(--primair) 0%, var(--secundair) 100%);
        }
        .les-kaart-foto img{
            width:100%; height:100%;
            object-fit:cover;
            display:block;
        }
        .les-kaart-foto-tegel{
            /* Fallback tegel als geen foto: getoonde initialen op gradient */
            position:absolute; inset:0;
            display:flex; align-items:center; justify-content:center;
            color:#fff;
            font-weight:700;
            font-size:24px;
            letter-spacing:-.5px;
        }
        .les-kaart-info{
            flex:1; min-width:0;
            display:flex; flex-direction:column;
            gap:5px;
        }
        .les-kaart-info-top{
            display:flex; align-items:center; justify-content:space-between;
            gap:8px;
        }
        .les-kaart-naam{
            font-size:15px; font-weight:700;
            color:var(--tekst);
            letter-spacing:-.2px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }
        .les-kaart-tijd{
            background:var(--primair-zacht);
            color:var(--primair);
            font-weight:700; font-size:13px;
            padding:3px 10px; border-radius:999px;
            flex-shrink:0;
        }
        .les-kaart-instructeur{
            display:flex; align-items:center; gap:6px;
            font-size:12px; color:var(--tekst-zacht);
            font-weight:500;
        }
        .les-kaart-instructeur-avatar{
            width:18px; height:18px; border-radius:50%;
            object-fit:cover;
            background:#e5e7eb;
        }
        .les-kaart-meta{
            display:flex; gap:12px; font-size:12px;
            color:var(--tekst-zacht);
            margin-top:2px;
            flex-wrap:wrap;
        }
        .les-kaart-meta-item{ display:inline-flex; align-items:center; gap:4px }
        .les-kaart-meta-item .stip{
            width:7px; height:7px; border-radius:50%; display:inline-block;
        }
        .les-kaart-meta-item.vrij .stip{ background:#16a34a }
        .les-kaart-meta-item.vol .stip{ background:#dc2626 }
        .les-kaart-meta-item.warning .stip{ background:#f59e0b }
        .les-kaart-meta-item.gereserveerd .stip{ background:var(--primair) }
        .les-kaart-acties{
            margin-top:10px;
            display:flex; gap:8px;
        }
        .les-kaart-knop{
            flex:1;
            padding:10px 14px;
            border-radius:10px;
            font-weight:600; font-size:13px;
            border:none;
            cursor:pointer;
            display:inline-flex; align-items:center; justify-content:center; gap:6px;
            transition:filter .15s, transform .12s;
        }
        .les-kaart-knop:active{ transform:scale(.97) }
        .les-kaart-knop svg{ width:14px; height:14px }
        .les-kaart-knop.reserveer{
            background:var(--primair); color:#fff;
        }
        .les-kaart-knop.reserveer:hover{ filter:brightness(1.08) }
        .les-kaart-knop.annuleer{
            background:#fee2e2; color:#dc2626;
        }
        .les-kaart-knop.annuleer:hover{ background:#fecaca }
        .les-kaart-knop.verplaats{
            background:#dbeafe; color:#2563eb;
        }
        .les-kaart-knop.verplaats:hover{ background:#bfdbfe }
        .les-kaart-knop.verstreken{
            background:#f3f4f6; color:var(--tekst-zacht);
            font-style:italic;
            cursor:default;
        }

        /* ════════════════════════════════════════════════════════════════════
           LES-KAART — COMPACTE & MOOIERE VARIANT
           Sluit visueel aan op de nieuwe reservering-kaart op mobiel:
           - Foto 84→64, kleinere padding, tightere gaps
           - Tijd-pil subtieler en kleiner
           - Status als nette pill-badge (i.p.v. losse stip + tekst)
           - Actie-knop verhuist naar rechtsonder (absolute) — geen volle-breedte
             knop met eigen rij meer
           Resultaat: ~30-40% lager + rustiger beeld.
           ════════════════════════════════════════════════════════════════════ */
        .les-kaart{
            position: relative;
            padding: 12px 14px !important;
            gap: 12px !important;
            border-radius: 18px !important;
            align-items: stretch;
            min-height: 88px;
        }
        .les-kaart-foto{
            width: 64px !important;
            height: 64px !important;
            border-radius: 14px !important;
            align-self: center;
            flex-shrink: 0;
        }
        .les-kaart-foto-tegel{ font-size: 18px !important; }
        .les-kaart-info{ gap: 4px !important; }
        .les-kaart-info-top{
            align-items: center !important;
            gap: 10px !important;
        }
        .les-kaart-naam{
            font-size: 15px !important;
            font-weight: 700 !important;
            letter-spacing: -.1px !important;
        }
        .les-kaart-tijd{
            background: rgba(var(--primair-rgb), .12) !important;
            color: var(--primair) !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            padding: 3px 10px !important;
            border-radius: 999px !important;
            letter-spacing: .3px !important;
            line-height: 1.3 !important;
        }
        .les-kaart-instructeur{
            font-size: 11.5px !important;
            gap: 5px !important;
            margin-top: -1px;
        }
        .les-kaart-instructeur-avatar{
            width: 16px !important;
            height: 16px !important;
        }
        .les-kaart-meta{
            margin-top: 0 !important;
            gap: 8px !important;
            font-size: 12px !important;
            padding-right: 95px;
            flex-wrap: wrap;
            align-items: center;
        }
        .les-kaart-meta-item{
            gap: 5px !important;
            line-height: 1.4;
        }
        .les-kaart-meta-item .stip{
            width: 6px !important;
            height: 6px !important;
        }
        .les-kaart-meta-item.gereserveerd,
        .les-kaart-meta-item.vrij,
        .les-kaart-meta-item.warning,
        .les-kaart-meta-item.vol,
        .les-kaart-meta-item.verstreken{
            padding: 3px 9px 3px 8px !important;
            border-radius: 999px !important;
            font-weight: 700 !important;
            font-size: 10.5px !important;
            letter-spacing: .3px !important;
            line-height: 1.4;
        }
        .les-kaart-meta-item.gereserveerd{
            background: rgba(var(--primair-rgb), .14);
            color: var(--primair);
        }
        .les-kaart-meta-item.vrij{
            background: rgba(16, 185, 129, .14);
            color: #047857;
        }
        .les-kaart-meta-item.warning{
            background: rgba(245, 158, 11, .14);
            color: #b45309;
        }
        .les-kaart-meta-item.vol{
            background: rgba(239, 68, 68, .14);
            color: #b91c1c;
        }
        .les-kaart-meta-item.verstreken{
            background: rgba(0, 0, 0, .05);
            color: var(--tekst-zacht);
        }
        .les-kaart-meta-item.verstreken .stip{ background: var(--tekst-zacht); }
        /* Reserveplek-pills: oranje = vrij, rood = gereserveerd (zie badges). */
        .les-kaart-meta-item.reserveplek-vrij{
            background: rgba(245, 158, 11, .14);
            color: #b45309;
        }
        .les-kaart-meta-item.reserveplek-vrij .stip{ background: #f59e0b; }
        .les-kaart-meta-item.reserveplek-bezet{
            background: rgba(239, 68, 68, .14);
            color: #b91c1c;
        }
        .les-kaart-meta-item.reserveplek-bezet .stip{ background: #ef4444; }
        html.kp-donker .les-kaart-meta-item.reserveplek-vrij{  color:#fbbf24; background:rgba(245,158,11,.16); }
        html.kp-donker .les-kaart-meta-item.reserveplek-bezet{ color:#f87171; background:rgba(239,68,68,.16); }
        .les-kaart-acties{
            position: absolute !important;
            bottom: 12px !important;
            right: 14px !important;
            margin: 0 !important;
            gap: 6px !important;
            /* Twee pillen ("Annuleer" + "Week doorschuiven") passen op brede
               telefoons op een regel; op smalle stapelen ze rechts-uitgelijnd
               i.p.v. van de kaart af te lopen. max-width laat ruimte voor de
               foto links. */
            flex-wrap: wrap !important;
            justify-content: flex-end !important;
            max-width: calc(100% - 84px) !important;
        }
        .les-kaart-knop{
            flex: 0 0 auto !important;
            padding: 7px 13px !important;
            font-size: 12.5px !important;
            border-radius: 999px !important;
            font-weight: 700 !important;
            letter-spacing: .2px !important;
            box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
            gap: 5px !important;
        }
        .les-kaart-knop svg{
            width: 13px !important;
            height: 13px !important;
        }
        .les-kaart-knop.verstreken{
            padding: 5px 11px !important;
            font-size: 11px !important;
            box-shadow: none !important;
            background: rgba(0, 0, 0, .04) !important;
            border: 1px dashed currentColor;
            font-style: normal !important;
        }
        .les-kaart.gereserveerd{
            border-color: rgba(var(--primair-rgb), .25) !important;
            box-shadow:
                inset 5px 0 0 var(--primair),
                0 2px 10px rgba(var(--primair-rgb), .10) !important;
            background:
                linear-gradient(105deg,
                    rgba(var(--primair-rgb), .08) 0%,
                    #fff 60%) !important;
        }
        .les-kaart.verstreken{
            opacity: .65;
            box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
            background: #fafafa !important;
        }

        /* ============== RESERVERINGEN ============== */
        .reservering-tabel{
            grid-column:1 / -1;
            /* Marge voor scrollIntoView zodat de titel niet onder de mobiele
               sticky-header verdwijnt. */
            scroll-margin-top:14px;
        }

        /* === EIGEN-MODUS (Mijn reserveringen tab actief) ===
           Verberg kalender en categorieën — die zijn niet relevant.
           Reservering-tabel pakt automatisch alle ruimte. */
        body.eigen-modus #kaartKalender,
        body.eigen-modus #kaartCategorien{
            display:none;
        }
        body.eigen-modus .reservering-tabel{
            grid-column:1 / -1;
        }

        /* === WEGEN-TAB ZICHTBAARHEID ===
           Standaard verborgen. Wordt aangezet door:
           1. URL-parameter ?weigh=1 (bijv. ?weigh=1, of ?weigh=0 om expliciet uit)
           2. Pascal: setWegenTabZichtbaar(true)
           Default = uit zodat klanten zonder weegmodule hem niet zien. */
        #navWegen{ display:none !important; }
        body.wegen-tab-aan #navWegen{ display:flex !important; }

        /* === QR-TAB ZICHTBAARHEID ===
           Standaard verborgen. Wordt aangezet door:
           1. URL-parameter ?qr=1
           2. Pascal: setQRTabZichtbaar(true)  (na succesvol inloggen) */
        #navQR{ display:none !important; }
        body.qr-tab-aan #navQR{ display:flex !important; }

        /* === TRAININGSSCHEMA-TAB ZICHTBAARHEID ===
           Standaard verborgen. Aanzetten via Pascal: setTrainingTabZichtbaar(true)
           (na inloggen, o.b.v. PROJECT.TabTrainingZichtbaar). */
        #navTraining{ display:none !important; }
        body.training-tab-aan #navTraining{ display:flex !important; }

        /* === RESERVEREN-TAB en EIGEN-TAB UITSCHAKELEN ===
           Beide tabs staan standaard AAN (klantportaal-default). Per project
           kun je ze UIT zetten met setReserverenTabZichtbaar(false) of
           setEigenTabZichtbaar(false). De body-class 'reserveer-tab-uit' of
           'eigen-tab-uit' verbergt dan de knop. */
        body.reserveer-tab-uit #navReserveer{ display:none !important; }
        body.eigen-tab-uit     #navEigen{     display:none !important; }

        /* === QR-ONLY MODUS — voor projecten zoals BodyFit waar enkel de
           QR-tab beschikbaar is. Verbergt ALLES behalve de QR-kaart, ongeacht
           welke tab toevallig actief is. Sterker dan body.qr-modus omdat die
           alleen geldt als gebruiker daadwerkelijk op QR-tab staat. */
        body.qr-only #kaartKalender,
        body.qr-only #kaartCategorien,
        body.qr-only .reservering-tabel,
        body.qr-only .reservering-tabel-scroll,
        body.qr-only #kaartWegenSparklines,
        body.qr-only #kaartWegenGrafiek,
        body.qr-only #kaartWegenLijst{
            display:none !important;
        }
        body.qr-only #kaartQR{
            display:block !important;
            grid-column:1 / -1 !important;
        }
        /* Verberg ook de hele banner-titel als die "Reserveer" zegt
           (heeft geen betekenis als reserveer-tab uit staat) */
        body.qr-only .banner-titel{
            display:none;
        }

        /* Wanneer de Reserveer-tab is uitgezet voor dit project (bijv. BodyFit
           is een pure QR-app), verbergen we ook de kalender, categorieën en
           reservering-tabel volledig. Anders zouden die kort flikkeren tussen
           inloggen en het schakelen naar de QR-tab, of zelfs zichtbaar blijven
           als de qr-modus om welke reden dan ook niet correct wordt geactiveerd. */
        body.reserveer-tab-uit #kaartKalender,
        body.reserveer-tab-uit #kaartCategorien,
        body.reserveer-tab-uit .reservering-tabel,
        body.reserveer-tab-uit .reservering-tabel-scroll{
            display:none !important;
        }
        /* Idem voor Eigen — als die tab uit staat, geen lege 'mijn afspraken'
           lijst tonen wanneer de gebruiker op die modus probeert te schakelen. */
        body.eigen-tab-uit.eigen-modus .reservering-tabel,
        body.eigen-tab-uit.eigen-modus .reservering-tabel-scroll{
            display:none !important;
        }

        /* === BERICHTEN-MODUS (Berichten-tab actief) === */
        #kaartBerichten{ display:none; }
        body.berichten-modus #kaartKalender,
        body.berichten-modus #kaartCategorien,
        body.berichten-modus .reservering-tabel,
        body.berichten-modus #kaartWegenSparklines,
        body.berichten-modus #kaartWegenGrafiek,
        body.berichten-modus #kaartWegenLijst,
        body.berichten-modus #kaartQR{
            display:none;
        }
        body.berichten-modus #kaartBerichten{
            display:block;
            grid-column:1 / -1;
        }
        .berichten-lijst{
            display:flex;
            flex-direction:column;
        }
        .bericht-rij{
            padding:14px 16px;
            border-bottom:1px solid var(--rand);
            cursor:pointer;
            transition:background .15s;
        }
        .bericht-rij:last-child{ border-bottom:none; }
        .bericht-rij:hover{ background:var(--primair-zacht); }
        .bericht-kop{
            display:flex;
            align-items:center;
            gap:8px;
        }
        .bericht-stip{
            width:10px; height:10px;
            border-radius:50%;
            background:var(--primair);
            flex-shrink:0;
        }
        .bericht-titel{
            font-weight:600;
            font-size:15px;
            color:var(--tekst);
            flex:1;
            min-width:0;
        }
        .bericht-rij.ongelezen .bericht-titel{ font-weight:700; }
        .bericht-datum{
            font-size:12px;
            color:var(--tekst-zacht);
            margin-top:4px;
        }
        .bericht-body{
            display:none;
            margin-top:10px;
            font-size:15px;
            line-height:1.55;
            color:var(--tekst);
            word-break:break-word;
        }
        .bericht-body.open{ display:block; }
        .bericht-foto{
            display:block;
            width:100%;
            height:auto;          /* schaalt mee met de kaartbreedte, behoudt verhouding */
            max-height:none;      /* geen vaste hoogte meer -> niets wordt afgekapt */
            object-fit:contain;
            border-radius:10px;
            margin-top:12px;
        }

        /* === TRAINING-MODUS (Trainingsschema-tab actief) === */
        #kaartTraining{ display:none; }
        body.training-modus #kaartKalender,
        body.training-modus #kaartCategorien,
        body.training-modus .reservering-tabel,
        body.training-modus #kaartWegenSparklines,
        body.training-modus #kaartWegenGrafiek,
        body.training-modus #kaartWegenLijst,
        body.training-modus #kaartQR,
        body.training-modus #kaartBerichten{
            display:none;
        }
        body.training-modus #kaartTraining{
            display:block;
            grid-column:1 / -1;
        }
        .training-lijst{
            display:flex;
            flex-direction:column;
            gap:12px;
            padding:14px 16px;
        }
        /* Groepskop: spiergroep + telling + fijne scheidingslijn */
        .training-dag{
            display:flex;
            align-items:center;
            gap:10px;
            font-weight:700;
            font-size:12px;
            text-transform:uppercase;
            letter-spacing:.06em;
            color:var(--primair);
            margin:18px 2px 2px;
        }
        .training-dag:first-child{ margin-top:2px; }
        .training-dag::after{
            content:'';
            flex:1;
            height:1px;
            background:var(--rand);
        }
        .training-dag-aantal{
            font-size:11px;
            font-weight:700;
            letter-spacing:0;
            color:var(--tekst-zacht);
            background:var(--primair-zacht);
            border-radius:999px;
            padding:2px 9px;
        }
        /* Oefening-kaart */
        .training-oefening{
            padding:0;
            overflow:hidden;
            border:1px solid var(--rand);
            border-radius:14px;
            background:var(--kaart);
            box-shadow:var(--schaduw);
            transition:box-shadow .2s ease, border-color .2s ease;
        }
        .training-oefening.open{
            box-shadow:var(--schaduw-md);
            border-color:var(--primair-licht);
        }
        .training-kop{
            display:flex;
            align-items:center;
            gap:12px;
            padding:12px 14px;
            cursor:pointer;
            user-select:none;
            -webkit-user-select:none;
        }
        .training-thumb{
            width:46px;
            height:46px;
            flex-shrink:0;
            border-radius:10px;
            overflow:hidden;
            background:var(--primair-zacht);
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .training-thumb img{
            width:100%;
            height:100%;
            object-fit:contain;
        }
        .training-naam{
            flex:1;
            min-width:0;
            font-weight:600;
            font-size:15px;
            color:var(--tekst);
            line-height:1.3;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .training-serie{
            font-size:12px;
            font-weight:700;
            color:var(--primair);
            background:var(--primair-zacht);
            border-radius:999px;
            padding:4px 11px;
            white-space:nowrap;
            flex-shrink:0;
        }
        .training-chevron{
            color:var(--tekst-zacht);
            font-size:13px;
            transition:transform .25s ease;
            flex-shrink:0;
        }
        .training-oefening.open .training-chevron{ transform:rotate(180deg); }
        /* Detail: afbeelding in net kader náást de tekst (wrapt op smal scherm) */
        .training-detail{ display:none; }
        .training-oefening.open .training-detail{
            display:flex;
            gap:16px;
            flex-wrap:wrap;
            padding:14px;
            border-top:1px solid var(--rand);
        }
        .training-detail-afb{
            flex:0 0 auto;
            width:180px;
            max-width:100%;
            background:var(--primair-zacht);
            border-radius:12px;
            padding:8px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .training-detail-afb img{
            width:100%;
            height:auto;
            max-height:200px;
            object-fit:contain;
        }
        .training-detail-tekst{
            flex:1;
            min-width:200px;
        }
        .training-meta{
            display:flex;
            flex-wrap:wrap;
            gap:6px;
            margin:0 0 10px;
        }
        .training-chip{
            font-size:12px;
            font-weight:600;
            color:var(--tekst);
            background:var(--primair-zacht);
            border-radius:999px;
            padding:4px 11px;
            white-space:nowrap;
        }
        .training-omschrijving{
            font-size:15px;
            line-height:1.65;
            color:var(--tekst);
            word-break:break-word;
        }
        .training-notitie{
            font-size:14px;
            line-height:1.6;
            color:var(--tekst-zacht);
            margin-top:10px;
            padding-top:10px;
            border-top:1px dashed var(--rand);
            word-break:break-word;
        }

        /* === QR-MODUS (QR-tab actief) === */
        #kaartQR{ display:none; }
        body.qr-modus #kaartKalender,
        body.qr-modus #kaartCategorien,
        body.qr-modus .reservering-tabel,
        body.qr-modus #kaartWegenSparklines,
        body.qr-modus #kaartWegenGrafiek,
        body.qr-modus #kaartWegenLijst{
            display:none;
        }
        body.qr-modus #kaartQR{
            display:block;
            grid-column:1 / -1;
        }

        /* === QR-KAART STYLING ===
           Bewust GEEN width:fit-content op .qr-canvas-wrap — dat liet de doos
           inklappen tot een leeg vierkantje als er nog geen QR was. */
        .qr-kaart{ text-align:center; }
        .qr-kaart .kaart-kop{
            display:flex; justify-content:space-between; align-items:center;
        }
        .qr-canvas-wrap{
            display:flex;
            justify-content:center;
            align-items:center;
            min-height:280px;
            max-width:320px;
            padding:24px;
            margin:16px auto;
            background:#fff;
            border-radius:12px;
            box-shadow:0 2px 12px rgba(0,0,0,.08);
        }
        .qr-canvas-wrap canvas,
        .qr-canvas-wrap img,
        .qr-canvas-wrap svg{
            display:block;
            max-width:100%;
            height:auto;
            background:#fff;          /* witte achtergrond achter de QR-modules */
            border:8px solid #fff;    /* witte rand/quiet-zone -> scant betrouwbaarder */
            border-radius:8px;
            box-sizing:border-box;
        }
        .qr-info{
            display:flex; justify-content:center; gap:24px;
            flex-wrap:wrap; margin-top:12px;
            font-size:14px; color:#64748b;
        }
        .qr-info b{ color:#0f172a; font-variant-numeric:tabular-nums; }

        /* Offline-badge: standaard verborgen, alleen zichtbaar in offline-QR-modus.
           Toont de gebruiker dat 'ie een opgeslagen (offline) QR bekijkt en dat
           de overige functies tijdelijk niet beschikbaar zijn. */
        .badge-offline{
            display:none;
            background:#fef3c7; color:#92400e;
            font-weight:700;
        }
        .badge-offline::before{
            content:"●"; margin-right:5px; color:#f59e0b;
        }
        body.offline-qr-modus .badge-offline{
            display:inline-flex; align-items:center;
        }
        /* In offline-modus een extra uitleg-regel onder de QR tonen. */
        body.offline-qr-modus .qr-uitleg::after{
            content:"Je bekijkt een opgeslagen code zonder internetverbinding. "
                    "Andere functies zijn pas weer beschikbaar zodra je online bent.";
            display:block; margin-top:8px;
            font-size:13px; color:#92400e; font-weight:500;
        }

        /* ════════════════════════════════════════════════════════════════════
           ONTGRENDEL-SCHERM (pincode / biometrie voor offline-QR)
           ════════════════════════════════════════════════════════════════════ */
        .ontgrendel-scherm{
            position:fixed; inset:0; z-index:9999;
            display:flex; align-items:center; justify-content:center;
            padding:20px;
            padding-top:max(20px, env(safe-area-inset-top));
            padding-bottom:max(20px, env(safe-area-inset-bottom));
            background:var(--gradient-login, linear-gradient(135deg,#1e293b,#0f172a));
            animation:ontgrendelIn .25s ease-out;
        }
        @keyframes ontgrendelIn{ from{opacity:0} to{opacity:1} }
        .ontgrendel-doos{
            width:100%; max-width:340px;
            background:rgba(255,255,255,0.97);
            border-radius:24px;
            padding:28px 24px 24px;
            text-align:center;
            box-shadow:0 20px 60px rgba(0,0,0,.3);
        }
        .ontgrendel-slot{
            width:64px; height:64px; margin:0 auto 16px;
            border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            background:var(--primair-zacht, #e0e7ff);
            color:var(--primair, #4f46e5);
        }
        .ontgrendel-titel{
            font-size:20px; font-weight:700; color:#0f172a;
            margin:0 0 6px;
        }
        .ontgrendel-hint{
            font-size:13.5px; color:#64748b; line-height:1.45;
            margin:0 auto 22px; max-width:280px;
        }
        .pin-bollen{
            display:flex; justify-content:center; gap:14px;
            margin-bottom:14px;
        }
        .pin-bollen.schud{ animation:pinSchud .4s ease; }
        @keyframes pinSchud{
            0%,100%{transform:translateX(0)}
            20%,60%{transform:translateX(-8px)}
            40%,80%{transform:translateX(8px)}
        }
        .pin-bol{
            width:14px; height:14px; border-radius:50%;
            background:transparent;
            border:2px solid var(--primair, #4f46e5);
            transition:background .15s, transform .15s;
        }
        .pin-bol.vol{
            background:var(--primair, #4f46e5);
            transform:scale(1.1);
        }
        .pin-fout{
            min-height:18px; margin-bottom:10px;
            font-size:13px; color:#dc2626; font-weight:600;
            opacity:0; transition:opacity .2s;
        }
        .pin-fout.zichtbaar{ opacity:1; }
        .pin-toetsen{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:12px;
            max-width:260px; margin:0 auto;
        }
        .pin-toets{
            aspect-ratio:1 / 1;
            border:none; border-radius:50%;
            background:#f1f5f9;
            font-size:24px; font-weight:600; color:#0f172a;
            cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:background .12s, transform .08s;
            -webkit-tap-highlight-color:transparent;
            user-select:none;
        }
        .pin-toets:active{
            background:var(--primair-zacht, #e0e7ff);
            transform:scale(.94);
        }
        .pin-toets.leeg{ background:transparent; cursor:default; pointer-events:none; }
        .pin-toets.pin-wis{ background:transparent; font-size:22px; color:#64748b; }
        .pin-bio-knop{
            margin-top:20px;
            display:inline-flex; align-items:center; gap:8px;
            padding:10px 18px; border:none; border-radius:999px;
            background:var(--primair, #4f46e5); color:#fff;
            font-size:14px; font-weight:600; cursor:pointer;
            transition:opacity .15s, transform .08s;
        }
        .pin-bio-knop:active{ transform:scale(.96); opacity:.9; }

        /* Vergrendeld: verberg de QR-inhoud volledig zodat hij niet kort
           flitst vóór de ontgrendeling. */
        body.offline-qr-vergrendeld .app,
        body.offline-qr-vergrendeld #statusBar{ visibility:hidden; }
        .qr-uitleg{
            margin:16px auto 0 auto; max-width:520px;
            font-size:14px; color:#475569; line-height:1.5;
        }
        .qr-leeg{
            padding:24px 16px;
            color:#475569;            /* duidelijk leesbaar, niet bleekgrijs */
            font-size:15px;
            font-weight:500;
            text-align:center;
            line-height:1.5;
        }
        .qr-leeg small{
            display:block; margin-top:6px;
            color:#94a3b8; font-weight:normal;
        }

        /* === WEGEN-MODUS (Wegen tab actief) ===
           Verberg álles van het reserveer-scherm; toon alleen de
           wegen-grafiek en de metingen-lijst. */
        #kaartWegenSparklines, #kaartWegenGrafiek, #kaartWegenLijst{ display:none; }
        body.wegen-modus #kaartKalender,
        body.wegen-modus #kaartCategorien,
        body.wegen-modus .reservering-tabel{
            display:none;
        }
        body.wegen-modus #kaartWegenSparklines,
        body.wegen-modus #kaartWegenGrafiek,
        body.wegen-modus #kaartWegenLijst{
            display:block;
            grid-column:1 / -1;
        }

        /* === WEGEN: SPARKLINES (compact dashboard bovenaan) === */
        .wegen-sparklines-kaart{
            padding:0;
            overflow:hidden;
        }
        .wegen-sparklines-kaart .kaart-kop{
            padding:18px 22px 8px;
        }
        .wegen-spark-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1px;
            background:var(--rand);
        }
        .wegen-spark-cel{
            background:#fff;
            padding:14px 16px;
            display:flex;
            flex-direction:column;
            gap:8px;
            min-width:0;
        }
        .wegen-spark-cel-kop{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:6px;
        }
        .wegen-spark-cel-label{
            font-size:11px;
            font-weight:600;
            text-transform:uppercase;
            letter-spacing:.4px;
            color:var(--tekst-zacht);
        }
        .wegen-spark-cel-waarde{
            font-size:20px;
            font-weight:700;
            color:var(--tekst);
            line-height:1;
            margin-top:2px;
        }
        .wegen-spark-cel-eenheid{
            font-size:12px;
            color:var(--tekst-zacht);
            font-weight:500;
        }
        .wegen-spark-cel-trend{
            display:inline-flex;
            align-items:center;
            gap:3px;
            font-size:11px;
            font-weight:600;
            padding:2px 7px;
            border-radius:999px;
            white-space:nowrap;
        }
        .wegen-spark-cel-trend.positief{ color:#16a34a; background:#dcfce7; }
        .wegen-spark-cel-trend.negatief{ color:#dc2626; background:#fee2e2; }
        .wegen-spark-cel-trend.neutraal{ color:#64748b; background:#f1f5f9; }
        .wegen-spark-cel-canvas-wrap{
            height:48px;
            position:relative;
            margin-top:2px;
        }
        .wegen-spark-cel-canvas-wrap canvas{
            width:100% !important;
            height:100% !important;
        }
        .wegen-spark-cel.leeg{
            opacity:.5;
            justify-content:center;
        }
        .wegen-spark-cel-leeg{
            font-size:18px;
            color:var(--tekst-zacht);
            font-weight:500;
        }

        /* === WEGEN: GRAFIEK-KAART === */
        .wegen-grafiek-kaart{
            padding:0;
            overflow:hidden;
        }
        .wegen-grafiek-kaart .kaart-kop{
            padding:18px 22px 8px 22px;
        }
        .wegen-grafiek-wrapper{
            position:relative;
            width:100%;
            height:300px;
            padding:8px 12px 4px 4px;
        }
        @media (max-width:900px){
            .wegen-grafiek-wrapper{ height:240px; }
        }
        .wegen-grafiek-wrapper canvas{
            width:100% !important;
            height:100% !important;
        }
        .wegen-legenda{
            display:flex;
            justify-content:center;
            gap:8px;
            padding:8px 14px 18px 14px;
            flex-wrap:wrap;
        }
        .wegen-legenda-knop{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:7px 13px;
            border-radius:999px;
            border:1px solid var(--rand);
            background:#fff;
            font-size:13px;
            font-weight:600;
            color:var(--tekst-zacht);
            cursor:pointer;
            transition:all .15s ease;
            user-select:none;
        }
        .wegen-legenda-knop:hover{
            border-color:var(--primair-licht);
            color:var(--tekst);
        }
        .wegen-legenda-knop.actief{
            background:var(--primair-licht-bg, #f0fdf4);
            border-color:var(--primair-licht);
            color:var(--tekst);
        }
        .wegen-legenda-knop:not(.actief){
            opacity:.45;
        }
        .wegen-legenda-knop:not(.actief) .wegen-legenda-bol{
            filter:grayscale(.6);
        }
        .wegen-legenda-bol{
            width:11px;
            height:11px;
            border-radius:50%;
            display:inline-block;
            box-shadow:0 0 0 2px rgba(255,255,255,.8);
        }

        /* === WEGEN: LIJST VAN METING-KAARTEN === */
        .wegen-lijst-kaart{
            padding:18px 22px;
        }
        .wegen-lijst{
            display:flex;
            flex-direction:column;
            gap:10px;
            margin-top:8px;
        }
        .wegen-rij{
            background:#fff;
            border:1px solid var(--rand);
            border-radius:14px;
            padding:14px 16px;
            display:flex;
            flex-direction:column;
            gap:10px;
            transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
            animation:wegenRijIn .35s cubic-bezier(.16,1,.3,1) both;
        }
        @keyframes wegenRijIn{
            from{ opacity:0; transform:translateY(8px) }
            to{ opacity:1; transform:translateY(0) }
        }
        .wegen-rij:hover{
            border-color:var(--primair-licht);
            box-shadow:0 4px 14px rgba(34,197,94,.10);
        }
        .wegen-rij.nieuwste{
            border-color:var(--primair);
            box-shadow:0 4px 16px rgba(34,197,94,.15);
            background:linear-gradient(135deg,#fff 0%,#f0fdf4 100%);
        }
        .wegen-rij-kop{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
        }
        .wegen-rij-datum{
            font-size:14px;
            font-weight:700;
            color:var(--tekst);
            display:flex;
            align-items:center;
            gap:8px;
        }
        .wegen-rij-tijd{
            font-size:12px;
            font-weight:500;
            color:var(--tekst-zacht);
        }
        .wegen-rij-badge{
            font-size:10px;
            font-weight:700;
            padding:3px 8px;
            border-radius:999px;
            background:var(--primair);
            color:#fff;
            text-transform:uppercase;
            letter-spacing:.4px;
        }
        .wegen-metrieken{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:8px;
        }
        @media (min-width:600px){
            .wegen-metrieken{ grid-template-columns:repeat(6, 1fr); }
        }
        .wegen-metriek{
            background:#fafafa;
            border:1px solid var(--rand);
            border-radius:10px;
            padding:8px 10px;
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .wegen-metriek-label{
            font-size:10px;
            font-weight:600;
            color:var(--tekst-zacht);
            text-transform:uppercase;
            letter-spacing:.4px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .wegen-metriek-waarde{
            font-size:16px;
            font-weight:700;
            color:var(--tekst);
            white-space:nowrap;
        }
        .wegen-metriek-eenheid{
            font-size:11px;
            font-weight:500;
            color:var(--tekst-zacht);
            margin-left:2px;
        }
        .wegen-metriek.gewicht .wegen-metriek-waarde{ color:#ca8a04; }
        .wegen-metriek.vet     .wegen-metriek-waarde{ color:#0284c7; }
        .wegen-metriek.bmi     .wegen-metriek-waarde{ color:#ea580c; }
        .wegen-metriek.spier   .wegen-metriek-waarde{ color:#16a34a; }
        .tabel-wrapper{overflow-x:auto; -webkit-overflow-scrolling:touch}
        table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            font-size:14px;
        }
        thead{
            background:linear-gradient(180deg,#fafafa 0%,#f3f4f6 100%);
            border-bottom:2px solid var(--rand);
            position:sticky; top:0; z-index:1;
        }
        th{
            text-align:left;
            padding:14px 18px;
            font-weight:700;
            color:var(--tekst-zacht);
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:.6px;
            white-space:nowrap;
            border-bottom:1px solid var(--rand);
        }
        td{
            padding:16px 18px;
            border-bottom:1px solid var(--rand);
            color:var(--tekst);
            white-space:nowrap;
            vertical-align:middle;
            transition:padding .15s;
        }
        tbody tr{
            transition:background .15s, transform .15s, box-shadow .15s;
            cursor:pointer;
            position:relative;
        }
        tbody tr:hover{
            background:linear-gradient(90deg,rgba(var(--primair-rgb),.04) 0%,rgba(var(--primair-rgb),.08) 100%);
        }
        tbody tr:hover td:first-child{
            box-shadow:inset 3px 0 0 var(--primair);
        }
        tbody tr:last-child td{border-bottom:none}
        tbody tr.geselecteerd{
            background:linear-gradient(90deg,var(--primair-zacht) 0%,#e9e0ff 100%);
        }
        tbody tr.geselecteerd td:first-child{
            box-shadow:inset 3px 0 0 var(--primair);
        }
        tbody tr.geselecteerd:hover{
            background:linear-gradient(90deg,var(--primair-zacht) 0%,#e9e0ff 100%);
        }

        /* ===== STATUS-KLEUREN PER RIJ =====
           Hele rij krijgt subtiele tint + gekleurde linker-rand zodat je
           direct ziet of een tijdslot vrij, gereserveerd of dicht is.
           Met glass-effect: kleur over de glass-achtergrond, niet vervangend. */
        tbody tr.rij-status-success{
            background:
                linear-gradient(90deg, rgba(16,185,129,.18) 0%, rgba(16,185,129,.02) 100%),
                var(--glas);
        }
        tbody tr.rij-status-success td:first-child{
            box-shadow:inset 3px 0 0 #10b981;          /* groen */
        }
        tbody tr.rij-status-success:hover{
            background:
                linear-gradient(90deg, rgba(16,185,129,.28) 0%, rgba(16,185,129,.04) 100%),
                var(--glas-sterker);
        }

        tbody tr.rij-status-warning{
            background:
                linear-gradient(90deg, rgba(245,158,11,.20) 0%, rgba(245,158,11,.02) 100%),
                var(--glas);
        }
        tbody tr.rij-status-warning td:first-child{
            box-shadow:inset 3px 0 0 #f59e0b;          /* oranje */
        }
        tbody tr.rij-status-warning:hover{
            background:
                linear-gradient(90deg, rgba(245,158,11,.30) 0%, rgba(245,158,11,.04) 100%),
                var(--glas-sterker);
        }

        tbody tr.rij-status-error{
            background:
                linear-gradient(90deg, rgba(239,68,68,.16) 0%, rgba(239,68,68,.02) 100%),
                var(--glas);
            opacity:.85;                                /* subtiel uitgegrijsd */
        }
        tbody tr.rij-status-error td:first-child{
            box-shadow:inset 3px 0 0 #ef4444;          /* rood */
        }
        tbody tr.rij-status-error td.cel-datum,
        tbody tr.rij-status-error td.cel-tijd,
        tbody tr.rij-status-error td.cel-categorie,
        tbody tr.rij-status-error td.cel-locatie{
            color:var(--tekst-zacht);
            text-decoration:line-through;
            text-decoration-color:rgba(239,68,68,.4);
            text-decoration-thickness:1px;
        }
        tbody tr.rij-status-error:hover{
            background:
                linear-gradient(90deg, rgba(239,68,68,.26) 0%, rgba(239,68,68,.04) 100%),
                var(--glas-sterker);
            opacity:1;
        }

        /* Verstreken rijen: gedimd grijs glass */
        tbody tr.rij-verstreken{
            background:rgba(250,250,250,0.7) !important;
            opacity:.6;
        }
        /* Op desktop verbergen we de grote-tegel — daar is geen ruimte voor.
           Pas op mobiel komt hij in beeld via de @media query. */
        .grote-tegel{
            display:none;
        }
        tbody tr.rij-verstreken td:first-child{
            box-shadow:inset 3px 0 0 #cbd5e1 !important;        /* lichtgrijs */
        }
        tbody tr.rij-verstreken td.cel-datum,
        tbody tr.rij-verstreken td.cel-tijd,
        tbody tr.rij-verstreken td.cel-categorie,
        tbody tr.rij-verstreken td.cel-locatie{
            color:var(--tekst-zacht) !important;
            text-decoration:none !important;
        }
        tbody tr.rij-verstreken .badge{
            opacity:.7;
        }
        tbody tr.rij-verstreken .rij-niet-mogelijk{
            font-style:italic;
            color:var(--tekst-zacht);
            font-size:13px;
        }
        tbody tr.rij-verstreken:hover{
            background:#fafafa !important;
            opacity:.65;
        }

        /* Geselecteerd overruled status-kleuren (paarse selectie wint) */
        tbody tr.geselecteerd[class*="rij-status"]{
            background:linear-gradient(90deg,var(--primair-zacht) 0%,#e9e0ff 100%);
            opacity:1;
        }
        tbody tr.geselecteerd[class*="rij-status"] td{
            text-decoration:none;
            color:var(--tekst);
        }
        tbody tr.geselecteerd.rij-status-error td.cel-categorie,
        tbody tr.geselecteerd.rij-status-error td.cel-locatie{
            color:var(--tekst-zacht);
        }

        /* Datum-tijd als kolom met visueel onderscheid */
        td.cel-datum{
            font-weight:600; color:var(--tekst);
        }
        td.cel-tijd{
            color:var(--primair); font-weight:600;
            font-variant-numeric:tabular-nums;
        }
        td.cel-categorie, td.cel-locatie{
            color:var(--tekst-zacht); font-size:13px;
        }
        .leeg-rij{
            text-align:center; padding:48px 24px;
            color:var(--tekst-zacht); font-style:italic;
        }
        .leeg-rij::before{
            content:"📅"; display:block; font-size:32px;
            font-style:normal; margin-bottom:8px; opacity:.5;
        }

        .badge{
            display:inline-flex;align-items:center;
            gap:6px;
            padding:5px 11px;
            border-radius:999px;
            font-size:12px;
            font-weight:600;
            white-space:nowrap;
            box-shadow:0 1px 2px rgba(0,0,0,.04);
        }
        .badge::before{
            content:""; width:6px; height:6px; border-radius:50%;
            background:currentColor; flex-shrink:0;
        }
        .badge-success{background:#d1fae5;color:#065f46}
        .badge-error{background:#fee2e2;color:#991b1b}
        .badge-warning{background:#fef3c7;color:#92400e}
        .badge-info{background:var(--primair-zacht);color:var(--primair)}
        /* Reserveplek-badges: ORANJE = nog vrij (waarschuwing: dit is de
           reservelijst, geen definitieve plek), ROOD = door dit lid
           gereserveerd. Klassen gezet in kp-reserveringen.js. */
        .badge.badge-reserveplek-vrij{background:#fef3c7;color:#92400e;border:1px solid rgba(245,158,11,.55)}
        /* !important nodig: het late '.badge-warning'-blok (spook-stijl voor
           'gereserveerd') zet transparant/grijs/geen-rand met !important en
           zou anders van deze regels winnen. Bij gelijke !important beslist
           specificiteit, en die is hier hoger. Ook de door dat blok
           verborgen stip en de 25px marge worden hier teruggezet. */
        .badge.badge-reserveplek-bezet{
            background:#fee2e2 !important;
            color:#991b1b !important;
            border:1px solid rgba(239,68,68,.55) !important;
            margin-left:0 !important;
        }
        .badge.badge-reserveplek-bezet::before{ display:inline-block !important; }

        /* ============== CATEGORIE-TEGEL ==============
           Klein vierkantje links bij datum/tijd dat per categorie automatisch
           een unieke kleur en initialen krijgt. Geen plaatjes nodig. */
        .categorie-tegel{
            display:inline-flex;
            align-items:center; justify-content:center;
            width:42px; height:42px;
            border-radius:10px;
            color:#fff;
            font-size:13px; font-weight:700; letter-spacing:.4px;
            text-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.3);
            box-shadow:0 2px 5px rgba(0,0,0,.12);
            user-select:none;
            flex-shrink:0;
            position:relative;
            overflow:hidden;
        }
        /* Wanneer er een afbeelding is, vult die de tegel volledig.
           De gradient-achtergrond blijft erachter zichtbaar tijdens laden / bij fout. */
        .categorie-tegel .tegel-img{
            position:absolute;
            inset:0;
            width:100%; height:100%;
            object-fit:cover;
            display:block;
        }
        /* Ingebouwd SVG-icoon — gevuld als achtergrond met witte stroke */
        .categorie-tegel .tegel-icoon{
            position:absolute;
            inset:14%;                         /* iets naar binnen voor padding */
            width:72%; height:72%;
            color:#fff;
            opacity:.92;
            filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
        }
        /* Lichte donkere overlay over de afbeelding zodat witte initialen
           op alle plaatjes goed leesbaar blijven. */
        .categorie-tegel.heeft-plaatje::after{
            content:"";
            position:absolute; inset:0;
            background:linear-gradient(135deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.30) 100%);
            border-radius:inherit;
            z-index:1;
            pointer-events:none;
        }
        .categorie-tegel .tegel-letters{
            position:relative;
            z-index:2;
            display:inline-flex;
            align-items:center; justify-content:center;
            width:100%; height:100%;
        }
        /* Wanneer er een plaatje/icoon is: initialen volledig verbergen.
           Het icoon is duidelijk genoeg, de initialen-pill leidde af. */
        .categorie-tegel.heeft-plaatje .tegel-letters{
            display:none;
        }
        /* Tegel-formaten — kleinere variant voor desktop tabel, grotere voor categorie-lijst */
        .categorie-tegel.tegel-categorie{
            width:48px; height:48px;
            font-size:14px;
            border-radius:12px;
        }
        th.th-tegel{ width:1%; padding-left:18px; padding-right:0 }
        td.cel-tegel{ width:1%; padding-left:18px; padding-right:0; vertical-align:middle }

        /* ============== KNOP IN RESERVERING-RIJ ==============
           Compacte actie-knop per rij: groen "Reserveer" als beschikbaar,
           rood "Annuleer" als gereserveerd, geen knop bij niet-mogelijk. */
        .rij-knop{
            display:inline-flex; align-items:center; gap:6px;
            padding:7px 14px;
            border:none; border-radius:8px;
            font:inherit; font-size:13px; font-weight:600;
            cursor:pointer;
            white-space:nowrap;
            transition:all .15s;
            color:#fff;
        }
        .rij-knop svg{ width:14px; height:14px; flex-shrink:0; }
        .rij-knop-reserveer{
            background:linear-gradient(135deg,#688d7e 0%,#1dd390 100%);
            box-shadow:0 2px 6px rgba(104,141,126,.22);
            color:#000000;
        }
        .rij-knop-reserveer:hover{
            transform:translateY(-1px);
            box-shadow:0 4px 10px rgba(104,141,126,.32);
        }
        .rij-knop-annuleer{
            background:linear-gradient(135deg,#fca5a5 0%,#e83030 100%);
            box-shadow:0 2px 6px rgba(252,165,165,.22);
            color:#000000;
        }
        .rij-knop-annuleer:hover{
            transform:translateY(-1px);
            box-shadow:0 4px 10px rgba(252,165,165,.32);
        }
        .rij-knop-verplaats{
            background:linear-gradient(135deg,#93c5fd 0%,#4b93ec 100%);
            box-shadow:0 2px 6px rgba(147,197,253,.22);
            color:#000000;
        }
        .rij-knop-verplaats:hover{
            transform:translateY(-1px);
            box-shadow:0 4px 10px rgba(147,197,253,.32);
        }
        .rij-knop + .rij-knop{ margin-left:6px; }
        .rij-knop:active{ transform:translateY(0) scale(.97); }
        .rij-niet-mogelijk{
            color:var(--tekst-zacht);
            font-size:14px; font-weight:300;
        }
        /* Action-kolom-header iets compacter en rechts uitgelijnd */
        th.th-actie{ text-align:right; width:1%; white-space:nowrap }
        td.cel-actie{ text-align:right; white-space:nowrap }

        /* ============== ACTIEKNOPPEN ============== */
        /* Actiebalk: vast onderaan het scherm (op zowel desktop als mobiel) zodat
           hij altijd binnen handbereik is, zelfs bij lange reservering-lijsten.
           Hij verbergt zichzelf wanneer geen knop actief is via .verborgen klasse. */
        .acties{
            position:fixed;
            left:50%;
            bottom:24px;
            transform:translateX(-50%);
            z-index:55;
            display:flex;
            gap:10px;
            padding:12px 16px;
            background:rgba(255,255,255,.96);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            border:1px solid var(--rand);
            border-radius:14px;
            box-shadow:0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
            flex-wrap:nowrap;
            align-items:center;
            max-width:calc(100% - 48px);
            transition:transform .25s ease, opacity .25s ease;
        }
        .acties.verborgen{
            transform:translateX(-50%) translateY(150%);
            opacity:0;
            pointer-events:none;
        }
        /* X-knop om de actiebalk weg te klikken (= rij deselecteren) */
        .knop-sluit{
            margin-left:6px;
            width:36px; height:36px;
            border-radius:50%;
            border:1px solid var(--rand);
            background:#fff;
            color:var(--tekst-zacht);
            cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition:all .15s;
            flex-shrink:0;
            padding:0;
        }
        .knop-sluit:hover{
            background:var(--rand);
            color:var(--tekst);
            transform:rotate(90deg);
        }
        .knop-sluit:active{ transform:rotate(90deg) scale(.92) }
        .knop-sluit svg{ width:16px; height:16px }
        .knop{
            display:inline-flex;align-items:center;justify-content:center;
            gap:8px;
            padding:10px 18px;
            border-radius:var(--radius-sm);
            border:none;
            font:inherit;
            font-size:14px;
            font-weight:600;
            cursor:pointer;
            transition:all .15s;
            background:#fff;
            color:var(--tekst);
            border:1px solid var(--rand);
        }
        .knop:hover:not(:disabled){
            background:#f3f4f6;
            border-color:#d1d5db;
            transform:translateY(-1px);
            box-shadow:0 2px 4px rgba(0,0,0,.05);
        }
        .knop:active:not(:disabled){transform:translateY(0)}
        .knop:disabled{opacity:.5;cursor:not-allowed}
        .knop-primair{
            background:linear-gradient(135deg,var(--primair) 0%,var(--secundair) 100%);
            color:#fff;
            border-color:transparent;
        }
        .knop-primair:hover:not(:disabled){
            background:linear-gradient(135deg,var(--primair-licht) 0%,var(--primair) 100%);
            box-shadow:0 4px 12px rgba(var(--primair-rgb),.35);
        }
        .knop-gevaar{
            background:#fff;
            color:var(--fout);
            border-color:#fecaca;
        }
        .knop-gevaar:hover:not(:disabled){
            background:#fef2f2;border-color:#fca5a5;
            box-shadow:0 2px 8px rgba(220,38,38,.15);
        }
        .knop svg{width:14px;height:14px}

        /* ============== STATUS / NOTIFICATIE ============== */
        .status-bar{
            position:fixed;
            top:20px;right:20px;
            z-index:100;
            padding:14px 20px;
            border-radius:var(--radius-sm);
            box-shadow:var(--schaduw-lg);
            font-size:14px;
            font-weight:500;
            min-width:240px;
            max-width:calc(100vw - 40px);
            display:none;
            animation:slideIn .25s ease-out;
        }
        @keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
        .status-bar.actief{display:block}
        .status-bar.success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
        .status-bar.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
        .status-bar.info{background:var(--primair-zacht);color:var(--primair);border:1px solid #c4b5fd}

        /* ============== BEVESTIGINGS-DIALOOG ==============
           Modal met details na succesvolle reservering / annulering. */
        .bevestig-overlay{
            position:fixed;
            inset:0;
            z-index:400;
            background:rgba(15,23,42,.55);
            backdrop-filter:blur(4px);
            -webkit-backdrop-filter:blur(4px);
            display:flex;
            align-items:center;
            justify-content:center;
            padding:20px;
            opacity:0;
            transition:opacity .25s ease;
        }
        .bevestig-overlay.zichtbaar{ opacity:1 }
        .bevestig-doos{
            position:relative;
            background:#fff;
            border-radius:20px;
            padding:32px 28px 24px;
            max-width:380px;
            width:100%;
            box-shadow:0 20px 60px rgba(0,0,0,.3);
            transform:scale(.92) translateY(12px);
            transition:transform .3s cubic-bezier(.16,1,.3,1);
            overflow:hidden;
            text-align:center;
        }
        .bevestig-overlay.zichtbaar .bevestig-doos{
            transform:scale(1) translateY(0);
        }
        .bevestig-icoon{
            width:64px; height:64px;
            border-radius:50%;
            margin:0 auto 16px;
            display:flex;
            align-items:center; justify-content:center;
            color:#fff;
        }
        .bevestig-icoon svg{ width:36px; height:36px }
        .bevestig-success .bevestig-icoon{
            background:linear-gradient(135deg,#10b981 0%,#059669 100%);
            box-shadow:0 6px 18px rgba(16,185,129,.4);
            animation:popIn .4s cubic-bezier(.16,1,.3,1);
        }
        .bevestig-warning .bevestig-icoon{
            background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
            box-shadow:0 6px 18px rgba(245,158,11,.4);
        }
        .bevestig-info .bevestig-icoon{
            background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
            box-shadow:0 6px 18px rgba(59,130,246,.4);
        }
        @keyframes popIn{
            0%{ transform:scale(0); opacity:0 }
            70%{ transform:scale(1.15); opacity:1 }
            100%{ transform:scale(1) }
        }
        .bevestig-titel{
            font-size:22px;
            font-weight:700;
            color:var(--tekst);
            margin-bottom:8px;
        }
        .bevestig-bericht{
            font-size:14px;
            color:var(--tekst-zacht);
            line-height:1.5;
            margin-bottom:18px;
        }
        .bevestig-details{
            background:#f9fafb;
            border:1px solid var(--rand);
            border-radius:14px;
            padding:14px 16px;
            margin-bottom:20px;
            text-align:left;
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .bevestig-detail-rij{
            display:flex;
            align-items:center;
            gap:12px;
        }
        .bevestig-detail-rij svg{
            width:18px; height:18px;
            color:var(--primair);
            flex-shrink:0;
        }
        .bevestig-detail-rij > div:not(:has(svg)){
            flex:1; min-width:0;
        }
        .bevestig-label{
            font-size:11px;
            font-weight:600;
            color:var(--tekst-zacht);
            text-transform:uppercase;
            letter-spacing:.5px;
        }
        .bevestig-waarde{
            font-size:15px;
            font-weight:600;
            color:var(--tekst);
            word-break:break-word;
        }
        .bevestig-ok{
            background:var(--primair);
            color:#fff;
            border:none;
            border-radius:12px;
            padding:12px 32px;
            font:inherit; font-size:15px; font-weight:600;
            cursor:pointer;
            min-width:120px;
            transition:all .15s;
            box-shadow:0 4px 12px rgba(var(--primair-rgb),.3);
        }
        .bevestig-success .bevestig-ok{
            background:linear-gradient(135deg,#10b981 0%,#059669 100%);
            box-shadow:0 4px 12px rgba(16,185,129,.3);
        }
        .bevestig-warning .bevestig-ok{
            background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
            box-shadow:0 4px 12px rgba(245,158,11,.3);
        }
        .bevestig-ok:hover{
            transform:translateY(-1px);
            filter:brightness(1.05);
        }
        .bevestig-ok:active{
            transform:translateY(0);
        }
        .bevestig-progressbar{
            position:absolute;
            bottom:0; left:0;
            height:3px;
            width:100%;
            background:var(--primair);
            opacity:.5;
        }
        .bevestig-success .bevestig-progressbar{ background:#10b981 }
        .bevestig-warning .bevestig-progressbar{ background:#f59e0b }
        @media (max-width:600px){
            .bevestig-doos{ padding:26px 22px 20px }
            .bevestig-titel{ font-size:20px }
            .bevestig-icoon{ width:56px; height:56px; margin-bottom:12px }
            .bevestig-icoon svg{ width:30px; height:30px }
        }

        /* ============== FOUTMELDING-BANNER ==============
           Niet-blokkerende banner bovenin het scherm met retry-knop.
           Verschijnt wanneer een server-actie mislukt. */
        .fout-banner{
            position:fixed;
            top:0;
            left:0; right:0;
            z-index:300;
            background:linear-gradient(180deg, rgba(254,242,242,.85) 0%, rgba(254,226,226,.85) 100%);
            backdrop-filter:blur(16px) saturate(1.5);
            -webkit-backdrop-filter:blur(16px) saturate(1.5);
            border-bottom:2px solid #ef4444;
            box-shadow:0 8px 32px rgba(220,38,38,.18);
            /* De achtergrond loopt tot de schermrand (top:0), maar de INHOUD
               wordt onder het Dynamic Island / de notch geduwd. iOS rapporteert
               safe-area-inset-top in PWA/WebView soms als 0, daarom een ruime
               minimumwaarde (44px) zodat de titel nooit in het camera-gebied
               valt. Op toestellen zonder notch is 44px een nette top-marge. */
            padding:max(44px, calc(env(safe-area-inset-top, 0px) + 14px)) 18px 14px;
            padding-left:max(18px, env(safe-area-inset-left));
            padding-right:max(18px, env(safe-area-inset-right));
            display:flex;
            align-items:center;
            gap:14px;
            transform:translateY(-100%);
            transition:transform .3s cubic-bezier(.16,1,.3,1);
        }
        .fout-banner.zichtbaar{ transform:translateY(0) }
        .fout-icoon{
            flex-shrink:0;
            width:40px; height:40px;
            border-radius:50%;
            background:#fee2e2;
            color:#dc2626;
            display:flex; align-items:center; justify-content:center;
        }
        .fout-icoon svg{ width:22px; height:22px }
        .fout-tekst{
            flex:1; min-width:0;
        }
        .fout-titel{
            font-size:14px; font-weight:700;
            color:#991b1b;
            margin-bottom:2px;
        }
        .fout-bericht{
            font-size:13px;
            color:#7f1d1d;
            line-height:1.4;
        }
        .fout-knoppen{
            display:flex; gap:6px;
            align-items:center;
            flex-shrink:0;
        }
        .fout-knop{
            border:none;
            border-radius:8px;
            font:inherit; font-size:13px; font-weight:600;
            cursor:pointer;
            display:inline-flex; align-items:center; gap:6px;
            transition:all .15s;
        }
        .fout-knop svg{ width:14px; height:14px }
        .fout-knop-retry{
            background:#dc2626;
            color:#fff;
            padding:8px 14px;
            box-shadow:0 2px 6px rgba(220,38,38,.3);
        }
        .fout-knop-retry:hover{
            background:#b91c1c;
            transform:translateY(-1px);
        }
        .fout-knop-sluit{
            background:transparent;
            color:#991b1b;
            width:34px; height:34px;
            padding:0;
            justify-content:center;
            border-radius:50%;
        }
        .fout-knop-sluit:hover{
            background:rgba(153,27,27,.1);
        }
        /* Mobiele aanpassing — compacter (maar inhoud blijft onder de notch:
           dezelfde ruime top-padding als de desktop-regel, alleen de
           horizontale/onder-padding wordt compacter). */
        @media (max-width:600px){
            .fout-banner{
                padding:max(44px, calc(env(safe-area-inset-top, 0px) + 12px)) 12px 10px;
                padding-left:max(12px, env(safe-area-inset-left));
                padding-right:max(12px, env(safe-area-inset-right));
                gap:10px;
                flex-wrap:wrap;
            }
            .fout-icoon{
                width:32px; height:32px;
            }
            .fout-icoon svg{ width:18px; height:18px }
            .fout-titel{ font-size:13px }
            .fout-bericht{ font-size:12px }
            .fout-knop-retry{
                padding:7px 12px;
                font-size:12px;
            }
            /* Retry knop op nieuwe regel als er weinig ruimte is */
            .fout-tekst{
                flex:1 1 calc(100% - 80px);
            }
            .fout-knoppen{
                margin-left:auto;
            }
        }

        /* ============== LOADING-OVERLAY ==============
           Centrale spinner over het hele scherm tijdens wacht-acties
           (data ophalen, reserveren, etc.) — geeft de gebruiker visuele
           feedback dat er iets aan het gebeuren is. */
        .loading-overlay{
            position:fixed;
            top:0; left:0; right:0; bottom:0;        /* expliciet alle 4 — robuuster dan inset:0 op oudere iOS */
            inset:0;
            z-index:9999;                            /* boven tab-bar (60), actiebalk (55) en alles */
            background:rgba(15,23,42,.45);
            backdrop-filter:blur(3px);
            -webkit-backdrop-filter:blur(3px);
            display:none;
            align-items:center;
            justify-content:center;
            animation:fadeIn .15s ease-out;
            pointer-events:auto;
            /* Pak de hele safe-area zodat de overlay echt het hele scherm vult */
            padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        }

        .loading-overlay.actief{ display:flex !important }
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        .loading-doos{
            background:#fff;
            border-radius:18px;
            padding:28px 36px;
            box-shadow:0 12px 32px rgba(0,0,0,.18);
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:14px;
            min-width:180px;
        }
        .loading-spinner{
            width:44px; height:44px;
            border-radius:50%;
            border:4px solid #e5e7eb;
            border-top-color:var(--primair);
            animation:draaiSpinner .8s linear infinite;
        }
        @keyframes draaiSpinner{
            to{ transform:rotate(360deg); }
        }
        .loading-tekst{
            font-size:14px;
            font-weight:500;
            color:var(--tekst);
            text-align:center;
        }

 /* === LOADING-TIMEOUT — verschijnt na 10s wachten met retry-knop ===
   Zelfde patroon als de login-timeout: progress-balk loopt 10s vol,
   daarna swap naar een retry-blok in dezelfde overlay. */
.loading-doos.timeout{ display:none; }
body.bezig-timeout-actief .loading-overlay .loading-doos.normaal{ display:none; }
body.bezig-timeout-actief .loading-overlay .loading-doos.timeout{ display:flex; }

.loading-doos.timeout{
    background:#fff;
    border-radius:18px;
    padding:24px 28px;
    box-shadow:0 12px 32px rgba(0,0,0,.18);
    flex-direction:column;
    align-items:center;
    gap:12px;
    min-width:260px;
    max-width:90vw;
    text-align:center;
}
.loading-timeout-icoon{
    width:48px; height:48px;
    border-radius:50%;
    background:rgba(245,158,11,.15);
    display:flex; align-items:center; justify-content:center;
    color:#d97706;
    font-size:26px;
}
.loading-timeout-titel{
    font-size:15px; font-weight:600;
    color:var(--tekst);
}
.loading-timeout-uitleg{
    font-size:13px;
    color:#64748b;
    line-height:1.4;
}
.loading-retry-knop{
    background:var(--primair);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 22px;
    font-size:14px; font-weight:600;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
    margin-top:4px;
}
.loading-retry-knop:hover{ background:var(--primair-licht); }
.loading-retry-knop:active{ transform:scale(.96); }

/* Progress-balk zoals bij login — vult zich in 10 sec */
.loading-progress{
    width:100%;
    height:4px;
    border-radius:999px;
    background:rgba(15,23,42,.08);
    overflow:hidden;
    margin-top:4px;
}
.loading-progress-balk{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--primair-licht), var(--primair));
    border-radius:999px;
    transition:width 10s linear;
}
.loading-progress-balk.vol{ width:100%; }
body.bezig-timeout-actief .loading-progress{ display:none; }

        /* ============== MOBIEL ============== */
        @media (max-width:900px){
            .app{
                grid-template-columns:1fr;
                display:flex;            /* wordt 'display:flex' bij body.app-actief */
                flex-direction:column;
                /* Forceer volledige viewport-hoogte op mobiel */
                width:100vw;
                height:100vh;
                height:100dvh;
                height:-webkit-fill-available;
            }
            /* override de display:none van .app als app-actief */
            body.app-actief .app{
                display:flex !important;
            }

            /* Op mobiel staat de header sticky — geef scrollIntoView extra
               ruimte zodat de titel "Reserveringen" niet onder de header valt. */
            .reservering-tabel{
                scroll-margin-top:80px;
            }

            /* Mobiel-specifieke balk-overrides: rechte hoeken zijn al globaal
               afgedwongen (boven de media-query), maar het !important hier
               beschermt tegen lokale overrides die toch een afronding
               zouden kunnen aanbrengen. */
            .zijbalk, .nav, .acties{
                border-radius:0 !important;
            }

            /* Header (bovenin): alleen branding + uitloggen.
               Belangrijk: position:sticky in plaats van fixed — anders raakt
               iOS in de war met de geneste fixed .nav (tab-bar) en plaatst
               die ook bovenin. Sticky werkt prima en laat de .nav netjes
               onderaan staan. Hide-on-scroll werkt nog steeds via transform. */
            .zijbalk{
                position:sticky;
                top:0;
                left:0; right:0;
                z-index:50;
                height:auto;
                flex-direction:row;
                align-items:center;
                padding:14px 18px;
                /* Safe-area top voor iPhone notch in standalone-modus */
                padding-top:max(14px, env(safe-area-inset-top));
                padding-left:max(18px, env(safe-area-inset-left));
                padding-right:max(18px, env(safe-area-inset-right));
                gap:10px;
                box-shadow:0 4px 14px rgba(0,0,0,.12);
                min-height:60px;
                overflow:visible;
                /* Strakke rechte hoeken — sluit aan op schermrand */
                border-radius:0;
                /* Slide-animatie voor verbergen bij scroll */
                transform:translateY(0);
                transition:transform .25s ease;
                /* Glass-effect op de header — semi-transparant met blur.
                   Belangrijk: een ONDOORZICHTIGE merkkleur-basis (--secundair)
                   eronder, zodat de header nooit wit/bleek wordt als de
                   color-mix of de laag eronder licht is. Anders vallen de
                   witte icoontjes (uitloggen/vernieuwen/dark-mode) weg tegen
                   een witte balk — wat op tablet gebeurde. */
                background:var(--secundair);
                background:linear-gradient(180deg,
                    color-mix(in srgb, var(--secundair) 94%, #000 6%) 0%,
                    var(--secundair) 100%);
                backdrop-filter:blur(14px) saturate(1.4);
                -webkit-backdrop-filter:blur(14px) saturate(1.4);
            }
            /* JS voegt deze class toe bij omlaag scrollen */
            body.header-verborgen .zijbalk{
                transform:translateY(-100%);
            }
            /* Op mobiel hoeft .hoofd geen extra padding-top — sticky pakt
               z'n eigen ruimte in de flow. */
            .hoofd{
                padding-top:0;
            }
            .merk{
                margin-bottom:0;
                flex-shrink:0;
                padding:0;
                gap:10px;
            }
            .merk-logo{ width:34px; height:34px; font-size:13px; }
            .merk-naam{ font-size:15px; }
            .versie{display:none}

            /* Hoofd-navigatie naar onder de pagina (app-stijl tab-bar) */
            .nav{
                position:fixed;
                top:auto;
                width:auto;
                left:0; right:0;
                /* Bar gewoon aan de onderkant. iOS rapporteert in deze
                   PWA-modus safe-area-inset-bottom = 0, dus bottom:0 werkt
                   gewoon. Knoppen worden iets hoger gemaakt voor meer
                   tap-comfort. */
                bottom:0 !important;
                min-height:62px !important;
                z-index:60;
                /* Solid kleur — geen gradient die door safe-area heen anders oogt. */
                background:var(--secundair);
                backdrop-filter:none;
                -webkit-backdrop-filter:none;
                border-top:1px solid rgba(255,255,255,.12);
                border-radius:0;
                box-shadow:0 -4px 16px rgba(0,0,0,.18);
                display:flex !important;
                flex-direction:row !important;
                gap:0;
                margin:0 !important;
                padding:0 !important;
                /* Knoppen direct tegen elkaar, geen ruimte */
                align-items:stretch;       /* knoppen vullen volledige hoogte van de bar */
                justify-content:stretch;
            }
            .nav .nav-knop{
                flex:1;
                display:flex !important;
                flex-direction:column;
                align-items:center;
                justify-content:flex-end;   /* icoon+tekst onderaan in de knop */
                gap:2px;
                /* Normale padding — bar is nu zelf groot genoeg dat de tap-zone
                   ruim is. */
                padding:8px 4px 10px 4px;
                font-size:10px;
                white-space:nowrap;
                border-radius:0;
                text-align:center;
                background:transparent;
                color:rgba(255,255,255,.65);
                line-height:1;
                margin:0;
                border:none;
                width:auto !important;
                height:auto;
                min-height:48px;
            }
            .nav .nav-knop svg{
                width:18px; height:18px;       /* kleiner icoon */
                margin:0 auto;
                opacity:1;
            }
            .nav .nav-knop span{
                display:inline-block !important;
                font-size:10px;                /* kleiner label */
                font-weight:500;
            }
            .nav .nav-knop.actief{
                background:rgba(255,255,255,.06);
                color:#fff;
            }
            .nav .nav-knop.actief svg{
                color:var(--primair-licht);
            }

            /* Uitloggen blijft in header rechtsboven (compact icoon) */
            .nav-bottom{
                flex-direction:row;
                margin-top:0;
                margin-left:auto;
                gap:4px;
                position:static;
                background:transparent;
            }
            .nav-bottom .nav-knop{
                padding:8px;
                background:transparent;
                /* Vol-wit i.p.v. doorschijnend, plus een subtiele schaduw,
                   zodat de icoontjes altijd leesbaar zijn — ook mocht de
                   header-achtergrond ooit lichter uitvallen. */
                color:#fff;
            }
            .nav-bottom .nav-knop svg{
                width:22px; height:22px; opacity:1;
                filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
            }
            .nav-bottom .nav-knop:hover,
            .nav-bottom .nav-knop:active{
                background:rgba(255,255,255,.1);
            }
            .nav-bottom .nav-knop span{ display:none }
            .klant-info{display:none}

            /* Banner: strakke rechthoek over volledige breedte op mobiel.
               Sluit aan op de schermrand voor een nette app-feel. */
            .banner{
                height:120px;
                margin:0;
                border-radius:0;
                box-shadow:0 4px 12px rgba(0,0,0,.08);
            }
            .banner-logo{width:84px;height:84px}
            .banner-logo span{font-size:13px}
            .banner-titel{display:none}

            /* Inhoud krijgt RUIM extra ruimte onderin zodat je comfortabel
               kunt scrollen voorbij de laatste kaart en de actie-knop op de
               laatste reservering goed kunt indrukken. Witte ruimte onderin
               is geen probleem — natuurlijke scroll-marge. */
            .inhoud{
                grid-template-columns:1fr;
                padding:14px;
                padding-top:8px;
                padding-left:max(14px, env(safe-area-inset-left));
                padding-right:max(14px, env(safe-area-inset-right));
                /* Ruimte: tab-bar 62px + speling. Safe-area niet meer apart
                   nodig — die zit nu in de tab-bar zelf. */
                padding-bottom:280px;
                gap:14px;
            }
            /* Geen eigen scroll op de categorie-lijst — anders 'plakt' verticaal
               scrollen op de tegels. De hele pagina scrollt nu natuurlijk. */
            .categorie-lijst{
                max-height:none;
                overflow-y:visible;
                overflow:visible;
            }
            /* Extra marge ONDER de reservering-tabel zelf — voor het geval
               de tabel-wrapper een eigen scroll-context heeft. Garandeert
               dat de laatste kaart altijd boven de tab-bar uitkomt. */
            .reservering-tabel{
                margin-bottom:80px;
            }
            /* In eigen-modus (Mijn afspraken) staat de tabel als enige op het
               scherm — daar mag nog wat meer adempauze onderin. */
            body.eigen-modus .reservering-tabel{
                margin-bottom:120px;
            }
            /* Zorg dat verticaal scrollen op de reservering-kaarten soepel werkt
               en niet wordt onderschept door tap/swipe handlers. */
            tbody tr, .reservering-tabel, .tabel-wrapper{
                touch-action:pan-y;
            }
            /* Kaarten op mobiel iets meer afgerond — past bij banner-stijl */
            .kaart{
                border-radius:20px;
                box-shadow:0 2px 10px rgba(0,0,0,.05);
            }

            /* Actie-knoppen vast boven de tab-bar zodat ze altijd zichtbaar zijn,
               zelfs bij lange reservering-lijsten */
            .acties{
                position:fixed;
                left:0; right:0;
                bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;  /* direct boven tab-bar (tab-bar staat tegen schermrand) */
                transform:none;                                     /* override desktop transform */
                max-width:none;
                z-index:55;
                display:flex;
                align-items:center;
                padding:10px 12px;
                padding-left:max(12px, env(safe-area-inset-left));
                padding-right:max(12px, env(safe-area-inset-right));
                gap:8px;
                background:rgba(255,255,255,.96);
                backdrop-filter:blur(8px);
                -webkit-backdrop-filter:blur(8px);
                border-top:1px solid var(--rand);
                border-left:none; border-right:none;
                /* Strakke rechte hoeken — sluit aan op schermrand */
                border-radius:0;
                box-shadow:0 -3px 12px rgba(0,0,0,.06);
                transition:transform .25s ease, opacity .25s ease;
            }
            .acties.verborgen{
                transform:translateY(100%);
                opacity:0;
                pointer-events:none;
            }
            .knop{flex:1;justify-content:center;padding:12px 14px}
            /* X-knop op mobiel: iets groter voor vingervriendelijkheid */
            .acties .knop-sluit{
                margin-left:0;
                width:40px; height:40px;
                flex-shrink:0;
                flex-grow:0;
                flex-basis:40px;
            }

            /* === KALENDER ALS HORIZONTALE WEEK-STRIP op mobiel ===
               Inplaats van een grote maand-grid tonen we 7 dagen als ronde
               cellen die je horizontaal kunt swipen. App-stijl. */
            .kalender-grid{
                display:flex !important;
                gap:0;
                overflow-x:auto;
                overflow-y:hidden;
                scroll-snap-type:x mandatory;
                -webkit-overflow-scrolling:touch;
                padding:8px 4px 14px;
                scrollbar-width:none;            /* Firefox: geen scrollbar */
                /* Sta zowel horizontale (week-wisseling) als verticale
                   (page-scroll doorgeven aan parent) bewegingen toe.
                   Dit voorkomt dat verticaal scrollen 'plakt' op de kalender. */
                touch-action:pan-x pan-y;
            }
            .kalender-grid::-webkit-scrollbar{ display:none; }
            /* Headers (Ma/Di/Wo) niet tonen op week-strip */
            .kalender-grid .kalender-header{ display:none !important; }
            /* Lege placeholder-cellen verbergen — die zijn alleen relevant
               voor de maand-grid layout */
            .kalender-grid .kalender-dag.leeg{ display:none !important; }
            /* Dag-cellen: ronde knoppen met dag-naam erboven */
            .kalender-grid .kalender-dag{
                flex:0 0 calc((100% - 16px) / 7);   /* 7 zichtbare dagen, met kleine marge */
                scroll-snap-align:start;
                aspect-ratio:auto;
                height:auto;
                min-height:64px;
                padding:8px 0;
                margin:0 1px;
                display:flex;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                gap:4px;
                border-radius:14px;
                background:#fff;
                color:var(--tekst);
                font-size:18px;
                font-weight:600;
                position:relative;
                transition:all .15s;
                cursor:pointer;
            }
            /* Dag-naam (Ma/Di/Wo) als kleine label boven het cijfer */
            .kalender-grid .kalender-dag::before{
                content:attr(data-dag-naam);
                font-size:10px;
                font-weight:600;
                letter-spacing:.5px;
                color:var(--tekst-zacht);
                text-transform:uppercase;
                line-height:1;
            }
            /* Vandaag krijgt een subtiele primair-kleur ring */
            .kalender-grid .kalender-dag.vandaag{
                color:var(--primair);
                background:var(--primair-zacht);
            }
            /* Geselecteerde dag: gevuld met merk-kleur */
            .kalender-grid .kalender-dag.geselecteerd{
                background:linear-gradient(135deg,var(--primair) 0%,var(--primair-licht) 100%);
                color:#fff;
                box-shadow:0 6px 14px rgba(var(--primair-rgb),.35);
                transform:translateY(-1px);
            }
            .kalender-grid .kalender-dag.geselecteerd::before{
                color:rgba(255,255,255,.85);
            }
            /* Dagen uit andere maand: subtiel gedimd, maar nog steeds klikbaar */
            .kalender-grid .kalender-dag.andere-maand{
                color:var(--tekst-zacht);
                opacity:.55;
            }
            .kalender-grid .kalender-dag.andere-maand.geselecteerd{
                opacity:1;
                color:#fff;
            }
            /* Dot voor 'heeft les' */
            .kalender-grid .kalender-dag.heeft-les::after{
                content:"";
                position:absolute;
                bottom:8px; left:50%;
                transform:translateX(-50%);
                width:4px; height:4px;
                border-radius:50%;
                background:var(--primair);
            }
            .kalender-grid .kalender-dag.geselecteerd.heeft-les::after{
                background:#fff;
            }
            /* Tap-feedback */
            .kalender-grid .kalender-dag:active:not(.geselecteerd){
                transform:scale(.94);
                background:var(--primair-zacht);
            }
            /* Kalender-kop blijft hetzelfde, maar iets compacter */
            .kalender-kop{ padding:14px 14px 4px; }

            /* === TABEL → CARD-LAYOUT op mobiel === */
            .tabel-wrapper{overflow:visible}
            table, thead, tbody, tr, td{display:block;width:100%}
            thead{display:none}                         /* headers verborgen */
            tbody{display:flex;flex-direction:column;gap:8px;padding:10px}
            tbody tr{
                background:var(--glas);
                backdrop-filter:blur(var(--glas-blur)) saturate(var(--glas-saturatie));
                -webkit-backdrop-filter:blur(var(--glas-blur)) saturate(var(--glas-saturatie));
                border:1px solid var(--glas-rand);
                border-radius:14px;
                padding:10px 12px;
                box-shadow:0 4px 20px rgba(31,38,135,0.08);
                position:relative;
                cursor:pointer;
                transition:all .2s;
                display:grid;
                /* 3 kolommen: [tegel] [datum/tijd-info] [status badge rechtsboven] */
                grid-template-columns:auto auto 1fr;
                gap:4px 12px;
                align-items:center;
            }
            @supports not (backdrop-filter: blur(1px)) {
                tbody tr{ background:rgba(255,255,255,0.95); }
            }
            tbody tr:hover{
                transform:none;
                box-shadow:0 4px 12px rgba(var(--primair-rgb),.12);
                border-color:rgba(var(--primair-rgb),.3);
            }
            tbody tr:hover td:first-child{ box-shadow:none }
            tbody tr:active{transform:scale(.98)}
            tbody tr.geselecteerd{
                border-color:var(--primair);
                background:linear-gradient(135deg,#fff 0%,var(--primair-zacht) 100%);
                box-shadow:0 4px 16px rgba(var(--primair-rgb),.18);
            }
            tbody tr.geselecteerd td:first-child{ box-shadow:none }
            /* Reset alle desktop-status box-shadow inset op td (die op mobiel
               als verticale streep ín de kaart verschijnen) */
            tbody tr.rij-status-success td:first-child,
            tbody tr.rij-status-warning td:first-child,
            tbody tr.rij-status-error td:first-child{
                box-shadow:none;
            }

            /* Status-kleur als dikke linkerrand (via inset box-shadow zodat
               de afgeronde kaarthoeken niet visueel afkappen) én duidelijke
               gradient over de kaart. 2-stops gradient voorkomt kantelpunt. */
            tbody tr.rij-status-success{
                box-shadow:inset 4px 0 0 #10b981, 0 1px 3px rgba(0,0,0,.04);
                background:linear-gradient(105deg, rgba(16,185,129,.28) 0%, rgba(16,185,129,.02) 100%);
            }
            tbody tr.rij-status-warning{
                box-shadow:inset 4px 0 0 #f59e0b, 0 1px 3px rgba(0,0,0,.04);
                background:linear-gradient(105deg, rgba(245,158,11,.30) 0%, rgba(245,158,11,.02) 100%);
            }
            tbody tr.rij-status-error{
                box-shadow:inset 4px 0 0 #ef4444, 0 1px 3px rgba(0,0,0,.04);
                background:linear-gradient(105deg, rgba(239,68,68,.26) 0%, rgba(239,68,68,.02) 100%);
                opacity:.85;
            }
            tbody tr.rij-status-error td.cel-datum,
            tbody tr.rij-status-error td.cel-tijd,
            tbody tr.rij-status-error td.cel-categorie,
            tbody tr.rij-status-error td.cel-locatie{
                color:var(--tekst-zacht);
                text-decoration:line-through;
                text-decoration-color:rgba(239,68,68,.4);
            }
            /* Verstreken rijen: gedimd grijs op mobiel — overruleert status-kleur */
            tbody tr.rij-verstreken{
                box-shadow:inset 4px 0 0 #cbd5e1, 0 1px 3px rgba(0,0,0,.04) !important;
                background:#fafafa !important;
                opacity:.65;
            }
            tbody tr.rij-verstreken td.cel-datum,
            tbody tr.rij-verstreken td.cel-tijd,
            tbody tr.rij-verstreken td.cel-categorie,
            tbody tr.rij-verstreken td.cel-locatie{
                color:var(--tekst-zacht) !important;
                text-decoration:none !important;
            }
            tbody tr.rij-verstreken .badge{
                opacity:.7;
            }
            /* Geselecteerd wint van status-kleur */
            tbody tr.geselecteerd.rij-status-success,
            tbody tr.geselecteerd.rij-status-warning,
            tbody tr.geselecteerd.rij-status-error{
                box-shadow:inset 4px 0 0 var(--primair), 0 4px 16px rgba(var(--primair-rgb),.18);
                background:linear-gradient(105deg, rgba(var(--primair-rgb),.20) 0%, rgba(var(--primair-rgb),.02) 100%);
                opacity:1;
            }
            tbody tr.geselecteerd.rij-status-error td{
                text-decoration:none;
            }
            tbody tr td{
                padding:0;
                border:none;
                white-space:normal;
                font-size:16px;             /* groter — beter leesbaar */
            }
            /* Cel-labels via data-attribuut (grijze label boven waarde) */
            tbody tr td::before{
                content:attr(data-label);
                display:block;
                font-size:11px;
                text-transform:uppercase;
                letter-spacing:.5px;
                color:var(--tekst-zacht);
                font-weight:700;
                margin-bottom:3px;
                opacity:.7;
            }
            /* Specifieke layout per cel:
               Kolom 1: categorie-tegel (groter, vult mooi de linker hoogte),
               Kolom 2: datum + tijd (gestapeld),
               Kolom 3: status badge (rechts boven). */
            tbody tr td.cel-tegel{
                grid-column:1; grid-row:1 / span 2;
                align-self:center; padding:0;
            }
            tbody tr td.cel-tegel::before{ display:none }
            tbody tr td.cel-tegel .categorie-tegel{
                width:54px; height:54px;
                font-size:15px;
                border-radius:13px;
            }
            tbody tr td.cel-datum{ grid-column:2; grid-row:1; font-size:16px; font-weight:600 }
            tbody tr td.cel-tijd { grid-column:2; grid-row:2; font-size:22px; font-weight:700 }
            tbody tr td.cel-status{
                grid-column:3; grid-row:1 / span 2;
                justify-self:end; align-self:center;       /* gecentreerd vertical, vult de hele hoogte */
                padding-top:0;
            }
            tbody tr td.cel-status::before{ display:none }
            /* Status-badge: compact maar duidelijk. Mag niet uit de kaart vallen. */
            tbody tr td.cel-status .badge{
                font-size:12px;
                padding:5px 10px;
                max-width:140px;
                white-space:normal;
                text-align:center;
                line-height:1.2;
            }
            tbody tr td.cel-status .badge::before{
                width:6px; height:6px;
            }
            /* Verstreken status-cel toont een grote afbeelding van de
               categorie ipv een lege ruimte — direct zichtbaar wat de
               activiteit was zonder de tekst hoeven lezen. */
            tbody tr td.cel-status-verstreken{
                align-self:center;             /* gecentreerd, vult de lege ruimte */
                padding-top:0;
            }
            .grote-tegel{
                display:flex;          /* op mobiel WEL tonen (overruled desktop display:none) */
                position:relative;
                align-items:center; justify-content:center;
                width:80px; height:80px;
                border-radius:18px;
                color:#fff;
                font-size:24px; font-weight:700; letter-spacing:.4px;
                text-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.3);
                box-shadow:0 4px 12px rgba(0,0,0,.15);
                user-select:none;
                overflow:hidden;
                opacity:.6;                    /* gedimd voor verstreken-context */
            }
            .grote-tegel-img{
                position:absolute;
                inset:0;
                width:100%; height:100%;
                object-fit:cover;
            }
            .grote-tegel-icoon{
                position:absolute;
                inset:18%;
                width:64%; height:64%;
                color:#fff;
                opacity:.92;
                filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
            }
            .grote-tegel.heeft-plaatje::after{
                content:"";
                position:absolute; inset:0;
                background:linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 100%);
                border-radius:inherit;
                pointer-events:none;
            }
            .grote-tegel-letters{
                position:relative; z-index:2;
            }
            .grote-tegel.heeft-plaatje .grote-tegel-letters{
                display:none;
            }
            tbody tr td.cel-categorie{
                grid-column:1 / -1; grid-row:3;
                padding-top:8px; margin-top:6px;
                font-size:18px;                /* groter — duidelijker */
                font-weight:600;
                /* Forceer 1 regel: lange namen worden afgekapt met "…" */
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                max-width:100%;
                min-width:0;                   /* nodig voor ellipsis in grid */
            }
            tbody tr td.cel-locatie{ grid-column:1 / -1; grid-row:4; padding-top:4px; font-size:15px }
            tbody tr td.cel-actie{
                grid-column:1 / -1; grid-row:5;
                padding-top:10px;
                margin-top:8px;
                border-top:1px solid var(--rand);
                text-align:right;
            }
            tbody tr td.cel-actie::before{ display:none }
            /* Knop op mobiel: compact maar leesbaar */
            tbody tr td.cel-actie .rij-knop{
                padding:8px 14px;
                font-size:14px;
            }
            tbody tr td.cel-actie .rij-knop svg{ width:14px; height:14px }
            /* Niet-mogelijk: subtiele tekst rechts */
            tbody tr td.cel-actie .rij-niet-mogelijk{
                font-style:italic;
                font-size:13px;
            }
            tbody tr td.cel-datum::before{ content:"Datum" }
            tbody tr td.cel-tijd::before { content:"Tijd"  }
            tbody tr td.cel-categorie::before{ content:"Categorie" }
            tbody tr td.cel-locatie::before{ content:"Locatie" }

            /* ════════════════════════════════════════════════════════════════
               COMPACTE & MOOIERE RESERVERING-KAART (mobiel)
               Override-blok — vervangt visueel de "labels-boven-waarde" layout.
               Layout: 4 kolommen × 3 rijen.
               ┌─────┬────────┬───────────┬──────────────┐
               │     │ tijd   │ datum     │ status-badge │  rij 1
               │tegel├────────┴───────────┤              │
               │     │ categorie          │              │  rij 2
               │     ├────────────────────┤              │
               │     │ 📍 locatie         │   actie      │  rij 3
               └─────┴────────────────────┴──────────────┘
               ════════════════════════════════════════════════════════════════ */
            tbody tr{
                grid-template-columns: auto auto auto 1fr !important;
                grid-template-rows: auto auto auto !important;
                column-gap: 10px !important;
                row-gap: 2px !important;
                padding: 12px 14px !important;
                border-radius: 18px !important;
                align-items: center !important;
            }
            tbody tr td.cel-datum::before,
            tbody tr td.cel-tijd::before,
            tbody tr td.cel-categorie::before,
            tbody tr td.cel-locatie::before{
                display: none !important;
            }
            tbody tr td.cel-tegel{
                grid-column: 1 !important;
                grid-row: 1 / -1 !important;
                align-self: center !important;
            }
            tbody tr td.cel-tegel .categorie-tegel{
                width: 46px !important; height: 46px !important;
                border-radius: 13px !important;
                font-size: 14px !important;
            }
            tbody tr td.cel-tijd{
                grid-column: 2 !important;
                grid-row: 1 !important;
                font-size: 22px !important;
                font-weight: 800 !important;
                color: var(--primair) !important;
                line-height: 1 !important;
                letter-spacing: .3px !important;
                padding: 0 !important;
            }
            tbody tr td.cel-datum{
                grid-column: 3 !important;
                grid-row: 1 !important;
                justify-self: start !important;
                align-self: baseline !important;
                padding: 0 0 0 4px !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                color: var(--tekst-zacht) !important;
                letter-spacing: .2px !important;
            }
            tbody tr td.cel-status{
                grid-column: 4 !important;
                grid-row: 1 !important;
                justify-self: end !important;
                align-self: center !important;
                padding: 0 !important;
            }
            tbody tr td.cel-status .badge{
                font-size: 11px !important;
                padding: 4px 10px !important;
                border-radius: 999px !important;
                max-width: 130px !important;
                line-height: 1.25 !important;
                font-weight: 700 !important;
                letter-spacing: .2px !important;
            }
            tbody tr td.cel-categorie{
                grid-column: 2 / -1 !important;
                grid-row: 2 !important;
                margin: 0 !important;
                padding: 2px 0 0 0 !important;
                border: none !important;
                font-size: 15px !important;
                font-weight: 700 !important;
                color: var(--tekst) !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                min-width: 0 !important;
            }
            tbody tr td.cel-locatie{
                grid-column: 2 / -1 !important;
                grid-row: 3 !important;
                padding: 0 !important;
                font-size: 12.5px !important;
                color: var(--tekst-zacht) !important;
                font-weight: 500 !important;
                display: flex !important;
                align-items: center !important;
                gap: 4px !important;
            }
            tbody tr td.cel-locatie::before{
                content: "" !important;
                display: inline-block !important;
                width: 11px !important; height: 11px !important;
                background: currentColor !important;
                -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/></svg>") center/contain no-repeat !important;
                        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/></svg>") center/contain no-repeat !important;
                opacity: .55 !important;
                flex: 0 0 auto !important;
                margin: 0 !important;
                font-size: 0 !important;
            }
            tbody tr td.cel-locatie:empty{ display: none !important; }
            tbody tr td.cel-actie{
                grid-column: 4 !important;
                grid-row: 2 / span 2 !important;
                justify-self: end !important;
                align-self: end !important;
                padding: 0 !important;
                margin: 0 !important;
                border-top: none !important;
                text-align: right !important;
            }
            tbody tr td.cel-actie .rij-knop{
                padding: 7px 12px !important;
                font-size: 12.5px !important;
                border-radius: 999px !important;
                gap: 5px !important;
                font-weight: 700 !important;
                letter-spacing: .2px !important;
                box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
            }
            tbody tr td.cel-actie .rij-knop svg{
                width: 13px !important; height: 13px !important;
            }
            tbody tr td.cel-actie .rij-niet-mogelijk{
                font-size: 11.5px !important;
                font-style: italic !important;
                opacity: .65 !important;
            }
            tbody tr.rij-status-success{
                box-shadow: inset 5px 0 0 #10b981, 0 2px 8px rgba(16,185,129,.10) !important;
            }
            tbody tr.rij-status-warning{
                box-shadow: inset 5px 0 0 #f59e0b, 0 2px 8px rgba(245,158,11,.12) !important;
            }
            tbody tr.rij-status-error{
                box-shadow: inset 5px 0 0 #ef4444, 0 2px 8px rgba(239,68,68,.10) !important;
            }
            tbody tr td.cel-status-verstreken .grote-tegel{
                width: 46px !important; height: 46px !important;
                border-radius: 13px !important;
                font-size: 14px !important;
            }
            tbody tr td.cel-status-verstreken .grote-tegel-icoon{
                inset: 22% !important;
                width: 56% !important; height: 56% !important;
            }

            /* ════════════════════════════════════════════════════════════════
               NARROW-SCREEN FIX voor compacte reservering-kaart
               Lost twee problemen op die zichtbaar werden op mobiel:
               1. "16-05-2026" brak op de hyphens naar 3 regels
               2. Categorienaam werd afgekapt of duwde de kaart buiten beeld
               3. Knop + status badge liepen buiten de viewport
               Strategie: clamp() voor fluide fonts, min-width:0 zodat grid-
               cellen kunnen krimpen, en safety-clip op de row.
               ════════════════════════════════════════════════════════════════ */
            /* Geldig binnen deze hele @media (max-width:900px) block: */

            /* Veiligheids-clip: kaart-content kan nooit meer buiten kaart vallen */
            tbody tr{
                overflow: hidden !important;
            }

            /* min-width:0 op grid-cellen die mogen krimpen (anders houdt
               de inhoud ze tegen op hun min-content breedte, ondanks 1fr) */
            tbody tr td.cel-tijd,
            tbody tr td.cel-datum,
            tbody tr td.cel-categorie,
            tbody tr td.cel-locatie{
                min-width: 0 !important;
            }

            /* Datum: nooit breken op hyphens, compactere cijfers */
            tbody tr td.cel-datum{
                white-space: nowrap !important;
                font-variant-numeric: tabular-nums !important;
            }
            tbody tr td.cel-tijd{
                font-variant-numeric: tabular-nums !important;
                /* Fluide schaling: minimaal 16px, ideaal 5vw, max 22px */
                font-size: clamp(16px, 5vw, 22px) !important;
            }
            tbody tr td.cel-categorie{
                font-size: clamp(13px, 3.8vw, 15px) !important;
            }
            tbody tr td.cel-datum{
                font-size: clamp(11px, 3.2vw, 13px) !important;
            }
            tbody tr td.cel-locatie{
                font-size: clamp(11px, 3.2vw, 12.5px) !important;
            }

            .leeg-rij{padding:32px}

            /* Login-scherm op mobiel: kaart vult het volledige scherm in
               plaats van een zwevende afgerond-rechthoek met marges. Dat
               geeft een echte 'app-look' op de telefoon. Geen blur of
               afgeronde randen meer — gewoon strak van rand tot rand. */
            .login{
                padding:0;     /* haalt de 24px buitenmarge weg */
            }
            .login-kaart{
                max-width:none;
                width:100%;
                min-height:100%;
                border-radius:0;
                border:none;
                /* Volle dekking ipv glas-effect — anders kun je door de hele
                   kaart heen kijken en zie je de fitness-foto eronder. */
                background:rgba(15,23,42,.92);
                backdrop-filter:none;
                -webkit-backdrop-filter:none;
                /* Padding overgenomen vanuit .login zodat content niet onder
                   de notch/home-indicator komt. */
                padding:
                    max(48px, env(safe-area-inset-top))
                    max(28px, env(safe-area-inset-right))
                    max(48px, env(safe-area-inset-bottom))
                    max(28px, env(safe-area-inset-left));
                box-shadow:none;
                /* Verticaal centreren van de inhoud binnen de schermhoogte */
                display:flex;
                flex-direction:column;
                justify-content:center;
            }
        }

        @media (max-width:480px){
            .inhoud{padding:10px;gap:10px}
            .kaart{border-radius:12px}
            tbody{padding:8px}
            tbody tr{padding:12px 14px;border-radius:12px}

            /* ════════════════════════════════════════════════════════════════
               NARROW-SCREEN — categorienaam mag wrappen naar 2 regels.
               Status-badge en actie-knop worden zichtbaar compacter zodat
               de kaart altijd binnen de viewport blijft.
               ════════════════════════════════════════════════════════════════ */
            tbody tr td.cel-categorie{
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                line-height: 1.25 !important;
                display: -webkit-box !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical !important;
            }

            /* Status-badge: compacter + GEEN stip meer (scheelt ~12px) */
            tbody tr td.cel-status .badge{
                font-size: 10px !important;
                padding: 3px 8px !important;
                max-width: 100px !important;
            }
            tbody tr td.cel-status .badge::before,
            tbody tr td.cel-status .badge .stip{
                display: none !important;
            }

            /* Actie-knop: compacter + GEEN icoon meer (scheelt ~16px) */
            tbody tr td.cel-actie .rij-knop{
                padding: 6px 11px !important;
                font-size: 12px !important;
                gap: 0 !important;
            }
            tbody tr td.cel-actie .rij-knop svg{
                display: none !important;
            }
        }

        @media (max-width:380px){
            /* Heel smalle schermen (iPhone SE, oudere Android): nog tighter */
            tbody tr{
                padding: 11px 12px !important;
                column-gap: 8px !important;
            }
            tbody tr td.cel-datum{
                padding-left: 2px !important;
            }
            tbody tr td.cel-tegel .categorie-tegel,
            tbody tr td.cel-status-verstreken .grote-tegel{
                width: 42px !important; height: 42px !important;
                border-radius: 12px !important;
            }
            tbody tr td.cel-actie .rij-knop{
                padding: 5px 10px !important;
                font-size: 11.5px !important;
            }
            tbody tr td.cel-status .badge{
                font-size: 9.5px !important;
                padding: 3px 7px !important;
                max-width: 90px !important;
            }
            /* Zelfde maat-reductie voor de les-kaart-modus */
            .les-kaart-naam{
                font-size: clamp(13px, 3.8vw, 15px) !important;
                white-space: normal !important;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .les-kaart-foto{
                width: 56px !important;
                height: 56px !important;
                border-radius: 12px !important;
            }
            .les-kaart-meta{
                padding-right: 78px;
            }
            .les-kaart-knop{
                padding: 6px 11px !important;
                font-size: 11.5px !important;
            }
            .les-kaart-knop svg{
                display: none !important;
            }
        }

        /* Subtiele animatie wanneer rijen verschijnen */
        @keyframes rijIn{
            from{opacity:0; transform:translateY(4px)}
            to{opacity:1; transform:translateY(0)}
        }
        tbody tr{ animation:rijIn .25s ease-out backwards }
        tbody tr:nth-child(2){ animation-delay:.03s }
        tbody tr:nth-child(3){ animation-delay:.06s }
        tbody tr:nth-child(4){ animation-delay:.09s }
        tbody tr:nth-child(5){ animation-delay:.12s }
        tbody tr:nth-child(n+6){ animation-delay:.15s }

        /* ============== UPDATE-BANNER (nieuwe versie beschikbaar) ==============
           Verschijnt boven alles wanneer version.json een hogere versie meldt
           dan window.APP_VERSIE. Verborgen tot JS de class 'zichtbaar' toevoegt. */
        .update-banner{
            position:fixed;
            top:0; left:0; right:0;
            z-index:2000;                       /* boven login én app */
            display:none;
            align-items:center;
            gap:12px;
            padding:12px 18px;
            padding-top:max(12px, env(safe-area-inset-top));
            padding-left:max(18px, env(safe-area-inset-left));
            padding-right:max(18px, env(safe-area-inset-right));
            background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%);
            color:#fff;
            box-shadow:0 4px 18px rgba(0,0,0,.25);
            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
            font-size:14px;
            transform:translateY(-100%);
            transition:transform .35s cubic-bezier(.16,1,.3,1);
        }
        .update-banner.zichtbaar{
            display:flex;
            transform:translateY(0);
        }
        .update-banner-icoon{
            flex:0 0 auto;
            width:24px; height:24px;
            display:flex; align-items:center; justify-content:center;
            background:rgba(255,255,255,.18);
            border-radius:50%;
            animation:updatePuls 2s ease-in-out infinite;
        }
        @keyframes updatePuls{
            0%, 100%{ box-shadow:0 0 0 0 rgba(255,255,255,.4) }
            50%    { box-shadow:0 0 0 8px rgba(255,255,255,0)  }
        }
        .update-banner-tekst{
            flex:1 1 auto;
            line-height:1.3;
        }
        .update-banner-tekst strong{ display:block; font-weight:600 }
        .update-banner-tekst small{
            display:block;
            opacity:.85;
            font-size:12px;
            margin-top:2px;
        }
        .update-banner-knop{
            flex:0 0 auto;
            background:rgba(255,255,255,.95);
            color:#1e40af;
            border:none;
            padding:8px 14px;
            border-radius:8px;
            font-weight:600;
            font-size:13px;
            cursor:pointer;
            transition:transform .15s ease, background .15s ease;
            white-space:nowrap;
        }
        .update-banner-knop:hover{ background:#fff; transform:translateY(-1px) }
        .update-banner-knop:active{ transform:translateY(0) }
        .update-banner-knop:disabled{ opacity:.6; cursor:wait }

        /* Op mobiel: kleinere padding en compact icoon */
        @media (max-width:600px){
            .update-banner{ padding:10px 12px; font-size:13px; gap:8px }
            .update-banner-icoon{ width:20px; height:20px }
            .update-banner-tekst small{ display:none }   /* alleen titel op smal scherm */
            .update-banner-knop{ padding:7px 10px; font-size:12px }
        }

        /* ════════════════════════════════════════════════════════════════════
           WITTERE KAART-BASIS MET HEEL SUBTIELE STATUS-TINT
           ──────────────────────────────────────────────────────────────────
           Eerder waren de kaart-achtergronden zichtbaar gekleurd door een
           18-20% gekleurde gradient over een semi-transparante glas-laag.
           Bij merken met sterke merkkleur (Sproei groen, USA oranje) zag je
           vooral de merkkleur door de transparantie heen schemeren.

           Nu: bijna-witte basis met slechts een hint van kleur (~6-8%) zodat
           het onderscheid tussen beschikbaar / gereserveerd / vol behouden
           blijft, maar de kaart visueel veel rustiger oogt. De accent-rand
           links (3-5px gekleurde balk) doet het meeste werk in het tonen
           van de status.
           ════════════════════════════════════════════════════════════════════ */
        tbody tr{
            background: rgba(255,255,255,0.94) !important;
        }
        tbody tr:hover{
            background:
                linear-gradient(90deg, rgba(var(--primair-rgb),.05) 0%, rgba(var(--primair-rgb),.01) 70%),
                rgba(255,255,255,1) !important;
        }

        /* Beschikbaar — heel licht groen */
        tbody tr.rij-status-success{
            background:
                linear-gradient(90deg, rgba(16,185,129,.08) 0%, rgba(16,185,129,.01) 70%),
                rgba(255,255,255,0.96) !important;
        }
        tbody tr.rij-status-success:hover{
            background:
                linear-gradient(90deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.02) 70%),
                rgba(255,255,255,1) !important;
        }

        /* Gereserveerd — heel licht roze/rood (warmer dan vol, koeler dan error) */
        tbody tr.rij-status-warning{
            background:
                linear-gradient(90deg, rgba(244,114,114,.07) 0%, rgba(244,114,114,.01) 70%),
                rgba(255,255,255,0.96) !important;
        }
        tbody tr.rij-status-warning:hover{
            background:
                linear-gradient(90deg, rgba(244,114,114,.13) 0%, rgba(244,114,114,.02) 70%),
                rgba(255,255,255,1) !important;
        }

        /* Vol / Gesloten — iets sterker rood, blijft subtiel */
        tbody tr.rij-status-error{
            background:
                linear-gradient(90deg, rgba(239,68,68,.09) 0%, rgba(239,68,68,.01) 70%),
                rgba(255,255,255,0.94) !important;
        }
        tbody tr.rij-status-error:hover{
            background:
                linear-gradient(90deg, rgba(239,68,68,.16) 0%, rgba(239,68,68,.02) 70%),
                rgba(255,255,255,1) !important;
        }

        /* Geselecteerde rij — sterker geaccentueerd, in lijn met witte basis */
        tbody tr.geselecteerd{
            background:
                linear-gradient(90deg, rgba(var(--primair-rgb),.18) 0%, rgba(var(--primair-rgb),.03) 70%),
                rgba(255,255,255,1) !important;
        }

        /* Verstreken: rustig grijs op witte basis */
        tbody tr.rij-verstreken{
            background:
                linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.005) 70%),
                rgba(255,255,255,0.92) !important;
            opacity: .75;
        }

        /* ─── Zelfde principe voor de les-kaart in foto-modus ─── */
        .les-kaart{
            background: rgba(255,255,255,0.96) !important;
        }
        .les-kaart.gereserveerd{
            background:
                linear-gradient(105deg, rgba(244,114,114,.10) 0%, rgba(255,255,255,1) 60%) !important;
            border-color: rgba(244,114,114,.20) !important;
            box-shadow:
                inset 5px 0 0 #f47272,
                0 2px 10px rgba(244,114,114,.08) !important;
        }
        .les-kaart.verstreken{
            background: rgba(250,250,250,1) !important;
            opacity: .65;
        }
        /* Beschikbaar = de "default" .les-kaart zonder gereserveerd/verstreken
           class: dezelfde subtiele groene tint als de tabel-versie. */
        .les-kaart:not(.gereserveerd):not(.verstreken){
            background:
                linear-gradient(105deg, rgba(16,185,129,.08) 0%, rgba(255,255,255,1) 60%) !important;
            border-color: rgba(16,185,129,.18) !important;
            box-shadow:
                inset 5px 0 0 #10b981,
                0 2px 10px rgba(16,185,129,.06) !important;
        }

        /* === GEEN AFGERONDE SCHERMHOEKEN (overrulet oudere stylesheets) ===
          special.css / special2.css / bootstrap zetten mogelijk een border-radius
          op html/body of een full-screen laag, waardoor de laag erachter in de
          hoeken doorschemert als afgeronde hoek. klantenportaal.css laadt als
          laatste; dit !important dwingt overal vierkante hoeken af op de elementen
          die de schermrand raken. (.login-kaart bewust NIET — die is met opzet rond.) */
        html, body,
        .app, .hoofd, .login,
        #bootSpinner, .loading-overlay, .update-banner {
                                border-radius: 0 !important;
        }

        /* Extra ruimte onderaan op de Wegen-, Schema- en Berichten-tab, net als bij
           Mijn afspraken, zodat het laatste item niet half achter de tab-bar verdwijnt. */
        @media (max-width:900px){
            body.wegen-modus #kaartWegenLijst,
            body.training-modus #kaartTraining,
            body.berichten-modus #kaartBerichten{
                margin-bottom:120px;
            }
        }

/* ====================================================================
   TOEVOEGING — onderaan klantenportaal.css plakken (NA alle bestaande
   regels). Bevat drie nieuwe blokken:
     1. SKELETON-LOADERS    (shimmer-placeholders tijdens laden)
     2. OPTIMISTIC UI       (rij klapt direct om, mini-spinner)
     3. DONKERE MODUS       (html.kp-donker, automatisch via kp-ux.js)
   Plus: prefers-reduced-motion respecteren.
   ==================================================================== */

/* ============== 1. SKELETON-LOADERS ==============
   Shimmer-kaarten in de vorm van de echte content. JS (kp-navigatie.js)
   vult lijsten hiermee tot de server-data binnen is. */
.kp-skelet{
    position:relative;
    overflow:hidden;
    display:inline-block;
    background:rgba(15,23,42,.08);
    border-radius:8px;
}
.kp-skelet::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation:kpSkeletGlans 1.4s ease-in-out infinite;
}
@keyframes kpSkeletGlans{
    100%{ transform:translateX(100%); }
}
/* Skeleton-kaart: zelfde silhouet als les-kaart / bericht-rij / wegen-rij */
.kp-skelet-kaart{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    margin-bottom:10px;
    border:1px solid var(--rand);
    border-radius:18px;
    background:rgba(255,255,255,.94);
}
.kp-skelet-thumb{ width:46px; height:46px; border-radius:13px; flex-shrink:0; }
.kp-skelet-tekst{
    flex:1; min-width:0;
    display:flex; flex-direction:column; gap:8px;
}
.kp-skelet-r1{ height:14px; width:62%; }
.kp-skelet-r2{ height:11px; width:38%; }
.kp-skelet-pil{ width:74px; height:26px; border-radius:999px; flex-shrink:0; }
/* Skeleton-rij in de reservering-tabel: schakel de tabel/grid-layout uit
   zodat de kaarten op desktop EN mobiel netjes onder elkaar staan. */
tr.kp-skelet-rij,
tr.kp-skelet-rij td{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    animation:none !important;
    cursor:default !important;
}
tr.kp-skelet-rij{ padding:10px !important; }

/* ============== 2. OPTIMISTIC UI ==============
   De aangetikte rij/kaart klapt direct om naar de verwachte eindstaat
   (kp-reserveringen.js zet de classes); een zachte puls + mini-spinner
   maakt duidelijk dat de server-bevestiging nog onderweg is. */
tr.kp-optimistisch,
.les-kaart.kp-optimistisch{
    animation:kpOptimistischPuls 1.1s ease-in-out infinite !important;
}
@keyframes kpOptimistischPuls{
    0%, 100%{ opacity:1; }
    50%     { opacity:.72; }
}
.kp-mini-spinner{
    display:inline-block;
    width:18px; height:18px;
    border-radius:50%;
    border:2.5px solid rgba(15,23,42,.15);
    border-top-color:var(--primair);
    animation:draaiSpinner .7s linear infinite;
    vertical-align:middle;
}

/* ============== RUSTIGE MODUS (prefers-reduced-motion) ==============
   Gebruikers met 'verminder beweging' krijgen geen shimmer/puls en
   ingekorte overgangen. Goede toegankelijkheid, valt op bij app-review. */
@media (prefers-reduced-motion: reduce){
    .kp-skelet::after{ animation:none; }
    tr.kp-optimistisch,
    .les-kaart.kp-optimistisch{ animation:none !important; opacity:.8; }
    *, *::before, *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ============== 3. DONKERE MODUS ==============
   Actief via class 'kp-donker' op <html> (gezet door kp-ux.js: automatisch
   bij systeem-donker, handmatig via setDonkereModus). Alle merk-thema's
   (JT paars, USA rood, BodyFit petrol, ...) blijven gewoon werken: alleen
   de neutrale vlakken/teksten worden donker, de merkkleuren blijven staan.
   NB: de QR-kaart blijft bewust WIT — scanners hebben contrast nodig. */
html.kp-donker{
    --tekst:#e5e7eb;
    --tekst-zacht:#94a3b8;
    --rand:rgba(255,255,255,.10);
    --kaart:#1e293b;
    --achtergrond:#0f172a;
    --primair-zacht:rgba(var(--primair-rgb), .20);
    --glas:rgba(15,23,42,.60);
    --glas-sterker:rgba(15,23,42,.80);
    --glas-rand:rgba(255,255,255,.08);
    --schaduw:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --schaduw-md:0 4px 6px -1px rgba(0,0,0,.40), 0 2px 4px -1px rgba(0,0,0,.30);
    --schaduw-lg:0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -2px rgba(0,0,0,.30);
}
/* Dashboard-achtergrond in dark: zie het blok 'DARK MODE: VLOEIENDE
   ACHTERGROND (iOS-fix)' verderop — daar staat de definitieve versie
   met een fixed ::before-laag (background-attachment:fixed is op iOS
   onbetrouwbaar en gaf een harde band in het verloop). */
/* Kaarten: donker glas + donkere fallback */
html.kp-donker .kaart{
    background:var(--glas);
    border-color:var(--glas-rand);
    box-shadow:0 8px 32px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
}
@supports not (backdrop-filter: blur(1px)){
    html.kp-donker .kaart{ background:rgba(15,23,42,.95); }
}
html.kp-donker .kaart-kop{ border-bottom-color:rgba(255,255,255,.06); }
/* Tabel-kop */
html.kp-donker thead{
    background:linear-gradient(180deg,#16203a 0%,#101a30 100%);
    border-bottom-color:rgba(255,255,255,.10);
}
/* Reservering-rijen: donkere basis + subtiele status-tint
   (overschrijft de witte !important-basis verderop in dit bestand;
   dit blok staat LAGER en heeft hogere specificiteit, dus wint). */
html.kp-donker tbody tr{
    background:rgba(30,41,59,.92) !important;
}
html.kp-donker tbody tr:hover{
    background:
        linear-gradient(90deg, rgba(var(--primair-rgb),.10) 0%, rgba(var(--primair-rgb),.02) 70%),
        rgba(36,48,70,1) !important;
}
html.kp-donker tbody tr.rij-status-success{
    background:
        linear-gradient(90deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.02) 70%),
        rgba(30,41,59,.95) !important;
}
html.kp-donker tbody tr.rij-status-warning{
    background:
        linear-gradient(90deg, rgba(244,114,114,.13) 0%, rgba(244,114,114,.02) 70%),
        rgba(30,41,59,.95) !important;
}
html.kp-donker tbody tr.rij-status-error{
    background:
        linear-gradient(90deg, rgba(239,68,68,.15) 0%, rgba(239,68,68,.02) 70%),
        rgba(30,41,59,.92) !important;
}
html.kp-donker tbody tr.geselecteerd{
    background:
        linear-gradient(90deg, rgba(var(--primair-rgb),.26) 0%, rgba(var(--primair-rgb),.05) 70%),
        rgba(36,48,70,1) !important;
}
html.kp-donker tbody tr.rij-verstreken{
    background:rgba(17,24,39,.85) !important;
    opacity:.6;
}
/* Les-kaarten (mobiele kaart-modus) */
html.kp-donker .les-kaart{
    background:rgba(30,41,59,.95) !important;
    border-color:var(--rand);
}
html.kp-donker .les-kaart:not(.gereserveerd):not(.verstreken){
    background:
        linear-gradient(105deg, rgba(16,185,129,.12) 0%, rgba(30,41,59,1) 60%) !important;
    border-color:rgba(16,185,129,.25) !important;
}
html.kp-donker .les-kaart.gereserveerd{
    background:
        linear-gradient(105deg, rgba(244,114,114,.14) 0%, rgba(30,41,59,1) 60%) !important;
}
html.kp-donker .les-kaart.verstreken{
    background:rgba(17,24,39,1) !important;
}
/* Categorie-lijst hover (was lichtgrijs-blauw) */
html.kp-donker .categorie-item:hover{
    background:rgba(255,255,255,.06);
    color:var(--tekst);
}
/* Geselecteerde categorie in dark: lichte tekst i.p.v. de (vaak donkere)
   merkkleur var(--primair). Die kleur staat op --primair-zacht, dat in dark
   een DONKERE merk-tint is (rgba(brand,.20)) -> te weinig contrast, naam viel
   weg. De gekleurde achtergrond + rand houden de 'geselecteerd'-cue. */
html.kp-donker .categorie-item.actief,
html.kp-donker .categorie-item.actief:hover{
    color:var(--tekst);
    border-color:rgba(255,255,255,.55);   /* wit kader rond de selectie */
}
/* Datumkiezer in dark: zelfde leesbaarheids-fix als de categorielijst.
   Hover en 'vandaag' zetten var(--primair) (donkere merkkleur) als tekst op
   een donkere (tint/transparante) achtergrond -> onleesbaar. Lichte tekst, en
   een wit kader om de geselecteerde dag (consistent met de categorie). */
html.kp-donker .kalender-dag:hover:not(.leeg):not(.geselecteerd){
    background:rgba(255,255,255,.06);
    color:var(--tekst);
}
html.kp-donker .kalender-dag.vandaag:not(.geselecteerd){
    color:var(--tekst);
    border-color:rgba(255,255,255,.40);
}
/* Kalender: week-pillen en mobiele dag-cellen */
html.kp-donker .week-pil{ background:#1e293b; }
html.kp-donker .week-pil.vandaag:not(.actief){ background:#0f172a; }
html.kp-donker .week-pil-num{ color:var(--tekst); }
@media (max-width:900px){
    html.kp-donker .kalender-grid .kalender-dag{
        background:#1e293b;
        color:var(--tekst);
    }
}
/* Actie-balk + knoppen */
html.kp-donker .acties{
    background:rgba(15,23,42,.94);
    border-color:var(--rand);
}
html.kp-donker .knop{
    background:#1e293b;
    color:var(--tekst);
    border-color:rgba(255,255,255,.14);
}
html.kp-donker .knop:hover:not(:disabled){
    background:#273449;
    border-color:rgba(255,255,255,.22);
}
html.kp-donker .knop-sluit{
    background:#1e293b;
    border-color:rgba(255,255,255,.14);
}
/* Badges: donkere pastel-varianten */
html.kp-donker .badge-success{ background:rgba(16,185,129,.18); color:#6ee7b7; }
html.kp-donker .badge-error{   background:rgba(239,68,68,.20);  color:#fca5a5; }
html.kp-donker .badge-info{    background:rgba(var(--primair-rgb),.22); color:var(--primair-licht); }
html.kp-donker .badge.badge-reserveplek-vrij{  background:rgba(245,158,11,.16); color:#fbbf24; border-color:rgba(245,158,11,.5); }
html.kp-donker .badge.badge-reserveplek-bezet{
    background:rgba(239,68,68,.16) !important;
    color:#f87171 !important;
    border:1px solid rgba(239,68,68,.5) !important;
    margin-left:0 !important;
}
/* Loading / bevestiging / timeout dialogen: zie het blok
   'DARK MODE: DIALOGEN' aan het einde van dit bestand. */
/* Wegen-tab vlakken */
html.kp-donker .wegen-spark-cel{ background:#1e293b; }
html.kp-donker .wegen-spark-grid{ background:rgba(255,255,255,.08); }
html.kp-donker .wegen-rij{ background:#1e293b; }
html.kp-donker .wegen-rij.nieuwste{
    background:linear-gradient(135deg,#1e293b 0%, rgba(16,185,129,.12) 100%);
}
html.kp-donker .wegen-metriek{
    background:#0f172a;
    border-color:var(--rand);
}
html.kp-donker .wegen-legenda-knop{
    background:#1e293b;
    border-color:var(--rand);
}
/* Skeletons en mini-spinner op donker */
html.kp-donker .kp-skelet{ background:rgba(255,255,255,.08); }
html.kp-donker .kp-skelet::after{
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
html.kp-donker .kp-skelet-kaart{
    background:rgba(30,41,59,.92);
    border-color:var(--rand);
}
html.kp-donker .kp-mini-spinner{
    border-color:rgba(255,255,255,.15);
    border-top-color:var(--primair-licht);
}
/* Status-meldingen rechtsboven */
html.kp-donker .status-bar.success{ background:rgba(16,185,129,.16); color:#6ee7b7; border-color:rgba(16,185,129,.35); }
html.kp-donker .status-bar.error{   background:rgba(239,68,68,.16);  color:#fca5a5; border-color:rgba(239,68,68,.35); }
html.kp-donker .status-bar.info{    background:rgba(var(--primair-rgb),.18); color:var(--primair-licht); border-color:rgba(var(--primair-rgb),.40); }
/* Foutbanner: donkerrode variant */
html.kp-donker .fout-banner{
    background:linear-gradient(180deg, rgba(60,18,18,.92) 0%, rgba(45,12,12,.92) 100%);
    border-bottom-color:#ef4444;
}
html.kp-donker .fout-titel{ color:#fecaca; }
html.kp-donker .fout-bericht{ color:#fca5a5; }
html.kp-donker .fout-icoon{ background:rgba(239,68,68,.18); color:#fca5a5; }
/* Pincode-ontgrendelscherm */
html.kp-donker .ontgrendel-doos{ background:rgba(15,23,42,.97); }
html.kp-donker .ontgrendel-titel{ color:#e5e7eb; }
html.kp-donker .pin-toets{ background:#1e293b; color:#e5e7eb; }
/* QR-kaart: BEWUST wit laten (.qr-canvas-wrap) voor scanner-contrast.
   Alleen de uitleg-tekst leesbaar maken. */
html.kp-donker .qr-uitleg{ color:var(--tekst-zacht); }
html.kp-donker .qr-leeg{ color:var(--tekst-zacht); }
html.kp-donker .qr-info{ color:var(--tekst-zacht); }
html.kp-donker .qr-info b{ color:var(--tekst); }
/* Scrollbar van de categorie-lijst */
html.kp-donker .categorie-lijst::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18);
}

/* ============== ZWEVENDE GLAS-TABBAR (iOS 26-stijl) ==============
   De mobiele tab-bar wordt een losse, afgeronde pil die boven de content
   zweeft, met frosted-glass blur in de merk-kleur. De content scrolt er
   zichtbaar onderdoor. Vervangt de rand-tot-rand balk alleen op mobiel;
   desktop-zijbalk blijft ongewijzigd. Moet NA de eerdere border-radius:0
   !important-regels staan (zelfde belang, later = wint). */
@media (max-width:900px){
    .nav{
        left:max(14px, env(safe-area-inset-left)) !important;
        right:max(14px, env(safe-area-inset-right)) !important;
        bottom:calc(2px + env(safe-area-inset-bottom, 0px)) !important;
        min-height:60px !important;
        padding:6px !important;
        border-radius:999px !important;
        background:color-mix(in srgb, var(--secundair) 52%, transparent) !important;
        backdrop-filter:blur(28px) saturate(1.6) !important;
        -webkit-backdrop-filter:blur(22px) saturate(1.6) !important;
        border:1px solid rgba(255,255,255,.16) !important;
        box-shadow:0 10px 30px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18) !important;
        /* overflow:visible (was hidden) zodat de zwevende glas-bel (#kpTabLens)
           boven/buiten de pil mag uitsteken — dat is juist het zwevende
           effect. De afgeronde pil-hoeken blijven werken via border-radius;
           de bel is een los element dat de hoeken niet vult. */
        overflow:visible;
    }
    /* Oudere WebViews zonder backdrop-filter: nette opaque merk-kleur */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
        .nav{ background:var(--secundair) !important; }
    }
    /* Knoppen: gecentreerd in de pil, actieve tab krijgt een eigen
       licht pil-vlak (zoals de iOS 26 tab-bar) */
    .nav .nav-knop{
        justify-content:center !important;
        padding:6px 4px 7px !important;
        min-height:46px;
        gap:3px;
        border-radius:999px !important;
    }
    .nav .nav-knop.actief{
        background:rgba(255,255,255,.16) !important;
        /* De inset 3px-rode balk (box-shadow uit het desktop-zijbalk-blok,
           bedoeld als verticale indicator) verscheen op de RONDE mobiele pil
           als een rode boog links naast de glas-bel. Op mobiel uitzetten. */
        box-shadow:none !important;
    }
    /* Actie-balk (Reserveer/Annuleer) meeverhuizen: zelf ook een zwevende
       afgeronde kaart, netjes boven de glas-pil */
    .acties{
        left:max(14px, env(safe-area-inset-left)) !important;
        right:max(14px, env(safe-area-inset-right)) !important;
        bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius:18px !important;
        border:1px solid var(--rand) !important;
    }
    .acties.verborgen{
        transform:translateY(180%) !important;
    }
}
/* Donkere modus: iets zachtere rand zodat de pil niet 'oplicht' */
html.kp-donker .nav{
    border-color:rgba(255,255,255,.10) !important;
}

/* ============== DARK MODE: VLOEIENDE ACHTERGROND (iOS-fix) ==============
   background-attachment:fixed werkt niet betrouwbaar op iOS en geeft een
   harde band in het verloop, zichtbaar door de glas-kaarten heen. Daarom:
   effen basis op .app zelf, en het verloop op een fixed ::before-laag die
   altijd exact de viewport vult — vloeiend, ongeacht scrollen of hoogte. */
html.kp-donker .app{
    background:#0b1220 !important;
    background-attachment:scroll !important;
}
html.kp-donker .app::before{
    content:"";
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(1100px 700px at 85% -10%,
            color-mix(in srgb, var(--primair) 16%, transparent) 0%, transparent 60%),
        radial-gradient(900px 600px at -10% 110%,
            color-mix(in srgb, var(--secundair) 22%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, #131c31 0%, #0b1220 100%);
}
/* Kaarten iets dekkender in donker: voorkomt dat het onderliggende verloop
   als naad door het glas heen zichtbaar wordt */
html.kp-donker .kaart{
    background:rgba(17,26,43,.88);
}

/* ============== DARK MODE: FOTO-PLATEN TRAININGSSCHEMA ==============
   De oefening-afbeeldingen hebben een ingebakken witte achtergrond.
   In plaats van een hard wit vlak: een zacht getinte 'foto-plaat' met
   mix-blend-mode:multiply op de afbeelding — witte pixels versmelten
   met de plaat, waardoor de foto uitgeknipt lijkt. */
html.kp-donker .training-thumb,
html.kp-donker .training-detail-afb{
    background:linear-gradient(160deg, #e8edf5 0%, #d6deeb 100%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}
html.kp-donker .training-thumb img,
html.kp-donker .training-detail-afb img{
    mix-blend-mode:multiply;
}

/* Chips en serie-badge leesbaar op donker */
html.kp-donker .training-chip{
    background:rgba(var(--primair-rgb), .22);
    color:var(--primair-licht);
}
html.kp-donker .training-serie{
    background:rgba(var(--primair-rgb), .22);
    color:var(--primair-licht);
}
html.kp-donker .training-dag-aantal{
    background:rgba(255,255,255,.08);
    color:var(--tekst-zacht);
}

/* ============== MODERNE CONTENT-ACHTERGROND (lichte modus) ==============
   Vervangt het vlakke witte vlak door een 'aurora': zachte merk-kleurige
   vlekken op een licht verloop, geschilderd op een fixed laag (werkt ook
   vloeiend op iOS, i.t.t. background-attachment:fixed). De glas-kaarten
   krijgen hierdoor zichtbaar hun blur-karakter terug. */
html:not(.kp-donker) .app{
    background:#f6f8fb !important;
    background-attachment:scroll !important;
}
html:not(.kp-donker) .app::before{
    content:"";
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(950px 650px at 85% -10%,
            color-mix(in srgb, var(--primair) 16%, transparent) 0%, transparent 60%),
        radial-gradient(850px 650px at -10% 110%,
            color-mix(in srgb, var(--secundair) 14%, transparent) 0%, transparent 55%),
        radial-gradient(700px 500px at 55% 115%,
            color-mix(in srgb, var(--primair-licht) 14%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #edf1f7 100%);
}

/* Subtiele korrel over beide modi: geeft het vlak textuur/diepte en
   maskeert kleurbanden in de verlopen. Bijna onzichtbaar (4% opacity),
   maar het verschil met 'plat' is direct voelbaar. */
.app::after{
    content:"";
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:-1;
    pointer-events:none;
    opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.kp-donker .app::after{
    opacity:.06;
}
/* ============== DARK MODE: BASISLAGEN ==============
   Alle schermvullende lagen (html, body, .app, .hoofd) op dezelfde
   diepe basiskleur, zodat nergens een lichte laag doorschemert
   (safe-areas, overscroll, achter de glas-tabbar). */
html.kp-donker,
html.kp-donker body,
html.kp-donker body.app-actief,
html.kp-donker .app,
html.kp-donker .hoofd{
    background:#0b1220 !important;
}

/* ============== DARK MODE: GESELECTEERDE DAG ZICHTBAAR (fix) ==============
   De donkere dag-achtergrond won per ongeluk van de selectie-stijl.
   Hier krijgen geselecteerd en vandaag hun merk-kleur expliciet terug. */
@media (max-width:900px){
    html.kp-donker .kalender-grid .kalender-dag.geselecteerd{
        background:linear-gradient(135deg, var(--primair) 0%, var(--primair-licht) 100%) !important;
        color:#fff !important;
        box-shadow:0 6px 14px rgba(var(--primair-rgb), .45);
    }
    html.kp-donker .kalender-grid .kalender-dag.vandaag:not(.geselecteerd){
        background:rgba(var(--primair-rgb), .22);
        color:var(--primair-licht);
    }
}
/* Week-pillen (moderne look) */
html.kp-donker .week-pil.actief{
    background:linear-gradient(135deg, var(--primair) 0%, var(--secundair) 100%) !important;
}
html.kp-donker .week-pil.actief .week-pil-num{ color:#fff; }
html.kp-donker .week-pil.actief .week-pil-dag{ color:rgba(255,255,255,.85); }
/* Desktop maand-grid voor de zekerheid ook expliciet */
html.kp-donker .kalender-dag.geselecteerd{
    background:var(--primair) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.55) !important;   /* wit kader rond de selectie */
}

/* ============== DARK MODE: DIALOGEN (bevestiging + loading) ============== */
html.kp-donker .bevestig-doos{
    background:#1e293b;
    box-shadow:0 20px 60px rgba(0,0,0,.55);
}
html.kp-donker .bevestig-details{
    background:#0f172a;
    border-color:rgba(255,255,255,.10);
}
html.kp-donker .bevestig-overlay{
    background:rgba(2,6,16,.65);
}
html.kp-donker .loading-doos,
html.kp-donker .loading-doos.timeout{
    background:#1e293b;
    box-shadow:0 12px 32px rgba(0,0,0,.5);
}
html.kp-donker .loading-spinner{
    border-color:rgba(255,255,255,.14);
    border-top-color:var(--primair-licht);
}
html.kp-donker .loading-timeout-titel{ color:var(--tekst); }

/* ============== DARK MODE: --primair-zacht corrigeren (fix) ==============
   De thema-blokken (:root[data-thema=...]) definieren --primair-zacht als
   een lichte pasteltint en winnen qua specificiteit van html.kp-donker.
   Daardoor bleven selectie-/hover-vlakken (berichten, categorieen, kalender,
   chips) bijna wit in donkere modus. Deze regel weegt zwaarder en maakt er
   in dark een doorzichtige merktint van — werkt voor alle thema's. */
:root.kp-donker[data-thema]{
    --primair-zacht: rgba(var(--primair-rgb), .22);
}


/* ============== TAB-BAR: LIQUID LENS - SLEEP-MODUS ==============
   Aanvulling op het LIQUID LENS-blok: maakt het vinger-volgen mogelijk.
   touch-action:none op de balk zorgt dat pointermove blijft streamen op
   touch; .sleep schakelt de veer op de positie uit zodat de bel de
   vinger direct volgt (kp-ux.js zet die class tijdens het slepen). */
@media (max-width:900px){
    .nav{ touch-action:none; }

    #kpTabLens{
        transition:left .5s cubic-bezier(.22, 1.5, .36, 1),
                   transform .3s cubic-bezier(.22, 1.5, .36, 1),
                   opacity .25s ease;
    }
    #kpTabLens.sleep{
        transition:transform .1s ease-out, opacity .2s ease;
    }
    .nav .nav-knop{
        transition:transform .3s cubic-bezier(.22, 1.3, .36, 1);
    }
}


/* ============== TAB-BALK IN LICHTE MODUS OPGEKNAPT ==============
   In lichte modus is --secundair licht, waardoor de witte iconen/tekst van
   de mobiele tab-balk slecht leesbaar werden (bleke balk op tablet). We geven
   de balk in LICHTE modus daarom een eigen, goed contrasterende look: lichte
   pil met donkere/grijze tekst en de merkkleur voor de actieve tab. In donkere
   modus (html.kp-donker) blijft de bestaande glas-tabbar ongemoeid. */
@media (max-width:900px){
    html:not(.kp-donker) .nav{
        background:color-mix(in srgb, #ffffff 82%, var(--primair-zacht)) !important;
        border:1px solid rgba(15,23,42,.08) !important;
        box-shadow:0 8px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06) !important;
    }
    html:not(.kp-donker) .nav .nav-knop{
        color:#64748b;
    }
    html:not(.kp-donker) .nav .nav-knop svg{
        opacity:.9;
    }
    html:not(.kp-donker) .nav .nav-knop.actief{
        background:rgba(var(--primair-rgb),.12) !important;
        color:var(--primair);
    }
    html:not(.kp-donker) .nav .nav-knop.actief svg{
        color:var(--primair);
    }
}

/* ═══════ INLOGSCHERM = NATIVE "VERBINDEN"-LOOK ═══════
   Strakke, neutrale donkere diagonale gradient i.p.v. foto/thema-cirkels,
   zodat het web-inlogscherm naadloos aansluit op het native opstartscherm.
   Twee tunebare kleuren: pas --verbinden-licht (linksboven) en
   --verbinden-donker (rechtsonder) aan voor een exacte match. */
:root{
    --verbinden-licht:  #2a2f3a;   /* koele donkergrijs-blauw, linksboven */
    --verbinden-midden: #181b22;   /* tussenstop */
    --verbinden-donker: #0a0b0f;   /* bijna zwart, rechtsonder */
}
body.login-actief:not(.login-met-foto) .login{
    background:
        radial-gradient(130% 90% at 22% 16%, rgba(255,255,255,.06) 0%, transparent 55%),
        linear-gradient(145deg,
            var(--verbinden-licht)  0%,
            var(--verbinden-midden) 48%,
            var(--verbinden-donker) 100%) !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}
/* Geen decoratieve thema-cirkels op het inlogscherm — clean zoals Verbinden. */
body.login-actief  .login::before,
body.login-actief  .login::after,
body.login-met-foto .login::before,
body.login-met-foto .login::after{
    opacity:0 !important;
}
/* Body-rand donker zodat er geen kleursprong naast de gradient zichtbaar is
   (o.a. onder de iOS safe-area). */
body.login-actief{
    background:var(--verbinden-donker) !important;
    background-color:var(--verbinden-donker) !important;
}



/* Status-badge gereserveerd: doorzichtig, zonder stip */
.badge-warning{
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    box-shadow: none !important;
    margin-left: 25px !important;
}
.badge-warning::before{ display: none !important; }
html.kp-donker .badge-warning{
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    margin-left: 25px !important;
}

/* Afspraak-kaart op mobiel: uitlijning, knoppen ONDER elkaar, badge rustiger */
@media (max-width:900px){
    .reservering-tabel tbody tr td.cel-tijd{ align-self: baseline !important; }
    .reservering-tabel tbody tr td.cel-datum{
        align-self: baseline !important;
        padding: 0 0 0 5px !important;
    }
    .reservering-tabel tbody tr{
        align-items: start !important;
        padding-top: 10px !important;
    }
    .reservering-tabel tbody tr td.cel-tegel{ align-self: center !important; }

    /* Status-badge "gereserveerd": strak rechtsboven, iets hoger/luchtiger,
       eigen kolom — valt zo niet meer over de datum. */
    .reservering-tabel tbody tr td.cel-status{
        grid-column: 4 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
    }
    .reservering-tabel tbody tr td.cel-status .badge{
        width: auto !important;
        max-width: 120px !important;
        padding: 7px 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
    }

    /* Actieknoppen als volle-breedte rij onderaan, ONDER elkaar. Haalt tegelijk
       de 4e kolom weg, zodat datum en badge bovenin niet meer botsen. */
    .reservering-tabel tbody tr td.cel-actie{
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        justify-self: stretch !important;
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 10px !important;
        margin-top: 6px !important;
        border-top: 1px solid var(--rand) !important;
        text-align: center !important;
    }
    .reservering-tabel tbody tr td.cel-actie .rij-knop{
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
}

/* COMPED-KLEUREN:START — beheerd door de kleurtool, niet handmatig wijzigen */
/* Light mode */
.reservering-tabel td.cel-tijd{ color:#000505 !important; }
.reservering-tabel td.cel-datum{ color:#142033 !important; }
.reservering-tabel td.cel-categorie{ color:#142033 !important; }
.reservering-tabel td.cel-locatie{ color:#000000 !important; }

.rij-knop-reserveer{
    background:linear-gradient(135deg,#50f2b4 0%,#26f7ab 100%);
    box-shadow:0 2px 6px rgba(80,242,180,.22);
    color:#000000;
}
.rij-knop-reserveer:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(80,242,180,.32);
}
.rij-knop-annuleer{
    background:linear-gradient(135deg,#ff9494 0%,#fe6262 100%);
    box-shadow:0 2px 6px rgba(255,148,148,.22);
    color:#000000;
}
.rij-knop-annuleer:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(255,148,148,.32);
}
.rij-knop-verplaats{
    background:linear-gradient(135deg,#95c1f3 0%,#89bcfb 100%);
    box-shadow:0 2px 6px rgba(149,193,243,.22);
    color:#000000;
}
.rij-knop-verplaats:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(149,193,243,.32);
}

/* Dark mode */
html.kp-donker .reservering-tabel td.cel-tijd{ color:#f5fffc !important; }
html.kp-donker .reservering-tabel td.cel-datum{ color:#f2f2f2 !important; }
html.kp-donker .reservering-tabel td.cel-categorie{ color:#ffffff !important; }
html.kp-donker .reservering-tabel td.cel-locatie{ color:#f7eded !important; }

html.kp-donker .rij-knop-reserveer{
    background:linear-gradient(135deg,#639c85 0%,#6dba9e 100%);
    box-shadow:0 2px 6px rgba(99,156,133,.22);
    color:#fffafa;
}
html.kp-donker .rij-knop-reserveer:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(99,156,133,.32);
}
html.kp-donker .rij-knop-annuleer{
    background:linear-gradient(135deg,#bf8d8d 0%,#c07272 100%);
    box-shadow:0 2px 6px rgba(191,141,141,.22);
    color:#ffffff;
}
html.kp-donker .rij-knop-annuleer:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(191,141,141,.32);
}
html.kp-donker .rij-knop-verplaats{
    background:linear-gradient(135deg,#5e7ea1 0%,#6e8eb4 100%);
    box-shadow:0 2px 6px rgba(94,126,161,.22);
    color:#fffafa;
}
html.kp-donker .rij-knop-verplaats:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(94,126,161,.32);
}

/* COMPED-KLEUREN:EINDE */

/* ===== CREDITS-VELD (boven de eigen-afspraken-lijst) ===== */
/* Apart kaartje dat het aantal beschikbare credits toont (bv. "Aantal
   Reformer Pilates credits: 1"). De rij zelf wordt door kp-reserveringen.js
   uit de afsprakenlijst gefilterd; hier alleen de weergave. */
.kp-credits-veld{
    margin:0 0 18px;
    padding:18px 20px;
    border-radius:18px;
    /* Zelfde neutrale kaart-achtergrond als de les-kaarten (GEEN merk-tint),
       zodat het rustig en consistent oogt op de donkere achtergrond. De
       merk-kleur zit alleen nog in de badge rechts. Kader = standaard kaartrand
       + diepte-schaduw + subtiele highlight bovenin. */
    background:var(--kaart);
    border:1px solid var(--rand);
    box-shadow:0 12px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
    display:flex; flex-direction:column; gap:14px;
}
.kp-credits-regel{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.kp-credits-label{
    /* Mag krimpen i.p.v. de cel uit te lopen; schaalt mee met de schermbreedte
       en wrapt netjes als één regel echt niet past — zo wordt de tekst nooit
       afgekapt. JS (pasCreditsLabelGrootte) verkleint indien nodig nog verder
       tot het binnen 2 regels valt. */
    flex:1 1 auto; min-width:0;
    font-weight:700;
    font-size:clamp(11px, 3.4vw, 18px);
    letter-spacing:.2px; line-height:1.3;
    color:var(--tekst);
    overflow-wrap:break-word;
    text-wrap:balance;            /* nette 2-regel-verdeling i.p.v. los "credits" */
}
.kp-credits-waarde{
    flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:50px; height:50px; padding:0 16px;
    border-radius:999px;
    font-weight:800; font-size:24px; line-height:1;
    color:#fff;
    background:linear-gradient(135deg, var(--primair), var(--secundair));
    box-shadow:0 6px 16px rgba(var(--primair-rgb),.45);
}
/* ===== CREDITS-VELD:EINDE ===== */

/* ════════════════════════════════════════════════════════════════
   MOBIEL: voorkom dat de hele pagina zijwaarts schuift.
   De scroll-root (.app, position:fixed; width:100vw) had geen overflow-x,
   waardoor brede inhoud (tabellen/lijsten op de categorie-, mijn-afspraken-
   en wegen-tab) de hele app zijwaarts liet verschuiven. Op smal scherm kappen
   we horizontaal af. De datum-kalender mag intern blijven scrollen i.p.v.
   geklipt te worden.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
    .app{ overflow-x:hidden; }

    /* Datum-kalender: eigen interne horizontale scroll, wordt dus niet door de
       overflow-x:hidden van .app afgekapt. */
    #kaartKalender{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}