:root {
    /* ===== Reyis huisstijl — tokens (v1 redesign 2026-07-19) =====
       :root = DONKERE variant. De LICHTE (goedgekeurde tablet-mockup) staat
       onder body.light / html.theme-light body. Alle bestaande var-NAMEN
       blijven bestaan (templates gebruiken var(--red) etc. inline). */
    --brand: #1f4e78;          /* Reyis-blauw */
    --brand-dark: #163a5a;     /* donker blauw */
    --brand-int: #2e6da8;      /* interactief blauw */
    --brand-ink: #ffffff;      /* tekst op brand-vlak */
    --bg-dark: #0e1723;        /* pagina-achtergrond */
    --bg-card: #172433;        /* kaart */
    --bg-sidebar: #12263c;
    --bg-input: #1e2c3e;       /* inset / controls */
    --bg-hover: #24354c;
    --border: #2a3c54;
    --text: #e6ecf3;
    --text-muted: #98a7bb;
    --text-heading: #ffffff;
    --accent: #2e6da8;
    --accent-strong: #4d90d0;
    --accent-tint: rgba(46,109,168,0.18);
    --blue: #4d90d0;
    --blue-hover: #69a4de;
    --green: #35c07f;
    --green-bg: rgba(53, 192, 127, 0.15);
    --red: #ef6a5c;
    --red-bg: rgba(239, 106, 92, 0.16);
    --orange: #e0a23c;
    --orange-bg: rgba(224, 162, 60, 0.16);
    --purple: #9b7ce0;
    --purple-bg: rgba(155, 124, 224, 0.15);
    --cyan: #3bc0d4;
    --radius-card: 14px;
    --radius-ctl: 10px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.45), 0 8px 22px rgba(0,0,0,0.30);
    --tap-target: 48px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

button, input, select, textarea { font-family: inherit; font-size: 14px; }

/* Layout */
.app-layout { display: flex; min-height: 100vh; }

/* Sidebar = Reyis-blauwe merkbalk (wit-op-blauw in beide thema's) */
.sidebar {
    width: 240px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-right: none;
    color: var(--brand-ink);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform 0.3s ease;
    box-shadow: 2px 0 14px rgba(10,25,45,0.22);
}
.sidebar-brand {
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.sidebar-logo {
    height: 40px; width: 40px; border-radius: 10px;
    background: #fff; padding: 5px; object-fit: contain;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.sidebar-brand span { font-size: 11px; color: rgba(255,255,255,0.82); text-transform: uppercase; letter-spacing: 2.5px; font-weight: 600; }
.sidebar-nav { flex: 1; list-style: none; padding: 12px 10px; overflow-y: auto; }
.sidebar-nav li a {
    display: block;
    padding: 13px 14px; margin-bottom: 3px;
    color: rgba(255,255,255,0.86);
    border-left: 3px solid transparent;
    border-radius: 8px;
    min-height: var(--tap-target);
    font-size: 15px; font-weight: 500;
}
.sidebar-nav li a:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }
.sidebar-nav li a.active { background: rgba(255,255,255,0.18); border-left-color: #fff; color: #fff; }

.sidebar-bottom { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.14); }
.theme-toggle { background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 8px 12px; border-radius: 8px; min-height: 40px; }
.theme-toggle:hover { background: rgba(255,255,255,0.2); }
.sidebar-user { margin-top: 10px; font-size: 12px; }
.user-name { font-weight: 700; color: #fff; }
.user-role { color: rgba(255,255,255,0.72); margin-bottom: 8px; font-size: 11px; }
.account-link, .logout-btn {
    display: inline-block; padding: 7px 11px; background: rgba(255,255,255,0.14);
    border-radius: 7px; font-size: 12px; margin-right: 4px; color: #fff; margin-top: 4px;
}
.account-link:hover, .logout-btn:hover { background: rgba(255,255,255,0.24); color: #fff; }
.logout-btn { color: #ffd9d3; }

.main-content { flex: 1; margin-left: 240px; padding: 20px; max-width: 100vw; overflow-x: hidden; }
.menu-toggle {
    display: none;
    position: fixed; top: 8px; left: 10px; z-index: 210;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.16); border: none;
    color: #fff; font-size: 22px;
    border-radius: 10px; cursor: pointer;
}

/* Reyis-topbalk. Op TABLET vast bovenin (de sidebar is dan off-canvas), op een
   BREED scherm een MEELOPENDE balk bovenaan de pagina (23-8-2026).
   Bewust niet vast op breed scherm: daar hangen de foto-wachtrijbalk (top:14px)
   en de online-indicator (top:14px) al, en een tweede vaste balk zou die afdekken. */
.app-topbar {
    display: flex; align-items: center; gap: 12px;
    height: 52px; padding: 0 16px;
    border-radius: 12px; margin-bottom: 16px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff; box-shadow: 0 2px 10px rgba(10,25,45,0.25);
}
.app-topbar .topbar-logo {
    height: 32px; width: 32px; border-radius: 8px; background: #fff;
    padding: 4px; object-fit: contain; flex-shrink: 0;
}
.app-topbar .topbar-title { font-weight: 700; font-size: 16px; letter-spacing: 0.3px; }
.app-topbar .topbar-sub { font-size: 11px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 1.5px; }

/* Overstapknoppen rechts in de balk. */
.topbar-switch { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.topbar-switch a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255,255,255,0.18); color: #fff;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    transition: background 0.15s;
}
.topbar-switch a:hover { background: rgba(255,255,255,0.32); color: #fff; text-decoration: none; }
@media (max-width: 620px) { .topbar-switch .switch-tekst { display: none; } }

@media (max-width: 900px) {
    .app-topbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 200;
        border-radius: 0; margin-bottom: 0;
        padding: 0 12px 0 62px;
    }
}

/* De twee overstapregels bovenaan het menu, met een lijn eronder zodat ze
   zichtbaar losstaan van de gewone navigatie. */
.sidebar-nav li.nav-switch a { background: rgba(255,255,255,0.10); font-weight: 600; }
.sidebar-nav li.nav-switch a:hover { background: rgba(255,255,255,0.22); }
.sidebar-nav li.nav-switch-laatste {
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

/* Mobile-first breakpoint */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); width: 80%; max-width: 300px; }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; padding: 60px 14px 20px; }
    .menu-toggle { display: flex; align-items: center; justify-content: center; }
}

/* Login page */
.login-page { display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-container {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 30px; max-width: 420px; width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.login-brand { text-align: center; margin-bottom: 20px; }
.login-logo { height: 64px; margin-bottom: 8px; }
.login-brand h1 { color: var(--text-heading); font-size: 24px; }
.login-sub { color: var(--text-muted); font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.login-form label { font-size: 13px; color: var(--text-muted); }
.login-form input {
    padding: 14px 12px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 6px; color: var(--text);
    font-size: 16px; min-height: var(--tap-target);
}
.login-form input:focus { outline: none; border-color: var(--blue); }
.login-footer { text-align: center; margin-top: 20px; color: var(--text-muted); font-size: 11px; }

/* Page header */
.page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-header h1 { color: var(--text-heading); font-size: 25px; font-weight: 700; letter-spacing: -0.2px; }
.page-header .muted { color: var(--text-muted); font-size: 13.5px; margin-top: 5px; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.kpi-card.kpi-orange { border-color: var(--orange); background: var(--bg-card); }
.kpi-card.kpi-green { border-color: var(--green); background: var(--bg-card); }
.kpi-card.kpi-highlight { border-color: var(--accent); background: var(--accent-tint); }
.kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.kpi-value { font-size: 26px; font-weight: 600; color: var(--text-heading); }
.kpi-value.small { font-size: 15px; }

/* Panels = kaarten */
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.panel-header h2 { font-size: 17px; color: var(--text-heading); }

/* Buttons */
.btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 18px;
    border-radius: var(--radius-ctl); font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; border: none;
    min-height: var(--tap-target); box-sizing: border-box;
    line-height: 1.35;
    transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(31,78,120,0.28); }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 2px 8px rgba(191,58,44,0.28); }
.btn-danger:active { transform: translateY(1px); }
.btn-large { padding: 15px 26px; font-size: 16px; min-height: 54px; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th {
    padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border);
    color: var(--text-muted); font-weight: 500;
    text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
}
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table.compact thead th, .data-table.compact tbody td { padding: 6px 10px; }
.td-right { text-align: right; }

/* Status badges */
.status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; text-transform: capitalize; }
.status-actief, .status-geschouwd, .status-admin, .status-ingediend, .status-geaccepteerd { background: var(--green-bg); color: var(--green); }
.status-te_schouwen, .status-concept, .status-monteur, .status-calculator { background: rgba(59,130,246,0.12); color: var(--blue); }
.status-in_behandeling, .status-pending { background: var(--orange-bg); color: var(--orange); }
.status-niet_toegankelijk, .status-vervallen, .status-afgekeurd { background: var(--red-bg); color: var(--red); }
.status-afgerond { background: rgba(6,182,212,0.12); color: var(--cyan); }
.status-on-hold, .status-lezen { background: rgba(139,146,168,0.12); color: var(--text-muted); }

/* Forms */
.form-grid { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
/* Compact-inline (26-8-2026): naast elkaar i.p.v. onder elkaar, voor korte
   checkbox-groepjes zoals Aanboring/Verloopstuk/.../Koppeling - ruimtebesparing. */
.form-row.compact-inline { display: inline-flex; width: auto; margin-right: 18px; vertical-align: top; }
.form-row label { font-size: 14.5px; color: var(--text); font-weight: 600; line-height: 1.35; }
.form-row input, .form-row select, .form-row textarea {
    padding: 13px 14px; background: var(--bg-input); border: 1.5px solid var(--border);
    border-radius: var(--radius-ctl); color: var(--text); font-size: 16px;
    min-height: var(--tap-target);
}
.form-row textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none; border-color: var(--brand-int);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.form-row input[readonly], .form-row input:disabled, .form-row textarea:disabled, .form-row select:disabled {
    opacity: 0.7; cursor: not-allowed;
}
.form-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

.form-grid-horiz { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.form-col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.form-col-actions { flex-direction: row; align-self: flex-end; }
.inline-input { padding: 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }

/* Filter bar */
.filter-bar { margin-bottom: 14px; }
.filter-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-form label { font-size: 12px; color: var(--text-muted); }

/* Monteur-dashboard: grote tap-targets voor adressen */
.adres-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.adres-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
    padding: 14px; display: block; color: var(--text);
    min-height: 80px; transition: transform 0.1s;
}
.adres-card:hover { transform: translateY(-2px); border-color: var(--blue); text-decoration: none; color: var(--text); }
.adres-card.adres-te_schouwen { border-left: 4px solid var(--blue); }
.adres-card.adres-in_behandeling { border-left: 4px solid var(--orange); }
.adres-card.adres-geschouwd { border-left: 4px solid var(--green); opacity: 0.75; }
.adres-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.adres-sub { color: var(--text-muted); font-size: 13px; }

/* Progress bar */
.progress-bar { position: relative; height: 20px; background: var(--bg-input); border-radius: 10px; overflow: hidden; min-width: 100px; }
.progress-fill { height: 100%; background: var(--blue); transition: width 0.4s; }
.progress-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }

/* Flash messages */
.flash-messages { position: fixed; top: 58px; right: 12px; z-index: 1000; max-width: 400px; }
.flash { padding: 12px 16px; border-radius: 6px; margin-bottom: 8px; animation: slideIn 0.3s; }
.flash-success { background: var(--green-bg); border-left: 4px solid var(--green); color: var(--green); }
.flash-error { background: var(--red-bg); border-left: 4px solid var(--red); color: var(--red); }
.flash-warning { background: var(--orange-bg); border-left: 4px solid var(--orange); color: var(--orange); }

@keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Online/offline-indicator. Desktop: alleen tonen bij offline (zoals origineel,
   geen botsing met de page-header). Tablet/mobiel (<=900px): altijd-zichtbare
   status-dot in de topbalk. app.js zet bij offline de tekst + .offline-class. */
.online-status {
    position: fixed; top: 14px; right: 14px; z-index: 999;
    padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600;
    display: none; align-items: center; gap: 6px; max-width: 70vw;
    background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange);
}
.online-status.offline { display: inline-flex; }
@media (max-width: 900px) {
    .online-status {
        display: inline-flex;
        background: var(--green-bg); color: var(--green); border-color: transparent;
    }
    .online-status::before { content: '\25CF  Online'; }
    .online-status.offline { background: var(--orange-bg); color: var(--orange); border-color: var(--orange); }
    .online-status.offline::before { content: ''; }
}

/* Utils */
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.empty-state { text-align: center; padding: 32px 16px; color: var(--text-muted); }
.info-list { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; }
.info-list dt { color: var(--text-muted); }

/* ================= LICHTE variant = de GOEDGEKEURDE tablet-mockup ==================
 * Reyis huisstijl, buiten leesbaar. Twee selectors zodat het werkt met:
 *  - body.light (door JS toggle vanaf app.js)
 *  - html.theme-light (pre-render inline-script in <head>, voorkomt FOUC)
 * Deze variant is de DEFAULT (theme-init in base.html/app.js => afwezig-voorkeur = light).
 */
body.light,
html.theme-light body {
    --brand: #1f4e78;
    --brand-dark: #163a5a;
    --brand-int: #2e6da8;
    --brand-ink: #ffffff;
    --bg-dark: #e9edf2;
    --bg-card: #ffffff;
    --bg-sidebar: #1f4e78;
    --bg-input: #eef3f8;
    --bg-hover: #e2e9f1;
    --border: #d3dde8;
    --text: #152230;
    --text-muted: #5b6c7c;
    --text-heading: #10202f;
    --accent: #1f4e78;
    --accent-strong: #163a5a;
    --accent-tint: rgba(31,78,120,0.10);
    --blue: #2e6da8;
    --blue-hover: #1f4e78;
    --green: #1c8a58;
    --green-bg: rgba(28, 138, 88, 0.12);
    --red: #bf3a2c;
    --red-bg: rgba(191, 58, 44, 0.10);
    --orange: #bd7413;
    --orange-bg: rgba(189, 116, 19, 0.12);
    --purple: #6b4fc0;
    --purple-bg: rgba(107, 79, 192, 0.10);
    --cyan: #1b7f96;
    --shadow-card: 0 1px 2px rgba(20,40,70,0.06), 0 8px 22px rgba(20,40,70,0.09);
}
body.light,
html.theme-light body { background: var(--bg-dark); color: var(--text); }

/* ==================================================================== */
/*  M2 — Schouw form-engine styling                                      */
/* ==================================================================== */

/* Radio => segmented pill-knoppen (tablet, buiten leesbaar) */
.radio-group {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 6px;
}
.radio-btn {
    flex: 1 1 auto; min-width: 96px;
    display: flex; align-items: center; justify-content: center;
    padding: 13px 18px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    min-height: 50px;
    font-weight: 600; font-size: 15px;
    color: var(--text);
    text-align: center;
    transition: all 0.12s;
    user-select: none;
}
.radio-btn:hover { background: var(--bg-hover); border-color: var(--brand-int); }
.radio-btn.selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(31,78,120,0.25);
}
/* Bonus: 'Ja' groen, 'Nee' brand-blauw wanneer geselecteerd */
.radio-btn:has(input[value="Ja"]).selected { background: var(--green); border-color: var(--green); box-shadow: 0 2px 8px rgba(28,138,88,0.22); }
.radio-btn input[type=radio] { display: none; }

/* Checkbox / multi-checkbox als wrap-pills */
.checkbox-large, .multi-check-group label {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-ctl);
    cursor: pointer;
    margin-bottom: 6px;
    min-height: var(--tap-target);
    font-size: 15px; font-weight: 500;
    user-select: none;
}
.multi-check-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.multi-check-group label { flex: 1 1 auto; min-width: 150px; margin-bottom: 0; }
.checkbox-large input, .multi-check-group input { width: 22px; height: 22px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.checkbox-large.selected, .multi-check-group label.selected {
    background: var(--accent-tint); border-color: var(--brand); color: var(--text-heading);
}

/* Photo/signature placeholders */
.photo-placeholder {
    padding: 20px; border: 2px dashed var(--border); border-radius: 8px;
    text-align: center; color: var(--text-muted);
    background: rgba(139,146,168,0.04);
}

/* Schouw sections — genummerde kaartkoppen (data-show-if verbergt secties;
   display:none secties tellen NIET mee in de CSS-counter => nummering loopt
   automatisch door over de zichtbare secties = simpele voortgangsindicatie). */
.schouw-form { counter-reset: sectie; }
.schouw-section { transition: opacity 0.2s; }
.schouw-section > h2 {
    counter-increment: sectie;
    display: flex; align-items: center; gap: 12px;
    font-size: 18px; color: var(--text-heading);
    margin: 0 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.schouw-section > h2::before {
    content: counter(sectie);
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
}
.schouw-section > .muted { margin: -6px 0 14px; }

/* Sticky onderbalk met grote submit-knop(pen) */
.sticky-bottom {
    position: sticky; bottom: 12px;
    margin-top: 22px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand);
    box-shadow: 0 -6px 22px rgba(10,25,45,0.18);
    z-index: 10;
}
.sticky-bottom .form-actions { margin-top: 0; }
.sticky-bottom .btn-large { flex: 1 1 200px; }

/* Formulier-kies op start-scherm */
.formulier-kies-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.formulier-kies-card {
    display: block;
    padding: 18px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-ctl);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    min-height: 72px;
}
.formulier-kies-card input[type=radio] { display: none; }
.formulier-kies-card:hover:not(.disabled) { border-color: var(--brand-int); }
.formulier-kies-card input[type=radio]:checked + .kies-inhoud { color: var(--brand); }
.formulier-kies-card:has(input:checked) { border-color: var(--brand); background: var(--accent-tint); box-shadow: 0 2px 10px rgba(31,78,120,0.14); }
.formulier-kies-card.disabled { opacity: 0.45; cursor: not-allowed; }
.kies-inhoud { display: flex; flex-direction: column; gap: 8px; }
.kies-inhoud strong { font-size: 16px; color: var(--text-heading); }

.info-box {
    padding: 13px 15px;
    background: var(--accent-tint);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    margin: 8px 0;
    font-size: 14px;
    color: var(--text);
}

.danger-zone { border-color: var(--red); }
.danger-zone h3 { color: var(--red); margin-bottom: 10px; }

/* No-show / bezoekpogingen-paneel — rood-geaccentueerde kaart (aanvullend op de
   inline var(--red)-styling in _noshow_panel.html; alleen LOOK, routes/logica ongemoeid) */
.noshow-panel {
    border-width: 1.5px;
    border-left: 5px solid var(--red);
    box-shadow: var(--shadow-card);
}
.noshow-panel .panel-header h2 { font-size: 17px; }
.noshow-panel .btn-danger.btn-large { min-height: 60px; font-size: 17px; letter-spacing: 0.2px; }
.noshow-panel .btn-danger.btn-large:hover { filter: brightness(1.05); }
.noshow-panel .data-table.compact { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.noshow-panel .data-table.compact thead th { background: var(--bg-input); }

/* ==================================================================== */
/*  M4 — Foto-upload + signature styling                                  */
/* ==================================================================== */

.photo-veld { margin-top: 6px; }
.photo-upload-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
/* De twee upload-knoppen (labels) als grote foto-tegels. Scoped => submit-knoppen
   elders blijven gewone knoppen. */
.photo-upload-controls > label {
    flex: 1 1 150px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 88px; padding: 16px;
    border-radius: 12px;
    font-size: 15px; font-weight: 600;
    cursor: pointer; text-align: center; line-height: 1.3;
    box-shadow: none;
}
.photo-upload-controls .btn-primary {
    background: var(--accent-tint); color: var(--brand);
    border: 2px dashed var(--brand-int);
}
.photo-upload-controls .btn-primary:hover { background: var(--accent-tint); border-color: var(--brand); color: var(--brand); }
.photo-upload-controls .btn-secondary {
    background: var(--bg-input); color: var(--text);
    border: 2px dashed var(--border);
}
.photo-camera-btn { position: relative; cursor: pointer; }
.photo-camera-btn input { position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer; }

.photo-grid, .photo-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px; margin-top: 8px;
}
.photo-item {
    position: relative; aspect-ratio: 1;
    border-radius: 12px; overflow: hidden;
    background: var(--bg-input); border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(10,25,45,0.12);
}
.photo-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo-verwijder {
    position: absolute; top: 4px; right: 4px;
    width: 28px; height: 28px;
    background: rgba(0,0,0,0.7); color: white;
    border: none; border-radius: 50%; cursor: pointer;
    font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.photo-verwijder:hover { background: var(--red); }
.photo-uploading {
    grid-column: 1 / -1;
    padding: 20px; background: rgba(59,130,246,0.1);
    text-align: center; border-radius: 8px;
    color: var(--blue); font-size: 13px;
}
.photo-grid-view img { cursor: pointer; transition: transform 0.15s; }
.photo-grid-view img:hover { transform: scale(1.05); }

/* ===== Foto-wachtrij (23-8-2026) =====
   De foto verschijnt METEEN als tegel, nog voor hij verstuurd is. De badge
   erop vertelt of hij wacht, bezig is of mislukt. Zo raakt een monteur nooit
   het spoor bijster van een foto die hij net gemaakt heeft. */
.photo-item.foto-wacht img { opacity: 0.45; filter: grayscale(35%); }
.photo-item .foto-badge {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 5px 6px;
    background: rgba(10,25,45,0.82); color: #fff;
    font-size: 11px; line-height: 1.25; text-align: center;
    word-break: break-word;
}
.photo-item.foto-mislukt { border-color: var(--red); border-width: 2px; }
.photo-item.foto-mislukt .foto-badge { background: var(--red); cursor: pointer; }
.photo-item.foto-mislukt img { opacity: 0.35; filter: grayscale(80%); }

/* Vaste balk BOVENIN zolang er nog foto's in de wachtrij staan. Bewust boven en
   niet onder: onderin zit de sticky-bottom met Opslaan en Indienen, en die mag
   nooit afgedekt worden. Onder de mobiele topbalk van 52px door. */
.foto-wachtrij-balk {
    position: fixed; left: 10px; right: 10px; top: 60px; z-index: 960;
    padding: 12px 15px; border-radius: 10px;
    background: var(--brand-int); color: #fff;
    font-size: 13.5px; font-weight: 600; line-height: 1.4; text-align: center;
    box-shadow: 0 4px 16px rgba(10,25,45,0.4);
}
.foto-wachtrij-balk.foto-wachtrij-fout { background: var(--red); }
@media (min-width: 901px) { .foto-wachtrij-balk { left: 260px; top: 14px; } }

/* Pop-up die de monteur zelf moet wegtikken. */
.foto-melding-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(10,25,45,0.62);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.foto-melding {
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-top: 5px solid var(--brand);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    max-width: 420px; width: 100%; padding: 22px;
    display: flex; flex-direction: column; gap: 16px; text-align: center;
}
.foto-melding p { font-size: 15.5px; line-height: 1.5; }
.foto-melding.foto-melding-fout { border-top-color: var(--red); }

.signature-veld {
    display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
}
/* Verklaring boven de BEWONER-handtekening (schema sig_type=bewoner).
   Pure CSS => geen markup/JS aangeraakt, canvas blijft werken. */
.signature-veld[data-sig-type="bewoner"]::before {
    content: "Ik verklaar dat de tijdens de schouw vastgelegde situatie en schades juist en volledig zijn weergegeven.";
    display: block;
    padding: 12px 14px;
    background: var(--accent-tint);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--text);
    line-height: 1.45;
}
.signature-canvas {
    width: 100%; max-width: 600px; height: 200px;
    background: #ffffff;
    border: 2px dashed var(--brand-int);
    border-radius: 12px;
    touch-action: none;
    cursor: crosshair;
    box-shadow: 0 1px 4px rgba(10,25,45,0.10);
}
.signature-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sig-status { font-size: 13.5px; font-weight: 500; }

.signature-img {
    max-width: 300px; background: #ffffff;
    border: 1px solid var(--border); border-radius: 4px;
    padding: 4px;
}

/* Tabs voor adressen-status filter */
.tab-bar {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-bottom: 14px; border-bottom: 2px solid var(--border);
}
.tab-link {
    padding: 10px 16px;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px; font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--tap-target);
}
.tab-link:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
.tab-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(59,130,246,0.06);
}
.tab-badge {
    background: var(--bg-input);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}
.tab-link.active .tab-badge { background: var(--blue); color: white; }

/* Camera-modal (live stream) */
.camera-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    align-items: center; justify-content: center;
    padding: 16px;
}
.camera-modal.open { display: flex; }
.camera-inner {
    background: #000; border-radius: 12px;
    max-width: 900px; width: 100%;
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px;
    max-height: 95vh;
}
#camera-stream {
    width: 100%; max-height: 70vh; object-fit: contain;
    background: #000; border-radius: 8px;
}
.camera-controls {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.camera-preview { max-height: 100px; overflow-x: auto; display: flex; gap: 6px; }
.cam-thumb {
    position: relative; width: 80px; height: 80px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden;
    background: var(--bg-card);
}
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cam-thumb .upload-spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4); color: white; font-size: 20px;
}
.cam-thumb:not(.uploading) .upload-spinner { background: rgba(34,197,94,0.3); }

/* Foto-bijschrift (opnametijd + GPS) — schouw-detail (gpsfoto 2026-07-19) */
.photo-grid-view .foto-fig { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.photo-grid-view .foto-fig > a { display: block; }
.photo-grid-view .foto-fig img { width: 100%; height: auto; border-radius: 8px; display: block; }
.foto-meta { font-size: 11px; line-height: 1.35; margin-top: 3px; color: #6b7280; word-break: break-word; }
.foto-meta .foto-tijd { display: block; }
.foto-meta a { color: var(--blue); text-decoration: none; }
.foto-meta a:hover { text-decoration: underline; }

/* ========================================================================
   AI veld-hulp — zwevende hulpknop + paneel (toegevoegd 2026-07-25)
   Gebruikt bestaande tokens (--accent/--brand/--bg-card/--radius-card/...)
   zodat het meekleurt met beide thema's (licht = tablet-mockup, donker).
   ======================================================================== */
.hulp-fab {
    position: fixed; right: 18px; bottom: 96px; z-index: 950;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 56px; padding: 0 20px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 999px;
    font-size: 15px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(10,25,45,0.35), 0 2px 6px rgba(10,25,45,0.22);
    cursor: pointer;
}
.hulp-fab:hover { background: var(--accent-strong); }
.hulp-fab-icon { font-size: 19px; line-height: 1; }

.hulp-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9000;
    background: transparent;
}
.hulp-overlay.open { display: block; }

.hulp-paneel {
    display: none;
    position: fixed; right: 18px; bottom: 96px; z-index: 9001;
    width: min(400px, 94vw);
    max-height: min(640px, 78vh);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    flex-direction: column; overflow: hidden;
}
.hulp-paneel.open { display: flex; }

.hulp-paneel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
}
.hulp-paneel-header h2 { font-size: 15px; font-weight: 700; color: #fff; }
.hulp-close {
    background: rgba(255,255,255,0.16); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 8px; font-size: 14px; cursor: pointer;
    flex-shrink: 0;
}
.hulp-close:hover { background: rgba(255,255,255,0.28); }

.hulp-transcript {
    flex: 1; overflow-y: auto; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 140px;
}
.hulp-bericht {
    max-width: 88%; padding: 10px 13px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.hulp-bericht-ai {
    align-self: flex-start; background: var(--bg-input); color: var(--text);
    border-bottom-left-radius: 3px;
}
.hulp-bericht-user {
    align-self: flex-end; background: var(--accent); color: #fff;
    border-bottom-right-radius: 3px;
}
.hulp-bericht-denken { color: var(--text-muted); font-style: italic; }

.hulp-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 16px 10px; flex-shrink: 0;
}
.hulp-chip {
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
    border-radius: 999px; padding: 8px 12px; font-size: 12.5px; cursor: pointer;
    text-align: left;
}
.hulp-chip:hover { background: var(--bg-hover); border-color: var(--accent); }

.hulp-input-row {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid var(--border); flex-shrink: 0;
}
.hulp-input-row input[type="text"] {
    flex: 1; min-width: 0; padding: 11px 13px; background: var(--bg-input);
    border: 1.5px solid var(--border); border-radius: var(--radius-ctl);
    color: var(--text); font-size: 15px; min-height: 44px;
}
.hulp-input-row input[type="text"]:focus { outline: none; border-color: var(--accent); }
.hulp-send {
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--accent); color: #fff; border: none; border-radius: var(--radius-ctl);
    font-size: 17px; cursor: pointer;
}
.hulp-send:hover { background: var(--accent-strong); }
.hulp-send:disabled { opacity: 0.5; cursor: default; }

.hulp-privacy {
    padding: 6px 16px 12px; font-size: 10.5px; color: var(--text-muted);
    text-align: center; flex-shrink: 0;
}

@media (max-width: 520px) {
    .hulp-fab { right: 12px; bottom: 84px; padding: 0 16px; min-height: 52px; }
    .hulp-paneel { right: 8px; left: 8px; width: auto; bottom: 84px; max-height: 72vh; }
}