/* ═══════════════════════════════════════════════════════════════
   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;
    --bb-border:       #D0C6B4;

    --bb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --bb-radius: 8px;
    --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;
}

/* 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, .app-shell, .instellingen-shell, .haccp-shell {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Challenge-balk aanwezig → extra padding onderaan (CSS-only detectie,
   geen Razor-logica). haccp-shell bewust uitgesloten: eigen 6rem-padding,
   geen challenge-balk. */
body:has(.challenge-balk) .app-shell,
body:has(.challenge-balk) .instellingen-shell {
    padding-bottom: max(4rem, 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);
}

.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: 82px;
    font-size: 0.8rem;
    color: var(--bb-tekst-zacht);
    flex-shrink: 0;
}

.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: calc(60px + env(safe-area-inset-top));
    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);
}

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

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

.bb-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    color: #3D2C1A !important;
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.1s;
    cursor: pointer;
}

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

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

/* ── Pagina-shells (max-breedte + centrering) ─────────────────── */

.instellingen-shell,
.app-shell {
    max-width: 900px;
    margin: 0 auto;
}

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

.challenge-balk {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    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;
}

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

.bb-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bb-bruin);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bb-page-title .bi {
    color: var(--bb-terracotta);
}

.challenges-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 12px;
}

/* 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 */
.bb-main {
    padding-bottom: 60px;
}

/* 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 */
    .app-shell          { padding: 0 0 2rem; }

    /* 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: 1.5rem;
}
.zoek-blok {
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    border: 2px solid var(--bb-border);
    background: white;
}
.zoek-blok-tht { border-color: var(--bb-groen-licht); }

.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; }
.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 {
    border-color: #B45A1E;
}

/* ── 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-modal {
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
}
.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 */
.ijzer-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ── 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 {
    .no-print,
    .bb-topnav,
    .bb-layout-sidebar,
    nav,
    .instellingen-shell > *:not(.export-print-wrapper),
    .haccp-shell > *:not(.export-print-wrapper):not(.export-print-header),
    .instelling-paginatitel { 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: 10px;
    cursor: pointer;
    margin-bottom: 8px;
    border: 2px solid transparent;
    transition: all 0.2s;
    touch-action: manipulation;
}
.bb-taak-actief  { border-color: #A64C01; background: #fff8f3; }
.bb-taak-inactief { border-color: #e2e8f0; 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;
}
.bb-taak-uitleg-tekst {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #666;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 6px 8px;
}

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

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

.bb-taak-badge-dag,
.bb-taak-badge-week,
.bb-taak-badge-maand {
  position: relative; overflow: hidden;
  border-radius: 12px; padding: 3px 10px; font-size: 0.78rem; cursor: pointer;
  background: #fef3e8; color: #92400e; border: 1px solid #f59e0b;
}
.bb-taak-badge-week  { border-color: #c2410c; }
.bb-taak-badge-maand { border-color: #92400e; }

.bb-taak-badge-dag::before,
.bb-taak-badge-week::before,
.bb-taak-badge-maand::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(249,115,22,0.15);
  width: var(--pct, 0%); border-radius: 12px; transition: width 0.4s ease;
}
.bb-taak-badge-dag::after,
.bb-taak-badge-week::after,
.bb-taak-badge-maand::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;
}
.bb-taak-badge-klaar {
  background: #f0faf0; color: #276749; border-color: #38a169;
  animation: badge-klaar-pop 0.35s ease;
}
.bb-taak-badge-klaar::before { background: rgba(56,161,105,0.2); width: 100%; }
.bb-taak-badge-klaar::after  { opacity: 1; animation: badge-klaar-shimmer 0.7s ease 0.2s forwards; }

.bb-taak-badge-actief { background: #92400e; color: white; }

.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: none; border: 1px solid #ECD5AB; border-radius: 4px;
    padding: 0 5px; font-size: 0.65rem; cursor: pointer; color: #A64C01; line-height: 1.5;
}
.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-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

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

/* ── Forecast melding ── */
.stat-forecast-melding {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: #f0f4e8;
    border: 1px solid #c8d8a0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #4a5e20;
    margin-bottom: 1rem;
}

/* ── 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;
    grid-template-columns: repeat(7, 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;
}
.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%;
    margin-bottom: 0.15rem;
}
.stat-week-dag-naam-datum {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.25rem;
}
.stat-week-dag-naam-datum {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.25rem;
}
.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: #aaa; font-weight: 500; }
.stat-week-dag-omzet.leeg  { color: #ccc; }
.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; }

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

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

.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: 1rem;
}

.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: #aaa;
    width: 1.4rem;
    flex-shrink: 0;
}
.stat-week-rij-verwacht { color: #9a8a7a; }
.stat-week-rij-realisatie { color: #3D2C1A; font-weight: 600; }

/* ══ VERGELIJKINGSBALK ══ */
.stat-vergelijk-balk {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #f9f4ec;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.stat-vergelijk-item {
    display: flex;
    flex-direction: column;
}
.stat-vergelijk-label {
    font-size: 0.72rem;
    color: #9a8a7a;
}
.stat-vergelijk-waarde {
    font-size: 1rem;
    font-weight: 700;
    color: #3D2C1A;
}
.stat-vergelijk-pijl {
    color: #aaa;
    font-size: 1.2rem;
}
.stat-vergelijk-verschil {
    font-size: 1rem;
    font-weight: 700;
    margin-left: auto;
}
.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 {
    padding: 0 1rem 6rem;
    max-width: 1100px;
}
.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;
}
.haccp-vestiging-subtitel {
    font-size: 0.9rem;
    color: #888;
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
}
/* 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; }
    .haccp-sectie-titel { font-size: 0.95rem; margin-top: 1.5rem; }
}

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

/* ══ VESTIGING BEHEER GRID ══ */
.vestiging-beheer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-left: auto;
}

.vestiging-beheer-knop {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #FDF6ED;
    border: 1px solid #ECD5AB;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #3D2C1A;
    cursor: pointer;
    white-space: nowrap;
}

.vestiging-beheer-knop:hover {
    background: #ECD5AB;
}

/* ══ 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.75rem 0;
    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; }
.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; }
.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 overlay (modal) ── */
.forecast-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.forecast-overlay-panel {
    background: #FFFAEA;
    border-radius: 14px;
    padding: 1.25rem 1.5rem 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 0.9rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.forecast-overlay-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1.5px solid #ECD5AB;
}
.forecast-overlay-header strong { flex: 1; color: #3D2C1A; font-size: 1rem; }
.forecast-overlay-sluiten {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    touch-action: manipulation;
}
.forecast-overlay-sluiten:hover { color: #A64C01; }
.forecast-overlay-bron-regel {
    font-size: 0.85rem;
    color: #777;
    font-style: italic;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.forecast-overlay-bron-bedrag { color: #3D2C1A; font-weight: 600; font-style: normal; }
.forecast-overlay-bron-reden  { color: #999; }
.forecast-overlay-sectie-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}
.forecast-overlay-toelichting {
    font-size: 0.83rem;
    color: #555;
    margin-bottom: 0.6rem;
    font-style: italic;
}
.forecast-overlay-model-resultaat {
    font-size: 0.85rem;
    color: #3D2C1A;
    margin: 0.25rem 0 0.5rem;
}
.forecast-overlay-vergelijk {
    font-size: 0.85rem;
    color: #555;
    margin: 0.5rem 0 0.25rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.forecast-overlay-tabel { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.forecast-overlay-tabel th { text-align: left; color: #888; font-weight: 400; font-size: 0.8rem; padding: 2px 0 0.25rem; border-bottom: 1px solid #ECD5AB; }
.forecast-overlay-tabel th.forecast-overlay-omzet { text-align: right; }
.forecast-overlay-tabel td { padding: 3px 0; color: #3D2C1A; }
.forecast-overlay-omzet { text-align: right; font-weight: 600; white-space: nowrap; }
.forecast-overlay-leeg { color: #999; font-style: italic; font-size: 0.8rem; }
.forecast-info-afwijking-pos { color: #55601C; font-weight: 600; }
.forecast-info-afwijking-neg { color: #c0392b; font-weight: 600; }
.forecast-kassabon-melding {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    flex-wrap: wrap;
}
.forecast-kassabon-label  { color: #2e7d32; font-weight: 600; }
.forecast-kassabon-bedrag { font-weight: 700; color: #1b5e20; font-size: 1rem; }
.forecast-kassabon-pos    { color: #2e7d32; font-weight: 600; }
.forecast-kassabon-neg    { color: #c62828; font-weight: 600; }
.forecast-overlay-teller {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0ebe4;
    font-size: 0.78rem;
    color: #aaa;
    text-align: center;
    font-style: italic;
}
.forecast-info-rij-huidig td { font-style: italic; color: #888; }
.forecast-info-rij-huidig td:last-child { font-weight: 600; color: #555; }
.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;
}
.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;
}

/* ── Omzetbeheer pagina (sessie 79 deel C) ── */
.omzetbeheer-container { padding: 1rem; max-width: 1200px; margin: 0 auto; }

.omzetbeheer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.omzetbeheer-vestiging strong { font-size: 1.2rem; }
.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; }

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

/* Manager-menu backdrop — vangt klik buiten het menu (sluit dropdown) */
.bb-manager-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}
.bb-topnav-links .bb-dropdown-menu {
    z-index: 100;
}

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