/* ══ Demo beheersysteem ══ Zijbalk: letterlijk overgenomen uit layouts/beheer.blade.php (zelfde uitstraling) */
        :root {
            --sidebar-breedte: 232px;
            --sidebar-smal: 60px;
            --sidebar-bg: #0f1729;
            --sidebar-accent: var(--primary, #001b5e);
            --sidebar-tekst: #c8d3e8;
            --sidebar-tekst-dim: #6b7fa8;
            --sidebar-actief-bg: rgba(255,255,255,0.1);
            --sidebar-actief-kleur: #fff;
            --sidebar-hover-bg: rgba(255,255,255,0.06);
            --sidebar-sectie: #4a5a7a;
            --sidebar-transition: 0.22s cubic-bezier(0.4,0,0.2,1);
        }
        /* ── Sidebar ── */
        .sidebar {
            position: fixed;
            top: 0; left: 0; bottom: 0;
            width: var(--sidebar-breedte);
            background: var(--sidebar-bg);
            display: flex;
            flex-direction: column;
            z-index: 200;
            transition: width var(--sidebar-transition);
            overflow: hidden;
        }
        .sidebar.smal {
            width: var(--sidebar-smal);
        }

        /* ── Bovenste balk: logo + toggle ── */
        .sidebar_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            height: 56px;
            flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .sidebar_logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            overflow: hidden;
            white-space: nowrap;
        }
        .sidebar_logo_icoon {
            width: 32px;
            height: 32px;
            background: var(--primary, #001b5e);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            letter-spacing: -0.5px;
        }
        .sidebar_logo_naam {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: #fff;
            transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
        }
        .sidebar_logo_versie {
            font-size: 10px;
            color: var(--sidebar-tekst-dim);
            font-weight: 400;
            margin-left: 2px;
        }
        .sidebar.smal .sidebar_logo_naam { opacity: 0; width: 0; }

        .sidebar_toggle {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--sidebar-tekst-dim);
            border-radius: 6px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: color 0.15s, background 0.15s;
        }
        .sidebar_toggle:hover { color: #fff; background: var(--sidebar-hover-bg); }
        .sidebar_toggle .material-symbols-outlined { font-size: 20px; }

        /* ── Scrolvlak voor links ── */
        .sidebar_nav {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.1) transparent;
        }
        .sidebar_nav::-webkit-scrollbar { width: 4px; }
        .sidebar_nav::-webkit-scrollbar-track { background: transparent; }
        .sidebar_nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

        /* ── Sectielabel ── */
        .sidebar_sectie {
            padding: 16px 16px 4px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--sidebar-sectie);
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            transition: opacity var(--sidebar-transition), height var(--sidebar-transition), padding var(--sidebar-transition);
        }
        .sidebar.smal .sidebar_sectie {
            opacity: 0;
            height: 0;
            padding: 0;
        }

        /* ── Navigatielink ── */
        .sidebar_link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 12px;
            height: 38px;
            color: var(--sidebar-tekst);
            text-decoration: none;
            border-radius: 8px;
            margin: 1px 6px;
            font-size: 13.5px;
            font-weight: 500;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s;
            position: relative;
        }
        .sidebar_link:hover {
            background: var(--sidebar-hover-bg);
            color: #fff;
        }
        .sidebar_link.actief {
            background: var(--sidebar-actief-bg);
            color: var(--sidebar-actief-kleur);
        }
        .sidebar_link.actief::before {
            content: '';
            position: absolute;
            left: 0; top: 6px; bottom: 6px;
            width: 3px;
            background: #fff;
            border-radius: 0 3px 3px 0;
            margin-left: -6px;
        }
        .sidebar_link .material-symbols-outlined {
            font-size: 20px;
            flex-shrink: 0;
            width: 20px;
            text-align: center;
        }
        .sidebar_link_label {
            overflow: hidden;
            transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
        }
        .sidebar.smal .sidebar_link_label { opacity: 0; width: 0; }
        .sidebar.smal .sidebar_teller { position: absolute; top: 6px; left: 32px; min-width: 9px; height: 9px; padding: 0; font-size: 0; }

        /* Tooltip bij smal */
        .sidebar.smal .sidebar_link {
            justify-content: center;
            padding: 0;
            margin: 1px 6px;
        }
        .sidebar.smal .sidebar_link::before { display: none; }

        /* ── Scheidingslijn ── */
        .sidebar_divider {
            height: 1px;
            background: rgba(255,255,255,0.07);
            margin: 8px 12px;
        }

        /* ── Onderste balk: gebruiker ── */
        .sidebar_footer {
            border-top: 1px solid rgba(255,255,255,0.07);
            padding: 10px 8px;
            flex-shrink: 0;
        }
        .sidebar_user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px;
            border-radius: 8px;
            transition: background 0.15s;
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }
        .sidebar_user:hover { background: var(--sidebar-hover-bg); }
        .sidebar_user_avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary, #001b5e);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
            font-family: 'Montserrat', sans-serif;
        }
        .sidebar_user_info {
            overflow: hidden;
            transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
            flex: 1;
        }
        .sidebar.smal .sidebar_user_info { opacity: 0; width: 0; }
        .sidebar_user_naam {
            font-size: 12.5px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar_user_rol {
            font-size: 10.5px;
            color: var(--sidebar-tekst-dim);
            white-space: nowrap;
        }
        .sidebar_logout {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--sidebar-tekst-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            padding: 4px;
            flex-shrink: 0;
            transition: color 0.15s, background 0.15s;
        }
        .sidebar_logout:hover { color: #fff; background: rgba(239,68,68,0.15); }
        .sidebar_logout .material-symbols-outlined { font-size: 18px; }
        .sidebar.smal .sidebar_logout { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Demo-specifiek
   ══════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
body.demo_body { background: #f1f5f9; min-height: 100vh; margin: 0; }

/* Banner bovenaan */
.demo_banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px;
    background: linear-gradient(90deg, #f47a20, #ff9447); color: #fff;
    font: 600 .85rem/1 'Inter', sans-serif;
}
.demo_banner_tekst { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo_banner a, .demo_banner button {
    display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px; border-radius: 99px;
    font: 700 .78rem/1 'Inter', sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer;
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff;
}
.demo_banner .demo_banner_cta { background: #fff; color: #c85a0c; border-color: #fff; }
.demo_banner .material-symbols-outlined { font-size: 1rem; }

.demo_body .sidebar { top: 44px; }
.demo_wrapper { padding-top: 44px; min-height: 100vh; }
@media (min-width: 769px) {
    .demo_body { display: flex; }
    .demo_wrapper { margin-left: var(--sidebar-breedte); flex: 1; min-width: 0; }
}
.demo_main { padding: 1.75rem clamp(1rem, 3vw, 2rem) 6rem; max-width: 1400px; }

/* Zijbalk-extra's */
.sidebar_link { cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; }
.sidebar_link--slot { opacity: .55; }
.sidebar_link--slot .demo_slot { margin-left: auto; font-size: 15px !important; }
.sidebar_link--slot:hover { opacity: .85; }
.demo_nieuw_label { margin-left: auto; font: 700 9px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; background: #f47a20; color: #fff; padding: 4px 6px; border-radius: 99px; }

/* Ingeklapte zijbalk: alleen gecentreerde iconen; 'Nieuw' wordt een stip, slotjes verdwijnen (het vervaagde icoon laat al zien dat het op slot zit) */
.sidebar.smal .sidebar_top { justify-content: center; padding: 0; }
.sidebar.smal .sidebar_logo { display: none; }
.sidebar.smal .sidebar_toggle { width: 40px; height: 40px; }
.sidebar.smal .sidebar_link { position: relative; gap: 0; width: calc(100% - 12px); }
.sidebar.smal .sidebar_link_label { display: none; }
.sidebar.smal .sidebar_link--slot .demo_slot { display: none; }
.sidebar.smal .demo_nieuw_label { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; margin: 0; padding: 0; font-size: 0; box-shadow: 0 0 0 2px var(--sidebar-bg); }

/* Mobiele balk + lade */
.demo_mobielbalk { display: none; }
@media (max-width: 768px) {
    .demo_body .sidebar { display: flex !important; transform: translateX(-100%); transition: transform .3s ease; width: 260px; z-index: 260; }
    .demo_body.menu_open .sidebar { transform: none; }
    .demo_body .sidebar_toggle { display: none; }
    .demo_mobielbalk {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: sticky; top: 44px; z-index: 150; height: 56px; padding: 0 12px;
        background: #fff; border-bottom: 1px solid #e2e8f0;
    }
    .demo_mobielbalk strong { font: 700 1rem 'Montserrat', sans-serif; color: #0f1729; }
    .demo_mobielbalk button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; display: grid; place-items: center; cursor: pointer; }
    .demo_menu_achtergrond { position: fixed; inset: 0; background: rgba(15,23,41,.45); z-index: 250; display: none; }
    .demo_body.menu_open .demo_menu_achtergrond { display: block; }
    .demo_banner_tekst { display: none; }
    .demo_main { padding-top: 1.25rem; }
}

/* Views */
.demo_view { display: none; animation: demo_in .35s ease both; }
.demo_view.actief { display: block; }
@keyframes demo_in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.demo_kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.demo_kop h1 { margin: 0; }
.demo_kop p { margin: .3rem 0 0; color: #64748b; font-size: .9rem; }
.demo_kop_acties { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo_zoek { position: relative; flex: 1; max-width: 340px; min-width: 200px; }
.demo_zoek .material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1.2rem; }
.demo_zoek input { width: 100%; padding-left: 40px !important; }
.demo_filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.demo_filter { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid #e2e8f0; background: #fff; font: 600 .82rem 'Inter', sans-serif; color: #475569; cursor: pointer; }
.demo_filter.actief { background: #0f1729; color: #fff; border-color: #0f1729; }

.demo_grid_2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .demo_grid_2 { grid-template-columns: 1fr; } }
.demo_stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .demo_stats { grid-template-columns: repeat(2, 1fr); } }
.kaart { margin-bottom: 1.25rem; }
.kaart_header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.demo_lijst { display: flex; flex-direction: column; }
.demo_lijst_rij { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #f1f5f9; font-size: .88rem; cursor: pointer; }
.demo_lijst_rij:last-child { border-bottom: 0; }
.demo_lijst_rij:hover strong { color: #f47a20; }
.demo_lijst_rij > div:not(.table_avatar) { flex: 1; min-width: 0; }
.demo_lijst_rij .table_avatar { flex: 0 0 auto; }
.demo_lijst_rij strong { display: block; color: #1e293b; }
.demo_lijst_rij small { color: #94a3b8; }
.demo_bedrag { font-weight: 700; color: #1e293b; white-space: nowrap; }
.demo_leeg { color: #94a3b8; font-size: .88rem; padding: .5rem 0; }

.demo_grafiek { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.demo_grafiek div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.demo_grafiek span { width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: #cbd5e1; transform-origin: bottom; animation: demo_balk .8s cubic-bezier(.22,1,.36,1) both; }
.demo_grafiek div:last-child span { background: #f47a20; }
.demo_grafiek small { font-size: .7rem; color: #94a3b8; }
@keyframes demo_balk { from { transform: scaleY(0); } }

/* Tabel-extra's */
.table_row--klikbaar { cursor: pointer; }
.demo_mobiel_label { display: none; }
@media (max-width: 760px) {
    .demo_tabel .table_inner { display: block; min-width: 0 !important; }
    .demo_tabel .table_head { display: none; }
    .demo_tabel .table_row { display: grid; grid-template-columns: 1fr auto; gap: .4rem .75rem; padding: .9rem 1rem; border-bottom: 1px solid #f1f5f9; }
    .demo_tabel .table_row > div { padding: 0 !important; border: 0 !important; min-height: 0 !important; }
    .demo_tabel .table_row > div:first-child { grid-column: 1 / -1; }
    .demo_mobiel_label { display: inline; color: #94a3b8; margin-right: .25rem; }
    .demo_tabel .table_action { width: 44px; height: 44px; }
}

/* Pop-ups */
.demo_body .modal_overlay { z-index: 400; padding: 1rem; }
.demo_body .modal { max-width: 640px; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.demo_body .modal--smal { max-width: 460px; }
.demo_modal_body { padding: 1.25rem 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 600px) {
    .demo_body .modal_overlay { align-items: flex-end; padding: 0; }
    .demo_body .modal { border-radius: 18px 18px 0 0 !important; max-height: 92vh; }
    .demo_body .modal_acties { flex-direction: column-reverse; }
    .demo_body .modal_acties .btn { width: 100% !important; justify-content: center; min-height: 48px; }
}

/* Offerte-/factuurregels */
.demo_regels { display: flex; flex-direction: column; gap: .5rem; }
.demo_regel { display: grid; grid-template-columns: 1fr 70px 100px 40px; gap: .5rem; align-items: center; }
.demo_regel .formulier_input { min-width: 0; }
.demo_regel_weg { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; color: #94a3b8; cursor: pointer; display: grid; place-items: center; }
.demo_totalen { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; font-size: .88rem; color: #475569; }
.demo_totalen strong { font-size: 1.15rem; color: #1e293b; }
@media (max-width: 600px) { .demo_regel { grid-template-columns: 1fr 60px 84px 40px; } }

/* Klantzoeker in de demo */
.demo_klantzoeker { position: relative; }
.demo_klant_resultaten { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.25); overflow: hidden; }
.demo_klant_resultaten button { display: block; width: 100%; text-align: left; padding: .7rem 1rem; border: 0; background: #fff; cursor: pointer; font: 500 .9rem 'Inter', sans-serif; }
.demo_klant_resultaten button:hover { background: #f8fafc; }
.demo_klant_resultaten small { color: #94a3b8; display: block; }
.demo_klant_badge { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .35rem .75rem; border-radius: 99px; background: #dcfce7; color: #166534; font: 600 .82rem 'Inter', sans-serif; }

/* Publieke offertepagina / klantportaal (zoals de klant het ziet) */
.demo_klantscherm { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.25rem; }
.demo_klantscherm_kop { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: #94a3b8; margin-bottom: .75rem; }
.demo_klantscherm_kop span:not(.material-symbols-outlined) { flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: .35rem .6rem; }
.demo_handtekening { font-family: 'Brush Script MT', cursive; font-size: 1.6rem; color: #1e293b; }

/* PDF-voorbeeld */
.demo_pdf { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; font-size: .82rem; color: #334155; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.demo_pdf_kop { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.demo_pdf_logo { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,#f47a20,#c85a0c); color: #fff; display: grid; place-items: center; font: 800 .85rem 'Montserrat', sans-serif; }
.demo_pdf table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.demo_pdf th { text-align: left; font-size: .72rem; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #e2e8f0; padding: .4rem 0; }
.demo_pdf td { padding: .45rem 0; border-bottom: 1px dashed #f1f5f9; }
.demo_pdf td:last-child, .demo_pdf th:last-child { text-align: right; }
.demo_pdf_qr { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .75rem; background: #f0fdf4; border-radius: 8px; color: #166534; }

/* iDEAL-simulatie */
.demo_ideal { text-align: center; padding: 1rem 0; }
.demo_ideal_icoon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: #dcfce7; color: #16a34a; font-size: 2rem !important; animation: demo_pop .5s cubic-bezier(.22,1,.36,1); }
@keyframes demo_pop { from { transform: scale(.3); opacity: 0; } }

/* Klantkaart */
.demo_klantkaart_kop { display: flex; align-items: center; gap: 1rem; }
.demo_klantkaart_kop .table_avatar { width: 52px; height: 52px; font-size: 1.1rem; }
.demo_gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; font-size: .88rem; }
.demo_gegevens small { display: block; color: #94a3b8; font-size: .75rem; }
@media (max-width: 600px) { .demo_gegevens { grid-template-columns: 1fr; } }
.demo_schakel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 12px; }

/* Vergrendelde modules */
.demo_slot_kaart { max-width: 640px; margin: 3rem auto; text-align: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 2.5rem 1.5rem; }
.demo_slot_kaart .material-symbols-outlined { font-size: 2.5rem; color: #f47a20; }
.demo_slot_kaart h2 { font: 700 1.4rem 'Montserrat', sans-serif; margin: .75rem 0 .5rem; color: #1e293b; }
.demo_slot_kaart p { color: #64748b; line-height: 1.6; margin: 0 auto 1.5rem; max-width: 460px; }

/* Checklist "Probeer dit" */
.demo_checklist {
    position: fixed; right: 20px; bottom: 20px; z-index: 350; width: 320px;
    background: #0f1729; color: #c8d3e8; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
    font-family: 'Inter', sans-serif; overflow: hidden; transition: transform .3s ease;
}
.demo_checklist_kop { display: flex; align-items: center; gap: .75rem; width: 100%; padding: 1rem 1.1rem; border: 0; background: none; color: #fff; cursor: pointer; text-align: left; }
.demo_checklist_kop strong { flex: 1; font: 700 .95rem 'Montserrat', sans-serif; }
.demo_checklist_ring { --p: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem 'Inter', sans-serif; background: conic-gradient(#f47a20 calc(var(--p) * 1%), rgba(255,255,255,.12) 0); position: relative; }
.demo_checklist_ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #0f1729; }
.demo_checklist_ring b { position: relative; }
.demo_checklist_lijst { list-style: none; margin: 0; padding: 0 1.1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.demo_checklist.ingeklapt .demo_checklist_lijst, .demo_checklist.ingeklapt .demo_checklist_klaar { display: none; }
.demo_checklist_lijst li { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; font-size: .85rem; cursor: pointer; transition: background .2s; }
.demo_checklist_lijst li:hover { background: rgba(255,255,255,.06); }
.demo_checklist_lijst li .material-symbols-outlined { font-size: 1.2rem; color: #4a5a7a; }
.demo_checklist_lijst li.gedaan { color: #6b7fa8; text-decoration: line-through; }
.demo_checklist_lijst li.gedaan .material-symbols-outlined { color: #22c55e; }
.demo_checklist_klaar { margin: 0 1.1rem 1.1rem; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #f47a20, #c85a0c); color: #fff; text-align: center; }
.demo_checklist_klaar[hidden] { display: none !important; }
.demo_checklist_klaar a { display: inline-flex; margin-top: .6rem; padding: .55rem 1rem; border-radius: 99px; background: #fff; color: #c85a0c; font-weight: 700; text-decoration: none; font-size: .85rem; }
@media (max-width: 768px) {
    .demo_checklist { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* Toast */
.demo_toast { position: fixed; bottom: 24px; left: 50%; z-index: 500; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: .6rem; background: #0f1729; color: #fff; padding: .8rem 1.1rem; border-radius: 12px;
    font: 600 .88rem 'Inter', sans-serif; box-shadow: 0 16px 40px -14px rgba(0,0,0,.5); transition: opacity .3s, transform .3s; max-width: calc(100vw - 24px); }
.demo_toast.toon { opacity: 1; transform: translate(-50%, 0); }
.demo_toast .material-symbols-outlined { color: #22c55e; }

/* Planning: drop-markering */
.weekgrid_cel.demo_drop { background: #fff7ed !important; outline: 2px dashed #f47a20; outline-offset: -3px; }
.planning_kaart.demo_nieuw { animation: demo_pop .45s cubic-bezier(.22,1,.36,1); }

/* Ingeklapte zijbalk (desktop) */
@media (min-width: 769px) {
    body.sidebar_smal .demo_wrapper { margin-left: var(--sidebar-smal); }
    .demo_body .modal_overlay { align-items: center; }
    .demo_body .modal { border-radius: 20px; }
}
.demo_body .modal_acties[hidden] { display: none; }
.demo_body.modal_open .demo_checklist { display: none; }

@media (max-width: 768px) { .demo_toast { bottom: 88px; width: calc(100vw - 24px); } }

/* Planning in de demo: werkweek (5 dagen) */
.demo_body .weekgrid { grid-template-columns: 150px repeat(5, minmax(130px, 1fr)); min-width: 800px; }
@media (max-width: 768px) { .demo_body .weekgrid { grid-template-columns: 100px repeat(5, minmax(120px, 1fr)); min-width: 700px; } }

/* Mobiel: cijfers en kaartjes */
@media (max-width: 560px) {
    .demo_stats { grid-template-columns: 1fr; gap: .6rem; }
    .demo_stats .stat_kaart { align-items: center; }
}
@media (max-width: 760px) {
    .demo_tabel .table_row { background: #fff; }
    .demo_tabel .table_row > div { background: none !important; }
}
.demo_body.menu_open .demo_checklist { display: none; }

/* Knoppenbalk onderaan de pop-ups: eigen binnenruimte, rechts uitgelijnd (zoals in het beheer) */
.demo_body .modal_acties {
    margin-top: 0;
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
    justify-content: flex-end;
    background: #fff;
}
@media (max-width: 600px) {
    .demo_body .modal_acties { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
}