:root {
    /* Fugro Corporate Identity — LIGHT mode: navy + wit + cyan accent */
    --bg: #E8EFF7;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --card-elev: #F0F5FB;
    --primary: #011E41;
    --primary-2: #003C71;
    --accent: #FF3300;
    --warn: #FF8B00;
    --danger: #DE350B;
    --text: #0A1628;
    --muted: #4A5C73;
    --border: #B8C7D6;
    --border-strong: #7A94B0;
    --shadow: 0 1px 3px rgba(1,30,65,0.08);
    --shadow-card: 0 4px 16px rgba(1,30,65,0.10), 0 1px 3px rgba(1,30,65,0.06);
    --shadow-strong: 0 8px 28px rgba(1,30,65,0.18);
    --radius: 4px;
    --neon-cyan: #0EA5E9;
    --neon-blue: #003C71;
    --neon-emerald: #00875A;
    --topbar-bg: #FFFFFF;
    --input-bg: #FFFFFF;
    --table-alt: #F5F9FD;
    --primary-tint: rgba(91,184,232,0.08);
    --cyan-tint: rgba(91,184,232,0.15);
}

/* ===================================================================
   DESIGN TOKENS — spacing, radii, typography (global)
   Gebruik deze vars overal ipv magische getallen.
   =================================================================== */
:root {
    /* Spacing scale (Fibonacci-achtig) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    /* Corner radius */
    --r-sm:  6px;
    --r-md:  8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;
    /* Typography scale */
    --fz-xs:  0.72rem;
    --fz-sm:  0.85rem;
    --fz-md:  0.95rem;
    --fz-lg:  1.10rem;
    --fz-xl:  1.35rem;
    --fz-2xl: 1.70rem;
    --fw-med: 500;
    --fw-sb:  600;
    --fw-b:   700;
    --fw-eb:  800;
}

/* ===================================================================
   REUSABLE COMPONENT — .subtabs
   Fugro-huisstijl sub-navigatie boven een groep panels. Gebruikt door:
     * Watermonsters-tab (Nieuwe opdracht / Opdrachten / Pakketten / Voorraad)
     * App beheer-tab   (Gebruikers / Voorinstellingen / AED)
     * Elke andere tab die interne sub-secties heeft.
   Markup:
     <nav class="subtabs" role="tablist">
       <button class="subtab-btn active" data-subtab="key1">Titel</button>
       ...
     </nav>
     <section class="subtab-panel" data-subtab-panel="key1">...</section>
     ...
   JS: initSubtabs(rootEl) wisselt panels op basis van data-subtab.
   =================================================================== */
.subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3);
    margin: 0 0 var(--sp-5);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}
.subtab-btn {
    flex: 1 1 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--fz-md);
    font-weight: var(--fw-sb);
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .1s, box-shadow .18s;
    font-family: inherit;
}
.subtab-btn:hover:not(.active) {
    background: var(--card-elev);
    border-color: var(--border);
}
.subtab-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(1,30,65,0.35), inset 0 -3px 0 var(--neon-cyan);
    transform: translateY(-1px);
}
[data-theme="dark"] .subtab-btn.active {
    box-shadow: 0 6px 18px rgba(91,184,232,0.35), inset 0 -3px 0 var(--neon-cyan);
}
.subtab-btn-ic { font-size: var(--fz-lg); line-height: 1; }
.subtab-panel { animation: subtabFadeIn .22s ease-out; }
.subtab-panel[hidden] { display: none !important; }
@keyframes subtabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .subtab-btn { flex: 1 1 45%; padding: var(--sp-3); font-size: var(--fz-sm); }
}

[data-theme="dark"] {
    --bg: #0A1628;
    --surface: #0F1F38;
    --card: #12263F;
    --card-elev: #1A3050;
    --text: #E8EEF4;
    --muted: #8FA3B8;
    --border: #2A3F57;
    --border-strong: #4A6180;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-strong: 0 8px 32px rgba(0,0,0,0.55);
    --neon-cyan: #5BB8E8;
    --neon-blue: #7EC8F0;
    --neon-emerald: #34D399;
    --topbar-bg: #0F1F38;
    --input-bg: #0A1628;
    --table-alt: #12263F;
    --primary-tint: rgba(91,184,232,0.08);
    --cyan-tint: rgba(91,184,232,0.15);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* ===== PROFESSIONAL LOGIN SCREEN ===== */
.login-screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f0f4f8;
    overflow-y: auto; overflow-x: hidden;   /* hoge kaart (registratie) kan scrollen */
    z-index: 100;
    min-height: 100vh;
    min-width: 100vw; max-width: 100%;
}
.login-screen.hidden { display: none; }
.login-screen.tab.active { display: flex !important; }

/* ===== TABS ===== */
.tab { display: none; }
.tab.active { display: block; }

.login-backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0,165,224,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.login-card {
    position: relative;
    width: min(440px, calc(100vw - 32px));
    padding: 48px 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    backdrop-filter: none;
    text-align: center;
    z-index: 10;
}

.login-logo {
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}
.login-logo img {
    max-height: 80px;
    width: auto;
    display: block;
}

.login-title {
    font-size: 1.6rem; font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    color: #011E41;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #011E41;
}
.login-subtitle {
    margin: 0 0 28px;
    color: #64748b;
    font-size: 0.95rem;
}

.login-field { text-align: left; margin-bottom: 16px; }
.login-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
}
.login-field input {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #0f172a;
    font-size: 1rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.login-field input:focus {
    border-color: #00a5e0;
    box-shadow: 0 0 0 3px rgba(0,165,224,0.15);
}

.login-error {
    min-height: 22px;
    margin-bottom: 12px;
    color: #dc2626;
    font-size: 0.85rem;
    text-align: center;
}

.login-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: #011E41;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s;
}
.login-btn:hover {
    background: #003C71;
    transform: none;
    box-shadow: none;
}

.login-footer {
    margin: 24px 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ===== TOPBAR / NAV ===== */
.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: #FFFFFF;
    backdrop-filter: none;
    border-bottom: 1px solid #B8C7D6;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:600; color:#003C71; }
.brand img {
    display:block;
    height:100px;
    width:auto;
    background: linear-gradient(135deg, #011E41 0%, #003C71 100%);
    padding: 4px 10px;
    border-radius: 12px;
}
.nav { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}
.nav-btn:hover, .nav-btn.active {
    color: var(--text);
    background: rgba(0,60,113,0.08);
    border-color: rgba(0,60,113,0.15);
}
[data-theme="dark"] .nav-btn:hover, [data-theme="dark"] .nav-btn.active {
    background: rgba(91,184,232,0.12);
    border-color: rgba(91,184,232,0.25);
}

/* ===== DROPDOWN NAV GROUPS ===== */
.nav-group { position: relative; display: inline-block; }
.nav-parent .caret { font-size: 0.7em; margin-left: 2px; }
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 170px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 4px;
    z-index: 100;
}
.nav-group.open .nav-dropdown { display: block; }
.nav-dropdown .nav-sub {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius);
}
.nav-dropdown .nav-sub:hover { background: var(--card-elev); }
.nav-dropdown .nav-sub.active {
    background: var(--neon-blue);
    color: #FFFFFF;
}

/* Theme toggle button */
.theme-toggle { font-size: 1rem; padding: 8px 14px; }
.top-actions { display:flex; gap:8px; }

/* ===== BUTTONS ===== */
.btn {
    padding: 8px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: .15s;
}
.btn:hover { background: var(--card-elev); border-color: var(--muted); }
.btn.primary { background: var(--neon-blue); border-color: var(--neon-blue); color: #FFFFFF; font-weight: 600; }
.btn.primary:hover { background: var(--neon-cyan); border-color: var(--neon-cyan); }
.btn.warn { background: rgba(255,139,0,0.1); border-color: rgba(255,139,0,0.3); color: var(--warn); }
.btn.danger { background: rgba(222,53,11,0.1); border-color: rgba(222,53,11,0.3); color: #dc2626; }
.btn-block { width: 100%; }
.btn-sm { padding: 4px 8px; font-size: 0.78rem; border-radius: 6px; }
.btn-secondary { background: rgba(100,116,139,0.15); border-color: rgba(100,116,139,0.3); color: var(--muted); }

/* ===== LAYOUT ===== */
.container { padding: 20px; max-width: 1400px; margin: 0 auto; }
.hero { margin-bottom: 20px; }
.hero h1 { margin: 0 0 6px; font-size: 1.45rem; }
.muted { color: var(--muted); font-size: 0.9rem; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-header h2, .card-header h3 { margin: 0; font-size: 1.05rem; }
.chart-card { grid-column: 1 / -1; }
.chart-wrap { position: relative; height: 320px; }

/* ===== STATS ===== */
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.stat-card:hover { transform: translateY(-2px); border-color: rgba(34,211,238,0.25); }
.stat-title { display:flex; align-items:center; gap:8px; font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.stat-meta { font-size: 0.8rem; color: var(--muted); }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--neon-emerald); box-shadow:0 0 8px var(--neon-emerald); }
.status-dot.off { background:#64748b; box-shadow:none; }

/* ===== MAP ===== */
.map-layout { display:grid; grid-template-columns: 1fr 320px; gap:16px; height: calc(100vh - 160px); }
.map { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.map-sidebar { display:flex; flex-direction:column; gap:12px; overflow:auto; }
.sensor-list { display:flex; flex-direction:column; gap:8px; }
.legend { font-size: 0.8rem; color: var(--muted); display:flex; flex-direction:column; gap:6px; }
.legend-row { display:flex; align-items:center; gap:8px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }

/* ===== TABLE ===== */
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: #FFFFFF; font-weight: 600; background: var(--neon-blue); }
tr:hover td { background: var(--card-elev); }
tr:nth-child(even) { background: var(--table-alt); }

/* ===== MODAL ===== */
.modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    padding: 20px;
}
.modal.active { display: flex; }
.modal-content {
    width: min(900px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-header .close { background:transparent; border:none; color:var(--muted); font-size:1.4rem; cursor:pointer; }
.modal-header .close:hover { color:var(--text); }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; padding:16px 20px; border-top:1px solid var(--border); }

/* ===== FORM ===== */
.form { display:flex; flex-direction:column; gap:12px; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.form-grid label { display:flex; flex-direction:column; gap:6px; font-size: 0.85rem; color: var(--muted); }
.form-grid input, .form-grid select, .form-grid textarea {
    padding: 10px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0,60,113,0.1);
}
.checkbox-inline { width: auto !important; accent-color: var(--neon-cyan); }

/* ===== PHOTOS ===== */
.photo-list { display:flex; flex-wrap:wrap; gap:8px; }
.photo-list img { width:80px; height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }

/* ===== CALCULATOR / SCHEMATIC ===== */
.calculator { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.calculator h4 { margin: 0 0 10px; font-size: 1rem; }
.calc-row { display:flex; gap:16px; flex-wrap:wrap; }
.calc-results { flex-direction:column; gap:6px; margin-top:12px; }
.calc-result { color: var(--neon-cyan); font-weight: 700; }
.schematic-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.schematic-svg svg { width:100%; height:auto; max-height:520px; border-radius:12px; border:1px solid var(--border); background: var(--surface); }
.gps-warning { color:var(--warn); font-size:.85rem; margin:8px 0; }

/* ===== LOGGER TABS ===== */
.logger-tab { display:none; }
.logger-tab.active { display:block; }
.logger-tab-btn.active { background: rgba(34,211,238,0.15); border-color: var(--neon-cyan); color: var(--neon-cyan); }
.available-card.alert-zero { border-color: rgba(239,68,68,0.4); }
.available-card.archive-card { opacity: 0.75; }
.mini-chart-wrap { height:120px; border-radius:8px; background:var(--card); border:1px solid var(--border); padding:8px; }
.map-wrap { display:flex; align-items:center; justify-content:center; }
.no-entry { font-size:1.1rem; }
.badge { padding: 2px 6px; border-radius: 4px; }

/* ===== CHART CONTROLS ===== */
.chart-controls { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0; }
.btn-group { display:flex; gap:4px; flex-wrap:wrap; }
.btn-group .btn { border-radius: 6px; padding: 8px 14px; font-size: 0.8rem; }
.btn-group .btn.active-mode { background: rgba(34,211,238,0.15); border-color: var(--neon-cyan); color: var(--neon-cyan); }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filters input, .filters select { padding: 7px 10px; background: var(--input-bg); border:1px solid var(--border); border-radius: var(--radius); color:var(--text); }
.chart-mode-hint { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }

/* ===== APP FOOTER ===== */
.app-footer { text-align:center; padding:16px 0; font-size:.85rem; color:var(--muted); border-top:1px solid var(--border); margin-top:24px; }
.footer-link { color:var(--primary); text-decoration:none; }
.footer-link:hover { text-decoration: underline; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .map-layout { grid-template-columns: 1fr; height: auto; }
    .map { height: 360px; }
    .schematic-wrap { grid-template-columns: 1fr; }
    .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
    .topbar .brand img { height: 54px; }
    .nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .top-actions { order: 2; margin-left: auto; flex-wrap: wrap; min-width: 0; }
    .top-actions .user-chip { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
    .top-actions .btn, .top-actions .theme-toggle { flex: 0 0 auto; }
}
@media (max-width: 520px) {
    .container { padding: 12px; }
    .login-card { padding: 28px 22px; }
    .card { padding: 14px; }
    .topbar { padding: 8px 10px; row-gap: 6px; }
    .topbar .brand img { height: 44px; padding: 3px 8px; }
    .top-actions { gap: 6px; }
    .top-actions .user-chip { max-width: 52vw; padding: 6px 10px; font-size: 0.78rem; }
    .top-actions .btn { padding: 7px 10px; height: 34px; font-size: 0.85rem; }
    .top-actions .theme-toggle { width: 34px; height: 34px; font-size: 0.9rem; }
    .nav-btn { padding: 7px 12px; font-size: 0.85rem; }
}

/* ===== HIDDEN / UTILITY ===== */
.hidden { display: none !important; }
.span-2 { grid-column: span 2; }

/* ===================================================================
   WATERMONSTERS - subnavigatie, wizard, drag & drop
   =================================================================== */

/* Watermonsters sub-nav is een variant van de globale .subtabs component.
   De HTML gebruikt nog .wm-subnav/.wm-subnav-btn/.wm-sub (legacy klassen),
   we spiegelen die naar dezelfde look via aliassen. */
.wm-subnav-ic     { font-size: var(--fz-lg); line-height: 1; }
.wm-sub           { animation: subtabFadeIn .22s ease-out; }

.wm-subnav {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    padding: var(--sp-3); margin: 0 0 var(--sp-5);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.wm-subnav-btn {
    flex: 1 1 160px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
    background: transparent; color: var(--text);
    border: 1px solid transparent; border-radius: var(--r-md);
    font-size: var(--fz-md); font-weight: var(--fw-sb);
    cursor: pointer; font-family: inherit;
    transition: background .18s, border-color .18s, transform .1s, box-shadow .18s;
}
.wm-subnav-btn:hover:not(.active) {
    background: var(--card-elev); border-color: var(--border);
}
.wm-subnav-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    color: #fff; border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(1,30,65,0.35), inset 0 -3px 0 var(--neon-cyan);
    transform: translateY(-1px);
}
[data-theme="dark"] .wm-subnav-btn.active {
    box-shadow: 0 6px 18px rgba(91,184,232,0.35), inset 0 -3px 0 var(--neon-cyan);
}

/* ===== Wizard shell ===== */
.wiz-shell {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px;
    box-shadow: var(--shadow-strong);
    margin: 0;
    border-top: 4px solid var(--primary);
}
[data-theme="dark"] .wiz-shell {
    border-top-color: var(--neon-cyan);
}
.wiz-inputs { max-width: 900px; margin: 0 auto; }
.wiz-progress, .wiz-step-label, .wiz-step > .wiz-h, .wiz-step > .wiz-sub, .wiz-nav, .wiz-summary, .wiz-final-actions {
    max-width: 900px; margin-left: auto; margin-right: auto;
}

/* Progress bar */
.wiz-progress {
    position: relative;
    height: 14px;
    background: var(--card-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
    margin-bottom: 8px;
    overflow: visible;
}
.wiz-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 14.28%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 50%, var(--neon-cyan) 100%);
    border-radius: 999px;
    transition: width .35s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 12px rgba(1,30,65,0.30);
}
[data-theme="dark"] .wiz-progress-fill {
    box-shadow: 0 0 14px rgba(91,184,232,0.45);
}
.wiz-progress-dots {
    position: absolute;
    inset: -6px 0 -6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    pointer-events: auto;
}
.wiz-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all .25s;
}
.wiz-dot.done {
    background: var(--primary-2);
    border-color: var(--primary-2);
    color: #fff;
}
.wiz-dot.current {
    background: var(--primary);
    border-color: var(--neon-cyan);
    color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 0 5px var(--cyan-tint);
}

.wiz-step-label {
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    letter-spacing: .5px;
    margin: 18px 0 20px;
    text-transform: uppercase;
}

/* Individuele stap */
.wiz-step { display: none; }
.wiz-step.active { display: block; animation: wizSlide .3s ease-out; }
@keyframes wizSlide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.wiz-h {
    margin: 0 0 8px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    letter-spacing: -.3px;
}
[data-theme="dark"] .wiz-h { color: var(--neon-blue); }
.wiz-sub {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 1rem;
}

/* Inputs */
.wiz-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.wiz-inputs-single { grid-template-columns: 1fr; max-width: 500px; }
.wiz-lbl {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .1px;
}
.wiz-lbl > .wiz-input { display: block; width: 100%; margin-top: 8px; }
.wiz-lbl-wide { grid-column: 1 / -1; }
.wiz-lbl-big { }
.wiz-lbl-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: end;
    padding-bottom: 12px;
}
.wiz-lbl-checkbox input[type="checkbox"] { width: 18px; height: 18px; }
.wiz-hint {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.85rem;
}
.req { color: var(--accent); font-weight: 900; margin-left: 2px; }
.wiz-input {
    padding: 12px 14px;
    background: var(--input-bg);
    color: var(--text);
    border: 2px solid var(--border-strong);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.wiz-input:hover:not(:focus) {
    border-color: var(--primary);
}
.wiz-input:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 4px var(--cyan-tint);
    background: var(--surface);
}
[data-theme="dark"] .wiz-input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 4px rgba(91,184,232,0.30);
}
.wiz-input-big {
    padding: 16px 18px;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 1px;
}
textarea.wiz-input { resize: vertical; min-height: 80px; }

/* Monster-rijen in stap 3 */
.wiz-monsters { display: flex; flex-direction: column; gap: 12px; }
.wiz-add-btn {
    margin-top: 16px;
    padding: 14px 20px;
    width: 100%;
    background: var(--card-elev);
    color: var(--primary);
    border: 2px dashed var(--border);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
[data-theme="dark"] .wiz-add-btn { color: var(--neon-cyan); }
.wiz-add-btn:hover {
    border-color: var(--primary);
    background: var(--surface);
}
.wiz-add-plus {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    text-align: center;
    font-weight: 800;
    margin-right: 6px;
}

/* Pakket-koppeling stap 4 */
.wiz-pkg-links { display: flex; flex-direction: column; gap: 12px; }
.wiz-pkg-row {
    padding: 14px 16px;
    background: var(--card-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
}
.wiz-pkg-row-label { font-weight: 600; color: var(--text); }
.wiz-pkg-chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.wiz-chip {
    padding: 3px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}

/* Drag & drop */
.wiz-drop {
    padding: 40px 24px;
    background: var(--card-elev);
    border: 2px dashed var(--border);
    border-radius: 14px;
    text-align: center;
    color: var(--muted);
    transition: all .2s;
    cursor: pointer;
}
.wiz-drop:hover, .wiz-drop.drag-over {
    border-color: var(--primary);
    background: var(--surface);
    color: var(--text);
    transform: scale(1.01);
}
[data-theme="dark"] .wiz-drop:hover, [data-theme="dark"] .wiz-drop.drag-over {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 24px rgba(91,184,232,0.2);
}
.wiz-drop-ic { font-size: 2.5rem; margin-bottom: 8px; }
.wiz-drop-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.wiz-drop-sub { font-size: 0.9rem; }
.wiz-drop-link {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}
[data-theme="dark"] .wiz-drop-link { color: var(--neon-cyan); }

.wiz-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.wiz-preview-item {
    position: relative;
    aspect-ratio: 1;
    background: var(--card-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.wiz-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.wiz-preview-x {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    line-height: 22px;
}
.wiz-preview-list { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.wiz-preview-file {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--card-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Samenvatting stap 7 */
.wiz-summary {
    margin: 20px 0;
    padding: 20px;
    background: var(--card-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.wiz-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}
.wiz-summary-row:last-child { border-bottom: 0; }
.wiz-summary-lbl { color: var(--muted); font-weight: 600; }
.wiz-summary-val { color: var(--text); text-align: right; max-width: 60%; }

.wiz-final-actions { display: flex; justify-content: center; margin-top: 24px; }
.wiz-verstuur-btn {
    padding: 18px 40px;
    background: linear-gradient(135deg, #00875A 0%, #34D399 100%);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,135,90,0.35);
    transition: transform .15s, box-shadow .15s;
}
.wiz-verstuur-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,135,90,0.45);
}

/* Wizard-navigatie onderaan */
.wiz-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.wiz-btn {
    padding: 12px 26px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
}
.wiz-btn:hover:not(:disabled) { background: var(--card-elev); }
.wiz-btn:disabled { opacity: .4; cursor: not-allowed; }
.wiz-btn-next {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.wiz-btn-next:hover:not(:disabled) { background: var(--primary-2); }
.wiz-btn-next.wiz-hidden { visibility: hidden; }

/* Mobiel */
@media (max-width: 640px) {
    .wm-subnav-btn { flex: 1 1 45%; padding: 12px; font-size: 0.9rem; }
    .wiz-shell { padding: 20px 16px; border-radius: 12px; }
    .wiz-inputs { grid-template-columns: 1fr; }
    .wiz-h { font-size: 1.35rem; }
    .wiz-input-big { font-size: 1.1rem; }
    .wiz-nav { flex-direction: column-reverse; }
    .wiz-btn { width: 100%; }
}

/* ===================================================================
   FLAG-TOGGLES voor gebruikersbeheer (tab-users)
   iOS/Android-stijl schuif-toggle naast label. Klik = flip.
   =================================================================== */
.flag-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    text-align: left;
    min-width: 0;
    min-height: 78px;
    line-height: 1.25;
    word-break: break-word;
}
.flag-chip:active { transform: scale(0.98); }
.flag-chip::before {
    /* De schuif-baan: 42x24 pill met de knob getekend via radial-gradient (uit = links). */
    content: "";
    display: inline-block;
    width: 42px; height: 24px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 12px 12px, #ffffff 8.5px, transparent 9.5px),
        #cbd5e1;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
    transition: background .25s cubic-bezier(.4,0,.2,1);
}
.flag-chip:hover:not(:disabled):not(.disabled-chip) {
    background: var(--card-elev);
    border-color: var(--muted);
}
.flag-chip.on {
    background: var(--cyan-tint);
    border-color: var(--neon-cyan);
    color: var(--primary);
}
.flag-chip.on::before {
    background:
        radial-gradient(circle at 30px 12px, #ffffff 8.5px, transparent 9.5px),
        var(--neon-cyan);
}
[data-theme="dark"] .flag-chip.on {
    background: rgba(91,184,232,0.15);
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}
[data-theme="dark"] .flag-chip.on::before {
    background:
        radial-gradient(circle at 30px 12px, #ffffff 8.5px, transparent 9.5px),
        var(--neon-cyan);
}
[data-theme="dark"] .flag-chip::before {
    background:
        radial-gradient(circle at 12px 12px, #E8EEF4 8.5px, transparent 9.5px),
        #334155;
}

.flag-chip.disabled-chip {
    opacity: 0.5;
    cursor: not-allowed;
    font-style: italic;
}
.flag-chip.disabled-chip::before {
    background:
        radial-gradient(circle at 12px 12px, #ffffff 8.5px, transparent 9.5px),
        var(--border);
}

.flag-chip-group {
    display: grid;
    grid-template-columns: 150px 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}
.flag-chip-group-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
tr.flags-row td {
    background: var(--card-elev);
    padding: 12px 16px !important;
    border-top: 0 !important;
    border-bottom: 2px solid var(--border) !important;
}

/* ===================================================================
   DATA-TABLE (app beheer)
   =================================================================== */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}
.data-table thead th {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    color: #fff;
    text-align: left;
    padding: 14px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 3px solid var(--neon-cyan);
}
.data-table tbody td {
    padding: 14px;
    border-top: 1px solid var(--border);
    vertical-align: top;
    font-size: 0.9rem;
}
.data-table tbody tr:first-child td { border-top: 0; }
.data-table tbody tr:not(.flags-row):hover td {
    background: var(--card-elev);
}
/* Flags-row zit visueel BIJ de user-row erboven: geen dikke lijn ertussen, wel duidelijke lijn na de flags-row. */
tr.flags-row td {
    background: var(--card-elev) !important;
    padding: 12px 16px !important;
    border-top: 1px dashed var(--border-strong) !important;
    border-bottom: 3px solid var(--primary) !important;
}
[data-theme="dark"] tr.flags-row td {
    border-bottom-color: var(--neon-cyan) !important;
    background: rgba(255,255,255,0.03) !important;
}

/* ===================================================================
   USER-CARDS (App beheer) � tegel per gebruiker, Fugro huisstijl
   =================================================================== */
.user-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(640px, 1fr));
    gap: 20px;
}
.user-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    border-left: 5px solid var(--neon-cyan);
}
.user-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
}
.user-card.is-admin { border-left-color: var(--primary); }
.user-card.is-blocked { border-left-color: #dc2626; opacity: 0.75; }

/* Header van de kaart */
.uc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 14px;
    background: linear-gradient(180deg, var(--card-elev) 0%, var(--card) 100%);
    border-bottom: 1px solid var(--border);
}
.uc-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
    letter-spacing: .5px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(1,30,65,0.25);
}
.user-card.is-admin .uc-avatar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--neon-cyan) 100%);
}
.uc-title { flex: 1; min-width: 0; }
.uc-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    letter-spacing: -.2px;
}
[data-theme="dark"] .uc-name { color: var(--neon-blue); }
.uc-sub {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 2px;
}
.uc-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
}
.uc-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}
.uc-badge-admin { background: var(--primary); color: #fff; }
.uc-badge-user  { background: var(--card-elev); color: var(--muted); border: 1px solid var(--border); }
.uc-badge-ok    { background: rgba(0,135,90,0.14); color: #00875A; }
.uc-badge-warn  { background: rgba(255,139,0,0.14); color: #FF8B00; }
.uc-badge-danger{ background: rgba(222,53,11,0.14); color: #dc2626; }
[data-theme="dark"] .uc-badge-ok    { background: rgba(52,211,153,0.18); color: #34D399; }

/* Meta-strook: 3 kolommen datums+versie */
.uc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 14px 22px;
    background: var(--card-elev);
    border-bottom: 1px solid var(--border);
}
.uc-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
    min-height: 62px;
    justify-content: center;
}
.uc-meta-lbl {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
}
.uc-meta-val {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uc-meta-hint {
    font-size: 0.72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.uc-empty { color: var(--muted); font-style: italic; }

/* Flags-strook */
.uc-flags {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Actie-knoppen onderaan */
.uc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: var(--card-elev);
    border-top: 1px solid var(--border);
}
/* Op smallere kaart: 3 kolommen zodat 5 knoppen 3+2 layout krijgen. */
@media (max-width: 900px) {
    .uc-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .uc-actions { grid-template-columns: repeat(2, 1fr); }
}
.uc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.2;
}
.uc-btn:hover {
    background: var(--card-elev);
    border-color: var(--primary);
    color: var(--primary);
}
.uc-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.uc-btn-primary:hover {
    background: var(--primary-2);
    border-color: var(--primary-2);
    color: #fff;
}
.uc-btn-danger {
    color: #dc2626;
    border-color: rgba(222,53,11,0.4);
}
.uc-btn-danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: #dc2626;
}

@media (max-width: 720px) {
    .user-cards { grid-template-columns: 1fr; }
    .uc-meta { grid-template-columns: 1fr; }
    .uc-head { flex-wrap: wrap; }
    .uc-badges { flex-direction: row; align-items: center; }
    .flag-chip-group { grid-template-columns: 1fr 1fr; }
    .flag-chip-group-label { grid-column: 1 / -1; margin-bottom: 4px; }
}

/* ===================================================================
   VOORRAAD-GROEPEN (per matrix: water/bodem/asfalt/asbest)
   =================================================================== */
.stock-group { margin-bottom: var(--sp-5); }
.stock-group:last-child { margin-bottom: 0; }
.stock-group-head {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
    color: #fff;
    border-radius: var(--r-md);
    font-size: var(--fz-md);
    font-weight: var(--fw-b);
    letter-spacing: .2px;
}
.stock-group-count {
    margin-left: auto;
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fz-xs);
    font-weight: var(--fw-eb);
}
.stock-group table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.stock-group table.table th {
    background: var(--card-elev);
    color: var(--muted);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fz-xs);
    font-weight: var(--fw-b);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
}
.stock-group table.table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--fz-sm);
}
.stock-group table.table tr:last-child td { border-bottom: 0; }
.stock-group table.table tr:hover td { background: var(--card-elev); }
tr.stock-low td {
    background: rgba(222,53,11,0.08) !important;
    color: #dc2626;
    font-weight: var(--fw-sb);
}

/* ===================================================================
   VOORRAAD: klikbare rij + geschiedenis-uitklap
   =================================================================== */
tr.stock-row-clickable { cursor: pointer; transition: background .12s; }
tr.stock-row-clickable:hover td { background: var(--cyan-tint) !important; }
.stock-row-hint {
    font-size: var(--fz-xs);
    color: var(--neon-cyan);
    font-weight: var(--fw-sb);
    margin-left: var(--sp-2);
    opacity: 0;
    transition: opacity .12s;
}
tr.stock-row-clickable:hover .stock-row-hint { opacity: 1; }
tr.stock-history-row td {
    background: var(--card-elev) !important;
    padding: 0 !important;
    border-bottom: 2px solid var(--primary) !important;
}
.stock-history-body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    animation: subtabFadeIn .18s ease-out;
}
.stock-history-section h4 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fz-sm);
    font-weight: var(--fw-eb);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .4px;
}
[data-theme="dark"] .stock-history-section h4 { color: var(--neon-blue); }
table.stock-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    font-size: var(--fz-sm);
}
table.stock-history-table th {
    background: var(--surface);
    color: var(--muted);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fz-xs);
    font-weight: var(--fw-b);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
table.stock-history-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
}
table.stock-history-table tr:last-child td { border-bottom: 0; }
table.stock-history-table code {
    background: var(--card-elev);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    font-size: var(--fz-xs);
}

/* ===================================================================
   WATERMONSTERS: DIGITALE RETOURBON
   =================================================================== */
.sampling-job-card {
    position: relative;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.sampling-job-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}
.sampling-job-card.is-returned {
    border-left: 5px solid var(--neon-emerald);
    background: linear-gradient(90deg, rgba(0,135,90,.08), var(--card) 14%);
}
.sampling-job-card.is-in-progress {
    border-left: 5px solid var(--danger);
    background: linear-gradient(90deg, rgba(222,53,11,.07), var(--card) 14%);
}
.sampling-progress { margin-top: var(--sp-3); }
.sampling-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: 6px;
    color: var(--muted);
    font-size: var(--fz-xs);
}
.sampling-progress-copy span { font-weight: var(--fw-sb); }
.sampling-progress-copy strong { color: var(--text); }
.sampling-progress-track {
    width: 100%;
    height: 9px;
    overflow: hidden;
    background: var(--border);
    border-radius: var(--r-pill);
}
.sampling-progress-track > span {
    display: block;
    height: 100%;
    background: var(--neon-emerald);
    border-radius: inherit;
    transition: width .3s ease;
}
.sampling-report-view[hidden] { display: none !important; }
.sampling-report-view { animation: subtabFadeIn .2s ease-out; scroll-margin-top: 110px; }
.sampling-report-shell { max-width: 1180px; margin: 0 auto; }
.sampling-report-toolbar {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.sampling-report-toolbar > div { display: flex; align-items: center; gap: var(--sp-3); }
.sampling-report-live { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--fz-xs); font-weight: var(--fw-sb); }
.sampling-report-live i { width: 8px; height: 8px; background: var(--neon-emerald); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,135,90,.12); }
.sampling-report-sheet {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}
.sampling-report-readonly {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px 36px;
    color: #8A1C0D;
    background: #FFF1EE;
    border-bottom: 1px solid rgba(222,53,11,.28);
}
.sampling-report-readonly strong {
    flex: 0 0 auto;
    padding: 4px 8px;
    color: #fff;
    background: var(--danger);
    border-radius: var(--r-sm);
    font-size: var(--fz-xs);
    text-transform: uppercase;
}
.sampling-report-readonly span { font-size: var(--fz-sm); font-weight: var(--fw-sb); }
[data-theme="dark"] .sampling-report-readonly { color: #FFB6A5; background: rgba(222,53,11,.12); }
.sampling-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: 32px 36px 28px;
    color: #fff;
    background: var(--primary);
    border-bottom: 5px solid var(--neon-cyan);
}
.sampling-report-eyebrow,
.sampling-report-kicker {
    display: block;
    margin-bottom: var(--sp-2);
    color: #8FD8F4;
    font-size: var(--fz-xs);
    font-weight: var(--fw-eb);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sampling-report-header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.1;
}
.sampling-report-header p { margin: var(--sp-2) 0 0; color: #DCE9F5; font-size: var(--fz-lg); }
.sampling-report-status {
    min-width: 156px;
    padding: var(--sp-3) var(--sp-4);
    color: #fff;
    text-align: center;
    background: var(--primary-2);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--r-md);
}
.sampling-report-status.is-returned { background: #007A50; border-color: #57D3A7; }
.sampling-report-status.is-in-progress { background: #A82812; border-color: #FF9B88; }
.sampling-report-status span { display: block; font-size: var(--fz-lg); font-weight: var(--fw-eb); }
.sampling-report-status small { display: block; margin-top: 3px; color: rgba(255,255,255,.82); }
.sampling-report-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--card-elev);
    border-bottom: 1px solid var(--border);
}
.sampling-report-summary > div { min-width: 0; padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--border); }
.sampling-report-summary > div:last-child { border-right: 0; }
.sampling-report-summary strong,
.sampling-report-summary span { display: block; overflow-wrap: anywhere; }
.sampling-report-summary strong { color: var(--primary); font-size: var(--fz-lg); }
.sampling-report-summary span { margin-top: 2px; color: var(--muted); font-size: var(--fz-xs); text-transform: uppercase; }
[data-theme="dark"] .sampling-report-summary strong { color: var(--neon-blue); }
.sampling-report-progress-wrap { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.sampling-report-progress-wrap .sampling-progress { margin-top: 0; }
.sampling-report-progress-wrap .sampling-progress-track { height: 14px; }
.sampling-report-quality {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr);
    gap: var(--sp-4) var(--sp-5);
    padding: var(--sp-5) 36px;
    background: var(--card-elev);
    border-bottom: 1px solid var(--border);
}
.sampling-report-quality h3,
.sampling-report-review h3 { margin: 0; color: var(--primary); font-size: var(--fz-lg); }
.sampling-report-quality p,
.sampling-report-review p { margin: 4px 0 0; color: var(--muted); font-size: var(--fz-sm); }
.sampling-report-quality ul,
.sampling-report-validation ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.sampling-report-quality li,
.sampling-report-validation li { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 10px; background: var(--card); border: 1px solid var(--border); }
.sampling-report-quality li > span,
.sampling-report-validation li > span { display: grid; flex: 0 0 auto; width: 22px; height: 22px; place-items: center; color: #fff; background: var(--danger); border-radius: 50%; font-size: var(--fz-xs); font-weight: var(--fw-eb); }
.sampling-report-quality li.is-valid > span,
.sampling-report-validation li.is-valid > span { background: var(--neon-emerald); }
.sampling-report-quality li.is-warning > span,
.sampling-report-validation li.is-warning > span { background: var(--warn); }
.sampling-report-quality li strong,
.sampling-report-quality li small,
.sampling-report-validation li strong,
.sampling-report-validation li small { display: block; overflow-wrap: anywhere; }
.sampling-report-quality li strong,
.sampling-report-validation li strong { color: var(--text); font-size: var(--fz-xs); }
.sampling-report-quality li small,
.sampling-report-validation li small { color: var(--muted); font-size: .68rem; }
.sampling-report-attention { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; align-items: center; padding-top: var(--sp-2); }
.sampling-report-attention strong { color: #8A1C0D; }
.sampling-report-attention span { padding: 4px 8px; color: #8A1C0D; background: #FFF1EE; border: 1px solid rgba(222,53,11,.2); font-size: var(--fz-xs); }
[data-theme="dark"] .sampling-report-quality h3,
[data-theme="dark"] .sampling-report-review h3 { color: var(--neon-blue); }
[data-theme="dark"] .sampling-report-attention strong,
[data-theme="dark"] .sampling-report-attention span { color: #FFB6A5; }
[data-theme="dark"] .sampling-report-attention span { background: rgba(222,53,11,.12); }
.sampling-report-review {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.5fr) auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-5) 36px;
    background: #F4FAFF;
    border-bottom: 1px solid #B7D8EB;
}
.sampling-report-review.is-approved { background: #F0FAF6; border-color: #A7DBC7; }
[data-theme="dark"] .sampling-report-review { background: rgba(38,132,184,.10); border-color: var(--border); }
.sampling-report-review textarea,
.sampling-comment-compose textarea { width: 100%; resize: vertical; color: var(--text); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font: inherit; }
.sampling-report-review textarea { min-height: 72px; padding: var(--sp-3); }
.sampling-report-review-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.sampling-report-review-actions .btn { white-space: nowrap; }
.sampling-report-review-actions .btn.danger { color: #fff; background: var(--danger); border-color: #dc2626; }
.sampling-report-section { padding: 30px 36px; border-bottom: 1px solid var(--border); }
.sampling-report-section:last-child { border-bottom: 0; }
.sampling-report-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.sampling-report-section-title > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: var(--primary-2);
    border-radius: 50%;
    font-size: var(--fz-xs);
    font-weight: var(--fw-eb);
}
.sampling-report-section-title h3 { margin: 0; color: var(--primary); font-size: var(--fz-xl); }
.sampling-report-section-title p { margin: 2px 0 0; color: var(--muted); font-size: var(--fz-sm); }
[data-theme="dark"] .sampling-report-section-title h3 { color: var(--neon-blue); }
.sampling-report-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.sampling-report-fields.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sampling-report-field {
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.sampling-report-field.is-wide { grid-column: 1 / -1; }
.sampling-report-field dt {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: var(--fz-xs);
    font-weight: var(--fw-b);
    text-transform: uppercase;
}
.sampling-report-field dd { margin: 0; color: var(--text); font-weight: var(--fw-sb); white-space: pre-wrap; overflow-wrap: anywhere; }
.sampling-report-map {
    height: 360px;
    margin-top: var(--sp-5);
    overflow: hidden;
    background: var(--card-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.sampling-report-map.is-empty { display: grid; place-items: center; height: 160px; }
.sampling-report-files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.sampling-report-files a { color: var(--primary-2); font-weight: var(--fw-sb); }
.sampling-report-monster-section { background: var(--card-elev); }
.sampling-report-monsters { display: grid; gap: var(--sp-5); }
.sampling-report-monster {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    break-inside: avoid;
}
.sampling-report-monster-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.sampling-report-monster-head h3 { margin: 0; color: var(--primary); font-size: var(--fz-xl); }
.sampling-report-monster-head p { margin: 3px 0 0; color: var(--muted); }
.sampling-report-kicker { color: var(--primary-2); }
[data-theme="dark"] .sampling-report-monster-head h3,
[data-theme="dark"] .sampling-report-kicker { color: var(--neon-blue); }
.sampling-report-complete {
    flex: 0 0 auto;
    padding: 5px 10px;
    color: #dc2626;
    background: rgba(222,53,11,.09);
    border: 1px solid rgba(222,53,11,.28);
    border-radius: var(--r-pill);
    font-size: var(--fz-xs);
    font-weight: var(--fw-eb);
}
.sampling-report-complete.is-complete { color: #006644; background: rgba(0,135,90,.10); border-color: rgba(0,135,90,.32); }
[data-theme="dark"] .sampling-report-complete.is-complete { color: #73E2BA; }
.sampling-report-monster-body { display: grid; grid-template-columns: 3fr 2fr; }
.sampling-report-monster-body > section { min-width: 0; padding: var(--sp-4) var(--sp-5); }
.sampling-report-monster-body > section + section { border-left: 1px solid var(--border); }
.sampling-report-monster h4,
.sampling-report-media h4 { margin: 0 0 var(--sp-3); color: var(--primary); font-size: var(--fz-md); }
[data-theme="dark"] .sampling-report-monster h4,
[data-theme="dark"] .sampling-report-media h4 { color: var(--neon-blue); }
.sampling-report-data-table { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); }
.sampling-report-data-table th,
.sampling-report-data-table td {
    padding: 9px 10px;
    color: var(--text);
    background: transparent;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.sampling-report-data-table tr:nth-child(even) th,
.sampling-report-data-table tr:nth-child(even) td { background: var(--table-alt); }
.sampling-report-data-table th { width: 50%; color: var(--muted); font-weight: var(--fw-med); }
.sampling-report-data-table td:nth-child(2) { color: var(--text); font-weight: var(--fw-sb); }
.sampling-report-data-table td:last-child { width: 62px; color: var(--muted); font-size: var(--fz-xs); }
.sampling-report-position { margin-top: var(--sp-4); padding: var(--sp-3); background: rgba(0,135,90,.08); border-left: 4px solid var(--neon-emerald); }
.sampling-report-position.is-missing { background: rgba(222,53,11,.07); border-left-color: #dc2626; }
.sampling-report-position strong,
.sampling-report-position span,
.sampling-report-position small { display: block; }
.sampling-report-position span { margin-top: 3px; font-weight: var(--fw-b); }
.sampling-report-position small { margin-top: 2px; color: var(--muted); }
.sampling-report-validation { padding: var(--sp-4) var(--sp-5); background: var(--card-elev); border-top: 1px solid var(--border); }
.sampling-report-validation ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sampling-report-note,
.sampling-report-weather,
.sampling-report-bottles,
.sampling-report-media { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); }
.sampling-report-note { background: #FFF9E8; }
.sampling-report-note p { margin: 0; white-space: pre-wrap; }
[data-theme="dark"] .sampling-report-note { background: rgba(255,139,0,.09); }
.sampling-report-table-wrap { overflow-x: auto; }
.sampling-report-bottles table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fz-sm); }
.sampling-report-bottles th { padding: 8px 10px; color: var(--muted); background: var(--card-elev); text-align: left; font-size: var(--fz-xs); text-transform: uppercase; }
.sampling-report-bottles td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sampling-report-bottles td small { display: block; margin-top: 3px; color: var(--muted); }
.sampling-report-bottles code { display: inline-block; margin: 0 4px 4px 0; padding: 3px 6px; background: var(--card-elev); border: 1px solid var(--border); border-radius: var(--r-sm); }
.sampling-report-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.sampling-report-photo-grid a { overflow: hidden; color: var(--text); background: var(--card-elev); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; }
.sampling-report-photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg); }
.sampling-report-photo-grid span { display: block; padding: var(--sp-2) var(--sp-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fz-xs); }
.sampling-report-comments { padding: var(--sp-5) 36px; border-bottom: 1px solid var(--border); }
.sampling-report-comments.is-monster { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); border-bottom: 0; }
.sampling-comment-thread { display: grid; gap: var(--sp-2); }
.sampling-comment-thread article { padding: var(--sp-3); background: var(--card-elev); border-left: 3px solid var(--primary-2); }
.sampling-comment-thread article > div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.sampling-comment-thread article span { color: var(--primary-2); font-size: var(--fz-xs); font-weight: var(--fw-sb); text-transform: capitalize; }
.sampling-comment-thread article time { margin-left: auto; color: var(--muted); font-size: var(--fz-xs); }
.sampling-comment-thread article p { margin: 7px 0 0; white-space: pre-wrap; }
.sampling-comment-compose { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: end; margin-top: var(--sp-3); }
.sampling-comment-compose textarea { min-height: 58px; padding: 9px 10px; }
.sampling-report-audit ol { position: relative; margin: 0; padding: 0; list-style: none; }
.sampling-report-audit li { display: grid; grid-template-columns: 14px 1fr auto; gap: var(--sp-3); padding: 0 0 var(--sp-4); }
.sampling-report-audit li > span { width: 10px; height: 10px; margin-top: 5px; background: var(--primary-2); border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 0 0 1px var(--primary-2); }
.sampling-report-audit li > div { min-width: 0; }
.sampling-report-audit li strong,
.sampling-report-audit li p { margin: 0; overflow-wrap: anywhere; }
.sampling-report-audit li p,
.sampling-report-audit li time { color: var(--muted); font-size: var(--fz-xs); }
.sampling-report-audit li time { text-align: right; }
.sampling-report-monster-footer { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); color: var(--muted); background: var(--card-elev); font-size: var(--fz-xs); }
.sampling-report-signature { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(260px, 2fr); align-items: end; gap: var(--sp-6); }
.sampling-report-signature span,
.sampling-report-signature strong,
.sampling-report-signature small { display: block; }
.sampling-report-signature span,
.sampling-report-signature small { color: var(--muted); }
.sampling-report-signature strong { margin: 4px 0; color: var(--text); font-size: var(--fz-lg); }
.sampling-report-signature img { width: 100%; max-width: 420px; max-height: 180px; object-fit: contain; object-position: left bottom; border-bottom: 1px solid var(--text); }
.sampling-report-empty { color: var(--muted); font-style: italic; }
.sampling-report-loading,
.sampling-report-error { display: grid; min-height: 280px; place-items: center; align-content: center; gap: var(--sp-3); text-align: center; }
.sampling-report-loading span { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--primary-2); border-radius: 50%; animation: reportSpin .8s linear infinite; }
@keyframes reportSpin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
    .sampling-report-header { padding: var(--sp-5); flex-direction: column; }
    .sampling-report-status { width: 100%; }
    .sampling-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sampling-report-summary > div:nth-child(2) { border-right: 0; }
    .sampling-report-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .sampling-report-section { padding: var(--sp-5); }
    .sampling-report-fields,
    .sampling-report-fields.compact,
    .sampling-report-monster-body,
    .sampling-report-signature,
    .sampling-report-quality,
    .sampling-report-review { grid-template-columns: 1fr; }
    .sampling-report-validation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sampling-report-review-actions { flex-direction: row; }
    .sampling-report-monster-body > section + section { border-left: 0; border-top: 1px solid var(--border); }
    .sampling-report-field.is-wide { grid-column: auto; }
    .sampling-report-map { height: 300px; }
}

@media (max-width: 520px) {
    .sampling-report-view { scroll-margin-top: 140px; }
    .sampling-report-toolbar,
    .sampling-report-toolbar > div { flex-direction: column; align-items: stretch; }
    .sampling-report-toolbar .btn { width: 100%; }
    .sampling-report-header,
    .sampling-report-readonly,
    .sampling-report-section,
    .sampling-report-monster-head,
    .sampling-report-monster-body > section,
    .sampling-report-note,
    .sampling-report-weather,
    .sampling-report-bottles,
    .sampling-report-media,
    .sampling-report-validation,
    .sampling-report-comments,
    .sampling-report-comments.is-monster,
    .sampling-report-quality,
    .sampling-report-review { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .sampling-report-summary > div { padding: var(--sp-3); }
    .sampling-report-monster-head,
    .sampling-report-monster-footer { flex-direction: column; }
    .sampling-report-photo-grid { grid-template-columns: 1fr 1fr; }
    .sampling-report-readonly { align-items: flex-start; flex-direction: column; }
    .sampling-progress-copy { align-items: flex-start; flex-direction: column; gap: 2px; }
    .sampling-report-quality ul,
    .sampling-report-validation ul,
    .sampling-comment-compose { grid-template-columns: 1fr; }
    .sampling-report-review-actions { flex-direction: column; }
    .sampling-report-audit li { grid-template-columns: 12px 1fr; }
    .sampling-report-audit li time { grid-column: 2; text-align: left; }
}

@media print {
    body { background: #fff !important; color: #111 !important; }
    .topbar, .sidebar, .wm-subnav, .sampling-report-toolbar, .sampling-comment-compose,
    .sampling-report-review-actions, .app-footer,
    #sampling-list-view-wrap, #sampling-map-view, #sampling-archive-view { display: none !important; }
    .container, main, #tab-sampling, .wm-sub[data-wm-sub-panel="jobs"],
    .sampling-report-view, .sampling-report-shell { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    /* Scrollable panes would otherwise be rasterised with a scrollbar and clipped content */
    .table-wrap, .sampling-report-table-wrap, .map-sidebar,
    .sampling-report-view, .sampling-report-shell, .sampling-report-sheet { overflow: visible !important; max-height: none !important; }
    .sampling-report-bottles table { min-width: 0 !important; width: 100% !important; table-layout: fixed; font-size: 9pt; }
    .sampling-report-bottles th,
    .sampling-report-bottles td { overflow-wrap: anywhere; word-break: break-word; }
    .sampling-report-bottles code { white-space: normal; overflow-wrap: anywhere; }
    .sampling-report-bottles tr { break-inside: avoid; }
    .sampling-report-sheet { border: 0; box-shadow: none; }
    .sampling-report-header { padding: 18px 22px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sampling-report-readonly, .sampling-progress-track, .sampling-report-quality,
    .sampling-report-validation { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sampling-report-summary { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sampling-report-section { padding: 20px 22px; }
    .sampling-report-map { height: 260px; }
    .sampling-report-monster { break-inside: avoid; box-shadow: none; }
    .sampling-report-photo-grid img { max-height: 180px; }
}
/* ===== LOGIN SCREEN v2 — professional Fugro look (2026-09-27) ===== */
.login-screen {
    background: linear-gradient(160deg, #011E41 0%, #003C71 55%, #005a9e 100%);
}
.login-backdrop {
    background:
        radial-gradient(circle at 82% 18%, rgba(0,165,224,0.22) 0%, transparent 45%),
        radial-gradient(circle at 12% 88%, rgba(0,165,224,0.14) 0%, transparent 40%);
}
.login-card {
    width: min(480px, calc(100vw - 24px));
    padding: 52px 44px 44px;
    border: none;
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(1,30,65,0.45), 0 2px 8px rgba(0,0,0,0.18);
}
.login-logo {
    min-height: 112px;
    margin: 0 auto 18px;
}
.login-logo img {
    max-height: 112px;
    filter: drop-shadow(0 2px 6px rgba(1,30,65,0.18));
}
.login-title {
    font-size: 2.1rem;
    letter-spacing: -0.5px;
}
.login-subtitle {
    font-size: 1.02rem;
    margin-bottom: 32px;
    color: #6b7f95;
}
.login-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #1a1a1a;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.login-sso:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(1,30,65,0.10);
}
.login-sso:active {
    background: #eef2f7;
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.login-field label { font-size: 0.9rem; }
.login-field input {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 1.05rem;
}
.login-btn {
    padding: 15px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(1,30,65,0.22);
    transition: background .15s, box-shadow .15s, transform .1s;
}
.login-btn:hover {
    background: #003C71;
    box-shadow: 0 6px 18px rgba(1,30,65,0.28);
}
.login-btn:active { transform: translateY(1px); }
.login-error {
    font-weight: 500;
}
.login-footer {
    font-size: 0.85rem;
    color: #64748b;
}
@media (max-width: 520px) {
    .login-card { padding: 36px 24px 32px; }
    .login-logo { min-height: 88px; }
    .login-logo img { max-height: 88px; }
    .login-title { font-size: 1.7rem; }
}

/* ===== LOGIN SCREEN v2.1 — match house style, Fugro look (2026-09-27) ===== */
/* De rest van de site is een WITTE kaart op Fugro-navy; login doet nu precies hetzelfde. */
.login-screen {
    background:
        radial-gradient(circle at 80% 15%, rgba(0,165,224,0.20) 0%, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(0,165,224,0.12) 0%, transparent 40%),
        linear-gradient(160deg, #011E41 0%, #003C71 100%);
}
.login-backdrop { display: none; }
.login-card {
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--r-xl, 16px);
    box-shadow: 0 16px 48px rgba(0,10,25,0.45);
    padding: 44px 40px 36px;
}
.login-logo {
    min-height: 104px;
    margin: 0 auto 16px;
}
.login-logo img {
    max-height: 104px;
}
.login-title {
    color: #011E41;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}
.login-subtitle {
    color: #4A5C73;
    font-size: 0.95rem;
    margin-bottom: 28px;
}
.login-sso {
    border: 1.5px solid #B8C7D6;
    border-radius: var(--r-md, 8px);
    background: #ffffff;
    color: #0A1628;
    font-weight: 600;
    padding: 13px 18px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-sso:hover {
    background: #F5F9FD;
    border-color: #7A94B0;
    box-shadow: 0 2px 8px rgba(1,30,65,0.12);
}
.login-divider { color: #7A94B0; }
.login-divider::before, .login-divider::after { background: #B8C7D6; }
.login-field label {
    color: #011E41;
    font-weight: 600;
    font-size: 0.88rem;
}
.login-field input {
    background: #ffffff;
    border: 1px solid #B8C7D6;
    border-radius: var(--r-md, 8px);
    color: #0A1628;
    padding: 13px 14px;
    font-size: 1rem;
}
.login-field input:focus {
    border-color: #003C71;
    box-shadow: 0 0 0 3px rgba(0,60,113,0.12);
}
.login-btn {
    background: #011E41;
    border-radius: var(--r-md, 8px);
    font-weight: 700;
    padding: 14px;
    box-shadow: 0 3px 10px rgba(1,30,65,0.25);
}
.login-btn:hover { background: #003C71; box-shadow: 0 5px 14px rgba(1,30,65,0.3); }
.login-footer { color: #64748b; }
@media (max-width: 520px) {
    .login-card { padding: 32px 22px 28px; }
    .login-logo { min-height: 80px; }
    .login-logo img { max-height: 80px; }
    .login-title { font-size: 1.6rem; }
}

/* ===== LOGIN v2.2 — logo-badge: wit Fugro logo op Fugro-blauwe ronding (2026-09-27) ===== */
.login-logo {
    min-height: 0;
    margin: -96px auto 20px;   /* steekt boven de kaart uit */
    width: 148px;
    height: 148px;
    padding: 26px;
    background: linear-gradient(160deg, #003C71 0%, #005a9e 100%);
    border-radius: 34px;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 10px 28px rgba(1,30,65,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    filter: none;
}
.login-card { padding-top: 28px; margin-top: 96px; }
@media (max-width: 520px) {
    .login-logo { width: 116px; height: 116px; padding: 20px; margin-top: -80px; border-radius: 28px; }
    .login-card { margin-top: 80px; }
}


/* ===== LOGIN v2.3 - compact-fit: registratie past op 1 scherm (2026-09-28/29) ===== */
/* JS zet .compact op .login-screen als het registratieformulier zichtbaar is.     */
/* flex-start + auto-margins: centreert als er ruimte is, klapt niet bovenaan weg. */
.login-screen.compact {
    align-items: flex-start;
    padding: 16px 12px 24px;
}
.login-screen.compact .login-card {
    padding: 20px 30px 20px;
    margin: auto;              /* verticaal centreren indien ruimte; top-start indien te hoog */
    margin-top: 56px;          /* ruimte voor uitstekend logo */
}
.login-screen.compact .login-logo {
    width: 88px; height: 88px; padding: 15px;
    margin: -56px auto 14px;
    border-radius: 22px;
    border-width: 2px;
}
.login-screen.compact .login-title { font-size: 1.4rem; }
.login-screen.compact .login-subtitle { font-size: 0.82rem; margin-bottom: 12px; }
.login-screen.compact .login-sso { padding: 9px 14px; font-size: 0.9rem; gap: 9px; }
.login-screen.compact .login-sso svg { width: 16px; height: 16px; }
.login-screen.compact .login-divider { margin: 9px 0; }
.login-screen.compact .login-field { margin-bottom: 7px; }
.login-screen.compact .login-field label { font-size: 0.76rem; }
.login-screen.compact .login-field input { padding: 7px 12px; font-size: 0.88rem; border-radius: 6px; }
.login-screen.compact .login-btn { padding: 9px; font-size: 0.92rem; }
.login-screen.compact .login-error { font-size: 0.8rem; }
.login-screen.compact .login-footer { font-size: 0.76rem; margin-top: 7px; }
.login-screen.compact #register-form h3 { font-size: 0.92rem; margin-bottom: 5px !important; }
.login-screen.compact #register-form .muted { font-size: 0.76rem; margin-bottom: 7px !important; }
.login-screen.compact #register-form { margin-top: 8px !important; }

/* Safety-net: kleine viewports (hoogte < 700px) compacter */
@media (max-height: 700px) {
    .login-screen:not(.compact) { align-items: flex-start; padding: 16px 12px 24px; }
    .login-screen:not(.compact) .login-card { margin: auto; margin-top: 56px; padding-top: 24px; }
    .login-screen:not(.compact) .login-logo { width: 88px; height: 88px; padding: 15px; margin: -56px auto 14px; border-radius: 22px; }
}


/* ===== TOPBAR v2 - user-chip + consistente acties (2026-09-29) ===== */
.top-actions { align-items: center; }
.top-actions .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(0,60,113,0.06);
    border: 1px solid rgba(0,60,113,0.14);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.top-actions .user-chip svg { flex: 0 0 auto; opacity: 0.65; }
.top-actions .user-chip b { font-weight: 700; color: var(--primary, #003C71); }
[data-theme="dark"] .top-actions .user-chip {
    background: rgba(91,184,232,0.10);
    border-color: rgba(91,184,232,0.28);
}
.top-actions .user-chip:empty { display: none; }

/* theme-toggle zelfde vorm als uitloggen-knop, vierkant maar gelijke hoogte */
.top-actions .theme-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: var(--radius);
}
.top-actions .btn { padding: 8px 14px; height: 36px; display: inline-flex; align-items: center; }

/* ===== STATUS CARDS - subtiel accent i.p.v. felle border (2026-09-29) ===== */
.status-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--status-color, var(--neon-emerald));
    background: var(--status-bg, var(--card));
}
.status-card.status-ok {
    --status-color: #22c55e;
    --status-bg: #f0fdf4;
}
[data-theme="dark"] .status-card.status-ok { --status-bg: rgba(34,197,94,0.08); }


/* ===== RAIN RADAR POPUP (2026-09-29) ===== */
/* Modal met Rainviewer radar-animatie + Open-Meteo neerslag-tijdlijn       */
.rr-overlay {
    position: fixed; inset: 0;
    background: rgba(1, 30, 65, 0.72);
    z-index: 900;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.rr-overlay.open { display: flex; }
.rr-modal {
    background: var(--card, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,10,25,0.5);
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rr-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    gap: 12px;
}
.rr-head h3 { margin: 0; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.rr-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    margin-left: 2px;
    animation: rr-pulse 2s infinite;
}
@keyframes rr-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.rr-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 1.3rem; color: var(--muted);
    padding: 4px 8px; line-height: 1; border-radius: 6px;
}
.rr-close:hover { background: rgba(0,60,113,0.08); }
.rr-body { overflow: auto; padding: 14px 18px 16px; }
.rr-map-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #e2e8f0); }
#rr-map { height: 300px; width: 100%; background: #dfe8ef; }
.rr-map-ctrls {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.92);
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0,10,25,0.25);
    z-index: 800;
}
[data-theme="dark"] .rr-map-ctrls { background: rgba(15,31,56,0.92); }
.rr-play {
    width: 32px; height: 32px; flex: 0 0 auto;
    border: none; border-radius: 50%;
    background: #003C71; color: #fff;
    font-size: 0.8rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .1s;
}
.rr-play:hover { transform: scale(1.08); }
.rr-play:active { transform: scale(0.95); }
.rr-slider { flex: 1; accent-color: #003C71; cursor: pointer; }
.rr-time {
    flex: 0 0 auto;
    font-size: 0.78rem; font-weight: 600;
    color: var(--text);
    min-width: 74px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.rr-timeline { margin-top: 14px; }
.rr-timeline h4 { margin: 0 0 8px; font-size: 0.85rem; color: var(--text); }
.rr-bars {
    display: flex; align-items: flex-end; gap: 2px;
    height: 56px;
    padding: 6px 4px 0;
    border-radius: 8px;
    background: rgba(0,60,113,0.05);
}
[data-theme="dark"] .rr-bars { background: rgba(91,184,232,0.08); }
.rr-bar {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    transition: height .2s;
    position: relative;
    cursor: default;
}
.rr-bar.now { background: linear-gradient(180deg, #f59e0b, #d97706); }
.rr-bar:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%);
    background: #0F1F38; color: #fff;
    font-size: 0.68rem; font-weight: 600;
    padding: 3px 7px; border-radius: 5px;
    white-space: nowrap; z-index: 10;
}
.rr-axis {
    display: flex; justify-content: space-between;
    font-size: 0.68rem; color: var(--muted, #64748b);
    margin-top: 4px; padding: 0 4px;
    font-variant-numeric: tabular-nums;
}
.rr-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: var(--primary, #003C71);
    text-decoration: none; font-weight: 600;
    margin-top: 10px;
}
.rr-card-link:hover { text-decoration: underline; }
/* Dashboard trigger kaart */
.dash-radar-card { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.dash-radar-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(1,30,65,0.15); }
.rr-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.7);
    font-size: 0.85rem; color: var(--muted);
    z-index: 700;
}
[data-theme="dark"] .rr-loading { background: rgba(15,31,56,0.7); }
@media (max-width: 520px) {
    #rr-map { height: 240px; }
    .rr-modal { max-height: calc(100vh - 24px); }
}
/* RAIN RADAR tijdlijn v2: droog-indicator */
.rr-bar.dry {
    background: #cbd5e1 !important;
    opacity: 0.65;
}
[data-theme="dark"] .rr-bar.dry { background: #475569 !important; }
.rr-dry-banner {
    font-size: 0.8rem;
    font-weight: 600;
    color: #15a05a;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 6px;
    padding: 5px 10px;
    margin-bottom: 8px;
    display: inline-block;
}


/* ===== RAIN RADAR TABS + KNMI kaarten ===== */
.rr-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 18px 0;
}
.rr-tab {
    border: 1px solid var(--border, #B8C7D6);
    background: transparent;
    color: var(--muted, #4A5C73);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.rr-tab:hover { background: rgba(0,60,113,0.06); color: var(--text); }
.rr-tab.active {
    background: #011E41;
    border-color: #011E41;
    color: #fff;
}
[data-theme="dark"] .rr-tab.active { background: #5BB8E8; border-color: #5BB8E8; color: #0F1F38; }

/* KNMI-mode verbergt de radar-inhoud */
.rr-body.knmi-mode .rr-map-wrap,
.rr-body.knmi-mode .rr-timeline { display: none; }

/* KNMI panel */
.rr-knmi-panel { display: none; padding: 4px 0 8px; }
.rr-body.knmi-mode .rr-knmi-panel { display: block; }

.rr-knmi-warnings {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rr-knmi-fig {
    margin: 0;
    flex: 1 1 180px;
    max-width: 220px;
    text-align: center;
}
.rr-knmi-fig img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border, #B8C7D6);
    box-shadow: 0 2px 8px rgba(1,30,65,0.10);
    background: #F5F9FD;
}
.rr-knmi-fig figcaption {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 5px;
}
.rr-knmi-weermap { margin-top: 14px; }
.rr-knmi-weermap h4 { margin: 0 0 8px; font-size: 0.85rem; color: var(--text); }
.rr-knmi-weermap img {
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--border, #B8C7D6);
    box-shadow: 0 2px 8px rgba(1,30,65,0.10);
    background: #F5F9FD;
}

/* ===== ACTUELE KAART TAB (KNMI weerkaart live GIF) ===== */
.rr-body.actueel-mode .rr-map-wrap,
.rr-body.actueel-mode .rr-timeline { display: none; }
.rr-actueel-panel { display: none; padding: 4px 0 8px; }
.rr-body.actueel-mode .rr-actueel-panel { display: block; }
.rr-actueel-main h4 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.rr-actueel-main img {
    width: 100%;
    max-width: 460px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid var(--border, #B8C7D6);
    box-shadow: 0 2px 10px rgba(1,30,65,0.12);
    background: #F5F9FD;
}
.rr-actueel-main { text-align: center; }
.rr-actueel-main .muted { text-align: left; }

/* ===== Pagina's en menu's: strak, met soepele uitklapbeweging ===== */

/* Titelblokken boven de tabbladen zijn overbodig: de menubalk toont al waar je bent,
   zo begint elke pagina direct met de inhoud. */
.tab > .hero { display: none; }

@keyframes ui-reveal { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes ui-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Een tabblad bouwt bij openen gestaffeld op. */
.tab.active:not(.login-screen) > * { animation: ui-reveal .5s cubic-bezier(.2, .8, .2, 1) both; }
.tab.active:not(.login-screen) > :nth-child(2) { animation-delay: .04s; }
.tab.active:not(.login-screen) > :nth-child(3) { animation-delay: .08s; }
.tab.active:not(.login-screen) > :nth-child(4) { animation-delay: .12s; }
.tab.active:not(.login-screen) > :nth-child(5) { animation-delay: .16s; }
.tab.active:not(.login-screen) > :nth-child(n+6) { animation-delay: .2s; }

/* Subtabbladen van Watermonsters en de opbouw van het live overzicht. */
.wm-sub:not([hidden]) { animation: ui-reveal .45s cubic-bezier(.2, .8, .2, 1) both; }
.wm-sub .sov > * { animation: ui-reveal .55s cubic-bezier(.2, .8, .2, 1) both; }
.wm-sub .sov > :nth-child(2) { animation-delay: .07s; }
.wm-sub .sov > :nth-child(3) { animation-delay: .14s; }

/* Uitklapmenu's in de menubalk. */
.nav-group.open .nav-dropdown { animation: ui-drop .18s ease-out both; transform-origin: top left; }
.nav-dropdown .nav-sub { transition: background .15s ease, transform .15s ease; }
.nav-dropdown .nav-sub:hover { transform: translateX(3px); }

/* Klikbare kaarten komen subtiel omhoog. */
.card[onclick], .card[style*="cursor:pointer"] { transition: transform .18s ease, box-shadow .18s ease; }
.card[onclick]:hover, .card[style*="cursor:pointer"]:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, .10); }

@media (prefers-reduced-motion: reduce) {
    .tab.active > *, .wm-sub, .wm-sub .sov > *, .nav-group.open .nav-dropdown { animation: none !important; }
    .nav-dropdown .nav-sub:hover, .card[onclick]:hover, .card[style*="cursor:pointer"]:hover { transform: none !important; }
}