/* ═══════════════════════════════════════════════════════════════
   Bagels & Beans — Bestelapp
   Huisstijl gebaseerd op bagelsbeans.nl
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS variabelen ── */
:root {
    --bb-bruin:        #422918;
    --bb-crème:        #FFFAEA;
    --bb-beige:        #ECD5AB;
    --bb-beige-licht:  #FCF4E1;
    --bb-groen:        #55601C;
    --bb-groen-licht:  #AFB376;
    --bb-terracotta:   #A64E17;
    --bb-terracotta-hover: #7d3b11;
    --bb-tekst:        #422918;
    --bb-tekst-zacht:  #7a5c47;
    /* Statuskleuren. De tint hoort leesbaar te zijn op de crème pagina-ondergrond, niet op wit;
       de tekstkleur is gemeten op de tint zelf: 6,42 bij 0,75rem (de oude #b45309 gaf 4,29).
       Bewust donkerder dan --bb-terracotta (4,90): dat is de CTA-kleur, en een waarschuwing
       moet niet als knop lezen. */
    --bb-tint-waarschuwing:  #FAEBD7;
    --bb-tekst-waarschuwing: #8a3f02;
    --bb-pill-vulling:       #eef1e0;
    --bb-rijscheiding:       #f0e8d8;
    --bb-border:       #D0C6B4;
    /* Hoogte van de vaste navbar. Stond als letterlijke calc() in .bb-topnav én in
       MainLayout.razor.css; het dropdown-menu rekent er nu ook mee. */
    --bb-navbar-hoogte: calc(60px + env(safe-area-inset-top));

    --bb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --bb-radius: 8px;
    /* Uniforme tussenruimte tussen dashboard-blokken (sessie 112). Sluit aan op de
       uniforme kaders uit sessie 108: elk top-level blok houdt dezelfde afstand.
       NB: .bb-taak-blok houdt bewust 8px - dat is ruimte BINNEN de takenstapel. */
    --bb-blok-gap: 1.5rem;
    --bb-radius-pill: 30px;
}

html, body {
    font-family: var(--bb-font);
    background-color: var(--bb-crème);
    color: var(--bb-tekst);
    margin: 0;
    padding: 0;
    overscroll-behavior-y: contain;   /* voorkomt iOS rubber-band bounce */
}

/* ── iOS PWA verbeteringen ── */

/* Verwijder tap-highlight op alle interactieve elementen */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Verwijder 300ms tap-vertraging op knoppen en links */
button, a, [role="button"], input[type="submit"], input[type="button"], label {
    touch-action: manipulation;
}

/* Selectievakjes en radio's in huisstijl. Eén globale regel — anders komt dit per
   component terug. NB: .uithaal-overlay-label zet bewust terracotta en heeft hogere
   specificiteit, dus die blijft zoals hij was. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--bb-groen);
}

/* Focus op een <select>: dezelfde lijn als bij de knoppen — geen blauwe browser-ring na
   een klik, wél een zichtbare olijfring bij toetsenbordfocus. Globaal, zodat elke
   keuzelijst zich gelijk gedraagt. Componenten die hun eigen randkleur op :focus zetten
   (bv. .gebr-veld select) blijven gewoon werken: dat is een border, geen outline. */
select:focus:not(:focus-visible) { outline: none; }
select:focus-visible {
    outline: 2px solid var(--bb-groen);
    outline-offset: 2px;
}

/* Voorkom iOS auto-zoom bij focus op invoervelden (zoom treedt op bij font-size < 16px) */
@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Safe area voor iPhone notch/home-indicator (alleen effect als viewport-fit=cover) */
.bb-topnav {
    padding-top: env(safe-area-inset-top);
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}
.bb-content, .bb-pagina {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* DE ENIGE reservering voor de onderbalk (sessie 117g). CSS-only detectie, geen
   Razor-logica. Exact de ingeklapte balkhoogte (beide balken: min-height 52px) plus de
   safe-area, want de balk zet die zelf als padding — samen is dat zijn echte hoogte.
   haccp-shell bewust uitgesloten: die heeft eigen 6rem-padding en nooit een balk.
   Voeg NERGENS anders padding-bottom "voor de balk" toe; dat stapelde eerder op tot
   ~160px reservering voor 52px balk. */
body:has(.challenge-balk) .bb-pagina,
body:has(.dagstand-balk) .bb-pagina {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
}

a, .btn-link {
    color: var(--bb-terracotta);
}

.btn-primary {
    color: var(--bb-crème);
    background-color: var(--bb-terracotta);
    border-color: var(--bb-terracotta);
    border-radius: var(--bb-radius-pill);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--bb-groen-licht);
}

/* Geen blauwe browser-ring na een klik of tik. :focus-visible blijft ongemoeid, dus
   toetsenbordnavigatie houdt z'n zichtbare focus. Links horen er óók bij: die kregen
   op een touchscreen na een tik gewoon de ring van de browser. */
button:focus:not(:focus-visible) { outline: none; }
a:focus:not(:focus-visible)      { outline: none; }

/* ÉÉN toetsenbordfocus voor de hele app, in de huisstijl.
   Hiervoor stond hier een OPSOMMING van negentien classes. Dat werkt als whitelist en
   groeit alleen mee met wat er die week gebouwd wordt: geteld op 7 sep 2026 hadden 27
   van de ~128 klikbare classes een regel, en de navbar — die er al maanden stond —
   hoorde daar niet bij. Vandaar blauwe ringen op Dashboard, Statistieken, Aanpassen en
   de inklapkoppen. Een regel op de ELEMENTEN in plaats van op de classes kan dat gat
   niet meer hebben.
   Vier plekken wijken bewust af en winnen op specificiteit (twee classes of een
   afstammelingsselector): .bb-dropdown-toggle (beige, op donker), .ob-seg (wit, op de
   donkerbruine onderbalk), .stat-dag-uitleg-kop en .lb-archief-kop (terracotta), en de
   overlay-regel onderin dit bestand. .reserv-weekknop en .bedrag-invoer zetten 'm
   bewust op none — allebei touch-oppervlakken met eigen :active-feedback. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--bb-groen);
    outline-offset: 2px;
}

/* In de navbar is olijf op donkerbruin nauwelijks te zien — daarom stond .bb-dropdown-toggle
   al op beige. Datzelfde geldt voor de links ernaast, dus de hele balk krijgt de beige ring. */
.bb-topnav a:focus-visible,
.bb-topnav button:focus-visible {
    outline-color: var(--bb-beige);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* ── Bestel tabel — gelijke kolommen ───────────────────────────── */

.bestel-tabel {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.bestel-tabel th:first-child,
.bestel-tabel td:first-child {
    width: 46%;
    text-align: left;
}

.bestel-tabel th:not(:first-child),
.bestel-tabel td:not(:first-child) {
    width: 13.5%;
    text-align: center;
}

/* ── Omzet grafiek ─────────────────────────────────────────────── */

.omzet-grafiek {
    padding: 0.5rem 0;
}

.omzet-rij {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.omzet-dag {
    width: 72px;
    font-size: 0.8rem;
    color: var(--bb-tekst-zacht);
    flex-shrink: 0;
    white-space: nowrap;   /* "wo 26-08" nooit afbreken, ook niet bold (vandaag) */
}

.omzet-dag-vandaag {
    font-weight: 700;
    color: var(--bb-tekst);
}

.omzet-balk-wrapper {
    flex: 1;
    background: var(--bb-beige);
    border-radius: 6px;
    height: 20px;
    overflow: hidden;
}

.omzet-balk {
    height: 100%;
    background: var(--bb-groen-licht);
    border-radius: 6px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.omzet-balk-vandaag {
    background: var(--bb-groen);
}

.omzet-bedrag {
    width: 90px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bb-tekst);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Topnavigatie balk ─────────────────────────────────────────── */

.bb-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bb-navbar-hoogte);
    background-color: #3D2C1A;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    overflow: visible;
}

.bb-topnav-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.25rem;
    gap: 0.25rem;
}

/* ── Logo ──────────────────────────────────────────────────────── */

.bb-topnav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
    flex-shrink: 0;
    margin-right: 1rem;
}

.bb-topnav-logo-img {
    height: 32px;
    width: auto;
}

.bb-topnav-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(236, 213, 171, 0.5);
    white-space: nowrap;
}

/* ── Nav links ─────────────────────────────────────────────────── */

.bb-topnav-links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
}

.bb-topnav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    color: #ECD5AB !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1;
    font-family: inherit;
}

.bb-topnav-link .bi {
    font-size: 1rem;
    color: #C4986A;
    flex-shrink: 0;
}

.bb-topnav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.bb-topnav-link:hover .bi {
    color: #E8B882;
}

.bb-topnav-link.active {
    background-color: rgba(166, 78, 23, 0.3);
    color: #fff !important;
    font-weight: 600;
}

.bb-topnav-link.active .bi {
    color: #E8B882;
}

/* ── Dropdown ──────────────────────────────────────────────────── */

.bb-dropdown {
    position: relative;
}

.bb-dropdown-toggle {
    font-family: inherit;
}

.bb-dropdown-chevron {
    font-size: 0.7rem !important;
    color: #A07850 !important;
    transition: transform 0.2s;
    margin-left: 0.1rem;
}

.bb-dropdown.open .bb-dropdown-chevron {
    transform: rotate(180deg);
}

/* De klik-ring is al gedempt (button:focus:not(:focus-visible), r.95 — en Bootstrap's
   reboot doet hetzelfde). Wat overbleef is de :focus-visible-ring van de browser: die
   HOORT er te zijn voor toetsenbordgebruik, maar hij is blauw op een donkerbruine balk.
   Vervangen door een beige ring binnen de knop, dus leesbaar en in huisstijl. */
.bb-dropdown-toggle:focus-visible {
    outline: 2px solid var(--bb-beige);
    outline-offset: -2px;
    border-radius: 6px;
}

.bb-dropdown.open > .bb-dropdown-toggle {
    background-color: rgba(166, 78, 23, 0.3);
    color: #fff !important;
}

.bb-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 230px;
    background: #fff;
    border: 1px solid #ddd0c0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(61, 44, 26, 0.18);
    padding: 0.4rem 0;
    z-index: 300;
    /* Het menu is langer dan een laag venster (700px hoog, iPad landschap): laat het
       BINNEN zichzelf scrollen in plaats van onder de vouw te verdwijnen. contain
       voorkomt dat de pagina eronder meescrolt zodra je onderaan bent. */
    max-height: calc(100dvh - var(--bb-navbar-hoogte) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Scroll-hint: vervaging onderaan zodat zichtbaar is dat er meer onder zit. Negatieve
   marge zodat hij geen hoogte toevoegt, en een verloop naar de menu-achtergrond — valt
   dus vanzelf weg als er niets te scrollen is. */
.bb-dropdown-menu::after {
    content: '';
    display: block;
    position: sticky;
    bottom: 0;
    height: 1.5rem;
    margin-top: -1.5rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}

.bb-dropdown.open .bb-dropdown-menu {
    display: block;
}

.bb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    /* Regelhoogte via min-height, niet via padding: dan is hij niet afhankelijk van
       de icoongrootte of de line-height van de tekst. border-box omdat de app geen
       globale reset heeft. */
    box-sizing: border-box;
    min-height: 40px;
    padding: 0.35rem 1rem;
    color: #3D2C1A !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.1s;
    cursor: pointer;
}

/* Op touch blijft 44px het minimum tikdoel. */
@media (max-width: 1024px) {
    .bb-dropdown-item { min-height: 44px; }
}

.bb-dropdown-item:hover {
    background-color: #FEF5E4;
    color: #A64E17 !important;
}

.bb-dropdown-item .bi {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    color: #A64E17;
    flex-shrink: 0;
}

.bb-dropdown-divider {
    height: 1px;
    background-color: #EAE0D0;
    margin: 0.35rem 0;
}

.bb-dropdown-label {
    padding: 0.4rem 1rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a08060;
    pointer-events: none;
}

/* ── Rechts: vestiging badge ───────────────────────────────────── */

.bb-topnav-rechts {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex-shrink: 0;
}

.bb-zoek-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.bb-zoek-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #C4986A;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.bb-zoek-btn:hover,
.bb-zoek-btn.actief {
    background: rgba(166, 78, 23, 0.4);
    color: #F0D9B5;
}

.bb-zoek-input {
    width: 220px;
    padding: 0.42rem 0.85rem;
    border: 1px solid rgba(236, 213, 171, 0.35);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: #F0D9B5;
    font-size: 0.875rem;
    outline: none;
    margin-right: 0.4rem;
    transition: border-color 0.15s, background 0.15s;
}

.bb-zoek-input::placeholder {
    color: rgba(196, 152, 106, 0.6);
}

.bb-zoek-input:focus {
    border-color: rgba(196, 152, 106, 0.7);
    background: rgba(255, 255, 255, 0.15);
}

.bb-zoek-resultaten {
    position: absolute;
    top: calc(100% + 8px);
    right: 40px;
    width: 320px;
    background: #fff;
    border: 1px solid #ddd0c0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(61, 44, 26, 0.18);
    padding: 0.3rem 0;
    z-index: 300;
    max-height: 360px;
    overflow-y: auto;
}

.bb-zoek-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: none;
    border-bottom: 1px solid #F0E8DA;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s;
}

.bb-zoek-item:last-child { border-bottom: none; }
.bb-zoek-item:hover { background-color: #FEF5E4; }
.bb-zoek-naam { font-weight: 600; font-size: 0.875rem; color: #3D2C1A; }
.bb-zoek-cat { font-size: 0.75rem; color: #A64E17; white-space: nowrap; flex-shrink: 0; }
.bb-zoek-leeg { padding: 0.85rem 1rem; font-size: 0.875rem; color: #999; font-style: italic; }

/* ── Vestiging badge ───────────────────────────────────────────── */

.bb-vestiging-badge {
    position: relative;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(196, 152, 106, 0.25);
    border-radius: 20px;
    color: #D4B896;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 400px;
    overflow: visible;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s;
}

button.bb-vestiging-badge:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(196, 152, 106, 0.5);
}

.bb-vestiging-badge.bb-vestiging-single {
    cursor: default;
}

.bb-vestiging-badge .bi-geo-alt-fill { font-size: 0.8rem; flex-shrink: 0; color: #A64E17; }
.bb-vestiging-badge .bi-geo-alt      { font-size: 0.8rem; flex-shrink: 0; color: #C4986A; }

.bb-vestiging-tooltip {
    color: #ECD5AB;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

.bb-vestiging-chevron {
    font-size: 0.65rem;
    color: #C4986A;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.bb-picker-open .bb-vestiging-chevron {
    transform: rotate(180deg);
}

/* ── Vestiging picker dropdown ─────────────────────────────────── */

.bb-vestiging-picker {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: #2E2018;
    border: 1px solid rgba(196, 152, 106, 0.35);
    border-radius: 10px;
    min-width: 240px;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    z-index: 1100;
    overflow: hidden;
}
@media (min-width: 641px) {
    .bb-vestiging-picker {
        left: auto;
        right: 1rem;
        transform: none;
    }
}

.bb-vestiging-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #C4986A;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.bb-vestiging-picker-item:last-child { border-bottom: none; }

.bb-vestiging-picker-item:hover {
    background: rgba(255,255,255,0.08);
    color: #ECD5AB;
}

.bb-vestiging-picker-item.actief {
    color: #fff;
    font-weight: 700;
}

.bb-vestiging-picker-item .bi-check2  { color: #A64C01; font-size: 1rem; }
.bb-vestiging-picker-item .bi-shop    { color: #7A6040; font-size: 0.85rem; }

.bb-vestiging-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    touch-action: manipulation;
}

/* ── Wissel vestiging overlay ──────────────────────────────────── */

.bb-wissel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(50, 34, 18, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.bb-wissel-kaart {
    background: #FFFAEA;
    border: 2px solid #ECD5AB;
    border-radius: 18px;
    padding: 2.5rem 3rem;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    min-width: 280px;
    max-width: 90vw;
}

.bb-wissel-spinner .bi {
    font-size: 2.8rem;
    color: #A64C01;
    display: block;
    animation: bb-spin 0.75s linear infinite;
}

@keyframes bb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bb-wissel-tekst {
    color: #7A6040;
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.bb-wissel-vestiging {
    color: #3D2C1A;
    font-size: 1.2rem;
    font-weight: 700;
}

/* ── Uitlogknop ────────────────────────────────────────────────── */

.bb-uitlog-knop {
    flex-shrink: 0;
    opacity: 0.8;
    transition: background-color 0.15s, opacity 0.15s;
}

.bb-uitlog-knop:hover {
    opacity: 1;
    background-color: rgba(180, 40, 20, 0.25) !important;
}

.bb-uitlog-knop .bi {
    color: #C4986A;
}

.bb-uitlog-knop:hover .bi {
    color: #F0C090;
}

@media (max-width: 640px) {
    .bb-uitlog-label {
        display: none;
    }
}

/* ── Wachtwoord wijzigen knop ─────────────────────────────────── */

.bb-wachtwoord-knop {
    flex-shrink: 0;
    opacity: 0.8;
    transition: background-color 0.15s, opacity 0.15s;
}

.bb-wachtwoord-knop:hover {
    opacity: 1;
}

.bb-wachtwoord-knop .bi {
    color: #C4986A;
}

.bb-wachtwoord-knop:hover .bi {
    color: #F0C090;
}

@media (max-width: 640px) {
    .bb-wachtwoord-label {
        display: none;
    }
}

/* ── Email status bolletje ────────────────────────────────────── */

.bb-email-status-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bb-email-dot {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #3D2C1A;
}

.bb-email-dot-groen { background-color: #4CAF50; }
.bb-email-dot-rood  { background-color: #E53935; }

/* ── Recept modal overlay ──────────────────────────────────────── */

.bb-recept-overlay {
    position: fixed;
    inset: 0;
    background: rgba(61, 44, 26, 0.55);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    padding: 1.5rem;
}

.bb-recept-modal {
    background: #FFFAEA;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(61, 44, 26, 0.3);
    width: 100%;
    max-width: 580px;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem;
}

.bb-recept-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ECD5AB;
}

.bb-recept-titel { font-size: 1.3rem; font-weight: 700; color: #3D2C1A; margin: 0 0 0.3rem; }

.bb-recept-cat {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: #A64E17;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.bb-special-einddatum {
    display: block;
    font-size: 0.75rem;
    color: #A64C01;
    margin-top: 2px;
}

.bb-recept-sluiten {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: rgba(61, 44, 26, 0.08);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    color: #3D2C1A;
    flex-shrink: 0;
    transition: background 0.15s;
}

.bb-recept-sluiten:hover { background: rgba(166, 78, 23, 0.15); color: #A64E17; }

.bb-recept-sectie-titel {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #55601C;
    margin: 0 0 0.65rem;
}

.bb-recept-bereiding {
    background: #FCF4E1;
    border-left: 3px solid #A64E17;
    border-radius: 0 6px 6px 0;
    padding: 0.9rem 1rem 0.5rem;
    margin-bottom: 1.25rem;
    color: #3D2C1A;
}

.bb-recept-stappen { margin: 0; padding: 0 0 0 1.25rem; display: flex; flex-direction: column; gap: 0; }
.bb-recept-stappen li { font-size: 1rem; line-height: 1.5; padding: 0.55rem 0; border-bottom: 1px solid rgba(166, 78, 23, 0.15); color: #3D2C1A; }
.bb-recept-stappen li:last-child { border-bottom: none; }
.bb-recept-stappen li::marker { font-weight: 700; color: #A64E17; font-size: 0.95rem; }
.bb-recept-ingredienten { margin-bottom: 0.5rem; }
.bb-recept-lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.bb-recept-lijst li { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid #ECD5AB; font-size: 0.875rem; }
.bb-recept-lijst li:last-child { border-bottom: none; }
.bb-recept-hoeveelheid { font-weight: 700; color: #A64E17; min-width: 80px; text-align: right; flex-shrink: 0; font-size: 0.82rem; }
.bb-recept-ing-naam { color: #3D2C1A; }

/* ── DE pagina-container ──────────────────────────────────────────
   Eén breedte voor élke pagina (sessie 118). Was: 900 (Dashboard, Statistieken,
   Instellingen…), 1100 (HACCP, Labelbeheer), 1200 (Omzetbeheer), 700 (Verwerking
   log), 680 (Kassa opmaken) — vijf maten zonder reden. Géén eigen horizontale
   padding: die komt van .bb-content in MainLayout (2rem desktop, 0.75rem ≤640px).
   Zet er nergens een tweede laag overheen; dat stapelde eerder op tot 1.75rem op
   mobiel. Tabellen die niet passen scrollen binnen hun eigen wrapper
   (overflow-x: auto), nooit de pagina. */
.bb-pagina {
    max-width: 900px;
    margin: 0 auto;
}

/* ── DE paginakop ────────────────────────────────────────────────
   Gerenderd door PaginaKop.razor; geen pagina heeft nog een eigen h1-stijl.
   Titel bruin, icoon terracotta, acties rechts. */
.bb-paginakop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}
/* Pill hoort strak onder de titel — de marge zit op de kop, niet op de pill, en
   alleen als er daadwerkelijk een pill volgt. */
.bb-paginakop:has(+ .vestiging-pill) {
    margin-bottom: 0.2rem;
}
.bb-paginakop-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bb-bruin);
}
.bb-paginakop-titel .bi {
    color: var(--bb-terracotta);
}
.bb-paginakop-acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   CHALLENGE BALK — globaal zodat ChallengeBalk component
   geen eigen .razor.css nodig heeft
   ═══════════════════════════════════════════════════════════════ */

.challenge-balk {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Balk loopt door tot onder de home-indicator; 52px + safe-area is zijn echte hoogte. */
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bb-bruin);
    color: #fff;
    z-index: 190; /* onder topnav (200), boven content */
    cursor: pointer;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
    touch-action: manipulation;
}

.challenge-balk-collapsed {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    min-height: 52px;
    max-width: 900px;   /* uitlijnen met app-shell */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.challenge-balk-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.challenge-trophy {
    color: #f0c040;
    font-size: 1.1rem;
}

.challenge-naam {
    font-weight: 700;
    font-size: 0.95rem;
}

.challenge-teller {
    font-size: 0.85rem;
    opacity: 0.75;
}

.challenge-progressbar-wrap {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
}

.challenge-progressbar-inner {
    height: 100%;
    background: linear-gradient(90deg, #55601C, #A6C030);
    border-radius: 5px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.challenge-balk-rechts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.challenge-pct {
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
}

.challenge-chevron {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* ── Dagstand-balk (X-afslag, sessie 97) — challenge-balk-patroon, feiten-only ──
   Bewust GEEN voortgangsvulling / kleur-oordeel / delta: het systeem toont, oordeelt niet. */
.dagstand-balk {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    /* Balk loopt door tot onder de home-indicator; 52px + safe-area is zijn echte hoogte. */
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bb-bruin);
    color: #fff;
    z-index: 190;
    cursor: pointer;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
    touch-action: manipulation;
}
.dagstand-balk:focus, .dagstand-balk:focus-visible { outline: none; }
/* Vanglaag: vangt klik-buiten → sluit de uitklap; onderliggende actie vuurt niet. */
.dagstand-backdrop {
    position: fixed; inset: 0;
    z-index: 189;   /* net onder de balk (190) → boven de paginacontent */
    background: transparent;
}
/* Binnen/Terras-splitsing — hoort bij de huidige stand: direct onder de hoofdregel,
   vóór de scheidslijn van het details-blok. Gedempt/kleiner. */
.dagstand-split {
    font-size: 0.82rem; opacity: 0.75;
    padding: 4px 20px 8px; max-width: 900px; margin: 0 auto; box-sizing: border-box;
}
.dagstand-split b { font-weight: 700; opacity: 1; }
/* Geselecteerde staaf licht op (neutraal, geen oordeel). */
.dagstand-staaf-kol.geselecteerd .dagstand-staaf { background: rgba(255,255,255,0.85); }
/* Detailregel: vaste plek + hoogte (geen layout-shift bij klikken). */
.dagstand-staaf-detail {
    margin-top: 20px; font-size: 0.85rem; min-height: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.10); padding-top: 8px;
}
.dagstand-detail-leeg { opacity: 0.5; }
.dagstand-collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    min-height: 52px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.dagstand-links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dagstand-bagel { font-size: 1.1rem; flex-shrink: 0; }
.dagstand-tekst { font-size: 0.92rem; }
.dagstand-tekst b { font-weight: 700; }
.dagstand-tijd { opacity: 0.65; font-size: 0.82rem; }
.dagstand-chevron { font-size: 0.8rem; opacity: 0.6; flex-shrink: 0; }
.dagstand-details {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 14px 20px 18px;
    cursor: default;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}
.dagstand-verhaal-kop { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.dagstand-verhaal-zin { font-size: 0.88rem; line-height: 1.45; margin: 0 0 4px; }
.dagstand-verhaal-zin.gedempt { opacity: 0.6; }
.dagstand-verloop {
    margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 10px; padding-bottom: 18px;   /* ruimte voor uur-labels onder de staafjes */
}
.dagstand-halfuren-kop {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.6; margin-bottom: 8px;
}
.dagstand-staafjes { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.dagstand-staaf-kol {
    flex: 1; height: 100%; position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.dagstand-staaf {
    width: 100%; min-height: 2px;
    background: rgba(255,255,255,0.35);   /* neutraal — geen oordeel-kleur */
    border-radius: 2px 2px 0 0;
}
.dagstand-staaf-label { position: absolute; bottom: -15px; font-size: 0.62rem; opacity: 0.55; }

/* Uitgeklapte details */
.challenge-details {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 16px 20px 20px;
    cursor: default;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

.challenge-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.challenge-detail-blok {
    min-width: 180px;
    flex: 1;
}

.challenge-detail-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 3px;
}

.challenge-detail-waarde {
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Handmatig turven */
.challenge-turven {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.challenge-turven-label {
    font-size: 0.88rem;
    opacity: 0.85;
}

.challenge-turven-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

.challenge-turven-btn:hover:not(:disabled) { background: rgba(255,255,255,0.25); }
.challenge-turven-btn:disabled { opacity: 0.35; cursor: default; }

.challenge-turven-aantal {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}

.challenge-turven-opslaan {
    padding: 0.38rem 1rem;
    background: var(--bb-terracotta);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.challenge-turven-opslaan:hover { background: var(--bb-terracotta-hover); }

.challenge-melding {
    margin-top: 8px;
    font-size: 0.88rem;
    color: #A6C030;
    font-weight: 600;
}

/* ── Challenges beheer pagina ───────────────────────────────────── */

/* Formulierkaart */
.challenge-form-card {
    background: #fff;
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.challenge-form-titel {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin: 0 0 1.25rem;
}

.challenge-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.challenge-form-rij {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.challenge-form-rij label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bb-tekst-zacht);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.challenge-form-rij--full {
    grid-column: 1 / -1;
}

.bb-input {
    border: 1.5px solid var(--bb-border);
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.bb-input:focus {
    outline: none;
    border-color: var(--bb-terracotta);
    background: #fff;
}

textarea.bb-input { resize: vertical; }

/* Artikelen */
.challenge-artikelen { display: flex; flex-direction: column; gap: 8px; }

.challenge-artikel-rij {
    display: flex;
    gap: 8px;
    align-items: center;
}

.challenge-artikel-input { flex: 1; }

.challenge-artikel-verwijder {
    padding: 0.4rem 0.6rem;
    background: #fff0f0;
    border: 1px solid #f0b8b8;
    border-radius: 6px;
    color: #c0392b;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.challenge-artikel-verwijder:hover { background: #fde0e0; }

.challenge-artikel-hint {
    font-size: 0.75rem;
    color: #999;
    margin-top: 4px;
    font-style: italic;
}

.challenge-artikel-toevoeg-btn {
    align-self: flex-start;
    padding: 0.35rem 0.85rem;
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--bb-bruin);
    cursor: pointer;
    font-family: inherit;
}

.challenge-artikel-toevoeg-btn:hover { background: var(--bb-beige); }

.challenge-fout {
    color: #c0392b;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.challenge-form-acties {
    display: flex;
    gap: 10px;
    margin-top: 0.5rem;
}

.challenge-opslaan-btn {
    padding: 0.5rem 1.25rem;
    background: var(--bb-terracotta);
    color: #fff;
    border: none;
    border-radius: var(--bb-radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.challenge-opslaan-btn:hover { background: var(--bb-terracotta-hover); }

.challenge-annuleer-btn {
    padding: 0.5rem 1.1rem;
    background: #fff;
    color: #666;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.challenge-annuleer-btn:hover { background: var(--bb-beige-licht); }

/* Kaarten overzicht */
.challenge-leeg {
    text-align: center;
    color: #aaa;
    padding: 3rem 0;
    font-size: 0.9rem;
    font-style: italic;
}

.challenge-kaart {
    background: #fff;
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.challenge-kaart.actief {
    border-color: var(--bb-groen);
    border-left: 4px solid var(--bb-groen);
}

.challenge-kaart.inactief { opacity: 0.7; }

.challenge-kaart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.challenge-kaart-naam {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bb-bruin);
    margin-right: 6px;
}

.challenge-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 4px;
}

.challenge-badge.actief { background: var(--bb-groen); color: #fff; }
.challenge-badge.afgelopen { background: #999; color: #fff; }
.challenge-badge.gepland { background: var(--bb-terracotta); color: #fff; }

.challenge-type-badge { font-size: 0.78rem; color: #888; }

.challenge-kaart-acties { display: flex; gap: 6px; flex-shrink: 0; }

.challenge-kaart-btn {
    padding: 0.3rem 0.6rem;
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--bb-bruin);
    cursor: pointer;
}

.challenge-kaart-btn:hover { background: var(--bb-beige); }

.challenge-kaart-btn-danger { background: #fff0f0; border-color: #f0b8b8; color: #c0392b; }
.challenge-kaart-btn-danger:hover { background: #fde0e0; }

.challenge-kaart-periode { font-size: 0.8rem; color: #999; margin-bottom: 6px; }

.challenge-kaart-beschrijving { font-size: 0.88rem; color: var(--bb-bruin); margin-bottom: 10px; }

.challenge-kaart-progressbar-wrap {
    height: 8px;
    background: var(--bb-beige);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.challenge-kaart-progressbar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--bb-groen), #A6C030);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.challenge-kaart-score { font-size: 0.8rem; color: #888; margin-bottom: 4px; }

.challenge-kaart-artikelen { font-size: 0.76rem; color: #aaa; font-style: italic; }

/* Ruimte onderaan zodat content niet achter de challenge balk valt */

/* Behaald badge in de ingeklapte balk */
.challenge-behaald-badge {
    font-size: 0.78rem;
    font-weight: 700;
    background: #f0c040;
    color: #3D2C1A;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Progressbar kleur als doel behaald */
.challenge-progressbar-behaald {
    background: linear-gradient(90deg, #f0c040, #f5d060) !important;
}

/* Confetti sectie in uitgeklapte balk */
.challenge-confetti-sectie {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.challenge-confetti-btn {
    padding: 0.45rem 1.25rem;
    background: #f0c040;
    color: #3D2C1A;
    border: none;
    border-radius: var(--bb-radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.1s, background 0.15s;
    flex-shrink: 0;
}

.challenge-confetti-btn:hover {
    background: #f5d060;
    transform: scale(1.05);
}

.challenge-confetti-btn:active {
    transform: scale(0.97);
}

.challenge-behaald-tekst {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f0c040;
}

@media (max-width: 600px) {
    .challenge-form-grid { grid-template-columns: 1fr; }
    .challenge-balk-collapsed { padding: 10px 12px; gap: 8px; }
}

/* ══ RESPONSIVE — mobiel (≤640px) ═════════════════════════════════
   Galaxy Xcover7 (360px), kleine Android (480px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* TopNav: alleen icoontjes, geen tekst */
    .bb-topnav-inner    { padding: 0 0.6rem; gap: 0; }
    .bb-topnav-logo     { margin-right: 0.4rem; }
    .bb-topnav-label    { display: none; }
    .bb-topnav-links    { gap: 0; }
    .bb-topnav-link     { padding: 0.5rem 0.6rem; gap: 0; }
    .bb-topnav-link span:not([class]) { display: none; } /* verberg tekst, hou icoon */

    /* Vestiging badge mobiel: alleen pin-icoon + chevron, naam verborgen */
    .bb-vestiging-tooltip { display: none; }
    .bb-vestiging-badge   { padding: 0.38rem 0.5rem; }

    /* Single-vestiging (Vestiging-account): altijd naam tonen, ook op mobiel */
    .bb-vestiging-single .bb-vestiging-tooltip { display: inline; }

    /* Picker op mobiel: gecentreerd via fixed positioning in basis-CSS */



    /* Pagina-shell: geen extra padding */

    /* Actie balk knoppen */
    .actie-balk {
        padding: 0.6rem 0;
        gap: 0.4rem;
    }
    .actie-balk-rij {
        gap: 0.4rem;
    }
    .btn-primair {
        font-size: 0.88rem;
        padding: 0.55rem 1rem;
    }
    .btn-secundair {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }
    .btn-link-terugkeer {
        font-size: 0.78rem;
        padding: 0.25rem 0.25rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Gedeelde component-stijlen — zoekblokken, bestelronde, modals
   (Gebruikt door ReceptuurThtZoekblokken.razor + BestelrondeWizard.razor)
   ══════════════════════════════════════════════════════════════════ */

/* ── Knoppen (gedeeld) ── */
.btn-primair {
    padding: 0.6rem 1.5rem;
    background: var(--bb-terracotta);
    color: white;
    border: none;
    border-radius: var(--bb-radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}
.btn-primair:hover { background: var(--bb-terracotta-hover); }

.btn-besteld { background: var(--bb-groen); margin-left: auto; }
.btn-besteld:hover { background: #3d4614; }

.btn-secundair {
    padding: 0.6rem 1.25rem;
    background: white;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
}
.btn-secundair:hover { background: var(--bb-beige-licht); }

/* ── Meldingen (gedeeld) ── */
.melding-waarschuwing {
    background: #fff8ec;
    border-left: 4px solid var(--bb-terracotta);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.melding-info {
    background: var(--bb-beige-licht);
    border-left: 4px solid var(--bb-groen);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

/* ── Actie balk (gedeeld) ── */
.actie-balk {
    position: sticky;
    bottom: 0;
    background: var(--bb-crème);
    border-top: 1px solid var(--bb-border);
    padding: 0.75rem 0 max(0.75rem, env(safe-area-inset-bottom));
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Bovenste rij: terugkeer-link + secundaire knoppen naast elkaar */
.actie-balk-rij {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Secundaire knoppen in de rij mogen krimpen */
.actie-balk-rij .btn-secundair,
.actie-balk-rij a.btn-secundair {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Primaire knop altijd volle breedte */
.actie-balk .btn-primair {
    width: 100%;
    text-align: center;
}

/* ── Zoekblokken ── */
.zoek-blokken {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: var(--bb-blok-gap);
}
.zoek-blok {
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bb-border);
    background: white;
}
/* .zoek-blok-tht kreeg een groene rand — verwijderd; alle zoekblokken delen één rand. */

/* ── Kaarttitel op het dashboard ──────────────────────────────────
   Stond scoped in Dashboard.razor.css en gold daardoor NIET voor de zoekblokken
   (Receptuur/THT/Allergenen/Melding) — die zijn een eigen component. Hun titels
   waren dus ongestyled. Zelfde opzet als PaginaKop, een maat kleiner: vet, icoon
   in terracotta. Emoji horen hier niet; die schalen niet mee en zijn per platform
   anders. */
.kaart-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.kaart-icoon { font-size: 1.1rem; color: var(--bb-terracotta); flex-shrink: 0; }
.kaart-naam  { font-weight: 700; font-size: 1rem; color: var(--bb-tekst); flex: 1; }

.zoek-blok .kaart-header { margin-bottom: 0.75rem; }

.zoek-invoer-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.zoek-invoer {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    outline: none;
    transition: border-color 0.15s;
}
.zoek-invoer:focus { border-color: var(--bb-terracotta); background: white; }
.zoek-invoer::placeholder { color: #aaa; }

.zoek-wis {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #aaa;
    padding: 0.2rem;
    line-height: 1;
}
.zoek-wis:hover { color: var(--bb-terracotta); }

.zoek-resultaten {
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}
.zoek-resultaat-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--bb-border);
    text-align: left;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    transition: background 0.1s;
}
.zoek-resultaat-btn:last-child { border-bottom: none; }
.zoek-resultaat-btn:hover      { background: var(--bb-beige-licht); }
.zoek-res-naam { font-weight: 600; color: var(--bb-bruin); display: block; }
.zoek-res-cat  { font-size: 0.75rem; color: #888; }
.zoek-leeg     { font-size: 0.83rem; color: #aaa; padding: 0.4rem 0; font-style: italic; }

/* ── Stap indicator ── */
.stap-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
}
.stap-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.stap-nr {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #e0e0e0; color: #888;
    font-size: 0.85rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.stap-label { font-size: 0.75rem; color: #888; font-weight: 500; }
.stap-item.stap-actief .stap-nr    { background: var(--bb-groen); color: white; }
.stap-item.stap-actief .stap-label { color: var(--bb-groen); font-weight: 700; }
.stap-item.stap-gedaan .stap-nr    { background: var(--bb-groen-licht); color: white; }
.stap-lijn { flex: 1; height: 2px; background: #e0e0e0; margin: 0 0.5rem; margin-bottom: 1rem; }
.stap-lijn.stap-gedaan { background: var(--bb-groen-licht); }

/* ── Leverancier filter banner ── */
.leverancier-filter-banner {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-radius: 8px;
    margin-bottom: 1rem; font-size: 0.9rem; font-weight: 600;
}
.banner-factory { background: var(--bb-beige-licht); border-left: 4px solid var(--bb-terracotta); color: var(--bb-terracotta); }
.banner-hanos   { background: #eef1e0; border-left-color: var(--bb-groen); color: var(--bb-groen); }

/* ── Voorraad tellen ── */
.voortgang-balk-wrapper {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem; font-size: 0.85rem; color: #666;
}
.voortgang-balk { flex: 1; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.voortgang-vulling { height: 100%; background: var(--bb-groen); transition: width 0.3s; }

.groep-kop {
    font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--bb-tekst-zacht); margin: 1.5rem 0 0.5rem;
}
.voorraad-lijst { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0; }
.voorraad-rij {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bb-border); border-radius: 6px;
    background: white; font-size: 0.9rem;
}
.voorraad-rij.geteld { background: var(--bb-beige-licht); border-color: var(--bb-groen-licht); }
.voorraad-rij-hoofd {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.voorraad-rij-invoer {
    display: flex; align-items: center; gap: 0.5rem;
}
.ing-naam    { font-weight: 500; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ing-eenheid { font-size: 0.88rem; font-weight: 600; color: var(--bb-tekst); min-width: 2.5rem; }
.voorraad-rij input {
    padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 4px;
    font-size: 0.95rem; width: 90px; text-align: right;
}

/* ── IJzeren voorraad — verwijderknop ── */
.ijzer-verwijder-knop {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    font-size: 0.85rem;
    flex-shrink: 0;
    touch-action: manipulation;
}
.ijzer-verwijder-knop:hover { color: #c0392b; }

.ijzer-verwijder-ja {
    background: #c0392b;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}
.ijzer-verwijder-nee {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    cursor: pointer;
    touch-action: manipulation;
    color: #666;
}

/* ── Besteladvies tabel ── */
.resultaat-header {
    background: var(--bb-beige-licht); padding: 0.6rem 1rem;
    border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem;
}
.bestel-tabel {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
    margin-bottom: 1.5rem; table-layout: fixed;
}
.bestel-tabel th {
    background: var(--bb-beige-licht); color: var(--bb-tekst-zacht);
    text-align: left; padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--bb-border); font-size: 0.8rem;
}
.bestel-tabel td { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--bb-border); vertical-align: middle; }
.bestel-tabel th:first-child, .bestel-tabel td:first-child { width: 45%; }
.bestel-tabel th:not(:first-child), .bestel-tabel td:not(:first-child) { width: 13.75%; text-align: center; }
.col-center   { text-align: center; }
.col-verbruik { color: #aaa; font-size: 0.82rem; }
/* Eenheid kolom bestel-tabel */
.bestel-tabel .col-eenh {
    width: 52px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bb-tekst);
    white-space: nowrap;
}
/* Padding-bottom zodat laatste rijen niet achter actie-balk verdwijnen */
.bestel-wizard-inhoud {
    padding-bottom: 160px;
}
.advies-cel   { font-size: 0.9rem; color: #aaa; }
.verbruik-cel { color: #bbb; font-style: italic; }
.geen-telling { color: #ccc; }
.bestel-invoer {
    width: 5rem; text-align: center; border: 1px solid var(--bb-border);
    border-radius: 6px; padding: 0.25rem 0.4rem; font-size: 1rem;
    background: #fff;
}
.bestel-invoer:focus { outline: none; border-color: var(--bb-terracotta); }
.bestel-regel td { background: #f8faee; }
.nul-regel td    { color: #ccc; }
.btn-link-terugkeer { background: none; border: none; color: var(--bb-tekst-zacht); font-size: 0.85rem; cursor: pointer; padding: 0.4rem 0.5rem; text-decoration: none; font-weight: 500; flex-shrink: 0; white-space: nowrap; }
.btn-link-terugkeer:hover { color: var(--bb-tekst); }
.btn-direct-besteld { background: none; border: none; color: #aaa; font-size: 0.78rem; cursor: pointer; padding: 0.25rem 0.5rem; margin-top: 0.35rem; text-decoration: underline; display: block; }
.btn-direct-besteld:hover { color: #555; }
.kaart-melding-info { font-size: 0.8rem; color: #8a6030; margin-top: 0.5rem; line-height: 1.4; }
.eenheid-badge {
    display: inline-block; margin-left: 0.4rem; font-size: 0.78rem; color: #444;
    background: var(--bb-beige); padding: 0.15rem 0.4rem; border-radius: 3px;
    font-weight: 600; border: 1px solid var(--bb-border);
}

/* ── Besteld bevestiging ── */
.besteld-bevestiging {
    text-align: center; padding: 3rem 2rem;
    background: white; border: 1px solid var(--bb-border);
    border-radius: 10px; margin-top: 1rem;
}
.besteld-icoon { font-size: 3rem; margin-bottom: 1rem; }
.besteld-sub   { font-size: 0.88rem; color: #888; margin-top: 0.5rem; }
.besteld-knoppen { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Receptuur modal ── */
.bb-recept-overlay {
    position: fixed; inset: 0;
    background: rgba(30, 20, 10, 0.55);
    z-index: 1000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 80px 1rem 2rem;
    overflow-y: auto;
    touch-action: manipulation;
}
.bb-recept-modal {
    background: white; border-radius: 12px;
    width: 100%; max-width: 860px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 1.75rem 2rem;
}
.bb-recept-modal-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 1.25rem; gap: 1rem;
}
.bb-recept-titel  { font-size: 1.35rem; font-weight: 700; color: var(--bb-bruin); margin: 0 0 0.25rem; }
.bb-recept-cat {
    font-size: 0.82rem; color: #888;
    background: var(--bb-beige-licht); padding: 0.15rem 0.6rem;
    border-radius: 20px; border: 1px solid var(--bb-border);
}
.bb-recept-sluiten {
    flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 50%; border: 1px solid var(--bb-border);
    background: var(--bb-crème); color: var(--bb-bruin);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; transition: background 0.15s;
}
.bb-recept-sluiten:hover { background: var(--bb-beige-licht); }
.bb-recept-sectie-titel {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--bb-tekst-zacht); margin: 0 0 0.75rem;
}
.bb-recept-bereiding { background: var(--bb-beige-licht); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.bb-recept-stappen { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.bb-recept-stappen li { font-size: 0.9rem; color: var(--bb-bruin); line-height: 1.5; }
.bb-recept-ingredienten { border: 1.5px solid var(--bb-border); border-radius: 8px; padding: 1rem 1.25rem; }
.bb-recept-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bb-recept-lijst li {
    display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.9rem;
    padding: 0.25rem 0; border-bottom: 1px solid var(--bb-beige-licht);
}
.bb-recept-lijst li:last-child { border-bottom: none; }
.bb-recept-hoeveelheid { min-width: 70px; font-weight: 700; color: var(--bb-terracotta); font-size: 0.85rem; }
.bb-recept-ing-naam    { color: var(--bb-bruin); }

/* ── THT modal ── */
.tht-modal-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.tht-modal-sectie { border: 1.5px solid var(--bb-border); border-radius: 8px; padding: 0.85rem 1.1rem; background: white; }
.tht-modal-sectie-accent      { background: var(--bb-beige-licht); border-color: var(--bb-terracotta); }
.tht-modal-sectie-waarschuwing { background: #fff8ec; border-color: #f59f00; }
.tht-modal-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--bb-tekst-zacht); margin-bottom: 0.5rem;
}
.tht-modal-sectie-waarschuwing .tht-modal-label { color: #7d5700; }
.tht-modal-waarde { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--bb-bruin); }
.tht-modal-locatie  { font-weight: 600; }
.tht-modal-tht-badge {
    display: inline-block; background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border); border-radius: 4px;
    padding: 0.15rem 0.55rem; font-size: 0.8rem; font-weight: 600; color: var(--bb-tekst-zacht);
}
.tht-modal-houdbaar {
    display: inline-block; background: #e8f4d9;
    border: 1px solid var(--bb-groen-licht); border-radius: 4px;
    padding: 0.15rem 0.55rem; font-size: 0.8rem; font-weight: 600; color: var(--bb-groen);
}
.tht-modal-info { font-style: italic; color: #555; }

/* ── Debug label (gedeeld) ── */
.debug-label {
    display: inline-block; margin-left: 0.5rem;
    background: #fff3cd; color: #7d5700;
    font-size: 0.72rem; font-weight: 600;
    padding: 0.1rem 0.4rem; border-radius: 3px; border: 1px solid #f59f00;
}

/* ══ RESPONSIVE — component-stijlen (≤640px) ══ */
@media (max-width: 640px) {
    .zoek-blokken { grid-template-columns: 1fr; gap: 0.75rem; }
    .bb-recept-overlay { padding: 70px 0.5rem 1.5rem; }
    .bb-recept-modal   { max-width: 100%; padding: 1rem; max-height: 90vh; overflow-y: auto; }

    /* Roosteradvies overlay mobiel */
    .ra-input    { width: 72px; font-size: 0.88rem; }
    .ra-input-sm { width: 60px; font-size: 0.88rem; }
    .ra-input-xs { width: 44px; font-size: 0.88rem; padding: 0.2rem; }
    .ra-normen-tabel-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; }
    .ra-instelling-tabel { display: block; }
    .ra-instelling-tabel tbody { display: block; }
    .ra-instelling-tabel tr:not(.ra-rij-driekolom) { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #f0e8d8; }
    .ra-instelling-tabel tr:not(.ra-rij-driekolom) td:first-child { flex: 1; font-size: 0.88rem; }
    .ra-instelling-tabel tr:not(.ra-rij-driekolom) td:last-child { flex-shrink: 0; }
    .ra-tabel-eenheid { font-size: 0.78rem; }

    /* Bestel-tabel mobiel: gewone tabel, geen kaartjes */
    .bestel-tabel { font-size: 0.78rem; }
    .bestel-tabel th { font-size: 0.68rem; padding: 0.35rem 0.3rem; }
    .bestel-tabel td { padding: 0.35rem 0.3rem; }
    .bestel-tabel th:first-child,
    .bestel-tabel td:first-child { width: auto; font-size: 0.82rem; word-break: break-word; }
    .bestel-tabel th:nth-child(2),
    .bestel-tabel td:nth-child(2) { width: 34px; }
    .bestel-tabel .col-eenh { width: 36px; font-size: 0.72rem; }
    .bestel-invoer { width: 3.5rem; font-size: 0.88rem; padding: 0.2rem 0.25rem; }
    .nul-regel { display: none; }

    /* Uithaallijst tabel mobiel */
    .uithaal-dag-header { grid-template-columns: repeat(7, 1fr); gap: 0.15rem; width: 100%; }
    .uithaal-rij-velden { grid-template-columns: repeat(7, 1fr); gap: 0.15rem; width: 100%; }
    .uithaal-dag-input { font-size: 0.78rem; padding: 0.2rem 0.05rem; }
    .uithaal-naam-input { font-size: 0.85rem; }
}

/* ── Slot-icoon naast Instellingen ── */
.bb-slot-icoon {
    font-size: 0.78rem;
    margin-left: 0.3rem;
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 0.15s;
}
.bb-slot-icoon:hover { opacity: 1; }

/* ── Pin modal (Instellingen ontgrendelen) ── */
.bb-pin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.bb-pin-modal {
    background: white;
    border-radius: 14px;
    padding: 2rem 1.75rem;
    width: 280px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
.bb-pin-modal-titel {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin-bottom: 0.4rem;
}
.bb-pin-uitleg {
    font-size: 0.82rem;
    color: #999;
    margin-bottom: 1.1rem;
}
.bb-pin-invoer {
    width: 100%;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.4em;
    padding: 0.5rem 0.25rem;
    border: 2px solid var(--bb-border);
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    color: var(--bb-bruin);
}
.bb-pin-invoer:focus {
    outline: none;
    border-color: var(--bb-terracotta);
}
.bb-pin-fout {
    color: #b91c1c;
    font-size: 0.84rem;
    font-weight: 600;
    margin-top: 0.35rem;
}

/* ── Dagkaart leveranciersnaam ─────────────────────────────────────
   .dag-scope flex al ingesteld in Dashboard.razor.css
   Hier alleen de tekst-stijl voor de naam-span
   ──────────────────────────────────────────────────────────────── */
.dag-scope {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-height: 2rem;
    justify-content: center;
}

.dag-lev {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: inherit;
    opacity: 0.8;
    line-height: 1.3;
}

/* ── Rooster upload (BestellingUpload) ─────────────────────────── */
.rooster-upload-vak {
    border: 2px dashed var(--bb-border);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    margin: 0.5rem 0 1rem;
    background: var(--bb-crème);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rooster-upload-vak:hover {
    border-color: var(--bb-terracotta);
    background: var(--bb-beige-licht);
}

.rooster-file-input {
    display: block;
    width: 100%;
    font-size: 0.9rem;
    color: var(--bb-tekst-zacht);
    cursor: pointer;
}

.rooster-bestand-naam {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: var(--bb-groen);
    font-weight: 600;
}
/* ═══════════════════════════════════════════════════════
   ALLERGENEN ZOEKPAGINA
   ═══════════════════════════════════════════════════════ */

.allergenen-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem 1rem 6rem 1rem;
}

.allergenen-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bb-donkerbruin);
    margin-bottom: 0.2rem;
}

.allergenen-subtitel {
    color: #666;
    font-size: 0.92rem;
    margin-bottom: 1.2rem;
}

/* ── Zoekbalk ─────────────────────────────────────────── */
.allerg-zoek-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.allerg-zoek-input-rij {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--bb-beige);
    border-radius: 14px;
    padding: 0 0.75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}

.allerg-zoek-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.85rem 0.5rem;
    font-size: 1.05rem;
    color: var(--bb-donkerbruin);
    outline: none;
    min-width: 0;
}

@supports (-webkit-touch-callout: none) {
    .allerg-zoek-input { font-size: 16px; }
}

.allerg-wis-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 1.1rem;
    padding: 0.4rem;
    cursor: pointer;
    line-height: 1;
}

/* ── Suggesties dropdown ──────────────────────────────── */
.allerg-suggesties {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--bb-beige);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 100;
    overflow: hidden;
}

.allerg-suggestie-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: var(--bb-donkerbruin);
    cursor: pointer;
    border-bottom: 1px solid #f0ebe0;
}

.allerg-suggestie-item:last-child { border-bottom: none; }
.allerg-suggestie-item:active { background: var(--bb-creme); }

/* ── Chips (geselecteerde allergenen) ────────────────── */
.allerg-chips-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.allerg-chips-label {
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
}

.allerg-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #A64C01;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.45rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.allerg-chip:active { background: #8a3e00; }

.dieet-chip {
    background: #55601C;
}

.allerg-alles-wis {
    background: none;
    border: 1.5px solid #ccc;
    border-radius: 20px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    color: #888;
    cursor: pointer;
}

/* ── Snelknoppen (beginscherm) ───────────────────────── */
.allerg-snelknoppen-titel {
    font-size: 0.85rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}

.allerg-snelknoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.allerg-snelknop {
    background: #fff;
    border: 2px solid var(--bb-beige);
    border-radius: 25px;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    color: var(--bb-donkerbruin);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: border-color 0.15s, background 0.15s;
}

.allerg-snelknop:active,
.allerg-snelknop:hover {
    border-color: #A64C01;
    background: #fff8f0;
}

.allerg-snelknop.dieet {
    border-color: #AFB376;
    background: #f8faf0;
}

.allerg-snelknop.dieet:active {
    background: #eef2dc;
    border-color: #55601C;
}

/* ── Resultaten ──────────────────────────────────────── */
.allerg-resultaten {
    margin-top: 0.5rem;
}

.allerg-sectie-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.allerg-sectie-titel.groen {
    background: #e8f5e9;
    color: #2e7d32;
}

.allerg-sectie-titel.oranje {
    background: #fff3e0;
    color: #e65100;
}

.allerg-categorie-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    margin: 0.75rem 0 0.4rem 0;
}

.allerg-kaarten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.allerg-kaart {
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    font-size: 0.92rem;
}

.allerg-kaart.veilig {
    background: #f0faf0;
    border: 1.5px solid #a5d6a7;
}

.allerg-kaart.sporen {
    background: #fff8f0;
    border: 1.5px solid #ffcc80;
}

.allerg-kaart-naam {
    font-weight: 600;
    color: var(--bb-donkerbruin);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.allerg-kaart-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

.allerg-kaart-sporen-info {
    font-size: 0.78rem;
    color: #e65100;
    margin-top: 0.2rem;
    line-height: 1.3;
}

.badge-vegan  { background: #55601C; color: #fff; border-radius: 8px; padding: 1px 6px; font-size: 0.72rem; font-weight: 600; }
.badge-veg    { background: #AFB376; color: #fff; border-radius: 8px; padding: 1px 6px; font-size: 0.72rem; font-weight: 600; }
.badge-zw     { background: #90caf9; color: #1a237e; border-radius: 8px; padding: 1px 6px; font-size: 0.72rem; font-weight: 600; }

/* ── Geen resultaat ──────────────────────────────────── */
.allerg-geen-resultaat {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #888;
}

.allerg-geen-resultaat i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

/* ── Mobiel (Xcover7) ────────────────────────────────── */
@media (max-width: 480px) {
    .allergenen-page { padding: 0.75rem 0.75rem 6rem 0.75rem; }
    .allerg-snelknop { font-size: 0.9rem; padding: 0.5rem 0.85rem; }
    .allerg-kaarten-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .allerg-zoek-input { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════
   ALLERGENEN ZOEKBLOK (in ReceptuurThtZoekblokken)
   ═══════════════════════════════════════════════════════ */

/* Derde zoekblok — zelfde breedte als de andere twee */
/* .zoek-blok-meldingen kreeg een bruine rand (#B45A1E) — verwijderd; deelt de uniforme rand. */

/* ── Chips (geselecteerde allergenen) ────────────────── */
.allerg-chips-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.allerg-chip-inline {
    background: #A64C01;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.allerg-chip-inline:active { background: #8a3e00; }

.allerg-chip-wis {
    background: none;
    border: 1.5px solid #ccc;
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    font-size: 0.82rem;
    color: #888;
    cursor: pointer;
}

/* ── Suggesties groep label ──────────────────────────── */
.allerg-sugg-groep-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    padding: 0.4rem 0.75rem 0.2rem;
}

.allerg-sugg-allergeen .zoek-res-cat {
    background: #fff3e0;
    color: #A64C01;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Dieet snelknoppen ───────────────────────────────── */
.allerg-dieet-knoppen {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.allerg-dieet-knop {
    background: #f8faf0;
    border: 1.5px solid #AFB376;
    border-radius: 20px;
    padding: 0.28rem 0.55rem;
    font-size: 0.8rem;
    color: #55601C;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.allerg-dieet-knop:active,
.allerg-dieet-knop.actief {
    background: #55601C;
    color: #fff;
    border-color: #55601C;
}

/* ── Bekijk-knop ────────────────────────────────────── */
.allerg-bekijk-btn {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    background: #55601C;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

.allerg-bekijk-btn:active { background: #3e4714; }

/* ── Allergenen resultaten overlay ──────────────────── */
.allerg-overlay-modal {
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.allerg-overlay-sectie {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    margin: 0.75rem 0 0.5rem;
}

.allerg-overlay-sectie.groen {
    background: #e8f5e9;
    color: #2e7d32;
}

.allerg-overlay-sectie.oranje {
    background: #fff3e0;
    color: #e65100;
}

.allerg-overlay-cat {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    margin: 0.5rem 0 0.3rem;
}

.allerg-overlay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.allerg-overlay-kaart {
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    transition: filter 0.1s;
    touch-action: manipulation;
}

.allerg-overlay-kaart:active { filter: brightness(0.93); }

.allerg-overlay-kaart.veilig {
    background: #f0faf0;
    border: 1.5px solid #a5d6a7;
}

.allerg-overlay-kaart.sporen {
    background: #fff8f0;
    border: 1.5px solid #ffcc80;
}

.allerg-overlay-naam {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bb-donkerbruin, #3D2C1A);
    line-height: 1.3;
}

.allerg-overlay-badges {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.allerg-overlay-sporen-info {
    font-size: 0.75rem;
    color: #e65100;
    margin-top: 0.2rem;
    line-height: 1.3;
}

.allerg-overlay-leeg {
    text-align: center;
    padding: 2rem 1rem;
    color: #888;
    font-size: 1rem;
}

/* ── Product detail tabel ────────────────────────────── */
.allerg-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.badge-vegan  { background: #55601C; color: #fff; border-radius: 10px; padding: 3px 10px; font-size: 0.82rem; font-weight: 600; }
.badge-veg    { background: #AFB376; color: #fff; border-radius: 10px; padding: 3px 10px; font-size: 0.82rem; font-weight: 600; }
.badge-zw     { background: #90caf9; color: #1a237e; border-radius: 10px; padding: 3px 10px; font-size: 0.82rem; font-weight: 600; }
.badge-niet-zw { background: #fde8e8; color: #b91c1c; border-radius: 10px; padding: 3px 10px; font-size: 0.82rem; font-weight: 600; }

.allerg-product-tabel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.allerg-product-rij {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 7px;
    font-size: 0.9rem;
}

.allerg-rij-bevat  { background: #fee2e2; }
.allerg-rij-sporen { background: #fff8f0; }
.allerg-rij-geen   { background: #f8f8f8; }

.allerg-product-icoon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}

.allerg-rij-bevat  .allerg-product-icoon { color: #b91c1c; font-weight: 700; }
.allerg-rij-sporen .allerg-product-icoon { color: #c2570c; font-weight: 700; }
.allerg-rij-geen   .allerg-product-icoon { color: #2e7d32; }

.allerg-product-naam-rij {
    flex: 1;
    font-weight: 500;
    color: #333;
}

.allerg-product-status-tekst {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
}

.allerg-rij-bevat  .allerg-product-status-tekst { color: #b91c1c; font-weight: 600; }
.allerg-rij-sporen .allerg-product-status-tekst { color: #c2570c; }

.allerg-product-noot {
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: #fff8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #c2570c;
    border-left: 3px solid #ffcc80;
}

/* ── Ingrediënten sectie in product detail ── */
.allerg-ing-sectie {
    margin-top: 1rem;
    border-top: 1px solid #ECD5AB;
    padding-top: 0.75rem;
}
.allerg-ing-titel {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6244;
    margin-bottom: 0.4rem;
}
.allerg-ing-rij {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 2px;
}
.allerg-ing-rij.ing-heeft-allergeen {
    background: #fff1f0;
}
.allerg-ing-rij.ing-heeft-sporen {
    background: #fff8f0;
}
.allerg-ing-naam {
    font-size: 0.9rem;
    color: #3D2C1A;
    min-width: 0;
    flex-shrink: 0;
}
.allerg-ing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.allerg-ing-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
}
.ing-badge-bevat {
    background: #fde8e8;
    color: #c0392b;
    border: 1px solid #f5c6c6;
}
.ing-badge-sporen {
    background: #fff3e0;
    color: #c2570c;
    border: 1px solid #ffcc80;
}
.allerg-ing-geen {
    font-size: 0.75rem;
    color: #aaa;
    font-style: italic;
}

/* ── Mobiel ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .allerg-overlay-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .allerg-product-status-tekst { display: none; } /* ruimte besparen op klein scherm */
    .allerg-rij-bevat  .allerg-product-status-tekst,
    .allerg-rij-sporen .allerg-product-status-tekst { display: block; } /* wel tonen als relevant */
}

/* ── Product samenvatting ────────────────────────────── */
.allerg-samenvatting {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.allerg-samenvatting-veilig {
    background: #e8f5e9;
    color: #2e7d32;
}

.allerg-samenvatting-bevat {
    background: #fef2f2;
    color: #333;
    border-left: 4px solid #dc2626;
}

.allerg-samenvatting-sporen {
    background: #fff8f0;
    color: #333;
    border-left: 4px solid #f59e0b;
}

.allerg-samenvatting strong {
    display: block;
    margin-bottom: 0.2rem;
}

.allerg-samenvatting-veilig-lijst {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #666;
}
/* ══ WEER BLOK IN DAGBRIEFING ══════════════════════════════════════ */

.briefing-weer {
    padding: 0;
}

.weer-kaart {
    background: #f9f6f2;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.weer-hoofd-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #f5f0e8;
    border-radius: 8px;
}

.weer-icoon-groot {
    font-size: 2.4rem;
    line-height: 1;
}

.weer-temp-blok {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.weer-temp {
    font-size: 1.6rem;
    font-weight: 700;
    color: #3D2C1A;
    line-height: 1.1;
}

.weer-gevoels {
    font-size: 0.78rem;
    color: #888;
}

.weer-details-inline {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: #7a6a5a;
}

/* ── Terras advies balk ─────────────────────────────────────────── */

.terras-advies {
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.terras-goed {
    background: rgba(85, 96, 28, 0.08);
    border: 1px solid rgba(85, 96, 28, 0.25);
    color: #55601C;
}

.terras-matig {
    background: rgba(180, 140, 0, 0.07);
    border: 1px solid rgba(180, 140, 0, 0.2);
    color: #7a6000;
}

.terras-slecht {
    background: rgba(166, 76, 1, 0.07);
    border: 1px solid rgba(166, 76, 1, 0.2);
    color: #8a3f00;
}

/* ── Locatie velden in Instellingen ─────────────────────────────── */

.vestiging-velden-twee {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .vestiging-velden-twee {
        grid-template-columns: 1fr;
    }
}
/* ── Groet in dagbriefing ────────────────────────────────────────── */

.briefing-groet {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3D2C1A;
    padding: 0.5rem 0 0.6rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    margin-bottom: 0.2rem;
}

/* ── Geen verdere info melding ───────────────────────────────────── */

.briefing-geen-info {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}
/* ── Compacte weerinfo in ingeklapte briefing-header ─────────────── */

.briefing-weer-compact {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
}

/* ── Verwerking log — globale stijlen (gebruikt in overlay én /verwerking-log) ── */

.log-melding {
    padding: 0.65rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.log-melding-ok    { background: #e8f5e9; color: #2e7d32; border-left: 3px solid #2e7d32; }
.log-melding-error { background: #fff3e0; color: #b71c1c; border-left: 3px solid #b71c1c; }

.log-leeg {
    font-size: 0.875rem;
    color: #999;
    font-style: italic;
    padding: 0.5rem 0;
}

.poll-lijst { display: flex; flex-direction: column; gap: 0.3rem; }

.poll-rij {
    display: grid;
    grid-template-columns: 1.2rem 8rem 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
}
.poll-ok   { background: #f0f7f0; color: #2e7d32; }
.poll-fout { background: #fff3f3; color: #c62828; }
.poll-icoon { font-weight: 700; text-align: center; }
.poll-tijd  { font-family: monospace; font-size: 0.8rem; opacity: 0.8; }

.log-verwijder-polls {
    margin-top: 0.5rem;
    background: none;
    border: 1px solid #ccc;
    color: #888;
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    cursor: pointer;
}
.log-verwijder-polls:hover { border-color: #999; color: #555; }

.log-dag-titel {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin: 1rem 0 0.5rem !important;
    text-transform: capitalize;
}

.log-kaarten { display: flex; flex-direction: column; gap: 0.5rem; }

.log-kaart {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e8e0d5;
    border-left: 4px solid transparent;
}
.log-kaart-ok   { border-left-color: #2e7d32; }
.log-kaart-fout { border-left-color: #e65100; opacity: 0.85; }

.log-kaart-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.log-type-icoon { font-size: 1rem; }
.log-type-naam  { font-weight: 600; font-size: 0.9rem; flex: 1; }

.log-badge { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 20px; }
.log-badge-ok   { background: #e8f5e9; color: #2e7d32; }
.log-badge-fout { background: #fff3e0; color: #e65100; }

.log-btn-verwijder {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; padding: 0.1rem 0.3rem;
    border-radius: 4px; color: #bbb; line-height: 1; margin-left: auto;
}
.log-btn-verwijder:hover { color: #c62828; background: #fff3f3; }

.log-bevestig-vraag {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: #555; margin-left: auto;
}
.log-btn-ja {
    background: #c62828; color: white; border: none;
    border-radius: 20px; padding: 0.2rem 0.65rem;
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.log-btn-ja:hover { background: #b71c1c; }
.log-btn-nee {
    background: none; border: 1px solid #ccc; border-radius: 20px;
    padding: 0.2rem 0.65rem; font-size: 0.78rem; color: #666; cursor: pointer;
}
.log-btn-nee:hover { border-color: #999; color: #333; }

.log-kaart-meta {
    display: flex; gap: 1.5rem;
    font-size: 0.78rem; color: #888;
    margin-bottom: 0.3rem; flex-wrap: wrap;
}
.log-kaart-melding { font-size: 0.82rem; color: #555; margin-top: 0.25rem; }

/* ═══════════════════════════════════════════════════════
   UITHAALLIJST — Instellingen overlay (bewerken)
   ═══════════════════════════════════════════════════════ */

.uithaal-tabel-wrapper {
    width: 100%;
}

.uithaal-dag-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    width: 100%;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    color: #3D2C1A;
    padding: 0.3rem 0;
    border-bottom: 2px solid #ECD5AB;
    margin-bottom: 0.5rem;
    text-align: center;
}
.uithaal-dag-header .uithaal-naam-kop { text-align: left; }

.uithaal-cat-titel {
    font-size: 0.82rem;
    font-weight: 700;
    color: #A64C01;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.75rem 0 0.25rem;
}

.uithaal-rij {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.5rem;
}

.uithaal-rij-naam {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.uithaal-rij-naam .uithaal-naam-input {
    flex: 1;
    min-width: 0;
}

.uithaal-rij-velden {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    align-items: center;
    width: 100%;
}

.uithaal-naam-input {
    padding: 0.3rem 0.5rem;
    border: 1px solid #d4c4a8;
    border-radius: 6px;
    font-size: 0.87rem;
    background: #fffaea;
    width: 100%;
    box-sizing: border-box;
}
.uithaal-naam-input:focus { outline: none; border-color: #A64C01; }

.uithaal-dag-input {
    width: 100%;
    padding: 0.3rem 0.2rem;
    border: 1px solid #d4c4a8;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
    background: #fffaea;
    box-sizing: border-box;
}
.uithaal-dag-input:focus { outline: none; border-color: #A64C01; }

.uithaal-verwijder-btn {
    background: none;
    border: none;
    color: #c44;
    cursor: pointer;
    padding: 0.3rem;
    font-size: 0.85rem;
    border-radius: 4px;
}
.uithaal-verwijder-btn:hover { background: #fdd; }

.uithaal-nieuw-balk {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #ECD5AB;
    flex-wrap: nowrap;
}
.uithaal-naam-flex {
    flex: 1;
    width: auto !important;
    min-width: 0;
}
.uithaal-toevoegen-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.uithaal-opslaan-balk {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}
.uithaal-cat-select {
    padding: 0.35rem 0.6rem;
    border: 1px solid #d4c4a8;
    border-radius: 6px;
    font-size: 0.87rem;
    background: #fffaea;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   UITHAALLIJST — DagBriefing knop + overlay
   ═══════════════════════════════════════════════════════ */

.briefing-uithaal-sectie {
    padding: 0;
}

.briefing-uithaal-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #3D2C1A;
    color: #ECD5AB;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.briefing-uithaal-btn:hover { background: #A64C01; }

.uithaal-overlay-modal {
    max-width: 480px;
    max-height: 90vh;       /* fallback */
    max-height: 90svh;      /* small viewport — fix voor iOS Safari URL-balk-issue */
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Extra ruimte onder de Opslaan-knop op iPhones met dynamic island/home-indicator. */
    padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1rem));
}

.uithaal-overlay-cat {
    font-size: 0.8rem;
    font-weight: 700;
    color: #A64C01;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.85rem 0 0.3rem;
}

.uithaal-overlay-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0e8d8;
}
.uithaal-overlay-rij:last-child { border-bottom: none; }

.uithaal-overlay-rij.uithaal-afgevinkt .uithaal-overlay-naam {
    text-decoration: line-through;
    color: #999;
}

.uithaal-overlay-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    flex: 1;
}
.uithaal-overlay-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    accent-color: #A64C01;
    flex-shrink: 0;
}
.uithaal-overlay-naam {
    font-size: 0.92rem;
}

.uithaal-overlay-aantal {
    font-size: 0.88rem;
    font-weight: 700;
    color: #3D2C1A;
    min-width: 2rem;
    text-align: right;
}

.uithaal-overlay-uitleg {
    font-size: 0.8rem;
    color: #6b5b45;
    background: #f5ede0;
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    margin-bottom: 0.5rem;
}

.uithaal-overlay-opmerking {
    font-size: 0.78rem;
    color: #5a4a1a;
    background: #fef9e7;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.4rem;
}

/* IJzeren voorraad overlay */
/* ── THT koppeling — Instellingen overlay ── */
.uithaal-tht-balk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0 0.5rem 0.2rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    border-bottom: 1px solid #f0e8d8;
    margin-bottom: 0.1rem;
}
.uithaal-tht-label {
    color: #888;
    flex-shrink: 0;
}
.uithaal-tht-gekoppeld {
    font-weight: 600;
    color: #3D2C1A;
}
.uithaal-tht-hint {
    color: #999;
    font-size: 0.75rem;
}
.uithaal-tht-wis {
    background: none;
    border: none;
    color: #c44;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 0.2rem;
}
.uithaal-tht-zoek {
    flex: 1;
    min-width: 140px;
    padding: 0.2rem 0.5rem;
    border: 1px solid #d4c4a8;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #fffaea;
}
.uithaal-tht-zoek:focus { outline: none; border-color: #A64C01; }
.uithaal-tht-suggesties {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border: 1px solid #d4c4a8;
    border-radius: 4px;
    overflow: hidden;
}
.uithaal-tht-suggestie {
    background: none;
    border: none;
    border-bottom: 1px solid #f0e8d8;
    padding: 0.3rem 0.6rem;
    text-align: left;
    font-size: 0.8rem;
    cursor: pointer;
    color: #3D2C1A;
}
.uithaal-tht-suggestie:last-child { border-bottom: none; }
.uithaal-tht-suggestie:hover { background: #fdf5e6; }

/* ── THT info — DagBriefing overlay ── */
.uithaal-overlay-rij {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0e8d8;
    gap: 0.5rem;
}
.uithaal-overlay-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}
.uithaal-overlay-tht {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: 1.7rem;
}
.uithaal-tht-datum {
    font-size: 0.78rem;
    color: #A64C01;
    font-weight: 600;
}
.uithaal-tht-info {
    font-size: 0.75rem;
    color: #666;
}

/* ══ TAKEN BEHEERSCHERM ══════════════════════════════════════════════ */

.taken-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.taken-filter-select {
    max-width: 200px;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    background: #fffaea;
    color: #3D2C1A;
    font-size: 0.9rem;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}
.taken-filter-select:focus {
    outline: none;
    border-color: #A64C01;
    box-shadow: 0 0 0 2px rgba(166, 76, 1, 0.15);
}

.taken-filter-chips {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.taken-filter-chip {
    background: none; border: 1px solid #ECD5AB; border-radius: 20px;
    padding: 4px 14px; font-size: 0.82rem; color: #5a4a35; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.taken-filter-chip:hover  { background: #f5ecd8; }
.taken-filter-chip.actief { background: #A64C01; color: white; border-color: #A64C01; }

.taken-cat-titel {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3D2C1A;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9rem 0 0.35rem;
    border-top: 2px solid #ECD5AB;
    margin-top: 1rem;
}
.taken-cat-titel:first-of-type { border-top: none; margin-top: 0; padding-top: 0.2rem; }

.taken-rij {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0e8d5;
}
.taken-rij-inactief { opacity: 0.45; }

.taken-rij-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.taken-naam-rij {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.taken-naam {
    font-weight: 600;
    font-size: 0.92rem;
    color: #3D2C1A;
}
.taken-uitleg-hint {
    font-size: 0.85rem;
    color: var(--bb-terracotta);
    cursor: help;
    flex-shrink: 0;
}
.btn-nieuw-taak { border: none !important; box-shadow: none !important; }

.taken-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.taken-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    white-space: nowrap;
}
.taken-badge-cat      { background: #f5ecd8; color: #3D2C1A; }
.taken-badge-freq     { background: #e8f0e0; color: #55601C; }
.taken-badge-prio     { background: #f0ece4; color: #666; }
.taken-badge-vestiging { background: #ece8ff; color: #444; }
.taken-badge-inactief { background: #f0e0e0; color: #a00; }

.taken-prio-normaal  { background: #f0ece4; color: #666; }
.taken-prio-hoog     { background: #fff3cd; color: #856404; }
.taken-prio-kritiek  { background: #fde8e8; color: #b00; }

/* ── Taken formulier ── */
.taken-form { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }

.taken-form-rij { display: flex; flex-direction: column; gap: 0.25rem; }
.taken-form-rij label { font-size: 0.82rem; font-weight: 600; color: #3D2C1A; }
.taken-form-hint { font-weight: 400; color: #888; }

.taken-form-rij-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.taken-form-rij-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }

.form-control-smal { max-width: 6rem; }

.taken-form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: #3D2C1A;
    cursor: pointer;
}

.taken-freq-knoppen { display: flex; gap: 0.4rem; }
.taken-freq-btn {
    padding: 0.3rem 0.75rem;
    border: 1px solid #ECD5AB;
    border-radius: 20px;
    background: #fffaea;
    color: #3D2C1A;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.taken-freq-btn.actief {
    background: #3D2C1A;
    color: #fff;
    border-color: #3D2C1A;
}

/* ══ TAKEN EXPORT ════════════════════════════════════════════════════ */

.taken-export-filterbalk {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.taken-export-filter-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}
.taken-export-filter-categorieën label:first-child {
    font-size: 0.8rem;
    font-weight: 600;
    color: #3D2C1A;
    display: block;
    margin-bottom: 4px;
}
.taken-export-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 150px;
}
.taken-export-filter-item label { font-size: 0.8rem; font-weight: 600; color: #3D2C1A; }

.taken-export-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.taken-export-count { font-size: 0.85rem; color: #888; }

.taken-export-print-header {
    display: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: #3D2C1A;
}

.taken-export-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.taken-export-tabel th {
    background: #f5ecd8;
    color: #3D2C1A;
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 2px solid #ECD5AB;
}
.taken-export-tabel td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #f0e8d5;
    vertical-align: top;
    color: #333;
}
.taken-export-tabel tr:hover td { background: #fffaea; }

/* ── Print stijlen ── */
.export-print-wrapper { width: 100%; }
.export-print-header  { display: none; }

@media print {
    /* HACCP drukte alleen z'n kop af. Hier stond ".haccp-shell > *:not(.export-print-wrapper)
       :not(.export-print-header)", wat ÉLK direct kind van de pagina verborg behalve een class
       die nergens in de markup bestaat. De HACCP-onderdelen die verderop weer op display:block
       worden gezet zijn afstammelingen van die verborgen kinderen — en dat kan display:none
       niet terugdraaien. Nu verbergen we alleen de schermelementen; de filterbalk en de knoppen
       dragen daarvoor al .no-print. */
    .no-print,
    .bb-topnav,
    .bb-layout-sidebar,
    nav,
    .instellingen-shell > *:not(.export-print-wrapper),
    .bb-paginakop,
    .vestiging-pill { display: none !important; }

    .export-print-wrapper  { display: block !important; }
    .export-print-header   { display: block !important; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.6; }
    .taken-export-header   { display: none !important; }
    .taken-export-tabel    { font-size: 10pt; }
    .taken-export-tabel th { background: #ddd !important; }
    body { background: white !important; }
}

.export-rij-afwijking    { background: #fff5f5; }
.export-rij-afwijking td { color: #c53030; }
.export-leeg             { color: #718096; font-style: italic; }

/* ══ TAAKBLOKKEN DAGBRIEFING ════════════════════════════════════════ */

.bb-taak-blok {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 8px;
    border: 1px solid var(--bb-border);
    transition: all 0.2s;
    touch-action: manipulation;
}

/* Losstaand dashboardblok (Schoonmaak, Temperatuur): dezelfde tussenruimte als elke
   andere dashboardkaart. De kale .bb-taak-blok houdt 8px, want die vorm wordt OOK
   binnen de DagBriefing-kaart gebruikt (DagBriefing.razor:357) - daar is strak
   stapelen juist de bedoeling. Sessie 112b. */
.bb-taak-blok.bb-blok-dashboard {
    margin-top: 0;
    margin-bottom: var(--bb-blok-gap);
}
/* Status via de achtergrond-tint, niet via een afwijkende randkleur — één rand overal
   (sessie 108). "Actie vereist" = de warme tint; inactief = gedempt. */
/* Ruststand = hetzelfde kaartje als het reserveringenblok. MetingenBlok zet altijd
   .bb-taak-actief (of een van z'n varianten) en overschrijft dit dus. */
.bb-taak-blok    { background: var(--bb-beige-licht); }
.bb-taak-actief  { background: #fff8f3; }
/* TE LAAT = dagtaken van gisteren niet afgevinkt. Zelfde waarschuwingspaar als
   .bb-meting-waarschuwing, zodat "er moet iets gebeuren" er overal gelijk uitziet. */
.bb-taak-telaat  { background: #fffaf0; }
.bb-taak-inactief { background: #f9f9f9; opacity: 0.75; }
.bb-taak-blok:hover { opacity: 1; filter: brightness(0.97); }

.bb-taak-blok-icoon { font-size: 1.4rem; flex-shrink: 0; color: #A64C01; width: 28px; text-align: center; }
.bb-taak-blok-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.bb-taak-blok-tekst {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #3D2C1A;
}
.bb-taak-blok-tekst strong { font-size: 0.95rem; }
.bb-taak-compleet { color: #38a169; font-size: 1rem; line-height: 1; }
.bb-taak-badges-rij {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 22px;
}
.bb-taak-blok-tijd  { font-size: 0.75rem; color: #999; white-space: nowrap; }
.bb-taak-weektaken-badge {
    background: #e53e3e;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ══ TAAK OVERLAY RIJEN ════════════════════════════════════════════ */

.bb-taak-rij {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.bb-taak-gedaan {
    background: #f0faf0;
    border-radius: 8px;
    padding: 10px;
    margin: 2px 0;
}
.bb-taak-naam        { font-weight: 600; font-size: 0.9rem; color: #3D2C1A; }
.bb-taak-naam-gedaan { color: #276749; text-decoration: none; }
.bb-taak-gedaan-sub  { font-size: 0.75rem; color: #55601C; margin-top: 2px; }

.bb-taak-kritiek-balk { width: 5px; border-radius: 3px; flex-shrink: 0; align-self: stretch; background: #e53e3e; }
.bb-taak-hoog-balk    { width: 5px; border-radius: 3px; flex-shrink: 0; align-self: stretch; background: #A64C01; }

.bb-taak-cirkel {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #cbd5e0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: all 0.15s;
}
.bb-taak-cirkel:hover    { border-color: #A64C01; }
.bb-taak-cirkel-gedaan   { border-color: #38a169; background: #f0faf0; color: #38a169; cursor: default; }

/* ── Dagbeloning ─────────────────────────────────────────────────── */
.bb-beloning-kaart {
    border: 2px solid #38a169;
    border-radius: 12px;
    background: #f0faf0;
    padding: 20px;
    text-align: center;
    margin-bottom: 8px;
}
.bb-beloning-tekst {
    font-size: 1.1rem;
    color: #276749;
    margin-bottom: 12px;
}
.bb-beloning-confetti-btn {
    background: #38a169;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 0.9rem;
}

.bb-taak-uitleg-btn {
    background: none;
    border: none;
    color: #A64C01;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
    touch-action: manipulation;
}
/* Gevulde ⓘ als er een bijlage is (geen tweede pill) */
.bb-taak-uitleg-btn.heeft-bijlage {
    background: #A64C01;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bb-taak-uitleg-tekst {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #666;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 6px 8px;
}
/* Bijlage-kaarten in het uitleg-paneel */
.bb-taak-bijlagen { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.bb-taak-bijlage-kaart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFAEA;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    padding: 7px 10px;
    color: #3D2C1A;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}
.bb-taak-bijlage-kaart .bi { color: #A64C01; }

.bb-taak-meetwaarde-invoer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.bb-taak-eenheid       { font-size: 0.85rem; color: #555; }
.btn-opslaan-klein     { padding: 0.25rem 0.75rem; font-size: 0.82rem; }

/* Frequentiebadges */
.bb-badge-d { background: #e2e8f0; color: #4a5568; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.bb-badge-w { background: #ebf4ff; color: #2b6cb0; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.bb-badge-m { background: #f3e8ff; color: #6b46c1; padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }

/* ── Naamregel ── */
.bb-naam-regel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.bb-naam-bewerk-btn {
    background: none;
    border: none;
    color: #A64C01;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
}
.bb-naam-fout { font-size: 0.8rem; color: #e53e3e; }

/* Foutstaat van BedragInvoer. Onzin in een bedragveld wordt zichtbaar gemeld in plaats
   van stil 0 te worden — dat laatste wiste eerder wat de gebruiker had getypt. */
/* ── Bedragvelden (.ko-input) ───────────────────────────────────────────────
   STOND SCOPED in Kassaopmaken.Razor.css en bereikte BedragInvoer daardoor NIET: scoped CSS
   geldt alleen voor markup die de pagina zélf rendert, en sinds 6349b89 (5 sep 2026) komen de
   dertien bedragvelden uit een kindcomponent. Ze vielen dus terug op de kale browser-input —
   wit met een donkere rand — binnen een crème wrapper. Het naamveld op stap 1 zag er wél goed
   uit, want dat rendert de pagina nog zelf; precies daarom viel het niet meteen op.
   Een GEDEELD component mag nooit leunen op de scoped CSS van een pagina, dus deze regels
   horen hier. .ko-input-euro (de wrapper) blijft wél scoped: dat is paginamarkup. */
.ko-input {
    border: 1.5px solid var(--bb-beige, #ECD5AB);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    font-size: 1rem;
    background: var(--bb-creme, #FCF4E1);
    color: var(--bb-bruin, #3D2C1A);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ko-input:focus {
    border-color: var(--bb-terracotta, #A64C01);
    box-shadow: 0 0 0 3px rgba(166,76,1,0.1);
    background: #fff;
}
/* Binnen de euro-wrapper is de rand van de WRAPPER het kader; het veld zelf is naadloos. */
.ko-input-euro .ko-input {
    border: none;
    border-radius: 0;
    background: transparent;
    padding-left: 0;
    box-shadow: none !important;
}
.ko-veld--compact .ko-input {
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
}

/* iOS tekende bij focus z'n eigen ring/afwerking op het invoerveld; binnen .ko-input-euro
   (overflow: hidden) bleven daar twee blauwe verticale streepjes van over. De zichtbare focus is
   de terracotta rand van de wrapper (:focus-within), dus de ring op het veld zelf mag weg.
   BEWUST NIET: border: none (Begintotaal en het Omzetbeheer-veld staan los — daar is de eigen
   rand het enige kader) en box-shadow: none (dat is juist de focusgloed van .ko-input:focus bij
   die losse velden; binnen de wrapper staat hij al op none !important). */
.bedrag-invoer {
    -webkit-appearance: none;
    appearance: none;
}
.bedrag-invoer:focus,
.bedrag-invoer:focus-visible {
    outline: none;
}

.bedrag-fout        { border-color: #e53e3e !important; background: #fff5f5 !important; }
.bedrag-foutmelding { font-size: 0.8rem; color: #e53e3e; margin-top: 0.25rem; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}
.bb-naam-shake { animation: shake 0.35s ease; }

/* ── NaamKiezer: het gedeelde "wie ben jij?"-blok (bestellen + schoonmaak) ──
   Bewust in app.css en niet scoped: het component wordt vanuit meerdere pagina's
   gerenderd en scoped CSS van een ouder bereikt een kindcomponent niet. */
.naamkiezer-vraag { font-size: 0.8rem; color: #6b5744; margin-bottom: 6px; }
.naamkiezer-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Functiekeuze ── */
.taken-functie-sectie {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
}
.taken-functie-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.taken-functie-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    background: white;
    cursor: pointer;
    font-size: 0.88rem;
    transition: all 0.15s;
}
.taken-functie-chip.actief {
    border-color: #A64C01;
    background: #fff8f3;
    color: #3D2C1A;
    font-weight: 600;
}
.taken-rooster-match {
    font-size: 0.85rem;
    color: #2f855a;
    background: #f0faf0;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
}
.taken-andere-functie-link {
    background: none;
    border: none;
    color: #A64C01;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.taken-badge-functie { background: #fff3cd; color: #856404; }
.taken-badge-weekdagen { background: #e8f0da; color: #3a4a10; font-size: 0.7rem; letter-spacing: 0.03em; }

/* ── Weekdagen knoppen (bewerken formulier) ── */
.taken-weekdagen { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.taken-weekdag-btn {
    padding: 0.3rem 0.6rem;
    border: 1px solid #ECD5AB;
    border-radius: 20px;
    background: #FFFAEA;
    color: #3D2C1A;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.taken-weekdag-btn.actief {
    background: #55601C;
    color: #fff;
    border-color: #55601C;
}

/* ── Print uitbreidingen ── */
@media print {
    .bb-taak-blok { display: none !important; }
}

/* ── Uitvink bevestiging ── */
.bb-taak-uitvink-bevestig {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #666;
}
.bb-taak-uitvink-ja {
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #e53e3e;
    background: #fff5f5;
    color: #e53e3e;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.bb-taak-uitvink-nee {
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f7fafc;
    color: #718096;
    font-size: 0.8rem;
    cursor: pointer;
}
.taken-uitleg-textarea { min-height: 100px; resize: vertical; font-size: 0.95rem; }

.btn-opslaan {
    padding: 0.4rem 1rem;
    background: #A64C01;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s;
}
.btn-opslaan:hover { background: #8a3e01; }

.btn-nieuw-taak { box-shadow: none !important; }

.btn-beheer {
    background: none; border: none; color: #5a6a72;
    cursor: pointer; padding: 6px 8px; border-radius: 6px;
    font-size: 1rem; line-height: 1; transition: background 0.15s, color 0.15s;
}
.btn-beheer:hover { background: #f0e8d5; color: #3D2C1A; }

.btn-verwijder {
    background: none; border: none; color: #e53e3e;
    cursor: pointer; padding: 6px 8px; border-radius: 6px;
    font-size: 1rem; line-height: 1; opacity: 0.55; transition: opacity 0.2s;
}
.btn-verwijder:hover { opacity: 1; }
.taken-toon-inactief { font-size: 0.85rem; color: #718096; cursor: pointer; display: flex; align-items: center; gap: 5px; }

@keyframes badge-klaar-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes badge-klaar-shimmer {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* Voortgangschips van het schoonmaakblok — ÉÉN stijl voor vandaag/deze week/deze maand.
   Hier stond een Tailwind-amberschaal (#f59e0b / #c2410c / #92400e) die nergens anders in
   de app voorkwam en bovendien een oplopende urgentie suggereerde die er niet is: een
   maandtaak is niet dringender dan een dagtaak. Het GETAL is wat nog openstaat, de
   VULLING is het gedane deel van die categorie. */
.bb-taak-chip {
  position: relative; overflow: hidden;
  border-radius: 12px; padding: 3px 10px; font-size: 0.78rem; cursor: pointer;
  background: #fff; color: var(--bb-groen); border: 1px solid var(--bb-groen-licht);
}
.bb-taak-chip::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bb-groen-licht); opacity: 0.35;
  width: var(--pct, 0%); border-radius: 12px; transition: width 0.4s ease;
}
.bb-taak-chip::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  opacity: 0;
}
/* Alleen de vieringsanimatie — kleur blijft die van de chip, want vol = klaar. */
.bb-taak-chip-klaar         { animation: badge-klaar-pop 0.35s ease; }
.bb-taak-chip-klaar::before { width: 100%; }
.bb-taak-chip-klaar::after  { opacity: 1; animation: badge-klaar-shimmer 0.7s ease 0.2s forwards; }

.bb-taak-koppeling   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.bb-koppeling-link   { color: var(--bb-oranje, #A64C01); font-size: 0.85rem; text-decoration: none; }
.bb-koppeling-link:hover { text-decoration: underline; }
.bb-koppeling-btn {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 36px; height: 36px;
    border: 1px solid #ECD5AB; border-radius: 8px;
    color: #A64C01; font-size: 1rem; text-decoration: none;
    background: #FFFAEA;
}
.bb-koppeling-btn:hover { background: #ECD5AB; }

/* ══ LEVERANCIER PLANNING ══════════════════════════════════════════ */
.briefing-bestelling-gemist { background: #fff5f5; border-left: 3px solid #e53e3e; color: #c53030; }

/* ── Leveranciers tab (herbouwd) ── */
.lev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
    .lev-grid { grid-template-columns: 1fr; }
}

.lev-kaart {
    background: #fff;
    border: 1px solid #ECD5AB;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lev-kaart-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lev-kaart-icoon { font-size: 1.4rem; }
.lev-kaart-naam  { font-size: 1.1rem; font-weight: 700; color: #3D2C1A; }

.lev-sectie-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #A64C01;
}

.lev-dag-rij { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.lev-dag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid #ECD5AB;
    background: #f9f6f2;
    font-size: 0.78rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
    touch-action: manipulation;
}
.lev-dag-chip.actief {
    background: #A64C01;
    border-color: #A64C01;
    color: #fff;
}
.lev-dag-chip:hover { border-color: #A64C01; color: #A64C01; }
.lev-dag-chip.actief:hover { background: #8a3f00; border-color: #8a3f00; color: #fff; }

.lev-deadline-hint { font-size: 0.78rem; color: #999; margin-top: -0.25rem; }

.lev-details {
    border-top: 1px solid #ECD5AB;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}
.lev-details-summary {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3D2C1A;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    user-select: none;
}
.lev-details-summary::-webkit-details-marker { display: none; }
.lev-details-summary::after { content: "▼"; font-size: 0.6rem; color: #aaa; margin-left: auto; }
details[open] .lev-details-summary::after { content: "▲"; }
.lev-url-hint { font-weight: 400; color: #999; font-size: 0.78rem; }

.lev-details-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.lev-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
    background: #fafafa;
}
.lev-input:focus { outline: none; border-color: #A64C01; background: #fff; }
.lev-notities { resize: vertical; }

.lev-ww-rij { display: flex; gap: 0.5rem; align-items: center; }
.lev-toon-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f6f2;
    cursor: pointer;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.lev-opslaan-rij { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; }

.lev-uitz-sectie {
    margin-top: 0.5rem;
    padding-top: 1rem;
}

/* ── Bestaande leverancier planning ── */
.lev-planning-blok { margin-bottom: 1.2rem; }
.lev-dag-tabel { border-collapse: collapse; width: 100%; margin-top: 0.4rem; }
.lev-dag-tabel th,
.lev-dag-tabel td { text-align: center; padding: 4px 6px; font-size: 0.85rem; }
.lev-type-label { text-align: left; font-size: 0.82rem; color: #4a5568; width: 80px; }

.lev-uitz-tabel { width: 100%; font-size: 0.82rem; margin-bottom: 0.5rem; border-collapse: collapse; }
.lev-uitz-tabel td { padding: 4px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }

.lev-uitz-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 0.5rem; }
.lev-uitz-form input,
.lev-uitz-form select { font-size: 0.85rem; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: white; }

.export-cat-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.export-cat-groep  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.export-cat-balk   { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 0.5rem; }
.export-cat-scheiding { color: #cbd5e0; }
.export-cat-groep-label {
    font-size: 0.78rem; color: #718096; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: 0.05em; min-width: 40px;
}
.export-cat-check       { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.export-cat-check,
.export-cat-check * { font-size: 0.88rem !important; font-weight: 400 !important; }
.export-cat-check input { margin-right: 4px; }


/* ══ METINGEN ══════════════════════════════════════════════════════ */
.bb-meting-urgent       { border-color: #e53e3e !important; background: #fff5f5 !important; }
.bb-meting-waarschuwing { border-color: #dd6b20 !important; background: #fffaf0 !important; }
.bb-meting-gedaan       { border-color: #38a169; background: #f0faf0; }
.bb-meting-urgent-badge {
    background: #e53e3e; color: white;
    border-radius: 12px; padding: 2px 10px;
    font-size: 0.78rem; white-space: nowrap;
}

/* ── Metingen blok nieuwe layout ── */
.bb-meting-blok-nieuw {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    padding: 0.75rem 1rem !important;
}
.bb-meting-top-rij {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.bb-meting-titel {
    font-size: 0.95rem;
    color: #3D2C1A;
    flex: 1;
}
.bb-meting-subtekst {
    font-size: 0.82rem;
    color: #7a6a5a;
    padding-left: 2rem;
    line-height: 1.4;
}
.bb-meting-ok-badge {
    background: #38a169;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.bb-meting-waarschuwing-badge {
    background: #dd6b20;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Metingen tabs ── */
.meting-tabs { display: flex; gap: 0; margin: 0.75rem 0; border-bottom: 2px solid #ECD5AB; }
.meting-tab  {
    padding: 8px 16px; font-size: 0.9rem; border: none; background: none;
    color: #718096; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.meting-tab-actief { color: #A64C01; border-bottom-color: #A64C01; font-weight: 600; }
.meting-tab:hover  { color: #3D2C1A; }

/* ── Voortgangsbalk ── */
.meting-voortgang-balk {
    display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap;
}
.meting-stap-dot   { width: 20px; height: 6px; border-radius: 3px; background: #e2e8f0; transition: background 0.2s; }
.meting-stap-gedaan { background: #38a169; }
.meting-stap-actief { background: var(--bb-oranje, #A64C01); }
.meting-stap-open   { background: #e2e8f0; }
.meting-stap-teller { font-size: 0.78rem; color: #718096; margin-bottom: 1rem; }

/* ── Meetpunt info ── */
.meting-punt-naam { font-size: 1.4rem; font-weight: 700; color: #3d2c1a; margin-bottom: 4px; }
.meting-punt-type { font-size: 0.9rem; color: #718096; margin-bottom: 1.5rem; }

/* ── Invoer ── */
.meting-invoer-blok {
    display: flex; align-items: center; gap: 12px;
    justify-content: center; margin-bottom: 1.5rem;
}
.meting-temp-input {
    width: 110px; font-size: 2rem; font-weight: 600;
    text-align: center; border: 2px solid #e2e8f0;
    border-radius: 12px; padding: 10px 8px;
    color: #3d2c1a; background: white;
}
.meting-temp-input:focus {
    outline: none; border-color: var(--bb-oranje, #A64C01);
    box-shadow: 0 0 0 3px rgba(166,76,1,0.12);
}
.meting-temp-input::-webkit-outer-spin-button,
.meting-temp-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.meting-temp-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.meting-temp-input.meting-afwijking { border-color: #e53e3e; background: #fff5f5; color: #c53030; }
.meting-eenheid { font-size: 1.4rem; color: #718096; font-weight: 300; }

/* ── Afwijking ── */
.meting-afwijking-blok {
    background: #fff5f5; border: 1px solid #feb2b2;
    border-radius: 10px; padding: 12px; margin-bottom: 1rem;
}
.meting-afwijking-titel { font-weight: 600; color: #c53030; margin-bottom: 8px; font-size: 0.9rem; }
.meting-actie-input {
    width: 100%; min-height: 70px; border: 1px solid #fed7d7;
    border-radius: 8px; padding: 8px; font-size: 0.9rem;
    resize: vertical; background: white; box-sizing: border-box;
}
.meting-actie-input:focus { outline: none; border-color: #e53e3e; }

/* ── Knoppen ── */
.meting-knoppen {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #f0f0f0;
}
.meting-btn-vorige {
    background: white; border: 1px solid #e2e8f0; color: #4a5568;
    border-radius: 20px; padding: 8px 18px; cursor: pointer; font-size: 0.9rem;
}
.meting-btn-vorige:hover { background: #f7f7f7; }
.meting-btn-volgende { border-radius: 20px; padding: 8px 20px; }
.meting-btn-volgende:disabled { opacity: 0.4; cursor: not-allowed; }

.meting-succes-blok    { text-align: center; padding: 1rem 0; }
.meting-succes-icoon   { font-size: 2.5rem; margin-bottom: 0.5rem; }
.meting-succes-titel   { font-size: 1.2rem; font-weight: 700; color: #276749; }
.meting-succes-subtekst { color: #718096; font-size: 0.9rem; margin-top: 0.5rem; }

/* ── Goederenontvangst ── */
.meting-goederen-leverancier { margin-bottom: 1.5rem; }
.meting-goederen-titel       { font-size: 1rem; font-weight: 700; color: #3D2C1A; margin-bottom: 0.75rem; }
.goederen-cat-blok           {
    border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px; margin-bottom: 12px;
}
.goederen-cat-blok.goederen-cat-gedaan { border-color: #38a169; background: #f0faf0; }
.goederen-cat-titel          { font-weight: 600; margin-bottom: 10px; }
.meting-goederen-input       { width: 100%; margin-bottom: 0.5rem; }
.meting-check-label          { display: flex; align-items: center; gap: 8px; margin-bottom: 0.4rem; font-size: 0.9rem; cursor: pointer; }

/* ── Meetpunten tabel (Instellingen overlay) ── */
.meetpunt-tabel        { width: 100%; margin-top: 0.5rem; font-size: 0.88rem; }
.meetpunt-tabel-header {
    display: grid; grid-template-columns: 40px 1fr 90px 70px 40px;
    gap: 6px; font-weight: 600; color: #718096; padding: 4px 0; border-bottom: 1px solid #ECD5AB;
}
.meetpunt-tabel-rij    {
    display: grid; grid-template-columns: 40px 1fr 90px 70px 40px;
    gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid #f5f0e8;
}
.meetpunt-naam-input   { width: 100%; font-size: 0.85rem; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 6px; }
.meetpunt-type-select  { font-size: 0.82rem; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 4px; width: 100%; }
.meetpunt-temp-input   { width: 100%; font-size: 0.85rem; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 6px; text-align: center; }
.meetpunt-volgorde-knoppen { display: flex; flex-direction: column; gap: 2px; }
.meetpunt-volgorde-btn {
    background: #FDF9F2; border: 1px solid #ECD5AB; border-radius: 4px;
    padding: 0 5px; font-size: 0.65rem; cursor: pointer; color: #A64C01; line-height: 1.5;
    transition: background 0.15s;
}
.meetpunt-volgorde-btn:hover:not(:disabled) { background: #ECD5AB; }
.meetpunt-volgorde-btn:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 480px) {
    .meetpunt-tabel-header,
    .meetpunt-tabel-rij { grid-template-columns: 36px 1fr 72px 52px 36px; font-size: 0.8rem; }
}

/* ── Metingen overlay herbouwd ── */
.meting-lijst {
    display: flex; flex-direction: column; gap: 0.75rem;
    margin-top: 0.5rem;
    /* Geen eigen max-height/overflow — modal scrollt als één geheel,
       voorkomt dubbel scroll-niveau (analoog aan TaakOverlay). */
}
.meting-punt-blok {
    background: #fffaea; border: 1px solid #ECD5AB; border-radius: 10px; padding: 0.75rem 1rem;
}
.meting-punt-blok.meting-punt-afwijking { border-color: #e53e3e; background: #fff5f5; }
.meting-punt-blok-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.4rem; gap: 0.5rem;
}
.meting-punt-blok-naam { font-weight: 700; font-size: 0.95rem; color: #3D2C1A; }
.meting-punt-blok-type { font-size: 0.78rem; color: #888; white-space: nowrap; }
.meting-opgeslagen-check { color: #38a169; font-weight: 700; margin-left: 0.4rem; }
.meting-al-gemeten-banner {
    background: rgba(56,161,105,0.08); border: 1px solid #c6f6d5; border-radius: 8px;
    padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #276749;
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.meting-geen-leverancier { padding: 1.5rem; text-align: center; color: #666; }
.goederen-veld-rij { margin-bottom: 0.5rem; }
.goederen-label { font-size: 0.82rem; color: #718096; display: block; margin-bottom: 0.25rem; }
.goederen-checks { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.goederen-check-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }

/* ── Goederenontvangst knop in leverancierskaart ── */
.kaart-goederen-sectie {
    padding: 0.5rem 0 0;
    border-top: 1px solid rgba(236,213,171,0.5);
    margin-top: 0.5rem;
}
.btn-goederen-ontvangst {
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: #FAF3E4;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    color: #A64C01;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    touch-action: manipulation;
}
.btn-goederen-ontvangst:hover { background: #F5E8CC; }
.btn-goederen-gedaan {
    background: #f0faf4;
    border-color: #86efac;
    color: #166534;
}
.btn-goederen-gedaan:hover { background: #dcfce7; }
.kaart-goederen-geen-leverdag {
    font-size: 0.82rem;
    color: #aaa;
    padding: 0.25rem 0;
}

/* ── Export temperatuurmetingen sessies ── */
.export-subtitel { font-size: 1rem; font-weight: 600; color: #3d2c1a; margin: 1.5rem 0 0.5rem; }
.export-meting-sessie { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.export-sessie-afwijking { border-color: #feb2b2; }
.export-meting-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; cursor: pointer; background: #fafafa;
    font-size: 0.88rem; flex-wrap: wrap;
}
.export-meting-header:hover { background: #f5f5f5; }
.export-meting-chevron { color: #718096; font-size: 0.9rem; width: 16px; flex-shrink: 0; }
.export-meting-datum   { font-weight: 600; color: #3d2c1a; }
.export-meting-door    { color: #718096; }
.export-meting-count   { color: #718096; margin-left: auto; }
.export-meting-afwijking-badge {
    background: #fed7d7; color: #c53030;
    border-radius: 10px; padding: 2px 8px; font-size: 0.78rem; white-space: nowrap;
}
.export-meting-ok-badge {
    background: #c6f6d5; color: #276749;
    border-radius: 10px; padding: 2px 8px; font-size: 0.78rem; white-space: nowrap;
}
.export-meting-tabel { margin: 0; border-radius: 0; }
.export-meting-tabel td,
.export-meting-tabel th { border-top: 1px solid #e2e8f0; }
.export-meting-ingeklapt { display: none; }

.export-col-gecontroleerd { text-align: center; }

@media print {
    .export-meting-sessie     { break-inside: avoid; }
    .export-meting-ingeklapt  { display: block !important; }
    .export-meting-chevron    { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Statistieken pagina
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ── */

.stat-periode-label {
    font-size: 0.82rem;
    color: var(--bb-tekst-zacht);
    font-weight: 500;
}

/* ── Vestiging grid — drie naast elkaar op desktop ── */
.stat-vestiging-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Vestiging kaart ── */
.stat-vestiging-kaart {
    background: white;
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    padding: 1.1rem 1.1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.stat-kaart-goed {
    border-color: var(--bb-groen-licht);
    background: #fafff4;
}

/* ── Kaart header ── */
.stat-vestiging-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.stat-vestiging-naam {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bb-bruin);
    line-height: 1.3;
}

/* ── Status dot ── */
.stat-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.stat-dot-actief  { background: #38a169; box-shadow: 0 0 0 3px rgba(56,161,105,0.2); }
.stat-dot-recent  { background: #d69e2e; box-shadow: 0 0 0 3px rgba(214,158,46,0.2); }
.stat-dot-inactief { background: #cbd5e0; }

/* ── Gebruiker chips ── */
.stat-gebruikers-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stat-gebruiker-chip {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.stat-chip-actief {
    background: #f0fff4;
    border-color: var(--bb-groen-licht);
    color: var(--bb-groen);
}

.stat-chip-inactief {
    background: #f7f7f7;
    border-color: #e2e8f0;
    color: #a0aec0;
}

.stat-chip-vestiging {
    font-style: normal;
}

.stat-chip-datum {
    font-weight: 400;
    opacity: 0.75;
    margin-left: 2px;
}

/* ── KPI rij ── */
.stat-kpi-rij {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.stat-kpi {
    text-align: center;
    padding: 0.5rem 0.25rem 0.4rem;
    border-radius: 8px;
    border: 1px solid transparent;
}

.stat-kpi-goed   { background: #f0fff4; border-color: var(--bb-groen-licht); }
.stat-kpi-matig  { background: #fffbeb; border-color: #f6d860; }
.stat-kpi-slecht { background: #fff5f5; border-color: #feb2b2; }

.stat-kpi-getal {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--bb-bruin);
    line-height: 1.1;
}

.stat-kpi-van {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bb-tekst-zacht);
}

.stat-kpi-label {
    font-size: 0.7rem;
    color: var(--bb-tekst-zacht);
    margin-top: 2px;
}

/* ── Grafiekje kassa (dag blokjes) ── */
.stat-grafiek-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-tekst-zacht);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.stat-grafiek {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 44px;
}

/* Kassa blokjes */
.stat-dag-blok {
    flex: 1;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2px;
}

.stat-dag-gedaan     { background: var(--bb-groen-licht); }
.stat-dag-niet       { background: #e2e8f0; }
.stat-dag-vandaag.stat-dag-gedaan { background: var(--bb-groen); }
.stat-dag-vandaag.stat-dag-niet   { background: #cbd5e0; }

/* Taken staafjes */
.stat-dag-balk-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    gap: 2px;
}

.stat-dag-balk {
    width: 100%;
    background: var(--bb-beige);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.stat-balk-vandaag { background: var(--bb-terracotta); }

.stat-dag-label {
    font-size: 0.62rem;
    color: var(--bb-tekst-zacht);
    text-align: center;
    text-transform: lowercase;
}

/* ── Aandachtspunten ── */
.stat-aandacht-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-aandacht-item {
    font-size: 0.76rem;
    color: #c05621;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff8f0;
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    border: 1px solid #fbd38d;
}

.stat-aandacht-item .bi { flex-shrink: 0; }

.stat-alles-goed {
    font-size: 0.78rem;
    color: var(--bb-groen);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    background: #f0fff4;
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    border: 1px solid var(--bb-groen-licht);
}

/* ── Samenvattingsbalk ── */
.stat-samenvatting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: white;
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    flex-wrap: wrap;
}

.stat-samen-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 2rem;
    gap: 0.15rem;
}

.stat-samen-getal {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bb-bruin);
    line-height: 1;
}

.stat-samen-label {
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
    font-weight: 500;
}

.stat-samen-sep {
    width: 1px;
    height: 40px;
    background: var(--bb-border);
}

/* ── Responsive: tablet en mobiel ── */
@media (max-width: 900px) {
    .stat-vestiging-grid {
        grid-template-columns: 1fr;
    }
    .stat-samen-sep { display: none; }
    .stat-samenvatting { gap: 1rem; }
    .stat-samen-item { padding: 0.25rem 1rem; }
}

@media (max-width: 480px) {
    .stat-kpi-getal { font-size: 1.1rem; }
    .stat-kpi-label { font-size: 0.65rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Statistieken — uitbreiding sessie 51
   ═══════════════════════════════════════════════════════════════ */

/* ── Vestiging tabs ── */
.stat-vestiging-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.stat-tab-btn {
    padding: 0.5rem 1.1rem;
    border-radius: 20px;
    border: 1.5px solid var(--bb-border);
    background: white;
    color: var(--bb-tekst-zacht);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.stat-tab-btn:hover {
    border-color: var(--bb-groen-licht);
    color: var(--bb-groen);
}

.stat-tab-btn.actief {
    background: var(--bb-groen);
    border-color: var(--bb-groen);
    color: white;
}

/* ── Compact overzicht kaart ── */
.stat-overzicht-kaart {
    background: white;
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-overzicht-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-overzicht-gebruikers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stat-overzicht-periode {
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
    font-style: italic;
    flex-shrink: 0;
}

/* ── Mini grafieken naast elkaar ── */
.stat-mini-grafieken {
    display: flex;
    gap: 1.5rem;
}

.stat-mini-grafiek {
    flex: 1;
}

/* ── AP blok ── */
.stat-ap-blok {
    background: white;
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    padding: 1.1rem 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    touch-action: manipulation;
}

.stat-ap-header {
    margin-bottom: 1rem;
}

.stat-ap-titel {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bb-bruin);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

/* ── Dag tabs ── */
.stat-dag-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.stat-dag-tab {
    padding: 0.3rem 0.7rem;
    border-radius: 14px;
    border: 1px solid var(--bb-border);
    background: var(--bb-beige-licht);
    color: var(--bb-tekst-zacht);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}

.stat-dag-tab:hover {
    border-color: var(--bb-terracotta);
    color: var(--bb-terracotta);
}

.stat-dag-tab.actief {
    background: var(--bb-terracotta);
    border-color: var(--bb-terracotta);
    color: white;
}

/* ── Dag samenvatting KPI's ── */
.stat-dag-samenvatting {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--bb-border);
    border-bottom: 1px solid var(--bb-border);
}

.stat-dag-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.75rem;
    border-right: 1px solid var(--bb-border);
    min-width: 70px;
}

.stat-dag-kpi:last-child { border-right: none; }

.stat-dag-kpi-getal {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--bb-bruin);
    line-height: 1.1;
}

.stat-dag-kpi-label {
    font-size: 0.68rem;
    color: var(--bb-tekst-zacht);
    font-weight: 500;
    text-align: center;
    margin-top: 2px;
}

.stat-dag-kpi.stat-dag-kpi-goed   .stat-dag-kpi-getal { color: #276749; }
.stat-dag-kpi.stat-dag-kpi-matig  .stat-dag-kpi-getal { color: #975a16; }
.stat-dag-kpi.stat-dag-kpi-slecht .stat-dag-kpi-getal { color: #c53030; }

/* ── KPI twee-rijen layout ── */
.stat-dag-kpi-rij-primair {
    display: flex;
    align-items: flex-end;
    border-bottom: none;
}

.stat-dag-kpi-rij-primair .stat-dag-kpi-getal {
    font-size: 1.6rem;
}

.stat-dag-kpi-rij-secundair {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.4rem;
    border-top: 1px solid var(--bb-border);
    margin-top: 0.4rem;
}

.stat-dag-kpi.stat-dag-kpi-klein .stat-dag-kpi-getal {
    font-size: 1rem;
    font-weight: 600;
}

.stat-dag-kpi.stat-dag-kpi-klein .stat-dag-kpi-label {
    font-size: 0.65rem;
    color: #aaa;
}

/* ── Geen rooster melding ── */
.stat-geen-rooster {
    background: #fffbeb;
    border: 1px solid #f6d860;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    font-size: 0.8rem;
    color: #975a16;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stat-geen-rooster .bi { flex-shrink: 0; margin-top: 1px; }

/* ── AP per uur grafiek ── */
/* ── AP heatmap grenskleur per AP-klasse ── */
.stat-heatmap-ap-laag      { border-color: #ef9a9a !important; }
.stat-heatmap-ap-matig     { border-color: #ffe082 !important; }
.stat-heatmap-ap-goed      { border-color: #a5d6a7 !important; }
.stat-heatmap-ap-uitstekend { border-color: #43a047 !important; }

/* ── Heatmap per uur ── */
.stat-heatmap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.5rem;
}

.stat-heatmap-cel {
    flex: 0 0 calc(10% - 4px);
    min-width: 52px;
    padding: 0.4rem 0.35rem;
    border-radius: 6px;
    text-align: center;
    cursor: default;
    transition: transform 0.1s;
}

.stat-heatmap-cel:hover { transform: scale(1.05); }

.stat-heatmap-1 { background: #f9f6f0; border: 1px solid #ECD5AB; }
.stat-heatmap-2 { background: #DCEDC8; border: 1px solid #AED581; }
.stat-heatmap-3 { background: #C5E1A5; border: 1px solid #8BC34A; }
.stat-heatmap-4 { background: #A5D6A7; border: 1px solid #66BB6A; }
.stat-heatmap-5 { background: #81C784; border: 1px solid #43A047; }

.stat-heatmap-tijd {
    font-size: 0.65rem;
    color: var(--bb-tekst-zacht);
    font-weight: 600;
}

.stat-heatmap-omzet {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bb-bruin);
}

.stat-heatmap-ap {
    font-size: 0.62rem;
    color: var(--bb-groen);
    font-weight: 600;
}

.stat-heatmap-ap.hoog { color: var(--bb-terracotta); }
.stat-heatmap-ap.laag { color: #e53e3e; }

.stat-heatmap-legenda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: #7A6040;
}

.stat-heatmap-legenda-schaal {
    display: flex;
    gap: 3px;
}

.stat-heatmap-legenda-schaal > div {
    width: 32px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.08);
}

.stat-heatmap-legenda-blok {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.08);
}

.stat-heatmap-legenda-label {
    font-weight: 500;
}

.stat-heatmap-legenda-tip {
    margin-left: 0.75rem;
    font-style: italic;
    opacity: 0.7;
}

/* ── Rooster overzicht ── */
.stat-rooster-overzicht {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.stat-rooster-rij {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background: var(--bb-beige-licht);
    border-radius: 6px;
    font-size: 0.82rem;
}

.stat-rooster-naam  { font-weight: 600; color: var(--bb-bruin); }
.stat-rooster-tijd  { color: var(--bb-tekst-zacht); font-size: 0.78rem; }
.stat-rooster-rol   { color: var(--bb-tekst-zacht); font-size: 0.72rem; font-style: italic; }
.stat-rooster-uren  { font-weight: 700; color: var(--bb-groen); font-size: 0.78rem; }

/* ── Geen data blok ── */
.stat-geen-data-blok {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--bb-tekst-zacht);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-geen-data-blok .bi {
    font-size: 1.8rem;
    opacity: 0.4;
}

.stat-geen-data { font-size: 0.8rem; color: var(--bb-tekst-zacht); font-style: italic; }

/* ── Forecast dagtab ── */
.stat-dag-tab-forecast {
    opacity: 0.65;
    border-style: dashed !important;
}
.stat-dag-tab-forecast.actief {
    opacity: 1;
}
.stat-dag-tab-forecast-dot {
    margin-left: 2px;
    font-size: 0.7rem;
    opacity: 0.7;
}


/* ── Agenda ── */
.stat-agenda-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.stat-agenda-item {
    font-size: 0.82rem;
    color: #666;
    padding: 0.3rem 0.5rem;
    background: var(--bb-beige-licht);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Weeknavigatie ── */
.stat-week-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.stat-week-nav-btn {
    width: 32px; height: 32px;
    border: 1.5px solid var(--bb-border);
    border-radius: 50%;
    background: white;
    color: var(--bb-bruin);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.stat-week-nav-btn:hover:not(:disabled) { background: var(--bb-beige-licht); }
.stat-week-nav-btn:disabled { opacity: 0.35; cursor: default; }
.stat-week-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bb-bruin);
}

/* ── Week grid wrapper (horizontaal scrollbaar op mobile) ── */
.stat-week-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1.25rem;
    padding: 0 1.25rem;
}

/* ── Week grid (7 kolommen) ── */
.stat-week-grid {
    display: grid;
    /* Mobiel/tablet (<1200px): VASTE minimumbreedte per tegel (~9.5rem) in een horizontaal
       scrollende track (wrapper overflow-x) — niet repeat(7,1fr), want dat perste 7 tegels in
       ~480px (≈68px elk) waardoor Vw/Re-bedragen en de AP-badge overlapten. De pill kapt netjes
       af binnen de tegel (min-width:0 op .stat-week-dag + max-width:100% + ellipsis op de pill).
       Desktop (≥1200px) overschrijft dit met minmax(0,1fr) → 7-passen-fit (ongewijzigd). */
    grid-template-columns: repeat(7, minmax(9.5rem, 1fr));
    gap: 0.4rem;
    margin-bottom: 1rem;
    min-width: 480px;
}
.stat-week-dag {
    border: 1.5px solid var(--bb-border);
    border-radius: 8px;
    padding: 0.5rem 0.3rem;
    text-align: center;
    cursor: pointer;
    background: white;
    transition: border-color 0.15s;
    min-height: 80px;
    display: flex;
    touch-action: manipulation;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    /* Sessie 100 fix 2: tegelbreedte onafhankelijk van de labellengte — zonder min-width:0
       groeit de grid-track op mobiel (repeat(7,1fr)) naar de nowrap-pill z'n min-content en
       rekt de kaart uit. Met 0 mag de track krimpen → de pill kapt af (ellipsis). */
    min-width: 0;
}
.stat-week-dag:hover:not(.leeg) { border-color: var(--bb-terracotta); }
.stat-week-dag.actief {
    border-color: var(--bb-bruin);
    border-width: 2px;
    background: var(--bb-beige-licht);
}
.stat-week-dag.vandaag { border-color: var(--bb-groen); }
.stat-week-dag.leeg    { cursor: default; opacity: 0.4; }
.stat-week-dag-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    overflow: hidden;   /* vangnet: niets steekt buiten de dagkaart */
    margin-bottom: 0.15rem;
}
.stat-week-dag-naam-datum {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;              /* lange label-pill wrapt naar eigen regel i.p.v. de kaart uit */
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem;
    max-width: 100%;
    min-width: 0;
}
.stat-week-dag-naam {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.05em;
}
.stat-week-dag-datum {
    font-size: 0.78rem;
    color: var(--bb-bruin);
    font-weight: 600;
}
.stat-week-dag-omzet {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin-top: auto;
}
.stat-week-dag-omzet.grijs { color: #3D2C1A; font-weight: 500; }
.stat-week-dag-omzet.leeg  { color: #ccc; }
/* Snapshot (nachtjob, niet goedgekeurd): subtieler dan goedgekeurd, cursief, geen ster */
.stat-week-dag-omzet.stat-vw-snapshot { color: #3D2C1A; font-style: italic; font-weight: 400; }
.stat-week-dag-status      { font-size: 0.7rem; }
.stat-week-dag-status.bon      { color: var(--bb-groen); }
.stat-week-dag-status.forecast { color: #bbb; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .stat-week-grid { gap: 0.2rem; }
    .stat-week-dag  { padding: 0.35rem 0.15rem; min-height: 65px; }
    .stat-week-dag-naam   { font-size: 0.6rem; }
    .stat-week-dag-datum  { font-size: 0.68rem; }
    .stat-week-dag-omzet  { font-size: 0.68rem; }
}
@media (max-width: 600px) {
    .stat-heatmap-cel  { flex: 0 0 calc(20% - 4px); }
    .stat-dag-samenvatting { gap: 0.4rem; }
    .stat-dag-kpi { padding: 0 0.4rem; min-width: 55px; }
    .stat-dag-kpi-getal { font-size: 1.1rem; }
    .stat-rooster-rij { grid-template-columns: 1fr auto auto; }
    .stat-rooster-rol { display: none; }
    .stat-mini-grafieken { gap: 0.75rem; }
}
/* ── Week dag kaart verbeteringen ── */
.stat-week-dag-ap {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.stat-week-dag-ap.ap-goed   { background: #DCEDC8; color: #33691E; }
.stat-week-dag-ap.ap-matig  { background: #FFF9C4; color: #827717; }
.stat-week-dag-ap.ap-slecht { background: #FFCDD2; color: #B71C1C; }
/* Geen ingeroosterde uren (of dag nog niet afgesloten) → geen AP. Bewust kleurloos:
   de kleurschaal is een oordeel, en over een getal dat er niet is valt niets te oordelen. */
.stat-week-dag-ap.ap-geen   { background: transparent; color: var(--bb-tekst-zacht); font-weight: 500; }

.stat-week-dag-status.bon { font-size: 0.85rem; color: var(--bb-groen); }

/* AP-cijfer dat niet bestaat (geen roosteruren): grijs streepje, geen kleuroordeel. */
.stat-dag-kpi-leeg { color: var(--bb-tekst-zacht); }

/* ── Agenda sectie ── */
.stat-sectie-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stat-agenda-item {
    font-size: 0.82rem;
    color: #555;
    padding: 0.35rem 0.6rem;
    background: var(--bb-beige-licht);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-left: 3px solid transparent;
}
.stat-agenda-item.bestelling { 
    border-left-color: var(--bb-terracotta); 
    color: var(--bb-bruin);
}
.stat-agenda-item.event { 
    border-left-color: var(--bb-groen); 
}
.stat-week-dag-ap {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.stat-week-dag-ap.ap-goed   { background: #DCEDC8; color: #33691E; }
.stat-week-dag-ap.ap-matig  { background: #FFF9C4; color: #827717; }
.stat-week-dag-ap.ap-slecht { background: #FFCDD2; color: #B71C1C; }
/* Geen ingeroosterde uren (of dag nog niet afgesloten) → geen AP. Bewust kleurloos:
   de kleurschaal is een oordeel, en over een getal dat er niet is valt niets te oordelen. */
.stat-week-dag-ap.ap-geen   { background: transparent; color: var(--bb-tekst-zacht); font-weight: 500; }

.stat-week-dag-status.bon { font-size: 0.85rem; color: var(--bb-groen); }

.stat-sectie-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stat-agenda-item.bestelling { 
    border-left: 3px solid var(--bb-terracotta); 
    color: var(--bb-bruin);
}
.stat-agenda-item.event { 
    border-left: 3px solid var(--bb-groen); 
}
/* ── AP grafiek targetlijn — één lijn over hele grafiek ── */
.stat-ap-target-overlay {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(66, 41, 24, 0.4);
    z-index: 2;
    pointer-events: none;
}

.stat-ap-target-label {
    position: absolute;
    right: 0;
    top: -10px;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(66, 41, 24, 0.5);
    background: white;
    padding: 0 3px;
}

/* ══ TEAM MELDINGEN BLOK ══════════════════════════════════════ */

.melding-type-knoppen {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.melding-type-knop {
    flex: 1;
    padding: 0.5rem 0.4rem;
    border: 2px solid var(--bb-border);
    border-radius: 8px;
    background: white;
    color: var(--bb-tekst-zacht);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    line-height: 1.3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    touch-action: manipulation;
}

.melding-knop-icoon {
    font-size: 1.3rem;
    line-height: 1;
}

.melding-knop-label {
    font-size: 0.75rem;
    line-height: 1.2;
}

.melding-type-knop.actief {
    border-color: #B45A1E;
    background: rgba(180, 90, 30, 0.08);
    color: #B45A1E;
}

.melding-formulier {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.melding-zoek-wrapper {
    position: relative;
}

.melding-zoek-resultaten {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.melding-zoek-resultaat {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.melding-zoek-resultaat:hover {
    background: var(--bb-crème);
}

.melding-zoek-resultaat-lev {
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
}

.melding-geselecteerd-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(180, 90, 30, 0.06);
    border: 1px solid rgba(180, 90, 30, 0.2);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #B45A1E;
}

.melding-geselecteerd-wis {
    background: none;
    border: none;
    cursor: pointer;
    color: #B45A1E;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}

.melding-rij-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.melding-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    font-family: inherit;
    box-sizing: border-box;
}

.melding-select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    font-family: inherit;
}

.melding-textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
}

.melding-opslaan-knop {
    width: 100%;
    padding: 0.55rem;
    background: #B45A1E;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.melding-opslaan-knop:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.melding-succes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(85, 96, 28, 0.08);
    border: 1px solid rgba(85, 96, 28, 0.25);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #55601C;
    font-weight: 600;
}

/* Management banner */
.management-banner {
    background: rgba(180, 90, 30, 0.06);
    border: 2px solid rgba(180, 90, 30, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: var(--bb-blok-gap);
}

.management-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.management-banner-titel {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #B45A1E;
}

.management-banner-sluit {
    background: none;
    border: none;
    cursor: pointer;
    color: #B45A1E;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

.management-banner-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(180, 90, 30, 0.1);
    color: var(--bb-tekst);
}

.management-banner-item:last-child {
    border-bottom: none;
}

.management-banner-meta {
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
    margin-left: auto;
    white-space: nowrap;
}

/* BijnaOp highlight in bestelronde */
.bestel-bijna-op-banner {
    background: rgba(180, 90, 30, 0.07);
    border: 1px solid rgba(180, 90, 30, 0.25);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.bestel-bijna-op-titel {
    font-weight: 700;
    color: #B45A1E;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bestel-bijna-op-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    color: var(--bb-tekst);
}

/* ── Rooster tijdlijn (gedeeld: DagBriefing + Statistieken) ── */

.rooster-tijdlijn {
    position: relative;
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
}

.rooster-uur-balk {
    position: relative;
    height: 1.2rem;
    margin-left: 7.5rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid #ECD5AB;
}

.rooster-uur-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: #888;
    font-weight: 500;
    bottom: 0.15rem;
    white-space: nowrap;
}

.rooster-medewerker-rij {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    min-height: 1.8rem;
}

.rooster-naam-label {
    min-width: 7.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3D2C1A;
    flex-shrink: 0;
    padding-right: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rooster-balk-wrapper {
    position: relative;
    flex: 1;
    height: 1.6rem;
}
.rooster-pauze-blok {
    position: absolute;
    top: 0;
    bottom: 0;
    background: transparent;
    border-top: 2px solid #ECD5AB;
    border-bottom: 2px solid #ECD5AB;
    opacity: 0.9;
    z-index: 2;
}
.rooster-pauze-blok-productie {
    background: rgba(166, 76, 1, 0.22);
}
.rooster-pauze-blok-bediening {
    background: rgba(85, 96, 28, 0.22);
}

.rooster-balk {
    position: absolute;
    height: 100%;
    background: #ECD5AB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 2px;
}

.rooster-balk-rol {
    font-size: 0.68rem;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rooster-nu-lijn {
    position: absolute;
    top: 1.2rem;
    bottom: 0;
    width: 2px;
    background: #B45A1E;
    border-radius: 1px;
    pointer-events: none;
}

.rooster-uur-lijn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(208, 198, 180, 0.5);   /* bb-border, half transparant */
    pointer-events: none;
    z-index: 0;
}

/* ══ STATISTIEKEN — WEEKGRID TWEE RIJEN ══ */
.stat-week-rij {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    margin-top: 0.2rem;
}
.stat-week-rij-label {
    font-size: 0.65rem;
    color: #3D2C1A;
    width: 1.4rem;
    flex-shrink: 0;
}
.stat-week-rij-verwacht { color: #9a8a7a; }
.stat-week-rij-realisatie { color: #3D2C1A; font-weight: 600; }

.stat-verschil-positief { color: #55601C; }
.stat-verschil-negatief { color: #c0392b; }

/* ══ HACCP TABEL ══ */
.stat-haccp-tabel {
    padding: 0 1.25rem 1rem;
}
.stat-haccp-rij {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0e8d8;
    font-size: 0.88rem;
}
.stat-haccp-rij:last-child { border-bottom: none; }
.stat-haccp-label {
    width: 12rem;
    flex-shrink: 0;
    font-weight: 600;
    color: #3D2C1A;
}
.stat-haccp-waarde { flex: 1; }
.stat-haccp-ok     { color: #55601C; }
.stat-haccp-matig  { color: #B45A1E; }
.stat-haccp-nok    { color: #c0392b; }

/* ══ HACCP DOSSIER PAGINA ══ */
.haccp-shell .sectie {
    margin-bottom: 2rem;
}
.haccp-shell {
    /* Breedte + centrering komen van .bb-pagina; deze class blijft alleen bestaan
       voor de print-regel en .haccp-shell .sectie. */
    padding-bottom: 6rem;
}
.haccp-filterbalk {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.25rem;
}
.haccp-filter-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.haccp-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3D2C1A;
    flex: 1;
    min-width: 130px;
}
.haccp-filter-item .form-control {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
/* sectie-header: titel + alles-knop naast elkaar */
.haccp-sectie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
}
.haccp-sectie-titel {
    font-size: 1rem;
    font-weight: 700;
    color: #3D2C1A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.haccp-alles-btn {
    font-size: 0.82rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid #ECD5AB;
    border-radius: 20px;
    background: #fff;
    color: #3D2C1A;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
}
.haccp-alles-btn:hover { background: #f3ebdd; }
.haccp-leeg {
    color: #888;
    font-style: italic;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
/* chevron */
.haccp-chevron { flex-shrink: 0; }
/* dag-header (schoonmaak + goederenontvangst) */
.haccp-dag-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: #f9f4ec;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    touch-action: manipulation;
}
.haccp-dag-header:hover { background: #f3ebdd; }
.haccp-dag-datum {
    flex: 1;
    font-weight: 600;
    color: #3D2C1A;
    text-transform: capitalize;
}
.haccp-dag-badge {
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-weight: 600;
}
.haccp-dag-badge-ok {
    background: #ECD5AB;
    color: #5a4a2a;
}
/* taaklijst (schoonmaak + goederen container) */
.haccp-taak-lijst {
    margin-bottom: 0.5rem;
    border: 1px solid #ECD5AB;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.haccp-taak-rij {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.88rem;
    color: #3D2C1A;
    border-bottom: 1px solid rgba(236,213,171,0.4);
}
.haccp-taak-rij:last-child { border-bottom: none; }
.haccp-vink {
    color: #38a169;
    font-weight: 700;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 1px;
}
.haccp-taak-rij .haccp-taak-naam {
    flex: 1;
    min-width: 120px;
}
.haccp-taak-rij .haccp-freq-badge,
.haccp-taak-rij .haccp-taak-tijd,
.haccp-taak-rij .haccp-taak-door,
.haccp-taak-rij .haccp-gecontroleerd {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}
.haccp-taak-naam {
    flex: 1;
    color: #3D2C1A;
}
.haccp-taak-tijd {
    color: #888;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.haccp-taak-door {
    color: #888;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.haccp-gecontroleerd {
    color: #38a169;
    font-size: 0.9rem;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
/* frequentie-badges */
.haccp-freq-badge {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    font-weight: 600;
    flex-shrink: 0;
}
.haccp-freq-dag   { background: rgba(166,76,1,0.12);  color: #A64C01; }
.haccp-freq-week  { background: rgba(85,96,28,0.12);  color: #55601C; }
.haccp-freq-maand { background: rgba(61,44,26,0.10);  color: #3D2C1A; }
/* temperatuur sessie-blok */
.haccp-meting-sessie {
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.haccp-sessie-afwijking {
    border-color: #f5c6c6;
}
.haccp-meting-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: #f9f4ec;
    cursor: pointer;
    font-size: 0.88rem;
    touch-action: manipulation;
}
.haccp-sessie-afwijking .haccp-meting-header { background: #fdf0f0; }
.haccp-meting-header:hover { background: #f3ebdd; }
.haccp-meting-datum {
    font-weight: 600;
    color: #3D2C1A;
    flex-shrink: 0;
}
.haccp-meting-door {
    flex: 1;
    color: #888;
    font-size: 0.82rem;
}
.haccp-meting-count {
    color: #888;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.haccp-badge-afwijking {
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-weight: 600;
    background: #fde8e8;
    color: #c0392b;
    flex-shrink: 0;
}
.haccp-badge-ok {
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-weight: 600;
    background: #e8f0db;
    color: #55601C;
    flex-shrink: 0;
}
/* temperatuur tabel (desktop) */
.haccp-meting-tabel-wrapper {
    overflow-x: auto;
    padding: 0.5rem 0.75rem 0.75rem;
}
.haccp-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    table-layout: fixed;
}
.haccp-tabel th,
.haccp-tabel td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(236,213,171,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.haccp-tabel thead tr { background: #FAF3E4; }
.haccp-tabel th {
    font-weight: 700;
    color: #3D2C1A;
    font-size: 0.82rem;
}
.haccp-tabel tr:last-child td { border-bottom: none; }
/* Vaste kolombreedtes — zelfde voor alle sessies */
.haccp-tabel th:nth-child(1),
.haccp-tabel td:nth-child(1) { width: 30%; } /* Meetpunt */
.haccp-tabel th:nth-child(2),
.haccp-tabel td:nth-child(2) { width: 12%; } /* Type */
.haccp-tabel th:nth-child(3),
.haccp-tabel td:nth-child(3) { width: 13%; } /* Temperatuur */
.haccp-tabel th:nth-child(4),
.haccp-tabel td:nth-child(4) { width: 13%; } /* Norm */
.haccp-tabel th:nth-child(5),
.haccp-tabel td:nth-child(5) { width: 22%; } /* Afwijking */
.haccp-tabel th:nth-child(6),
.haccp-tabel td:nth-child(6) { width: 10%; text-align: center; } /* Gecontroleerd */
.haccp-tabel .haccp-rij-afwijking { background: rgba(248,113,113,0.06); }
.haccp-tabel .haccp-cel-afwijking { color: #e53e3e; font-weight: 600; }
.haccp-tabel .haccp-cel-geen      { color: #8a7a6a; }
.haccp-tabel .haccp-gecontroleerd { text-align: center; color: #38a169; font-weight: 700; margin-left: 0; }
.haccp-rij-afwijking { background: #fff5f5; }
.haccp-cel-afwijking { color: #c0392b; font-weight: 600; }
.haccp-cel-geen      { color: #55601C; }
/* temperatuur kaartjes (mobiel) */
.haccp-meting-kaarten {
    display: none;
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.haccp-meting-kaart {
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    background: #fff;
    font-size: 0.86rem;
}
.haccp-kaart-afwijking { border-color: #f5c6c6; background: #fff5f5; }
.haccp-kaart-naam {
    font-weight: 700;
    color: #3D2C1A;
    margin-bottom: 0.35rem;
}
.haccp-kaart-rij {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.84rem;
    margin-bottom: 0.2rem;
}
.haccp-kaart-label {
    color: #888;
    font-size: 0.78rem;
    min-width: 4rem;
}
.haccp-kaart-vink {
    color: #2e7d32;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.3rem;
}
/* goederenontvangst */
.haccp-lev-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3D2C1A;
    padding: 0.3rem 0.75rem 0.15rem;
    border: 1px solid #ECD5AB;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #f3ebdd;
    margin-top: 0.25rem;
}
.haccp-goederen-wrapper {
    border-bottom: 1px solid #f5eddf;
}
.haccp-goederen-wrapper:last-child { border-bottom: none; }
.haccp-rij-afwijking.haccp-goederen-wrapper { background: #fff5f5; }
.haccp-goederen-rij {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    padding: 0.4rem 0.75rem;
    font-size: 0.87rem;
    border-bottom: none;
}
.haccp-goederen-actie {
    padding: 0.2rem 0.75rem 0.4rem 2rem;
    font-size: 0.82rem;
    color: #744210;
    font-style: italic;
}
.haccp-goederen-icoon { flex-shrink: 0; }
.haccp-goederen-rij .haccp-taak-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haccp-goederen-rij .haccp-taak-tijd,
.haccp-goederen-rij .haccp-taak-door,
.haccp-goederen-rij .haccp-gecontroleerd { flex-shrink: 0; white-space: nowrap; }
.haccp-check-ok  { color: #55601C; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.haccp-check-nok { color: #c0392b; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.haccp-goederen-opmerking { color: #744210; font-style: italic; flex-shrink: 0; }  /* legacy — vervangen door .haccp-goederen-actie */
/* responsive: desktop toont tabel, mobiel toont kaartjes */
@media (max-width: 640px) {
    .haccp-meting-tabel-wrapper { display: none; }
    .haccp-meting-kaarten { display: flex; }
    .haccp-meting-count { display: none; }
    .haccp-sectie-titel { font-size: 0.875rem; }
    .haccp-alles-btn { font-size: 0.78rem; padding: 0.2rem 0.55rem; }
}
@media (min-width: 641px) {
    .haccp-meting-kaarten { display: none; }
}
/* print */
@media print {
    .no-print { display: none !important; }
    .export-print-header { display: block !important; }
    .haccp-meting-tabel-wrapper { display: block !important; }
    .haccp-meting-kaarten { display: none !important; }
    .haccp-dag-header { background: #fff !important; border-color: #ccc; }
    .haccp-meting-header { background: #fff !important; border-color: #ccc; }

    /* Uitklap-driehoekjes en knoppen horen niet op papier. */
    .haccp-chevron,
    button { display: none !important; }

    /* COMPACT — doel: een dag van 54 taken past op één A4. */
    .haccp-sectie-titel  { font-size: 11pt; margin-top: 1.2rem; }
    .haccp-dag-header,
    .haccp-meting-header { font-size: 10pt; padding: 2px 0; }
    .haccp-taak-rij,
    .haccp-goederen-rij,
    .haccp-kaart-rij     { font-size: 9pt; padding: 3px 0; line-height: 1.25; }
    .haccp-tabel,
    .haccp-tabel td,
    .haccp-tabel th      { font-size: 9pt; line-height: 1.25; }
    .haccp-tabel td,
    .haccp-tabel th      { padding: 3px 4px; }

    /* PAGINERING — een dag mag over pagina's lopen; alleen een losse regel mag niet
       breken, en een dagkop mag niet als laatste op een pagina staan. */
    .haccp-taak-rij,
    .haccp-goederen-rij  { break-inside: avoid; }
    .haccp-taak-lijst    { break-inside: auto; }
    .haccp-dag-header,
    .haccp-meting-header { break-after: avoid; }

    /* NIETS AFKAPPEN OP PAPIER — meetpuntnamen en tabelcellen voluit. */
    .haccp-taak-naam, .haccp-taak-door, .haccp-taak-tijd,
    .haccp-kaart-naam, .haccp-kaart-label,
    .haccp-meting-datum, .haccp-meting-door,
    .haccp-goederen-rij, .haccp-lev-label,
    .haccp-tabel td, .haccp-tabel th {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }
}

/* ══ GEBRUIK TABEL ══ */
.stat-gebruik-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.stat-gebruik-tabel th {
    text-align: center;
    padding: 0.35rem 0.2rem;
    font-weight: 700;
    color: #7a6a5a;
    font-size: 0.75rem;
    border-bottom: 2px solid #ECD5AB;
    line-height: 1.2;
}
.stat-gebruik-tabel td {
    text-align: center;
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid #f0e8d8;
    font-size: 0.82rem;
}
.stat-gebruik-tabel td:first-child {
    text-align: left;
    font-weight: 600;
    color: #3D2C1A;
    padding-right: 0.75rem;
    white-space: nowrap;
}
/* Halfuurtabel (sessie 101): 21 rijen op mobiel → compact, geen horizontale scroll.
   Kleine regelhoogte + smalle kolommen; dichte (buiten-opening) rijen gedempt. */
.stat-halfuur-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed;
    margin-bottom: 0.5rem;
}
.stat-halfuur-tabel th {
    text-align: right;
    padding: 0.2rem 0.3rem;
    font-weight: 700;
    color: #7a6a5a;
    font-size: 0.72rem;
    border-bottom: 2px solid #ECD5AB;
    line-height: 1.1;
}
.stat-halfuur-tabel td {
    text-align: right;
    padding: 0.12rem 0.3rem;
    border-bottom: 1px solid #f4eee0;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: nowrap;
}
.stat-halfuur-tabel th:first-child,
.stat-halfuur-tabel td:first-child {
    text-align: left;
    font-weight: 600;
    color: #3D2C1A;
    width: 3.2rem;
}
.stat-halfuur-tabel .stat-halfuur-dicht td { opacity: 0.45; }
.stat-halfuur-tabel .stat-gebruik-totaal td { border-bottom: none; }

.stat-gebruik-vandaag { background: rgba(180, 90, 30, 0.06); }
.stat-gebruik-ok      { color: #55601C; font-weight: 700; }
.stat-gebruik-nok     { color: #d0c6b4; }
.stat-gebruik-leeg    { color: transparent; }
.stat-gebruik-melding { color: #B45A1E; font-weight: 700; }

/* ══ RECONNECT MODAL ══ */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(61, 44, 26, 0.45);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#components-reconnect-modal.bb-reconnect-zichtbaar {
    display: flex;
    opacity: 1;
}

.bb-reconnect-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-reconnect-kaart {
    background: #FFFAEA;
    border: 2px solid #ECD5AB;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    text-align: center;
    box-shadow: 0 12px 40px rgba(61, 44, 26, 0.25);
    animation: bb-reconnect-appear 0.35s ease;
    min-width: 260px;
}

@keyframes bb-reconnect-appear {
    0%   { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.bb-reconnect-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    animation: bb-reconnect-pulse 1.6s ease-in-out infinite;
}

@keyframes bb-reconnect-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

.bb-reconnect-tekst {
    font-size: 1.05rem;
    font-weight: 700;
    color: #3D2C1A;
    margin-bottom: 0.25rem;
}

.bb-reconnect-subtekst {
    font-size: 0.85rem;
    color: #7a6244;
    margin-bottom: 1.25rem;
}

.bb-reconnect-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.bb-reconnect-dots .bb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #A64C01;
    opacity: 0.3;
    animation: bb-dot-bounce 1.2s ease-in-out infinite;
}

.bb-reconnect-dots .bb-dot-2 { animation-delay: 0.15s; }
.bb-reconnect-dots .bb-dot-3 { animation-delay: 0.3s; }

@keyframes bb-dot-bounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-4px); }
}

/* Blazor voegt .components-reconnect-show/failed/rejected toe — geen display-override nodig,
   bb-reconnect-zichtbaar bepaalt via JS wanneer de modal zichtbaar is */

/* ══ ROOSTERADVIES TIJDLIJN BALKEN ══ */
.rooster-balk-productie {
    background: #A64E17;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.rooster-balk-bediening {
    background: #55601C;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ══ ROOSTERADVIES OVERLAY ══ */
.ra-sectie-titel {
    font-weight: 600;
    color: #3D2C1A;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.ra-instelling-tabel {
    width: 100%;
    border-collapse: collapse;
}

.ra-instelling-tabel td {
    padding: 0.35rem 0.5rem 0.35rem 0;
    font-size: 0.9rem;
    vertical-align: middle;
}

.ra-instelling-tabel td:first-child {
    width: 50%;
    font-size: 0.88rem;
    line-height: 1.3;
}

.ra-instelling-tabel td:nth-child(2) {
    width: 90px;
    white-space: nowrap;
}

.ra-normen-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ra-normen-tabel th {
    text-align: left;
    padding: 0.35rem 0.5rem;
    color: #888;
    font-weight: 500;
    border-bottom: 1px solid #ECD5AB;
}

.ra-normen-tabel td {
    padding: 0.3rem 0.4rem;
}

.ra-input    { width: 90px;  padding: 0.3rem; border: 1px solid #ECD5AB; border-radius: 6px; }
.ra-input-sm { width: 75px;  padding: 0.3rem; border: 1px solid #ECD5AB; border-radius: 6px; }
.ra-input-xs { width: 55px;  padding: 0.3rem; border: 1px solid #ECD5AB; border-radius: 6px; }

.ra-opslaan-knop  { margin-top: 0.75rem; }
.ra-verwijder-knop {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.ra-save-status {
    margin-top: 0.75rem;
    color: #55601C;
    font-size: 0.85rem;
    font-weight: 500;
}

.ra-tabel-eenheid {
    padding-left: 0.4rem;
    font-size: 0.82rem;
    color: #3D2C1A;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

/* Roosteradvies openingsregels — div layout */
.ra-rijen {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ra-rij-blok {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0e8d8;
}

.ra-rij-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--bb-tekst);
    line-height: 1.3;
}

.ra-rij-invoer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ra-rij-invoer .ra-input,
.ra-rij-invoer .ra-input-sm {
    flex-shrink: 0;
}

.ra-pijl {
    color: var(--bb-tekst-zacht);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ra-eenheid {
    font-size: 0.82rem;
    color: var(--bb-tekst-zacht);
    white-space: normal;
    word-break: break-word;
    flex-shrink: 1;
    min-width: 0;
}

.ra-automatisch {
    font-size: 0.85rem;
    color: #888;
}

/* ── Openingstijden tabel (Instellingen) ── */
.open-tijden-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
.open-tijden-tabel th {
    text-align: left;
    font-weight: 600;
    color: #3D2C1A;
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid #ECD5AB;
}
.open-tijden-tabel td {
    padding: 0.25rem 0.5rem 0.25rem 0;
    color: #3D2C1A;
}
.open-tijden-input {
    width: 70px;
    padding: 0.25rem 0.4rem;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    font-size: 0.88rem;
}

/* ── Advies drie-kolommen vergelijkingsblok (Statistieken) ── */
.stat-advies-vergelijk {
    display: flex;
    gap: 0;
    margin: 0.75rem 0;
    border: 1px solid #ECD5AB;
    border-radius: 10px;
    overflow: hidden;
}
.stat-advies-vergelijk-labels {
    display: flex;
    flex-direction: column;
    background: #FDF6ED;
    border-right: 1px solid #ECD5AB;
    min-width: 7rem;
}
.stat-advies-vergelijk-label-top {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    border-bottom: 1px solid #ECD5AB;
    height: 2.2rem;
    box-sizing: border-box;
}
.stat-advies-vergelijk-rij-label {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #888;
    border-bottom: 1px solid #ECD5AB;
    display: flex;
    align-items: center;
}
.stat-advies-vergelijk-rij-label:last-child {
    border-bottom: none;
}
.stat-advies-vergelijk-kolom {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ECD5AB;
    text-align: center;
}
.stat-advies-vergelijk-kolom:last-child {
    border-right: none;
}
.stat-advies-vergelijk-kolom-actief {
    background: #FFFAEA;
}
.stat-advies-vergelijk-kop {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3D2C1A;
    border-bottom: 1px solid #ECD5AB;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    height: 2.2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-advies-vergelijk-getal {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #3D2C1A;
    border-bottom: 1px solid #ECD5AB;
}
.stat-advies-vergelijk-ap {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid #ECD5AB;
}
.stat-advies-vergelijk-ap:last-child {
    border-bottom: none;
}
.ap-uitstekend { color: #2d6a0a; }
.ap-goed       { color: #55601C; }
.ap-matig      { color: #B45A1E; }
.ap-slecht     { color: #c0392b; }

/* ── Defecten todo-lijst ─────────────────────────────── */
.defect-lijst {
    margin: 0 0 var(--bb-blok-gap);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ECD5AB;
}
.defect-lijst-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #3D2C1A;
    color: #FDF6ED;
    font-weight: 600;
    font-size: 0.9rem;
}
.defect-item {
    border-bottom: 1px solid #ECD5AB;
    background: #fff;
}
.defect-item:last-child { border-bottom: none; }
.defect-item-hoofd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    gap: 0.75rem;
    touch-action: manipulation;
}
.defect-item-hoofd:hover { background: #FDF6ED; }
.defect-item-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}
.defect-item-naam {
    font-weight: 600;
    font-size: 0.9rem;
    color: #3D2C1A;
}
.defect-item-omschrijving {
    font-size: 0.85rem;
    color: #666;
}
.defect-item-rechts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.defect-item-meta {
    font-size: 0.75rem;
    color: #999;
    white-space: nowrap;
}
.defect-chevron { color: #999; font-size: 0.8rem; }
.defect-urgentie-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.defect-urgentie-dot.defect-urgentie-laag    { background: #aaa; }
.defect-urgentie-dot.defect-urgentie-normaal { background: #B45A1E; }
.defect-urgentie-dot.defect-urgentie-hoog    { background: #e67e22; }
.defect-urgentie-dot.defect-urgentie-kritiek { background: #c0392b; }
.defect-status-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 500;
}
.defect-status-open          { background: #fdecea; color: #c0392b; }
.defect-status-inbehandeling { background: #fef3e2; color: #B45A1E; }
.defect-item-detail {
    padding: 0.75rem 1rem 1rem;
    background: #FFFAEA;
    border-top: 1px solid #ECD5AB;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.defect-opmerking-input {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.defect-btn-behandeling {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    border: 1px solid #B45A1E;
    color: #B45A1E;
    background: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    align-self: flex-start;
}
.defect-btn-opgelost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    border: none;
    background: #55601C;
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    align-self: flex-start;
}
/* Urgentie chips bij melding aanmaken */
.melding-urgentie-rij {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.melding-urgentie-label {
    font-size: 0.82rem;
    color: #666;
}
.melding-urgentie-chip {
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    border: 1px solid #ECD5AB;
    background: #fff;
    font-size: 0.78rem;
    cursor: pointer;
    color: #3D2C1A;
}
.melding-urgentie-chip.actief { border-width: 2px; font-weight: 600; }
.melding-urgentie-chip.defect-urgentie-laag.actief    { border-color: #aaa;     background: #f5f5f5; }
.melding-urgentie-chip.defect-urgentie-normaal.actief { border-color: #B45A1E;  background: #fef3e2; }
.melding-urgentie-chip.defect-urgentie-hoog.actief    { border-color: #e67e22;  background: #fef3e2; }
.melding-urgentie-chip.defect-urgentie-kritiek.actief { border-color: #c0392b;  background: #fdecea; }

/* ── Omzetforecast ───────────────────────────────────────────────────── */
.forecast-actie-balk {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #FDF6ED;
    border: 1px solid #ECD5AB;
    border-radius: 10px;
    margin: 0.75rem 0;
    font-size: 0.9rem;
    color: #3D2C1A;
    flex-wrap: wrap;
}
.forecast-genereer-btn {
    margin-left: auto;
    padding: 0.4rem 1rem;
    background: #B45A1E;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
}
.forecast-genereer-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Review status-balk (sessie 82) ── */
.review-status-balk {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: #FDF6ED;
    border: 1px solid #ECD5AB;
    border-radius: 10px;
    margin: 0.75rem 0;
    font-size: 0.9rem;
    color: #3D2C1A;
    flex-wrap: wrap;
}
.review-status-balk.review-beoordeeld {
    background: #F1F4E6;
    border-color: #AFB376;
}
.review-status-balk.review-beoordeeld .bi-check-circle-fill { color: #55601C; }
/* Meetregel afgesloten week — bewust neutraal, geen kleuralarm */
.review-status-balk.review-meet {
    background: #FBF7F0;
    border-color: #E4D6BE;
    color: #5A4A38;
    font-size: 0.88rem;
}
.review-status-tekst { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; }

/* Weekrapport-blok (afgesloten week) */
.weekrapport {
    background: #FBF7F0;
    border: 1px solid #ECD5AB;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0.75rem 0;
    color: #3D2C1A;
}
.weekrapport-kop { font-weight: 700; font-size: 1.02rem; margin-bottom: 0.55rem; }
.weekrapport-regels { display: flex; flex-direction: column; gap: 0.28rem; }
.weekrapport-regel { display: flex; justify-content: space-between; align-items: baseline;
                     gap: 1rem; font-size: 0.92rem; }
.weekrapport-regel span { color: #6B5B45; }
.weekrapport-regel strong { font-weight: 600; }
.weekrapport-regel em { color: #8A7A65; font-style: normal; font-size: 0.85rem; }
.weekrapport-noot { color: #A67C52; font-style: italic; font-size: 0.85rem; }
.weekrapport-meet { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid #ECD5AB;
                    font-size: 0.88rem; color: #5A4A38; }
.weekrapport-kopieer {
    margin-top: 0.7rem;
    background: #A64C01; color: #fff; border: none;
    border-radius: 30px; padding: 0.5rem 1.1rem; font-size: 0.88rem;
    cursor: pointer; touch-action: manipulation;
}
.weekrapport-kopieer:hover { background: #8f4101; }
.review-status-sub { color: #7A6A55; font-size: 0.82rem; }
.review-beoordeel-btn {
    margin-left: auto;
    padding: 0.4rem 1.1rem;
    background: #A64C01;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    touch-action: manipulation;
}
.review-beoordeel-btn:disabled { opacity: 0.6; cursor: default; }
.review-opnieuw-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.9rem;
    background: transparent;
    color: #55601C;
    border: 1px solid #AFB376;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.82rem;
    touch-action: manipulation;
}
.review-opnieuw-btn:hover { background: #E9EDD6; }

.forecast-voorstel {
    border: 1px solid #ECD5AB;
    border-radius: 12px;
    overflow: hidden;
    margin: 0.75rem 0;
}
.forecast-voorstel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #3D2C1A;
    color: #FDF6ED;
    font-size: 0.9rem;
}
.forecast-voorstel-sub { margin-left: auto; font-size: 0.8rem; opacity: 0.7; }
.forecast-dag-rij {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ECD5AB;
    flex-wrap: wrap;
}
.forecast-dag-rij:last-of-type { border-bottom: none; }
.forecast-dag-naam {
    width: 5rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: #3D2C1A;
}
.forecast-dag-datum { width: 2.5rem; font-size: 0.8rem; color: #999; }
.forecast-dag-input {
    width: 90px;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    font-size: 0.88rem;
}
.forecast-reden-input {
    flex: 1;
    min-width: 150px;
    padding: 0.3rem 0.5rem;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #666;
}
.forecast-dag-omzet { font-weight: 600; color: #3D2C1A; }
.forecast-verleden-label { font-size: 0.75rem; color: #999; font-style: italic; }

/* Sessie 87 UI-onderhoud: klikbare-tegel-affordance + verleden-rij Vw→gerealiseerd
   + tekstlink 'uitleg' + popup-voettekst 'Week aanpassen'. */
.stat-week-dag:not(.klikbaar) { cursor: default; }
.stat-week-dag.klikbaar { transition: border-color 0.15s, transform 0.12s, box-shadow 0.12s; }
.stat-week-dag.klikbaar:hover {
    border-color: var(--bb-terracotta);
    transform: translateY(-1px);
    box-shadow: 0 2px 7px rgba(61, 44, 26, 0.12);
}
.forecast-verleden-vw   { font-size: 0.78rem; color: var(--bb-tekst-zacht); }
.forecast-verleden-pijl { font-size: 0.78rem; color: #bbb; margin: 0 0.15rem; }
.forecast-verleden-real { font-size: 0.9rem; font-weight: 700; color: var(--bb-bruin); }
.forecast-verleden-geen { font-size: 0.75rem; color: #999; font-style: italic; margin-left: 0.2rem; }
.forecast-uitleg-link {
    background: none; border: none; padding: 0 0.15rem; margin: 0;
    color: var(--bb-terracotta); font-size: 0.78rem; text-decoration: underline;
    cursor: pointer; line-height: 1; flex-shrink: 0; touch-action: manipulation;
}
.forecast-uitleg-link:hover, .forecast-uitleg-link.actief { color: var(--bb-terracotta-hover); }
.forecast-afwijkt { color: #A64C01; font-size: 0.7rem; line-height: 1; }
.forecast-pct-wrap { display: inline-flex; align-items: center; gap: 0.25rem; }
.forecast-pct-input {
    width: 56px;
    padding: 0.3rem 0.4rem;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: right;
}
.forecast-pct-teken { font-size: 0.72rem; color: #9A8A76; }
.forecast-vast-label {
    font-size: 0.72rem;
    color: #55601C;
    background: #F1F4E6;
    border: 1px solid #AFB376;
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
}
.forecast-type-toggle { display: inline-flex; gap: 0; border: 1px solid #AFB376; border-radius: 16px; overflow: hidden; align-self: flex-start; }
.forecast-type-toggle button {
    padding: 0.22rem 0.7rem;
    background: #fff;
    color: #55601C;
    border: none;
    font-size: 0.78rem;
    cursor: pointer;
    touch-action: manipulation;
}
.forecast-type-toggle button.actief { background: #55601C; color: #fff; }
/* Label-pill in de beoordeel-rij + foutmelding (sessie 82 ronde 2) */
.forecast-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.74rem;
    color: #55601C;
    background: #F1F4E6;
    border: 1px solid #C7CE9E;
    border-radius: 12px;
    padding: 0.08rem 0.5rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forecast-pill-x {
    background: none; border: none; color: #55601C; cursor: pointer;
    font-size: 0.95rem; line-height: 1; padding: 0 0 0 0.15rem; opacity: 0.6;
    touch-action: manipulation;
}
.forecast-pill-x:hover { opacity: 1; color: #A64C01; }
.forecast-label-fout { font-size: 0.78rem; color: #C0392B; }
.forecast-keten-noot { font-size: 0.78rem; color: #7A6A55; font-style: italic; margin-top: 0.1rem; }
.forecast-popup-dun-melding {
    margin: 0.5rem 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.83rem;
    color: #8a5a00;
    background: #FCF3D9;
    border: 1px solid #E8C976;
    border-radius: 8px;
}
/* Label-pill op de weekstrip-tegel — compacte naam, accent-achtergrond */
/* Label-slot: altijd aanwezig met vaste hoogte → Vw/Re-rijen lijnen uit over alle tegels. */
.stat-week-dag-labelslot {
    width: 100%;
    min-height: 1.15rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;
    overflow: hidden;
}
.stat-week-dag-pill {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.6rem;
    line-height: 1.3;
    color: #55601C;
    background: #F1F4E6;
    border: 1px solid #C7CE9E;
    border-radius: 8px;
    padding: 0.02rem 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Label-keuze bij een wijziging (review-flow, sessie 82) ── */
.forecast-label-keuze {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem 0.75rem;
    margin: -0.25rem 0 0.35rem;
    background: #FBF3E6;
    border-left: 3px solid #A64C01;
    border-radius: 0 8px 8px 0;
}
.forecast-label-titel { font-size: 0.8rem; color: #6B5A44; font-weight: 600; }
.forecast-label-optioneel {
    font-weight: 400;
    font-size: 0.72rem;
    color: #7A6A55;
    background: #F0E7D6;
    border-radius: 10px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.35rem;
}
.forecast-label-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.forecast-label-chip {
    padding: 0.3rem 0.75rem;
    border: 1px solid #AFB376;
    background: #fff;
    color: #55601C;
    border-radius: 16px;
    font-size: 0.82rem;
    cursor: pointer;
    touch-action: manipulation;
}
.forecast-label-chip.actief { background: #55601C; color: #fff; border-color: #55601C; }
.forecast-label-chip.nieuw { border-style: dashed; color: #A64C01; border-color: #A64C01; }
.forecast-label-chip.nieuw.actief { background: #A64C01; color: #fff; }
.forecast-label-chip.geen { color: #8A7A66; border-color: #D9C6A8; }
.forecast-label-chip.geen.actief { background: #8A7A66; color: #fff; border-color: #8A7A66; }
.forecast-nieuw-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
}
.forecast-nieuw-naam, .forecast-nieuw-patroon {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    font-size: 0.82rem;
}
.forecast-nieuw-naam { flex: 1 1 160px; min-width: 140px; }
.forecast-nieuw-datum { font-size: 0.8rem; color: #6B5A44; display: inline-flex; align-items: center; gap: 0.3rem; }
.forecast-nieuw-datum input { width: 52px; padding: 0.25rem 0.4rem; border: 1px solid #ECD5AB; border-radius: 6px; }
.forecast-nieuw-scope { font-size: 0.8rem; color: #6B5A44; display: inline-flex; align-items: center; gap: 0.35rem; flex-basis: 100%; }
.forecast-scope-hint { color: #9A8A76; }
.forecast-label-notitie {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ECD5AB;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #555;
}

/* ── Beoordeel-flow op smal scherm ── */
@media (max-width: 480px) {
    .forecast-dag-input { flex: 1 1 100px; }
    .forecast-label-keuze { padding-left: 0.6rem; }
    .forecast-label-chip { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
    .forecast-nieuw-label { flex-direction: column; align-items: stretch; }
    .forecast-nieuw-naam, .forecast-nieuw-patroon { width: 100%; }
    .forecast-nieuw-scope { flex-basis: auto; }
    .review-status-balk { align-items: flex-start; }
    .review-beoordeel-btn, .review-opnieuw-btn { margin-left: 0; }
}
.forecast-toelichting { margin-left: auto; color: #999; cursor: help; }
/* ── Forecast info badge (klein, rood, inline in Vw-rij) ── */
.forecast-info-badge {
    background: none;
    border: none;
    padding: 0 0 0 0.15rem;
    margin: 0;
    color: #c0392b;
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
    touch-action: manipulation;
}
.forecast-info-badge:hover,
.forecast-info-badge.actief { color: #8b1e13; }

.forecast-voorstel-acties {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #FDF6ED;
    border-top: 1px solid #ECD5AB;
}
.forecast-akkoord-btn {
    padding: 0.5rem 1.25rem;
    background: #55601C;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.upload-bestand-input { margin: 0.75rem 0; display: block; }
.bnb-file-input { display: block; margin: 1rem 0; font-size: 0.9rem; color: #3D2C1A; }
.upload-melding { padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.88rem; margin: 0.5rem 0; }
.upload-melding.ok  { background: #edf7ee; color: #2d7a3a; border: 1px solid #c3e6cb; }
.upload-melding.fout { background: #fdecea; color: #a33; border: 1px solid #f5c6cb; }

/* ── Dropzone upload ──────────────────────────────────────────────────────── */
.dropzone {
    border: 2px dashed #ECD5AB;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: #FDFAF5;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 1rem;
}
.dropzone.dragover {
    border-color: #B45A1E;
    background: #FDF0E6;
}
.rapport-resultaten {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}
.rapport-resultaat-rij {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.rapport-resultaat-rij.ok   { background: #F0F7EE; color: #3D7A35; }
.rapport-resultaat-rij.fout { background: #FDF0F0; color: #B03030; }
.rapport-bestandsnaam {
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Advies budget balk ─────────────────────────────────────────────────── */
.advies-budget-balk {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #FDF6ED;
    border: 1px solid #ECD5AB;
    border-radius: 10px;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.advies-budget-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.advies-budget-label {
    font-size: 0.72rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.advies-budget-waarde {
    font-size: 1rem;
    font-weight: 600;
    color: #3D2C1A;
}
.advies-budget-divider {
    font-size: 1.2rem;
    color: #ECD5AB;
    font-weight: 300;
}
.advies-budget-uitkomst .advies-budget-waarde {
    color: #55601C;
}

/* ── Voorspelling aanpassen knop ─────────────────────────────────────────── */
.forecast-aanpassen-btn {
    padding: 0.3rem 0.75rem;
    background: none;
    border: 1px solid #ECD5AB;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #B45A1E;
    cursor: pointer;
}
.forecast-aanpassen-btn:hover {
    background: #FDF6ED;
}

/* ── L1nda instructie balk ─────────────────────────────────────── */
.l1nda-instructie-balk {
    background: #EEF3DC;
    border: 1px solid #AFB376;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}
/* Bevestiging na automatische L1nda-push */
.l1nda-bevestig-balk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #EEF3DC;
    border: 1px solid var(--bb-groen-licht);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    color: var(--bb-groen);
    font-weight: 600;
}
.l1nda-bevestig-balk .bi { color: var(--bb-groen); }
.l1nda-instructie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #3D2C1A;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.l1nda-instructie-sluit {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    touch-action: manipulation;
}
.l1nda-instructie-sluit:hover { color: #3D2C1A; }
.l1nda-stappen {
    margin: 0 0 0.5rem 1.2rem;
    padding: 0;
    font-size: 0.85rem;
    color: #3D2C1A;
    line-height: 1.7;
}
.l1nda-link {
    color: #A64C01;
    font-weight: 500;
}
.l1nda-bedragen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.l1nda-dag-bedrag {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
    min-width: 4rem;
}
.l1nda-dag {
    font-size: 0.72rem;
    color: #888;
    text-transform: capitalize;
}
.l1nda-bedrag {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3D2C1A;
}

/* ── Bevestiging overlay ─────────────────────────────────────── */
.stap-klikbaar {
    cursor: pointer;
}
.stap-detail {
    font-size: 0.72rem;
    color: #A64C01;
    margin-left: 0.4rem;
}
.bev-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.bev-overlay-panel {
    background: #FFFAEA;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}
.bev-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background: #3D2C1A;
    color: #ECD5AB;
    font-weight: 600;
    font-size: 1rem;
}
.bev-overlay-sluit {
    background: none;
    border: none;
    color: #ECD5AB;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}
.bev-overlay-laden,
.bev-overlay-leeg {
    padding: 1.5rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}
.bev-overlay-lijst {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem 0;
}
.bev-cat-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #A64C01;
    padding: 0.6rem 1.2rem 0.2rem;
}
.bev-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 1.2rem;
    border-bottom: 1px solid #ECD5AB44;
    font-size: 0.88rem;
}
.bev-naam {
    color: #3D2C1A;
}
.bev-aantal {
    font-weight: 600;
    color: #3D2C1A;
    white-space: nowrap;
    margin-left: 0.5rem;
}

/* ── Metingen min-knop (iOS heeft geen min-teken op decimaal toetsenbord) ── */
.meting-min-knop {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--bb-border);
    border-radius: 8px;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.meting-min-knop:active {
    background: var(--bb-beige-licht);
}

/* ── Meetpunten delete ── */
.meetpunt-verwijder-btn {
    background: none;
    border: none;
    color: #c53030;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    touch-action: manipulation;
}
.meetpunt-verwijder-btn:hover { background: #fee2e2; }
.meetpunt-verwijder-cel {
    position: relative;
}
.meetpunt-bevestig-popup {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.meetpunt-bevestig-vraag { font-size: 0.8rem; color: #c53030; font-weight: 600; }
.meetpunt-bevestig-ja {
    font-size: 0.78rem; padding: 0.2rem 0.5rem;
    background: #c53030; color: white; border: none;
    border-radius: 4px; cursor: pointer; touch-action: manipulation;
}
.meetpunt-bevestig-nee {
    font-size: 0.78rem; padding: 0.2rem 0.5rem;
    background: #e5e7eb; color: #374151; border: none;
    border-radius: 4px; cursor: pointer; touch-action: manipulation;
}

/* ── DagBriefing skeleton loader ── */
@keyframes skel-briefing-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skel-briefing {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.skel-briefing-blok {
    border-radius: 8px;
    height: 80px;
    background: linear-gradient(90deg,
        var(--bb-beige-licht) 25%,
        #ede8d8 50%,
        var(--bb-beige-licht) 75%);
    background-size: 800px 100%;
    animation: skel-briefing-shimmer 1.4s infinite linear;
    border: 1px solid var(--bb-border);
}
.skel-briefing-blok-smal {
    height: 50px;
}

/* ── Forecast popup model-uitleg ── */
.forecast-model-uitleg {
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin: 0.4rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.forecast-model-stap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.88rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--bb-border);
}
.forecast-model-stap:last-child { border-bottom: none; }
.forecast-model-stap-label {
    color: var(--bb-tekst-zacht);
    font-size: 0.78rem;
    flex-shrink: 0;
    min-width: 120px;
}
.forecast-model-stap-waarde {
    font-weight: 600;
    color: var(--bb-bruin);
    text-align: right;
}
.forecast-model-stap-sub {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
    font-style: italic;
}
.forecast-model-stap-resultaat { padding-top: 0.3rem; margin-top: 0.1rem; }
.forecast-model-stap-resultaat .forecast-model-stap-waarde { font-size: 1rem; }

/* ── GoederenontvangstOverlay verbeteringen ── */
.goederen-cat-uitleg {
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
    font-weight: 400;
    margin-left: 0.4rem;
}
.goederen-opslaan-btn {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    width: 100%;
}

/* ── Statistieken accountability ── */
.stat-account-tabel td,
.stat-account-tabel th { text-align: center; padding: 0.35rem 0.5rem; font-size: 0.82rem; }

.stat-account-cel {
    cursor: pointer;
    font-weight: 600;
    border-radius: 4px;
    transition: opacity 0.15s;
}
.stat-account-cel:hover { opacity: 0.8; }
.stat-account-ok    { background: #eef5e8; color: #3a5e25; }
.stat-account-massa { background: #fff3cd; color: #7a5000; }
.stat-account-actief { outline: 2px solid #A64C01; outline-offset: -2px; }
.stat-account-th-vandaag { font-weight: 700; color: #A64C01; }

.stat-account-massa-badge {
    margin-left: 0.75rem;
    font-size: 0.78rem;
    background: #fff3cd;
    color: #7a5000;
    border-radius: 20px;
    padding: 2px 10px;
    font-weight: 600;
}

.stat-account-detail {
    margin: 0.75rem 1.25rem 0.5rem;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFAEA;
}
.stat-account-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #FCF4E1;
    font-size: 0.85rem;
    border-bottom: 1px solid #ECD5AB;
    flex-wrap: wrap;
}
.stat-account-sluiten {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #9a8a7a;
    font-size: 0.9rem;
}
.stat-account-massa-label {
    background: #fff3cd;
    color: #7a5000;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}
.stat-account-detail-lijst {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.stat-account-detail-rij {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
    border-bottom: 1px solid #f0e8d8;
    align-items: center;
}
.stat-account-detail-tijd { color: #6b5744; font-variant-numeric: tabular-nums; }
.stat-account-detail-naam { color: #3D2C1A; }
.stat-account-gap-snel { color: #c0392b; font-weight: 700; font-size: 0.75rem; text-align: right; }
.stat-account-gap-ok   { color: #9a8a7a; font-size: 0.75rem; text-align: right; }

.stat-account-waarschuwingen {
    margin: 0.25rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.stat-account-waarschuwing {
    font-size: 0.82rem;
    color: #7a5000;
    background: #fff3cd;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
}

/* HACCP door-naam */
.stat-haccp-door { color: #6b5744; font-size: 0.82rem; margin-left: 0.25rem; }

/* ── Goederenontvangst: niet-geleverd snelweg (sessie 78c) ── */
.goederen-cat-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.goederen-cat-check {
    color: #38a169;
    margin-left: auto;
    font-size: 1.1rem;
}
.goederen-cat-acties {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.goederen-niet-geleverd-knop {
    background: transparent;
    border: 1px solid #d4c5a8;
    color: #6b5744;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.goederen-niet-geleverd-knop:hover {
    background: #f5edd8;
    color: #3D2C1A;
    border-color: #b8a382;
}
.haccp-check-grijs {
    color: #9a8a7a;
    font-size: 0.82rem;
    font-style: italic;
}

/* Forecast popup — sessie 79 deel B (labels-pill + dun-signaal + voetnoot) */
.forecast-popup-labels {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.5rem 0 0.25rem 0;
}
.forecast-popup-label-pill {
    background: #FFF3CD; color: #7a5000;
    padding: 0.2rem 0.7rem; border-radius: 16px;
    font-size: 0.85rem; font-weight: 600;
}
.forecast-popup-label-effect {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 0.3rem;
}
.forecast-popup-dun {
    color: #9a8a7a; font-style: italic; font-size: 0.85rem;
}
.forecast-popup-rij-voetnoot {
    padding: 0.35rem 0; font-size: 0.8rem;
    color: #9a8a7a; font-style: italic;
}
.forecast-popup-spreiding {
    margin-top: 0.55rem; font-size: 0.82rem;
    color: #6B5A44;
}

/* ── Omzetbeheer pagina (sessie 79 deel C) ── */

.omzetbeheer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.omzetbeheer-periode label { margin-right: 0.5rem; }
.omzetbeheer-periode select { padding: 0.3rem; border-radius: 4px; }

.omzetbeheer-filters { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem;
                       background: #FFF8E7; border-radius: 8px; margin-bottom: 1rem; }
.omzetbeheer-filters label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

/* ── Labelbeheer (/labelbeheer) ── */
.labelbeheer-intro { color: #6B5A44; font-size: 0.92rem; margin-bottom: 1rem; }
.lb-groep-titel { font-weight: 700; color: #3D2C1A; margin: 1.1rem 0 0.4rem; font-size: 1.05rem; }
.lb-leeg { color: #7A6A55; font-style: italic; font-size: 0.9rem; padding: 0.4rem 0; }
.lb-lijst { display: flex; flex-direction: column; gap: 0.35rem; }
.lb-hint { color: #9a8a7a; font-size: 0.78rem; }
.lb-btn { background: #A64C01; color: #fff; border: none; border-radius: 20px;
          padding: 0.4rem 0.9rem; font-size: 0.82rem; cursor: pointer; touch-action: manipulation; }
.lb-btn:hover { background: #8f4101; }
.lb-btn-mini { background: none; border: none; color: #b23b3b; cursor: pointer; font-size: 0.9rem; }
/* Verklaarvraag-werklijst (Kors loket) */
.lb-afwijk-blok { margin-bottom: 1.2rem; padding: 0.8rem 0.9rem; background: #FCF4E1; border: 1.5px solid #ECD5AB; border-radius: 12px; }
.lb-afwijk-teller { display: inline-block; min-width: 1.4rem; padding: 0 0.35rem; margin-left: 0.35rem; background: var(--bb-terracotta); color: #fff; border-radius: 20px; font-size: 0.78rem; text-align: center; }
.lb-afwijk-tabel { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.lb-afwijk-tabel th { text-align: left; color: #7A6A55; font-weight: 600; padding: 0.3rem 0.5rem; border-bottom: 1px solid #ECD5AB; }
.lb-afwijk-tabel td { padding: 0.4rem 0.5rem; border-bottom: 1px solid #F0E7D6; color: #3D2C1A; vertical-align: top; }
.lb-afwijk-open td { background: #FFFBF0; }
.lb-afwijk-bedrag { white-space: nowrap; }
.lb-afwijk-op   { color: #55601C; font-weight: 600; }
.lb-afwijk-neer { color: #A64C01; font-weight: 600; }
.lb-afwijk-antwoord { max-width: 22rem; }
.lb-afwijk-acties { white-space: nowrap; text-align: right; }
.lb-afwijk-acties .lb-btn-mini { margin-left: 0.25rem; }
/* Verklaarloket (sessie 139b): twee delen + patroonregel per vestiging */
.lb-afwijk-deel { font-weight: 600; color: #3D2C1A; font-size: 0.9rem; margin: 0.6rem 0 0.15rem; }
.lb-patroon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid #F0E7D6; }
.lb-patroon-tekst { flex: 1 1 14rem; min-width: 0; color: #3D2C1A; font-size: 0.86rem; }
.lb-patroon-knop { color: var(--bb-terracotta); min-height: 44px; padding: 0 0.25rem; white-space: nowrap; flex-shrink: 0; }
/* Verklaarloket (sessie 139c): de korte naam alleen op de telefoon */
.lb-vk-kort { display: none; }
@media (max-width: 700px) {
    /* Tabel → kaarten. Regel 1 datum · vestiging, 2 bedrag, 3 antwoord, 4 de drie knoppen. */
    .lb-vk-lang { display: none; }
    .lb-vk-kort { display: inline; }
    .lb-vk-tabel, .lb-vk-tabel tbody { display: block; width: 100%; }
    .lb-vk-tabel thead { display: none; }
    .lb-vk-tabel tr {
        display: grid; grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "datum vest" "bedrag bedrag" "antw antw" "acties acties";
        column-gap: 0.6rem; row-gap: 0.2rem; box-sizing: border-box;
        margin: 0 0 0.5rem; padding: 0.55rem 0.7rem;
        background: #fff; border: 1px solid var(--bb-border); border-radius: 12px;
    }
    .lb-vk-tabel.lb-vk-zonder-vest tr { grid-template-areas: "datum datum" "bedrag bedrag" "antw antw" "acties acties"; }
    .lb-vk-tabel tr.lb-afwijk-open td { background: none; }
    .lb-vk-tabel td { display: block; padding: 0; border: none; min-width: 0; }
    .lb-vk-datum  { grid-area: datum; font-weight: 600; white-space: nowrap; }
    .lb-vk-vest   { grid-area: vest; color: #7A6A55; overflow-wrap: anywhere; }
    .lb-vk-bedrag { grid-area: bedrag; white-space: normal; }
    .lb-vk-antw   { grid-area: antw; max-width: none; overflow-wrap: anywhere; }
    .lb-vk-acties { grid-area: acties; display: flex; gap: 0.4rem; margin-top: 0.3rem; white-space: normal; text-align: left; }
    .lb-vk-acties .lb-btn-mini {
        flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; box-sizing: border-box;
        border: 1px solid var(--bb-border); border-radius: 30px; background: #fff; white-space: nowrap;
    }
}

/* Voorspelkwaliteit (meetlaag) */
.ob-kwaliteit { background: #FBF7F0; border: 1px solid #ECD5AB; border-radius: 10px;
                padding: 0.9rem 1rem; margin-bottom: 1.25rem; }
.ob-kwaliteit-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.ob-kwaliteit-titel { font-weight: 600; color: #3D2C1A; font-size: 1.02rem; }
.ob-kwaliteit-samenvatting { color: #5A4A38; font-size: 0.9rem; display: inline-flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.ob-kwaliteit-trend { font-weight: 700; font-size: 1.05rem; line-height: 1; }
.ob-kwaliteit-trend.trend-beter    { color: #55601C; }
.ob-kwaliteit-trend.trend-slechter { color: #A64C01; }
.ob-kwaliteit-trend.trend-stabiel  { color: #7A6A55; }
.ob-kwaliteit-tabel { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ob-kwaliteit-tabel th { text-align: left; color: #7A6A55; font-weight: 600; padding: 0.35rem 0.5rem;
                         border-bottom: 1px solid #ECD5AB; }
.ob-kwaliteit-tabel td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #F0E7D6; color: #3D2C1A; }
.ob-kwaliteit-tabel td.ob-afw-plus { color: #A64C01; }
.ob-kwaliteit-tabel td.ob-afw-min  { color: #55601C; }
.ob-kwaliteit-onvolledig { color: #A67C52; font-style: italic; }
.ob-kwaliteit-verdacht { color: #A67C52; font-size: 0.8rem; }
.ob-kwaliteit-leeg { color: #7A6A55; font-size: 0.88rem; font-style: italic; margin: 0.3rem 0; }
.ob-kwaliteit-legenda { color: #8A7A65; font-size: 0.78rem; margin: 0.55rem 0 0; }

.omzetbeheer-maand { margin-bottom: 0.5rem; border: 1px solid #e8e0d0; border-radius: 6px; overflow: hidden; }
.omzetbeheer-maand-header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem;
                            background: #F5EDD8; cursor: pointer; user-select: none; touch-action: manipulation; }
.omzetbeheer-maand-header:hover { background: #ECE0BD; }
.omzetbeheer-maand-pijl { font-size: 0.8rem; width: 1rem; }
.omzetbeheer-maand-naam { font-weight: 600; min-width: 140px; }
.omzetbeheer-maand-stats { color: #6b5744; font-size: 0.9rem; }
.omzetbeheer-afwijking { margin-left: 0.5rem; font-weight: 600; }
.omzetbeheer-afwijking.groen { color: #2d8659; }
.omzetbeheer-afwijking.rood { color: #b8484e; }

.omzetbeheer-rijen { background: white; }
.omzetbeheer-rij { padding: 0.5rem 1rem; border-bottom: 1px solid #f0eadc; }
.omzetbeheer-rij:last-child { border-bottom: none; }
.omzetbeheer-rij.verdacht { background: #fff5f0; }
.omzetbeheer-rij.gat { background: #f9f4eb; }

.omzetbeheer-rij-hoofd { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.omzetbeheer-rij-datum { min-width: 90px; color: #6b5744; }
.omzetbeheer-rij-omzet { min-width: 80px; }
.omzetbeheer-rij-leeg { color: #b0a78c; }
.omzetbeheer-rij-voorspeld { color: #888; font-size: 0.85rem; }
.omzetbeheer-afwijking-pct { margin-left: 0.4rem; font-weight: 600; }
.omzetbeheer-afwijking-pct.rood { color: #b8484e; }
.omzetbeheer-afwijking-pct.grijs { color: #888; }

.omzetbeheer-rij-bron { padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.75rem;
                        background: #e8e0d0; color: #6b5744; }
.omzetbeheer-rij-bron.kassabon { background: #d4ebd4; color: #2d8659; }
.omzetbeheer-rij-bron.handmatig { background: #f5e6cd; color: #8a5a2b; }

.omzetbeheer-rij-label { padding: 0.15rem 0.5rem; border-radius: 10px; background: #FFF3CD;
                         color: #7a5000; font-size: 0.82rem; }
.omzetbeheer-rij-verdacht { color: #b8484e; font-size: 0.85rem; font-weight: 500; }

.omzetbeheer-rij-bewerk, .omzetbeheer-rij-bewerk-meta, .omzetbeheer-rij-invul {
    margin-left: auto; background: none; border: 1px solid #d4c5a8; border-radius: 4px;
    padding: 0.2rem 0.5rem; cursor: pointer; color: #6b5744; font-size: 0.85rem;
    touch-action: manipulation;
}
.omzetbeheer-rij-bewerk:hover, .omzetbeheer-rij-bewerk-meta:hover { background: #f5edd8; }
.omzetbeheer-rij-invul { color: #b8484e; border-color: #e0a8a8; }
.omzetbeheer-rij-invul:hover { background: #fff0ee; }

.omzetbeheer-input-omzet { width: 100px; padding: 0.25rem; border: 1px solid #d4c5a8; border-radius: 4px; }
.omzetbeheer-input-notitie { flex: 1; min-width: 200px; padding: 0.25rem; border: 1px solid #d4c5a8; border-radius: 4px; }
.omzetbeheer-rij-edit { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0 0 6rem; flex-wrap: wrap; }
.omzetbeheer-rij-edit-info { color: #888; font-size: 0.85rem; font-style: italic; }
.omzetbeheer-btn-opslaan { background: #5a7a3f; color: white; border: none; padding: 0.3rem 0.75rem;
                           border-radius: 4px; cursor: pointer; touch-action: manipulation; }
.omzetbeheer-btn-annuleer { background: white; border: 1px solid #d4c5a8; padding: 0.3rem 0.75rem;
                            border-radius: 4px; cursor: pointer; touch-action: manipulation; }

.omzetbeheer-rij-context { padding: 0.5rem 0 0 6rem; color: #6b5744; font-size: 0.88rem;
                           display: flex; flex-direction: column; gap: 0.25rem; }
.omzetbeheer-btn-label { align-self: flex-start; background: #FFF3CD; color: #7a5000;
                         border: 1px solid #e0d090; padding: 0.25rem 0.75rem; border-radius: 4px;
                         cursor: pointer; font-size: 0.85rem; margin-top: 0.25rem; touch-action: manipulation; }
.omzetbeheer-btn-label:hover { background: #FFE699; }

.omzetbeheer-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
                              background: rgba(0,0,0,0.4); display: flex; align-items: center;
                              justify-content: center; z-index: 1000; }
.omzetbeheer-modal { background: #FFF8E7; padding: 1.5rem; border-radius: 8px;
                     max-width: 500px; width: 90%; }
.omzetbeheer-modal h3 { margin-top: 0; }
.omzetbeheer-modal label { display: block; margin: 0.75rem 0; }
.omzetbeheer-modal input[type="text"], .omzetbeheer-modal textarea {
    width: 100%; padding: 0.4rem; border: 1px solid #d4c5a8; border-radius: 4px; margin-top: 0.25rem;
}
.omzetbeheer-modal textarea { min-height: 60px; }
.omzetbeheer-modal-uitleg { color: #888; font-size: 0.85rem; font-style: italic; }
.omzetbeheer-modal-acties { display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end; }

.omzetbeheer-maand-incompleet {
    color: #b0a78c;
    font-size: 0.82rem;
    font-style: italic;
}

/* Manager-dropdown in linker navbalk — bestaande .bb-dropdown-menu is
   rechts-uitgelijnd (right:0) voor bb-topnav-rechts; links overschrijven */
.bb-topnav-links .bb-dropdown {
    position: relative;
}
.bb-topnav-links .bb-dropdown-menu {
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    min-width: 180px;
}
.bb-topnav-link.actief {
    color: #3D2C1A;
    font-weight: 600;
}

/* Omzetbeheer intro-tekst */
.omzetbeheer-intro {
    color: #6b5744;
    font-size: 0.95rem;
    margin: 0 0 1.5rem 0;
    max-width: 640px;
    line-height: 1.5;
}

/* Omzetbeheer label-modal: periode-picker (sessie 79 fixes ronde 2) */
.omzetbeheer-modal-periode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.omzetbeheer-modal-periode input[type="date"] {
    padding: 0.3rem;
    border: 1px solid #d4c5a8;
    border-radius: 4px;
}

/* Pre-deploy fixes ronde 3 */
.omzetbeheer-afwijking-pct.groen { color: #2d8659; }
.omzetbeheer-pencil-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}
.omzetbeheer-rij-bewerk:hover .omzetbeheer-pencil-icon,
.omzetbeheer-rij-bewerk-meta:hover .omzetbeheer-pencil-icon {
    opacity: 1;
}

/* ══ GEBRUIKERSBEHEER (Instellingen → Gebruikers) ══ */
.gebr-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.gebr-kop-titel {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-bruin);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gebr-tabel-wrap { overflow-x: auto; }
.gebr-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.gebr-tabel th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-tekst-zacht);
    font-weight: 700;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--bb-beige);
    white-space: nowrap;
}
.gebr-tabel td {
    padding: 0.6rem 0.6rem;
    border-bottom: 1px solid var(--bb-beige-licht);
    color: var(--bb-tekst);
    vertical-align: middle;
}
.gebr-naam { font-weight: 600; }
.gebr-email { color: var(--bb-tekst-zacht); }
.gebr-vest { font-size: 0.82rem; }
/* Vestigingen als chips i.p.v. een komma-rij: op elke breedte leesbaar, en op een smal
   scherm breken ze netjes af in plaats van de kolom op te rekken. */
.gebr-vest-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.gebr-vest-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bb-groen);
    border: 1px solid var(--bb-groen-licht);
    border-radius: var(--bb-radius-pill);
    white-space: nowrap;
}
.gebr-vest-chip-alle {
    color: var(--bb-tekst-zacht);
    border-color: var(--bb-border);
    font-style: italic;
}
/* Statustekst en actie-label zijn alléén voor de kaartweergave. */
.gebr-status-tekst, .gebr-actie-tekst { display: none; }
.gebr-login { color: var(--bb-tekst-zacht); white-space: nowrap; }
.gebr-rij-inactief td { opacity: 0.5; }

.gebr-rol-badge {
    display: inline-block;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}
.gebr-rol-manager   { background: var(--bb-terracotta); }
.gebr-rol-vestiging { background: var(--bb-groen); }
.gebr-rol-superuser { background: var(--bb-bruin); }

.gebr-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.gebr-dot-actief   { background: #4caf50; }
.gebr-dot-inactief { background: #c0392b; }

.gebr-actie-cel { text-align: right; }
.gebr-actie-btn {
    background: transparent;
    border: 1.5px solid var(--bb-border);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    color: var(--bb-bruin);
    touch-action: manipulation;
}
.gebr-actie-btn:hover { background: var(--bb-beige-licht); }
/* ⚠ De bewerkknop PLAKT rechts (27 sep 2026). Met drie vestigingen als volle-naam-chips
   wordt de tabel ±1030px breed in een pagina van 900px; de knopkolom viel dan rechts buiten
   de omlijsting, binnen de horizontale scroll van .gebr-tabel-wrap — en op een Mac is die
   scrollbalk onzichtbaar. Gemeten: op 1900px was 0 van de 12 knoppen in beeld. Alleen boven
   het kaart-breekpunt; daaronder staat de knop in de kaart zelf. */
@media (min-width: 701px) {
    .gebr-actie-cel {
        position: sticky;
        right: 0;
        background: var(--bb-crème);
        box-shadow: -10px 0 10px -10px rgba(61, 44, 26, 0.25);
    }
    /* Een inactieve rij dimt zijn cellen; de plakkende cel niet (anders schijnt de tabel
       erdoorheen), maar de knop wel. */
    .gebr-rij-inactief td.gebr-actie-cel { opacity: 1; }
    .gebr-rij-inactief .gebr-actie-btn  { opacity: 0.5; }
}

/* Overlay */
.gebr-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(61, 44, 26, 0.45);
    z-index: 1000;
}
.gebr-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: var(--bb-crème);
    border: 2px solid var(--bb-beige);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(61, 44, 26, 0.3);
    width: calc(100% - 2rem);
    max-width: 440px;
    max-height: 90svh;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
}
.gebr-overlay-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin-bottom: 1rem;
}
.gebr-overlay-sluit {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--bb-tekst-zacht);
    cursor: pointer;
    touch-action: manipulation;
}

.gebr-form { display: flex; flex-direction: column; gap: 0.85rem; }
.gebr-veld { display: flex; flex-direction: column; gap: 0.35rem; }
.gebr-veld label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bb-bruin);
}
.gebr-optioneel { font-weight: 400; color: var(--bb-tekst-zacht); }
.gebr-veld input[type="email"],
.gebr-veld input[type="text"],
.gebr-veld select {
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--bb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--bb-bruin);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
}
.gebr-veld input:focus, .gebr-veld select:focus { border-color: var(--bb-terracotta); }
.gebr-input-readonly { background: var(--bb-beige-licht) !important; color: var(--bb-tekst-zacht) !important; }

.gebr-vest-checks { display: flex; flex-direction: column; gap: 0.4rem; }
.gebr-vest-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--bb-tekst);
    cursor: pointer;
}
.gebr-veld-toggle { margin-top: 0.25rem; }
.gebr-toggle-label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.gebr-fout {
    background: #FEF0E8;
    border: 1px solid #F4C4A8;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    color: var(--bb-terracotta);
}

.gebr-form-knoppen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.gebr-btn-reset {
    background: transparent;
    border: 1.5px solid var(--bb-border);
    border-radius: var(--bb-radius-pill);
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    color: var(--bb-bruin);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    touch-action: manipulation;
}
.gebr-btn-reset:hover { background: var(--bb-beige-licht); }
.gebr-btn-annuleer {
    background: transparent;
    border: none;
    color: var(--bb-tekst-zacht);
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
}

.gebr-bevestig {
    background: #fff8ec;
    border: 1.5px solid #f0c674;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-top: 0.5rem;
}
.gebr-bevestig p { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--bb-bruin); }
.gebr-bevestig-knoppen { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

/* Tijdelijk-wachtwoord box */
.gebr-ww-box { display: flex; flex-direction: column; gap: 0.75rem; }
.gebr-ww-titel {
    font-weight: 700;
    color: var(--bb-bruin);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gebr-ww-veld { display: flex; gap: 0.5rem; }
.gebr-ww-veld input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--bb-terracotta);
    border-radius: 8px;
    background: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bb-bruin);
    font-family: inherit;
}
.gebr-ww-kopieer {
    background: var(--bb-terracotta);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    touch-action: manipulation;
}
.gebr-ww-uitleg { font-size: 0.82rem; color: var(--bb-tekst-zacht); margin: 0; line-height: 1.4; }
.gebr-ww-sluit { align-self: flex-start; }

/* ══ HANDBOEK (kennisbank) ══ */
.hb-blok {
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.2rem;
    margin-bottom: var(--bb-blok-gap);
}
.hb-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin-bottom: 0.75rem;
}
.hb-header-icoon { font-size: 1.1rem; color: var(--bb-terracotta); }

.hb-zoek-rij { position: relative; }
.hb-zoek-input {
    width: 100%;
    padding: 0.7rem 2.2rem 0.7rem 0.9rem;
    border: 1.5px solid var(--bb-border);
    border-radius: 8px;
    background: var(--bb-crème);
    color: var(--bb-bruin);
    font-size: 16px;
    font-family: inherit;
    outline: none;
}
.hb-zoek-input:focus { border-color: var(--bb-groen); }
.hb-wis-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 0.9rem;
    color: var(--bb-tekst-zacht);
    cursor: pointer;
    touch-action: manipulation;
}

.hb-labels-top-wrap { position: relative; margin-top: 0.7rem; }
.hb-labels-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.hb-labels-wolk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
/* "Alle labels ▾" — afwijkend (terracotta outline) t.o.v. de groene labels */
.hb-label-meer {
    border-color: var(--bb-terracotta);
    color: var(--bb-terracotta);
    flex-shrink: 0;
}
.hb-label-meer:hover,
.hb-label-meer:focus,
.hb-label-meer:active {
    background: var(--bb-terracotta);
    color: #fff;
    border-color: var(--bb-terracotta);
}
/* Focus-styling in huisstijl — geen blauwe browser-default die doorlekt */
.hb-label-chip:focus { outline: none; }
.hb-label-chip:focus-visible {
    outline: 2px solid var(--bb-groen);
    outline-offset: 1px;
}
.hb-label-meer:focus-visible { outline-color: var(--bb-terracotta); }
/* Actieve filter boven de resultaten (zichtbaar tijdens typen) */
.hb-actief-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.hb-actief-filter-label {
    font-size: 0.75rem;
    color: var(--bb-tekst-zacht);
}
.hb-chip-x { margin-left: 0.15rem; font-weight: 700; }
.hb-label-chip {
    background: transparent;
    border: 1.5px solid var(--bb-groen);
    border-radius: var(--bb-radius-pill);
    padding: 0.25rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bb-groen);
    cursor: pointer;
    touch-action: manipulation;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
.hb-label-chip:hover { background: var(--bb-groen-licht); color: #fff; border-color: var(--bb-groen-licht); }
.hb-label-chip.actief {
    background: var(--bb-groen);
    color: #fff;
    border-color: var(--bb-groen);
}

/* Mobiel: top-rij horizontaal scrollbaar, geen chip-brij, subtiele fade rechts */
@media (max-width: 640px) {
    .hb-labels-top {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hb-labels-top::-webkit-scrollbar { display: none; }
    .hb-labels-top .hb-label-chip { flex-shrink: 0; }
    /* Fade-hint als overlay (géén mask op de scroll-container — voorkomt de
       WebKit compositing-streep). Alleen zichtbaar via .hb-fade (JS: er valt te scrollen). */
    .hb-labels-top-wrap::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 2rem;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        opacity: 0;
        transition: opacity 0.15s;
    }
    .hb-labels-top-wrap.hb-fade::after { opacity: 1; }
}

.hb-resultaten {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.hb-resultaat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
    background: var(--bb-crème);
    border: 1.5px solid var(--bb-beige);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    touch-action: manipulation;
    font-family: inherit;
}
.hb-resultaat:hover { border-color: var(--bb-groen); }
.hb-resultaat-titel { font-weight: 600; color: var(--bb-bruin); }
.hb-resultaat-labels { font-size: 0.75rem; color: var(--bb-tekst-zacht); }
.hb-geen { margin-top: 0.75rem; font-size: 0.85rem; color: var(--bb-tekst-zacht); font-style: italic; }

/* Overlay */
.hb-overlay-modal { max-width: 520px; }
.hb-overlay-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.hb-overlay-titel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin: 0;
}
.hb-overlay-tekst {
    font-size: 0.95rem;
    color: var(--bb-tekst);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.hb-overlay-tekst a { color: var(--bb-terracotta); }

.hb-ladder { margin-bottom: 1rem; }
.hb-ladder-titel, .hb-bijlagen-titel {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-tekst-zacht);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.hb-stap {
    display: flex;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--bb-beige-licht);
}
.hb-stap:first-of-type { border-top: none; }
.hb-stap-nr {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bb-groen);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-stap-inhoud { flex: 1; }
.hb-stap-tekst { color: var(--bb-bruin); line-height: 1.4; }
.hb-stap-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.4rem;
}
.hb-stap-toelichting {
    font-size: 0.85rem;
    color: var(--bb-tekst-zacht);
    line-height: 1.4;
    margin-top: 0.2rem;
}
.hb-contact-naam { font-size: 0.85rem; color: var(--bb-tekst-zacht); }
.hb-contact-tel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: var(--bb-terracotta);
    padding: 0.5rem 1.1rem;
    border-radius: var(--bb-radius-pill);
    touch-action: manipulation;
}
/* Mail + Open: zelfde pill-maat als bellen, maar OMLIJND — bellen blijft de hoofdactie. */
.hb-contact-actie {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bb-terracotta);
    text-decoration: none;
    background: #fff;
    border: 1.5px solid var(--bb-terracotta);
    padding: 0.5rem 1.1rem;
    border-radius: var(--bb-radius-pill);
    touch-action: manipulation;
}

.hb-bijlagen { margin-bottom: 1rem; }
.hb-bijlage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid var(--bb-beige);
    border-radius: 8px;
    margin-bottom: 0.35rem;
    color: var(--bb-bruin);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
    touch-action: manipulation;
}
.hb-bijlage:hover { border-color: var(--bb-groen); }
.hb-bijlage .bi { color: var(--bb-terracotta); }

/* Bijlage-weergave overlay — boven de bewerk-overlay (gebr-overlay z-index 1001) */
.hb-bijlage-overlay { z-index: 1100; }
.hb-bijlage-modal { max-width: 900px; width: 100%; }
.hb-bijlage-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    border-radius: 8px;
}
.hb-bijlage-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bb-terracotta);
    color: #fff;
    text-decoration: none;
    padding: 0.7rem 1.2rem;
    border-radius: var(--bb-radius-pill);
    font-weight: 700;
}
/* Open-in-nieuw-tabblad-link in de overlay-kop (naast het kruis, beide platforms) */
.hb-overlay-nieuwtab {
    margin-left: auto;
    text-decoration: none;
    color: var(--bb-terracotta);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    flex-shrink: 0;
    touch-action: manipulation;
}
@media (max-width: 640px) {
    .hb-bijlage-img { max-height: 60vh; }
    .hb-bijlage-pdf { height: 78vh; max-height: 78vh; }   /* meer hoogte op de telefoon */
}

.hb-melding-balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #fff8ec;
    border: 1.5px solid #f0c674;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-top: 0.5rem;
}
.hb-melding-tekst { font-size: 0.9rem; font-weight: 600; color: #7d5700; }
.hb-melding-knop {
    background: var(--bb-terracotta);
    color: #fff;
    border: none;
    border-radius: var(--bb-radius-pill);
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    font-family: inherit;
}
.hb-melding-knop:disabled { opacity: 0.6; cursor: default; }
.hb-melding-klaar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--bb-groen);
}

/* ══ HANDBOEK BEHEER ══ */
.hbb-lijst { display: flex; flex-direction: column; gap: 0.5rem; }
.hbb-rij {
    position: relative;
    background: var(--bb-crème);
    border: 1.5px solid var(--bb-beige);
    border-radius: 10px;
    padding: 0.7rem 2.6rem 0.7rem 0.9rem;
}
.hbb-rij-inactief { opacity: 0.55; }
.hbb-rij-hoofd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hbb-rij-titel { font-weight: 700; color: var(--bb-bruin); }
.hbb-icoon { font-size: 0.85rem; }
.hbb-badge-inactief {
    font-size: 0.68rem; background: #c0392b; color: #fff;
    border-radius: 6px; padding: 1px 6px; font-weight: 700;
}
.hbb-rij-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.35rem; }
/* Wie het item maakte en wie het bijwerkte. Klein en gedempt: het is verantwoording,
   geen inhoud. overflow-wrap omdat een e-mailadres als naam kan dienen (zie NaamVan). */
.hbb-rij-herkomst { margin-top: 0.3rem; font-size: 0.75rem; color: var(--bb-tekst-zacht);
                    overflow-wrap: anywhere; }
/* Uitleg waarom de lijst korter is dan verwacht. Gedempt: het is context, geen melding. */
.hbb-scope-noot { margin-bottom: 0.75rem; font-size: 0.8rem; color: var(--bb-tekst-zacht); }
.hbb-vest-badge { font-size: 0.72rem; color: var(--bb-tekst-zacht); font-style: italic; }
/* Vestiging-scope badge — terracotta-tint, onderscheidend van de olijfgroene labels */
.hbb-vest-badge-specifiek {
    font-style: normal;
    font-weight: 600;
    color: var(--bb-terracotta);
    background: #f7e6d8;
    border: 1px solid #e3b892;
    border-radius: var(--bb-radius-pill);
    padding: 1px 8px;
}
.hbb-label {
    font-size: 0.7rem; background: var(--bb-beige-licht); border: 1px solid var(--bb-beige);
    border-radius: var(--bb-radius-pill); padding: 1px 8px; color: var(--bb-bruin);
}
.hbb-bijlage-count { font-size: 0.72rem; color: var(--bb-tekst-zacht); }
.hbb-bewerk { position: absolute; right: 0.6rem; top: 0.6rem; }

/* Overlay-breedte iets ruimer dan de gebruikers-overlay */
.hbb-overlay { max-width: 560px; }
.hbb-textarea {
    padding: 0.6rem 0.75rem; border: 1.5px solid var(--bb-border); border-radius: 8px;
    background: #fff; color: var(--bb-bruin); font-size: 1rem; font-family: inherit;
    outline: none; resize: vertical; min-height: 90px;
}
.hbb-textarea:focus { border-color: var(--bb-terracotta); }

/* Stappen-editor */
.hbb-stappen { display: flex; flex-direction: column; gap: 0.6rem; }
.hbb-stap { border: 1.5px solid var(--bb-beige); border-radius: 10px; padding: 0.6rem; background: var(--bb-beige-licht); }
.hbb-stap-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.hbb-stap-nr {
    width: 24px; height: 24px; border-radius: 50%; background: var(--bb-groen); color: #fff;
    font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
}
.hbb-stap-knoppen { display: flex; gap: 0.3rem; }
.hbb-mini-btn {
    background: #fff; border: 1.5px solid var(--bb-border); border-radius: 6px;
    padding: 0.2rem 0.45rem; cursor: pointer; color: var(--bb-bruin); touch-action: manipulation;
}
.hbb-mini-btn:disabled { opacity: 0.4; cursor: default; }
.hbb-mini-verwijder { color: #c0392b; }
.hbb-stap-input, .hbb-stap-contact-rij input {
    width: 100%; padding: 0.5rem 0.7rem; border: 1.5px solid var(--bb-border);
    border-radius: 8px; background: #fff; color: var(--bb-bruin); font-size: 0.95rem;
    font-family: inherit; outline: none;
}
.hbb-stap-input:focus, .hbb-stap-contact-rij input:focus { border-color: var(--bb-terracotta); }
.hbb-stap-contact-rij { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.hbb-stap-toelichting { margin-top: 0.4rem; resize: vertical; font-family: inherit; }
.hbb-stap-contact-rij input { flex: 1; }
.hbb-stap-toevoegen {
    margin-top: 0.6rem; background: transparent; border: 1.5px dashed var(--bb-border);
    border-radius: 8px; padding: 0.5rem; width: 100%; cursor: pointer; color: var(--bb-bruin);
    font-family: inherit; touch-action: manipulation;
}
.hbb-stap-toevoegen:hover { border-color: var(--bb-groen); }

/* Bijlagen */
.hbb-bijlagen { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.hbb-bijlage-rij { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.hbb-bijlage-link {
    display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bb-bruin);
    text-decoration: none; font-size: 0.9rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: transparent; border: none; font-family: inherit; cursor: pointer; text-align: left;
    padding: 0; touch-action: manipulation;
}
.hbb-bijlage-link:hover { color: var(--bb-terracotta); }
.hbb-bijlage-link .bi { color: var(--bb-terracotta); }
.hbb-bijlage-hint { font-size: 0.8rem; color: var(--bb-tekst-zacht); font-style: italic; }
.hbb-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    border: 2px dashed var(--bb-border); border-radius: 10px; padding: 1.1rem;
    text-align: center; color: var(--bb-tekst-zacht); font-size: 0.85rem; position: relative;
}
.hbb-dropzone .bi { font-size: 1.4rem; color: var(--bb-groen); }
.hbb-dropzone.hbb-drop-over { border-color: var(--bb-groen); background: var(--bb-beige-licht); }
/* Het onzichtbare bestandsveld beslaat de HELE dropzone (klikken = kiezen), en niets meer.
   ⚠ overflow + isolation op de dropzone: het veld kan zo nooit buiten zijn eigen vak steken
   of boven een andere laag komen te liggen. En title="" op het veld (in de markup): zonder
   title toont Chrome bij hover "Geen bestand gekozen" over het hele vak — gemeld 27 sep 2026
   in de handboek-popup. Geldt voor Handboek-beheer én Taken (zelfde klasse). */
.hbb-dropzone { overflow: hidden; isolation: isolate; }
.hbb-file-input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.hbb-verwijder-knop { color: #c0392b; border-color: #e6b0aa; }

/* ══ HANDBOEK — responsive (Galaxy XCover7 ~480px) ══ */
@media (max-width: 480px) {
    .hb-zoek-input { font-size: 16px; }
    .hb-overlay-titel { font-size: 1.1rem; }
    .hb-melding-balk { flex-direction: column; align-items: stretch; }
    .hb-melding-knop { width: 100%; }
    /* ⚠ box-sizing: zonder dit telt de padding (2×17,6px) BOVENOP de 100% en steekt de
       knop 13px buiten de kaart — op 360px gemeten. Gold al voor de belknop. */
    .hb-contact-tel, .hb-contact-actie { width: 100%; justify-content: center; box-sizing: border-box; }
    .hb-stap-contact { flex-direction: column; align-items: stretch; }
    .hbb-stap-contact-rij { flex-direction: column; }
    .hbb-overlay, .gebr-overlay { padding: 1rem 1rem 1.25rem; }
}

/* Dagdetail: bronnoot bij de bezetting-tijdlijn (uren/AP gesynct vs diensten uit import) */
.stat-dag-bron-noot { font-size: 0.75rem; color: #9A8A76; margin: -0.35rem 0 0.6rem; font-style: italic; }
.stat-tijdas-assert { font-size: 0.75rem; color: #c0392b; font-weight: 600; margin: 0.4rem 0 0.2rem; }
.stat-halfuur-afgeleid { font-style: italic; text-decoration: underline dotted #C9B89A; text-underline-offset: 2px; }

/* ══ Statistieken herontwerp stap 1 (sessie 92): compacte tegels + onderbouwing-uitklap ══ */

/* Tegels compacter (micro-labels + kleinere AP-badge). De 7-PASSEN-fit met
   minmax(0,1fr) geldt ALLEEN op desktop (>=1200px); daaronder blijft het oude
   gedrag: repeat(7,1fr) + min-width 480px op .stat-week-grid + wrapper overflow-x,
   dus content-brede tegels die horizontaal scrollen (mobiel/Xcover). Sessie 93-fix. */
.stat-week-grid { gap: 0.3rem; }
.stat-week-dag  { padding: 0.4rem 0.2rem; min-height: 60px; gap: 0.1rem; border-radius: 7px; }
.stat-week-dag-naam   { font-size: 0.6rem; }
.stat-week-dag-datum  { font-size: 0.7rem; }
.stat-week-dag-omzet  { font-size: 0.72rem; }
.stat-week-rij        { gap: 0.15rem; }
.stat-week-rij-label  { font-size: 0.58rem; }   /* Vw/Re als micro-label (zwart, sessie 99) */
.stat-week-dag-ap     { padding: 0 0.28rem; font-size: 0.62rem; }
@media (min-width: 1200px) {
    .stat-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
}

/* Omzet-cel absorbeert de Verwacht→Gerealiseerd-vergelijking (label mag afbreken) */
.stat-dag-kpi-omzet .stat-dag-kpi-label { white-space: normal; line-height: 1.3; }

/* Onderbouwing-uitklap — licht/rustig (UITLEG), bewust lichter dan het beoordeel-form (ACTIE) */
/* Eén doorlopende kaart: dichte regel + open verhaal delen rand + achtergrond
   (open = dezelfde kaart langer, GEEN geneste doos). Strak onder de strip. */
.stat-dag-uitleg {
    margin: 0.5rem 0 0.25rem;
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: #FFFAEA;
    overflow: hidden;
    transition: border-color 0.15s;
}
.stat-dag-uitleg:hover { border-color: #E4CFA0; }
.stat-dag-uitleg-kop {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0.55rem 0.85rem;
    min-height: 44px;
    cursor: pointer;
    font-size: 0.85rem; color: #6B5A44; text-align: left;
    touch-action: manipulation;
}
.stat-dag-uitleg-kop:hover { color: #3D2C1A; }
.stat-dag-uitleg-kop:focus-visible { outline: 2px solid var(--bb-terracotta); outline-offset: -2px; border-radius: 10px; }
.stat-dag-uitleg-samenvatting { font-weight: 500; }
.stat-dag-uitleg-chevron { color: var(--bb-terracotta); font-weight: 700; flex-shrink: 0; font-size: 0.95rem; }
.stat-dag-uitleg-verhaal {
    padding: 0.1rem 0.95rem 0.7rem;
    border-top: 1px solid #F0E4C8;   /* subtiele scheiding BINNEN dezelfde kaart */
}
.stat-dag-uitleg-zin {
    margin: 0.5rem 0 0;
    font-size: 0.9rem; line-height: 1.5; color: #4A3D2C;
    max-width: 68ch;
}
.stat-dag-uitleg-zin.gedempt { color: #9A8A76; font-size: 0.82rem; }

/* Banner leest als de dichte staat van het beoordeel-form (actie): chevron-cue */
.review-beoordeel-chevron { color: var(--bb-terracotta); font-weight: 700; margin-left: 0.35rem; }

/* Verklaar-loket archief (sessie 93) */
.lb-archief-blok { margin-top: 0.75rem; }
.lb-archief-kop {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: #FFFAEA; border: 1px solid var(--bb-border); border-radius: 8px;
    padding: 0.5rem 0.8rem; min-height: 44px; cursor: pointer;
    font-size: 0.85rem; font-weight: 600; color: #6B5A44; text-align: left; touch-action: manipulation;
}
.lb-archief-kop:hover { border-color: var(--bb-terracotta); }
.lb-archief-kop:focus-visible { outline: 2px solid var(--bb-terracotta); outline-offset: 2px; }
.lb-archief-chevron { color: var(--bb-terracotta); font-weight: 700; }

/* Handboek in-app PDF-viewer (self-hosted PDF.js, sessie 94) */
.hb-bijlage-pdf { display:flex; flex-direction:column; width:100%; height:70vh; max-height:70vh; }
.bbpdf-bar { display:flex; align-items:center; justify-content:center; gap:0.75rem; padding:0.35rem; border-bottom:1px solid var(--bb-border); background:#FFFAEA; flex-shrink:0; }
.bbpdf-navbtn { min-width:40px; min-height:40px; border:1px solid var(--bb-border); border-radius:8px; background:#fff; color:var(--bb-bruin); font-size:1.2rem; line-height:1; cursor:pointer; touch-action:manipulation; }
.bbpdf-navbtn:hover { border-color:var(--bb-terracotta); }
.bbpdf-teller { font-size:0.85rem; color:#6B5A44; min-width:64px; text-align:center; }
.bbpdf-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:#e9e4da; padding:0.5rem; display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.bbpdf-pagina { width:100%; max-width:820px; height:auto; box-shadow:0 1px 6px rgba(0,0,0,0.18); background:#fff; }
.bbpdf-status { padding:2rem 1rem; text-align:center; color:#6B5A44; }
.bbpdf-status.bbpdf-fout { color:#c0392b; }

/* Verklaar-loket: beantwoorder + systeem-signaal (sessie 94) */
.lb-afwijk-door { color:#9A8A76; }
.lb-afwijk-systeem { color:#9A8A76; font-style:italic; }

/* Systeem-signaal: kanaal dat stil faalde (sessie 95) — loket + dagbriefing */
.lb-systeem-rij {
    display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
    padding:0.35rem 0; border-top:1px solid #F0D8C8;
}
.lb-systeem-rij:first-of-type { border-top:none; }
.lb-systeem-tekst { font-size:0.9rem; color:#3D2C1A; }
.lb-systeem-kanaal {
    display:inline-block; background:#A64C01; color:#FFF; font-weight:600;
    font-size:0.72rem; border-radius:20px; padding:0.05rem 0.5rem; margin-right:0.4rem;
}
/* Heropend: al eens afgevinkt, daarna opnieuw gevuurd. Zelfde tint als de andere
   waarschuwingen, want het is geen nieuwe storing maar een bekende die terugkomt. */
.lb-systeem-heropend {
    display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.4rem;
    background: var(--bb-tint-waarschuwing); color: var(--bb-tekst-waarschuwing);
    border-radius: var(--bb-radius-pill); font-size: 0.72rem; font-weight: 700;
}
.lb-systeem-meta { color:#9A8A76; }
/* "Gezien" (superuser): omlijnd en klein — het is afvinken, geen hoofdactie. Tikvlak 44px
   hoog via min-height; geen focusring na een tik (touch-oppervlak). */
/* Het vrije-naamveld van NaamKiezer draagt Bootstrap .form-control, waarvan de focus
   blauw gloeit. Zelfde huisstijl als de formuliervelden. */
input.naamkiezer-invoer:focus {
    outline: none;
    border-color: var(--bb-terracotta, #A64C01);
    box-shadow: 0 0 0 3px rgba(166,76,1,0.1);
}

/* Modelversie-noot in Voorspelkwaliteit (Omzetbeheer) — sessie 100 */
.ob-kwaliteit-modelnoot { font-size:.8rem; color:#7a6a55; margin-top:.4rem; font-style:italic; }

/* ── Reserveringen — dashboardblok + overlay-lijst (sessie 131, brok C1) ───────────
   TWEE OPPERVLAKKEN met één woordenschat. Het dashboardblok is sinds brok C1 alleen een
   MELDING: één knop met één zin. De volledige lijst zit in de beheer-overlay
   (ReserveringLijst), en daar staan de rijen, de pills en het detailpaneel.

   Waarom gesplitst: het blok groeide uit tot de langste kaart van het dashboard terwijl je
   er meestal alleen even wilt weten óf er iets is. */

/* ── Dashboardblok ───────────────────────────────────────────────────────────────── */
.reserv-blok {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1rem;
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    /* De hoogte volgt het SCHOONMAAK-blok (.bb-taak-blok.bb-blok-dashboard) zodat de
       dashboardkaarten onder elkaar hetzelfde ritme houden: 75px = 24px padding + 2px rand
       + een kopregel van 36px + de samenvattingsregel. Verandert SchoonmaakBlok van hoogte,
       dan hoort dit getal mee te veranderen — daar is geen token voor. */
    box-sizing: border-box;
    min-height: 75px;
    justify-content: center;
}
/* Het blok IS de knop. Alles wat de browser standaard op een <button> zet moet eraf,
   anders staat er een grijs vlak met gecentreerde systeemletters op het dashboard. */
button.reserv-blok-knop {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Geen focusring: tik-oppervlak op een tablet aan de bar, net als de rijen en de
   week-toggle van vroeger (sessie 116). De terugkoppeling zit in :active. */
button.reserv-blok-knop:focus,
button.reserv-blok-knop:focus-visible { outline: none; }
button.reserv-blok-knop:active { background: var(--bb-beige); }
/* De hover-dim van .bb-taak-blok hoort niet bij een kaart met een eigen :active. */
.reserv-blok:hover { filter: none; }

.reserv-top-rij { display: flex; align-items: center; gap: 0.5rem; }
.reserv-titel   { font-size: 0.95rem; color: var(--bb-tekst); }
.reserv-blok-knop .reserv-chevron { margin-left: auto; }

/* De ENE zin. Op de laptop past hij strak onder de kop; op een telefoon heeft hij lucht
   nodig, anders plakt hij tegen de kopregel. Dat verschil is precies de 75 tegen 81px. */
.reserv-compact-regel {
    display: block;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--bb-tekst-zacht);
    /* ⚠ Afkorten, niet wikkelen. De zin noemt nu ook wie er komt en met hoeveel, en op
       360px past dat niet altijd — maar een tweede regel maakt het blok hoger dan de
       dashboardkaarten ernaast, en die hoogte is het ritme van de hele kolom. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .reserv-compact-regel { margin-top: 6px; }
    .reserv-compact-rij { margin-top: 6px; }
    .reserv-compact-rij > .reserv-compact-regel { margin-top: 0; }
}
/* Met een teller erbij: zin en teller op één regel. De ZIN krimpt (min-width 0 — zonder
   dat weigert een flex-kind te krimpen, de val uit sessie 123/128), de teller nooit. */
.reserv-compact-rij { display: flex; min-width: 0; gap: 0.3em; }
.reserv-compact-rij > .reserv-compact-regel { flex: 0 1 auto; min-width: 0; }
.reserv-compact-akkoord {
    flex: 0 0 auto;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 600;
    color: var(--bb-tekst);
    white-space: nowrap;
}

.reserv-vergaderregel {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--bb-tekst);
}
.reserv-vergader-af { color: var(--bb-tekst-zacht); }

/* ── Overlay-lijst ───────────────────────────────────────────────────────────────── */
.reserv-dagkop {
    /* Zelfde grootte en dikte als .reserv-tijd: de dagkop is de ankerregel van de dag
       eronder, dus hij hoort niet kleiner te zijn dan de tijd. */
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--bb-tekst-zacht);
    margin-top: 0.75rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--bb-border);
}
.reserv-lijst > .reserv-dagkop:first-child { margin-top: 0; }
/* Alleen het relatieve label schreeuwt; de datum blijft gewone letters. */
.reserv-daglabel { text-transform: uppercase; letter-spacing: 0.04em; }

/* ── De kaart ─────────────────────────────────────────────────────────────────────────
   Elke reservering is een eigen kaartje op de witte overlay: crème met een rand, zodat je
   in één blik ziet waar de ene ophoudt en de volgende begint. Dat kon met scheidslijnen
   niet meer, sinds elke reservering zijn details altijd toont en dus meerdere regels hoog is.

   ⚠ GEEN statuskleur op de kaart. Kleur is in deze app status (sessie 108) en dat hoort
   hier niet: een geannuleerde kaart houdt dezelfde rand. Het doorstrepen per element en het
   terracotta merk doen dat werk al. */
.reserv-kaart {
    background: var(--bb-crème);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}
.reserv-dag { display: flex; flex-direction: column; gap: 0.5rem; }

/* ── De kopregel van een kaart ────────────────────────────────────────────────────────
   ÉÉN vorm voor alle drie de bronnen. De G/V-letters zijn weg: met een derde bron erbij zei
   één letter niets meer, en de herkomst staat nu in gewone taal onderaan de kaart.
   Twee rasterregels: feiten boven, de twee pills eronder. */
.reserv-rij {
    --reserv-tijd-kol: 3.4em;
    --reserv-gap: 0.6rem;

    display: grid;
    grid-template-columns: var(--reserv-tijd-kol) auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--reserv-gap);
    row-gap: 0.25rem;
    font-size: 0.92rem;
    color: var(--bb-tekst);
}
.reserv-rij > .reserv-tijd  { grid-area: 1 / 1; }
.reserv-rij > .reserv-pers  { grid-area: 1 / 2; }
.reserv-rij > .reserv-wie   { grid-area: 1 / 3; }
.reserv-rij > .reserv-pills { grid-area: 2 / 1 / 3 / 4; }

/* Een ZAAL draagt een tijdvak ("09:00–12:00"), een tafel één tijd. Dat hangt aan de SOORT,
   niet aan de bron — een handmatig aangenomen vergadering krijgt dezelfde brede kolom. */
.reserv-rij-zaal { --reserv-tijd-kol: 7em; }

/* Onder 420px is er naast een tijdvak van 7em geen ruimte meer voor "N pers." én een naam:
   de naam werd tot een paar letters afgeknepen, en juist die zegt wie er komt. Dus krijgt
   de naam een eigen regel. Gemeten breekpunt, niet gekozen. */
@media (max-width: 420px) {
    .reserv-rij-zaal {
        grid-template-columns: var(--reserv-tijd-kol) 1fr;
        grid-template-rows: auto auto auto;
    }
    .reserv-rij-zaal > .reserv-tijd  { grid-area: 1 / 1; }
    .reserv-rij-zaal > .reserv-pers  { grid-area: 1 / 2; justify-self: start; }
    .reserv-rij-zaal > .reserv-wie   { grid-area: 2 / 1 / 3 / 3; }
    .reserv-rij-zaal > .reserv-pills { grid-area: 3 / 1 / 4 / 3; }
}

/* Het chevron bestaat alleen nog op het DASHBOARDBLOK (dat is één knop naar de overlay).
   In de lijst is het weg: daar valt niets meer uit te klappen. */
.reserv-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    color: var(--bb-tekst-zacht);
    font-size: 1.2em;
    line-height: 1;
}

.reserv-tijd { font-weight: 700; font-variant-numeric: tabular-nums; }
/* ⚠ Breekt NOOIT. Een auto-rasterkolom mag krimpen tot min-content, en dat is bij
   "8 pers." het woord "pers." — dan staat de 8 op een eigen regel. Met nowrap is
   min-content de hele tekst en kan de kolom niet verder inzakken. */
.reserv-pers { color: var(--bb-tekst-zacht); white-space: nowrap; }

/* ⚠ min-width:0 is wat de kolom laat KRIMPEN. Zonder dat weigert een 1fr-grid-kolom kleiner
   te worden dan zijn inhoud en duwt één nowrap-element de rij buiten de kaart — gemeten:
   scrollWidth 682px op een venster van 360px (sessie 128). */
.reserv-wie {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}
/* ⚠ In de OVERLAY wikkelt een lange organisatie; hij wordt niet afgekapt. Er is ruimte
   (de kaart is meerdere regels hoog) en "Nederlandse Voedsel- en War…" zegt minder dan twee
   regels. Op de DASHBOARDREGEL geldt het omgekeerde: daar kapt hij wel af, want die regel
   mag het blok niet hoger maken. Twee oppervlakken, twee antwoorden. */
.reserv-naam {
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}
.reserv-merken { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }

/* ⚠ TWEEDE BEWUSTE UITZONDERING op "kleur is status" in dit blok (de eerste zijn GEWIJZIGD
   en GEANNULEERD). Een gemiste allergie is geen cosmetisch probleem; dit icoon is precies
   waarom de oude voetregel bestond. Alleen het ICOON en de tekst kleuren — geen kaart, geen
   rand, geen tint. */
.reserv-allergie-icoon {
    color: var(--bb-terracotta);
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 0.3rem;
}

/* Twee pills op regel 2: wat er klaar moet, en hoe er wordt afgerekend. Neutraal omlijnd —
   ze zijn een instructie, geen waarschuwing. Ze wikkelen binnen de rij in plaats van hem
   open te duwen. */
.reserv-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    min-width: 0;
}
.reserv-pill {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--bb-border);
    color: var(--bb-tekst-zacht);
    border-radius: var(--bb-radius-pill);
    /* Eén regel met ellipsis bij ruimtegebrek: een pil die over twee regels breekt verliest
       zijn vorm. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrangementchip in het detailpaneel — olijf, want dat is een PRODUCT, geen instructie. */
.reserv-arr {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    font-size: 0.78rem;
    border: 1px solid var(--bb-groen-licht);
    color: var(--bb-groen);
    border-radius: var(--bb-radius-pill);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* GEWIJZIGD en GEANNULEERD. ⚠ Bewuste, beperkte uitzondering op de regel dat kleur in deze
   app status is (sessie 108/116): deze twee woorden kosten het team echt werk als ze ze
   missen — een zaal klaarzetten voor een vergadering die niet doorgaat, of met de verkeerde
   opstelling. Alleen de LETTERS kleuren. */
.reserv-merk {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--bb-terracotta);
    white-space: nowrap;
}
.reserv-status {
    font-size: 0.78rem;
    color: var(--bb-tekst-zacht);
}

/* ── Detailpaneel ─────────────────────────────────────────────────────────────────── */
/* De details staan ALTIJD in de kaart. Is er niets gevuld, dan rendert dit blok leeg en
   valt het samen met de :empty-regel weg — een kaart zonder extra’s is dan precies
   regel 1 + pills + bronregel. */
.reserv-detail {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--bb-tekst);
}
.reserv-detail:empty { display: none; }

/* Waar het vandaan komt, in gewone taal — geen "Bron: CHP". ONDERAAN en klein: het bepaalt
   wél wat je met de reservering kunt (een GuestPlan-rij verander je in GuestPlan), maar het
   is niets om klaar te zetten. */
/* De herkomst-regels als één blok: onderling strak, met ruimte erboven. */
.reserv-bronblok { margin-top: 0.4rem; }
.reserv-bronblok .reserv-detail-bron { margin-top: 0; }
.reserv-detail-bron {
    margin-top: 0.4rem;
    color: var(--bb-tekst-zacht);
    font-size: 0.75rem;
}
.reserv-detail-regel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    padding: 0.12rem 0;
}
.reserv-detail-kop {
    flex: 0 0 5.6em;
    color: var(--bb-tekst-zacht);
    font-size: 0.78rem;
}
.reserv-detail-chips { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; min-width: 0; }
.reserv-detail-wanneer { color: var(--bb-tekst-zacht); }
/* De factuurgegevens zoals de klant ze gaf: de regelovergangen zijn van hem, niet van ons. */
.reserv-factuurblok { white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.reserv-detail-allergie { color: var(--bb-terracotta); }
/* Beheerinformatie: een dunne scheiding, geen eigen kaart — het hoort bij dezelfde
   reservering, het is alleen niet voor iedereen. */
.reserv-detail-factuur {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--bb-border);
}

/* Geannuleerd: doorgehaald én gedimd, maar NIET verwijderd — het team moet kunnen zien DAT
   er iets vervalt, inclusief een geschrapt arrangement.
   ⚠ PER ELEMENT, niet als hele rij. Met opacity 0.6 over de rij zakt het terracotta van
   GEANNULEERD naar ongeveer 2,3:1 contrast op crème — dan is juist het woord onleesbaar dat
   de hele melding draagt. */
.reserv-geannuleerd .reserv-tijd,
.reserv-geannuleerd .reserv-pers,
.reserv-geannuleerd .reserv-naam { opacity: 0.6; text-decoration: line-through; }
.reserv-geannuleerd .reserv-pill { opacity: 0.6; }

/* Vandaag en voorbij: gedimd, maar nog te openen — wie wil weten wat er stond kan kijken. */
.reserv-af .reserv-tijd,
.reserv-af .reserv-pers,
.reserv-af .reserv-naam,
.reserv-af .reserv-pill { opacity: 0.55; }

/* Klein en rustig onderaan de kaart: het is een uitweg, geen oproep. Geen statuskleur. */
/* De knoppen van een kaart (C2b). Ze wikkelen op een smalle kaart; de rij-afstand is
   14px zodat de 44px-tikvlakken (zie ::after, 6px boven en onder de knop) van twee rijen
   elkaar niet raken — bij precies 12px raakten ze, en door subpixel-plaatsing op 360px viel
   een tik op de rand dan bij de verkeerde knop (gemeten met een hit-test). */
.reserv-kaart-acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px 0.5rem;
    margin-top: 0.6rem;
}
/* Akkoord op rekening staat BOVEN de gewone knoppen: dat is waarvoor de manager hier is. */
.reserv-kaart-akkoord { justify-content: flex-start; }
/* 14px tussen de akkoordrij en de rij eronder, net als de rij-afstand binnen een rij:
   met minder overlappen de tikvlakken en raakt een tik onderaan "Akkoord" de knop eronder. */
.reserv-kaart-akkoord + .reserv-kaart-acties { margin-top: 14px; }
.reserv-kaart-knop {
    position: relative;
    min-height: 32px;
    padding: 0 0.7rem;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--bb-tekst-zacht);
    background: transparent;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-pill);
    cursor: pointer;
    touch-action: manipulation;
}
.reserv-kaart-knop:focus, .reserv-kaart-knop:focus-visible { outline: none; }
.reserv-kaart-knop:active { background: var(--bb-beige); }
/* Tikvlak 44px, alleen VERTICAAL opgerekt: een horizontaal uitstekend ::after gaf eerder
   7px horizontale scroll zonder dat er een element buiten de kaart stak (sessie 129).
   ⚠ -7px, niet -6px: een absoluut ::after rekent vanaf de PADDING-box, dus binnen de rand
   van 1px. Met -6px werd het tikvlak 42px — gemeten met een hit-test, niet gezien. */
.reserv-kaart-knop::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
/* "Ja, …" en "Akkoord": zwaarder in letter, niet in kleur. */
.reserv-kaart-knop-ja { font-weight: 700; color: var(--bb-tekst); border-color: var(--bb-tekst-zacht); }

/* De inline stap in de kaart: naam kiezen, de vraag, ja/nee. */
.reserv-actie { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--bb-border); }
.reserv-actie-wie { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.reserv-actie-vraag { margin-top: 0.35rem; font-size: 0.88rem; color: var(--bb-tekst); }
.reserv-actie-vraag-kop { margin-top: 0; margin-bottom: 0.35rem; font-weight: 600; }
.reserv-actie-fout { margin-top: 0.4rem; font-size: 0.82rem; color: var(--bb-tekst-waarschuwing); }

/* Bovenaan de overlay, alleen voor manager+: tik = naar de eerste aanvraag. */
.reserv-aanvragen {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    color: var(--bb-tekst);
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
}
.reserv-aanvragen:focus, .reserv-aanvragen:focus-visible { outline: none; }
.reserv-aanvragen:active { background: var(--bb-beige); }

/* De ingang voor een nieuwe reservering: bovenaan de lijst, 44px tikdoel. */
.reserv-nieuw {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-bottom: 0.75rem;
    padding: 0 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--bb-terracotta);
    border: none;
    border-radius: var(--bb-radius-pill);
    cursor: pointer;
    touch-action: manipulation;
}
.reserv-nieuw:focus, .reserv-nieuw:focus-visible { outline: none; }
.reserv-nieuw:active { filter: brightness(0.92); }

/* ── Na opslaan: zeggen WAT er is opgeslagen (C2a-4) ─────────────────────────────────
   Olijf op de lichte pillvulling: een bevestiging, geen waarschuwing. Eén regel die mag
   wikkelen — hij draagt de dag, het tijdvak en de naam, en die moeten alle drie leesbaar zijn. */
.reserv-bevestiging {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bb-groen);
    background: var(--bb-pill-vulling);
    border-radius: 12px;
    overflow-wrap: anywhere;
}
.reserv-bevestiging .bi { flex-shrink: 0; margin-top: 0.1rem; }

/* De net opgeslagen kaart licht kort op en dooft dan uit naar de gewone rand. */
.reserv-kaart-net { animation: reserv-net 2.4s ease-out 1; }
@keyframes reserv-net {
    0%, 35% { box-shadow: 0 0 0 3px var(--bb-groen-licht); border-color: var(--bb-groen); }
    100%    { box-shadow: 0 0 0 0 transparent; border-color: var(--bb-border); }
}
@media (prefers-reduced-motion: reduce) { .reserv-kaart-net { animation: none; } }

/* ── Later: alles ná de zeven dagen ──────────────────────────────────────────────────
   De toggle is een stille tekstregel met een chevron, geen knop die om aandacht vraagt:
   wie de overlay opent komt voor de komende dagen. 44px tikdoel. */
.reserv-later-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin-top: 1rem;
    padding: 0 0.25rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--bb-tekst-zacht);
    background: none;
    border: none;
    border-top: 1px solid var(--bb-border);
    cursor: pointer;
    touch-action: manipulation;
    text-align: left;
}
.reserv-later-toggle:focus, .reserv-later-toggle:focus-visible { outline: none; }
.reserv-later-toggle:active { background: var(--bb-beige-licht); }

/* ── Het formulier ─────────────────────────────────────────────────
   Één kolom, labels boven de velden. Elk label is de vraag zoals je hem stelt. */
.resf {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    /* ⚠ De Opslaan-knop plakte tegen de onderrand van het paneel: de padding van de modal
       valt bij een SCROLLEND gebied weg, precies zoals bij de lijst. Zelfde onderruimte,
       plus de safe-area voor de home-indicator. */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
.resf-terug {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 0.6rem 0 0;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--bb-groen);
    background: none;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
}
.resf-terug:focus, .resf-terug:focus-visible { outline: none; }
.resf-intro { font-size: 0.88rem; color: var(--bb-tekst-zacht); }
/* De grens van dit formulier, kleiner en gedempter dan de openingszin: het is een
   uitzondering, geen instructie. */
.resf-intro-klein { font-size: 0.8rem; color: var(--bb-tekst-zacht); opacity: 0.85; margin-top: -0.55rem; }
.resf-veld  { display: flex; flex-direction: column; gap: 0.35rem; }
.resf-label { font-size: 0.9rem; font-weight: 600; color: var(--bb-tekst); }
.resf-hint  { font-size: 0.8rem; color: var(--bb-tekst-zacht); }
/* "optioneel" / "één per regel" naast een label: zelfde toon als een hint, maar op de
   labelregel — zodat je vóór het typen weet of het moet. */
.resf-optioneel { font-weight: 400; font-size: 0.78rem; color: var(--bb-tekst-zacht); }
/* Label links, de overneem-link rechts op dezelfde regel — hij hoort bij dat veld en
   mag geen eigen rij kosten. */
.resf-label-rij { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.resf-kopieer {
    margin-left: auto;
    min-height: 32px;
    padding: 0;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--bb-groen);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    touch-action: manipulation;
}
.resf-kopieer:focus, .resf-kopieer:focus-visible { outline: none; }

/* ⚠ 16px is geen smaak maar een eis: onder 16px zoomt iOS Safari bij het focussen in,
   en dan staat het formulier scheef op het scherm (zelfde regel als elders in de app). */
.resf-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    font-size: 16px;
    font-family: inherit;
    color: var(--bb-tekst);
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
}
.resf-tekstvak { min-height: 64px; resize: vertical; }
/* Focus in huisstijl, gelijk aan .ko-input (kasopmaak): terracotta rand + zachte gloed.
   Zonder deze regel toonde elk veld — het duidelijkst het notitieveld — de blauwe
   browserrand (sessie 131-nazorg). Geldt voor input, select én textarea van het formulier. */
.resf-input:focus {
    outline: none;
    border-color: var(--bb-terracotta, #A64C01);
    box-shadow: 0 0 0 3px rgba(166,76,1,0.1);
}
/* Een <select> erft geen input-uiterlijk; zonder dit is hij systeemgrijs en korter. */
select.resf-input { appearance: none; -webkit-appearance: none; background-image: none; }
.resf-input:disabled { background: var(--bb-beige-licht); color: var(--bb-tekst-zacht); }

.resf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.resf-chip {
    min-height: 44px;
    padding: 0 0.9rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--bb-groen);
    background: transparent;
    border: 1px solid var(--bb-groen-licht);
    border-radius: var(--bb-radius-pill);
    cursor: pointer;
    touch-action: manipulation;
}
.resf-chip:focus, .resf-chip:focus-visible { outline: none; }
.resf-chip:active { background: var(--bb-beige); }
.resf-chip.actief { background: var(--bb-groen); border-color: var(--bb-groen); color: #fff; }

.resf-tijdvak { display: flex; align-items: center; gap: 0.5rem; }
.resf-tijdvak .resf-input { width: auto; flex: 1 1 0; min-width: 0; }
.resf-tot { font-size: 0.88rem; color: var(--bb-tekst-zacht); }

/* Stepper: 44px per knop, zodat je hem met een duim bedient en geen toetsenbord nodig hebt. */
.resf-stepper { display: flex; align-items: center; gap: 0.75rem; }
.resf-stap {
    width: 44px; height: 44px;
    font-size: 1.3rem;
    font-family: inherit;
    color: var(--bb-groen);
    background: transparent;
    border: 1px solid var(--bb-groen-licht);
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
}
.resf-stap:focus, .resf-stap:focus-visible { outline: none; }
.resf-stap:active { background: var(--bb-beige); }
/* Typbaar aantal tussen de twee knoppen: 44px hoog zoals de rest, ≥16px tegen de
   iOS-zoom, en breed genoeg voor drie cijfers plus de placeholder. */
.resf-aantalveld {
    width: 4.5em;
    flex: 0 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.resf-gekozen { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.resf-wijzig {
    min-height: 44px; min-width: 44px;
    color: var(--bb-tekst-zacht);
    background: none; border: none; cursor: pointer; touch-action: manipulation;
}
.resf-wijzig:focus, .resf-wijzig:focus-visible { outline: none; }

.resf-groep { border-top: 1px solid var(--bb-border); padding-top: 0.75rem; display: flex;
              flex-direction: column; gap: 0.9rem; }
.resf-groep-kop { font-size: 0.8rem; font-weight: 700; color: var(--bb-tekst-zacht);
                  text-transform: uppercase; letter-spacing: 0.04em; }

.resf-vinkje label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem;
                     min-height: 44px; cursor: pointer; }
.resf-vinkje input { width: 20px; height: 20px; }

.resf-euro { display: flex; align-items: center; gap: 0.4rem; }
.resf-euro > span { font-size: 16px; color: var(--bb-tekst-zacht); }

/* De zin die je hardop teruglaat lezen. Dit is het belangrijkste veld van het formulier en
   het is er geen — alles wat erin staat is ingevuld, alles wat je mist is vergeten. */
.resf-terugleesblok {
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}
.resf-terugleeskop { font-size: 0.75rem; font-weight: 700; color: var(--bb-tekst-zacht);
                     text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
.resf-teruglees { font-size: 0.95rem; color: var(--bb-tekst); }

/* Akkoord-modus: waarom je hier bent, direct boven de factuurvelden. */
.resf-akkoord-melding {
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bb-tekst-waarschuwing);
    background: var(--bb-tint-waarschuwing);
    border-radius: 10px;
}
/* Bij bewerken: wie aannam en hoe, alleen lezen. Gedempt — het is context, geen vraag. */
.resf-aangenomen { font-size: 0.85rem; color: var(--bb-tekst-zacht); margin-bottom: 0.5rem; }
.resf-balk { display: flex; flex-direction: column; gap: 0.35rem; }
.resf-opslaan {
    min-height: 48px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--bb-terracotta);
    border: none;
    border-radius: var(--bb-radius-pill);
    cursor: pointer;
    touch-action: manipulation;
}
.resf-opslaan:disabled { background: var(--bb-border); color: var(--bb-tekst-zacht); cursor: default; }
.resf-opslaan:focus, .resf-opslaan:focus-visible { outline: none; }
.resf-nognodig { font-size: 0.82rem; color: var(--bb-tekst-zacht); }
.resf-fout { font-size: 0.82rem; color: var(--bb-tekst-waarschuwing); }
.resf-fout-algemeen {
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: var(--bb-tekst-waarschuwing);
    background: var(--bb-tint-waarschuwing);
    border-radius: 8px;
}

.reserv-leeg {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.88rem;
    color: var(--bb-tekst-zacht);
}
/* De tweede regel hoort bij de eerste: geen eigen 40px-blok eronder, dat leest als een
   losse mededeling in plaats van als één antwoord. */
.reserv-leeg-week { min-height: 0; margin-top: -0.35rem; }

/* ── Beheer-overlays (sessie 116f) ────────────────────────────────────────────────
   IJzeren voorraad, Uithaallijst, Meetpunten en Roosteradvies zijn overlays, geen
   pagina's: BeheerOverlayHost in MainLayout rendert ze, het Instellingen-menu opent ze.
   Maten uit de oude modals (.ijzer-modal 600px, .uithaal-modal 780px). */
.beheer-modal       { max-width: 600px; max-height: 90vh; overflow-y: auto; }
.beheer-modal-breed { max-width: 780px; max-height: 90vh; overflow-y: auto; }

/* ⚠ ALLEEN de reserveringen-overlay. Een lijst die tot zijn inhoud krimpt springt van
   hoogte zodra je een rij uitklapt, en dan verschuift alles onder je vinger. Met een
   minimumhoogte staat het paneel stil en beweegt alleen de inhoud. De andere vier
   beheer-overlays zijn formulieren met een vaste set velden en hebben dit niet nodig. */
.beheer-modal-reserv { min-height: 70vh; }
/* ⚠ De laatste kaart mag niet tegen de onderrand plakken. De modal heeft zijn eigen
   padding, maar die valt bij een SCROLLENDE lijst weg: een overflow-container knipt de
   padding-bottom van het scrollgebied af in de meeste browsers. Vandaar de ruimte op de
   lijst zelf, plus de safe-area voor de home-indicator op een iPhone. */
.beheer-modal-reserv .reserv-lijst {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
/* Op een telefoon schermvullend binnen de bestaande schil: gelijk aan de max-height die
   .bb-recept-modal daar al heeft (90vh), zodat min en max elkaar raken en het paneel niet
   meer meebeweegt met de inhoud. */
@media (max-width: 480px) {
    .beheer-modal-reserv { min-height: 90vh; }
}

/* Welke vestiging je bekijkt of bewerkt. Eén regel, gebruikt door VestigingPill.razor —
   in de beheer-overlays én onder de titel van elke vestigingsafhankelijke pagina. */
.vestiging-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bb-groen);
    background: #eef1e0;
    border: 1px solid var(--bb-groen-licht);
    padding: 0.15rem 0.6rem;
    border-radius: var(--bb-radius-pill);
}
/* In de overlay-kop staat de pill direct onder de titel, met eventuele andere pills
   (bv. "Koeling & vriezers") eronder — vandaar block-level met een kleine ondermarge. */
.bb-recept-modal-header .vestiging-pill {
    display: flex;
    width: fit-content;
    margin: 0 0 0.3rem;
}


/* Eén categoriekop voor alle beheer-overlays: groen, kleinkapitaal, met lijn.
   Norm was .menu-categorie-titel van IJzeren voorraad; Uithaallijst (was terracotta)
   en Roosteradvies (was donkerbruin, geen lijn) volgen die nu. */
/* ══ BESTELLEN v2 (/bestellen) ══════════════════════════════════════════════
   Telefoon-eerst: één kolom, alles minimaal 44px tikbaar, regels ~52px zodat er
   veel op een XCover-scherm past. Geen nieuwe kleuren — alles uit de tokens. */

/* ══ ONDERBALK: omzet en challenges delen één rij ═══════════════════════════
   De balk zelf is ongewijzigd: donker --bb-bruin, lichte tekst, bagel links, en hij groeit
   mee met de omzettekst (op een telefoon twee regels, zoals altijd). De segmenten hebben
   BEWUST geen eigen achtergrond en geen rand — dat zou dozen in een balk maken. De enige
   scheiding is één verticale lijn. */
.ob-rij { display: flex; flex: 1; min-width: 0; align-items: stretch; }
.ob-seg {
    position: relative; min-width: 0;
    display: flex; align-items: center;
    padding: 0 10px;
    cursor: pointer; touch-action: manipulation;
    transition: flex-basis 250ms ease;
}
.ob-seg:first-child { padding-left: 0; }
.ob-seg:last-child  { padding-right: 0; }
/* De scheiding: 1px over de VOLLE balkhoogte, crème op 50%. */
.ob-seg + .ob-seg { border-left: 1px solid rgba(255, 250, 234, 0.5); }
.ob-groot { flex: 0 1 70%; }
.ob-klein { flex: 0 1 30%; }
.ob-rij:has(.ob-seg:only-child) .ob-groot { flex-basis: 100%; }

/* De balk is EGAAL donkerbruin. Er was een voortgangsvulling (een tint lichter, met een
   markeerstreepje voor de verwachte stand) en een fade bij het wisselen van de tekst; beide
   zijn weg. Reden: twee schuivende vlakken in één balk lezen als twee balken, en de voortgang
   staat toch al in de tekst ("€1.240 · 68%"). Voeg hier geen tweede achtergrond terug. */
.ob-tekst {
    /* Mag wikkelen: liever twee regels dan een afgekapte omzet. */
    min-width: 0;
}
.ob-klein .ob-tekst { font-size: 0.85rem; }
/* Klein challenge-segment mag op twee regels, verticaal gecentreerd. */
.ob-klein { text-align: left; }
.ob-seg:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -2px; }

@media (max-width: 400px) {
    .ob-seg { padding: 0 6px; }
    .ob-klein .ob-tekst { font-size: 0.8rem; }
}

/* Vanaf 900px is 70/30 zonde van de ruimte: het challengesegment wordt zo breed als zijn
   inhoud en gaat rechts staan, tegen het uitklap-pijltje aan; de omzet krijgt de rest.
   Het tikgedrag verandert niet — alleen de breedteverdeling. */
@media (min-width: 900px) {
    .ob-seg   { flex: 0 0 auto; padding: 0 1rem; }
    .ob-groot, .ob-klein { flex: 0 0 auto; }
    /* Het EERSTE segment slokt de ruimte op, welk onderdeel er ook groot staat. */
    .ob-rij > .ob-seg:first-child { flex: 1 1 auto; min-width: 0; }
    .ob-rij > .ob-seg:last-child  { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ob-seg { transition: none; }
}

/* Het challengeblok als het los in de onderbalk hangt. */
.challenge-details-los { padding-top: 0.5rem; }

.best-tabs { display: flex; gap: 0.5rem; margin: 0 0 0.5rem; }
.best-tab {
    flex: 1; min-height: 44px; padding: 0.5rem 0.75rem;
    font-size: 0.95rem; font-weight: 700;
    color: var(--bb-tekst); background: #fff;
    border: 1px solid var(--bb-border); border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
.best-tab.actief { background: var(--bb-terracotta); border-color: var(--bb-terracotta); color: #fff; }

/* Eén regel als het past; op smal mag alleen "vorige keer" naar de tweede regel — nooit drie. */
.best-sub {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem;
    margin-bottom: 0.5rem; font-size: 0.82rem; color: var(--bb-tekst-zacht);
}
/* Altijd op een eigen regel onder de besteldag; de naam mag daarbinnen wikkelen. */

/* ── Uitleg: het formulier zelf met verwijzingen ── */
.best-zoek {
    width: 100%; box-sizing: border-box; min-height: 44px; margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem; font-size: 1rem;
    border: 1px solid var(--bb-border); border-radius: 10px; background: #fff;
}

/* ── Categoriekop: blijft staan tijdens het scrollen door de lijst ── */
.best-cat {
    position: sticky; top: 0; z-index: 2;
    margin: 0.75rem 0 0.25rem; padding: 0.3rem 0;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--bb-groen); background: var(--bb-crème);
    border-bottom: 1px solid var(--bb-border);
}

/* ── Productregel ── */
/* Twee kolommen: tekst links (naam boven, meta eronder), stepper rechts en verticaal
   gecentreerd over beide regels. min-width:0 op de tekstkolom is wat het inkorten mogelijk
   maakt — zonder dat weigert een grid-kolom te krimpen en wikkelt de meta alsnog. */
/* ── De productregel (v3) ──────────────────────────────────────────────────
   Gestapeld in plaats van twee kolommen: naam · feiten · actie. De stepper stond
   vroeger rechts náást de tekst, waardoor de tekstkolom op 360px nog maar ~206px
   breed was en de meta-regel moest worden ingekort. Nu heeft elke regel de volle
   breedte en past "Nodig 32 · vorige keer 16 (do 10 sep) · meestal 14" gewoon. */
.best-rij {
    padding: 0.4rem 0 0.5rem;
    border-bottom: 1px solid var(--bb-rijscheiding);
}
.best-naam {
    font-size: 0.92rem; font-weight: 600; color: var(--bb-tekst);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.best-maat { font-weight: 400; color: var(--bb-tekst-zacht); font-size: 0.82rem; }

/* Feitenregel in gewone woorden. De scheidingspunten komen uit CSS, niet uit de
   markup — dan kan er nooit een losse "·" overblijven als een feit ontbreekt. */
.best-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3rem;
    margin-top: 0.05rem; font-size: 0.78rem; color: var(--bb-tekst-zacht);
}
.best-meta > * + *::before { content: "· "; color: var(--bb-border); }
.best-nodig-tekst { font-weight: 700; color: var(--bb-groen); }
.best-vorige-dag  { color: var(--bb-tekst-zacht); }

.best-opm     { font-size: 0.75rem; color: var(--bb-groen); margin-top: 0.1rem; }
.best-remtekst{ font-size: 0.75rem; color: var(--bb-tekst-waarschuwing); margin-top: 0.1rem; }

/* Rem 1: alleen een tint, geen rand — status via achtergrond (sessie-108-regel). */
/* Zie --bb-tint-waarschuwing: de tint van de dashboardkaarten (#fffaf0) staat op WIT en scheelt
   op de crème pagina maar 6 op één kanaal — daar is hij onzichtbaar. */
.best-rem { background: var(--bb-tint-waarschuwing); }

/* Actieregel: tellen links, bestellen rechts. Beide met hun kop erboven, zodat er
   geen hintzin per regel nodig is — die staat één keer bovenaan de pagina. */
.best-actie {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 0.5rem; margin-top: 0.3rem;
}
.best-actie-vak { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.best-actie-bestel { align-items: flex-end; }
.best-actie-kop {
    font-size: 0.68rem; line-height: 1.1; letter-spacing: 0.02em;
    color: var(--bb-tekst-zacht); text-transform: uppercase; font-weight: 700;
}
.best-tel-veld {
    /* border-box: zonder dit telt de padding BOVENOP de 44px en wordt het veld 52 hoog —
       dat kostte 8px op elke regel van de lijst. */
    box-sizing: border-box;
    width: 4rem; height: 44px; padding: 0.2rem 0.4rem; text-align: center;
    font-size: 0.95rem; border: 1px solid var(--bb-border); border-radius: 8px; background: #fff;
}
.best-tel-veld::placeholder { color: #a08c78; font-size: 0.85rem; }

.best-stepper { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.best-min, .best-plus {
    width: 44px; height: 44px; font-size: 1.3rem; line-height: 1;
    color: var(--bb-tekst); background: #fff;
    border: 1px solid var(--bb-border); border-radius: 10px;
    cursor: pointer; touch-action: manipulation;
}
.best-min:disabled { opacity: 0.35; }
.best-aantal-veld {
    box-sizing: border-box; width: 3rem; height: 44px; text-align: center; font-size: 1.05rem; font-weight: 700;
    color: var(--bb-tekst); border: 1px solid var(--bb-border); border-radius: 10px; background: #fff;
}

/* Eén zin, altijd zichtbaar, in plaats van het uitklapbare kastelformulier. */
.best-hoe {
    margin: 0 0 0.6rem; font-size: 0.85rem; line-height: 1.45;
    color: var(--bb-tekst-zacht);
}

/* Naamvraag bij de eerste telling — zelfde laagindeling als de bevestigingsdialoog. */
.best-naam-backdrop { position: fixed; inset: 0; background: rgba(61,44,26,0.35); z-index: 1000; }
.best-naamvraag {
    position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 420px); padding: 1rem 1rem 0.5rem;
    background: #fff; border: 1px solid var(--bb-border); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(61,44,26,0.25);
}
.best-naamvraag .bb-naam-regel { border-bottom: none; margin-bottom: 0; padding-top: 0; }
.best-naam-sluit {
    position: absolute; top: 0.35rem; right: 0.5rem;
    min-width: 44px; min-height: 44px; font-size: 1.1rem;
    color: var(--bb-tekst-zacht); background: none; border: none; cursor: pointer;
}

.best-alles {
    width: 100%; min-height: 44px; margin: 1rem 0;
    font-size: 0.85rem; font-weight: 600; color: var(--bb-groen);
    background: #fff; border: 1px dashed var(--bb-groen-licht); border-radius: 10px;
    cursor: pointer; touch-action: manipulation;
}

/* ── Onderbalk: zelfde hoogte als de dagstandbalk, dus dezelfde reservering ── */
/* Volgt de paginabreedte (.bb-pagina = 900px, gecentreerd) in plaats van het hele venster —
   op een breed scherm liep de balk anders van rand tot rand onder een smalle lijst. */
.best-balk {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 190;
    width: 100%; max-width: 900px; box-sizing: border-box;
    /* ⚠ De onderste padding draagt de home-indicator van iPhone/iPad. Met 0.4rem hield de
       voetregel maar 6px over boven de safe area — technisch vrij, maar op het toestel leest
       dat als "ertegenaan". 0.75rem geeft er zichtbaar lucht onder. */
    min-height: 52px; padding: 0.4rem max(1rem, env(safe-area-inset-left))
                              calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--bb-beige-licht); border-top: 1px solid var(--bb-border);
}
.best-balk-knop {
    width: 100%; min-height: 44px; font-size: 1rem; font-weight: 700;
    color: #fff; background: var(--bb-terracotta);
    border: none; border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
.best-balk-knop:disabled { opacity: 0.4; }
.best-balk-link {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; line-height: 1.2;
}
.best-balk-noot {
    margin-top: 0.3rem; text-align: center;
    font-size: 0.75rem; color: var(--bb-tekst-zacht);
}

/* 96px = de balk ZONDER de safe-area (knop 44 + voetregel over twee regels + padding ≈ 83px),
   want env() staat er hier apart bij opgeteld. Gemeten op 360px met een inset van 34px:
   reservering 130px tegen een balk van 117px. */
body:has(.best-balk) .bb-pagina { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* "Afmaken": beheerregel, alleen voor Manager+. Rustig, want het is geen storing. */
.best-afmaken {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    /* MAG wikkelen. Met nowrap bepaalde deze regel de min-content-breedte van de
       dashboardkaart en rekte hij de hele kolom op; op 360px scrolde de pagina daardoor
       horizontaal. overflow-wrap: anywhere zorgt dat zelfs één lang woord dat niet meer kan. */
    overflow-wrap: anywhere;
    min-height: 44px; margin: 0 0 0.75rem; padding: 0.45rem 0.7rem;
    font-size: 0.82rem; line-height: 1.4; color: var(--bb-tekst);
    background: #fff; border: 1px solid var(--bb-border); border-radius: 12px;
    cursor: pointer; touch-action: manipulation;
}
.best-afmaken-link { color: var(--bb-terracotta); font-weight: 700; }
.kaart-afmaken { margin: 0.6rem 0 0; }

/* "Team meldt:" — het team heeft iets doorgegeven; dat mag niet wegvallen tegen de rest. */
.best-meldblok {
    margin: 0 0 0.75rem; padding: 0.5rem 0.7rem;
    background: var(--bb-beige-licht); border: 1px solid var(--bb-border); border-radius: 12px;
}
.best-meldkop {
    display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem;
    font-size: 0.8rem; font-weight: 700; color: var(--bb-groen);
}
.best-meld {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; min-height: 44px; padding: 0.25rem 0; text-align: left;
    font-size: 0.85rem; color: var(--bb-tekst);
    background: none; border: none; border-top: 1px solid var(--bb-border);
    cursor: pointer; touch-action: manipulation;
}
.best-meldblok .best-meld:first-of-type { border-top: none; }
.best-meld-los  { cursor: default; }
.best-meld-pijl { color: var(--bb-terracotta); flex-shrink: 0; }
.best-meld-af {
    flex-shrink: 0; min-height: 44px; padding: 0 0.7rem;
    font-size: 0.75rem; font-weight: 600; color: var(--bb-groen);
    background: #fff; border: 1px solid var(--bb-groen-licht); border-radius: 999px;
    cursor: pointer; touch-action: manipulation;
}
.best-meldchip {
    padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 600;
    color: var(--bb-groen); background: var(--bb-pill-vulling);
    border: 1px solid var(--bb-groen-licht); border-radius: 999px;
}

/* Slotscherm: wat níet besteld is blijft staan als vraag, niet als verwijt. */
.best-nogopen { margin: 0 0 1rem; text-align: left; }
.best-nogopen-rij {
    padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; font-size: 0.88rem;
    background: var(--bb-tint-waarschuwing); border: 1px solid var(--bb-border); border-radius: 12px;
}
.best-nogopen-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.best-terug-klein { width: auto; margin: 0; padding: 0 0.8rem; font-size: 0.8rem; }

/* ── Stap 2: het briefje ── */
.best-overzicht { background: #fff; }
.best-terug {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px;
    background: none; border: none; color: var(--bb-terracotta);
    font-size: 0.9rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.best-ov-kop { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--bb-tekst); }
/* De hele regel is een knop: op een telefoon, met een bestellijst in je andere hand,
   mik je niet op een vakje van 20px. Vandaar button + volle breedte + 44px hoog. */
.best-ov-rij {
    /* De eenheidkolom stond op 5.5rem (88px) voor woorden als "pot" — auto geeft die
       ruimte aan de naam. Die krijgt ellipsis + title in plaats van te wikkelen: het
       AANTAL is wat je overtikt en dat mag nooit wegvallen, en een regel die naar twee
       regels groeit haalt de lijst uit één oogopslag. */
    display: grid; grid-template-columns: 1.3rem 2.2rem auto minmax(0, 1fr) auto;
    gap: 0.4rem; align-items: baseline;
    width: 100%; min-height: 44px; box-sizing: border-box;
    padding: 0.35rem 0.25rem; border: none; border-bottom: 1px solid var(--bb-rijscheiding);
    background: none; font: inherit; font-size: 0.88rem; color: var(--bb-tekst);
    text-align: left; cursor: pointer; touch-action: manipulation;
    /* Ruimte boven de regel waar het positiegeheugen naartoe springt; hier en niet in de
       JS, dan blijft het bij de vormgeving horen. */
    scroll-margin-top: 14px;
}
/* Leeg rondje = "hier kun je tikken". Gevuld = staat in de winkelwagen. */
.best-ov-vink {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; align-self: center;
    border: 1.5px solid var(--bb-border); border-radius: 50%;
    font-size: 0.75rem; font-weight: 700; line-height: 1; color: transparent;
}
.best-ov-vink-aan {
    border-color: var(--bb-groen); background: var(--bb-groen); color: #fff;
}
.best-ov-stand { font-weight: 700; color: var(--bb-tekst); white-space: nowrap; }
.best-ov-aantal  { font-weight: 700; text-align: right; }
.best-ov-eenheid { color: var(--bb-tekst-zacht); font-size: 0.8rem; }
.best-ov-naam    { color: var(--bb-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-ov-nr      { color: var(--bb-tekst-zacht); font-size: 0.72rem; }

/* Afgevinkt = gedimd, niet verborgen. Wie iets per ongeluk aantikt moet het terug kunnen
   vinden, en aan het eind wil je de hele lijst nog één keer kunnen nalopen. */
.best-ov-af { opacity: 0.45; }
.best-ov-af .best-ov-naam { text-decoration: line-through; }

.best-ov-teller {
    margin: 0 0 0.5rem; padding: 0.4rem 0.6rem;
    background: var(--bb-beige-licht); border: 1px solid var(--bb-border); border-radius: 10px;
    font-size: 0.85rem; color: var(--bb-tekst-zacht);
}
.best-ov-teller-klaar {
    background: var(--bb-pill-vulling); border-color: var(--bb-groen-licht);
    color: var(--bb-groen); font-weight: 700;
}

.best-ov-ongeteld-kop {
    display: flex; align-items: center; gap: 0.35rem;
    width: 100%; min-height: 44px; margin-bottom: 0.25rem; padding: 0.2rem 0.1rem;
    background: none; border: none; font: inherit; font-size: 0.8rem;
    color: var(--bb-tekst-waarschuwing); text-align: left;
    cursor: pointer; touch-action: manipulation;
}
.best-ov-ongeteld { margin: 0 0 0.5rem 1.1rem; }
.best-ov-ongeteld-rij { font-size: 0.8rem; color: var(--bb-tekst-zacht); padding: 0.1rem 0; }

/* ── Slotscherm ── */
.best-klaar { text-align: center; padding: 2rem 0 1rem; }
.best-klaar-vink {
    width: 56px; height: 56px; margin: 0 auto 0.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff; background: var(--bb-groen);
}
.best-klaar h2 { margin: 0 0 0.25rem; font-size: 1.3rem; color: var(--bb-tekst); }
.best-klaar p  { margin: 0 0 1.25rem; color: var(--bb-tekst-zacht); }
.best-portal-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; box-sizing: border-box; min-height: 52px; margin-bottom: 0.75rem;
    font-size: 1rem; font-weight: 700; text-decoration: none;
    color: #fff; background: var(--bb-terracotta); border-radius: var(--bb-radius-pill);
}
.best-terug-lijst {
    width: 100%; min-height: 44px; margin-bottom: 0.5rem;
    font-size: 0.9rem; font-weight: 600; color: var(--bb-groen);
    background: #fff; border: 1px solid var(--bb-groen-licht); border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
.best-terug-dash { display: inline-block; min-height: 44px; line-height: 44px; font-size: 0.9rem; }

/* ── Bevestiging bij een fors aantal ── */
.best-bevestig-backdrop { position: fixed; inset: 0; background: rgba(61,44,26,0.35); z-index: 400; }
.best-bevestig {
    position: fixed; left: 1rem; right: 1rem; bottom: 5rem; z-index: 401;
    background: #fff; border: 1px solid var(--bb-border); border-radius: 14px;
    padding: 1rem; box-shadow: 0 10px 30px rgba(61,44,26,0.25);
}
.best-bevestig p { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--bb-tekst); }
.best-bevestig-knoppen { display: flex; gap: 0.5rem; }
.best-ja, .best-nee {
    flex: 1; min-height: 44px; font-size: 0.95rem; font-weight: 700;
    border-radius: var(--bb-radius-pill); cursor: pointer; touch-action: manipulation;
}
/* Nee is hier de veilige keuze en dus de primaire knop. */
.best-nee { color: #fff; background: var(--bb-terracotta); border: none; }
.best-ja  { color: var(--bb-tekst); background: #fff; border: 1px solid var(--bb-border); }

/* Teller "N zonder verpakking" in de ijzeren-voorraadoverlay (fase 2). */
.ijzer-verp-teller {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.75rem; padding: 0.3rem 0.7rem;
    font-size: 0.78rem; font-weight: 600;
    color: var(--bb-groen); background: #fff;
    border: 1px solid var(--bb-groen-licht); border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
.ijzer-verp-teller.actief { background: #eef1e0; }
.ijzer-tellers { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
/* Markering op de rij: melden, niet corrigeren — de mail is niet vanzelf de waarheid. */
.ing-eenheid-check {
    margin-left: 0.4rem; padding: 0.05rem 0.45rem; white-space: nowrap;
    font-size: 0.7rem; font-weight: 600;
    color: var(--bb-tekst-waarschuwing); background: var(--bb-tint-waarschuwing);
    border-radius: var(--bb-radius-pill);
}

/* Eenheid is een keuzelijst, geen vrij tekstveld (bestellen v2, fase 1). */
.ing-eenheid-keuze {
    font-size: 0.8rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--bb-tekst);
    max-width: 8rem;
}

/* Verpakking + opmerking onder het aantal in de ijzeren-voorraadrij (bestellen v2, fase 1).
   Twee kolommen op een ruim scherm, onder elkaar op de telefoon. */
.voorraad-rij-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.75rem;
    margin-top: 0.4rem;
}
.voorraad-rij-extra label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.voorraad-rij-extra span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bb-groen);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.voorraad-rij-extra input {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
}
/* Drie velden (artikelnummer, verpakking, opmerking) passen op een ruim scherm naast elkaar. */
@media (min-width: 800px) {
    .voorraad-rij-extra { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
    .voorraad-rij-extra { grid-template-columns: 1fr; }
}

/* Het artikelnummer klein achter de naam — zelfde maat en kleur als op /bestellen. */
.ing-artnr { color: var(--bb-tekst-zacht); font-size: 0.72rem; margin-left: 0.4rem;
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.ijzer-nr-fout { border-color: #e53e3e !important; background: #fff5f5 !important; }
.ijzer-conflict { margin: 0.75rem 0; }
.ijzer-conflict ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* Alle nummers en schrijfwijzen waaronder dit product binnenkomt. Het hoofdnummer staat in
   het veld erboven en zit hier niet bij — anders lijkt het alsof je dát kunt weghalen. */
.ijzer-alias-rij { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.ijzer-alias {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.1rem 0.2rem 0.1rem 0.45rem; border-radius: 999px;
    background: var(--bb-pill-vulling, #eef1e0); color: var(--bb-tekst-zacht);
    font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.ijzer-alias-weg {
    min-width: 22px; min-height: 22px; padding: 0; line-height: 1;
    background: none; border: 0; color: var(--bb-tekst-zacht);
    font-size: 0.95rem; cursor: pointer;
}
.ijzer-alias-weg:hover { color: #b03a2e; }

.beheer-cat-kop {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bb-groen);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e8e0d5;
}
.beheer-cat-kop:first-of-type { margin-top: 0; }

/* Eén opslaanbalk, STICKY onderin het scrollgebied van de modal (sessie 117): bij dertig
   rijen hoef je niet naar beneden te scrollen om op te slaan — en de onopgeslagen-vraag
   staat op dezelfde plek, dus altijd in beeld. De negatieve marges laten hem over de
   modal-padding heen lopen zodat hij als voetbalk oogt. */
.beheer-opslaan-balk {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem -1.5rem 0;
    padding: 0.75rem 1.5rem 1.5rem;
    background: #FFFAEA;
    border-top: 1px solid var(--bb-border);
}
/* De balk levert zelf de onderrand van de modal. */
.beheer-modal, .beheer-modal-breed { padding-bottom: 0; }
/* Vangnet: terwijl je scrollt ligt de balk óver de content. Wat lijstjes zijn krijgen wat
   lucht zodat de laatste rij niet half achter de balk verdwijnt. */
.beheer-modal .voorraad-lijst:last-of-type,
.beheer-modal-breed .uithaal-tabel-wrapper,
.beheer-modal .meetpunt-tabel { padding-bottom: 0.5rem; }

/* Focus in de overlays: nooit de blauwe browserring, wel zichtbaar bij toetsenbordfocus. */
.bb-recept-overlay button:focus-visible,
.bb-recept-overlay input:focus-visible,
.bb-recept-overlay select:focus-visible {
    outline: 2px solid var(--bb-groen);
    outline-offset: 2px;
}

/* Menu-items zijn knoppen geworden; die moeten zich als de <a>-items gedragen. */
button.bb-dropdown-item {
    width: 100%;
    border: none;
    background: none;
    /* Alleen wat de browser-stylesheet op <button> ANDERS zet dan op <a>: lettertype,
       regelhoogte, spatiëring en uitlijning. Bewust GEEN font/font-size/font-weight —
       die staan op .bb-dropdown-item, en een `inherit` hier (hogere specificiteit) zou
       ze overschrijven met de body-waarden (1rem/400) en de knoppen juist laten
       afwijken van de links. */
    font-family: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}

/* Bevestiging bij sluiten met onopgeslagen wijzigingen — sinds sessie 117 IN de sticky
   balk, niet meer als apart vak eronder. Eén implementatie in BeheerOpslaanBalk, zodat
   ✕, backdrop en Escape zich gelijk gedragen. */
.beheer-bevestig-vraag {
    flex: 1;
    min-width: 12rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bb-tekst);
}
.beheer-knop-omlijnd {
    padding: 0.4rem 1rem;
    border-radius: var(--bb-radius-pill);
    border: 1px solid var(--bb-border);
    background: #fff;
    color: var(--bb-tekst);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.beheer-knop-tekst {
    border: none;
    background: none;
    color: var(--bb-tekst-zacht);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.4rem 0.3rem;
}
.beheer-bevestig-fout {
    width: 100%;
    font-size: 0.82rem;
    color: #c0392b;
}


/* ── Gebruikerstabel op smalle schermen: elke rij wordt een kaart (sessie 117e) ─────────
   Onder 700px is een tabel van zeven kolommen onleesbaar en duwt hij de pagina breed.
   thead verdwijnt; de kolomkop komt terug als data-label vóór de waarde, maar alléén waar
   die iets toevoegt — bij naam en e-mail spreekt de waarde voor zich. */
@media (max-width: 700px) {
    .gebr-tabel, .gebr-tabel tbody, .gebr-tabel thead { display: block; width: 100%; }
    .gebr-tabel thead { display: none; }

    /* De kaart is een grid met benoemde gebieden. De knop beslaat de naam- én de e-mailrij,
       zodat een lange naam in de linkerkolom wrapt zonder eronder te schuiven. Benoemde
       areas i.p.v. order: de leesvolgorde staat hier letterlijk in de CSS. */
    .gebr-tabel tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "naam    knop"
            "email   knop"
            "rol     rol"
            "vest    vest"
            "status  status"
            "actief  actief";
        column-gap: 0.75rem;
        row-gap: 0.35rem;
        align-items: start;

        background: #fff;
        border: 1px solid var(--bb-border);
        border-radius: 12px;
        padding: 0.75rem 1rem;
        margin-bottom: 0.6rem;
    }

    .gebr-tabel td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border-bottom: none;
    }

    /* Label vóór de waarde, waar aanwezig. */
    .gebr-tabel td[data-label]::before {
        content: attr(data-label) ": ";
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--bb-tekst-zacht);
        font-weight: 700;
        margin-right: 0.35rem;
    }

    .gebr-naam       { grid-area: naam; font-weight: 700; font-size: 1rem; }
    /* Lange adressen mogen nooit buiten de kaart lopen. */
    .gebr-email      { grid-area: email; word-break: break-all;
                       font-weight: 400; color: var(--bb-tekst-zacht); }
    .gebr-rol-cel    { grid-area: rol; }
    .gebr-vest       { grid-area: vest; }
    .gebr-status-cel { grid-area: status; }
    .gebr-login      { grid-area: actief; font-size: 0.82rem; color: var(--bb-tekst-zacht); }

    .gebr-vest[data-label]::before { display: block; margin-bottom: 0.2rem; }
    .gebr-status-cel .gebr-status-tekst { display: inline; }

    /* Actieknop rechtsboven, tikbaar (40px). */
    .gebr-actie-cel  { grid-area: knop; align-self: start; justify-self: end; }
    .gebr-actie-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 40px;
        padding: 0 0.8rem;
        white-space: nowrap;
    }
    .gebr-actie-tekst { display: inline; font-size: 0.82rem; }
}

/* Dashboard: bestellen kan elke dag. Op een besteldag de nadruk, anders rustig aanwezig. */
.kaart-bestel-sectie { margin-top: 0.6rem; }
.btn-bestellen {
    display: block; width: 100%; box-sizing: border-box; min-height: 44px;
    line-height: 44px; text-align: center; text-decoration: none;
    font-size: 0.95rem; font-weight: 700; border-radius: var(--bb-radius-pill);
}
.btn-bestellen-primair { color: #fff; background: var(--bb-terracotta); border: 1px solid var(--bb-terracotta); }
.btn-bestellen-rustig  { color: var(--bb-groen); background: #fff; border: 1px solid var(--bb-border); font-weight: 600; }

/* ── /bestellen op een telefoon (XCover ≈ 360px) ─────────────────────────── */
@media (max-width: 400px) {
    .best-meta             { font-size: 0.74rem; gap: 0 0.25rem; }
    .best-naam             { font-size: 0.88rem; }
    .best-maat             { font-size: 0.78rem; }
    /* Stepper iets smaller, maar de knoppen blijven 44px hoog en dus tikbaar. */
    .best-min, .best-plus  { width: 40px; }
    .best-aantal-veld      { width: 2.3rem; }
    .best-tel-veld         { width: 3.4rem; }
    .best-stepper          { gap: 0.15rem; }
    .best-afmaken          { font-size: 0.78rem; }
}

/* ── Kasopmaak: blokken op rekening (brok B, 27 sep 2026) ─────────────────────────────
   ⚠ Hier en niet in Kassaopmaken.Razor.css: OpRekeningBlokken is een KINDcomponent, en
   scoped CSS van de pagina bereikt die niet (les BedragInvoer, sessie 122). Vandaar eigen
   klassen die de vorm van .ko-veld / .ko-input-euro volgen. */
.kor { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.kor-uitleg { font-size: 0.85rem; color: var(--bb-tekst-zacht); line-height: 1.5; }
.kor-blok {
    display: flex; flex-direction: column; gap: 0.7rem;
    background: var(--bb-crème); border: 1px solid var(--bb-border); border-radius: 12px;
    padding: 0.85rem 1rem;
    min-width: 0;
}
.kor-kop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kor-kop-tekst { font-weight: 700; font-size: 0.95rem; color: var(--bb-tekst); min-width: 0; overflow-wrap: anywhere; }
.kor-weg {
    position: relative; flex-shrink: 0;
    min-height: 32px; padding: 0 0.7rem;
    font-family: inherit; font-size: 0.78rem; color: var(--bb-tekst-zacht);
    background: transparent; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
/* Tikvlak 44px, alleen verticaal (zie .reserv-kaart-knop: -7px vanaf de padding-box). */
.kor-weg::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.kor-weg:focus, .kor-weg:focus-visible { outline: none; }
.kor-weg:active { background: var(--bb-beige); }
/* Geen statuskleur, wel onmiskenbaar: dit label reist mee naar de factuurmelding. */
.kor-label {
    align-self: flex-start;
    font-size: 0.75rem; font-weight: 600; color: var(--bb-tekst-waarschuwing);
    background: var(--bb-tint-waarschuwing); border-radius: var(--bb-radius-pill);
    padding: 0.15rem 0.6rem;
}
.kor-veld { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.kor-veld label {
    font-size: 0.8rem; font-weight: 600; color: var(--bb-bruin); opacity: 0.8;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.kor-optioneel { text-transform: none; font-weight: 500; opacity: 0.7; letter-spacing: 0; }
.kor-euro {
    display: flex; align-items: center;
    border: 1.5px solid var(--bb-beige); border-radius: 10px; overflow: hidden;
    background: var(--bb-crème);
}
.kor-euro:focus-within { border-color: var(--bb-terracotta); box-shadow: 0 0 0 3px rgba(166,76,1,0.1); background: #fff; }
.kor-euro span { padding: 0 0.65rem 0 0.85rem; font-size: 0.95rem; color: var(--bb-bruin); opacity: 0.5; user-select: none; }
.kor-euro .ko-input { border: none; border-radius: 0; background: transparent; padding-left: 0; box-shadow: none; min-width: 0; }
.kor-tekstvak { resize: vertical; font-family: inherit; line-height: 1.4; }
.kor-portaal { font-size: 0.88rem; font-weight: 600; color: var(--bb-tekst); }
.kor-fout { font-size: 0.82rem; color: var(--bb-tekst-waarschuwing); }
.kor-suggestie {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
    font-size: 0.88rem; color: var(--bb-tekst);
    background: var(--bb-beige-licht); border: 1px dashed var(--bb-border); border-radius: 12px;
    padding: 0.55rem 0.85rem;
}
.kor-suggestie span { min-width: 0; overflow-wrap: anywhere; }
.kor-voeg, .kor-nog {
    min-height: 44px; padding: 0 1rem;
    font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--bb-tekst);
    background: #fff; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
.kor-nog { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; }
.kor-voeg:focus, .kor-voeg:focus-visible, .kor-nog:focus, .kor-nog:focus-visible { outline: none; }
.kor-voeg:active, .kor-nog:active { background: var(--bb-beige); }
.kor-totaal {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 0.5rem; border-top: 1px solid var(--bb-border);
    font-size: 0.95rem; color: var(--bb-tekst);
}

/* ── Dashboard: factuurmelding, de momentopname in de uitklap ──────────────────────── */
.factuur-label {
    display: inline-block; margin-left: 0.4rem;
    font-size: 0.72rem; font-weight: 600; color: var(--bb-tekst-waarschuwing);
    background: var(--bb-tint-waarschuwing); border-radius: var(--bb-radius-pill);
    padding: 0.05rem 0.5rem; white-space: nowrap;
}
.factuur-snapshot {
    display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem;
    margin: 0 0 0.75rem; font-size: 0.85rem;
}
.factuur-snapshot dt { color: var(--bb-tekst-zacht); font-weight: 600; }
.factuur-snapshot dd { margin: 0; color: var(--bb-tekst); min-width: 0; overflow-wrap: anywhere; }
/* Adres en bestelling houden hun regelovergangen — een adres over vier regels is geen zin. */
.factuur-snapshot .factuur-blok { white-space: pre-line; }
@media (max-width: 420px) {
    .factuur-snapshot { grid-template-columns: 1fr; }
    .factuur-snapshot dd { margin-bottom: 0.3rem; }
}

/* De kassaregel op een zaalkaart: wat er aan de kassa moet gebeuren, met het bedrag INCL.
   btw. Geen statuskleur — het is een instructie, geen alarm — maar wel een eigen vlak, zodat
   hij niet tussen de detailregels verdwijnt. */
.reserv-kassaregel {
    display: flex; align-items: flex-start; gap: 0.45rem;
    margin-bottom: 0.35rem; padding: 0.45rem 0.65rem;
    font-size: 0.85rem; line-height: 1.35; color: var(--bb-tekst);
    background: var(--bb-beige-licht); border-radius: 8px;
    overflow-wrap: anywhere;
}
.reserv-kassaregel .bi { flex-shrink: 0; margin-top: 0.1rem; color: var(--bb-tekst-zacht); }

/* ══ Labelbeheer-ombouw (sessie 140) ═══════════════════════════════════════════
   Lijst: één knop per label over de volle breedte. Overlay (.lbo-*): één formulier in de
   BeheerOverlayHost, op een telefoon schermvullend met de opslaanbalk onderaan. */
.lb-labels-kop { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin: 1.5rem 0 0.25rem; }
.lb-labels-titel { font-size: 1.2rem; font-weight: 700; color: var(--bb-bruin); margin: 0; }
.lb-nieuw-knop { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; white-space: nowrap; }
.lb-lijst-kop { font-weight: 600; color: var(--bb-tekst-zacht); font-size: 0.85rem; text-transform: uppercase;
    letter-spacing: 0.03em; margin: 1rem 0 0.4rem; }
.lb-regel {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    width: 100%; box-sizing: border-box; min-height: 48px; padding: 0.55rem 0.8rem;
    background: #fff; border: 1px solid var(--bb-border); border-radius: 10px;
    font: inherit; text-align: left; color: var(--bb-tekst); cursor: pointer; touch-action: manipulation;
}
.lb-regel:hover { border-color: var(--bb-terracotta); }
.lb-regel:active { background: var(--bb-beige-licht); }
.lb-regel:focus:not(:focus-visible) { outline: none; }
.lb-regel:focus-visible { outline: 2px solid var(--bb-groen); outline-offset: 2px; }
.lb-regel-links { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.lb-regel-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.lb-regel-naam { font-weight: 600; color: var(--bb-bruin); overflow-wrap: anywhere; }
.lb-regel-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; font-size: 0.8rem; color: var(--bb-tekst-zacht); }
.lb-regel-effect { color: var(--bb-groen); overflow-wrap: anywhere; }
.lb-regel-geen { color: var(--bb-tekst-zacht); }
.lb-regel-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex-shrink: 0; }
.lb-regel-volgende { font-size: 0.82rem; color: var(--bb-tekst); white-space: nowrap; }
.lb-pill { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--bb-radius-pill);
    font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.lb-pill-herhaling { background: var(--bb-beige-licht); border: 1px solid var(--bb-border); color: var(--bb-tekst-zacht); }
.lb-pill-geleerd { background: var(--bb-pill-vulling); color: var(--bb-groen); }
@media (max-width: 480px) {
    /* Volgende datum en "geleerd" onder de regel, niet ernaast: dan houdt de tekst de breedte. */
    .lb-regel { flex-wrap: wrap; align-items: flex-start; row-gap: 0.3rem; }
    .lb-regel-rechts { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
    .lb-labels-titel { font-size: 1.1rem; }
    .lbo-tabel th { padding: 0.3rem 0.15rem; }
    .lbo-tabel tbody th { font-size: 0.82rem; }
    .lbo-tabel td { padding: 0.2rem 0.1rem; }
    .lbo-cel { width: 3.3rem; padding: 0.3rem 0.3rem; }
    .lbo-pct { display: none; }
}

/* Archief onder het loket: terug te zetten rijen + één telregel. */
.lb-archief-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.25rem 0.75rem; padding: 0.3rem 0; border-bottom: 1px solid var(--bb-rijscheiding); font-size: 0.86rem; }
.lb-archief-tekst { flex: 1 1 14rem; min-width: 0; color: var(--bb-tekst); }
.lb-archief-tel { margin-top: 0.4rem; }

/* Menu: teller achter "Systeemmeldingen". */
.bb-menu-badge { margin-left: auto; min-width: 1.4rem; padding: 0 0.4rem; border-radius: var(--bb-radius-pill);
    background: var(--bb-terracotta); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.4rem; }

/* Opslaanbalk: iets links (Label verwijderen), de rest rechts. */
.beheer-balk-links { margin-right: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lbo-rood { color: #b23b3b; }
.lbo-zeker { font-size: 0.88rem; color: var(--bb-tekst); }

/* Label-overlay */
.lbo { display: flex; flex-direction: column; gap: 1rem; }
.lbo-veld { display: flex; flex-direction: column; gap: 0.35rem; }
.lbo-label { font-weight: 600; font-size: 0.85rem; color: var(--bb-tekst-zacht); }
.lbo-input { box-sizing: border-box; width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--bb-border);
    border-radius: 8px; font: inherit; font-size: 1rem; background: #fff; color: var(--bb-tekst); }
.lbo-input:focus { outline: none; border-color: var(--bb-terracotta); }
.lbo-hergebruik { color: var(--bb-groen); }
.lbo-segment { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lbo-seg { min-height: 40px; padding: 0.35rem 0.85rem; border-radius: var(--bb-radius-pill);
    border: 1px solid var(--bb-border); background: #fff; color: var(--bb-tekst); font: inherit; font-size: 0.88rem; cursor: pointer; }
.lbo-seg.aan { background: var(--bb-bruin); border-color: var(--bb-bruin); color: #fff; }
.lbo-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lbo-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.3rem 0.2rem 0.65rem;
    border-radius: var(--bb-radius-pill); background: var(--bb-beige-licht); border: 1px solid var(--bb-border);
    font-size: 0.85rem; color: var(--bb-tekst); }
.lbo-chip-vast { padding-right: 0.65rem; }
.lbo-chip-weg { min-width: 32px; min-height: 32px; border: none; background: none; color: var(--bb-tekst-zacht);
    cursor: pointer; border-radius: 50%; }
.lbo-vantot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.88rem; color: var(--bb-tekst-zacht); }
.lbo-vantot input, .lbo-vast input, .lbo-vast select { padding: 0.4rem 0.5rem; border: 1px solid var(--bb-border);
    border-radius: 8px; font: inherit; font-size: 1rem; background: #fff; color: var(--bb-tekst); }
.lbo-vast { display: flex; gap: 0.5rem; }
.lbo-dag { width: 4.5rem; box-sizing: border-box; }
.lbo-plus { align-self: flex-start; min-height: 40px; }
.lbo-vinkjes { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.lbo-vinkje { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; font-size: 0.92rem; color: var(--bb-tekst); }
.lbo-doet { background: var(--bb-beige-licht); border: 1px solid var(--bb-border); border-radius: 10px; padding: 0.7rem 0.85rem; }
.lbo-doet-tekst { margin: 0.3rem 0; font-size: 0.9rem; color: var(--bb-tekst); }
.lbo-geleerd { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--bb-tekst); }
.lbo-eerlijk { margin: 0.3rem 0 0; }
.lbo-uitklap { border-top: 1px solid var(--bb-rijscheiding); padding-top: 0.5rem; }
.lbo-uitklap-kop { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 44px;
    border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--bb-bruin); cursor: pointer; text-align: left; }
.lbo-uitklap-kop .bi { margin-left: auto; color: var(--bb-tekst-zacht); }
.lbo-uitklap-kop:focus:not(:focus-visible) { outline: none; }
.lbo-legenda { margin: 0.2rem 0 0.5rem; }
.lbo-voorbeeld { color: #b3a690; font-weight: 600; }
.lbo-tabel-wrap { overflow-x: auto; margin-bottom: 0.6rem; }
.lbo-tabel { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.lbo-tabel th { text-align: left; font-weight: 600; color: var(--bb-tekst-zacht); padding: 0.3rem 0.4rem; white-space: nowrap; }
.lbo-tabel thead th { font-size: 0.78rem; border-bottom: 1px solid var(--bb-border); }
.lbo-tabel tbody th { color: var(--bb-tekst); }
.lbo-tabel td { padding: 0.25rem 0.3rem; }
.lbo-cel-wrap { display: inline-flex; align-items: center; gap: 0.15rem; }
.lbo-cel { box-sizing: border-box; width: 4.4rem; min-height: 40px; padding: 0.3rem 0.4rem; text-align: right;
    border: 1px solid var(--bb-border); border-radius: 8px; font: inherit; font-size: 1rem; background: #fff; color: var(--bb-bruin); }
.lbo-cel::placeholder { color: #b3a690; font-style: italic; opacity: 1; }
.lbo-cel-eigen { font-weight: 700; border-color: var(--bb-groen); }
.lbo-cel-gewijzigd { background: var(--bb-pill-vulling); }
.lbo-cel-fout { border-color: #c0392b; background: #fdecea; }
.lbo-cel:focus { outline: none; border-color: var(--bb-terracotta); }
.lbo-pct { color: var(--bb-tekst-zacht); font-size: 0.8rem; }
.lbo-overig { font-size: 0.85rem; color: var(--bb-tekst); margin: 0.3rem 0; }
.lbo-jaar { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.86rem; padding: 0.25rem 0;
    border-bottom: 1px solid var(--bb-rijscheiding); }
.lbo-jaar-datum { font-weight: 600; color: var(--bb-tekst); }
.lbo-jaar-waarde { color: var(--bb-groen); }
.lbo-fout { margin-top: -0.25rem; }

/* Label- en systeemmeldingen-overlay: 780px breed; op een telefoon schermvullend. De knoppen-
   balk staat altijd onderaan in beeld (sticky in het scrollgebied van de modal). */
.beheer-modal-vol .beheer-opslaan-balk { justify-content: flex-end; }
/* Past altijd in het venster: 80px boven (overlay-padding) + 2rem onder. Zo valt de knoppenbalk
   ook op een laag scherm binnen beeld. */
.bb-recept-modal.beheer-modal-vol { max-height: calc(100dvh - 80px - 2rem); }
.beheer-modal-vol .beheer-balk-links + .beheer-knop-omlijnd { margin-left: 0; }
@media (max-width: 700px) {
    .bb-recept-overlay:has(.beheer-modal-vol) { padding: 0; }
    .bb-recept-modal.beheer-modal-vol {
        max-width: none; width: 100%; min-height: 100dvh; max-height: 100dvh; border-radius: 0;
        padding: calc(1rem + env(safe-area-inset-top)) 1rem 0;
        display: flex; flex-direction: column;
    }
    .beheer-modal-vol .lbo, .beheer-modal-vol .sm-overlay { flex: 1 0 auto; }
    .beheer-modal-vol .beheer-opslaan-balk {
        margin: auto -1rem 0; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    }
    .lbo-tabel thead th { white-space: normal; }
    .lbo-cel { width: 3.8rem; }
}
.lbo-alle { display: block; font-size: 0.72rem; font-weight: 400; color: var(--bb-tekst-zacht); white-space: normal; }

/* Systeemmeldingen-overlay */
.sm-uitleg { margin-bottom: 0.5rem; }
.sm-rij { padding: 0.5rem 0; }
.sm-gezien { flex-shrink: 0; min-height: 40px; }
.sm-overlay { display: flex; flex-direction: column; }
.sm-lijst { flex: 1 1 auto; }