@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    --bg: #F7F8FA;
    --kaart: #FFFFFF;
    --rand: #E2E5EA;
    --tekst: #1F2430;
    --tekst-zwak: #6B7280;
    --accent: #2A6F6F;
    --accent-donker: #1E5252;
    --actief: #E8A33D;
    --fout: #C0392B;
    /* Groen voor "dit gaat goed". Ontbrak, waardoor tekst die deze kleur
       gebruikte helemaal geen kleur kreeg en wegviel tegen de achtergrond. */
    --goed: #1A7F6B;
}

body.thema-donker {
    --bg: #14181F;
    --kaart: #1C222C;
    --rand: #2C3441;
    --tekst: #E7EAF0;
    --tekst-zwak: #9AA3B2;
    --actief: #E8A33D;
    --fout: #E5695C;
    --goed: #4FC3A1;
}

/* Grijs: rustiger dan wit, lichter dan het donkere thema. Prettig bij fel
   licht in de werkplaats, waar wit gaat spiegelen op een tablet. */
body.thema-grijs {
    --bg: #E8EAED;
    --kaart: #F5F6F8;
    --rand: #C9CDD4;
    --tekst: #22262E;
    --tekst-zwak: #5C636E;
    --actief: #B77A19;
    --fout: #B3382A;
    --goed: #1A7F6B;
}

/* Warm grijs met een bruine ondertoon; minder klinisch dan het koele grijs. */
body.thema-warmgrijs {
    --bg: #E9E6E1;
    --kaart: #F6F4F1;
    --rand: #CFC9C1;
    --tekst: #2A2621;
    --tekst-zwak: #635C52;
    --actief: #B07B1E;
    --fout: #B3382A;
    --goed: #1A7F6B;
}

/* --- Lettergrootte -------------------------------------------------------
   De opmaak gebruikt op veel plekken vaste pixelmaten. Alleen de basisgrootte
   veranderen zou dus maar de helft van de tekst raken. Met zoom schaalt alles
   evenredig mee: tekst, knoppen, invoervelden en de ruimte ertussen.
   Ondersteund door alle browsers die er in de werkplaats toe doen. */
body.tekst-groot { zoom: 1.15; }
body.tekst-extra_groot { zoom: 1.3; }

/* --- Hoog contrast -------------------------------------------------------
   Voor fel licht of een stoffig scherm. Randen worden donkerder en dikker,
   zwakke tekst wordt minder zwak. Oogt harder, maar dat is hier het doel. */
body.hoog-contrast {
    --rand: #7A828E;
    --tekst-zwak: #3C424C;
}
body.hoog-contrast.thema-donker {
    --rand: #6B7686;
    --tekst-zwak: #C3CAD6;
}
body.hoog-contrast .kaart,
body.hoog-contrast table,
body.hoog-contrast input,
body.hoog-contrast select,
body.hoog-contrast textarea { border-width: 2px; }
body.hoog-contrast .subtitel { color: var(--tekst-zwak); }
body.hoog-contrast .badge { font-weight: 700; }

body.accent-blauw { --accent: #1E5FA8; --accent-donker: #164378; }
body.accent-oranje { --accent: #C2691D; --accent-donker: #914E15; }
body.accent-paars { --accent: #6A4C93; --accent-donker: #4E3670; }
body.accent-rood { --accent: #B33A3A; --accent-donker: #8A2C2C; }
body.accent-teal { --accent: #1B8A8A; --accent-donker: #146868; }
body.accent-roze { --accent: #C24D7E; --accent-donker: #9C3A62; }
body.accent-geel { --accent: #B8860B; --accent-donker: #8F6908; }
body.accent-grijs { --accent: #566270; --accent-donker: #3E4854; }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--tekst);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;

    /* De schuifbalk van de pagina in de accentkleur. Iets breder dan die van
       het menu: deze gebruik je de hele dag en moet je kunnen pakken. */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 10px; height: 10px; }

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: transparent; }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
    /* Een randje in de paginakleur houdt hem slank; zonder dit plakt hij
       tegen de rand van het scherm. */
    border: 2px solid var(--bg);
    background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover { background: var(--accent-donker); background-clip: padding-box; }

.layout { display: flex; min-height: 100vh; }

.zijbalk {
    width: 244px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 160px),
        var(--accent-donker);
    color: #fff;
    padding: 18px 10px 22px;
    flex-shrink: 0;
    max-height: 100vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: 8px 0 26px rgba(9,18,24,0.08);

    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.22) transparent;
}

/* Een rustige, smalle scrollbar die niet om aandacht vraagt. */
.zijbalk::-webkit-scrollbar { width: 5px; }
.zijbalk::-webkit-scrollbar-track { background: transparent; }
.zijbalk::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
}
.zijbalk::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); }

/* Logo als eigen kaartje: rustiger en netter uitgelijnd. */
.zijbalk .logo {
    padding: 6px 10px 18px;
    display: flex;
    justify-content: center;
}

.zijbalk .logo a {
    display: block !important;
    width: 100%;
}

.zijbalk .logo img {
    display: block;
    width: 100%;
    max-width: 196px !important;
    max-height: 74px !important;
    object-fit: contain;
    margin: 0 auto;
    background: #fff;
    border-radius: 11px;
    padding: 9px 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.14);
}

.zijbalk nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zijbalk nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin: 0 2px;
    padding: 10px 12px 10px 15px;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}

.zijbalk nav a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: var(--actief);
    transform: translateY(-50%);
    transition: height .16s ease;
}

.zijbalk nav a:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
    transform: translateX(2px);
}

.zijbalk nav a.actief-link {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 16px rgba(0,0,0,0.08);
}

.zijbalk nav a.actief-link::before { height: 24px; }

.zijbalk .menu-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zijbalk .menu-teller {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #B26A00;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

.zijbalk .menu-teller.dringend {
    background: #B3382A;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 12px rgba(179,56,42,0.26);
}

.zijbalk .gebruiker-info {
    padding: 20px 24px 0;
    font-size: 13px;
    color: #B7CAC7;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 20px;
}

.hoofd-omslag {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 40px;
    background: var(--kaart);
    border-bottom: 1px solid var(--rand);
}

.zoekbalk {
    width: 100%;
    max-width: 600px;
    padding: 9px 14px;
    border: 1px solid var(--rand);
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    background: var(--bg);
}

.topbalk-gebruiker {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.topbalk-gebruiker-tekst {
    text-align: right;
    line-height: 1.3;
    font-size: 13px;
}

.topbalk-gebruiker-tekst strong { display: block; font-size: 14px; }
.topbalk-gebruiker-tekst span { color: var(--tekst-zwak); }

.hoofd {
    flex: 1;
    padding: 32px 40px;
    max-width: 1100px;
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.subtitel { color: var(--tekst-zwak); margin: 0 0 28px; font-size: 14px; }

.kaart {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.tabel-venster {
    max-height: 268px;
    overflow-y: auto;
    /* De schuifbalk hoort bij dit venster, niet bij de kaart eromheen.
       Anders heeft de vastgezette actiekolom geen rand om aan te blijven
       hangen en schuift hij gewoon mee weg. */
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: 8px;
}
.tabel-venster table { margin: 0; }
/* Rapportagelijsten worden al snel honderden regels lang. Een ruimer venster
   dan de standaard 268px leest prettiger: je ziet een flink stuk in een keer,
   maar de pagina eronder blijft bereikbaar zonder eindeloos te scrollen.
   Op een korte lijst krimpt het venster gewoon mee, want max-height is een
   bovengrens en geen vaste hoogte. */
.tabel-venster-groot {
    max-height: 65vh;
}

.tabel-venster thead th {
    position: sticky;
    top: 0;
    background: var(--kaart);
    z-index: 1;
}

/* Een schuifvenster voor lijsten die geen tabel zijn, zoals de kaarten bij
   "Recent goedgekeurd". Wat extra ruimte rechts en onder, zodat de rand van
   de laatste kaart niet tegen de schuifbalk aan plakt. */
.lijst-venster {
    max-height: 60vh;
    overflow-y: auto;
    padding: 2px 8px 2px 2px;
}

/* De totaalregels blijven onderaan het schuifvenster staan. Zonder dit moet
   je eerst honderden regels langs voordat je ziet waar je op uitkomt, en dat
   totaal is meestal juist het eerste wat je wilt weten.
   De achtergrond is nodig omdat de regels anders doorzichtig over de tabel
   heen liggen; de bovenrand markeert waar de lijst ophoudt. */
.tabel-venster tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--kaart);
    border-top: 2px solid var(--rand);
    z-index: 1;
}
/* Staat een cel zowel onderaan als rechts vast, dan moet hij boven de andere
   twee liggen -- anders schuift er tekst overheen in de hoek. */
.tabel-venster tfoot td.duur-vast {
    z-index: 3;
}

/* De Duur-kolom in de urenrapportage blijft rechts staan. Zonder dit valt
   juist de kolom met de getallen buiten beeld zodra de tabel breder is dan
   het scherm -- en dan zie je bij "Totaal gewerkt" wel het label maar niet
   het aantal uren, wat het hele overzicht nutteloos maakt. */
.tabel-venster th.duur-vast,
.tabel-venster td.duur-vast {
    position: sticky;
    right: 0;
    background: var(--kaart);
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25);
}
/* De kop van die kolom moet zowel bovenaan als rechts blijven hangen, dus
   die heeft een hogere z-index nodig dan de gewone koppen. */
.tabel-venster thead th.duur-vast {
    z-index: 2;
}
/* Een actiekolom die blijft staan als de tabel breder is dan het scherm.
   Zonder dit verdwijnen knoppen als "Deactiveren" achter de rechterrand en
   moet je eerst opzij scrollen om ergens op te kunnen klikken. */
.tabel-venster th.actie-vast,
.tabel-venster td.actie-vast {
    position: sticky;
    right: 0;
    background: var(--kaart);
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
/* De kop van die kolom staat zowel bovenaan als rechts vast en moet dus
   boven de rest van de koprij liggen. */
.tabel-venster thead th.actie-vast { z-index: 2; }

/* De acties onder elkaar in plaats van doorlopend, zodat ze niet
   midden in een woord afbreken. */
.tabel-venster td.actie-vast .actie-stapel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Voor lijsten waar je er meer in één keer wilt zien, zoals de weekstaten.
   Ruim tien regels; de rest bereik je met de schuifbalk. */
.tabel-venster.hoog {
    max-height: 720px;
}

/* Op een telefoon geen eigen schuifgebied: dat vangt de veegbeweging op en
   dan scrollt de pagina niet meer verder. De tabel loopt gewoon mee. */
@media (max-width: 700px) {
    .tabel-venster.hoog { max-height: none; overflow-y: visible; }
}

/* De spelpagina's zetten hun indeling zelf in de stijl van het element, maar
   die blijft op een telefoon staan en drukt het speelveld plat. Beide namen
   staan hier, want de spellen gebruiken 'spel-indeling' en er was al een
   'spel-layout' voor hetzelfde doel. */
.spel-layout,
.spel-indeling {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

.timer-kaart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.timer-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 40px;
    font-weight: 700;
    color: var(--accent-donker);
    font-variant-numeric: tabular-nums;
}

.timer-display.actief { color: var(--actief); }

.timer-omschrijving { color: var(--tekst-zwak); font-size: 14px; margin-top: 4px; }

.knop {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 7px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.knop:hover { background: var(--accent-donker); }
.knop.stop { background: var(--fout); }
.knop.stop:hover { background: #9C2B1F; }
.knop.secundair { background: transparent; color: var(--accent-donker); border: 1px solid var(--rand); }
.knop.secundair:hover { background: #F0F2F4; }
body.thema-donker .knop.secundair:hover { background: #262E3A; }
.knop.klein { padding: 6px 12px; font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rand); }
th { color: var(--tekst-zwak); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
td.tijd, th.tijd { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

form.formulier { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.formulier label { font-weight: 500; font-size: 13px; color: var(--tekst-zwak); display: block; margin-bottom: 4px; }
.formulier input, .formulier select, .formulier textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.formulier-rij { display: flex; gap: 12px; }
.formulier-rij > div { flex: 1; }

.melding { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 18px; }
.melding.fout { background: #FBE9E7; color: var(--fout); }
.melding.succes { background: #E4F0EE; color: var(--accent-donker); }
body.thema-donker .melding.fout { background: #3A2422; color: var(--fout); }
body.thema-donker .melding.succes { background: #1E332F; color: #6FCF97; }

.login-omslag {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-donker);
}

.login-kaart {
    background: #fff;
    padding: 36px;
    border-radius: 10px;
    width: 100%;
    max-width: 340px;
}
body.thema-donker .login-kaart { background: var(--kaart); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.badge.inactief { background: #EEE; color: var(--tekst-zwak); }
.badge.actief { background: #E4F0EE; color: var(--accent-donker); }
body.thema-donker .badge.inactief { background: #2C3441; color: var(--tekst-zwak); }
body.thema-donker .badge.actief { background: #1E332F; color: #6FCF97; }

.actie-links { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.actie-links a { font-size: 13px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.actie-links a:hover { text-decoration: underline; }

.filter-balk { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.filter-balk label { font-size: 13px; color: var(--tekst-zwak); display: block; margin-bottom: 4px; }
.filter-balk input, .filter-balk select { padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; }

.totaal-rij { font-weight: 700; }

.planning-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.planning-weeknav-nav, .planning-weeknav-acties { display: flex; gap: 8px; }
.planning-scroll { overflow-x: auto; }
.planning-tabel { min-width: 900px; table-layout: fixed; }
.planning-tabel th:first-child, .planning-tabel td:first-child { width: 140px; }
.planning-datum { color: var(--tekst-zwak); font-weight: 400; font-size: 12px; }
.planning-cel { vertical-align: top; padding: 6px !important; transition: background 0.1s; }
.planning-cel-drop-hover { background: var(--rand) !important; outline: 2px dashed var(--accent); outline-offset: -2px; }
.planning-blok-slepen { opacity: 0.4; }
.planning-blok {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 6px 20px 6px 8px;
    margin-bottom: 4px;
    font-size: 12px;
    cursor: pointer;
}
.planning-blok:hover { background: var(--rand); }
.planning-blok span { display: block; font-weight: 600; }
.planning-blok small { color: var(--tekst-zwak); display: block; }
.planning-blok a {
    position: absolute;
    top: 4px;
    right: 6px;
    color: var(--tekst-zwak);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}
.planning-blok a:hover { color: var(--fout); }

.hamburger-knop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.hamburger-knop span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tekst);
    border-radius: 2px;
}

.mobiel-overlay {
    display: none;
}

@media (max-width: 860px) {
    .hamburger-knop { display: flex; }

    .zijbalk {
        position: fixed;
        top: 0;
        left: 0;

        /* Op een telefoon telt de adresbalk mee in 100vh. Het onderste stuk
           van het menu valt daar dan achter, en omdat de browser vindt dat
           alles "past" komt er geen schuifbalk -- je kunt er dus niet bij.
           Met dvh rekent hij met de werkelijk zichtbare hoogte.

           De 90vh eronder is de terugval voor browsers die dvh niet kennen:
           liever iets te weinig hoogte, want dan kun je tenminste schuiven. */
        height: 90vh;
        height: 100dvh;
        max-height: 100dvh;

        width: 272px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        overflow-y: auto;

        /* Ruim genomen: op sommige telefoons komt er onderaan nog een
           systeembalk of een uitschuivende adresbalk overheen. Te veel ruimte
           merk je niet, te weinig betekent dat je bij de laatste knop niet
           kunt. Ook de veilige zone van het toestel zelf meenemen. */
        -webkit-overflow-scrolling: touch;
    }

    /* Het menu telt vijftien onderdelen en past op een telefoon niet in één
       keer. Schuiven kan, maar hoe minder dat nodig is hoe beter. Daarom hier
       een kleiner logo en minder ruimte eromheen.

       De menuknoppen zelf blijven op volle grootte: onder de 44 pixels mis je
       ze met een duim, en dat is erger dan een keer moeten schuiven. */
    .zijbalk { padding: 12px 8px calc(160px + env(safe-area-inset-bottom, 0px)); }
    .zijbalk .logo {
        padding: 2px 8px 10px;
    }
    .zijbalk .logo img {
        max-height: 46px !important;
        width: auto;
    }
    /* Duimformaat afdwingen: onder de 44 pixels mis je knoppen structureel. */
    .zijbalk nav a {
        min-height: 44px;
        box-sizing: border-box;
    }
    body.zijbalk-open .zijbalk {
        transform: translateX(0);
    }

    .mobiel-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    body.zijbalk-open .mobiel-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .hoofd-omslag { width: 100%; }
    .hoofd { padding: 16px; max-width: none; }

    .topbalk { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
    .zoekbalk { max-width: none; }
    .topbalk-gebruiker-tekst { display: none; }

    form.formulier { max-width: none; }
    /* Velden onder elkaar op een smal scherm. Een kleinere tussenruimte dan
       op een pc: naast elkaar heb je die ruimte nodig om de kolommen te
       scheiden, onder elkaar maakt hij het alleen maar langer. */
    .formulier-rij { flex-wrap: wrap; gap: 4px; }
    .formulier-rij > div { flex: 1 1 100%; min-width: 0; }

    /* Op een pc staan de velden naast elkaar en heb je die 14 pixels nodig om
       de rijen te scheiden. Onder elkaar tellen ze op: bij acht velden is dat
       meer dan honderd pixels aan lege ruimte, en dan lijkt alles ver uit
       elkaar te staan. */
    form.formulier { gap: 10px; }

    /* De uitleg onder een veld dichter erop, zodat je ziet dat het erbij hoort
       en niet bij het volgende veld. */
    .formulier small { margin-top: 2px !important; display: block; }

    .kaart { padding: 16px; overflow-x: auto; }
    table { min-width: 480px; }

    .timer-kaart { flex-direction: column; align-items: stretch; gap: 16px; }

    div[style*="grid-template-columns:2fr 1fr"] { grid-template-columns: 1fr !important; }
    /* Op een smal scherm het scorebord onder het speelveld in plaats van
       ernaast. Zonder !important wint de stijl die in de pagina zelf staat. */
    .spel-layout,
    .spel-indeling { grid-template-columns: 1fr !important; }

    /* Speelvelden mogen nooit breder worden dan het scherm. */
    .spel-indeling canvas,
    .spel-layout canvas { max-width: 100%; height: auto; }

    /* Knoppen om mee te spelen groot genoeg om met een duim te raken.
       Onder de 44 pixels mis je ze structureel. */
    .spel-indeling .knop,
    .spel-layout .knop { min-height: 44px; }

    /* Op een telefoon is er weinig breedte te verdelen. Bij 30% vergroting
       blijft er van 360 pixels nog 277 over, en dan past de zijbalk van 260
       nauwelijks. Daarom hier een lagere schaal: de letters worden nog steeds
       merkbaar groter, maar de indeling blijft heel. */
    body.tekst-groot { zoom: 1.08; }
    body.tekst-extra_groot { zoom: 1.15; }

    /* De zijbalk mag nooit breder worden dan het scherm */
    .zijbalk { max-width: 85vw; }

    /* Schuifvensters in tabellen hebben op een telefoon een vervelend effect:
       ze vangen je veegbeweging op, waardoor de pagina zelf niet meer scrollt
       en je vast lijkt te zitten. Op een klein scherm laten we de tabel dus
       gewoon in zijn geheel meelopen met de pagina.

       Zijwaarts schuiven blijft wel nodig: een brede tabel past niet op 360
       pixels en moet je kunnen verslepen. */
    .tabel-venster,
    .tabel-venster-groot,
    .lijst-venster {
        max-height: none;
        overflow-y: visible;

        /* Zijwaarts schuiven blijft nodig en moet expliciet blijven staan:
           laat je dit weg, dan kan de browser besluiten dat er helemaal niet
           meer geschoven wordt en zie je de rechterkolommen nooit. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Op een telefoon verdwijnt de schuifbalk normaal zodra je stopt met
       vegen. Dan weet je niet dat er nog kolommen naast staan. Daarom hier
       een dun balkje dat blijft staan. */
    .tabel-venster::-webkit-scrollbar,
    .tabel-venster-groot::-webkit-scrollbar,
    .lijst-venster::-webkit-scrollbar { height: 6px; width: 6px; -webkit-appearance: none; }

    .tabel-venster::-webkit-scrollbar-thumb,
    .tabel-venster-groot::-webkit-scrollbar-thumb,
    .lijst-venster::-webkit-scrollbar-thumb {
        background: var(--tekst-zwak);
        border-radius: 3px;
    }

    /* En een randje rechts zolang er nog iets naast staat, zodat het opvalt
       dat de tabel doorloopt. */
    .tabel-venster,
    .tabel-venster-groot { border-right: 2px solid var(--rand); }

    /* De lange materiaallijsten krijgen op een telefoon wél een eigen hoogte.
       Anders staan er honderden regels onder elkaar en scroll je eindeloos
       voordat je bij de volgende kaart bent.

       Dit is bewust alleen voor die lijsten: bij Rapportage werkte zo'n venster
       juist averechts, omdat je er per ongeluk in belandde en de pagina dan
       niet meer verder scrolde. Hier ga je er bewust in.

       75% van de zichtbare hoogte: genoeg regels in beeld, en er blijft altijd
       een stuk pagina over om eromheen te kunnen scrollen. Een vaste hoogte in
       pixels zou op een kleine telefoon het hele scherm vullen, en dan zit je
       weer vast in het venster. */
    .tabel-venster.lijst-lang,
    .lijst-venster.lijst-lang {
        max-height: 75dvh;
        overflow-y: auto;
    }

    /* De regels in die lijsten wat compacter, zodat er meer in beeld past.
       De fotominiatuur wordt kleiner maar blijft herkenbaar. */
    .tabel-venster.lijst-lang td { padding-top: 6px; padding-bottom: 6px; }
    .tabel-venster.lijst-lang td img { width: 34px !important; height: 34px !important; }

    /* De koprij blijft staan tijdens het scrollen; anders weet je halverwege
       niet meer welke kolom je voor je hebt. */
    .tabel-venster.lijst-lang thead th {
        position: sticky;
        top: 0;
        background: var(--kaart);
        z-index: 1;
    }

    /* En de eerste kolom blijft staan bij zijwaarts schuiven. Zonder dit
       verdwijnt de naam uit beeld en kijk je naar losse getallen zonder te
       weten bij welk project of welke klant ze horen. */
    .tabel-venster.lijst-lang td:first-child,
    .tabel-venster.lijst-lang th:first-child {
        position: sticky;
        left: 0;
        background: var(--kaart);
        /* Een schaduwrandje zodat je ziet dat de tabel doorloopt */
        box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.25);
    }
    /* De linkerbovenhoek staat twee kanten op vast en moet er dus bovenop */
    .tabel-venster.lijst-lang thead th:first-child { z-index: 2; }

    /* De kaart schuift op smalle schermen ook; die balk hoort er net zo uit
       te zien als die van de tabelvensters. */
    .kaart::-webkit-scrollbar { height: 6px; -webkit-appearance: none; }
    .kaart::-webkit-scrollbar-thumb {
        background: var(--tekst-zwak);
        border-radius: 3px;
    }
    .kaart { scrollbar-width: thin; scrollbar-color: var(--tekst-zwak) transparent; }
}

@media print {
    @page { margin: 15mm; }

    /* Afdrukken vanaf een telefoon
       ---------------------------------------------------------------
       Een telefoon rekent de pagina uit op zijn eigen breedte, zo'n 390
       pixels, en schaalt dat daarna op naar A4. Alles wordt dan ruim twee
       keer zo groot: je ziet een halve tabel en moet uitzoomen.

       De oplossing is niet de tabel smaller maken, maar de maten in punten
       zetten in plaats van in pixels. Een punt is een papiermaat en schaalt
       niet mee, dus 10pt is 10pt of je nu vanaf een telefoon of een computer
       afdrukt. */
    body {
        font-size: 10pt !important;
        line-height: 1.4;
    }
    h1 { font-size: 15pt !important; margin: 0 0 6pt !important; }
    h2 { font-size: 12pt !important; margin: 0 0 4pt !important; }
    h3 { font-size: 11pt !important; }
    .subtitel, small { font-size: 8.5pt !important; }

    /* De ruime marges van de mobiele opmaak zijn op papier verspilling */
    .kaart { padding: 0 !important; margin: 0 0 8pt !important; }

    /* Op een telefoon geldt daarnaast table { min-width: 480px } uit de
       mobiele opmaak. Die zetten we hier terug. */
    table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto;
        font-size: 9pt !important;
    }

    .kaart { overflow-x: visible !important; }

    /* Lange woorden en adressen breken op de spatie, en pas binnen een woord
       als het er echt niet in past. */
    td, th { overflow-wrap: break-word; word-break: normal; }

    /* Een rij niet halverwege over twee bladen afbreken, en de kop herhalen */
    tr { page-break-inside: avoid; }
    thead { display: table-header-group; }

    /* De omschrijving krijgt de ruimte die overblijft; de andere kolommen
       hebben genoeg aan wat ze nodig hebben. */
    .urenlijst-print-kaart td, .klantrapport-print-kaart td,
    .urenlijst-print-kaart th, .klantrapport-print-kaart th {
        padding: 4px 6px;
        vertical-align: top;
    }
    .urenlijst-print-kaart .tijd, .klantrapport-print-kaart .tijd { white-space: nowrap; }

    /* In de pagina's staan lettergroottes in pixels, bijvoorbeeld font-size:13px
       in een style-attribuut. Die schalen mee met de telefoon en worden op
       papier veel te groot. Alles binnen een afdrukbare kaart terug naar
       punten; !important is nodig omdat een style-attribuut anders wint. */
    .urenlijst-print-kaart *, .klantrapport-print-kaart *,
    .materiaal-print-kaart *, .factuur-print-kaart *,
    .planning-print-kaart * {
        font-size: inherit !important;
    }
    .urenlijst-print-kaart, .klantrapport-print-kaart,
    .materiaal-print-kaart, .factuur-print-kaart,
    .planning-print-kaart {
        font-size: 9pt !important;
    }

    /* Behalve de koppen: die mogen groter blijven */
    .urenlijst-print-kaart h1, .klantrapport-print-kaart h1,
    .materiaal-print-kaart h1, .factuur-print-kaart h1 { font-size: 14pt !important; }
    .urenlijst-print-kaart h2, .klantrapport-print-kaart h2,
    .materiaal-print-kaart h2, .factuur-print-kaart h2 { font-size: 11.5pt !important; }
    .urenlijst-print-kaart strong, .klantrapport-print-kaart strong { font-size: inherit !important; }
    .zijbalk, .topbalk, .testbalk, body > .layout > .hoofd-omslag > .topbalk { display: none !important; }
    .hoofd { padding: 0; max-width: none; }
    .hoofd > *:not(.planning-print-kaart):not(.klantrapport-print-kaart):not(.materiaal-print-kaart):not(.factuur-print-kaart):not(.urenlijst-print-kaart):not(.handleiding) { display: none !important; }
    .planning-print-kaart, .klantrapport-print-kaart, .materiaal-print-kaart, .factuur-print-kaart, .urenlijst-print-kaart, .handleiding { border: none; padding: 0; margin: 0; display: block !important; }

    /* Schuifvensters horen niet op papier: daar moet alles gewoon volledig
       afgedrukt worden, anders mist de klant de helft van de regels. */
    .urenlijst-print-kaart .tabel-venster,
    .klantrapport-print-kaart .tabel-venster { max-height: none !important; overflow: visible !important; border: none !important; }
    .urenlijst-print-kaart .tabel-venster thead th,
    .klantrapport-print-kaart .tabel-venster thead th,
    .urenlijst-print-kaart .duur-vast,
    .klantrapport-print-kaart .duur-vast,
    .urenlijst-print-kaart tfoot td,
    .klantrapport-print-kaart tfoot td {
        position: static !important;
        box-shadow: none !important;
        border-top-width: 2px;
        /* De achtergrond hoort bij het vastzetten op het scherm. Op papier
           zou een gekleurd blokje juist over de tekst heen kunnen vallen. */
        background: transparent !important;
    }

    /* De urenlijst heeft acht kolommen. Zonder deze regels wil de tabel breder
       worden dan het papier, en wat buiten de bladspiegel valt wordt gewoon
       afgeknipt -- precies de kolom Duur, die helemaal rechts staat. Op het
       scherm merk je dat niet, want daar kun je opzij scrollen.
       Lange omschrijvingen mogen daarom afbreken over meerdere regels. */
    .urenlijst-print-kaart .tabel-venster,
    .klantrapport-print-kaart .tabel-venster { width: 100% !important; }
    .urenlijst-print-kaart table,
    .klantrapport-print-kaart table { width: 100% !important; max-width: 100% !important; }
    /* Alleen de omschrijving mag midden in een woord afbreken. Op alle cellen
       zetten was fout: dan valt "Gewerkt" uiteen als "Gewer/kt" en breekt een
       ordernummer over twee regels. Overal elders breken woorden hooguit op
       een spatie. */
    .urenlijst-print-kaart td,
    .urenlijst-print-kaart th { overflow-wrap: normal; word-break: normal; }
    .urenlijst-print-kaart td:nth-child(7) { overflow-wrap: break-word; }

    /* Minder ruimte rond de tekst: dat scheelt bij acht kolommen genoeg om
       alles op zijn eigen regel te houden. */
    .urenlijst-print-kaart td,
    .urenlijst-print-kaart th { padding: 5px 5px; }

    /* Vaste kolombreedtes, zodat de omschrijving de ruimte krijgt en de
       smalle kolommen niet onnodig worden samengeknepen. De volgorde is:
       datum, medewerker, soort, klant, ordernr., project, omschrijving, duur. */
    .urenlijst-print-kaart table { table-layout: fixed; }
    .urenlijst-print-kaart th:nth-child(1) { width: 12%; }  /* datum, staat vast */
    .urenlijst-print-kaart th:nth-child(2) { width: 15%; }  /* medewerker, mag afbreken op spaties */
    .urenlijst-print-kaart th:nth-child(3) { width: 8%; }   /* soort: "Gewerkt" moet heel blijven */
    .urenlijst-print-kaart th:nth-child(4) { width: 13%; }  /* klant */
    .urenlijst-print-kaart th:nth-child(5) { width: 9%; }   /* ordernummer, een blok cijfers */
    .urenlijst-print-kaart th:nth-child(6) { width: 13%; }  /* project */
    .urenlijst-print-kaart th:nth-child(7) { width: 23%; }  /* omschrijving, krijgt de rest */
    .urenlijst-print-kaart th:nth-child(8) { width: 7%; }   /* duur, staat vast */
    /* Een tfoot wordt door sommige browsers onderaan elke pagina herhaald.
       Bij een totaalregel is dat misleidend: dan lijkt het eindtotaal al op
       pagina 1 te staan. Als gewone rijgroep verschijnt hij netjes een keer,
       helemaal aan het eind. */
    tfoot { display: table-row-group; }

    /* Ook de kaartenlijst hoort op papier volledig afgedrukt te worden. */
    .lijst-venster { max-height: none !important; overflow: visible !important; }

    .urenlijst-print-kaart .niet-afdrukken { display: none !important; }
    /* Het schermkopje weg; op papier staat er al een nette kop */
    .urenlijst-print-kaart h2 { display: none !important; }
    .urenlijst-print-kaart table { font-size: 11px; }
    /* De koppen staan in hoofdletters met extra letterafstand; op 13px passen
       ze niet in de smallere kolommen. Kleiner en zonder die extra ruimte wel. */
    .urenlijst-print-kaart th { font-size: 9px; letter-spacing: 0; }
    .urenlijst-print-kaart th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; }
    .urenlijst-print-kaart tr { page-break-inside: avoid; }

    /* Op de rapportagepagina staan twee afdrukbare blokken. De knop waarop je
       klikt bepaalt welke er op papier komt; het andere blijft weg. */
    body.print-alleen-uren .klantrapport-print-kaart { display: none !important; }
    body.print-alleen-rapport .urenlijst-print-kaart { display: none !important; }
    .afdruk-kop { display: block !important; margin-bottom: 12px; }
    .planning-weeknav-nav, .planning-weeknav-acties { display: none !important; }
    .planning-weeknav { justify-content: center; margin-bottom: 16px; }
    .klantrapport-print-kaart .planning-weeknav { display: none !important; }
    .planning-scroll { overflow: visible; }
    .planning-tabel { min-width: 0; width: 100%; }
    .planning-blok a { display: none !important; }
    .planning-blok { border: 1px solid #999; background: #fff; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
    h1 { display: none; }
    .materiaal-print-kaart h1 { display: block !important; }

    /* De keuringslijst wordt met een pen ingevuld, dus de invulvakken moeten
       ook echt op papier verschijnen. Randen drukken standaard af, maar de
       regelhoogte moet ruim genoeg blijven om in te kunnen schrijven. */
    #keuringslijst_print td { height: 26px; }
    #keuringslijst_print thead,
    #bestellijst_print thead { display: table-header-group; }

    /* Er staan meerdere afdrukbare lijsten op de materiaalpagina. Alleen de
       lijst die je aanklikt hoort eruit te komen; de rest krijgt deze klasse
       en blijft weg. Zonder dit drukt de printer ze allemaal af. */
    .materiaal-print-kaart.print-uit { display: none !important; }
    .factuur-print-kaart h1 { display: block !important; }

    /* Handleiding: koppen wel tonen, en elk blad op een eigen pagina. */
    .handleiding h1 { display: block !important; }
    .handleiding .blad { page-break-after: always; }
    .handleiding .blad:last-child { page-break-after: auto; }
    .handleiding a { text-decoration: none; color: inherit; }
}

/* Alleen zichtbaar op papier: wie het afdrukte, welke periode en welke filters */
.afdruk-kop { display: none; }

/* Iemand is ingepland op een dag dat hij goedgekeurd verlof heeft */
.planning-cel-botsing {
    background: rgba(179, 58, 58, 0.06);
    box-shadow: inset 0 0 0 2px var(--fout);
}

/* ===== Zijbalk stap 2: groepen + iconen ===== */
.zijbalk nav{
    padding: 4px 12px 18px;
}
.zijbalk .menu-groep{
    margin: 0 0 13px;
}
.zijbalk .menu-groep-kop{
    padding: 8px 12px 6px;
    color: rgba(255,255,255,.50);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    user-select: none;
}
.zijbalk nav .menu-groep a{
    display:flex;
    align-items:center;
    gap:10px;
    margin:2px 0;
    min-height:42px;
    padding:9px 11px;
}
.zijbalk .menu-icoon{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1;
    transition:background .16s ease,color .16s ease,transform .16s ease;
}
.zijbalk nav .menu-groep a:hover .menu-icoon{
    background:rgba(255,255,255,.13);
    color:#fff;
    transform:translateX(1px);
}
.zijbalk nav .menu-groep a.actief-link .menu-icoon{
    background:rgba(255,255,255,.16);
    color:#fff;
}
.zijbalk .menu-label{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.zijbalk .menu-teller{
    margin-left:auto!important;
    flex:0 0 auto;
}
@media(max-width:860px){
    .zijbalk nav{padding-left:8px;padding-right:8px}
    .zijbalk .menu-groep{margin-bottom:10px}
    .zijbalk .menu-groep-kop{padding-left:12px;padding-top:7px}
    .zijbalk nav .menu-groep a{min-height:44px;padding:9px 10px}
}
\n\n/* ===== Zijbalk stap 3: profielvoet + mobiele afwerking ===== */\n.zijbalk{\n    display:flex;\n    flex-direction:column;\n}\n.zijbalk nav{\n    flex:1 0 auto;\n}\n.zijbalk-voet{\n    margin:4px 12px 0;\n    padding:12px;\n    border-top:1px solid rgba(255,255,255,.12);\n    background:rgba(0,0,0,.09);\n    border-radius:14px;\n}\n.zijbalk-profiel{\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:2px 2px 11px;\n}\n.zijbalk-avatar{\n    width:38px;\n    height:38px;\n    flex:0 0 38px;\n    border-radius:12px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    background:rgba(255,255,255,.14);\n    border:1px solid rgba(255,255,255,.16);\n    color:#fff;\n    font-weight:800;\n    font-size:13px;\n    letter-spacing:.03em;\n}\n.zijbalk-profiel-tekst{min-width:0;line-height:1.25}\n.zijbalk-profiel-tekst strong{\n    display:block;\n    color:#fff;\n    font-size:12.5px;\n    white-space:nowrap;\n    overflow:hidden;\n    text-overflow:ellipsis;\n}\n.zijbalk-profiel-tekst span{\n    display:block;\n    margin-top:2px;\n    color:rgba(255,255,255,.58);\n    font-size:10.5px;\n    white-space:nowrap;\n    overflow:hidden;\n    text-overflow:ellipsis;\n}\n.zijbalk-snelacties{display:grid;gap:4px}\n.zijbalk-snelactie{\n    min-height:36px;\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:7px 9px;\n    border-radius:9px;\n    color:rgba(255,255,255,.74);\n    text-decoration:none;\n    font-size:11.5px;\n    font-weight:600;\n    transition:background .16s ease,color .16s ease,transform .16s ease;\n}\n.zijbalk-snelactie > span:first-child{\n    width:20px;\n    text-align:center;\n    font-size:13px;\n}\n.zijbalk-snelactie:hover,\n.zijbalk-snelactie.actief{\n    color:#fff;\n    background:rgba(255,255,255,.10);\n}\n.zijbalk-snelactie:hover{transform:translateX(2px)}\n.zijbalk-snelactie.actief{box-shadow:inset 2px 0 0 var(--actief)}\n.zijbalk-snelactie.uitloggen{color:#ffd8d3}\n.zijbalk-snelactie.uitloggen:hover{background:rgba(179,58,58,.18);color:#fff}\n\n@media(max-width:860px){\n    .zijbalk{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important}\n    .zijbalk .logo{position:sticky;top:0;z-index:3;background:var(--accent-donker);padding-top:6px}\n    .zijbalk-voet{\n        margin:8px 8px 0;\n        padding:10px;\n        border-radius:12px;\n    }\n    .zijbalk-profiel{padding-bottom:9px}\n    .zijbalk-snelacties{grid-template-columns:1fr 1fr}\n    .zijbalk-snelactie{min-height:42px;padding:8px}\n    .zijbalk-snelactie.uitloggen{grid-column:1 / -1;justify-content:center}\n}\n\n@media(min-width:861px){\n    .zijbalk-voet{position:sticky;bottom:10px;z-index:2;backdrop-filter:blur(8px)}\n}\n
/* ===== Zijbalk alternatief: rustig, vlak en minder blokkig ===== */
.zijbalk{
    width:232px;
    padding:18px 10px 16px;
    background:var(--accent-donker);
}

/* Logo losser, zonder grote kaart eromheen */
.zijbalk .logo{
    padding:2px 12px 18px;
    margin:0;
    background:transparent;
    border:0;
    box-shadow:none;
}
.zijbalk .logo a{display:inline-flex!important;align-items:center}
.zijbalk .logo img{
    max-height:52px!important;
    max-width:170px!important;
    width:auto;
    padding:5px 7px;
    border-radius:7px;
    box-shadow:none;
}

.zijbalk nav{
    padding:0 2px;
}
.zijbalk .menu-groep{
    margin:0 0 13px;
    padding:0;
    border:0;
    background:transparent;
}
.zijbalk .menu-groep-kop{
    padding:7px 11px 4px;
    margin:0;
    color:rgba(255,255,255,.38);
    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

/* Geen losse kaartjes meer: vlakke regels */
.zijbalk nav .menu-groep a{
    position:relative;
    display:grid;
    grid-template-columns:20px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:38px;
    margin:0;
    padding:7px 10px 7px 12px;
    border:0;
    border-left:0;
    border-radius:6px;
    background:transparent;
    color:rgba(255,255,255,.69);
    box-shadow:none;
    font-size:12.5px;
    font-weight:500;
    transition:color .15s ease,background .15s ease,transform .15s ease;
}
.zijbalk nav .menu-groep a::before{
    content:"";
    position:absolute;
    left:1px;
    top:50%;
    width:2px;
    height:0;
    transform:translateY(-50%);
    border-radius:999px;
    background:var(--actief);
    transition:height .15s ease;
}
.zijbalk nav .menu-groep a:hover{
    background:rgba(255,255,255,.045);
    color:#fff;
    transform:translateX(1px);
}
.zijbalk nav .menu-groep a.actief-link{
    background:transparent;
    color:#fff;
    font-weight:650;
    box-shadow:none;
}
.zijbalk nav .menu-groep a.actief-link::before{height:22px}

/* Iconen zonder eigen blok */
.zijbalk .menu-icoon{
    width:20px;
    height:auto;
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(255,255,255,.43);
    text-align:center;
    font-size:14px;
    line-height:1;
    box-shadow:none;
    transition:color .15s ease,transform .15s ease;
}
.zijbalk nav .menu-groep a:hover .menu-icoon,
.zijbalk nav .menu-groep a.actief-link .menu-icoon{
    background:transparent;
    color:var(--actief);
    transform:none;
}
.zijbalk .menu-label{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Teller klein en subtiel */
.zijbalk .menu-teller{
    min-width:20px;
    height:19px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:1;
    box-shadow:none;
}
.zijbalk .menu-teller.dringend{
    border-color:rgba(255,145,130,.36);
    background:rgba(179,56,42,.18);
    color:#ffd8d3;
}

/* Profiel en beheer onderaan als gewone, rustige zone */
.zijbalk-voet{
    margin:4px 4px 0;
    padding:12px 8px 0;
    border-top:1px solid rgba(255,255,255,.10);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none!important;
}
.zijbalk-profiel{
    gap:8px;
    padding:0 4px 9px;
}
.zijbalk-avatar{
    width:30px;
    height:30px;
    flex-basis:30px;
    border-radius:50%;
    background:transparent;
    border:1px solid rgba(255,255,255,.20);
    font-size:10.5px;
    font-weight:700;
}
.zijbalk-profiel-tekst strong{font-size:11.5px;font-weight:650}
.zijbalk-profiel-tekst span{font-size:9.5px;color:rgba(255,255,255,.42)}
.zijbalk-snelacties{gap:0}
.zijbalk-snelactie{
    min-height:34px;
    padding:6px 5px;
    border-radius:5px;
    color:rgba(255,255,255,.60);
    font-size:11px;
    font-weight:500;
    background:transparent;
}
.zijbalk-snelactie:hover,
.zijbalk-snelactie.actief{
    background:transparent;
    color:#fff;
    transform:translateX(1px);
}
.zijbalk-snelactie.actief{box-shadow:none}
.zijbalk-snelactie.actief::after{
    content:"";
    width:5px;
    height:5px;
    margin-left:auto;
    border-radius:50%;
    background:var(--actief);
}
.zijbalk-snelactie.uitloggen{color:rgba(255,190,184,.72)}
.zijbalk-snelactie.uitloggen:hover{background:transparent;color:#ffd8d3}

/* Nog subtielere scrollbar */
.zijbalk{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.zijbalk::-webkit-scrollbar{width:4px}
.zijbalk::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.zijbalk::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

@media(max-width:860px){
    .zijbalk{width:250px;padding:12px 9px calc(24px + env(safe-area-inset-bottom,0px))!important}
    .zijbalk .logo{padding:4px 10px 12px;position:static;background:transparent}
    .zijbalk .logo img{max-height:42px!important}
    .zijbalk .menu-groep{margin-bottom:10px}
    .zijbalk .menu-groep-kop{padding:6px 10px 3px}
    .zijbalk nav .menu-groep a{min-height:42px;padding:8px 9px 8px 11px}
    .zijbalk-voet{margin-top:8px;padding-top:10px}
    .zijbalk-snelacties{grid-template-columns:1fr}
    .zijbalk-snelactie{min-height:38px}
    .zijbalk-snelactie.uitloggen{grid-column:auto;justify-content:flex-start}
}


/* ===== Modernere merkweergave + consistente SVG-iconen ===== */
.zijbalk .logo{
    position:relative;
    padding:2px 12px 20px;
}
.zijbalk .logo::after{
    content:"";
    display:block;
    width:28px;
    height:2px;
    margin-top:11px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--actief),rgba(255,255,255,.18));
}
.zijbalk .logo img{
    max-height:48px!important;
    max-width:158px!important;
    padding:4px 6px;
    border-radius:8px;
    box-shadow:0 5px 16px rgba(0,0,0,.10);
    transition:transform .18s ease,box-shadow .18s ease;
}
.zijbalk .logo a:hover img{
    transform:translateY(-1px);
    box-shadow:0 7px 18px rgba(0,0,0,.14);
}

/* De nieuwe iconen zijn allemaal dezelfde lijnstijl en maat. */
.zijbalk .menu-icoon{
    width:19px;
    height:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.46);
}
.zijbalk .menu-icoon svg{
    width:17px;
    height:17px;
    display:block;
}
.zijbalk nav .menu-groep a:hover .menu-icoon{
    color:rgba(255,255,255,.88);
}
.zijbalk nav .menu-groep a.actief-link .menu-icoon{
    color:var(--actief);
}
.zijbalk nav .menu-groep a.actief-link .menu-icoon svg{
    stroke-width:2.05;
}

.zijbalk-snelactie .snelactie-icoon{
    width:19px!important;
    height:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 19px;
}
.zijbalk-snelactie .snelactie-icoon svg{
    width:16px;
    height:16px;
    display:block;
}
.zijbalk-snelactie.actief .snelactie-icoon{color:var(--actief)}

/* Initialen-avatar iets moderner, zonder weer een zware kaart te worden. */
.zijbalk-avatar{
    border-radius:50%!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.17)!important;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.025);
}

@media(max-width:860px){
    .zijbalk .logo::after{margin-top:8px}
    .zijbalk .logo img{max-height:40px!important;max-width:145px!important}
}

/* ===== Zijbalk variant: kleur + subtiel 3D, zonder terug blokkig te worden ===== */
/* Elke menugroep krijgt een eigen accent. De kleur zit vooral in het icoon,
   zodat de lijst rustig blijft en de herkenning toch veel sneller wordt. */
.zijbalk .menu-groep{--menu-kleur:#65d6c1;--menu-kleur-rgb:101,214,193}
.zijbalk .menu-groep[data-menu-groep="hoofd"]{--menu-kleur:#63c7ff;--menu-kleur-rgb:99,199,255}
.zijbalk .menu-groep[data-menu-groep="werk"]{--menu-kleur:#ffbf5b;--menu-kleur-rgb:255,191,91}
.zijbalk .menu-groep[data-menu-groep="materiaal"]{--menu-kleur:#55d6a7;--menu-kleur-rgb:85,214,167}
.zijbalk .menu-groep[data-menu-groep="personeel"]{--menu-kleur:#b995ff;--menu-kleur-rgb:185,149,255}
.zijbalk .menu-groep[data-menu-groep="communicatie"]{--menu-kleur:#ff7fb0;--menu-kleur-rgb:255,127,176}
.zijbalk .menu-groep[data-menu-groep="beheer"]{--menu-kleur:#ff8b72;--menu-kleur-rgb:255,139,114}
.zijbalk .menu-groep[data-menu-groep="hulp"]{--menu-kleur:#92a7c7;--menu-kleur-rgb:146,167,199}

/* Klein 3D-icoon: wel diepte, geen groot kaartje. */
.zijbalk .menu-icoon{
    width:25px;
    height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:var(--menu-kleur);
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.025)),
        rgba(var(--menu-kleur-rgb),.09);
    border:1px solid rgba(var(--menu-kleur-rgb),.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 2px 5px rgba(0,0,0,.13),
        0 0 0 1px rgba(0,0,0,.03);
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.zijbalk .menu-icoon svg{
    width:15px;
    height:15px;
    filter:drop-shadow(0 1px 0 rgba(0,0,0,.18));
}
.zijbalk nav .menu-groep a:hover .menu-icoon{
    color:#fff;
    transform:translateY(-1px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.04)),
        rgba(var(--menu-kleur-rgb),.23);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 4px 9px rgba(0,0,0,.18),
        0 0 10px rgba(var(--menu-kleur-rgb),.12);
}
.zijbalk nav .menu-groep a.actief-link .menu-icoon{
    color:#fff;
    background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(var(--menu-kleur-rgb),.20));
    border-color:rgba(var(--menu-kleur-rgb),.48);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        inset 0 -2px 3px rgba(0,0,0,.13),
        0 4px 10px rgba(0,0,0,.20),
        0 0 12px rgba(var(--menu-kleur-rgb),.18);
}

/* Actieve regel blijft open en luchtig, maar krijgt een zachte kleurgloed. */
.zijbalk nav .menu-groep a.actief-link{
    background:linear-gradient(90deg, rgba(var(--menu-kleur-rgb),.10), transparent 72%);
}
.zijbalk nav .menu-groep a.actief-link::before{
    width:3px;
    height:23px;
    background:var(--menu-kleur);
    box-shadow:0 0 8px rgba(var(--menu-kleur-rgb),.38);
}
.zijbalk nav .menu-groep a:hover{
    background:linear-gradient(90deg, rgba(var(--menu-kleur-rgb),.055), transparent 75%);
}

/* Groepskopje krijgt een mini-kleurpuntje voor snelle herkenning. */
.zijbalk .menu-groep-kop{
    display:flex;
    align-items:center;
    gap:7px;
}
.zijbalk .menu-groep-kop::before{
    content:"";
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:var(--menu-kleur);
    box-shadow:0 0 7px rgba(var(--menu-kleur-rgb),.45);
}

/* Meldingtellers iets rijker, maar nog klein. */
.zijbalk .menu-teller{
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 2px 4px rgba(0,0,0,.12);
}
.zijbalk .menu-teller.dringend{
    background:linear-gradient(180deg, rgba(224,88,70,.65), rgba(150,44,34,.48));
    border-color:rgba(255,174,162,.45);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(70,10,5,.20);
}

/* Logo krijgt een premium 'plaat'-effect met glans en diepte. */
.zijbalk .logo img{
    background:linear-gradient(145deg,#ffffff,#eef2f1)!important;
    border:1px solid rgba(255,255,255,.68)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 5px rgba(17,61,58,.08),
        0 7px 16px rgba(0,0,0,.18),
        0 1px 2px rgba(0,0,0,.16)!important;
    transform:translateZ(0);
    transition:transform .18s ease,box-shadow .18s ease;
}
.zijbalk .logo a:hover img{
    transform:translateY(-1px);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -2px 5px rgba(17,61,58,.06),
        0 10px 21px rgba(0,0,0,.22),
        0 0 13px rgba(232,163,61,.10)!important;
}
.zijbalk .logo::after{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),var(--actief),rgba(255,255,255,.17),transparent)!important;
    opacity:.75;
    box-shadow:0 1px 5px rgba(232,163,61,.15);
}

/* Profiel-avatar als klein 3D muntje. */
.zijbalk-avatar{
    color:#fff;
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(0,0,0,.08));
    border:1px solid rgba(255,255,255,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 7px rgba(0,0,0,.16);
}

/* Onderste iconen in dezelfde subtiele diepte. */
.zijbalk-snelactie .snelactie-icoon{
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.10);
}
.zijbalk-snelactie .snelactie-icoon svg{width:14px;height:14px}
.zijbalk-snelactie:hover .snelactie-icoon,
.zijbalk-snelactie.actief .snelactie-icoon{
    color:var(--actief);
    border-color:rgba(232,163,61,.25);
    background:rgba(232,163,61,.08);
}

@media(max-width:860px){
    .zijbalk .menu-icoon{width:27px;height:27px;border-radius:8px}
    .zijbalk .menu-icoon svg{width:16px;height:16px}
}

/* Gele/accentlijn naast het logo uitschakelen */
.zijbalk .logo::after {
    display: none !important;
    content: none !important;
}

/* ===== Logo groter en beter passend in de zijbalk ===== */
.zijbalk .logo{
    padding:4px 3px 20px !important;
    width:100%;
    justify-content:center;
}
.zijbalk .logo a{
    display:flex !important;
    width:100%;
    justify-content:center;
    align-items:center;
}
.zijbalk .logo img{
    width:100% !important;
    max-width:205px !important;
    max-height:82px !important;
    height:auto !important;
    object-fit:contain;
    padding:7px 9px !important;
    border-radius:12px !important;
}

@media(max-width:860px){
    .zijbalk .logo{
        padding:4px 5px 14px !important;
    }
    .zijbalk .logo img{
        width:100% !important;
        max-width:205px !important;
        max-height:78px !important;
    }
}


/* ===== Profielfoto in de zijbalk ===== */
.zijbalk-avatar-form{
    margin:0;
    flex:0 0 auto;
}
.zijbalk-avatar{
    position:relative;
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    border-radius:50%!important;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(0,0,0,.08))!important;
    border:1px solid rgba(255,255,255,.26)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 10px rgba(0,0,0,.18)!important;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.zijbalk-avatar:hover{
    transform:translateY(-1px) scale(1.02);
    border-color:rgba(255,255,255,.42)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.22)!important;
}
.zijbalk-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
}
.zijbalk-avatar-initialen{
    font-size:12px;
    font-weight:800;
    letter-spacing:.03em;
    line-height:1;
}
.zijbalk-avatar-input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
}
.zijbalk-avatar-camera{
    position:absolute;
    right:-3px;
    bottom:-2px;
    width:18px;
    height:18px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(145deg,#35a99f,#1d6f69);
    border:2px solid var(--accent-donker);
    box-shadow:0 2px 6px rgba(0,0,0,.24);
}
.zijbalk-avatar-camera svg{
    width:10px;
    height:10px;
    display:block;
}
.zijbalk-profiel{
    align-items:center;
}

@media(max-width:860px){
    .zijbalk-avatar{
        width:42px!important;
        height:42px!important;
        flex-basis:42px!important;
    }
}


/* ===== Luxe profielafwerking ===== */
.zijbalk-aanwezig{
    position:absolute;
    top:-1px;
    right:-1px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:linear-gradient(145deg,#64e6a5,#22a96a);
    border:2px solid var(--accent-donker);
    box-shadow:0 0 0 2px rgba(62,211,139,.12),0 2px 7px rgba(0,0,0,.18);
    z-index:2;
}
.zijbalk-profiel{
    gap:12px!important;
    padding-top:3px!important;
}
.zijbalk-profiel-tekst{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:4px;
    line-height:1.12!important;
}
.zijbalk-profiel-tekst strong{
    font-size:12.5px!important;
    font-weight:700!important;
    letter-spacing:-.01em;
    color:#fff!important;
    max-width:145px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.zijbalk-profiel-tekst .zijbalk-rol{
    display:inline-flex!important;
    align-items:center;
    width:auto!important;
    max-width:145px;
    margin:0!important;
    padding:3px 7px;
    border-radius:999px;
    color:rgba(255,255,255,.72)!important;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.09);
    font-size:9.5px!important;
    font-weight:650;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
@media(max-width:860px){
    .zijbalk-profiel-tekst strong{font-size:12px!important}
    .zijbalk-profiel-tekst .zijbalk-rol{font-size:9px!important}
}

/* ===== Industriële kleurvariant zijbalk =====
   Minder paars/roze, meer staal, petrol, amber en roest. */
.zijbalk .menu-groep{--menu-kleur:#6f8fa8;--menu-kleur-rgb:111,143,168}
.zijbalk .menu-groep[data-menu-groep="hoofd"]{--menu-kleur:#5ea6c8;--menu-kleur-rgb:94,166,200}
.zijbalk .menu-groep[data-menu-groep="werk"]{--menu-kleur:#d6a23a;--menu-kleur-rgb:214,162,58}
.zijbalk .menu-groep[data-menu-groep="materiaal"]{--menu-kleur:#2fa58f;--menu-kleur-rgb:47,165,143}
.zijbalk .menu-groep[data-menu-groep="personeel"]{--menu-kleur:#7f95a6;--menu-kleur-rgb:127,149,166}
.zijbalk .menu-groep[data-menu-groep="communicatie"]{--menu-kleur:#4b91a8;--menu-kleur-rgb:75,145,168}
.zijbalk .menu-groep[data-menu-groep="beheer"]{--menu-kleur:#c56f3f;--menu-kleur-rgb:197,111,63}
.zijbalk .menu-groep[data-menu-groep="hulp"]{--menu-kleur:#8b9aa7;--menu-kleur-rgb:139,154,167}

/* Groepskopjes iets steviger en technischer. */
.zijbalk .menu-groep-kop{
    color:rgba(220,230,235,.52) !important;
    letter-spacing:.075em !important;
}

/* 3D-effect iets donkerder/metaalachtiger. */
.zijbalk .menu-icoon{
    background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(8,27,34,.20)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 3px 8px rgba(0,0,0,.18) !important;
}
.zijbalk nav .menu-groep a.actief-link .menu-icoon{
    background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(var(--menu-kleur-rgb),.18)) !important;
}