/* =====================================================================
   Broodmater: één stylesheet, mobiel eerst (stijl van roostermater, zie stijl-mater/STIJL.md).
   Huisstijl Bakkerij Mater: blauw #324871, geel #EDDB85, IBM Plex Mono.
   Licht (standaard) of donker (de blauwe mater-stijl): volgt het systeem,
   of vast via <html data-thema="licht|donker"> (thema.js, keuze op Account).
   Typografie: één grootte (14px), twee diktes (400; 600 voor koppen en
   nadruk), zo min mogelijk hoofdletters. Telefoon: tot 899px breed.
   ===================================================================== */

/* ---- Lettertype (zelf gehost, zie fonts/LEESMIJ.txt) ---- */

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-mono-600.woff2) format("woff2"); }

/* ---- Kleuren ---- */

:root {
    color-scheme: light;
    --bg: #f7f4ec;
    --kaart: #fffdf7;
    --fg: #1f2a44;
    --zacht: #5d6578;
    --rand: #e2dcc8;
    --lijn: #ebe5d3;               /* rasterlijnen in tabellen en lijsten */
    --kop-cel: #f3eee0;            /* kopcellen van het rooster */
    --accent: #324871;
    --accent-fg: #ffffff;
    --accent-zacht: #e8ecf4;
    --geel: #eddb85;
    --eigen: rgba(31, 42, 68, 0.05);      /* je eigen kolom in het rooster */
    --eigen-kop: rgba(31, 42, 68, 0.09);
    --neutraal: #ebe7dc;           /* dienst zonder taak, grijze labels */
    --omtrek: #1f2a44;
    --ok-bg: #e4f2e6;
    --ok-fg: #1d6b32;
    --ok-rand: #8fcb9c;
    --fout-bg: #fbe6e2;
    --fout-fg: #b3261e;
    --fout-rand: #eea399;
    --afwezig: #d93025;          /* afwezig/verlof in het rooster: fel rood (Phillip) */
    --afwezig-fg: #fff;
    --geel-bg: #fbf2cf;
    --geel-fg: #6e5500;
    --oranje-bg: #fde6d0;
    --oranje-fg: #9a4a00;
    --oranje-rand: #efb27a;
    --schaduw: rgba(31, 42, 68, 0.22);
    --radius: 4px;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --week-rand: color-mix(in srgb, var(--geel) 45%, transparent);   /* lijntje om deze week */
}

/* Donker: twee keer dezelfde waarden, want een media query en een selector kunnen geen blok delen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        color-scheme: dark;
        --bg: #22314f;
        --kaart: #2b3d61;
        --fg: #f3ebc9;
        --zacht: #b3bcd1;
        --rand: rgba(237, 219, 133, 0.22);
        --lijn: rgba(237, 219, 133, 0.12);
        --kop-cel: #324871;
        --accent: #eddb85;
        --accent-fg: #22314f;
        --accent-zacht: rgba(237, 219, 133, 0.12);
        --eigen: rgba(255, 255, 255, 0.05);
        --eigen-kop: rgba(255, 255, 255, 0.09);
        --neutraal: rgba(179, 188, 209, 0.2);
        --omtrek: #f3ebc9;
        --ok-bg: rgba(143, 203, 156, 0.18);
        --ok-fg: #bfe5c7;
        --ok-rand: rgba(143, 203, 156, 0.6);
        --fout-bg: rgba(238, 163, 153, 0.18);
        --fout-fg: #f5b9ae;
        --fout-rand: rgba(238, 163, 153, 0.6);
        --afwezig: #e5483c;
        --afwezig-fg: #fff;
        --geel-bg: rgba(237, 219, 133, 0.16);
        --geel-fg: #eddb85;
    --oranje-bg: rgba(245, 160, 90, 0.2);
    --oranje-fg: #f7c08e;
    --oranje-rand: rgba(245, 160, 90, 0.6);
        --schaduw: rgba(8, 14, 30, 0.55);
    }
}

:root[data-thema="donker"] {
    color-scheme: dark;
    --bg: #22314f;
    --kaart: #2b3d61;
    --fg: #f3ebc9;
    --zacht: #b3bcd1;
    --rand: rgba(237, 219, 133, 0.22);
    --lijn: rgba(237, 219, 133, 0.12);
    --kop-cel: #324871;
    --accent: #eddb85;
    --accent-fg: #22314f;
    --accent-zacht: rgba(237, 219, 133, 0.12);
    --eigen: rgba(255, 255, 255, 0.05);
    --eigen-kop: rgba(255, 255, 255, 0.09);
    --neutraal: rgba(179, 188, 209, 0.2);
    --omtrek: #f3ebc9;
    --ok-bg: rgba(143, 203, 156, 0.18);
    --ok-fg: #bfe5c7;
    --ok-rand: rgba(143, 203, 156, 0.6);
    --fout-bg: rgba(238, 163, 153, 0.18);
    --fout-fg: #f5b9ae;
    --fout-rand: rgba(238, 163, 153, 0.6);
    --afwezig: #e5483c;
    --afwezig-fg: #fff;
    --geel-bg: rgba(237, 219, 133, 0.16);
    --geel-fg: #eddb85;
    --oranje-bg: rgba(245, 160, 90, 0.2);
    --oranje-fg: #f7c08e;
    --oranje-rand: rgba(245, 160, 90, 0.6);
    --schaduw: rgba(8, 14, 30, 0.55);
}

/* ---- Basis en typografie ---- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-family: var(--mono); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--mono); }
button, input, select, textarea { font: inherit; }
/* Eén grootte voor alles; verschil alleen via dikte en kleur. */
body * { font-family: inherit; font-size: inherit; font-weight: 400; font-style: normal; letter-spacing: 0; }
h1, h2, h3, strong, b, th, dt, legend, .popup-titel, .volgende-tijd, .groot-getal { font-weight: 600; }
/* Zo min mogelijk hoofdletters. Namen van personen blijven zoals ze zijn. */
h1, h2, h3, .weeknav-titel, .week-rij-tekst, .menu a, .kop-account, .onderbalk a, .schakelaar a, .tabs a,
.knop, .knop-link, .actie-knop > span, details.actie summary, .taak, .chip-verlof, .label, .notitie,
.volgende-kop, .volgende-datum, .hint, .aandacht span, .legenda, .dienst-datum, .kal-kop {
    text-transform: lowercase;
}
[hidden] { display: none !important; }   /* ook als een klasse zelf een display heeft */

h1 { margin: 0 0 16px; color: var(--accent); }
h2, h3 { margin: 16px 0 8px; }
h2 { color: var(--fg); }
a { color: var(--accent); text-underline-offset: 3px; }
code { background: var(--rand); padding: 1px 5px; border-radius: 4px; }
details ul { padding-left: 18px; }
.zacht { color: var(--zacht); }
.plus { color: var(--ok-fg); }
.min { color: var(--fout-fg); }
.inline { display: inline; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.smal { width: 5em; }

.icoon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Kop met menu (groot scherm) ---- */

.kop {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 16px;
    background: var(--kaart);
    border-bottom: 1px solid var(--rand);
}
.kop-logo { display: inline-flex; align-items: center; flex: none; }
.kop-logo img { display: block; width: 56px; height: 56px; }
/* Logo: blauw bij licht, geel bij donker */
.kop-logo .logo-donker { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) .kop-logo .logo-licht { display: none; }
    :root:not([data-thema="licht"]) .kop-logo .logo-donker { display: block; }
}
:root[data-thema="donker"] .kop-logo .logo-licht { display: none; }
:root[data-thema="donker"] .kop-logo .logo-donker { display: block; }

.menu { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; }
.kop .menu { flex: 1; justify-content: center; }
.menu a, .kop-account { display: inline-flex; align-items: center; border-radius: 2px; color: var(--zacht); text-decoration: none; }
.menu a { gap: 6px; padding: 8px 12px; white-space: nowrap; }
.menu .icoon { width: 18px; height: 18px; }
.kop-account { gap: 8px; padding: 6px 10px; }
.kop-feedback { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 2px; color: var(--zacht); text-decoration: none; text-transform: lowercase; white-space: nowrap; }
.kop-feedback .icoon { width: 18px; height: 18px; }
.kop-feedback:hover { color: var(--fg); }
.feedback-antwoord { margin: 12px 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-zacht); }
.feedback-reactie { margin: 8px 0 8px 16px; padding: 6px 10px; border-left: 3px solid var(--rand); overflow-wrap: anywhere; }
.feedback-nieuw summary { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.feedback-nieuw[open] summary { margin-bottom: 12px; }
.feedback-nieuw .form.kaart { border: 0; padding: 0; margin: 0; }
.feedback-lijst { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--kaart); }
.feedback-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding: 10px 12px; border-top: 1px solid var(--rand); }
.feedback-item:first-child { border-top: 0; }
.feedback-item.inactief { opacity: 0.6; }
.feedback-tekst { flex: 1 1 320px; min-width: 0; display: grid; gap: 2px; color: inherit; text-decoration: none; }
.feedback-tekst:hover .feedback-inkort { text-decoration: underline; }
.feedback-kop .label { margin-left: 4px; }
.feedback-inkort { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.feedback-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.feedback-volledig { margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--radius); overflow-wrap: anywhere; max-height: 45vh; overflow-y: auto; }
.feedback-acties .knop-link, .feedback-acties .knop { line-height: 1.4; }
.menu a[aria-current="page"], .kop-account[aria-current="page"] { background: transparent; color: var(--fg); box-shadow: inset 0 -3px 0 var(--geel); }

.inhoud { max-width: 720px; margin: 0 auto; padding: 20px 16px 48px; }
body:has(.week-raster) .inhoud { max-width: 1400px; }
body:has(.tabel-breed) .inhoud { max-width: 1100px; }
@media (min-width: 900px) and (max-width: 1400px) {
    /* Middelgroot scherm: menu zonder icoontjes, zodat alles past. */
    .menu .icoon { display: none; }
    .menu a { padding: 8px 8px; }
    .kop-account span, .kop-feedback span { display: none; }
}

/* ---- Onderbalk (telefoon): vijf knoppen, zo breed als hun woord ---- */

.onderbalk { display: none; }

@media (max-width: 899px) {
    /* Smalle kop met alleen het logo; het menu staat onderin. */
    .kop { position: static; justify-content: center; padding: 6px 16px; }
    .kop .menu, .kop .kop-account, .kop .kop-feedback, .kop .kop-ongedaan { display: none; }
    .kop-logo img { width: 52px; height: 52px; }
    .inhoud { padding-top: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .onderbalk {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(5, auto);
        justify-content: space-around;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--kaart);
        border-top: 1px solid var(--rand);
    }
    .onderbalk a {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 6px;
        border-radius: 2px;
        color: var(--zacht);
        text-decoration: none;
    }
    .onderbalk .icoon { width: 26px; height: 26px; }
    .onderbalk a[aria-current="page"] { color: var(--fg); background: transparent; box-shadow: inset 0 3px 0 var(--geel); }
    .onderbalk .teller { position: absolute; top: 2px; left: calc(50% + 6px); }
}

/* ---- Losse pagina's (inloggen): altijd de blauwe bakkerijstijl ---- */

body.los {
    --bg: #324871; --kaart: #2b3e63; --fg: #f3ebc9; --zacht: #b8c0d4; --rand: rgba(237, 219, 133, 0.24);
    --accent: #eddb85; --accent-fg: #26375a; --accent-zacht: rgba(237, 219, 133, 0.13);
    color-scheme: dark;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 16px;
}
body.los input { background: rgba(10, 18, 40, 0.22); }
.los-kaart { width: 100%; max-width: 380px; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px; text-align: left; }
.logo { display: block; width: 140px; height: auto; margin: -12px auto 8px; }
.taal-wissel { margin: 20px 0 0; text-align: center; }

/* ---- Kaarten, meldingen, labels ---- */

.kaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.kaart-link { display: block; color: inherit; text-decoration: none; }

.melding { padding: 12px 16px; border-radius: 3px; background: var(--accent-zacht); color: var(--fg); border-left: 3px solid var(--geel); }
.melding-fout { background: var(--fout-bg); color: var(--fout-fg); border-left-color: var(--fout-fg); }
.melding-waarschuwing { background: var(--geel-bg); color: var(--geel-fg); border-left-color: var(--geel); }
.melding ul { margin: 4px 0 0; padding-left: 18px; }

.label { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 2px; background: var(--accent-zacht); color: var(--accent); vertical-align: 1px; }
.label-geel { background: var(--geel-bg); color: var(--geel-fg); }
.label-grijs { background: var(--neutraal); color: var(--zacht); }

/* Bolletje met een aantal (menu, knoppen) */
.teller {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 2px;
    background: #d93025;
    color: #fff;
    vertical-align: 1px;
}

/* Info-icoontje met uitleg bij aanwijzen of aantikken (info() in helpers.php) */
.info { position: relative; display: inline-block; vertical-align: 1px; margin-left: 4px; cursor: help; outline: 0; }
.info-i {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-weight: 600;
    line-height: 1;
    text-transform: none;
}
.info:focus-visible .info-i { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-tekst {
    display: none;
    position: fixed;   /* plek via app.js, zodat scrollende blokken hem niet afknippen */
    z-index: 40;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--kaart);
    color: var(--fg);
    box-shadow: 0 10px 30px var(--schaduw);
    text-align: left;
    text-transform: none;
    white-space: normal;
    cursor: auto;
}
.info-p, .info-ul { display: block; margin: 0 0 8px; }
.info-tekst > :last-child { margin-bottom: 0; }
.info-li { display: list-item; margin-left: 18px; }
.info-tekst strong { font-weight: 600; }
.info:hover .info-tekst, .info:focus .info-tekst, .info:focus-within .info-tekst { display: block; }
/* Met JavaScript: de uitleg in één zwevend blok (app.js), zelfde uiterlijk */
.met-js .info .info-tekst { display: none !important; }
.info-zwevend {
    position: fixed;
    z-index: 70;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--kaart);
    color: var(--fg);
    box-shadow: 0 10px 30px var(--schaduw);
    text-align: left;
}
.info-zwevend strong { font-weight: 600; }
.info-zwevend > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
    /* Op de telefoon als vast blok onderin, boven de menubalk. */
    .info-tekst, .info-zwevend { position: fixed; top: auto !important; left: 16px !important; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); width: auto; max-height: 60vh; overflow-y: auto; }
}

/* Laden: knop met draaiertje; bij trage acties (Claude, automatisch invullen) een melding over de pagina */
.bezig { position: relative; color: transparent !important; pointer-events: none; }
.bezig::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid var(--zacht); border-right-color: transparent; border-radius: 50%; animation: draai 0.8s linear infinite; }
.knop-hoofd.bezig::after { border-color: var(--accent-fg); border-right-color: transparent; }
.laden { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(20, 26, 44, 0.45); }
.laden-kaart { display: flex; align-items: center; gap: 14px; max-width: min(420px, calc(100vw - 32px)); padding: 18px 20px; border-radius: var(--radius); background: var(--kaart); color: var(--fg); box-shadow: 0 14px 44px var(--schaduw); }
.draaier { flex: none; display: inline-block; width: 26px; height: 26px; border: 3px solid var(--rand); border-top-color: var(--accent); border-radius: 50%; animation: draai 0.8s linear infinite; vertical-align: middle; }
.popup-laden { display: flex; align-items: center; gap: 10px; }
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .draaier, .bezig::after { animation-duration: 2.4s; } }

/* ---- Formulieren ---- */

.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 4px; }
.form > .knop { width: 100%; }

input, select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--kaart);
    color: var(--fg);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--zacht); opacity: 0.8; }
input[type="checkbox"] { min-height: 0; width: 22px; height: 22px; accent-color: var(--accent); }
input[type="color"] { width: 44px; height: 40px; padding: 2px; }
input[type="file"] { padding: 8px; }
.klein-veld { width: auto; min-width: 0; flex: 1 1 180px; padding: 6px 10px; }

fieldset { border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 12px; margin: 0; }
legend { padding: 0 4px; }
.vakjes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.vakje, .form .vakje { display: inline-flex; align-items: center; }   /* ook binnen .form, waar een label een grid is */
.vakje { gap: 6px; }
.lijst-item .vakje { align-items: flex-start; }

/* Formulier op één regel (filters, periode, taken) */
.rij-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rij-form input:not([type="color"]):not(.smal) { flex: 1 1 140px; width: auto; }
.rij-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rij-form label input { width: auto; }

/* ---- Knoppen ---- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--kaart);
    color: var(--fg);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.knop:hover { border-color: var(--accent); background: var(--kop-cel); }
.knop-hoofd, .knop-hoofd:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.knop-link {
    min-height: 40px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--accent);
    text-decoration: underline;
    text-align: left;
    cursor: pointer;
}
.knop-gevaar { color: var(--fout-fg); }
.onderaan-knop { display: flex; width: 100%; margin-top: 20px; }
.uitloggen { margin-top: 8px; }

/* "— of —" tussen twee manieren van inloggen */
.of { display: flex; align-items: center; gap: 10px; color: var(--zacht); }
.of::before, .of::after { content: ""; flex: 1; border-top: 1px solid var(--rand); }

/* Keuzeblokjes (radio) in plaats van keuzelijsten */
.blokken { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.blokken legend { margin-bottom: 8px; padding: 0; }
.blok { position: relative; }
.blok input { position: absolute; opacity: 0; pointer-events: none; }
.blok > span {
    display: inline-grid;
    padding: 10px 14px;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--kaart);
    color: var(--fg);
    cursor: pointer;
    line-height: 1.25;
}
.blok small { color: var(--zacht); }
.blok input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.blok input:checked + span small { color: var(--accent-fg); }
.blok input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Grote keuzes in de dienst-pop-up: uitklappers en knoppen met hetzelfde uiterlijk */
details.actie { margin-top: 10px; }
details.actie summary, .actie-knop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--kaart);
    color: var(--fg);
    cursor: pointer;
}
details.actie summary { list-style: none; }
details.actie summary::-webkit-details-marker { display: none; }
details.actie[open] summary { background: var(--accent-zacht); border-color: var(--accent); }
details.actie .form { margin-top: 10px; padding: 4px 4px 8px; }
.actie-knop { width: 100%; margin-top: 10px; text-align: left; }
.actie-knop:disabled { opacity: 0.5; cursor: default; }
details.actie summary .icoon, .actie-knop .icoon { color: var(--accent); width: 26px; height: 26px; }
details.actie summary small, .actie-knop small { display: block; color: var(--zacht); }

/* Kleinere uitklappers */
.periode-kiezer { margin-bottom: 16px; }
.dag-toevoegen { margin-top: 10px; }
.standaard-rij { align-items: baseline; }
.standaard-wijzig, .regel-wijzig { flex-basis: 100%; margin-top: 0; }
.regel-wijzig .form { margin-top: 10px; }
.standaard-conflicten { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.chip-klein { padding: 1px 6px; border-radius: 2px; }
.dag-toevoegen .form { margin-top: 12px; }
.periode-kiezer summary, .meer-opties summary, .dag-toevoegen summary { cursor: pointer; color: var(--accent); }
.meer-opties[open] summary { margin-bottom: 12px; }

/* Schakelaar (Maand/Week, Verlof/Beschikbaarheid) en tabbladen (maanden) */
.schakelaar { display: inline-flex; border: 1px solid var(--rand); border-radius: 2px; padding: 3px; background: var(--kaart); color: var(--fg); }
.schakelaar a { padding: 6px 16px; border-radius: 2px; color: var(--fg); text-decoration: none; }
.pagina-schakelaar { margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; }
.tabs a { padding: 6px 12px; border: 1px solid var(--rand); border-radius: 2px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.schakelaar a[aria-current="page"], .tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.thema-keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.weekkiezer .knop[aria-pressed="true"], .plan-balk .knop[aria-pressed="true"], .thema-keuze .knop[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ---- Lijsten ---- */

.lijst { list-style: none; margin: 0 0 16px; padding: 0; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); }
.lijst-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 16px;
    border-top: 1px solid;
    border-color: var(--lijn);
}
.lijst-item:first-child { border-top: 0; }
.lijst-item > div:first-child { min-width: 0; flex: 1 1 220px; }
.lijst-item.inactief { opacity: 0.6; }
.acties { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.verzoek .acties { align-self: center; }

.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.gegevens dt { color: var(--zacht); }
.gegevens dd { margin: 0; overflow-wrap: anywhere; }

.kop-met-link { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Korte lijst per dag: tijd, naam, taak */
.daglijst { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.daglijst li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px; }
.daglijst li a { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; color: inherit; text-decoration: none; }
.daglijst li.open .dag-naam { color: var(--zacht); }
.dag-tijd { font-variant-numeric: tabular-nums; min-width: 6.5em; }
.dag-naam { flex: 1; }

/* ---- Tabellen (uren, verlof, statistieken) ---- */

.tabel-scroll { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--kaart); }
.kaart .tabel-scroll { border: 0; border-radius: 0; margin-left: -4px; margin-right: -4px; }   /* geen kader in een kader */
.salaris-tekst { width: 100%; margin: 8px 0; font-size: 14px; }
.tabel { border-collapse: collapse; width: 100%; }
.tabel th, .tabel td { padding: 8px 12px; border-bottom: 1px solid; border-color: var(--lijn); text-align: left; white-space: nowrap; }
.tabel th { color: var(--zacht); }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
    .tabel .alleen-breed { display: none; }
    [data-meel]:not(.per-dag-open) .per-dag { display: none; }   /* meelbestelling: eerst alleen het weektotaal */
}
@media (min-width: 601px) { .alleen-smal { display: none; } }
.tabel td.geen-afbreek:not(.getal) { white-space: nowrap; }   /* wint van de telefoonregel hieronder */
/* Telefoon: krappere cellen, koppen en namen mogen afbreken (getallen niet), zodat tabellen in beeld passen. */
@media (max-width: 600px) {
    .kaart { padding: 14px 12px; }
    .tabel th, .tabel td { padding: 6px 8px; }
    .tabel th, .tabel td:not(.getal) { white-space: normal; }
}
/* Brede tabel die toch scrolt: de eerste kolom (product, meel) blijft staan. */
.tabel-scroll .tabel tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--kaart); }
/* Invoerraster (.stapel) op de telefoon: elke regel een blokje, het label (uit de kop, via app.js) boven elk veld. */
@media (max-width: 600px) {
    .tabel.stapel, .tabel.stapel tbody { display: block; }
    .tabel.stapel thead { display: none; }
    .tabel.stapel tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
    .tabel.stapel tr:last-child { border-bottom: 0; }
    .tabel.stapel td { display: grid; grid-template-rows: 1fr auto; gap: 2px; padding: 0; border: 0; position: static; white-space: normal; }
    .tabel.stapel td:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
    .tabel.stapel td:first-child { grid-column: 1 / -1; }
    .tabel.stapel td.breed { grid-column: 1 / -1; }
    .tabel.stapel td::before { content: attr(data-label); color: var(--zacht); }
    .tabel.stapel td:first-child:not(:has(input, select)) { display: block; font-weight: 600; }
    .tabel.stapel td:first-child:not(:has(input, select))::before { content: none; }
    .tabel.stapel td input:not([type="checkbox"]), .tabel.stapel td select { width: 100%; }
    .tabel-scroll:has(.stapel) { overflow: visible; margin-left: 0; margin-right: 0; padding: 0 12px; }
    .kaart .tabel-scroll:has(.stapel) { padding: 0; }
}
.balk { display: inline-block; width: 60px; height: 8px; border-radius: 4px; background: var(--rand); vertical-align: middle; overflow: hidden; }
.balk span { display: block; height: 100%; background: var(--accent); }

/* ---- Startpagina en Meer ---- */

.volgende { padding: 20px; border-left: 3px solid var(--geel); }
.volgende-kop { color: var(--zacht); }
.volgende-tijd { margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--accent); }
.hint .icoon { width: 18px; height: 18px; }
.dashboard { margin: 0 0 8px; padding-left: 18px; }

/* Opvallende melding bovenaan (ruilverzoeken, open diensten) */
.aandacht {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--geel-bg);
    color: var(--fg);
    text-decoration: none;
}
.aandacht .icoon { width: 26px; height: 26px; color: var(--accent); }
.aandacht span { flex: 1; }
.open-teller { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 2px; background: var(--geel-bg); color: var(--fg); text-decoration: none; }
.open-teller .icoon { width: 18px; height: 18px; color: var(--accent); }

.grote-knoppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.meer-kop { margin: 20px 0 8px; color: var(--zacht); }
.meer-kop:first-child { margin-top: 0; }
.grote-knop {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 10px;
    min-height: 84px;
    padding: 16px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--kaart);
    color: var(--fg);
    text-decoration: none;
    line-height: 1.25;
}
.grote-knop:hover { border-color: var(--accent); }
.grote-knop:active { transform: scale(0.98); }
.grote-knop .icoon { width: 26px; height: 26px; color: var(--accent); }
.grote-knop .teller { position: absolute; top: 12px; right: 12px; }

/* Beheer: tegels */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tegel {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 16px;
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    color: var(--fg);
    text-decoration: none;
}
.tegel .label { justify-self: start; margin-left: 0; }

/* ---- Pop-up ---- */

.popup {
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);
    padding: 16px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--kaart);
    color: var(--fg);
    box-shadow: 0 14px 44px var(--schaduw);
}
.popup::backdrop { background: rgba(20, 26, 44, 0.45); }
.popup-sluit {
    position: sticky;
    top: 0;
    float: right;
    width: 40px;
    height: 40px;
    margin: -8px -8px 0 0;
    border: 0;
    border-radius: 3px;
    background: var(--kop-cel);
    color: var(--fg);
    line-height: 1;
    cursor: pointer;
}
.popup-titel { margin: 0 0 10px; padding-right: 44px; }
.popup .kaart { padding: 12px 14px; margin-bottom: 10px; }
.popup .kaart:last-child { margin-bottom: 0; }
.popup .volgende { padding: 12px 14px; }
.popup .volgende-tijd { margin: 0 0 4px; }
.popup .form { gap: 10px; }
.popup details.actie summary, .popup .actie-knop { padding: 10px 12px; }
@media (max-width: 600px) {
    /* Op de telefoon schuift de pop-up van onderen in beeld, over de volle breedte. */
    .popup { width: 100vw; max-width: 100vw; max-height: 75vh; margin: auto 0 0; padding: 14px; border-radius: var(--radius) var(--radius) 0 0; }
}

/* =====================================================================
   Broodmater
   ===================================================================== */

/* ---- Startscherm: drie grote knoppen (Yagel, 2026-10-09) ---- */
.start-datum { margin: 4px 0 16px; color: var(--zacht); }
.start-knoppen { display: grid; gap: 16px; }
@media (min-width: 700px) { .start-knoppen { grid-template-columns: repeat(3, 1fr); } }
.start-knop {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 120px;
    padding: 24px;
    border: 1px solid var(--rand);
    border-left: 4px solid var(--geel);
    border-radius: var(--radius);
    background: var(--kaart);
    color: var(--fg);
    text-decoration: none;
}
.start-knop:hover { border-color: var(--accent); }
.start-knop:active { transform: scale(0.99); }
.start-knop .icoon { width: 40px; height: 40px; color: var(--accent); }
.start-knop span { display: grid; gap: 4px; font-weight: 600; text-transform: lowercase; }
.start-knop small { font-weight: 400; color: var(--zacht); text-transform: none; }

/* ---- Dag- en weekkeuze ---- */
.dagnav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.dagnav .knop { min-width: 44px; padding: 8px 12px; }
.dagnav-form { flex: 1 1 auto; min-width: 0; }
/* De datum is zelf de knop: het datumveld ligt er onzichtbaar overheen (tik = kiezen). */
.dagnav-titel { position: relative; display: flex; justify-content: center; align-items: center; gap: 4px 8px; min-height: 40px; font-weight: 600; text-align: center; cursor: pointer; }
.dagnav-titel input { position: absolute; inset: 0; width: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.dagnav-titel .pijltje { color: var(--zacht); font-weight: 400; }

/* ---- Deegschema ---- */
.taak-kaart h2 { margin-top: 0; }
.taak-kaart h2 .zacht { font-weight: 400; }
.taak-kaart.overgeslagen { opacity: 0.6; }
.kaart-voet { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.kaart-voet .icoon { width: 18px; height: 18px; vertical-align: -4px; }
/* Deegschema: eerst de dienst kiezen (bakken, mixen, lamineren), met per dienst de stappen van vandaag. */
.diensten { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .diensten { grid-template-columns: repeat(3, 1fr); } }
.dienst-kaart { display: block; margin: 0; color: inherit; text-decoration: none; }
.dienst-kaart:hover { border-color: var(--accent); }
.dienst-kaart h2 { display: flex; justify-content: space-between; align-items: center; margin-top: 0; }
.dienst-kaart h2 .icoon { width: 18px; height: 18px; color: var(--accent); }
.dienst-kaart.leeg { opacity: 0.6; }
body:has(.diensten) .inhoud, body:has(.dienst-tabs) .inhoud { max-width: 1100px; }   /* deegschema: meer breedte */
.eigen-dienst { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -4px 0 16px; }
.eigen-dienst .gekozen { font-weight: 600; text-decoration: none; }
.samen-kop { margin-top: 24px; color: var(--zacht); }
.bak-tabel th.horeca-kop { background: var(--geel-bg); color: var(--geel-fg); line-height: 1.3; }
.dienst-tabs a:first-child { border-color: transparent; color: var(--accent); }
.dag-overzicht { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dag-overzicht li { display: flex; gap: 12px; padding: 4px 0; }
.dag-overzicht .tijd { min-width: 3.2em; color: var(--zacht); font-variant-numeric: tabular-nums; }
.dag-overzicht .zacht { margin-left: auto; white-space: nowrap; }
.taak-kaart { scroll-margin-top: 16px; }
.deeg-blok { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.deeg-blok > summary { cursor: pointer; list-style-position: outside; }
.deeg-blok > summary .zacht { margin-left: 6px; }
.horeca-getal { color: var(--geel-fg); background: var(--geel-bg); padding: 0 4px; border-radius: 2px; }
.tabel td.horeca-getal { background: var(--geel-bg); }
.voorgevormd { white-space: pre-line; margin: 8px 0; }
.starter dd { font-variant-numeric: tabular-nums; }

/* Mixreferentie (deegschema, recept): DDT en watertemperatuur, mixstappen, bulk */
.mix-ref { margin: 8px 0; }
.mix-kern { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; }
.mix-stappen { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.mix-stappen li { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; }
.mix-stappen .mix-fase { font-weight: 600; }
.mix-stappen li.vervolg .mix-fase { font-weight: 400; color: var(--zacht); text-align: right; }
.mix-stappen .label { margin-left: 4px; }
.mix-bulk { margin: 8px 0 0; }
.mix-notitie { padding-left: 8px; border-left: 2px solid var(--geel); }
.mix-seizoen .label { margin-left: 0; }
.watertemp { margin: 8px 0 4px; padding: 8px 12px; background: var(--accent-zacht); border-radius: 2px; }
.watertemp p { margin: 0 0 6px; }
.watertemp-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.watertemp-velden label { display: grid; gap: 2px; }
.watertemp-velden input { min-height: 40px; padding: 6px 8px; width: 100%; }

/* Recepttabel: subregels (waterverdeling, voordeeg) ingesprongen en zachter */
.recept-tabel { margin: 8px 0; }
.recept-tabel td { white-space: normal; }
.recept-tabel td.getal { white-space: nowrap; }
.recept-tabel tr.sub td { color: var(--zacht); padding-top: 2px; padding-bottom: 6px; }
.recept-tabel .regel-uitleg { display: block; color: var(--zacht); }
.recept-tabel tfoot td { border-top: 1px solid var(--rand); }

/* ---- Formulieren: velden naast elkaar ---- */
.velden-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.invoer-tabel td { padding: 4px 6px; }
.invoer-tabel input:not([type="checkbox"]), .invoer-tabel select { min-height: 40px; padding: 6px 8px; }
.invoer-tabel input.smal { width: 5.5em; }
@media (max-width: 600px) {
    .invoer-tabel input.smal { width: 3.5em; }
    .invoer-tabel th, .invoer-tabel td { padding: 4px 2px; }
    .invoer-tabel input.aantal { width: 2.4em; padding: 6px 0; text-align: center; }
    .invoer-tabel input[type="time"] { width: 6em; padding: 6px 4px; }
}
.product-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.product-raster label { display: grid; gap: 2px; }
.product-raster input { min-height: 40px; padding: 6px 8px; }
.dag-label { min-width: 7em; }

/* ---- Weekplanning ---- */
.week-raster .tabel th, .week-raster .tabel td { padding: 2px 6px; vertical-align: middle; border: 1px solid var(--lijn); }
.week-raster thead th, .week-raster thead th.getal { text-align: center; white-space: nowrap; }
.week-raster tbody th[scope="row"], .week-raster tfoot th[scope="row"] { position: sticky; left: 0; background: var(--kaart); z-index: 1; white-space: nowrap; font-weight: 400; }
.week-raster tr.groep th { background: var(--kop-cel); color: var(--fg); padding-top: 4px; padding-bottom: 4px; }
.week-raster th.vandaag { box-shadow: inset 0 -3px 0 var(--geel); }
/* Eén regel per cel, als een spreadsheet: [winkel] +horeca =totaal (voorstel) */
.week-cel .cel { display: grid; grid-template-columns: 3.4em 2.8em 3em 3.6em; align-items: center; gap: 4px; white-space: nowrap; }
.week-cel .cel > span { text-align: right; font-variant-numeric: tabular-nums; }
.week-cel .cel > .cel-voorstel { text-align: left; }
.week-cel input.aantal { width: 100%; min-height: 0; height: 28px; padding: 2px 4px; text-align: right; }
.week-cel .horeca-getal { padding: 0 3px; }
.week-cel .totaal { font-weight: 600; }
.week-dagen { scrollbar-width: none; margin-bottom: 8px; }
.week-dagen::-webkit-scrollbar { display: none; }
.voorstel { padding: 0 4px; border: 1px dashed var(--accent); border-radius: 2px; background: var(--accent-zacht); color: var(--accent); cursor: pointer; }

/* ---- Bread count ---- */
.telling-rij { align-items: center; }
.telling-rij.ingevuld { background: var(--accent-zacht); }
.telling-naam { flex: 1 1 160px; }
.telling-velden { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.telling-velden label { display: grid; gap: 2px; }
.telling-velden label { color: var(--zacht); }
.telling-velden input { width: 4.5em; min-height: 44px; color: var(--fg); }
.telling-meer { flex-basis: 100%; }
.telling-meer[open] { display: grid; gap: 8px; }
.telling-tijd input { width: 8em; }

.nieuw-form { margin-top: 12px; }
details.kaart > summary { cursor: pointer; color: var(--accent); }
details.kaart > summary .icoon { width: 18px; height: 18px; vertical-align: -4px; }
.dagnav + .acties { margin-bottom: 16px; }
.periode-anders { margin: -8px 0 16px; }
.periode-anders .rij-form { margin-top: 8px; }
/* ---- Dagverslag ---- */
.meer-details > summary { cursor: pointer; color: var(--accent); }
.meer-details[open] { display: grid; gap: 16px; }
.meer-details[open] > summary { margin-bottom: 0; }
.oordeel { display: inline-block; padding: 1px 8px; border-radius: 2px; text-transform: lowercase; }
.oordeel-goed { background: var(--ok-bg); color: var(--ok-fg); }
.oordeel-matig { background: var(--oranje-bg); color: var(--oranje-fg); }
.oordeel-slecht { background: var(--fout-bg); color: var(--fout-fg); }
.oordeel-geen { background: var(--neutraal); color: var(--zacht); }
.oorzaken { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.oorzaken .label { margin-left: 0; }
.verslag-cel { white-space: normal !important; }

/* ---- Pakbon, afweeglijst en facturatie ---- */
.pakbon-aantal { width: 4em; }
.pakbon-vink { width: 2em; color: var(--zacht); }
.afweeg-tabel { max-width: 420px; }

/* ---- Gedeeld apparaat: groter en makkelijker te raken ---- */
body.apparaat { font-size: 16px; }
body.apparaat .knop { min-height: 56px; }

/* ---- Printen (pakbon, afweeglijst, factuuroverzicht) ---- */
@media print {
    :root { --bg: #fff; --kaart: #fff; --fg: #000; --zacht: #444; --rand: #999; --lijn: #ccc; --accent: #000; }
    .kop, .onderbalk, .niet-printen, .melding, .dagnav { display: none !important; }
    .inhoud { max-width: none; padding: 0; }
    .kaart { border: 0; padding: 0; break-inside: avoid; }
    .pakbon { break-after: page; }
}

.twijfel td { background: var(--geel-bg); }