/* =========================================================
   Beheerdashboard: donkere zijbalk, lichte werkvlakken.
   Status: goed (groen), let op (amber), kritiek (rood), neutraal/stil (grijs).
   ========================================================= */

.pagina-beheer {
    --bh-vlak: #ffffff;
    --bh-grond: #f4f1ec;
    --bh-lijn: rgba(20, 6, 10, 0.1);
    --bh-zacht: #6d5a54;
    --bh-goed: #1f7a43; --bh-goed-vlak: #e6f4ec;
    --bh-let: #8a5a00; --bh-let-vlak: #fdf1d6;
    --bh-kritiek: #b3122e; --bh-kritiek-vlak: #fde8eb;
    --bh-neutraal: #3d4a5c; --bh-neutraal-vlak: #eceff3;
    background: var(--bh-grond);
}
.pagina-beheer main { min-height: 100svh; }

/* Inloggen */
.bh-slot { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px max(16px, env(safe-area-inset-left, 0px)); text-align: center; background: var(--nacht); color: var(--wit); }
.bh-slot__kruis { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--verloop); color: var(--goud-licht); box-shadow: 0 0 70px rgba(239, 90, 28, 0.5); }
.bh-slot__kruis svg { width: 48px; height: 48px; }
.bh-slot h1 { font-size: 2.4rem; }
.bh-slot p { color: var(--licht-zacht); }
.bh-slot input { width: min(340px, 80vw); height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--lijn-licht); background: rgba(255, 255, 255, 0.06); color: var(--wit); font: inherit; text-align: center; }
.bh-slot input:focus { outline: none; border-color: var(--goud); }
.bh-slot .knop { width: min(340px, 80vw); }
.bh-slot__fout { min-height: 1.4em; color: var(--goud-licht) !important; font-weight: 600; }

/* Indeling */
.bh { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100svh; }
.bh-zijbalk { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: 26px; padding: calc(22px + env(safe-area-inset-top, 0px)) 16px 22px; background: var(--nacht); color: var(--wit); overflow-y: auto; }
.bh-merk { display: flex; align-items: center; gap: 10px; color: var(--wit); text-decoration: none; padding: 4px 8px; font-weight: 800; font-stretch: var(--breed); letter-spacing: -0.03em; font-size: 1.08rem; }
.bh-merk svg { width: 30px; height: 30px; color: var(--goud); }
.bh-merk b { color: var(--goud); }
.bh-nav { display: grid; gap: 2px; }
.bh-nav a { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 12px; color: var(--licht-zacht); text-decoration: none; font-weight: 600; }
.bh-nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--wit); }
.bh-nav a[aria-current] { background: rgba(255, 255, 255, 0.1); color: var(--wit); box-shadow: inset 3px 0 0 var(--oranje); }
.bh-teller { min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--verloop); color: var(--wit); font-size: 0.75rem; font-weight: 800; }
.bh-teller:empty { display: none; }
.bh-zijbalk__onder { margin-top: auto; display: grid; gap: 6px; }
.bh-zijlink { padding: 8px 12px; border: 0; background: none; color: var(--licht-zacht); font: inherit; font-size: 0.92rem; text-align: left; text-decoration: none; cursor: pointer; border-radius: 10px; }
.bh-zijlink:hover { color: var(--wit); background: rgba(255, 255, 255, 0.06); }
.bh-hoofd { padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 44px) 64px; display: grid; gap: 20px; align-content: start; min-width: 0; outline: none; }

@media (max-width: 900px) {
    .bh { grid-template-columns: 1fr; }
    .bh-zijbalk { position: sticky; z-index: 5; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); }
    .bh-nav { order: 3; width: 100%; display: flex; overflow-x: auto; gap: 4px; }
    .bh-nav a { flex: none; padding: 8px 12px; }
    .bh-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--oranje); }
    .bh-zijbalk__onder { margin: 0 0 0 auto; display: flex; gap: 4px; align-items: center; }
    .bh-zijlink { display: none; }
}

/* Koppen en knoppen */
.bh-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.bh-kop h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--inkt); }
.bh-kop p { margin-top: 8px; color: var(--bh-zacht); max-width: 46rem; }
.bh-kop__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 999px; background: var(--verloop); color: var(--wit); font: 700 0.95rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 10px 22px -14px rgba(239, 90, 28, 0.9); }
.bh-knop:hover { transform: translateY(-1px); }
.bh-knop:disabled { opacity: 0.6; cursor: wait; transform: none; }
.bh-knop--rand { background: var(--bh-vlak); color: var(--inkt); border-color: var(--bh-lijn); box-shadow: none; }
.bh-knop--rand:hover { border-color: var(--inkt); }
.bh-knop--klein { min-height: 36px; padding: 0 14px; font-size: 0.88rem; }
.bh-knop--gevaar { background: transparent; color: var(--bh-kritiek); border-color: rgba(179, 18, 46, 0.3); box-shadow: none; }
.bh-knop--gevaar:hover { background: var(--bh-kritiek-vlak); }
.bh-knop--glas { background: rgba(255, 255, 255, 0.08); border-color: var(--lijn-licht); box-shadow: none; }
.bh-ruimte { flex: 1; }

/* Kaarten */
.bh-kaart { background: var(--bh-vlak); border-radius: 22px; padding: clamp(18px, 2.4vw, 26px); box-shadow: 0 1px 2px rgba(20, 6, 10, 0.04); display: grid; gap: 14px; align-content: start; min-width: 0; }
.bh-kaart h2 { font-size: 1.2rem; font-stretch: 100%; letter-spacing: -0.015em; color: var(--inkt); }
.bh-kaart h3 { font-size: 1rem; font-stretch: 100%; margin-top: 8px; }
.bh-kaart__kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bh-kaart__kop p { color: var(--bh-zacht); font-size: 0.9rem; margin-top: 4px; }
.bh-kaart__kop a { color: var(--rood); font-weight: 600; font-size: 0.92rem; }
.bh-kaart--tabel { padding: 6px; }
.bh-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.bh-twee--breed { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .bh-twee, .bh-twee--breed { grid-template-columns: 1fr; } }

/* Kerncijfers */
.bh-tegels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.bh-tegel { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 20px; background: var(--bh-vlak); color: var(--inkt); text-decoration: none; border: 1px solid transparent; transition: border-color 0.2s, transform 0.2s; }
.bh-tegel:hover { border-color: var(--bh-lijn); transform: translateY(-2px); }
.bh-tegel span { font-size: 0.85rem; font-weight: 600; color: var(--bh-zacht); }
.bh-tegel b { font-size: clamp(1.3rem, 2vw, 1.75rem); font-stretch: var(--breed); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bh-tegel small { font-size: 0.8rem; color: var(--bh-zacht); }
.bh-tegel--let { box-shadow: inset 0 3px 0 #e0a100; }
.bh-tegel--kritiek { box-shadow: inset 0 3px 0 var(--bh-kritiek); }
.bh-tegel--kritiek b { color: var(--bh-kritiek); }
@media (max-width: 1200px) { .bh-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bh-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Grafiek */
.bh-grafiekvak { position: relative; }
.bh-svg { width: 100%; height: auto; display: block; }
.bh-svg__raster { stroke: #ebe6df; stroke-width: 1; }
.bh-svg__as { fill: var(--bh-zacht); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.bh-svg__waarde { fill: var(--inkt); font-size: 12px; font-weight: 700; font-family: var(--font); }
.bh-svg__staaf { fill: var(--rood); }
.bh-svg__raak { cursor: pointer; }
.bh-svg__raak.is-actief { fill: rgba(20, 6, 10, 0.04) !important; }
.bh-tip { position: absolute; top: 0; width: 150px; padding: 10px 12px; border-radius: 12px; background: var(--nacht); color: var(--wit); display: grid; gap: 2px; font-size: 0.85rem; pointer-events: none; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5); }
.bh-tip span { font-weight: 800; font-variant-numeric: tabular-nums; }
.bh-tip small { color: var(--licht-zacht); }

/* Statuspillen: altijd icoon + tekst */
.bh-pil { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.bh-pil--goed { background: var(--bh-goed-vlak); color: var(--bh-goed); }
.bh-pil--let { background: var(--bh-let-vlak); color: var(--bh-let); }
.bh-pil--kritiek { background: var(--bh-kritiek-vlak); color: var(--bh-kritiek); }
.bh-pil--neutraal { background: var(--bh-neutraal-vlak); color: var(--bh-neutraal); }
.bh-pil--stil { background: var(--bh-grond); color: var(--bh-zacht); }

/* Lijsten en tabellen */
.bh-lijst { display: grid; }
.bh-lijst li > a, .bh-lijst--status li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--bh-lijn); color: var(--inkt); text-decoration: none; }
.bh-lijst li:first-child > a, .bh-lijst--status li:first-child { border-top: 0; }
.bh-lijst li > a:hover b { color: var(--rood); }
.bh-lijst li > a > span:first-child, .bh-lijst li > span:first-child { display: grid; min-width: 0; }
.bh-lijst small { color: var(--bh-zacht); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-lijst__rechts { display: flex !important; align-items: center; gap: 10px; flex: none; font-variant-numeric: tabular-nums; color: var(--bh-zacht); font-size: 0.9rem; }
.bh-tabelvak { overflow-x: auto; }
.bh-tabel { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.bh-tabel th { padding: 12px 14px; text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bh-zacht); white-space: nowrap; }
.bh-tabel td { padding: 13px 14px; border-top: 1px solid var(--bh-lijn); vertical-align: top; }
.bh-tabel td small { display: block; color: var(--bh-zacht); }
.bh-tabel a { color: var(--inkt); text-decoration: none; }
.bh-tabel--klik tbody tr { cursor: pointer; }
.bh-tabel--klik tbody tr:hover td { background: #fbf9f6; }
.r { text-align: right !important; }
.bh-leeg { padding: 18px 8px; color: var(--bh-zacht); }
.bh-leeg--groot { max-width: 640px; margin: 10vh auto; padding: 32px; background: var(--bh-vlak); border-radius: 24px; display: grid; gap: 14px; }
.bh-stappen { list-style: decimal; padding-left: 1.3em; display: grid; gap: 6px; color: var(--tekst); }

.bh-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-filter { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bh-lijn); background: var(--bh-vlak); color: var(--inkt); font: 600 0.9rem/1 var(--font); cursor: pointer; }
.bh-filter[aria-pressed="true"] { background: var(--nacht); color: var(--wit); border-color: var(--nacht); }

/* Gegevens en formulieren */
.bh-omschrijving { white-space: pre-wrap; line-height: 1.6; }
.bh-gegevens { display: grid; gap: 10px; margin: 0; }
.bh-gegevens div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.bh-gegevens dt { color: var(--bh-zacht); font-size: 0.9rem; }
.bh-gegevens dd { margin: 0; overflow-wrap: anywhere; }
.bh-formulier, .bh-editor { display: grid; gap: 16px; }
.bh-formulier h2 { margin-top: 6px; }
.bh-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.bh-veld { display: grid; gap: 6px; align-content: start; }
.bh-veld--breed { grid-column: 1 / -1; }
.bh-veld label { font-weight: 700; font-size: 0.92rem; color: var(--inkt); }
.bh-veld small, .bh-hulp { color: var(--bh-zacht); font-size: 0.85rem; }
.bh-veld input, .bh-veld select, .bh-veld textarea, .bh-regels input, .bh-regels select {
    width: 100%; min-height: 44px; padding: 10px 13px; border: 1.5px solid var(--bh-lijn); border-radius: 12px;
    background: var(--bh-vlak); color: var(--inkt); font: inherit; font-size: 0.97rem;
}
.bh-veld textarea { resize: vertical; min-height: 100px; }
.bh-veld input:focus, .bh-veld select:focus, .bh-veld textarea:focus, .bh-regels input:focus, .bh-regels select:focus { outline: none; border-color: var(--rood); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12); }
.bh-veld :disabled, .bh-regels :disabled { background: var(--bh-grond); color: var(--tekst); }
.bh-rij { display: flex; gap: 10px; align-items: center; }
.bh-rij select { flex: 1; }
.bh-vinkje { display: flex !important; gap: 10px; align-items: center; font-weight: 600 !important; cursor: pointer; }
.bh-vinkje input { width: 20px; height: 20px; min-height: 0; accent-color: var(--rood); }
.bh-formulier__knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 640px) { .bh-velden { grid-template-columns: 1fr; } .bh-gegevens div { grid-template-columns: 1fr; gap: 2px; } }

.bh-regels { width: 100%; border-collapse: collapse; min-width: 640px; }
.bh-regels th { padding: 6px 6px 10px; text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bh-zacht); }
.bh-regels td { padding: 5px 6px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.bh-regels td[data-bedrag] { font-weight: 700; white-space: nowrap; }
.bh-smal { width: 72px !important; text-align: right; }
.bh-middel { width: 120px !important; text-align: right; }
.bh-weg { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--bh-zacht); font-size: 1.3rem; cursor: pointer; }
.bh-weg:hover { background: var(--bh-kritiek-vlak); color: var(--bh-kritiek); }
.bh-totalen { margin: 6px 0 0 auto; width: min(380px, 100%); display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.bh-totalen div { display: flex; justify-content: space-between; gap: 16px; }
.bh-totalen dt { color: var(--bh-zacht); }
.bh-totalen dd { margin: 0; }
.bh-totalen__eind { padding-top: 10px; border-top: 2px solid var(--inkt); font-size: 1.15rem; font-weight: 800; }
.bh-totalen__eind dt { color: var(--inkt); }
.bh-waarschuwing { padding: 10px 14px; border-radius: 12px; background: var(--bh-let-vlak); color: var(--bh-let); font-weight: 600; font-size: 0.92rem; }
.bh-bevestig { padding: 16px; border-radius: 16px; background: var(--bh-grond); display: grid; gap: 12px; }

.bh-dialoog { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 24px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(20, 6, 10, 0.5); }
.bh-dialoog::backdrop { background: rgba(20, 6, 10, 0.5); }

.bh-melding { position: fixed; z-index: 70; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 14px; background: var(--nacht); color: var(--wit); font-weight: 600; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6); transition: opacity 0.25s, transform 0.3s var(--zacht-uit); }
.bh-melding.is-zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.bh-melding[data-soort="fout"] { background: var(--bh-kritiek); }

/* ---------- Document: offerte en factuur (A4) ---------- */

.bh-documentbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.bh-documentbalk p { color: var(--bh-zacht); font-size: 0.92rem; }
.doc { width: min(210mm, 100%); margin: 0 auto; padding: 18mm 16mm 14mm; background: var(--wit); color: #1d1412; box-shadow: 0 20px 50px -30px rgba(20, 6, 10, 0.5); font-size: 10.5pt; line-height: 1.5; display: grid; gap: 9mm; }
.doc__kop { display: flex; justify-content: space-between; gap: 10mm; padding-bottom: 6mm; border-bottom: 3px solid; border-image: var(--verloop) 1; }
.doc__merk { display: flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: var(--breed); letter-spacing: -0.03em; font-size: 16pt; color: var(--inkt); }
.doc__merk svg { width: 13mm; height: 13mm; color: var(--rood); }
.doc__merk b { color: var(--rood); }
.doc__afzender { text-align: right; font-size: 9pt; color: #5b4943; }
.doc__midden { display: flex; justify-content: space-between; gap: 10mm; }
.doc__aan small { display: block; font-size: 8pt; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rood); font-weight: 700; margin-bottom: 4px; }
.doc__klein { font-size: 9pt; color: #5b4943; }
.doc__meta h1 { font-size: 24pt; font-stretch: var(--breed); letter-spacing: -0.03em; margin-bottom: 4mm; text-align: right; }
.doc__meta dl { margin: 0; display: grid; gap: 2px; }
.doc__meta dl div { display: flex; justify-content: space-between; gap: 8mm; }
.doc__meta dt { color: #5b4943; }
.doc__meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.doc__titel { font-weight: 700; font-size: 12pt; }
.doc__regels { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc__regels th { padding: 3mm 2mm; text-align: left; font-size: 8pt; letter-spacing: 0.1em; text-transform: uppercase; color: #5b4943; border-bottom: 1.5px solid #1d1412; }
.doc__regels td { padding: 3mm 2mm; border-bottom: 1px solid #e7e1da; vertical-align: top; }
.doc__totalen { margin: 0 0 0 auto; width: 75mm; display: grid; gap: 1.5mm; font-variant-numeric: tabular-nums; }
.doc__totalen div { display: flex; justify-content: space-between; }
.doc__totalen dd { margin: 0; }
.doc__eind { padding-top: 2mm; margin-top: 1mm; border-top: 2px solid #1d1412; font-weight: 800; font-size: 13pt; }
.doc__notitie { white-space: pre-wrap; }
.doc__betalen { display: grid; gap: 1mm; padding: 5mm 6mm; border-radius: 4mm; background: #fbf3e2; }
.doc__voet { margin-top: auto; padding-top: 4mm; border-top: 1px solid #e7e1da; font-size: 8.5pt; color: #5b4943; text-align: center; }

@media print {
    @page { size: A4; margin: 0; }
    .pagina-beheer { background: #fff; }
    .bh-zijbalk, .bh-documentbalk, .bh-melding, .naar-inhoud { display: none !important; }
    .bh { display: block; }
    .bh-hoofd { padding: 0; display: block; }
    .doc { width: 210mm; min-height: 297mm; box-shadow: none; margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.doc__nr { white-space: nowrap; }
@media (max-width: 640px) {
    .bh-grafiekvak { overflow-x: auto; }
    .bh-svg { min-width: 560px; }
}
.bh-kaart > * { min-width: 0; }

/* Live klantdashboard bij een klant */
.bh-dash { margin-top: 18px; display: grid; gap: 14px; }
.bh-dash .bh-stappen { margin: 0; }
.bh-dash .bh-rij input { flex: 1; min-width: 0; }
.bh-dash__code { font-size: 1.15rem; letter-spacing: 0.14em; font-family: ui-monospace, Menlo, Consolas, monospace; }
.bh-dash dd a { word-break: break-all; }