/* ═══════════════════════════════════════════════════════════════
   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; }

/* ── 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-nieuw-blok { margin-bottom: 0.8rem; }
.lb-nieuw-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
                 background: #FBF7F0; border: 1px solid #ECD5AB; border-radius: 8px; padding: 0.6rem 0.8rem; }
.lb-nieuw-form select { padding: 0.35rem 0.5rem; border: 1px solid #ECD5AB; border-radius: 6px; font-size: 0.85rem; }
.lb-rij { background: #FBF7F0; border: 1px solid #ECD5AB; border-radius: 8px; padding: 0.55rem 0.8rem;
          cursor: pointer; touch-action: manipulation; }
.lb-rij.open { border-color: #A64C01; background: #FDF6ED; }
.lb-rij-hoofd { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.lb-rij-naam { font-weight: 600; color: #3D2C1A; }
.lb-rij-patroon { color: #6B5A44; font-size: 0.82rem; }
.lb-rij-meta { display: flex; gap: 1rem; flex-wrap: wrap; color: #7A6A55; font-size: 0.8rem; margin-top: 0.2rem; }
.lb-rij-effect { color: #55601C; }
.lb-detail { background: #fff; border: 1px solid #ECD5AB; border-top: none;
             border-radius: 0 0 8px 8px; padding: 0.8rem; margin: -0.35rem 0 0.35rem; }
.lb-detail-kop { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
.lb-hernoem { padding: 0.35rem 0.5rem; border: 1px solid #ECD5AB; border-radius: 6px; font-size: 0.9rem; min-width: 12rem; }
.lb-almanak-badge { font-size: 0.72rem; color: #7A6A55; background: #F0E7D6; border-radius: 10px; padding: 0.1rem 0.5rem; }
.lb-melding { color: #55601C; font-size: 0.85rem; margin-bottom: 0.5rem; }
.lb-sectie-label { font-weight: 600; color: #6B5A44; font-size: 0.82rem; margin: 0.7rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.03em; }
.lb-scope-rij { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.lb-scope-chip { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.85rem; color: #3D2C1A; }
.lb-hint { color: #9a8a7a; font-size: 0.78rem; }
.lb-effect-tabel { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin-bottom: 0.5rem; }
.lb-effect-tabel th { text-align: left; color: #7A6A55; font-weight: 600; padding: 0.3rem 0.5rem; border-bottom: 1px solid #ECD5AB; }
.lb-effect-tabel td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #F0E7D6; color: #3D2C1A; }
.lb-effect-form, .lb-voorkomen-form, .lb-patroon-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.4rem 0; }
.lb-patroon-form select { padding: 0.35rem 0.5rem; border: 1px solid #ECD5AB; border-radius: 6px; font-size: 0.85rem; }
.lb-dm { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.85rem; color: #6B5A44; }
.lb-dm-input { width: 4rem; padding: 0.35rem 0.5rem; border: 1px solid #ECD5AB; border-radius: 6px; font-size: 0.85rem; }
.lb-effect-form select, .lb-voorkomen-form input, .lb-pct-input {
    padding: 0.35rem 0.5rem; border: 1px solid #ECD5AB; border-radius: 6px; font-size: 0.85rem; }
.lb-pct-input { width: 5rem; }
.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-rood { background: #b23b3b; }
.lb-btn-mini { background: none; border: none; color: #b23b3b; cursor: pointer; font-size: 0.9rem; }
.lb-voorkomens { display: flex; flex-direction: column; gap: 0.25rem; }
.lb-voorkomen { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; font-size: 0.85rem; }
.lb-voorkomen.komend .lb-vk-datum { font-weight: 600; color: #3D2C1A; }
.lb-voorkomen.verleden { color: #6B5A44; }
.lb-vk-ratios { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.lb-vk-ratio { color: #55601C; }
.lb-effect-buiten td { background: #FBF3E6; }
/* Stap 4a: geleerde-effect-bijsluiter (data-zegt) + informatieve Geleerd-only rij. */
.lb-geleerd-bijsluiter { display: block; color: #9a8a7a; font-size: 0.74rem; font-style: italic; margin-top: 0.1rem; }
.lb-effect-geleerd td { background: #FAF7F0; }
.lb-effect-geleerd .lb-geleerd-waarde { color: #7A6A55; font-style: italic; }
/* 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; }
.lb-buiten-scope { color: #A64C01; font-size: 0.75rem; margin-left: 0.4rem; }

/* 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); }

/* 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-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;
}

.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; }
.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-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); }
.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%; }
    .hb-contact-tel { width: 100%; justify-content: center; }
    .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; }
.lb-uitkomst-verdacht  { color: #8a5a00; font-weight: 600; }
.lb-uitkomst-afgevoerd { color: #999; }

/* 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-blok {
    border:1px solid #E3B7A0; background:#FBEEE6; border-radius:12px;
    padding:0.75rem 0.9rem; margin-bottom:1rem;
}
.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;
}
.lb-systeem-meta { color:#9A8A76; }

.briefing-systeem { border-left:3px solid #A64C01; }
.briefing-systeem-regel { font-size:0.9rem; color:#3D2C1A; padding:0.15rem 0; }

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

/* ── Reserveringen (GuestPlan, sessie 116) ─────────────────────────────────────────
   Eigen dashboard-blok direct onder de Dagbriefing, bewust NIET binnen de inklapbare
   briefing: het moet zichtbaar blijven als die dicht is. Het .bb-taak-blok-frame levert
   alleen de dashboard-tussenruimte (.bb-blok-dashboard); layout en kleur staan hier. */
.reserv-blok {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    background: var(--bb-beige-licht);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    cursor: default;
}
/* De kaart is niet klikbaar; de hover-dim van .bb-taak-blok hoort daar niet bij. */
.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-weekknop {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
    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;
}
/* Geen browser-focusring: dit is een touch-oppervlak, de tik-feedback zit in :active. */
.reserv-weekknop:focus,
.reserv-weekknop:focus-visible { outline: none; }
.reserv-weekknop:active { background: var(--bb-beige); }

.reserv-dagkop {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bb-tekst-zacht);
    margin-top: 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--bb-border);
}
/* Alleen het relatieve label schreeuwt; de datum blijft gewone letters. */
.reserv-daglabel { text-transform: uppercase; letter-spacing: 0.04em; }

.reserv-rij {
    display: grid;
    grid-template-columns: 3.4em 4em 1fr;
    align-items: center;
    column-gap: 0.6rem;
    min-height: 40px;
    font-size: 0.92rem;
    color: var(--bb-tekst);
    border-bottom: 1px solid var(--bb-border);
}
/* Rijen zitten per dag in een .reserv-dag, zodat :last-child de laatste rij van díe dag
   raakt en niet toevallig het laatste kind van de kaart. */
.reserv-dag .reserv-rij:last-child { border-bottom: none; }

.reserv-tijd { font-weight: 700; font-variant-numeric: tabular-nums; }
.reserv-pers { color: var(--bb-tekst-zacht); }
.reserv-naam { font-weight: 500; }

.reserv-arr {
    display: inline-block;
    margin-left: 0.5rem;
    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;
}
.reserv-status {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--bb-tekst-zacht);
}

/* Geannuleerd: doorgehaald én gedimd, maar NIET verwijderd — het team moet kunnen zien
   DAT er iets vervalt, inclusief een geschrapt arrangement. De chip en het statuslabel
   blijven leesbaar; die dragen juist de informatie. */
.reserv-geannuleerd { opacity: 0.6; }
.reserv-geannuleerd .reserv-tijd,
.reserv-geannuleerd .reserv-pers,
.reserv-geannuleerd .reserv-naam { text-decoration: line-through; }

.reserv-leeg {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.88rem;
    color: var(--bb-tekst-zacht);
}
.reserv-voet {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--bb-tekst-zacht);
}

/* ── 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; }

/* 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. */
.best-vorige { flex: 0 0 100%; font-size: 0.78rem; }
.best-vorige-naam { white-space: nowrap; }

/* ── Uitleg: het formulier zelf met verwijzingen ── */
.best-uitleg { margin-bottom: 0.5rem; }
.best-uitleg-kop {
    display: flex; align-items: center; gap: 0.4rem; min-height: 44px;
    padding: 0; background: none; border: none;
    font-size: 0.85rem; font-weight: 600; color: var(--bb-groen);
    cursor: pointer; touch-action: manipulation;
}
.best-uitleg-body {
    background: var(--bb-beige-licht); border: 1px solid var(--bb-border);
    border-radius: 12px; padding: 0.5rem 0.75rem 0.75rem;
}
.best-rij-voorbeeld { border-bottom: none; background: #fff; border-radius: 10px; padding: 0.4rem 0.6rem; }
.best-uitleg-zinnen { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; line-height: 1.5; }
.best-uitleg-zinnen li { margin-bottom: 0.1rem; }
.best-rij sup { font-size: 0.7em; color: var(--bb-terracotta); font-weight: 700; }

.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. */
.best-rij {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 0 0.5rem;
    min-height: 52px; padding: 0.35rem 0;
    border-bottom: 1px solid var(--bb-rijscheiding);
}
.best-rij-tekst { min-width: 0; }
.best-naam { font-size: 0.92rem; font-weight: 600; color: var(--bb-tekst); }
.best-maat { font-weight: 400; color: var(--bb-tekst-zacht); font-size: 0.82rem; }
/* Niet wikkelen: bij ruimtegebrek wordt de REEKS ingekort, niet de regel omgebroken.
   Daarom krimpt alleen .best-meestal; pill en haakje houden hun maat. */
.best-meta {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 0.35rem;
    margin-top: 0.1rem; min-width: 0;
    /* GEEN overflow:hidden hier — dat knipt het 44px-tikvlak van de Nodig-pill terug tot de
       zichtbare 28px. Het inkorten gebeurt op .best-meestal, die z'n eigen overflow heeft. */
}
.best-meta > * { flex-shrink: 0; }
.best-meestal { flex-shrink: 1; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
/* Blijft visueel 28px hoog, maar het TIKVLAK is 44px: een pseudo-element rekt het op zonder
   de regelhoogte te veranderen. position:relative op de meta zou het vlak afknippen, vandaar
   isolation op de pill zelf. */
.best-nodig {
    position: relative; min-height: 28px; padding: 0.1rem 0.55rem;
    font-size: 0.75rem; font-weight: 700;
    color: var(--bb-groen); background: var(--bb-pill-vulling);
    border: 1px solid var(--bb-groen-licht); border-radius: var(--bb-radius-pill);
    cursor: pointer; touch-action: manipulation;
}
.best-nodig::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
}
.best-meestal { font-size: 0.75rem; color: var(--bb-tekst-zacht); }
.best-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reeks en haakje delen ÉÉN stijl, zodat het voorbeeld niet lichter oogt dan de lijst. */
.best-advies { font-size: 0.75rem; color: var(--bb-tekst-zacht); margin-left: 0.25rem; }
/* Staat ③ ervóór, dan draagt de badge de ruimte al — anders krijg je een dubbel gat en
   staat het haakje verder van zijn cijfer af dan ① en ② van het hunne. */
.best-badge + .best-advies { margin-left: 0; }
.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); }

.best-tellen { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.best-tellen-hint { font-size: 0.72rem; color: var(--bb-tekst-zacht); }
.best-tellen label { font-size: 0.75rem; color: var(--bb-tekst-zacht); }
.best-tel-veld {
    width: 4rem; min-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-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 {
    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;
}
.best-aantal { font-size: 1.05rem; font-weight: 700; }

.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;
    min-height: 52px; padding: 0.4rem max(1rem, env(safe-area-inset-left))
                              calc(0.4rem + 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);
}

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; }

/* Genummerde uitleg: het cijfer draagt de verwijzing, dus het moet leesbaar zijn. */
.best-badge, .best-stapnr {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1em; font-weight: 700; color: var(--bb-bruin); line-height: 1;
}
.best-badge  { margin-right: 0.35em; }
.best-stapnr {
    width: 1.6em; height: 1.6em; margin-right: 0.4rem; flex-shrink: 0;
    background: #fff; border: 1px solid var(--bb-border); border-radius: 50%;
    font-size: 0.95rem;
}
.best-uitleg-zinnen { list-style: none; padding-left: 0; }
.best-uitleg-zinnen li { display: flex; align-items: baseline; gap: 0.35rem; }
.best-rij-voorbeeld .best-badge { vertical-align: middle; }

/* Stap 2 verstuurt niets — het instructieblok moet dat hardop zeggen. */
.best-stappen {
    list-style: none; margin: 0 0 1rem; padding: 0.6rem 0.75rem;
    background: var(--bb-beige-licht); border: 1px solid var(--bb-border); border-radius: 12px;
}
.best-stappen li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem;
    font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.35rem;
}
.best-stappen li:last-child { margin-bottom: 0; }
.best-portal-klein {
    width: auto; min-height: 40px; margin: 0.25rem 0 0 2rem; padding: 0 0.9rem;
    font-size: 0.85rem;
}

/* ── 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); }
.best-ov-rij {
    display: grid; grid-template-columns: 2.2rem 5.5rem 1fr auto;
    gap: 0.4rem; align-items: baseline;
    padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--bb-rijscheiding); font-size: 0.88rem;
}
.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); }
.best-ov-nr      { color: var(--bb-tekst-zacht); font-size: 0.72rem; }

/* ── 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) {
    /* Eén regel, maar met een vangnet: zonder overflow zou een langere zin de pagina
       breder maken in plaats van af te kappen. */
    .best-uitleg-zinnen li { font-size: 0.85rem; white-space: nowrap;
                             overflow: hidden; text-overflow: ellipsis; }
    .best-meta             { font-size: 0.8rem; }
    .best-meestal,
    .best-advies           { font-size: 0.72rem; }
    /* Alleen de laatste drie bestellingen; de oudste vallen weg, niet de nieuwste. */
    .best-meestal-oud      { display: none; }
    .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-meta             { gap: 0.25rem; }
    .best-stepper          { gap: 0.15rem; }
    .best-afmaken          { font-size: 0.78rem; }
}