/* ============================================================
   Werkbon Dashboard — app.css
   Extracted + extended styles for sidebar redesign
   ============================================================ */

/* === Design Tokens === */
:root {
    --color-primary: #1a6aa3;
    --color-primary-hover: #145a8a;
    --color-brand: #1a6aa3;
    --color-accent: #00c130;
    --color-accent-hover: #00a328;
    --color-success: #00c130;
    --color-warning: #ef6c00;
    --color-danger: #dc3545;
    --color-text: #333;
    --color-text-secondary: #888;
    --color-text-muted: #999;
    --color-text-table-header: #666;
    --color-border: #ddd;
    --color-border-light: #eee;
    --color-border-faint: #f0f0f0;
    --color-bg: #f5f5f5;
    --color-card: #fff;
    --color-card-alt: #fafafa;
    --color-card-highlight: #f8f9fa;
    --color-table-header-bg: #f9f9f9;
    --color-badge-info-bg: #e3f2fd;
    --color-badge-info-text: #1a6aa3;
    --color-badge-success-bg: #e8f5e9;
    --color-badge-success-text: #2e7d32;
    --color-badge-warning-bg: #fff3e0;
    --color-badge-warning-text: #ef6c00;
    --color-badge-danger-bg: #ffebee;
    --color-badge-danger-text: #c62828;
    --color-badge-neutral-bg: #f5f5f5;
    --color-badge-neutral-text: #666;
    --color-teal: #0097a7;
    --color-teal-hover: #00838f;
    --color-teal-bg: #e0f7fa;
    --color-teal-border: #b2ebf2;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow: none;
    --shadow-lg: none;
    --shadow-dropdown: 0 4px 12px rgba(0,0,0,.12);
    --shadow-drawer: -8px 0 28px rgba(0,0,0,.12);
    --color-backdrop: rgba(20,30,45,0.42);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    /* Premium design tokens */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --glow-info: 0 0 8px rgba(26,106,163,0.15);
    --glow-success: 0 0 8px rgba(0,193,48,0.15);
    --glow-warning: 0 0 8px rgba(239,108,0,0.15);
    --glow-danger: 0 0 8px rgba(220,53,69,0.15);
    --glow-teal: 0 0 8px rgba(0,151,167,0.15);
    --gradient-info: linear-gradient(135deg, #e8f0fe, #dce8f8);
    --gradient-success: linear-gradient(135deg, #e8f5e9, #d5edd8);
    --gradient-warning: linear-gradient(135deg, #fff3e0, #ffe8cc);
    --gradient-danger: linear-gradient(135deg, #ffebee, #fdd);
    --gradient-teal: linear-gradient(135deg, #e0f7fa, #d0eff3);
}

/* Customer media panel: contact/serviceplan detail */
.cm-panel {
    margin-bottom: 16px;
}

.cm-panel .rrb-disclosure__content.cm-disclosure-content {
    padding-top: 14px;
}

.cm-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 700;
}

.cm-open-lightbox,
.cm-nav-btn,
.cm-filter-btn {
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
    border-radius: 8px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.cm-open-lightbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.cm-open-lightbox:hover,
.cm-filter-btn:hover,
.cm-nav-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.cm-summary-strip {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.cm-summary-thumb {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--surface-muted);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}

.cm-summary-img,
.cm-rail-img,
.cm-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--surface-muted);
}

.cm-media-placeholder,
.cm-preview-empty,
.cm-empty,
.cm-empty-inline {
    display: grid;
    place-items: center;
    min-height: 74px;
    padding: 12px;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-align: center;
}

.cm-more,
.cm-video-dot {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.cm-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--surface-muted);
}

.cm-search {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.cm-search input {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 7px 10px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 13px;
}

.cm-filter-group {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
}

.cm-filter-btn {
    min-height: 30px;
    padding: 4px 8px;
    border-color: transparent;
    background: transparent;
    color: var(--color-text-secondary);
}

.cm-filter-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.cm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 14px;
    margin-top: 14px;
}

.cm-preview {
    min-width: 0;
}

.cm-preview-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 260px;
    max-height: 560px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #111827;
    padding: 0;
    cursor: zoom-in;
}

.cm-preview-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.cm-nav-btn {
    min-width: 40px;
    padding: 6px 12px;
    font-size: 20px;
    line-height: 1;
}

.cm-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cm-side {
    display: grid;
    grid-template-rows: auto minmax(160px, 1fr);
    gap: 10px;
    min-width: 0;
}

.cm-context {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 12px;
}

.cm-context-top {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.cm-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
}

.cm-pill.is-work {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--color-primary);
}

.cm-pill.is-service {
    background: var(--success-50);
    border-color: var(--success-100);
    color: var(--success-700);
}

.cm-pill.is-note {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #6b21a8;
}

.cm-pill.is-media {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.cm-pill.is-closed {
    background: var(--surface-muted);
    color: var(--color-text-secondary);
}

.cm-context h4 {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.3;
}

.cm-context p {
    margin: 0 0 10px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.cm-meta {
    display: grid;
    gap: 7px;
    margin: 0;
    font-size: 12px;
}

.cm-meta div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
}

.cm-meta dt {
    color: var(--color-text-secondary);
    font-weight: 700;
}

.cm-meta dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.cm-rail {
    display: grid;
    align-content: start;
    gap: 8px;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 2px;
}

.cm-rail-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 74px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    background: var(--color-card);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.cm-rail-item.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--primary-50);
}

.cm-rail-thumb {
    position: relative;
    width: 76px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-muted);
}

.cm-rail-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cm-rail-copy strong,
.cm-rail-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-rail-copy strong {
    font-size: 13px;
    line-height: 1.3;
}

.cm-rail-copy span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.cm-skeleton-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cm-skeleton-row span {
    width: 96px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--surface-muted), var(--color-border-light), var(--surface-muted));
    background-size: 200% 100%;
    animation: cmPulse 1.1s linear infinite;
}

@keyframes cmPulse {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (max-width: 1024px) {
    .cm-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .cm-filter-group {
        overflow-x: auto;
        justify-content: flex-start;
    }
    .cm-grid {
        grid-template-columns: 1fr;
    }
    .cm-side {
        grid-template-rows: auto auto;
    }
    .cm-rail {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 2px 0 4px;
    }
    .cm-rail-item {
        grid-template-columns: 96px;
        grid-template-rows: auto auto;
        flex: 0 0 118px;
        min-height: 0;
    }
    .cm-rail-thumb {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .cm-summary-thumb {
        flex-basis: 84px;
        width: 84px;
    }
    .cm-preview-media {
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }
    .cm-preview-actions {
        justify-content: space-between;
    }
    .cm-open-lightbox {
        flex: 1 1 auto;
    }
    .cm-nav-btn {
        min-width: 48px;
        min-height: 44px;
    }
    .cm-meta div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* === Reset === */
html { overflow-x: hidden; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: radial-gradient(ellipse at top left, var(--primary-50), var(--bg) 60%); min-height: 100vh; color: var(--color-text); -webkit-text-size-adjust: 100%; }
body.sidebar-open { overflow: hidden; }

/* === Buttons === */
/* RRB-EXCEPTION: werkbon keeps a LOCAL geometry re-skin of the shared .btn primitive
   (min-height/padding/radius/font) for its slightly larger, rounder buttons. It must NOT
   set background/color/border — those belong to the modifier classes (.btn-primary,
   .btn-outline, .btn-danger, and shared .btn-ghost/.btn-accent/.btn-outline-danger).
   The old `body .btn` (specificity 0,1,1, loaded last) clobbered every (0,1,0) color
   modifier, so all buttons rendered primary-blue at rest and only recoloured on :hover.
   Scope: werkbon-dashboard.css only; shared rrb-primitives.css .btn stays canonical. */
.btn {
    min-height: 36px;
    padding: 8px 16px;
    border-radius: calc(var(--r-btn) + 2px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: none; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { background: var(--color-primary); color: var(--surface); border-color: transparent; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-success { background: var(--accent); color: var(--surface); border-color: transparent; }
.btn-success:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger { background: var(--color-danger); color: var(--surface); border-color: transparent; }
.btn-danger:hover { background: var(--danger-600); border-color: var(--danger-600); }
.btn-outline { background: color-mix(in srgb, var(--surface) 84%, white); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border)); color: var(--color-primary); box-shadow: none; }
.btn-outline:hover { background: var(--primary-50); border-color: var(--primary-dark); color: var(--primary-dark); box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, var(--e1); }
.btn-sm { min-height: 30px; padding: 6px 11px; font-size: 12px; touch-action: manipulation; }

/* === Badges === */
body .badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-btn); font-size: 12px; font-weight: 500; white-space: nowrap; margin-right: 3px; margin-bottom: 2px; }
.badge-info { background: var(--primary-50); color: var(--primary); }
.badge-werkbon { background: var(--primary-50); color: var(--primary); }
.badge-service { background: var(--gray-100); color: var(--chart-4); }
.badge-success { background: var(--accent-50); color: var(--accent-dark); }
.badge-warning { background: var(--warning-50); color: var(--warning); }
.badge-partial { background: var(--warning-50); color: var(--warning); }
.badge-failed, .badge-danger { background: var(--danger-50); color: var(--danger-dark); }
.badge-neutral { background: var(--surface-muted); color: var(--text-muted); }
/* RRB-EXCEPTION: purple is intentionally reserved for note update attention. */
.badge-update { background: #f3e8ff; color: #7e22ce; }

/* Badge — Plan types */
.badge-plan-basic { background: var(--primary-50); color: var(--primary); }
.badge-plan-plus { background: var(--accent-50); color: var(--accent-dark); }
.badge-plan-solid { background: var(--warning-50); color: var(--warning); }
.badge-plan-custom { background: var(--surface-muted); color: var(--chart-6); }

/* Badge — System types */
.badge-sys-dahua { background: var(--danger-50); color: var(--danger-dark); }
.badge-sys-milestone { background: var(--primary-50); color: var(--primary); }
.badge-sys-ajax { background: var(--gray-900); color: var(--surface); }
.badge-sys-paxton { background: var(--accent-50); color: var(--accent-dark); }
.badge-sys-nxwitness { background: var(--gray-100); color: var(--chart-4); }
.badge-sys-axis { background: var(--warning-50); color: var(--chart-7); }
.badge-sys-2n { background: var(--accent-50); color: var(--chart-6); }
.badge-sys-unifi { background: var(--primary-50); color: var(--chart-6); }
.badge-sys-default { background: var(--surface-muted); color: var(--text-muted); }

/* === Table containers === */
.table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
}
.table-header {
    padding: 12px 16px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}
.table-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.empty-state { padding: 24px; text-align: center; color: var(--color-text-secondary); font-size: 14px; }

/* === Recent / inzendingen === */
.inz-filterbar,
.inz-table-shell,
.inz-table,
.inz-row,
.inz-detail-row,
.inz-detail-cell,
.inz-detail-card,
.inz-detail-head,
.inz-detail-steps,
.inz-detail-actions,
.inz-detail-fields,
.inz-detail-field,
.inz-detail-label,
.inz-detail-value {
    min-width: 0;
}
.inz-cell-client,
.inz-cell-employee,
.inz-cell-files,
.inz-cell-status,
.inz-cell-date {
    min-width: 0;
    overflow-wrap: anywhere;
}
.inz-detail-label {
    padding: 4px 8px;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-secondary);
    vertical-align: top;
}
.inz-detail-value {
    padding: 4px 8px;
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* === Modal === */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal {
    background: var(--surface); border-radius: var(--r-card);
    padding: 24px; width: 100%;
}
.modal-overlay,
.modal-overlay * {
    box-sizing: border-box;
}
.modal-overlay > * {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}
.dashboard-modal-overlay {
    z-index: 1000;
}
.dashboard-modal-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}
.dashboard-modal-panel > * {
    min-width: 0;
}
.dashboard-modal-head {
    min-width: 0;
}
.dashboard-modal-title {
    min-width: 0;
}
.dashboard-modal-title h3,
.dashboard-modal-title p,
.dashboard-modal-panel h3,
.dashboard-modal-panel h4,
.dashboard-modal-panel p {
    overflow-wrap: anywhere;
}
.dashboard-modal-close {
    flex: 0 0 auto;
}
.dashboard-modal-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
}
.dashboard-modal-checkgrid {
    min-width: 0;
}
.dashboard-modal-check {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* RRB-EXCEPTION: serviceplan integration modals render provider-specific rows in JS;
   keep the dense row helper scoped until this becomes a shared modal-list primitive. */
.sp-modal-list,
.sp-modal-list-row,
.sp-modal-list-row-main,
.sp-modal-list-row-actions {
    min-width: 0;
}
.sp-modal-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sp-modal-list-row-main {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.sp-modal-list-row-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.sp-modal-muted {
    overflow-wrap: anywhere;
}
.sp-modal-check-row {
    grid-template-columns: auto minmax(0, 1fr);
}

@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    }
    .modal-overlay > * {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-x: hidden !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }
    .modal-overlay .detail-grid-2col {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .dashboard-modal-overlay {
        align-items: stretch !important;
        padding: 0 !important;
    }
    .dashboard-modal-overlay > .dashboard-modal-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding: 14px !important;
    }
    .dashboard-modal-head {
        position: sticky;
        top: -14px;
        z-index: 2;
        align-items: flex-start !important;
        margin: -14px -14px 12px !important;
        padding: 14px;
        background: var(--color-card);
        border-bottom: 1px solid var(--color-border-light);
    }
    .dashboard-modal-head h3 {
        font-size: 18px;
        line-height: 1.25;
    }
    .dashboard-modal-head p {
        font-size: 12px;
        line-height: 1.45;
    }
    .dashboard-modal-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
    .dashboard-modal-panel .form-group {
        min-width: 0;
        margin-bottom: 10px;
    }
    .dashboard-modal-panel .form-input {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }
    .dashboard-modal-panel textarea.form-input {
        min-height: 96px;
    }
    .dashboard-modal-checkgrid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px !important;
    }
    .dashboard-modal-check {
        align-items: center;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius);
        background: var(--surface-muted);
        line-height: 1.35;
    }
    .dashboard-modal-actions {
        position: sticky;
        bottom: -14px;
        z-index: 2;
        margin: 16px -14px -14px !important;
        padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px)) !important;
        background: var(--color-card);
        border-top: 1px solid var(--color-border-light);
    }
    .dashboard-modal-actions .btn {
        flex: 1 1 120px;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: normal;
    }
    .dashboard-modal-actions .btn-danger {
        order: 3;
        flex-basis: 100%;
        margin-right: 0 !important;
    }
    .sp-modal-list-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        align-items: start !important;
        padding-block: 10px !important;
    }
    .sp-modal-list-row-main {
        width: 100%;
    }
    .sp-modal-list-row-actions {
        justify-content: stretch;
        width: 100%;
    }
    .sp-modal-list-row-actions .btn,
    .sp-modal-list-row > .btn {
        flex: 1 1 120px;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: normal;
    }
    .sp-modal-list-row > .btn {
        width: 100%;
    }
    .sp-modal-check-row {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .sp-modal-check-row > input {
        grid-column: 1;
        align-self: center;
    }
    .sp-modal-check-row > .sp-modal-list-row-main,
    .sp-modal-check-row > .sp-modal-muted,
    .sp-modal-check-row > .badge {
        grid-column: 2;
        justify-self: start;
    }
}

/* Bottom sheet */
.bottom-sheet-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 1100;
    opacity: 0; transition: opacity 0.2s;
}
.bottom-sheet-backdrop.visible { opacity: 1; }
.bottom-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-radius: 14px 14px 0 0;
    padding: 16px 16px 24px;
    z-index: 1101;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh; overflow-y: auto;
}
.bottom-sheet.visible { transform: translateY(0); }
.bottom-sheet .sheet-handle {
    width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 14px;
}
.bottom-sheet .sheet-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.bottom-sheet .sheet-subtitle { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 14px; }
.bottom-sheet .sheet-option {
    padding: 14px 16px; background: var(--bg); border-radius: 8px;
    border: 1px solid var(--border); margin-bottom: 6px;
    font-size: 14px; text-align: center; cursor: pointer;
    min-height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 500;
}
.bottom-sheet .sheet-option:active { background: var(--primary-50); }
.bottom-sheet .sheet-cancel {
    padding: 12px; text-align: center; color: var(--color-danger);
    font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 8px;
}

/* === Tables === */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 14px; background: var(--surface-muted); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-subtle); font-size: 12px; text-transform: uppercase; white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }

/* === Forms === */
/* .form-input/.form-select/.form-textarea owned by ops/shared/css/rrb-primitives.css.
   Drift rule: never redefine in project app.css. Phase 2 migration PR-K removed
   override here so primitive (with min-height 36/44px touch target) wins. */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-xs); }

/* === Utility === */
.text-secondary { color: var(--color-text-secondary); font-size: 13px; }
.text-sm { font-size: 12px; }
.text-muted { color: var(--color-text-muted); font-size: 12px; }
.text-danger { color: var(--color-danger); font-weight: 700; }
.error { color: var(--color-danger); font-size: 13px; }
.empty { padding: 40px var(--sp-lg); text-align: center; color: var(--color-text-muted); }
/* Tier-2 mobile density: trim empty-state vertical padding on phones */
@media (max-width: 480px) {
    .empty { padding: var(--sp-xl) var(--sp-lg); }
    .empty-state { padding: var(--sp-lg); }
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
[x-cloak] { display: none !important; }

/* === Pagination === */
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--sp-sm); padding: var(--sp-lg); flex-wrap: wrap; }
.pagination button { padding: var(--sp-sm) 14px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-btn); cursor: pointer; font-size: 13px; min-height: 36px; }
.pagination button:hover { background: var(--border); }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* ============================================================
   NEW — Sidebar Layout
   ============================================================ */

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

.sidebar {
    width: 220px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-700) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    padding: 16px;
    transition: width 0.2s ease;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}
.sidebar.collapsed { width: 56px; padding: 12px 0; align-items: center; }

.sidebar-logo {
    font-weight: 700; font-size: 16px; padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: space-between;
}
.sidebar-logo .brand-green { color: var(--color-accent); }

.sidebar-toggle { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 18px; padding: 0; }
.sidebar-toggle:hover { color: white; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
    padding: 10px 12px; border-radius: 6px; display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.8); text-decoration: none; cursor: pointer; font-size: 14px; transition: background 0.15s;
}
.nav-item:hover { background: rgba(255,255,255,0.1); text-decoration: none; color: white; }
.nav-item.active { background: rgba(255,255,255,0.2); font-weight: 600; color: white; box-shadow: inset 3px 0 0 var(--color-accent); border-radius: 0 6px 6px 0; }

.nav-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.nav-label { white-space: nowrap; }

.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-logo span:not(.sidebar-toggle),
.sidebar.collapsed .sidebar-user-name { display: none; }

.sidebar.collapsed .nav-item { width: 36px; height: 36px; padding: 0; justify-content: center; }
.sidebar.collapsed .sidebar-logo { justify-content: center; }

.nav-entry { display: contents; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-toggle { cursor: pointer; }
.nav-group-toggle .nav-label { margin-right: auto; }
.nav-group-alert { margin-left: 4px; font-size: 11px; padding: 2px 6px; }
.nav-group-caret {
    margin-left: 6px; display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease; opacity: 0.7;
}
.nav-group-caret.open { transform: rotate(90deg); }
.sidebar.collapsed .nav-group-alert {
    position: absolute; top: 2px; right: 2px; transform: translate(25%, -25%);
    font-size: 9px; padding: 1px 4px; min-width: 14px; line-height: 1;
}
.sidebar.collapsed .nav-group-toggle { position: relative; }
.nav-group-children { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; position: relative; }
.nav-group-children::before {
    content: ""; position: absolute; left: 18px; top: 4px; bottom: 4px;
    width: 1px; background: rgba(255,255,255,0.12);
}
.nav-subitem { padding: 7px 10px 7px 14px; font-size: 13px; opacity: 0.85; }
.nav-subitem .nav-icon svg { width: 14px; height: 14px; }
.nav-subitem.active { opacity: 1; }
.sidebar.collapsed .nav-group-caret { display: none; }
.sidebar.collapsed .nav-group-children { padding-left: 0; }
.sidebar.collapsed .nav-group-children::before { display: none; }
.sidebar.collapsed .nav-subitem { padding: 0; }

.sidebar-user {
    padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 8px;
    font-size: 12px; opacity: 0.7; display: flex; align-items: center; gap: 10px;
    min-width: 0;
}

.sidebar-avatar {
    width: 28px; height: 28px; background: rgba(255,255,255,0.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.sidebar-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   NEW — Main Content (layout in rrb-responsive.css)
   ============================================================ */

body .main-content { background: transparent; }
.page-title { font-size: 20px; font-weight: 700; color: var(--color-primary); margin: 0; }

/* ============================================================
   NEW — Mobile Top Bar
   ============================================================ */

.mobile-topbar {
    background: var(--color-primary);
    color: white;
    gap: 12px;
}

.mobile-topbar .hamburger {
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.mobile-topbar .hamburger:active { background: rgba(255,255,255,0.15); }

.mobile-topbar-title { font-weight: 700; font-size: 15px; }
.mobile-page-indicator { font-size: 11px; opacity: 0.7; font-weight: 400; }

/* Sidebar backdrop — always in DOM, animated via opacity */
.sidebar-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 99;
    pointer-events: none;
    transition: background 0.3s ease;
}
.sidebar-backdrop.active {
    background: rgba(0,0,0,0.5);
    pointer-events: auto;
}

/* Mobile sidebar close button */
.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-close:active { background: rgba(255,255,255,0.15); }

/* ============================================================
   NEW — Skeleton Loading
   ============================================================ */

body .skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-btn);
}
.skeleton-card { height: 80px; border-radius: var(--r-card); }
.skeleton-chart { height: 200px; border-radius: var(--r-card); }
.skeleton-row { height: 44px; margin-bottom: 8px; border-radius: var(--r-btn); }
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* === Staggered Entrance === */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.stagger-item {
    animation: slideUp 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 80ms);
}
.stagger-row {
    animation: slideUp 0.35s ease both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

/* === Hover-Reveal Actions === */
.row-action {
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
tr:hover .row-action { opacity: 1; }

@media (hover: none) {
    .row-action { opacity: 1; }
}

/* ============================================================
   NEW — Grids (Stats + Charts) — layout in rrb-responsive.css
   ============================================================ */

.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; min-width: 0; overflow: hidden; }
.chart-card h4 { font-size: 13px; font-weight: 600; color: var(--gray-600); margin: 0 0 12px; }

.stat-card { background: var(--surface); border: 1px solid transparent; border-radius: var(--r-card); padding: 16px; text-align: center; }
.stat-card-info { background: var(--primary-50); }
.stat-card-success { background: var(--accent-50); }
.stat-card-warning { background: var(--warning-50); }
.stat-card-danger { background: var(--danger-50); }
.stat-card-teal { background: var(--surface-muted); }
.stat-card-info, .stat-card-success, .stat-card-warning, .stat-card-danger, .stat-card-teal {
    border: 1px solid transparent;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.stat-card-info:hover, .stat-card-success:hover, .stat-card-warning:hover, .stat-card-danger:hover, .stat-card-teal:hover {
    transform: translateY(-2px);
    border-color: rgba(0,0,0,0.06);
}
.stat-value { font-size: 28px; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }

/* ---- Overzicht page ---- */
.ovz-stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.ovz-stat-label { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.ovz-stats { grid-template-columns: repeat(4, 1fr); }
.ovz-clients-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }
.ovz-clients-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.ovz-clients-header h4 { margin: 0; color: var(--gray-600); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ovz-clients-header .form-input { max-width: 300px; }
.ovz-materials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

/* Overzicht desktop layout — center content, cap width for readability */
#page-overzicht { max-width: 1100px; margin: 0 auto; }

/* Overzicht tablet */
@media (max-width: 1024px) {
    .ovz-stats { grid-template-columns: repeat(3, 1fr); }
    .ovz-materials-grid { grid-template-columns: 1fr; }
}

/* Overzicht desktop-only charts grid — custom column ratio */
@media (min-width: 768px) {
    #page-overzicht .charts-grid { grid-template-columns: minmax(280px, 380px) 1fr; }
}

/* Overzicht submission cards */
.ovz-subs-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }
.ovz-subs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ovz-subs-header h4 { margin: 0; color: var(--color-primary); font-size: 14px; font-weight: 600; }
.ovz-sub-card { border: 1px solid var(--border); border-radius: var(--r-btn); margin-bottom: 8px; overflow: hidden; transition: border-color 0.15s; }
.ovz-sub-card.expanded { border-color: var(--color-primary); }
.ovz-sub-header { min-height: 52px; padding: 10px 12px; gap: 8px; }
.ovz-sub-meta { gap: 2px; min-width: 0; }
.ovz-sub-client { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovz-sub-info { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.ovz-sub-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ovz-sub-chevron { color: var(--color-text-secondary); }
.ovz-sub-body { padding: 10px 12px; }
.ovz-fields-table { width: 100%; border-collapse: collapse; }
.ovz-field-label { padding: 3px 8px; font-weight: 600; font-size: 11px; color: var(--color-text-secondary); vertical-align: top; white-space: nowrap; }
.ovz-field-value { padding: 3px 8px; font-size: 12px; white-space: pre-wrap; }

/* Compact table — stays table layout on all screens, never transforms to cards */
.ovz-compact-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.ovz-compact-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); padding: 6px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.3px; }
.ovz-compact-table th:not(:first-child) { text-align: center; }
.ovz-compact-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.ovz-compact-table td:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 45%; }
.ovz-compact-table td:not(:first-child) { text-align: center; white-space: nowrap; }
.ovz-compact-table tr:last-child td { border-bottom: none; }
.ovz-compact-table tr:hover { background: var(--surface-muted); }

/* Product bars — responsive wrapper */
.ovz-bar-item { margin-bottom: 8px; }
.ovz-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 2px; }
.ovz-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ovz-bar-count { font-weight: 600; flex-shrink: 0; margin-left: 8px; }
.ovz-bar-track { background: var(--border); border-radius: 3px; height: 8px; }
.ovz-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

/* === Inline action buttons (small, inside tables/cards) === */
.btn-action { background: transparent; border: 1px solid var(--border); color: var(--color-text); padding: 4px 10px; font-size: 12px; border-radius: var(--r-btn); cursor: pointer; white-space: nowrap; transition: background 0.15s; display: inline-flex; align-items: center; gap: 4px; }
.btn-action:hover { background: var(--bg); }

/* === Info bar — device detail strip inside recorder/server cards === */
.info-bar { padding: 10px 16px; background: var(--surface-muted); font-size: 13px; color: var(--color-text-secondary); display: flex; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.info-bar strong { color: var(--color-text); }

/* Device card chevron — desktop */
.device-card .card-chevron {
    font-size: 16px;
    color: var(--color-primary);
    transition: transform 0.2s;
    cursor: pointer;
}
.device-card.expanded .card-chevron {
    transform: rotate(90deg);
}

/* === Fase monitoring badges === */
.badge-fase-1 { background: var(--warning-50); color: var(--warning-900); border: 1px solid var(--warning-200); font-size: 11px; }
.badge-fase-2-ok { background: var(--accent-50); color: var(--accent-dark); border: 1px solid var(--accent-200); font-size: 11px; }
.badge-fase-2-fail { background: var(--danger-50); color: var(--danger-dark); border: 1px solid var(--danger-300); font-size: 11px; }

/* ============================================================
   System Sections — Unified (Tab Strip + Status Matrix)
   ============================================================ */

/* Tab strip — fixed at top of scrollable area */
/* Monitoring pane-switcher: afgeronde RRB-pillen, wrappen i.p.v. off-screen scrollen. */
.sys-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.sys-tab-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sys-tab-item:hover { color: var(--text); border-color: var(--text-subtle); }
.sys-tab-item.active {
    background: var(--primary-50);
    border-color: var(--primary);
    color: var(--primary);
}
.sys-tab-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sys-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.sys-tab-dot.is-ok { background: var(--accent); }
.sys-tab-dot.is-bad { background: var(--danger); }
.sys-tab-dot.is-none { background: var(--text-subtle); }
/* Geconsolideerde Monitoring-sectie: panes (één tegelijk zichtbaar, fade) + status-stippen. */
.mon-pane { display: none; }
.mon-pane.is-active { display: block; animation: monPaneFade 180ms var(--ease, ease); }
@keyframes monPaneFade { from { opacity: 0; } to { opacity: 1; } }
.mon-pane-stats { font-size: var(--fs-xs); color: var(--text-muted); padding: 10px 14px 0; }
.sys-sum-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sys-sum-dot.is-ok { background: var(--accent); }
.sys-sum-dot.is-bad { background: var(--danger); }

/* Summary line (desktop only) */
.sys-summary-line {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--color-text-secondary);
}
.sys-summary-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sys-summary-stat .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.sys-summary-stat strong { color: var(--color-text); }

/* Section container */
.sys-section {
    margin-bottom: 8px;
}

.sys-section .rrb-disclosure__content.sys-section-content {
    padding: 0;
}

.sys-section-header svg {
    width: 16px;
    height: 16px;
    color: currentColor;
    flex-shrink: 0;
}

.sys-section-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sys-section-stats {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.sys-section-stats strong { font-weight: 700; }
.sys-status-ok,
.sys-status-bad,
.sys-status-warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sys-status-ok::before,
.sys-status-bad::before,
.sys-status-warn::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.sys-status-ok   { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-800); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.sys-status-warn { background: color-mix(in srgb, var(--warning) 8%, transparent); color: var(--warning-800); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.sys-status-bad  { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger-700); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }

.sys-section-body {
    background: var(--surface);
}

/* Serviceplan detail cards: one collapsible card pattern for all detail panels. */
.detail-grid-2col {
    align-items: stretch;
}
.sp-detail-card {
    min-width: 0;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.detail-grid-2col > .sp-detail-card {
    align-self: stretch;
    margin-bottom: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}
.detail-grid-2col > .sp-detail-card[data-open="true"] > .sp-detail-card__body {
    flex: 1 1 auto;
}
.detail-grid-2col > .sp-detail-card[data-open="true"] > .sp-detail-card__body > .rrb-disclosure__clip,
.detail-grid-2col > .sp-detail-card[data-open="true"] > .sp-detail-card__body > .rrb-disclosure__clip > .sp-detail-card__content {
    min-height: 100%;
}
.sp-detail-card--danger {
    border-left: 3px solid var(--color-danger);
}
.sp-detail-card__header {
    min-height: 56px;
}
.sp-detail-card__header--notes {
    align-items: center;
}
.sp-detail-card__title-group {
    min-width: 0;
}
.sp-detail-card__title {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.sp-detail-card--danger .sp-detail-card__title {
    color: var(--color-danger);
}
.sp-detail-card__subtitle {
    margin: 3px 0 0;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.35;
}
.sp-detail-card__meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}
.sp-detail-card__body {
    background: var(--surface);
}
.sp-detail-card .rrb-disclosure__content.sp-detail-card__content {
    padding: 14px 16px 16px;
}

/* Desktop-only aanpassingen voor de 2-koloms Klantgegevens/Service-informatie-rij.
   Mobiel < 769px is single-column en erft de ruimere shared .entity-* defaults ongewijzigd. */
@media (min-width: 769px) {
    /* Natuurlijke hoogte i.p.v. de gelijke-hoogte stretch uit het #267-patroon hierboven:
       naast een lange Klant-kaart zou de kortere Service-kaart anders meerekken en een
       grote lege onderkant tonen (~134px summier, ~330px vol). align-self:start laat elke
       kaart op zijn eigen inhoud stoppen; de body flex/min-height-regels worden dan inert.
       margin-top:0 neutraliseert de gedeelde owl-regel `.rrb-disclosure + .rrb-disclosure
       { margin-top: var(--sp-md) }` (rrb-primitives): die 12px hoort bij verticaal gestapelde
       disclosures, maar duwt hier de tweede (Service-)kaart 12px omlaag t.o.v. de Klant-kaart
       in dezelfde grid-rij. Mobiel <769px blijft gestapeld en houdt die tussenruimte. */
    .detail-grid-2col > .sp-detail-card { align-self: start; margin-top: 0; }

    /* Verdichting van Klantgegevens (alleen deze kaart) zodat de hero compacter oogt naast Service. */
    .sp-klant-card .entity-header { gap: 10px; margin-bottom: 4px; }
    .sp-klant-card .entity-header__avatar { width: 40px; height: 40px; font-size: 14px; }
    .sp-klant-card .entity-header__name { font-size: 16px; }
    .sp-klant-card .sp-channels { margin: 8px 0; }
    .sp-klant-card .sp-contact-lines { margin: 6px 0; }
}

.sp-call-history.is-scrollable {
    max-height: 220px;
    overflow-y: auto;
}
.sp-call-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}
.sp-call-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 0;
    background: var(--color-card);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}
.sp-call-table th:last-child {
    width: 88px;
}
.sp-call-table td {
    min-width: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.sp-call-row {
    vertical-align: top;
}
.sp-call-datetime {
    color: var(--color-text-secondary);
    font-size: 12px;
}
.sp-call-number {
    font-variant-numeric: tabular-nums;
}
.sp-call-status {
    white-space: nowrap;
}

/* Device rows */
.trow {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.trow:hover { background: var(--surface-muted); }
.trow.warn-row { background: var(--danger-50); }
.trow.warn-row:hover { background: var(--danger-100); }

.trow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    justify-self: center;
}

.trow-info { min-width: 0; }
.trow-name {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trow-sub {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trow-metric {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--r-btn);
    white-space: nowrap;
}
.trow-metric-ok { background: var(--accent-50); color: var(--accent-dark); }
.trow-metric-warn { background: var(--warning-50); color: var(--warning); }
.trow-metric-bad { background: var(--danger-50); color: var(--danger-dark); }
.trow-metric-info { background: var(--primary-50); color: var(--primary); }

.trow-actions {
    display: flex;
    gap: 4px;
}
.trow-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.trow-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.trow-btn svg { width: 12px; height: 12px; }

/* Expandable detail row */
.trow-detail {
    display: none;
    padding: 8px 14px 12px 32px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}
.trow-detail.visible { display: block; }

/* Chips inside detail rows */
.detail-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.dchip {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--r-btn);
}
.dchip-ok { background: var(--accent-50); color: var(--accent-dark); }
.dchip-warn { background: var(--warning-50); color: var(--warning); }
.dchip-bad { background: var(--danger-50); color: var(--danger-dark); }
.dchip-info { background: var(--surface-muted); color: var(--color-text-secondary); border: 1px solid var(--border); }

/* Vitals bar (channel indicators) */
.vitals-bar {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-top: 6px;
}
.vitals-bar .vital {
    flex: 1;
    border-radius: 2px;
    height: 4px;
}

/* Add-device row */
.sys-add-row {
    padding: 8px 14px;
    text-align: center;
}
.sys-add-row button {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: 1px dashed var(--border);
    padding: 6px 14px;
    border-radius: var(--r-btn);
    cursor: pointer;
    width: 100%;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sys-add-row button:hover { background: var(--primary-50); border-color: var(--color-primary); }

/* Sub-group header inside a section */
.trow-group-header {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.trow-group-header .grp-chevron {
    font-size: 9px;
    transition: transform 0.2s;
}
.trow-group-header.expanded .grp-chevron { transform: rotate(90deg); }
.trow-group-header.expanded,
.trow-group-header[data-open="true"] {
    background: transparent;
}
.trow-group-header.expanded::after,
.trow-group-header[data-open="true"]::after {
    transform: scaleX(0);
}
.trow-group-header:hover::after {
    transform: scaleX(1);
}
.trow-group-body { display: none; }
.trow-group-header.expanded + .trow-group-body { display: block; }

.ajax-device-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--r-btn);
    list-style: none;
}
.ajax-device-summary::-webkit-details-marker {
    display: none;
}
.ajax-device-group[open] > .ajax-device-summary {
    background: transparent;
}
.ajax-device-group[open] > .ajax-device-summary::after {
    transform: scaleX(0);
}
.ajax-device-group > .ajax-device-summary:hover::after {
    transform: scaleX(1);
}

/* Klant-grouping inside severity buckets (unifi/uisp/dahua/ajax/offline-cameras) */
.klant-subgroup {
    border: 1px solid var(--border);
    border-left: 3px solid var(--klant-accent, var(--border));
    border-radius: var(--r-btn);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--surface);
    transition: border-color 0.15s ease;
}
.klant-subgroup:last-child { margin-bottom: 0; }
.klant-subgroup:hover { border-color: var(--border); }
.klant-name {
    min-width: 0;
}
.klant-count {
    flex: 0 0 auto;
}
.klant-extras {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.klant-extras + .klant-count { margin-left: 0; }
.klant-subgroup .trow-group-body > table {
    margin: 0;
}
.klant-alert-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-danger);
    color: var(--surface);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--r-btn);
    font-weight: 600;
}
.klant-alert-pill.warn { background: var(--color-warning); }

/* Status monitoring customer groups should read like the same card family as Dahua/Server. */
.status-page .klant-subgroup {
    border-left-width: 3px;
    border-radius: calc(var(--r-card) + 2px);
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.05);
    margin-bottom: 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.status-page .klant-subgroup:hover {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--border));
    box-shadow: 0 16px 30px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}
.status-page .klant-subgroup .trow-group-header {
    min-height: 54px;
    padding: 14px 16px 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-text);
    background: transparent;
    border-bottom: 0;
    gap: 8px;
}
.status-page .klant-subgroup .trow-group-header:hover,
.status-page .klant-subgroup .trow-group-header.expanded,
.status-page .klant-subgroup .trow-group-header[data-open="true"] {
    background: transparent;
}
.status-page .klant-subgroup .trow-group-header:hover {
    background: var(--rrb-disclosure-hover-bg);
}
.status-page .klant-subgroup .trow-group-header .grp-chevron {
    font-size: 11px;
    color: var(--text-muted);
}
.status-page .klant-subgroup .klant-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
.status-page .klant-subgroup .klant-count,
.status-page .klant-subgroup .klant-alert-pill {
    align-self: center;
    min-height: 26px;
}
.status-page .klant-subgroup .klant-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-50) 88%, var(--surface));
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--primary-100) 72%, transparent);
}
.status-page .klant-subgroup .klant-extras {
    margin-left: auto;
    gap: 6px;
}
.status-page .klant-subgroup .trow-group-body {
    padding: 0 16px 16px;
}
.status-page .klant-subgroup .trow-group-body > table {
    margin-top: 0;
    border-top: 1px solid var(--border);
}
.status-page .klant-subgroup .trow-group-body > table thead th {
    background: transparent;
}
.status-monitor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ============================================
   A1 Edge Accent device tiles (stile-grid)
   Used by Dahua / UniFi / UISP / Teltonika / Servers
   ============================================ */
.stile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
}
.trow-group-body .stile-grid { padding: 10px 14px; }
.stile-grid > .trow-group-header,
.stile-grid > .sys-add-row {
    grid-column: 1 / -1;
}
.stile-grid > .sys-add-row { padding: 4px 0 0; }

.stile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 96px;
    padding: 12px 12px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    cursor: pointer;
    transition: border-color .15s, transform .1s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.stile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-text-muted);
    transition: background .15s;
}
.stile.is-ok::before    { background: var(--color-accent); }
.stile.is-warn::before  { background: var(--color-warning); }
.stile.is-bad::before   { background: var(--color-danger); }
.stile.is-muted::before { background: var(--color-text-muted); }

.stile:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(26,106,163,0.08);
}
.stile.active {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.stile-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    min-width: 0;
}
.stile-head .stile-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stile-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
}
.stile.is-ok   .stile-dot { background: var(--color-accent); }
.stile.is-warn .stile-dot { background: var(--color-warning); }
.stile.is-bad  .stile-dot { background: var(--color-danger); }

.stile-sub {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stile-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.stile-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--surface-muted);
    color: var(--color-text-secondary);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.stile-tag.t-ok   { background: var(--accent-50); color: var(--accent-dark); border-color: transparent; }
.stile-tag.t-warn { background: var(--warning-50); color: var(--warning); border-color: transparent; }
.stile-tag.t-bad  { background: var(--danger-50); color: var(--danger-dark); border-color: transparent; }
.stile-tag.t-info { background: var(--primary-50); color: var(--primary); border-color: transparent; }

.stile-foot {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.stile-foot strong { color: var(--color-text); font-weight: 700; }
.stile-metric {
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.stile-metric.m-ok   { background: var(--accent-50); color: var(--accent-dark); }
.stile-metric.m-warn { background: var(--warning-50); color: var(--warning); }
.stile-metric.m-bad  { background: var(--danger-50); color: var(--danger-dark); }
.stile-metric.m-info { background: var(--primary-50); color: var(--primary); }

.stile-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}
.stile-ctrl {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 11px;
    padding: 0;
}
.stile-ctrl:hover { border-color: var(--color-primary); color: var(--color-primary); }
.stile-ctrl svg { width: 12px; height: 12px; }
.stile-actions select.stile-ctrl-select {
    height: 24px;
    font-size: 11px;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* Detail row spans full grid width, sits right under the clicked tile */
.stile-grid > .trow-detail {
    grid-column: 1 / -1;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    padding: 12px 14px;
    margin-top: -4px;
}

@media (max-width: 768px) {
    .stile-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 10px; }
    .stile { min-height: 88px; padding: 10px 10px 8px; }
}
@media (max-width: 480px) {
    .stile-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px; }
    .stile { min-height: 80px; padding: 10px 10px 8px; }
    .stile-head { font-size: 14px; }
}

/* Locatie-cards in Klantgegevens (richting C). De rij zelf is compact: stip + adres +
   inline maps-icoon, gelijk aan de statische adresregels. Alleen de bredere import-knop
   ("+ Toevoegen aan plan", enkel bij Moneybird-bron) wrapt als volle-breedte regel
   eronder — daarvoor staat flex-wrap aan en krijgt .loc-card-import flex-basis:100%.
   RRB-EXCEPTION: .loc-card laat de import-actie onder het adres wrappen i.p.v. de
   straatnaam te pletten; scope is alleen deze kaart (serviceplannen-locatielijst). */
.loc-card { flex-wrap: wrap; row-gap: 4px; }
.loc-card .loc-card-import { flex-basis: 100%; }
@media (max-width: 480px) {
    .loc-card { gap: 8px; padding: 12px; }
    .loc-card .loc-card-import .btn { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 14px; }
    .sp-addr-list .entity-row .ico-btn { min-height: 44px; min-width: 44px; }
}

/* ============================================================
   Klantgegevens — contact/adres herontwerp (Direction C).
   Channel-strip + kopieerbare contactkaartjes + samengevoegde
   adreslijst. Alleen tokens; scope = de Klantgegevens-kaart.
   ============================================================ */

/* Snelactie-tegels: Route + Moneybird (beide neutraal gestyled). */
.sp-channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.sp-channels--1 { grid-template-columns: 1fr; }
.sp-channel-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 56px; padding: 10px 4px;
    border: 1px solid var(--border); border-radius: var(--r-card);
    background: var(--surface); color: var(--text);
    text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sp-channel-tile:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.sp-channel-tile__ic { display: inline-flex; }
.sp-channel-tile__lbl { font-size: 11px; font-weight: 600; }

/* Contactpersonen als compacte kaartjes met kopieer-iconen. */
.sp-contact-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.sp-contact-grid--scroll { max-height: 264px; overflow-y: auto; }
.sp-contact-card {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 5px 6px; border: 1px solid var(--border); border-radius: var(--r-card);
}
.sp-contact-card__av { flex: 0 0 28px; width: 28px; height: 28px; font-size: 11px; border-radius: 50%; }
.sp-contact-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sp-contact-card__name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-contact-card__role { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-contact-card__acts { flex: 0 0 auto; margin-left: auto; display: inline-flex; gap: 2px; }

/* Kopieer-icoonknop: hergebruikt .ico-btn, reset alleen de button-chrome. */
button.sp-copy-btn { border: 0; background: none; font: inherit; cursor: pointer; }
.sp-copy-btn:active { transform: scale(.9); }

/* Samengevoegde adreslijst + bron-stip (kleur = herkomst van het adres). */
/* minmax(0,1fr): track mag krimpen i.p.v. meegroeien met de breedste
   nowrap-regel (grid-items hebben default min-width:auto = geen krimp). */
.sp-addr-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sp-addr-list > .entity-row { min-width: 0; }
.sp-loc-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; align-self: center; background: var(--color-text-subtle); }
.sp-loc-dot.is-company { background: var(--primary); }
.sp-loc-dot.is-bezoek { background: var(--warning); }
.sp-loc-dot.is-synced { background: var(--accent); }
.sp-loc-dot.is-moneybird { background: var(--warning); }
.sp-loc-dot.is-serviceplan { background: var(--color-text-subtle); }
.sp-loc-tag {
    flex: 0 0 auto;
    display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em;
    padding: 1px 6px; border-radius: var(--r-btn); vertical-align: middle;
    background: var(--surface-muted); color: var(--text-muted);
}

/* Mobiel: ruimere raakdoelen voor kopieer-/maps-iconen + tegels. */
@media (max-width: 480px) {
    .sp-channel-tile { min-height: 64px; }
    .sp-contact-card { padding: 8px; }
    .sp-contact-card__acts .ico-btn { min-height: 44px; min-width: 44px; }
}

/* ============================================================
   Sheet (micro-tile) — inner sections: clients roster,
   services, activity. Inherits A1 tokens, shrunk density.
   ============================================================ */
.ssheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
}
.ssheet-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 10px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    min-height: 68px;
    overflow: hidden;
    transition: border-color .15s, transform .1s, box-shadow .15s;
}
.ssheet-tile.clickable { cursor: pointer; }
.ssheet-tile.clickable:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(26,106,163,0.07);
}
.ssheet-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--color-text-muted);
}
.ssheet-tile.is-ok::before   { background: var(--color-accent); }
.ssheet-tile.is-warn::before { background: var(--color-warning); }
.ssheet-tile.is-bad::before  { background: var(--color-danger); }
.ssheet-tile.is-muted::before{ background: var(--color-text-muted); }
.ssheet-tile.is-info::before { background: var(--color-primary); }

.ssheet-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ssheet-icon {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.ssheet-icon svg { width: 16px; height: 16px; }
.ssheet-tile.is-ok .ssheet-icon   { color: var(--color-accent); }
.ssheet-tile.is-warn .ssheet-icon { color: var(--color-warning); }
.ssheet-tile.is-bad .ssheet-icon  { color: var(--color-danger); }
.ssheet-tile.is-info .ssheet-icon { color: var(--color-primary); }

/* Brand logo chip — compact SVG wordmark with brand color */
.ssheet-brand-svg {
    display: block;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
}
.ssheet-brand-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ssheet-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ssheet-id {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.ssheet-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ssheet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}
.ssheet-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    background: var(--gray-100);
    color: var(--color-text-secondary);
    border: 1px solid var(--border);
}
.ssheet-tag.t-ok   { background: rgba(0,193,48,0.08);  color: var(--color-accent);  border-color: rgba(0,193,48,0.22); }
.ssheet-tag.t-warn { background: rgba(239,108,0,0.08); color: var(--color-warning); border-color: rgba(239,108,0,0.22); }
.ssheet-tag.t-bad  { background: rgba(220,53,69,0.08); color: var(--color-danger);  border-color: rgba(220,53,69,0.22); }
.ssheet-tag.t-info { background: rgba(26,106,163,0.08);color: var(--color-primary); border-color: rgba(26,106,163,0.22); }

.ssheet-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 4px;
}
.ssheet-actions {
    margin-left: auto;
    display: flex;
    gap: 3px;
    align-items: center;
}
.ssheet-btn {
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center;
}
.ssheet-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ssheet-btn.danger { color: var(--color-danger); border-color: rgba(220,53,69,0.30); }
.ssheet-btn.danger:hover { border-color: var(--color-danger); background: rgba(220,53,69,0.06); }

/* Section header inside panel (caps label, dashed underline, count) */
.ssheet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    border-bottom: 1px dashed var(--border);
    background: var(--surface);
}
.ssheet-head .lbl {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}
.ssheet-head .count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-text-muted);
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ssheet-head .summary {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Activity variant: timestamp top-right as id */
.ssheet-tile.activity .ssheet-name { font-weight: 500; white-space: normal; }
.ssheet-tile.activity .ssheet-sub { white-space: normal; font-family: var(--font); font-size: 11.5px; color: var(--color-text); line-height: 1.35; }

@media (max-width: 768px) {
    .ssheet { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; padding: 8px 10px; }
    .ssheet-tile { padding: 8px 8px 7px; min-height: 60px; }
}
@media (max-width: 480px) {
    .ssheet { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px; }
    .ssheet-name { font-size: 14px; }
}

/* UISP switch selector */
.uisp-sw-list { border-bottom: 1px solid var(--border); }
.uisp-sw-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--border);
    min-height: 44px;
}
.uisp-sw-item:last-child { border-bottom: none; }
.uisp-sw-item:hover { background: var(--gray-50); }
.uisp-sw-item.selected { background: var(--primary-50); border-left: 3px solid var(--color-primary); padding-left: 13px; }
.uisp-sw-item .sw-name { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uisp-sw-item .sw-meta { font-size: 11px; color: var(--color-text-secondary); flex-shrink: 0; }
.uisp-sw-chevron { font-size: 10px; color: var(--color-text-secondary); margin-left: 4px; display: none; }

/* UISP port grid */
.uisp-port-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; padding: 12px;
}
.uisp-port-cell {
    aspect-ratio: 1; border-radius: 6px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.15s; border: 2px solid transparent; min-height: 44px;
}
.uisp-port-cell.poe { background: var(--primary-100); color: var(--primary-800); border-color: var(--primary-300); }
.uisp-port-cell.active { background: var(--accent-50); color: var(--accent-800); border-color: var(--accent-200); }
.uisp-port-cell.inactive { background: var(--gray-100); color: var(--gray-400); border-color: var(--gray-200); }
.uisp-port-cell.disabled { background: var(--danger-50); color: var(--danger-800); border-color: var(--danger-200); }
.uisp-port-cell .port-num { font-size: 13px; font-weight: 700; line-height: 1; }
.uisp-port-cell .port-label {
    font-size: 7px; font-weight: 500; line-height: 1.1; margin-top: 2px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0.8; padding: 0 2px;
}
.uisp-port-cell:has(.port-label) { aspect-ratio: auto; min-height: 48px; padding: 4px 2px; }
.uisp-port-cell:hover, .uisp-port-cell:active { transform: scale(1.08); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.uisp-port-cell.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(26,106,163,0.3); transform: scale(1.05); }

/* UISP port detail panel */
.uisp-port-detail {
    margin: 0 12px 8px; background: var(--gray-50); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 14px; display: none; animation: uisp-slide 0.2s ease;
}
.uisp-port-detail.visible { display: block; }
@keyframes uisp-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.uisp-port-detail .pd-title { font-weight: 700; font-size: 14px; color: var(--color-primary); margin-bottom: 8px; }
.uisp-port-detail .pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13px; margin-bottom: 10px; }
.uisp-port-detail .pd-grid .label { color: var(--color-text-secondary); font-size: 12px; }
.uisp-port-detail .pd-actions { display: flex; gap: 8px; }
.uisp-port-detail .pd-actions button { min-height: 44px; padding: 10px 16px; font-size: 14px; font-weight: 600; border-radius: var(--r-btn); border: none; cursor: pointer; }

/* UISP scrollable port list */
.uisp-port-list-box {
    margin: 0 12px 8px; border: 1px solid var(--border); border-radius: var(--r-card);
    max-height: 200px; overflow-y: auto; background: var(--gray-50);
}
.uisp-port-list-header {
    display: grid; grid-template-columns: 50px 1fr 70px 60px; gap: 4px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--color-primary);
    border-bottom: 1px solid var(--border); background: var(--primary-50);
    position: sticky; top: 0; z-index: 1;
}
.uisp-port-list-row {
    display: grid; grid-template-columns: 50px 1fr 70px 60px; gap: 4px;
    padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.1s; align-items: center;
}
.uisp-port-list-row:last-child { border-bottom: none; }
.uisp-port-list-row:hover { background: var(--primary-50); }
.uisp-port-list-row.highlight { background: var(--primary-50); }
.uisp-port-list-row .pl-num { font-weight: 700; color: var(--color-primary); }
.uisp-port-list-row .pl-status { display: flex; align-items: center; gap: 5px; }
.uisp-port-list-row .pl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.uisp-port-list-row.inactive .pl-status, .uisp-port-list-row.inactive .pl-speed, .uisp-port-list-row.inactive .pl-poe { color: var(--gray-400); }

/* UISP port legend */
.uisp-port-legend { display: flex; gap: 14px; padding: 8px 12px; font-size: 11px; color: var(--color-text-secondary); }
.uisp-port-legend span { display: flex; align-items: center; gap: 4px; }
.uisp-port-legend .swatch { width: 12px; height: 12px; border-radius: 3px; }

/* Tab buttons (page-level tabs) */
.tab-btn { padding: 10px 20px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--gray-600); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tab-btn:hover { color: var(--color-primary); }

/* UniFi port filter bar */
.unifi-port-filter {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.unifi-filter-btn {
    padding: 3px 10px; font-size: 12px; border: 1px solid var(--border);
    border-radius: var(--r-btn); background: none; cursor: pointer; color: var(--color-text-secondary);
    transition: all 0.15s; white-space: nowrap;
}
.unifi-filter-btn:hover { background: var(--primary-50); }
.unifi-filter-btn.active { background: var(--color-primary); color: var(--surface); border-color: var(--color-primary); }

/* UISP non-switch device list */
.uisp-device-row { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uisp-device-row:last-child { border-bottom: none; }

/* UISP switch list collapse (mobile) */
.uisp-sw-list.collapsed .uisp-sw-item { display: none; }
.uisp-sw-list.collapsed .uisp-sw-item.selected { display: flex; }
.uisp-sw-list.collapsed .uisp-sw-item.selected .uisp-sw-chevron { display: inline; }
.uisp-sw-list.expanded .uisp-sw-item .uisp-sw-chevron { display: none; }
.uisp-sw-list.expanded .uisp-sw-item.selected .uisp-sw-chevron { display: inline; }

/* UISP PoE button */
.uisp-btn-poe { background: var(--color-danger); color: var(--surface); flex: 1; }
.uisp-btn-close { background: none; border: 1px solid var(--border) !important; color: var(--color-text); }

/* UISP body: side-by-side on desktop */
@media (min-width: 768px) {
    .uisp-body { display: grid; grid-template-columns: 260px 1fr; }
    .uisp-sw-list { border-bottom: none; border-right: 1px solid var(--border); max-height: 500px; overflow-y: auto; }
    .uisp-sw-list.collapsed .uisp-sw-item { display: flex !important; }
    .uisp-sw-list .uisp-sw-chevron { display: none !important; }
    .uisp-port-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
    .uisp-port-detail .pd-actions button { min-height: 32px; padding: 6px 12px; font-size: 13px; }
    .uisp-btn-poe { min-height: 32px; padding: 6px 12px; font-size: 13px; }
}

/* Refresh button row */
.sys-refresh-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.detail-page-header {
    align-items: center;
}
#page-serviceplannen .detail-page-header > .page-title,
.page-title.sp-detail-page-title {
    flex: 1 1 auto;
    min-width: 200px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.3;
}

.detail-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.detail-page-header__actions .btn {
    flex: 0 0 auto;
}

/* ============================================================
   Switch port view — solid-color tiles + list + bottom sheet
   Used by UniFi + UISP switches. Colors intentionally hard-coded
   (speed semantics, not theme colors).
   ============================================================ */
.sw-port-wrap { margin-top: 10px; }
.sw-subtabs { display:flex; gap:6px; background:var(--surface); padding:4px; border:1px solid var(--border); border-radius:10px; width:fit-content; margin:0 12px 10px; }
.sw-subtab { border:none; background:transparent; padding:7px 14px; border-radius:7px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; color:var(--text-subtle); min-height:36px; display:inline-flex; align-items:center; gap:6px; }
.sw-subtab[data-active="1"] { background:var(--text); color:var(--surface); }
.sw-subtab .n { font-family: var(--font-mono); font-size:10px; opacity:.7; }
.sw-kpis { display:flex; gap:6px; padding:0 12px 10px; flex-wrap:wrap; }
.sw-kpi { background:var(--surface-muted); border:1px solid var(--border); border-radius:8px; padding:5px 9px; font-size:11.5px; font-weight:600; color:var(--text-subtle); }
.sw-kpi b { color:var(--text); font-size:12.5px; margin-right:3px; }
.sw-kpi.ok { border-color:var(--accent-200); background:var(--accent-50); }
.sw-kpi.warn { border-color:var(--warning-200); background:var(--warning-50); }
.sw-kpi.bad { border-color:var(--danger-200); background:var(--danger-50); }
.sw-note { margin: 0 12px 10px; background:var(--warning-50); border:1px solid var(--warning-200); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--warning-800); }
.sw-note b { color:var(--warning-900); }
.sw-panel { display:none; padding: 0 12px 12px; }
.sw-panel[data-active="1"] { display:block; }

/* Grid tiles */
.sw-g-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap:8px; }
.sw-g-port { position:relative; aspect-ratio: 1 / 1; border-radius:12px; padding:8px 10px; color:var(--surface); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); transition: transform .12s ease; cursor:pointer; -webkit-tap-highlight-color: transparent; border:none; text-align:left; font:inherit; }
.sw-g-port:hover { transform: translateY(-2px); }
.sw-g-port:active { transform: scale(.97); }
.sw-g-port:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.sw-g-port.s-1g { background: var(--accent); }
.sw-g-port.s-100 { background: var(--warning); }
.sw-g-port.s-10g { background: var(--primary); }
.sw-g-port.s-2_5g { background: var(--chart-6); }
.sw-g-port.s-off { background: var(--surface-muted); color: var(--text-muted); box-shadow: inset 0 -3px 0 rgba(0,0,0,.06); }
.sw-g-port.s-dis { background: repeating-linear-gradient(135deg, var(--gray-300) 0 8px, var(--gray-200) 8px 16px); color:var(--gray-700); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.sw-g-port.s-err { background: var(--danger); }
.sw-g-port.s-unk { background: var(--text-muted); color:var(--surface); }
.sw-g-port .g-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:700; letter-spacing:.06em; }
.sw-g-port .g-top .pn { font-family: var(--font-mono); opacity:.95; }
.sw-g-port .g-top .spd { font-size:10px; opacity:.9; }
.sw-g-port .g-mid { display:flex; justify-content:center; align-items:center; flex:1; }
.sw-g-port .g-mid svg { width: 30px; height: 30px; }
.sw-g-port .g-mid svg * { fill:var(--surface) !important; stroke:var(--surface) !important; }
.sw-g-port.s-off .g-mid svg *, .sw-g-port.s-dis .g-mid svg * { fill: var(--text-muted) !important; stroke: var(--text-muted) !important; }
.sw-g-port .g-name { font-size:12px; font-weight:600; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; word-break: break-word; }
.sw-g-port .g-poe { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background: rgba(0,0,0,.28); display:inline-flex; align-items:center; justify-content:center; }
.sw-g-port .g-poe svg { width:12px; height:12px; fill:var(--surface); }
.sw-g-port.cycling::after { content:""; position:absolute; inset:0; border-radius:inherit; background: repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 10px, transparent 10px 20px); animation: sw-stripes 1s linear infinite; pointer-events:none; }
@keyframes sw-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }

/* Brand logo chip — used in both grid .g-mid and list .sw-l-ico */
.sw-brand-chip { display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid rgba(0,0,0,.08); border-radius:6px; padding:2px; box-sizing:border-box; overflow:hidden; flex:none; }
.sw-brand-chip img { width:100%; height:100%; object-fit:contain; display:block; }
.sw-brand-letter { font-family: var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.04em; }
.sw-g-port .g-mid .sw-brand-chip { width:34px; height:34px; }
.sw-l-ico .sw-brand-chip { width:26px; height:26px; }

/* List rows */
.sw-l-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sw-l-row { display:grid; grid-template-columns: 52px 36px 1fr auto; gap:10px; align-items:center; padding: 0 12px 0 0; border-bottom: 1px solid var(--border); min-height: 56px; cursor:pointer; -webkit-tap-highlight-color: transparent; border-left:none; border-right:none; border-top:none; background:none; width:100%; text-align:left; font:inherit; }
.sw-l-row:last-child { border-bottom: none; }
.sw-l-row:active { background: var(--gray-100); }
.sw-l-row:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.sw-l-rail { height: 56px; align-self: stretch; display:flex; align-items:center; justify-content:center; color:var(--surface); font-family: var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.04em; position:relative; }
.sw-l-rail.s-1g { background: var(--accent); }
.sw-l-rail.s-100 { background: var(--warning); }
.sw-l-rail.s-10g { background: var(--primary); }
.sw-l-rail.s-2_5g { background: var(--chart-6); }
.sw-l-rail.s-off { background: var(--surface-muted); color: var(--text-muted); }
.sw-l-rail.s-dis { background: repeating-linear-gradient(135deg, var(--gray-300) 0 8px, var(--gray-200) 8px 16px); color:var(--gray-700); }
.sw-l-rail.s-err { background: var(--danger); }
.sw-l-rail.s-unk { background: var(--text-muted); color:var(--surface); }
.sw-l-rail .poe { position:absolute; bottom:4px; right:4px; background: rgba(0,0,0,.3); border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
.sw-l-rail .poe svg { width:9px; height:9px; fill:var(--surface); }
.sw-l-ico { display:flex; justify-content:center; align-items:center; color: var(--text-subtle); }
.sw-l-ico svg { width:20px; height:20px; }
.sw-l-ico svg * { fill: var(--text-subtle) !important; stroke: var(--text-subtle) !important; }
.sw-l-body { min-width:0; padding: 8px 0; }
.sw-l-title { font-size:14px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sw-l-sub { font-size:11.5px; color: var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sw-l-tags { display:flex; gap:6px; flex-wrap:nowrap; }
.sw-l-tag { font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:6px; background: var(--surface-muted); color: var(--text-subtle); border:1px solid var(--border); white-space:nowrap; font-family: var(--font-mono); letter-spacing:.04em; }
.sw-l-tag.hi { background:var(--warning-50); border-color:var(--warning-200); color:var(--warning-700); }
.sw-l-tag.ok { background:var(--accent-50); border-color:var(--accent-200); color:var(--accent-800); }
.sw-l-tag.bad { background:var(--danger-50); border-color:var(--danger-200); color:var(--danger-700); }
.sw-l-tag.unk { background:var(--gray-100); border-color:var(--gray-200); color:var(--gray-600); }

/* Bottom sheet / modal */
.sw-sheet-bg { position:fixed; inset:0; background: rgba(15,17,20,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity:0; pointer-events:none; transition: opacity .18s ease; z-index: 9998; }
.sw-sheet-bg[data-open="1"] { opacity:1; pointer-events:auto; }
.sw-sheet { position:fixed; left:50%; top:50%; transform: translate(-50%,-45%) scale(.97); background: var(--surface); border-radius:16px; width:min(480px, calc(100vw - 24px)); max-height: min(86vh, 720px); overflow:hidden; box-shadow: 0 30px 60px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; z-index: 9999; display:flex; flex-direction:column; }
.sw-sheet[data-open="1"] { opacity:1; pointer-events:auto; transform: translate(-50%,-50%) scale(1); }
.sw-sheet-head { padding:14px 16px; color:var(--surface); display:flex; gap:12px; align-items:center; }
.sw-sheet-head.s-1g { background:var(--accent); }
.sw-sheet-head.s-100 { background:var(--warning); }
.sw-sheet-head.s-10g { background:var(--primary); }
.sw-sheet-head.s-2_5g { background:var(--chart-6); }
.sw-sheet-head.s-off { background:var(--gray-500); }
.sw-sheet-head.s-dis { background:var(--gray-600); }
.sw-sheet-head.s-err { background:var(--danger); }
.sw-sheet-head.s-unk { background:var(--gray-400); }
.sw-sheet-pn { font-family: var(--font-mono); font-weight:700; font-size:28px; line-height:1; min-width:48px; }
.sw-sheet-t h3 { margin:0; font-size:16px; font-weight:700; line-height:1.2; }
.sw-sheet-t p { margin:2px 0 0; font-size:12px; opacity:.9; }
.sw-sheet-src { margin-left:auto; margin-right:8px; font-family: var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; background: rgba(255,255,255,.2); padding:3px 8px; border-radius:5px; }
.sw-sheet-x { background: rgba(255,255,255,.2); color:var(--surface); border:none; width:34px; height:34px; border-radius:50%; font-size:20px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.sw-sheet-body { padding:16px; overflow:auto; }
.sw-sheet-meta { display:grid; grid-template-columns: 1fr 1fr; gap:10px 14px; margin-bottom:14px; font-size:13px; }
.sw-sheet-meta dt { color:var(--gray-500); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 2px; font-weight:600; }
.sw-sheet-meta dd { margin:0; font-weight:600; color:var(--text); font-family: var(--font-mono); word-break:break-all; }
.sw-sheet-meta dd.na { color:var(--gray-500); font-style:italic; font-family: var(--font); font-weight:500; }
.sw-sheet-note { background:var(--gray-100); border:1px solid var(--gray-200); border-radius:8px; padding:10px 12px; margin:0 0 14px; font-size:12.5px; color:var(--gray-700); display:flex; gap:8px; align-items:flex-start; }
.sw-sheet-actions { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.sw-sheet-actions button { min-height:46px; border-radius:10px; border:1px solid var(--gray-200); background:var(--surface); color:var(--text); font:inherit; font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 12px; }
.sw-sheet-actions button:hover { background:var(--gray-50); }
.sw-sheet-actions button.primary { background:var(--text); color:var(--surface); border-color:var(--text); }
.sw-sheet-actions button.warn { background:var(--warning-50); border-color:var(--warning-200); color:var(--warning-700); }
.sw-sheet-actions button.danger { background:var(--danger-50); border-color:var(--danger-200); color:var(--danger-700); }
.sw-sheet-actions button[disabled] { opacity:.55; cursor:not-allowed; }
.sw-sheet-actions .full { grid-column: 1 / -1; }

.sw-toast { position:fixed; left:50%; bottom:24px; transform: translateX(-50%) translateY(20px); background:var(--text); color:var(--surface); padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition: opacity .2s, transform .2s; z-index:10000; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.sw-toast[data-show="1"] { opacity:1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
    .sw-g-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap:6px; }
    .sw-g-port { padding:6px 8px; border-radius:10px; }
    .sw-g-port .g-mid svg { width:26px; height:26px; }
    .sw-l-row { grid-template-columns: 56px 30px 1fr; padding: 0 10px 0 0; }
    .sw-l-rail { min-height: 64px; height: 100%; font-size:14px; }
    .sw-l-tags { grid-column: 2 / -1; padding: 0 0 6px 46px; }
}
@media (max-width: 480px) {
    .sw-g-grid { grid-template-columns: repeat(3, 1fr); gap:6px; }
    .sw-g-port .g-top { font-size:14px; }
    .sw-g-port .g-name { font-size:14px; }
    .sw-l-title { font-size:14px; }
    .sw-l-row { grid-template-columns: 50px 28px 1fr; min-height: 60px; }
    .sw-sheet { left:0; right:0; top:auto; bottom:0; transform: translate(0, 100%); width:100%; max-width:none; border-radius:16px 16px 0 0; max-height: 90vh; }
    .sw-sheet[data-open="1"] { transform: translate(0, 0); }
    .sw-sheet-meta { grid-template-columns: 1fr; }
    .sw-sheet-actions { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .sw-g-grid { grid-template-columns: repeat(3, 1fr); }
    .sw-g-port { border-radius:8px; }
    .sw-g-port .g-mid svg { width:22px; height:22px; }
}

/* === Data table (detail tables inside cards) === */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; padding: 8px 16px; background: var(--surface-muted); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-subtle); font-size: 12px; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }

/* Monitoring status pages share the Serviceplannen dense-table language. */
.status-page {
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.status-page .page-title {
    letter-spacing: -0.02em;
}
.status-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.status-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white) 0%, color-mix(in srgb, var(--surface-muted) 38%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: calc(var(--r-card) + 6px);
    box-shadow: 0 16px 34px rgb(15 23 42 / 0.06);
}
.status-page-hero-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.status-page-hero-copy .status-page-actions {
    margin-top: 4px;
}
.status-page-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-50) 86%, var(--surface));
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.status-page-hero-title {
    margin: 0;
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-text);
}
.status-page-lead {
    margin: 0;
    max-width: 68ch;
    color: var(--text-muted);
    line-height: 1.65;
    font-size: 14px;
}
.status-page-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}
.status-page-mini-stat {
    display: grid;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.status-page-mini-stat .k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.status-page-mini-stat .v {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}
.status-page-mini-stat .s {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
.status-page-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 16px;
}
.status-page-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    margin-bottom: 0;
}
.status-page-toolbar {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.status-page-search {
    flex: 1 1 320px;
    max-width: 440px;
    min-width: min(260px, 100%);
}
.status-page-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 16px;
    margin-bottom: 12px;
}
.status-page-panel > h4 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--color-primary);
}
.status-page-table {
    width: 100%;
    font-size: 13px;
}
.status-page-table .status-mono,
.status-page-table td[data-label="IP"],
.status-page-table td[data-label="Switch"] {
    font-family: var(--font-mono);
    font-size: 12px;
}
.snooze-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-height: 44px;
}

.contact-recent-searches {
    margin: 0 0 16px;
}
.contact-recent-searches:empty {
    display: none;
}
.contact-recent-title {
    margin: 0 0 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.contact-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-recent-chip {
    min-height: 34px;
    max-width: 280px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.contact-recent-chip:hover {
    background: var(--primary-50);
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--border));
    color: var(--color-primary-hover);
}
.contact-recent-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 106, 163, 0.16);
}
.contact-recent-chip-main {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-recent-chip-plan {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: var(--r-btn);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

/* ============================================================
   NEW — Responsive
   ============================================================ */

/* ---- iPad landscape (1024px) ---- */
@media (max-width: 1024px) {
    body .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .page-content { padding: 20px; }
}

/* Serviceplannen list — mobile elements hidden on desktop */
@media (min-width: 768px) {
    .serviceplan-toolbar,
    .contact-search-toolbar {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .serviceplan-input,
    .contact-search-input,
    .search-glow {
        flex: 1;
        max-width: 340px;
        height: 36px;
        border: 2px solid var(--color-primary);
        border-radius: 10px;
        box-shadow: 0 0 0 3px rgba(26, 106, 163, 0.10),
                    0 1px 2px rgba(26, 106, 163, 0.06);
        transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out;
    }
    .serviceplan-input:focus,
    .contact-search-input:focus,
    .search-glow:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 4px rgba(26, 106, 163, 0.20),
                    0 2px 6px rgba(26, 106, 163, 0.16);
        outline: none;
    }
    .serviceplan-filter,
    .contact-search-filter,
    .filter-pill {
        width: auto;
        min-width: 160px;
        height: 28px;
        padding: 0 26px 0 10px;
        font-size: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background-color: var(--surface);
        color: var(--color-text);
        cursor: pointer;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .serviceplan-filter:hover,
    .contact-search-filter:hover,
    .filter-pill:hover {
        border-color: var(--color-primary);
    }
    .serviceplan-filter:focus,
    .contact-search-filter:focus,
    .filter-pill:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(26, 106, 163, 0.12);
        outline: none;
    }
    .sp-row-chevron { display: none; }
    .sp-row-dot-inline { display: none !important; }
    .sp-row-name-right { display: none !important; }
    .sp-row-details { display: none !important; }
    .sp-row-sub { display: none !important; }
    .sp-row-sp-nr { display: none !important; }

    /* Variant A (Terminal dense) — desktop aesthetic scoped to .serviceplan-table */
    .serviceplan-table { font-size: 13px; }
    .serviceplan-table thead th {
        position: sticky; top: 0; z-index: 2;
        font-family: var(--font-mono);
        font-size: 10.5px; font-weight: 600;
        letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--color-text-secondary);
        background: var(--gray-50);
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .serviceplan-table thead th [id^="sp-sort-"] {
        color: var(--border);
        margin-left: 4px;
        font-weight: 700;
        letter-spacing: 0;
    }
    .serviceplan-table tbody td {
        padding: 7px 12px;
        vertical-align: middle;
        line-height: 1.35;
        white-space: nowrap;
    }
    .serviceplan-table tbody tr.sp-row {
        background: var(--surface);
        border-bottom: 1px solid var(--primary-100);
        transition: background-color 0.12s ease, box-shadow 0.16s ease, transform 0.16s ease;
        position: relative;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
    .serviceplan-table tbody tr.sp-row * {
        cursor: pointer;
    }
    .serviceplan-table tbody tr.sp-row:nth-child(even) {
        background: rgba(242, 247, 251, 0.4);
    }
    .serviceplan-table tbody tr.sp-row:hover {
        background: var(--primary-50);
        box-shadow: inset 3px 0 0 var(--color-primary), 0 2px 6px rgba(26, 106, 163, 0.08);
        transform: translateY(-1px);
    }
    .serviceplan-table tbody tr.sp-row:active {
        transform: translateY(0);
        box-shadow: inset 3px 0 0 var(--color-primary);
        transition-duration: 0.05s;
    }
    /* Hover signal — avatar nudges + tints, name shifts to primary.
       Subtle, 120ms — fast enough to feel responsive without distracting scan. */
    .serviceplan-table tbody tr.sp-row .sp-b-avatar {
        transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    }
    .serviceplan-table tbody tr.sp-row .sp-b-name {
        transition: color 0.12s ease;
    }
    .serviceplan-table tbody tr.sp-row:hover .sp-b-avatar {
        background: var(--primary-100);
        color: var(--color-primary);
        transform: translateX(1px);
    }
    .serviceplan-table tbody tr.sp-row:hover .sp-b-name {
        color: var(--color-primary);
    }
    .serviceplan-table tbody tr.sp-row:last-child {
        border-bottom: none;
    }
    /* Name column constrains + ellipsis for long names */
    .serviceplan-table .sp-row-name-inline,
    .serviceplan-table td:first-child > * {
        max-width: 320px;
    }
    .serviceplan-table td:first-child {
        max-width: 340px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sp-c-ticket {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--font-mono);
        font-size: 12px;
    }
    .sp-c-ticket .badge-n {
        background: var(--color-danger);
        color: var(--surface);
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 7px;
        min-width: 20px;
        text-align: center;
        font-size: 11px;
        letter-spacing: 0;
    }
    .sp-c-ticket.is-warn .badge-n { background: var(--color-warning); }
    .sp-c-ticket.is-zero { color: var(--border); }

    .status-page-table thead th {
        position: sticky; top: 0; z-index: 2;
        font-family: var(--font-mono);
        font-size: 10.5px; font-weight: 600;
        letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--color-text-secondary);
        background: var(--gray-50);
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .status-page-table tbody td {
        padding: 7px 12px;
        vertical-align: middle;
        line-height: 1.35;
        white-space: nowrap;
    }
    .status-page-table tbody tr {
        background: var(--surface);
        border-bottom: 1px solid var(--primary-100);
        transition: background-color 0.12s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }
    .status-page-table tbody tr:nth-child(even) {
        background: rgba(242, 247, 251, 0.4);
    }
    .status-page-table tbody tr:hover {
        background: var(--primary-50);
        box-shadow: inset 3px 0 0 var(--color-primary), 0 2px 6px rgba(26, 106, 163, 0.08);
        transform: translateY(-1px);
    }
    .status-page-table tbody tr:last-child {
        border-bottom: none;
    }

    /* Klant column — compact terminal card on desktop.
       Mobile-cell holds the card; mobile media block styles it big,
       desktop reveals it compact (28px avatar, single-line name, no arrow). */
    .serviceplan-table .sp-row-mobile-cell {
        padding: 4px 12px;
        max-width: 320px;
    }
    .serviceplan-table .sp-row-card {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 30px;
    }
    .serviceplan-table .sp-b-avatar {
        width: 26px; height: 26px;
        border-radius: 6px;
        background: var(--primary-50);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--color-primary-dark);
        letter-spacing: -0.01em;
        flex-shrink: 0;
    }
    .serviceplan-table .sp-b-body { flex: 1; min-width: 0; overflow: hidden; }
    .serviceplan-table .sp-b-title {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 0;
    }
    .serviceplan-table .sp-b-name {
        flex: 1; min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .serviceplan-table .sp-b-chip,
    .serviceplan-table .sp-b-dot,
    .serviceplan-table .sp-b-addr,
    .serviceplan-table .sp-b-sep,
    .serviceplan-table .sp-b-age,
    .serviceplan-table .sp-b-meta,
    .serviceplan-table .sp-b-meta2,
    .serviceplan-table .sp-pillrow,
    .serviceplan-table .sp-b-arrow { display: none; }
}

/* Row loading shimmer — plays when navigating to detail */
@keyframes sp-row-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.sp-row-loading {
    pointer-events: none;
    background: linear-gradient(90deg, transparent 25%, rgba(26,106,163,0.08) 50%, transparent 75%) !important;
    background-size: 200% 100% !important;
    animation: sp-row-shimmer 1.2s ease-in-out infinite !important;
}
.sp-row-loading td { opacity: 0.6; }

/* ---- Tablet (768px) ---- */
@media (max-width: 768px) {
    /* Sidebar: slide-in from left instead of display toggle */
    .sidebar {
        position: fixed;
        width: min(216px, calc(100vw - 72px));
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        padding: max(12px, env(safe-area-inset-top, 12px)) 10px 12px;
    }
    .sidebar.collapsed { width: min(216px, calc(100vw - 72px)); padding: max(12px, env(safe-area-inset-top, 12px)) 10px 12px; align-items: stretch; }
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .sidebar-user-name { display: inline !important; }
    .sidebar.collapsed .nav-item { width: auto; height: auto; padding: 10px 12px; justify-content: flex-start; }
    .sidebar.collapsed .sidebar-logo { justify-content: space-between; }
    .sidebar.collapsed .sidebar-logo span:not(.sidebar-toggle) { display: inline !important; }

    .sidebar.mobile-open { transform: translateX(0); }

    /* Compact mobile nav while preserving 44px touch targets. */
    .sidebar-logo {
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .sidebar .nav-item {
        padding: 10px 12px;
        font-size: 14px;
        gap: 10px;
        min-height: 44px;
    }
    .sidebar .nav-icon { font-size: 18px; }
    .sidebar .sidebar-user {
        padding: 10px 12px;
        gap: 8px;
    }

    /* Show close button on mobile sidebar */
    .sidebar-close { display: flex; }
    .sidebar-toggle { display: none; }

    .app-layout { flex-direction: column; }
    .detail-grid-2col { grid-template-columns: 1fr !important; }
    .alert-config-grid { grid-template-columns: 1fr 1fr !important; }

    .detail-page-header__actions {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
    }
    .detail-page-header__actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding: 10px 14px;
        font-size: 14px;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }

    /* Tables to cards */
    .responsive-table tbody tr { background: var(--surface); }
    .responsive-table tbody td::before { color: var(--color-primary); }

    /* Recent: page-specific mobile cards. The generic responsive-table
       label/value layout can still inherit table intrinsic widths here
       because detail rows contain free-form werkbon text. */
    #page-inzendingen {
        max-width: 100%;
        overflow-x: clip;
    }
    .inz-filterbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px !important;
    }
    .inz-table-shell {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    .inz-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }
    .inz-table thead {
        display: none;
    }
    .inz-table tbody {
        display: grid;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }
    .inz-table .inz-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: hidden;
    }
    .inz-table .inz-row td {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0;
        line-height: 1.35;
    }
    .inz-table .inz-row td::before {
        display: none;
    }
    .inz-cell-type {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }
    .inz-cell-status {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        max-width: 42vw;
    }
    .inz-cell-client {
        grid-column: 1 / -1;
        grid-row: 2;
        color: var(--color-text);
        font-size: 14px;
        line-height: 1.35;
    }
    .inz-cell-employee,
    .inz-cell-files,
    .inz-cell-date {
        grid-column: 1 / -1;
        color: var(--color-text-secondary);
        font-size: 12px !important;
    }
    .inz-table .inz-row .inz-cell-files::before {
        content: 'Bestanden: ';
        display: inline;
        margin-right: 0;
        font-size: inherit;
        color: inherit;
    }
    .inz-table .inz-detail-row {
        display: block !important;
        width: 100%;
        min-width: 0;
        margin: -2px 0 10px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .inz-table .inz-detail-row > .inz-detail-cell {
        display: block !important;
        width: 100%;
        min-width: 0;
        padding: 0 !important;
        border: 0;
    }
    .inz-table .inz-detail-row > .inz-detail-cell::before {
        display: none !important;
    }
    .inz-detail-card {
        padding: 12px !important;
        border: 1px solid var(--color-border);
        border-top: 2px solid var(--color-primary) !important;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    .inz-detail-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        align-items: start !important;
    }
    .inz-detail-steps,
    .inz-detail-actions {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
    }
    .inz-detail-actions {
        justify-content: stretch !important;
    }
    .inz-detail-actions .btn {
        flex: 1 1 130px;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: normal;
    }
    .inz-detail-fields,
    .inz-detail-fields tbody,
    .inz-detail-field {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .inz-detail-field {
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border-light);
    }
    .inz-detail-field:last-child {
        border-bottom: 0;
    }
    .inz-detail-label,
    .inz-detail-value {
        display: block;
        width: 100%;
        padding: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .inz-detail-label {
        margin-bottom: 3px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .inz-detail-value {
        font-size: 13px;
        line-height: 1.45;
    }

    /* Overzicht page — mobile */
    .ovz-stat-value { font-size: 22px; letter-spacing: -0.3px; }
    .ovz-stat-label { font-size: 14px; }
    .ovz-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ovz-materials-grid { grid-template-columns: 1fr; }
    .ovz-clients-card { padding: 12px; }
    .ovz-clients-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .ovz-clients-header .form-input { max-width: 100%; min-height: 44px; }
    .ovz-subs-panel { padding: 12px; }
    .ovz-sub-header { padding: 10px; flex-wrap: wrap; }
    .ovz-sub-meta { flex-direction: column; gap: 2px; align-items: flex-start; }
    .ovz-sub-client { font-size: 14px; }
    .ovz-sub-info { font-size: 14px; }
    .ovz-sub-body { padding: 10px; }
    .ovz-field-label { white-space: normal; font-size: 14px; padding: 3px 4px; }
    .ovz-field-value { font-size: 14px; padding: 3px 4px; word-break: break-word; }
    .ovz-fields-table { display: block; }
    .ovz-fields-table tbody { display: block; }
    .ovz-fields-table tr { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid var(--border); }
    .ovz-fields-table tr:last-child { border-bottom: none; }

    /* Compact table — tighter on mobile but stays tabular */
    .ovz-compact-table { font-size: 14px; }
    .ovz-compact-table th { font-size: 14px; padding: 4px 6px; }
    .ovz-compact-table td { padding: 6px; }
    .ovz-compact-table td:first-child { max-width: 35vw; }

    /* Bar charts — slightly smaller text */
    .ovz-bar-label { font-size: 14px; }
    .ovz-bar-track { height: 6px; }

    /* Chart cards tighter */
    .chart-card { padding: 12px; }
    .chart-card h4 { font-size: 14px; margin-bottom: 8px; }

    /* Overzicht client table: stay as compact table on mobile */
    .ovz-client-table thead { display: table-header-group; }
    .ovz-client-table thead th { font-size: 14px; padding: 6px 8px; }
    .ovz-client-table tbody tr { display: table-row; background: none; border: none; border-radius: 0; padding: 0; margin: 0; border-bottom: 1px solid var(--border); }
    .ovz-client-table tbody td { display: table-cell; padding: 8px; font-size: 14px; border: none; }
    .ovz-client-table tbody td::before { display: none; }
    .ovz-client-table tbody td:first-child { font-weight: 600; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ovz-client-table tbody td:nth-child(2),
    .ovz-client-table tbody td:nth-child(3) { text-align: center; white-space: nowrap; }

    /* Detail tables: horizontal scroll wrapper */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
    .table-scroll table { min-width: 500px; }
    .table-scroll table th, .table-scroll table td { white-space: nowrap; font-size: 14px; padding: 8px 10px !important; }

    /* Better button sizing for touch */
    .btn, .btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; }
    .btn-xs { min-height: 44px; min-width: 44px; padding: 10px 14px; font-size: 14px; }
    .btn-action { min-height: 44px; min-width: 44px; padding: 10px 12px; font-size: 14px; }

    /* Charts taller on mobile for readability */
    .chart-card div[style*="height:200px"],
    .chart-card div[style*="height: 200px"] {
        min-height: 250px;
    }
    .chart-card canvas {
        min-height: 250px;
    }

    /* Tab/filter buttons — larger touch targets */
    .tab-btn, .filter-btn, [role="tab"] {
        padding: 12px 20px;
        min-height: 44px;
    }

    /* Filter inputs full-width on mobile */
    .form-input, input[type="text"], input[type="search"], select {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 44px;
    }

    /* Touch-friendly form inputs */
    .form-input, input[type="text"], input[type="search"], select {
        min-height: 44px;
    }
    /* Toast below mobile topbar */
    .toast-container {
        top: 60px !important;
    }

    /* Mobile typography — bolder for readability */
    .responsive-table tbody td::before { font-weight: 600; }
    .responsive-table tbody td { font-weight: 500; }
    .stat-value { font-weight: 700; }
    .stat-label { font-weight: 600; }
    body .badge { font-weight: 600; }

    /* Tappable device cards */
    .responsive-table tbody tr.device-card {
        border-left: 3px solid var(--color-primary);
        cursor: pointer;
        position: relative;
        transition: border-color 0.15s;
    }
    .responsive-table tbody tr.device-card.expanded {
        border: 1px solid var(--color-primary);
        border-left: 3px solid var(--color-primary);
    }
    .device-card .card-chevron {
        position: absolute;
        top: 14px;
        right: 14px;
        font-size: 20px;
        color: var(--color-primary);
        transition: transform 0.2s;
        font-weight: 300;
        pointer-events: none;
    }
    .device-card.expanded .card-chevron {
        transform: rotate(90deg);
    }
    .device-card .card-expand-body {
        display: none;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid var(--border);
    }
    .device-card.expanded .card-expand-body {
        display: block;
    }
    .device-card .card-expand-body .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .device-card .card-expand-body .detail-grid span.label {
        color: var(--color-text-secondary);
        font-size: 14px;
    }
    .device-card .card-expand-body .card-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .device-card .card-expand-body .card-actions .btn {
        min-height: 44px;
    }

    /* Clickable table headers — touch target for offline-cameras buckets */
    .table-header[style*="cursor:pointer"] {
        min-height: 48px;
    }

    .vitals-strip {
        display: flex;
        gap: 3px;
        margin-top: 6px;
    }
    .vitals-strip .vital-bar {
        height: 22px;
        border-radius: var(--r-btn);
        flex: 1;
        min-width: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--surface);
    }
    .vitals-strip .vital-bar.on { background: var(--color-accent); }
    .vitals-strip .vital-bar.off { background: var(--color-danger); }
    .vitals-strip .vital-bar.snoozed { background: var(--color-warning); }

    .serviceplan-toolbar,
    .contact-search-toolbar {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 56px);
        z-index: 8;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 -4px 12px;
        padding: 10px 4px 12px;
        background: linear-gradient(180deg, rgba(246, 249, 252, 0.98) 0%, rgba(246, 249, 252, 0.98) 76%, rgba(246, 249, 252, 0) 100%);
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 66px);
    }
    .serviceplan-input,
    .serviceplan-filter,
    .contact-search-input,
    .contact-search-filter {
        min-width: 0;
    }
    .serviceplan-input,
    .contact-search-input {
        flex: 1 1 100%;
        max-width: none;
    }
    .serviceplan-filter,
    .contact-search-filter {
        flex: 1 1 calc(50% - 4px);
        width: auto;
    }
    .contact-recent-searches {
        margin-top: -4px;
    }
    .contact-recent-chip {
        min-height: 44px;
        flex: 1 1 calc(50% - 4px);
        max-width: 100%;
        justify-content: center;
    }
    .status-page-hero {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .status-page-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .status-page-actions {
        width: 100%;
    }
    .status-page-toolbar {
        margin-bottom: 12px;
        align-items: stretch;
    }
    .status-page-search,
    .status-page-toolbar .search-glow {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }
    .status-page-panel {
        padding: 14px;
    }
    .status-page .klant-subgroup .trow-group-header {
        padding: 12px 14px 10px;
    }
    .status-page .klant-subgroup .trow-group-body {
        padding: 0 14px 14px;
    }
    /* ========================================================================
       Serviceplannen list — mobile cards (variant B: direct nav, no drawer)
       Tap row = navigate straight to detail page. One tap, one action.
       ======================================================================== */

    /* Kill stagger-row animation on mobile: translateY during initial 2.75s
       causes hit-test misses — first taps land on moving element. */
    .sp-row.stagger-row,
    .stagger-row {
        animation: none !important;
        animation-delay: 0ms !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Initials avatar — visual anchor + scan landmark */
    .sp-row .sp-b-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--primary-50);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-primary-dark);
        letter-spacing: -0.01em;
        flex-shrink: 0;
    }

    .sp-row .sp-b-body { flex: 1; min-width: 0; }

    /* Title line: name + plan chip */
    .sp-row .sp-b-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 22px;
    }
    .sp-row .sp-b-name {
        flex: 1; min-width: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }
    .sp-row .sp-b-chip {
        font-family: var(--font-mono);
        font-size: 14px;
        letter-spacing: 0.04em;
        background: var(--primary-50);
        color: var(--color-primary-dark);
        padding: 2px 7px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    /* Hide stats-grid (and other utility-marked blocks) on mobile overviews —
       'Totaal actief / Bezocht / Plannen' op /serviceplannen,
       'Met factuur / Met serviceplan / Laatste sync' op /contacten. */
    .hide-mobile { display: none !important; }

    /* Pillrow — semantic status badges directly under name (plan / status / tickets|city) */
    .sp-row .sp-pillrow {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
        align-items: center;
        line-height: 1.35;
    }
    .sp-row .sp-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        background: var(--surface-muted);
        color: var(--color-text-secondary);
        border: 1px solid var(--border);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .sp-row .sp-pill .pill-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
        background: currentColor;
    }
    .sp-row .sp-pill.is-plan {
        background: var(--primary-50);
        color: var(--color-primary-dark);
        border-color: var(--primary-100);
        text-transform: uppercase;
        font-family: var(--font-mono);
        letter-spacing: 0.04em;
    }
    .sp-row .sp-pill.is-success {
        background: var(--accent-50);
        color: var(--accent-800);
        border-color: var(--accent-200);
    }
    .sp-row .sp-pill.is-warn {
        background: var(--warning-50);
        color: var(--warning-700);
        border-color: var(--warning-200);
    }
    .sp-row .sp-pill.is-danger {
        background: var(--danger-50);
        color: var(--danger-700);
        border-color: var(--danger-200);
    }
    /* Meta line: address (serviceplannen) or email/phone (contacten).
       Wraps cleanly into 2 rows when items don't fit — no harsh ellipsis on mid-address. */
    .sp-row .sp-b-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        margin-top: 6px;
        font-size: 14px;
        color: var(--color-text-secondary);
        line-height: 1.45;
    }
    .sp-row .sp-b-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .sp-row .sp-b-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-text-secondary);
        text-decoration: none;
    }
    .sp-row a.sp-b-meta-item:hover { color: var(--color-primary); text-decoration: underline; min-height: 44px; }
    .sp-row .sp-b-meta-item.sp-b-addr-line { flex: 1 1 100%; }
    .sp-row .sp-b-meta-item.sp-b-meta-email { flex: 1 1 auto; }
    .sp-row .sp-b-meta-ico {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        opacity: 0.85;
    }
    /* Legacy aliases (fallback) — sp-b-addr/sep/age kept for backwards compat
       on any callers still emitting old structure. */
    .sp-row .sp-b-addr {
        flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sp-row .sp-b-sep {
        color: var(--border);
        flex-shrink: 0;
    }
    .sp-row .sp-b-age {
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    /* Meta2 line — next visit + open tickets (legacy, kept for backward compat) */
    .sp-row .sp-b-meta2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
        font-size: 14px;
        color: var(--color-text-secondary);
        line-height: 1.35;
        font-variant-numeric: tabular-nums;
        flex-wrap: wrap;
    }
    .sp-row .sp-b-next { color: var(--color-text); }
    .sp-row .sp-b-next.is-soon { color: var(--color-warning); font-weight: 600; }
    .sp-row .sp-b-next.is-overdue { color: var(--color-danger); font-weight: 600; }
    .sp-row .sp-b-next.is-none { color: var(--color-text-secondary); }
    .sp-row .sp-b-tick {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .sp-row .sp-b-tick .b {
        background: var(--color-danger);
        color: var(--surface);
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 6px;
        min-width: 18px;
        text-align: center;
        font-size: 14px;
    }
    .sp-row .sp-b-tick.is-warn .b { background: var(--color-warning); }

    /* Arrow — signals tap navigates */
    .sp-row .sp-b-arrow {
        color: var(--color-text-secondary);
        font-size: 20px;
        line-height: 1;
        flex-shrink: 0;
        transition: transform 0.15s ease, color 0.15s ease;
    }
    .sp-row:active .sp-b-arrow,
    .sp-row.sp-row-loading .sp-b-arrow {
        color: var(--color-primary);
        transform: translateX(2px);
    }

    /* Loading spinner replaces arrow while navigating */
    .sp-row.sp-row-loading .sp-b-arrow {
        visibility: hidden;
        position: relative;
    }
    .sp-row.sp-row-loading .sp-b-arrow::after {
        content: "";
        visibility: visible;
        position: absolute;
        right: 0; top: 50%;
        width: 14px; height: 14px;
        margin-top: -7px;
        border: 2px solid var(--border);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: sp-spin 0.7s linear infinite;
    }
    @keyframes sp-spin { to { transform: rotate(360deg); } }

}

/* ---- Small phones (480px) ---- */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .alert-config-grid { grid-template-columns: 1fr !important; }
    body .stats-grid .stat-card { padding: 12px 8px; }
    body .stats-grid .stat-card div:first-child { font-size: 24px !important; }
    .stat-value { font-size: 22px; }
    .stat-label { font-size: 14px; }
    .page-title { font-size: 16px; }
    .card-title, .monitoring-empty-copy-title { font-size: 14px; }
    body .badge { font-size: 14px; padding: 2px 6px; }
    .chart-card { padding: 12px; }
    .chart-card h4 { font-size: 14px; }
    .contact-recent-chip {
        flex-basis: 100%;
    }

    /* Tighter table card text */
    .responsive-table tbody td { font-size: 14px; }
    .responsive-table tbody td::before { font-size: 14px; }

    /* Overzicht compact */
    .ovz-stat-value { font-size: 20px; }
    .ovz-sub-client { font-size: 14px; }

    /* Overview cards tighten on small phones */
    .sp-row .sp-row-card { padding: 12px; gap: 10px; min-height: 68px; }
    .sp-row .sp-b-name { font-size: 14.5px; }
    .sp-row .sp-pillrow { gap: 5px; margin-top: 5px; }
    .sp-row .sp-pill { height: 22px; padding: 0 7px; font-size: 14px; }
    .sp-row .sp-b-meta { font-size: 14px; gap: 3px 8px; margin-top: 5px; }
    .serviceplan-table .sp-row .sp-row-card { padding: 9px 10px; gap: 8px; min-height: 54px; }
    .serviceplan-table .sp-row .sp-b-avatar { width: 34px; height: 34px; font-size: 12px; border-radius: 8px; }
    .serviceplan-table .sp-row .sp-b-name { font-size: 13.5px; }
    .serviceplan-table .sp-row .sp-b-chip { font-size: 11px; padding: 1px 5px; }
    .serviceplan-table .sp-row .sp-pillrow { gap: 4px; margin-top: 3px; }
    .serviceplan-table .sp-row .sp-pill { height: 19px; min-height: 19px; padding: 0 5px; font-size: 11.5px; }
    .serviceplan-table .sp-row .sp-b-inline-location { font-size: 11.5px; line-height: 19px; }
}

/* ---- Mini phones (360px) — overview cards super-compact ---- */
@media (max-width: 360px) {
    .sp-row .sp-row-card { padding: 10px; gap: 8px; }
    .sp-row .sp-b-avatar { width: 44px; height: 44px; font-size: 14px; border-radius: 9px; }
    .sp-row .sp-b-name { font-size: 14px; }
    .sp-row .sp-b-arrow { font-size: 18px; }
    .serviceplan-table .sp-row .sp-row-card { padding: 8px 9px; min-height: 50px; }
    .serviceplan-table .sp-row .sp-b-avatar { width: 32px; height: 32px; font-size: 11px; border-radius: 7px; }
    .serviceplan-table .sp-row .sp-b-name { font-size: 13px; }
    .serviceplan-table .sp-row .sp-b-chip { font-size: 10px; }
    .serviceplan-table .sp-row .sp-pill { height: 18px; min-height: 18px; font-size: 11px; }
    .serviceplan-table .sp-row .sp-b-inline-location { font-size: 11px; line-height: 18px; }
}


/* Desktop enhancements for system sections */
@media (min-width: 768px) {
    .sys-tab-strip { gap: 0; }
    .sys-tab-item {
        flex-direction: row;
        gap: 6px;
        padding: 10px 18px;
        font-size: 12px;
    }
    .sys-tab-item svg { width: 16px; height: 16px; }
    .sys-summary-line { display: flex; }
    .sys-section {
        margin: 8px 0;
        border: 1px solid var(--border);
        border-radius: var(--r-card);
        overflow: hidden;
    }
    .sys-section-header { padding: 12px 16px; }
    .sys-section-name { font-size: 13px; }
    .sys-section-stats { font-size: 12px; gap: 12px; }
    .trow {
        grid-template-columns: 10px 1fr auto auto auto;
        padding: 10px 16px;
        gap: 12px;
    }
    .trow-metric { font-size: 11px; padding: 3px 8px; }
    .trow-detail { padding: 10px 16px 14px 38px; }
    .vitals-bar { height: 6px; }
    .vitals-bar .vital { height: 6px; border-radius: 3px; }
    .trow-btn { width: 30px; height: 30px; }
    .trow-btn svg { width: 14px; height: 14px; }
}

/* Mobile touch targets for system sections */
@media (max-width: 768px) {
    .sys-section-header { min-height: 48px; padding: 12px 14px; }
    .trow { min-height: 48px; }
    .trow-btn { width: 36px; height: 36px; min-height: 36px; }
    .trow-btn svg { width: 14px; height: 14px; }
    .sys-add-row button { min-height: 44px; }
    .sp-detail-card__header {
        min-height: 48px;
        padding: 12px 14px;
    }
    .sp-detail-card__header--notes {
        flex-wrap: wrap;
    }
    .sp-detail-card__header--notes .btn {
        margin-left: 0;
    }
    .sp-detail-card .rrb-disclosure__content.sp-detail-card__content {
        padding: 12px 14px 14px;
    }
    .sp-detail-card__meta {
        justify-content: flex-start;
    }
    .sp-call-history,
    .sp-call-history.is-scrollable {
        max-height: none;
        overflow: visible;
    }
    .sp-call-table,
    .sp-call-table thead,
    .sp-call-table tbody,
    .sp-call-table tr,
    .sp-call-table td {
        display: block;
        width: 100%;
    }
    .sp-call-table thead {
        display: none;
    }
    .sp-call-table tbody {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .sp-call-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 10px;
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border-light);
    }
    .sp-call-table td {
        border: 0;
        padding: 0;
    }
    .sp-call-datetime {
        grid-column: 1 / -1;
        font-size: 12px;
    }
    .sp-call-company {
        color: var(--color-text-secondary);
    }
    .sp-call-status {
        grid-column: 2;
        grid-row: 2 / span 2;
        justify-self: end;
        align-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .serviceplan-table tbody tr.sp-row,
    .serviceplan-table tbody tr.sp-row:hover,
    .serviceplan-table tbody tr.sp-row:active {
        transform: none !important;
        transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
    }
}

/* =====================================================================
   Notitiebord — filter UX (port van inventory .prod-mfilter-* blokken,
   prefix `nb-` voor desktop / shared, `m-nb-` voor mobile-only chrome).
   Desktop ≥1025px: sticky two-row toolbar + anchored dropdown filters.
   Mobile ≤1024px:  search-only toolbar + chip pillrow + bottom sheet
                    + drill-in pickers + sticky summary bar.
===================================================================== */

.notes-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    margin-bottom: var(--sp-md);
}
.notes-toolbar-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
    flex-wrap: wrap;
}
.notes-toolbar-main {
    align-items: stretch;
}
.notes-toolbar-filters {
    position: relative;
}
.notes-toolbar .notes-searchbar {
    flex: 1 1 320px;
    min-width: 240px;
    max-width: none;
}
.notes-toolbar .search-clear {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}
.notes-toolbar-filter {
    position: relative;
    display: inline-flex;
}
.notes-filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    max-width: 260px;
}
.notes-filter-btn > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-filter-caret {
    display: inline-flex;
    align-items: center;
    color: currentColor;
    line-height: 0;
}
.notes-filter-caret svg {
    width: 12px;
    height: 12px;
}
.notes-filter-count {
    margin-left: var(--sp-xs);
}
.notes-filter-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 var(--sp-xs);
    border-radius: 999px;
    background: var(--primary);
    color: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.notes-toolbar-dropdown {
    position: absolute;
    top: calc(100% + var(--sp-xs));
    left: 0;
    z-index: 80;
    width: min(360px, calc(100vw - 48px));
    background: var(--surface);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: var(--r-card);
    box-shadow: var(--e3, 0 18px 42px rgb(15 23 42 / 0.16));
    overflow: hidden;
}
.notes-toolbar-filter:nth-last-child(-n+2) .notes-toolbar-dropdown {
    right: 0;
    left: auto;
}
.notes-dd-head,
.notes-dd-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--surface-muted);
}
.notes-dd-head {
    border-bottom: 1px solid var(--border);
}
.notes-dd-foot {
    border-top: 1px solid var(--border);
    justify-content: flex-start;
}
.notes-dd-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
}
.notes-dd-close {
    min-width: 32px;
}
.notes-dd-body {
    display: grid;
    gap: var(--sp-sm);
    padding: var(--sp-md);
}
.notes-dd-group,
.notes-dd-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}
.notes-dd-field .form-select {
    width: 100%;
}
.notes-dd-link {
    justify-self: start;
}
.notes-dd-option-list {
    display: grid;
    gap: 4px;
}
.notes-dd-option {
    appearance: none;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
    min-height: 38px;
    padding: 7px var(--sp-sm);
    border: 0;
    border-radius: var(--r-btn);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.notes-dd-option:hover,
.notes-dd-option:focus-visible,
.notes-dd-option.is-selected {
    background: var(--primary-50, rgb(26 106 163 / 0.10));
}
.notes-dd-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--surface);
    font-size: 12px;
    font-weight: 700;
}
.notes-dd-option.is-selected .notes-dd-check {
    background: var(--primary);
    border-color: var(--primary);
}
.notes-dd-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-dd-option-meta {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}
.notes-filter-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.notes-filter-pills {
    margin: 0;
}

.nb-mfilter-pillrow,
.nb-mfilter-backdrop,
.nb-mfilter-sheet,
.nb-mfilter-picker { display: none; }

@media (max-width: 1024px) {
    /* Toolbar shrinks to search-only on mobile/tablet */
    .notes-toolbar-main > .notes-filter-btn,
    .notes-toolbar-main > .nb-savefilter-btn,
    .notes-toolbar-filters { display: none; }
    .notes-toolbar { padding: var(--sp-sm) var(--sp-md); gap: 0; }
    .notes-toolbar-row { width: 100%; }
    .notes-toolbar .notes-searchbar {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* Pill row: scrollable chips, fixed below toolbar */
    .nb-mfilter-pillrow {
        display: flex;
        gap: 8px;
        padding: 8px 12px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 8px 8px;
        margin-top: -12px;
        margin-bottom: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nb-mfilter-pillrow::-webkit-scrollbar { display: none; }
    .nb-mfilter-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 12px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--color-text);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
    }
    .nb-mfilter-pill.is-active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--surface);
    }
    .nb-mfilter-pill.is-active.pill-tone-warn {
        background: var(--warning);
        border-color: var(--warning);
    }
    .nb-mfilter-pill.is-active.pill-tone-danger {
        background: var(--danger);
        border-color: var(--danger);
    }
    .nb-mfilter-pill .pill-x {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        margin-right: -4px;
        border-radius: 9px;
        background: var(--primary-700);
        color: var(--surface);
        font-size: 14px;
        line-height: 1;
    }
    .nb-mfilter-pill .pill-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--surface-muted);
        color: var(--color-text-secondary);
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .nb-mfilter-pill.is-active .pill-count {
        background: rgb(255 255 255 / 0.22);
        color: var(--surface);
    }
    .nb-mfilter-pill-ticket {
        color: var(--warning-700, #c2410c);
        border-color: var(--warning-300, #fdba74);
        background: var(--warning-50, #fff7ed);
        font-weight: 600;
    }
    .nb-mfilter-pill.pill-add {
        color: var(--color-primary);
        border-color: var(--color-primary);
        border-style: dashed;
        background: transparent;
    }
    .nb-mfilter-pill.pill-clear {
        color: var(--color-primary);
        border-color: transparent;
        background: transparent;
    }

    body.nb-mfilter-locked { overflow: hidden; }

    .nb-mfilter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(15 23 42 / 0.42);
        z-index: 1100;
        animation: nbMfilterFade 180ms ease-out;
    }

    .nb-mfilter-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        background: var(--surface);
        border-radius: 16px 16px 0 0;
        box-shadow: var(--e3);
        z-index: 1101;
        animation: nbMfilterSlideUp 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .nb-mfilter-sheet-handle {
        display: grid;
        place-items: center;
        padding: 6px 0 2px;
    }
    .nb-mfilter-sheet-handle::before {
        content: '';
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
    }
    .nb-mfilter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 4px;
        border-bottom: 1px solid var(--border);
    }
    .nb-mfilter-sheet-head h3 {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text);
        letter-spacing: 0.02em;
    }
    .nb-mfilter-sheet-head .close-btn {
        background: transparent;
        border: none;
        color: var(--color-primary);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 2px 6px;
    }
    .nb-mfilter-sheet-rows {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }
    .nb-mfilter-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 7px 16px;
        border: 0;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        user-select: none;
        min-height: 44px;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
    }
    .nb-mfilter-row:active { background: var(--surface-muted); }
    .nb-mfilter-row .row-label {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text);
    }
    .nb-mfilter-row .row-value {
        color: var(--color-text-muted, var(--color-text-secondary));
        font-size: 13px;
        text-align: right;
        max-width: 55%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nb-mfilter-row .row-value.has-value { color: var(--color-primary); font-weight: 500; }
    .nb-mfilter-row .row-chev {
        color: var(--color-text-muted, var(--color-text-secondary));
        font-size: 14px;
    }

    /* Pair row: two label+select cells side by side (Datumveld + Periode) */
    .nb-mfilter-row.mfilter-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: stretch;
        cursor: default;
    }
    .nb-mfilter-row.mfilter-pair:active { background: transparent; }
    .nb-mfilter-pair-cell {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .nb-mfilter-pair-cell--wide {
        grid-column: 1 / -1;
    }
    .nb-mfilter-pair-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .nb-mfilter-pair-select {
        width: 100%;
        height: 36px;
        padding: 0 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        font-size: 13px;
        color: var(--color-text);
    }

    /* Picker row: 3-up chip grid (Status / Prio / Toeg) */
    .nb-mfilter-row.mfilter-pickers {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        cursor: default;
    }
    .nb-mfilter-row.mfilter-pickers:active { background: transparent; }
    .nb-mfilter-pchip {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        text-align: left;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }
    .nb-mfilter-pchip:active { background: var(--surface-muted); }
    .nb-mfilter-pchip.is-active {
        border-color: var(--color-primary);
        background: var(--primary-50);
    }
    .nb-mfilter-pchip-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .nb-mfilter-pchip-value {
        font-size: 13px;
        font-weight: 500;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .nb-mfilter-pchip-value.has-value { color: var(--color-primary); }

    .nb-mfilter-sheet-foot {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 16px 10px;
        border-top: 1px solid var(--border);
        background: var(--surface);
    }
    .nb-mfilter-sheet-foot .btn {
        justify-content: center;
        height: 38px;
        padding: 0 14px;
    }

    .nb-mfilter-picker {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: var(--surface);
        z-index: 1102;
        animation: nbMfilterSlideRight 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .nb-mfilter-picker-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 12px 8px;
        border-bottom: 1px solid var(--border);
    }
    .nb-mfilter-picker-head .back-btn {
        background: transparent;
        border: none;
        color: var(--color-primary);
        font-size: 16px;
        cursor: pointer;
        padding: 6px 8px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .nb-mfilter-picker-head h3 {
        margin: 0;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        padding-right: 60px;
    }
    .nb-mfilter-picker-hint {
        padding: 8px 16px;
        font-size: 12px;
        color: var(--color-text-secondary);
        background: var(--surface-muted);
        border-bottom: 1px solid var(--border);
    }
    .nb-mfilter-picker-list {
        flex: 1;
        overflow-y: auto;
    }
    .nb-mfilter-picker-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border: 0;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        user-select: none;
        min-height: 48px;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
    }
    .nb-mfilter-picker-item:active { background: var(--surface-muted); }
    .nb-mfilter-picker-item .check {
        width: 22px;
        height: 22px;
        border: 2px solid var(--border);
        border-radius: 4px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        color: transparent;
        font-weight: 700;
    }
    .nb-mfilter-picker-item.is-checked .check {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--surface);
    }
    .nb-mfilter-picker-item .label {
        flex: 1;
        font-size: 14px;
        color: var(--color-text);
    }
    .nb-mfilter-picker-item .count {
        font-size: 12px;
        color: var(--color-text-secondary);
    }
    .nb-mfilter-picker-empty {
        padding: 32px 16px;
        text-align: center;
        color: var(--color-text-secondary);
        font-size: 14px;
    }
    .nb-mfilter-picker-foot {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid var(--border);
    }
    .nb-mfilter-picker-foot .btn { justify-content: center; }

}

@keyframes nbMfilterSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes nbMfilterSlideRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes nbMfilterFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   Composer modal — "+ Nieuwe notitie" vanuit /notities
   ============================================================ */
.nb-composer-locked { overflow: hidden; }
.nb-composer-backdrop {
    position: fixed; inset: 0;
    background: rgb(15 23 42 / 0.42);
    z-index: 240;
    animation: nbMfilterFade 160ms ease-out;
}
.nb-composer-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--e3);
    z-index: 250;
    overflow: hidden;
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: 0;
    animation: nbComposerEnter 190ms var(--ease);
}
.nb-composer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.nb-composer-head-text {
    min-width: 0;
}
.nb-composer-head h3 { margin: 0; font-size: 16px; color: var(--color-primary); }
.nb-composer-head p {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.35;
}
.nb-composer-head .close-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    font-size: 22px;
    cursor: pointer;
    color: var(--color-text-secondary);
    line-height: 1;
    padding: 0;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.nb-composer-head .close-btn:hover {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--color-text);
}
.nb-composer-body {
    padding: 16px 20px;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
    background: var(--surface-muted);
    line-height: 1.45;
    scrollbar-gutter: stable;
}
.nb-composer-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    min-width: 0;
    padding: var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
}
.nb-composer-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-sm);
    min-width: 0;
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.25;
}
.nb-composer-field { display: flex; flex-direction: column; gap: 6px; }
.nb-composer-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nb-composer-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-composer-pills .chip {
    min-height: 32px;
    height: auto;
    padding: 6px 10px;
    line-height: 1;
    touch-action: manipulation;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nb-composer-assignee-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-btn, 4px);
    background: var(--surface);
    color: var(--color-text);
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    touch-action: manipulation;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nb-composer-assignee-pill:hover {
    background: var(--primary-50);
    color: var(--primary-dark);
    border-color: var(--primary-200);
    box-shadow: none;
}
.nb-composer-assignee-pill:active {
    background: var(--surface);
    color: var(--color-text);
    border-color: var(--border-strong);
}
.nb-composer-assignee-pill.is-active {
    background: var(--primary);
    color: var(--surface);
    border-color: var(--primary);
}
.nb-composer-assignee-pill.is-active:hover {
    background: var(--primary-dark);
    color: var(--surface);
    border-color: var(--primary-dark);
}
.nb-composer-assignee-pill.is-active:active {
    background: var(--primary);
    color: var(--surface);
    border-color: var(--primary);
}
.nb-composer-row2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.nb-composer-counter {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}
.nb-composer-warn {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--warning-50);
    color: var(--warning);
    font-size: 12px;
}
.nb-composer-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--color-card-highlight, transparent);
}

.nb-composer-klant-selected {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--color-card-highlight, transparent);
}
.nb-composer-klant-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.nb-composer-klant-stack {
    display: grid;
    gap: 8px;
}
.nb-composer-klant-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}
.nb-composer-klant-selected-empty .nb-composer-klant-name {
    color: var(--color-text-secondary);
}
.nb-composer-klant-results {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 4px;
    background: var(--surface);
}
.nb-composer-klant-results:empty { display: none; }
.nb-composer-klant-row {
    display: flex; align-items: center; width: 100%;
    padding: 8px 12px;
    border: none; border-bottom: 1px solid var(--color-border-light, var(--border));
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}
.nb-composer-klant-row:last-child { border-bottom: none; }
.nb-composer-klant-row:hover { background: var(--primary-50); }
.nb-composer-klant-loading,
.nb-composer-klant-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.nb-composer-hint {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.45;
}
.nb-composer-media-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-sm);
}
.nb-composer-media-item {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 42px 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
}
.nb-composer-media-item strong {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.nb-composer-media-remove {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: var(--color-danger);
    color: var(--surface);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.nb-composer-media-remove:hover { background: var(--danger-600); }
.nb-composer-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}
.nb-composer-ticket-group {
    display: grid;
    gap: var(--sp-sm);
}
.nb-composer-ticket-group > strong {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-text-secondary);
}
.nb-composer-ticket-list {
    display: grid;
    gap: var(--sp-xs);
    max-height: 220px;
    overflow-y: auto;
}
.nb-composer-ticket-row {
    appearance: none;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
    padding: 9px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px var(--sp-sm);
    text-align: left;
    cursor: pointer;
    align-items: center;
    transition: background 120ms ease, border-color 120ms ease;
}
.nb-composer-ticket-row:hover {
    background: var(--surface-muted);
    border-color: var(--primary-200);
}
.nb-composer-ticket-row.is-linked {
    border-color: var(--primary);
    background: var(--primary-50);
}
.nb-composer-ticket-row .sug-row-reason {
    grid-column: 2 / -1;
    grid-row: 2;
    margin: 0;
}
.nb-composer-ticket-row .sug-score {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}
.nb-composer-fd-linked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-sm);
    padding: 8px 10px;
    border: 1px solid var(--primary);
    border-radius: var(--r-btn);
    background: var(--primary-50);
}
.nb-composer-ticket-details {
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    padding: 8px 10px;
    background: var(--surface);
}
.nb-composer-ticket-details summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
}
.nb-composer-ticket-details > *:not(summary) {
    margin-top: var(--sp-sm);
}

@media (max-width: 768px) {
    .nb-composer-modal {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        top: 0; left: 0;
        transform: none;
        border-radius: 0;
        overflow-x: hidden;
        overflow-x: clip;
        animation: nbMfilterFade 160ms ease-out;
    }
    .nb-composer-row2 { grid-template-columns: 1fr; gap: 14px; }
    .nb-composer-klant-inline { grid-template-columns: 1fr; }
    .nb-composer-klant-inline > .btn {
        width: 100%;
        justify-content: center;
    }
    .nb-composer-body { padding: 14px 16px; gap: 14px; }
    .nb-composer-head, .nb-composer-foot { padding: 14px 16px; }
    .nb-composer-head .close-btn,
    .nb-composer-pills .chip,
    .nb-composer-assignee-pill {
        min-height: 44px;
    }
    .nb-composer-head .close-btn {
        width: 44px;
        height: 44px;
    }
    .nb-composer-pills .chip,
    .nb-composer-assignee-pill {
        padding: 10px 14px;
    }
    .nb-composer-foot {
        flex-wrap: wrap;
    }
    .nb-composer-foot .btn {
        flex: 1 1 120px;
        justify-content: center;
        min-width: 0;
        white-space: normal;
    }
    .nb-composer-ticket-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .nb-composer-ticket-row .nb-drawer-fd-id,
    .nb-composer-ticket-row .nb-drawer-fd-subject,
    .nb-composer-ticket-row .nb-drawer-fd-status,
    .nb-composer-ticket-row .sug-row-reason,
    .nb-composer-ticket-row .sug-score {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

@keyframes nbComposerEnter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 10px)) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nb-composer-backdrop,
    .nb-composer-modal {
        animation: none;
    }
    .nb-composer-head .close-btn,
    .nb-composer-pills .chip,
    .nb-composer-assignee-pill,
    .nb-composer-ticket-row {
        transition: none;
    }
}

/* ============================================================
   Notitie categorie & prio kleuren (composer + lijst-badges)
   Tokens only — geen hardcoded hex.
   ============================================================ */
.nb-cat.badge { font-weight: 600; letter-spacing: 0.02em; }
.nb-cat-onderhoud  { background: var(--primary-50);    color: var(--primary);    border: 1px solid var(--primary); }
.nb-cat-installatie { background: var(--primary-50); color: var(--primary); border: 1px solid var(--primary); }
.nb-cat-storing    { background: var(--danger-50);  color: var(--danger-dark);  border: 1px solid var(--danger-dark); }
.nb-cat-klant      { background: var(--accent-50); color: var(--accent-dark); border: 1px solid var(--accent-dark); }
.nb-cat-offerte    { background: var(--primary-100); color: var(--primary-dark); border: 1px solid var(--primary-dark); }
.nb-cat-vraag      { background: var(--warning-50); color: var(--warning); border: 1px solid var(--warning); }
.nb-cat-wijziging  { background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--text-muted); }
.nb-cat-none       { background: var(--surface-muted);         color: var(--color-text-muted);         border: 1px solid var(--border); }

/* Composer pills — tinted outline default, solid fill when active */
.nb-cat-pill, .nb-prio-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 12px; min-height: 32px;
    font-size: 13px; font-weight: 500; line-height: 1;
    border-radius: var(--r-btn); border: 1px solid currentColor;
    background: var(--surface); color: var(--color-text);
    cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nb-cat-pill:hover, .nb-prio-pill:hover { border-color: currentColor; }

#page-notities .nb-cat-pill,
#page-notities .nb-prio-pill {
    border: 1px solid currentColor !important;
}

.nb-cat-pill:not(.is-active),
.nb-prio-pill:not(.is-active) {
    background: var(--surface);
}

.nb-cat-pill.nb-cat-onderhoud { background: var(--surface); color: var(--primary); }
.nb-cat-pill.nb-cat-onderhoud.is-active { background: var(--primary); color: var(--surface); }
.nb-cat-pill.nb-cat-installatie { background: var(--surface); color: var(--primary); }
.nb-cat-pill.nb-cat-installatie.is-active { background: var(--primary); color: var(--surface); }
.nb-cat-pill.nb-cat-storing { background: var(--surface); color: var(--danger-dark); }
.nb-cat-pill.nb-cat-storing.is-active { background: var(--danger); color: var(--surface); }
.nb-cat-pill.nb-cat-klant { background: var(--surface); color: var(--accent-dark); }
.nb-cat-pill.nb-cat-klant.is-active { background: var(--accent); color: var(--surface); }
.nb-cat-pill.nb-cat-offerte { background: var(--surface); color: var(--primary-dark); }
.nb-cat-pill.nb-cat-offerte.is-active { background: var(--primary-dark); color: var(--surface); }
.nb-cat-pill.nb-cat-vraag { background: var(--surface); color: var(--warning); }
.nb-cat-pill.nb-cat-vraag.is-active { background: var(--warning); color: var(--surface); }
.nb-cat-pill.nb-cat-wijziging { background: var(--surface); color: var(--text-muted); }
.nb-cat-pill.nb-cat-wijziging.is-active { background: var(--text-muted); color: var(--surface); }
.nb-cat-pill.nb-cat-none { background: var(--surface); color: var(--color-text-secondary); }
.nb-cat-pill.nb-cat-none.is-active { background: var(--text-subtle); color: var(--surface); }

.nb-prio-pill.nb-prio-low { background: var(--surface); color: var(--color-text-secondary); }
.nb-prio-pill.nb-prio-low.is-active { background: var(--text-subtle); color: var(--surface); }
.nb-prio-pill.nb-prio-normal { background: var(--surface); color: var(--primary); }
.nb-prio-pill.nb-prio-normal.is-active { background: var(--primary); color: var(--surface); }
.nb-prio-pill.nb-prio-high { background: var(--surface); color: var(--warning); }
.nb-prio-pill.nb-prio-high.is-active { background: var(--warning); color: var(--surface); }
.nb-prio-pill.nb-prio-critical { background: var(--surface); color: var(--danger-dark); }
.nb-prio-pill.nb-prio-critical.is-active { background: var(--danger); color: var(--surface); }

/* Mobile touch target — 44px mandate (CLAUDE.md responsive rules) */
@media (max-width: 768px) {
    .nb-cat-pill, .nb-prio-pill {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* ============================================================
   Notitiebord — view-toggle (lijst ↔ kanban) + kanban-weergave
   ============================================================ */
.nb-header-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#page-notities #notities-new {
    /* RRB-EXCEPTION: notities header CTA needs a compact standout gradient while preserving the shared button font sizing. */
    align-self: center;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 12px;
    line-height: 1.15;
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--accent) 52%, var(--primary));
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    color: var(--surface);
    font-weight: 700;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
}
#page-notities #notities-new:hover {
    border-color: color-mix(in srgb, var(--accent-dark) 45%, var(--primary-dark));
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--primary-dark) 100%);
    color: var(--surface);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 28%, transparent);
}
.nb-view-toggle {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    align-items: center;
    gap: 0;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 16px;
    overflow: visible;
    background: color-mix(in srgb, var(--surface) 78%, var(--primary-50));
    box-shadow: inset 0 1px 3px rgb(15 23 42 / 0.08);
    height: auto;
}
#page-notities .nb-view-toggle::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 2);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 18px rgb(26 106 163 / 0.22);
    transform: translateX(0);
    transition: transform 180ms var(--ease);
    z-index: 0;
}
#page-notities .nb-view-toggle[data-active-view="kanban"]::before {
    transform: translateX(100%);
}
.nb-view-tab {
    appearance: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.01em;
    transition: color 160ms var(--ease), transform 160ms var(--ease);
}
.nb-view-tab + .nb-view-tab { border-left: 0; }
#page-notities .nb-view-toggle .nb-view-tab:hover { color: var(--primary); }
#page-notities .nb-view-toggle .nb-view-tab.is-active,
#page-notities .nb-view-toggle .nb-view-tab.is-active:hover {
    background: transparent;
    color: var(--surface);
}
.nb-view-toggle:has(.nb-view-tab.is-active) {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
@media (max-width: 1024px) {
    .nb-view-toggle {
        min-height: 44px;
        grid-template-columns: repeat(2, minmax(98px, 1fr));
    }
    .nb-view-tab {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 15px;
    }
    #page-notities #notities-new {
        min-height: 44px;
        padding: 8px 12px;
        border-radius: 12px;
        width: auto;
        max-width: max-content;
    }
}

.nb-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
}
.nb-kcol {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.nb-kcol-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px 8px 0 0;
}
.nb-kcol-count {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.nb-kcol-body {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
    transition: background 120ms ease;
}
.nb-kcol-body.is-drop-target {
    background: var(--primary-50);
    box-shadow: inset 0 0 0 2px var(--color-primary);
    border-radius: 0 0 8px 8px;
}
.nb-kcol-empty {
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 16px 0;
}

.nb-kcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: grab;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.nb-kcard:hover { border-color: var(--color-primary); }
.nb-kcard:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.nb-kcard.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}
body.nb-kanban-dragging,
body.nb-kanban-dragging .nb-kanban {
    cursor: grabbing;
}
.nb-kanban.is-drag-active .nb-kcard button,
.nb-kanban.is-drag-active .nb-kcard input,
.nb-kanban.is-drag-active .nb-kcard label,
.nb-kanban.is-drag-active .nb-kcard select,
.nb-kanban.is-drag-active .nb-kcard textarea,
.nb-kanban.is-drag-active .nb-kcard-move,
.nb-kcard.is-dragging .nb-kcard-move {
    display: none !important;
}
.nb-kcard.is-drag-preview {
    position: fixed;
    top: -10000px;
    left: -10000px;
    width: min(280px, calc(100vw - 32px));
    pointer-events: none;
    z-index: -1;
    box-shadow: var(--shadow-dropdown);
}
.nb-kcard.is-drag-preview button,
.nb-kcard.is-drag-preview input,
.nb-kcard.is-drag-preview label,
.nb-kcard.is-drag-preview select,
.nb-kcard.is-drag-preview textarea,
.nb-kcard.is-drag-preview .nb-kcard-move {
    display: none !important;
}
.nb-kcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.nb-kcard-klant {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 500;
}
.nb-kcard-body {
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--color-text);
    word-break: break-word;
}
.nb-kcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 2px;
}
.nb-kcard-assignees {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.nb-kcard-move {
    font-size: 12px;
    padding: 4px 6px;
    height: auto;
    min-width: 110px;
    display: none;  /* desktop: drag-only */
}

/* Mobile/tablet: scroll-x kolommen + dropdown-fallback (geen drag) */
@media (max-width: 1024px) {
    .nb-kanban {
        grid-template-columns: repeat(4, 80vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .nb-kcol { scroll-snap-align: start; }
}
@media (max-width: 768px) {
    .nb-kcard { cursor: default; }
    .nb-kcard-move {
        display: block;
        min-height: 44px;
        font-size: 14px;
    }
    .nb-kcol-head { padding: 12px; }
}

/* Admin: notitie-voorkeuren per gebruiker */
.a-userprefs-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.a-userprefs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.a-userprefs-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
}
.a-userprefs-mail {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}
.a-userprefs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}
.a-userprefs-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.a-userprefs-field input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    background: var(--surface);
    color: var(--color-text);
}
.a-userprefs-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 13px;
    color: var(--color-text);
}
.a-userprefs-toggles label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .a-userprefs-grid { grid-template-columns: 1fr; }
    .a-userprefs-field input { height: 44px; }
}

/* ============================================================
   Notitiebord — bulk-bar (lijst gap-audit)
   Status quick-filters live nu in .nb-cs-pill-status (cardstack pills)
   ============================================================ */
.nb-empty-card {
    padding: var(--sp-2xl);
    text-align: center;
    color: var(--text-muted);
}
.nb-result-count {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0 0 var(--sp-sm);
}
.nb-list-card {
    padding: 8px;
    overflow: hidden;
    display: grid;
    gap: 10px;
    background: linear-gradient(180deg, var(--surface-muted) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
}
.nb-skeleton-card {
    height: 120px;
    border-radius: var(--r-card);
}
.nb-skeleton-row {
    height: 60px;
    border-radius: var(--r-btn);
}
.nb-muted-inline {
    color: var(--text-subtle);
}
.nb-list-row {
    position: relative;
    padding: 12px 16px 12px 38px !important;
    display: block;
    cursor: default;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.7), 0 10px 24px rgb(15 23 42 / 0.04);
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, background 120ms ease;
}
.nb-list-row.is-clickable { cursor: pointer; }
.nb-list-row.is-clickable:hover {
    border-color: var(--primary-200);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.72), 0 14px 28px rgb(15 23 42 / 0.07);
    transform: translateY(-1px);
}
.nb-list-row.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-50) 52%, var(--surface)) 0%, var(--surface) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 16px 32px rgb(15 23 42 / 0.08);
}
.nb-list-row.is-editing,
.nb-list-row.is-auditing { background: var(--surface-muted); }
.nb-list-row [data-body-display] { word-break: break-word; }
.nb-row-head {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    margin-bottom: var(--sp-xs);
}
.nb-row-customer {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.nb-row-date {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.nb-row-body {
    white-space: pre-line;
    line-height: 1.5;
    font-size: var(--fs-md);
    color: var(--color-text);
}
.nb-body-list {
    margin: var(--sp-xs) 0;
    padding-left: 1.25em;
    list-style: disc;
}
.nb-body-list li {
    margin: 2px 0;
    line-height: 1.5;
}
.nb-row-meta {
    margin-top: var(--sp-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding-top: var(--sp-sm);
    border-top: 1px dashed color-mix(in srgb, var(--border) 86%, transparent);
}
.nb-row-actions {
    margin-left: auto;
    display: flex;
    gap: var(--sp-xs);
    flex-wrap: wrap;
}
.nb-assignee-chip-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.nb-assignee-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--primary, #1a6aa3);
    border-radius: var(--r-btn, 4px);
    background: var(--primary-50, #f2f7fb);
    color: var(--primary, #1a6aa3);
    font: 600 11px/1.4 var(--font);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.nb-assignee-chip-empty {
    border-color: var(--border, #ddd);
    background: var(--surface-muted, #f6f7f8);
    color: var(--text-muted);
    font-weight: 500;
}
.nb-row-panel {
    display: none;
    margin-top: var(--sp-sm);
}
.nb-row-panel.is-open {
    display: block;
}
.nb-audit-empty {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0;
}
.nb-audit-list {
    margin: 0;
    padding-left: var(--sp-lg);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.nb-audit-list li {
    margin-bottom: var(--sp-xs);
}
.nb-bulk-check {
    position: absolute;
    top: 14px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nb-bulk-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.nb-bulk-check.is-disabled {
    width: 18px;
    height: 18px;
}
@media (hover: none) {
    .nb-bulk-check {
        top: 4px;
        left: 0;
        width: 44px;
        height: 44px;
    }
    .nb-list-row { padding-left: 46px !important; }
}

.nb-bulkbar {
    position: sticky;
    bottom: 16px;
    margin: 12px auto 0;
    max-width: 720px;
    background: var(--surface);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--e2);
    z-index: 30;
}
.nb-bulkbar-count { font-weight: 600; font-size: 14px; color: var(--color-text); }
.nb-bulkbar-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.nb-bulkbar-select { height: 36px; min-width: 180px; }

.nb-fd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    background: var(--primary-50, #eef4f9);
    color: var(--primary-700, #15578a);
    border: 1px solid var(--primary-200, #c9dcec);
    line-height: 1.4;
}
.nb-fd-badge-icon { flex-shrink: 0; opacity: 0.85; }
.nb-fd-badge-label { line-height: 1; }
a.nb-fd-badge.nb-fd-badge-link { cursor: pointer; }
a.nb-fd-badge.nb-fd-badge-link:hover {
    background: var(--primary-100, #dfebf5);
    color: var(--primary-800, #0f3e64);
    border-color: var(--primary-300, #8fb6d4);
    text-decoration: none;
}
.nb-media-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef9f1;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}
button.nb-media-badge {
    appearance: none;
}
.nb-media-badge:hover,
.nb-media-badge:focus-visible {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
    text-decoration: none;
}
.nb-media-badge:focus-visible {
    outline: 2px solid rgb(34 197 94 / 0.35);
    outline-offset: 2px;
}
.nb-media-badge-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

/* === Notitie-drawer: Freshdesk ticket-suggesties === */

.sug-block {
    background: #fff;
    border: 1px solid var(--primary-100, #dfebf5);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}
.sug-block-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: var(--primary-50, #f2f7fb);
    border-bottom: 1px solid var(--primary-100, #dfebf5);
    font-size: 12px; font-weight: 600;
    color: var(--primary-700, #155888);
    text-transform: uppercase; letter-spacing: .04em;
}
.sug-block-list { display: flex; flex-direction: column; }
.sug-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 10px; padding: 10px 12px;
    align-items: center;
    border-top: 1px solid var(--gray-100, #f1f5f9);
    background: #fff;
}
.sug-row:first-child { border-top: 0; }
.sug-row:hover { background: var(--gray-50, #f8fafc); }
.sug-row-id { font-weight: 600; font-size: 12px; color: var(--primary-700, #155888); }
.sug-row-main { min-width: 0; }
.sug-row-subject {
    display: block; font-size: 13px; color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.sug-row-reason {
    display: block; font-size: 11.5px;
    color: var(--color-text-muted); margin-top: 2px;
}
.sug-row-actions { display: flex; align-items: center; gap: 6px; }
.sug-score {
    font-size: 11px; font-weight: 700;
    padding: 2px 6px; border-radius: 9999px; letter-spacing: .02em;
}
.sug-score.high {
    background: var(--accent-50, #eef9f1); color: var(--accent-700, #009e26);
    border: 1px solid var(--accent-100, #d5f1dd);
}
.sug-score.mid {
    background: var(--warning-50, #fff7ed); color: var(--warning-700, #c2410c);
    border: 1px solid var(--warning-100, #ffedd5);
}

@media (max-width: 480px) {
    .sug-row { grid-template-columns: 1fr; gap: 6px; }
    .sug-row-actions { justify-content: flex-end; }
}

.nb-workspace-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 16px;
    align-items: start;
}
.nb-workspace-list {
    min-width: 0;
}
.nb-workspace-preview {
    position: sticky;
    top: 92px;
    min-width: 0;
}
.nb-workspace-preview-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-muted) 34%, var(--surface)) 100%);
    border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
}
.nb-workspace-preview-empty {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}
.nb-workspace-preview-head {
    display: grid;
    gap: 10px;
}
.nb-workspace-preview-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.nb-workspace-preview-head h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.nb-workspace-preview-sub {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}
.nb-workspace-preview-body {
    padding: 14px 15px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-muted) 58%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    line-height: 1.65;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.nb-workspace-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.nb-workspace-preview-stat {
    display: grid;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.nb-workspace-preview-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nb-workspace-preview-value {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text);
}
.nb-workspace-preview-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .nb-list-row { padding: 12px 12px 12px 36px !important; }
    .nb-list-row [data-body-display] { font-size: 14px; }
    .nb-list-row .badge { font-size: 14px; }
}
@media (max-width: 480px) {
    .nb-bulkbar { border-radius: 12px; flex-wrap: wrap; padding: 10px 12px; }
    .nb-bulkbar-actions { width: 100%; }
    .nb-bulkbar-select { flex: 1; min-width: 0; }
    .nb-list-row { padding: 10px 10px 10px 32px !important; }
    .nb-bulk-check { top: 12px; left: 8px; }
}

@media (max-width: 1280px) {
    .nb-workspace-shell {
        grid-template-columns: 1fr;
    }
    .nb-workspace-preview {
        position: static;
    }
}

/* ============================================================
   Notitiebord — side-drawer (variant B)
   Slide-in rechts op desktop; bottom-sheet op mobiel.
   Tokens only — geen hardcoded hex.
   ============================================================ */
body.nb-bulk-sheet-locked { overflow: hidden; }
body.nb-drawer-locked { overflow: hidden; }

.nb-bulk-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(15 23 42 / 0.28);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 80;
    animation: nbDrawerFade 160ms ease-out;
}

.nb-bulk-sheet-layer {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    z-index: 81;
    pointer-events: none;
}

.nb-bulk-sheet {
    width: min(560px, 100%);
    pointer-events: auto;
}

.nb-bulk-sheet-summary {
    gap: 6px;
}

.nb-bulk-sheet-count {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-50) 88%, var(--surface));
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nb-bulk-sheet-hint {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.nb-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgb(15 23 42 / 0.28);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 80;
    animation: nbDrawerFade 160ms ease-out;
}
@keyframes nbDrawerFade { from { opacity: 0; } to { opacity: 1; } }

.nb-drawer {
    position: fixed; top: 14px; right: 14px; bottom: 14px;
    /* Variant C: brede drawer voor de twee-koloms Melding+Updates weergave.
       Op ≤1024px valt dit terug naar de smalle één-koloms breedte (zie media query). */
    width: min(1040px, calc(100vw - 28px));
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 24px;
    box-shadow: 0 26px 64px rgb(15 23 42 / 0.16);
    z-index: 81;
    display: flex; flex-direction: column;
    animation: nbDrawerSlideIn 200ms ease-out;
    overflow: hidden;
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: 0;
}
@keyframes nbDrawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.nb-drawer-head {
    display: flex; align-items: center; gap: var(--sp-md);
    padding: 18px 20px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white) 0%, color-mix(in srgb, var(--surface-muted) 44%, var(--surface)) 100%);
    flex: 0 0 auto;
}
.nb-drawer-head-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    overflow: hidden;
}
.nb-drawer-head h3 {
    margin: 0; font-size: 21px; font-weight: 700;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -0.02em;
}
.nb-drawer-customer {
    margin: 0; font-size: 12px;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-drawer-handle {
    display: none;
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 6px auto 0;
}
.nb-drawer-close {
    appearance: none;
    background: color-mix(in srgb, var(--surface) 68%, var(--surface-muted));
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 14px; cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--fs-xl); line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.nb-drawer-close:hover { background: var(--surface); color: var(--color-text); }

.nb-drawer-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
    border-bottom: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white) 0%, color-mix(in srgb, var(--surface-muted) 30%, var(--surface)) 100%);
    flex: 0 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.nb-drawer-tabs::-webkit-scrollbar { display: none; }
.nb-drawer-tab {
    appearance: none;
    background: color-mix(in srgb, var(--surface-muted) 60%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    padding: 10px 14px; min-height: 42px;
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer; white-space: nowrap;
    border-radius: 999px;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.nb-drawer-tab:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 25%, var(--border)); }
.nb-drawer-tab.is-active {
    color: var(--color-primary-900, var(--color-primary));
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary-50) 86%, var(--surface));
    box-shadow: 0 10px 22px rgb(15 23 42 / 0.06);
}
.nb-drawer-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--surface-muted);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.nb-drawer-tab-badge.is-success {
    background: var(--accent-50);
    color: var(--accent-dark);
}

.nb-drawer-body {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    padding: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, white) 0%, var(--bg) 100%);
    min-width: 0;
}
.nb-drawer-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-md);
    padding: 14px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.7), 0 12px 26px rgb(15 23 42 / 0.04);
    min-width: 0;
}
.nb-drawer-section:last-child { margin-bottom: 0; }

/* ── Variant C: samengevoegde Melding-tab (melding + updates in twee kolommen) ── */
.nb-drawer-merge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-md);
    align-items: start;
}
.nb-merge-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    min-width: 0;
}
.nb-merge-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    min-width: 0;
}
/* In de flex-kolommen verzorgt gap de ruimte; section-eigen margin uit. */
.nb-drawer-merge .nb-drawer-section,
.nb-drawer-merge .nb-drawer-context { margin-bottom: 0; }
.nb-drawer-rail-title {
    display: flex; align-items: center; gap: var(--sp-xs);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-text-secondary);
}
.nb-drawer-rail-count {
    font-size: 11px; font-weight: 700;
    background: var(--surface-muted); color: var(--color-text-muted);
    padding: 1px 8px; border-radius: 999px;
}
/* ≤1024px: één kolom. Volgorde: melding → updates → media → status → context,
   zodat updates direct onder de melding staan (kernwens) en de foto/video
   bekijk-knoppen bereikbaar blijven (niet onderaan). Drawer wordt smaller. */
@media (max-width: 1024px) {
    .nb-drawer { width: min(640px, calc(100vw - 28px)); }
    .nb-drawer-merge {
        display: flex;
        flex-direction: column;
        gap: var(--sp-md);
    }
    .nb-merge-main,
    .nb-merge-rail { display: contents; }
    .nb-merge-melding { order: 1; }
    .nb-drawer-rail-updates { order: 2; }
    .nb-merge-media { order: 3; }
    .nb-merge-status { order: 4; }
    .nb-merge-context { order: 5; }
}

.nb-drawer-context {
    display: flex; flex-direction: column; gap: 1px;
    margin-bottom: var(--sp-md);
    background: color-mix(in srgb, var(--border) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgb(15 23 42 / 0.04);
}
.nb-drawer-ctx-row {
    display: grid;
    grid-template-columns: 28px 90px 1fr auto;
    align-items: center;
    gap: var(--sp-sm);
    padding: 10px 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white) 0%, var(--surface) 100%);
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--color-text, var(--text));
    font-family: var(--font);
    font-size: var(--fs-sm, 13px);
    transition: background 120ms ease;
}
.nb-drawer-ctx-row:hover {
    background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
}
.nb-drawer-ctx-row:focus-visible {
    outline: 2px solid var(--color-primary, var(--primary));
    outline-offset: -2px;
}
.nb-drawer-ctx-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: var(--color-bg, var(--surface-muted));
    border-radius: 8px;
    color: var(--color-text-secondary, var(--text-muted));
}
.nb-drawer-ctx-label {
    font-size: 11px; font-weight: 600;
    color: var(--color-text-secondary, var(--text-muted));
    text-transform: uppercase; letter-spacing: 0.04em;
}
.nb-drawer-ctx-value {
    font-weight: 500;
    color: var(--color-text, var(--text));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.nb-drawer-ctx-note {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-50);
    color: var(--accent-dark);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nb-drawer-ctx-pending {
    display: inline-block; margin-left: 4px;
    color: var(--color-warning, var(--warning));
    font-weight: 700;
}
.nb-drawer-ctx-edit {
    color: var(--color-primary, var(--primary));
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .nb-drawer-ctx-row {
        grid-template-columns: 26px 1fr auto;
        padding: 9px 10px;
        gap: 8px;
    }
    .nb-drawer-ctx-label { display: none; }
}
.nb-drawer-label {
    font-size: 11px; font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.nb-drawer-counter {
    font-size: 11px; color: var(--color-text-muted);
    text-align: right; font-variant-numeric: tabular-nums;
}
.nb-drawer-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-drawer-empty {
    padding: var(--sp-md); text-align: center;
    color: var(--color-text-muted); font-size: var(--fs-sm);
    background: var(--surface-muted);
    border: 1px dashed var(--border);
    border-radius: var(--r-btn);
}
.nb-drawer-skeleton-row {
    height: 60px;
    border-radius: var(--r-btn);
}
.nb-drawer-hint {
    margin-top: var(--sp-sm);
    font-size: var(--fs-sm);
}

.nb-drawer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-drawer-tag {
    display: inline-flex; align-items: center; gap: var(--sp-xs);
    padding: var(--sp-xs) var(--sp-sm);
    background: var(--primary-50);
    color: var(--primary);
    border-radius: var(--r-btn);
    font-size: var(--fs-xs); font-weight: 500;
}
.nb-drawer-tag-x {
    appearance: none; background: transparent; border: 0;
    color: inherit; cursor: pointer;
    padding: 0; font-size: var(--fs-md); line-height: 1;
    opacity: 0.7;
}
.nb-drawer-tag-x:hover { opacity: 1; }
.nb-drawer-tag-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-xs); }
.nb-drawer-tag-suggest {
    appearance: none;
    border: 1px dashed var(--border);
    background: var(--surface);
    color: var(--color-text-secondary);
    padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-btn);
    font-size: var(--fs-xs); cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}
.nb-drawer-tag-suggest:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nb-drawer-tag-input {
    height: 36px; padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-field);
    font-size: var(--fs-sm);
    background: var(--surface); color: var(--color-text);
}

.nb-drawer-fd-linked {
    display: flex; align-items: center; gap: var(--sp-sm);
    padding: 10px var(--sp-md);
    background: var(--primary-50);
    border: 1px solid var(--primary);
    border-radius: var(--r-btn);
    font-size: var(--fs-sm);
}
.nb-drawer-fd-list {
    display: flex; flex-direction: column; gap: var(--sp-xs);
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
}
.nb-drawer-fd-row {
    appearance: none; background: transparent; border: 0;
    text-align: left; padding: 10px var(--sp-md);
    border-bottom: 1px solid var(--border);
    cursor: pointer; display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-sm); align-items: center;
    transition: background 120ms ease;
    min-width: 0;
}
.nb-drawer-fd-row:last-child { border-bottom: 0; }
.nb-drawer-fd-row:hover { background: var(--surface-muted); }
.nb-drawer-fd-row.is-linked { background: var(--primary-50); }
.nb-drawer-fd-id {
    font-family: var(--font-mono);
    font-size: var(--fs-xs); font-weight: 600;
    color: var(--color-primary);
}
.nb-drawer-fd-subject {
    font-size: var(--fs-sm); color: var(--color-text);
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-drawer-fd-status {
    font-size: 11px; padding: 2px 6px;
    border-radius: var(--r-btn);
    background: var(--surface-muted);
    color: var(--text-muted);
}
.nb-drawer-fd-row.is-closed .nb-drawer-fd-status {
    background: var(--accent-50);
    color: var(--accent-dark);
}
.nb-drawer-fd-row.is-open .nb-drawer-fd-status {
    background: var(--warning-50);
    color: var(--warning);
}
.nb-drawer-fd-manual { margin-top: var(--sp-sm); }
.nb-drawer-fd-manual-row {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
}
.nb-drawer-fd-manual-input {
    max-width: 160px;
}
.nb-drawer-fd-manual summary {
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    padding: 6px 0;
}
.nb-drawer-fd-manual summary:hover { color: var(--color-primary); }
.nb-drawer-fd-manual input {
    height: 36px; width: 100%;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-field);
    font-size: var(--fs-sm);
    margin-top: 6px;
}

.nb-drawer-people { display: flex; flex-direction: column; gap: 6px; }
.nb-drawer-person {
    display: flex; align-items: center; gap: 10px;
    padding: var(--sp-sm) 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
}
.nb-drawer-person-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 600;
    flex-shrink: 0;
}
.nb-drawer-person-name { flex: 1; font-size: var(--fs-sm); color: var(--color-text); }
.nb-drawer-person-rm {
    appearance: none; background: transparent; border: 0;
    color: var(--color-text-muted); cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 12px;
    font-size: var(--fs-lg); line-height: 1;
}
.nb-drawer-person-rm:hover { color: var(--color-danger); background: var(--surface-muted); }
.nb-drawer-people-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-xs); }
.nb-drawer-person-add {
    appearance: none;
    border: 1px dashed var(--border);
    background: var(--surface);
    color: var(--color-text-secondary);
    padding: 6px 10px; border-radius: 999px;
    font-size: var(--fs-xs); cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--sp-xs);
    min-height: 32px;
}
.nb-drawer-person-add:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nb-drawer-person-plus { font-size: var(--fs-md); line-height: 1; }

.nb-drawer-status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-drawer-status-pill {
    appearance: none;
    padding: var(--sp-sm) 14px; min-height: 36px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--color-text);
    border-radius: var(--r-btn);
    font-size: var(--fs-sm); font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nb-drawer-status-pill:hover { border-color: var(--color-primary); }
.nb-drawer-status-pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--surface);
}
.nb-drawer-status-pill[data-status="resolved"].is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.nb-drawer-status-pill[data-status="archived"].is-active {
    background: var(--color-text-muted);
    border-color: var(--color-text-muted);
}

.nb-drawer-resolve {
    margin-top: var(--sp-md);
    padding: var(--sp-md);
    background: var(--accent-50);
    border: 1px solid var(--accent-dark);
    border-radius: var(--r-btn);
    display: flex; flex-direction: column; gap: var(--sp-sm);
    animation: nbDrawerReveal 200ms ease-out;
}
@keyframes nbDrawerReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nb-drawer-resolve textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-field);
    font-family: var(--font); font-size: var(--fs-sm);
    resize: vertical;
    background: var(--surface);
}

.nb-drawer-klant-current {
    display: flex; align-items: center; gap: 10px;
    padding: 10px var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
}
.nb-drawer-klant-label { font-weight: 500; color: var(--color-text); flex: 1; }
.nb-drawer-klant-pending {
    display: flex; align-items: center; gap: var(--sp-sm);
    margin-top: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border: 1px dashed var(--color-primary);
    border-radius: var(--r-btn);
    background: var(--surface-muted);
    font-size: var(--fs-sm);
}
.nb-drawer-klant-pending strong { color: var(--color-primary); }
.nb-drawer-klant-results {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    margin-top: var(--sp-xs);
    background: var(--surface);
}
.nb-drawer-klant-results:empty { display: none; }
.nb-composer-klant-row.is-current {
    cursor: default;
    opacity: 0.65;
}
.nb-composer-klant-row.is-current:hover { background: var(--surface); }

.nb-drawer-replies {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--sp-sm);
    max-height: 320px; overflow-y: auto;
}
.nb-drawer-reply {
    padding: 10px var(--sp-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    display: flex; flex-direction: column; gap: 6px;
}
.nb-drawer-reply-head {
    display: flex; align-items: center; gap: var(--sp-sm);
    font-size: var(--fs-xs);
}
.nb-drawer-reply-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--surface);
    font-weight: 600; font-size: 11px;
    flex-shrink: 0;
}
.nb-drawer-reply-author { color: var(--color-text); }
.nb-drawer-reply-time { font-size: 11px; }
.nb-drawer-reply-rm {
    margin-left: auto;
    background: transparent; border: none;
    color: var(--color-text-muted);
    font-size: 18px; line-height: 1;
    cursor: pointer; padding: 2px 6px;
    border-radius: 12px;
}
.nb-drawer-reply-rm:hover { color: var(--color-danger); background: var(--surface-muted); }
.nb-drawer-reply-body {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.nb-drawer-reply-actions {
    display: flex; justify-content: flex-end;
    margin-top: var(--sp-xs);
}
.nb-drawer-media-name {
    color: var(--color-primary);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
}
.nb-drawer-media-name:hover {
    text-decoration: underline;
}
button.nb-drawer-media-name {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    overflow-wrap: anywhere;
}
.nb-drawer-media-file {
    color: var(--color-text-muted);
    font-family: var(--font);
    font-size: var(--fs-xs);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.nb-drawer-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-sm);
    max-height: 280px;
    overflow-y: auto;
}
.nb-drawer-media-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-sm) 42px var(--sp-sm) var(--sp-sm);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--surface);
    font-family: var(--font);
    font-size: var(--fs-sm);
    line-height: 1.35;
    min-width: 0;
}
.nb-drawer-media-card.is-deleting {
    opacity: 0.58;
    pointer-events: none;
}
.nb-drawer-media-card strong {
    color: var(--color-text);
    font-family: var(--font);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}
.nb-drawer-media-type {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-50);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.nb-drawer-media-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: var(--color-danger);
    color: var(--surface);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.nb-drawer-media-remove:hover {
    background: var(--danger-700);
}
.nb-drawer-media-remove:disabled {
    cursor: wait;
    opacity: 0.68;
}
.nb-drawer-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
}
.nb-drawer-media-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
body.nb-note-lightbox-open {
    overflow: hidden;
}
.nb-note-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: grid;
    place-items: center;
    padding: clamp(10px, 2vw, 24px);
    font-family: var(--font);
}
.nb-note-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(10 16 24 / 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: zoom-out;
}
.nb-note-lightbox-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    height: min(820px, calc(100dvh - 32px));
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    border-radius: 8px;
    background: #0b1220;
    box-shadow: 0 30px 70px rgb(0 0 0 / 0.35);
}
.nb-note-lightbox-head {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: 0;
    border-bottom: 0;
    color: #fff;
    pointer-events: none;
}
.nb-note-lightbox-count {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    max-width: min(60vw, 360px);
    padding: 6px 10px;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: 999px;
    background: rgb(11 18 32 / 0.68);
    color: rgb(255 255 255 / 0.68);
    font-size: var(--fs-xs);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nb-note-lightbox-close {
    pointer-events: auto;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgb(11 18 32 / 0.78);
    cursor: pointer;
    font-size: 36px;
    line-height: 1;
    display: grid;
    place-items: center;
}
.nb-note-lightbox-close:hover,
.nb-note-lightbox-close:focus-visible {
    background: rgb(255 255 255 / 0.2);
    outline: none;
}
.nb-note-lightbox-stage {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    touch-action: pan-y;
}
.nb-note-lightbox-frame {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 12px;
}
.nb-note-lightbox-media {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}
video.nb-note-lightbox-media {
    width: 100%;
    height: 100%;
    background: #000;
}
.nb-note-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 54px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.nb-note-lightbox-nav:hover,
.nb-note-lightbox-nav:focus-visible {
    background: rgb(255 255 255 / 0.24);
    outline: none;
}
.nb-note-lightbox-nav.is-prev { left: 14px; }
.nb-note-lightbox-nav.is-next { right: 14px; }

.nb-drawer-revisions { display: flex; flex-direction: column; gap: var(--sp-sm); }
.nb-drawer-revision {
    padding: 10px var(--sp-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    display: flex; flex-direction: column; gap: 6px;
}
.nb-drawer-revision-meta {
    font-size: 11px; color: var(--color-text-muted);
    display: flex; justify-content: space-between; gap: var(--sp-sm);
}
.nb-drawer-revision-diff {
    font-size: var(--fs-xs); color: var(--color-text);
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.nb-drawer-revision-before { color: var(--color-text-muted); text-decoration: line-through; }
.nb-drawer-revision-arrow { color: var(--color-text-muted); }
.nb-drawer-revision-after { color: var(--color-text); font-weight: 500; }

.nb-drawer-foot {
    flex: 0 0 auto;
    display: flex; gap: var(--sp-sm); justify-content: flex-end; align-items: center;
    padding: 14px 16px;
    border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, white);
}

.nb-drawer-sheet-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgb(15 23 42 / 0.16);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3;
}
.nb-drawer-sheet {
    width: min(560px, 100%);
    max-height: calc(100% - 12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: 0;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 94%, white);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    box-shadow: 0 28px 60px rgb(15 23 42 / 0.18);
}
.nb-drawer-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, white) 0%, color-mix(in srgb, var(--surface-muted) 22%, var(--surface)) 100%);
}
.nb-drawer-sheet-head-text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}
.nb-drawer-sheet-head h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.nb-drawer-sheet-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}
.nb-drawer-sheet-close {
    appearance: none;
    background: color-mix(in srgb, var(--surface) 68%, var(--surface-muted));
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 14px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nb-drawer-sheet-body {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    padding: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white) 0%, var(--bg) 100%);
    min-width: 0;
}
.nb-drawer-sheet-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px 16px;
    border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--surface) 94%, white);
}
.nb-drawer-sheet-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
.nb-sheet-required {
    color: var(--warning);
    font-weight: 700;
}
.nb-status-sync-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--info-300, var(--border)) 80%, transparent);
    background: color-mix(in srgb, var(--info-50, var(--surface-muted)) 72%, white);
}
.nb-status-sync-card.is-disabled {
    border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
    background: color-mix(in srgb, var(--warning-50, var(--surface-muted)) 55%, white);
}
.nb-status-sync-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.nb-status-sync-head strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text);
}
.nb-status-sync-head p,
.nb-status-sync-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}
.nb-status-sync-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}
.nb-status-sync-choice input {
    margin-top: 2px;
}
.nb-status-sync-choice.is-muted {
    opacity: 0.72;
}

.nb-drawer-save-status {
    font-size: var(--fs-sm);
    margin-right: auto;
    color: var(--text-muted);
}
.nb-drawer-save-status.is-saving { color: var(--primary); }
.nb-drawer-save-status.is-dirty { color: var(--warning); }

.nb-conflict-banner {
    background: var(--warning-50);
    border: 1px solid var(--warning);
    color: var(--warning-900);
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--r-btn);
    margin-bottom: var(--sp-md);
}
.nb-conflict-banner p { margin: 0 0 var(--sp-sm) 0; font-size: var(--fs-md); }
.nb-conflict-actions { display: flex; gap: var(--sp-sm); }

.nb-drawer-confirm-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgb(15 23 42 / 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 4;
}
.nb-drawer-confirm-card {
    width: min(340px, 100%);
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 94%, white);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    box-shadow: 0 24px 52px rgb(15 23 42 / 0.18);
}
.nb-drawer-confirm-card h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.nb-drawer-confirm-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}
.nb-drawer-confirm-actions {
    display: grid;
    gap: 8px;
}

@media (max-width: 768px) {
    .nb-bulk-sheet-layer {
        align-items: end;
        padding: 0;
    }
    .nb-bulk-sheet {
        width: 100%;
        max-height: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
    .nb-drawer {
        left: 0;
        width: 100vw;
        width: auto;
        max-width: 100%;
        top: auto; bottom: 0;
        right: 0;
        max-height: calc(100dvh - 12px);
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)));
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        animation: nbDrawerSlideUp 220ms ease-out;
        overflow-x: hidden;
        overflow-x: clip;
    }
    @keyframes nbDrawerSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .nb-drawer-handle { display: block; }
    .nb-drawer-head {
        padding: 14px 16px 12px;
    }
    .nb-drawer-tab { padding: 12px 14px; font-size: var(--fs-sm); }
    .nb-drawer-body { padding: 14px; }
    .nb-drawer-foot {
        flex-wrap: wrap;
        padding: var(--sp-md) 14px;
    }
    .nb-drawer-save-status {
        flex: 1 1 100%;
        margin-right: 0;
        overflow-wrap: anywhere;
    }
    .nb-drawer-foot .btn {
        flex: 1 1 120px;
        justify-content: center;
        min-width: 0;
        white-space: normal;
    }
    .nb-drawer-status-pill { min-height: 44px; padding: var(--sp-md) var(--sp-lg); font-size: var(--fs-md); }
    .nb-drawer-fd-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px var(--sp-md);
    }
    .nb-drawer-fd-id,
    .nb-drawer-fd-subject,
    .nb-drawer-fd-status {
        grid-column: 1;
        justify-self: start;
    }
    .nb-drawer-fd-subject {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .nb-drawer-fd-manual-row {
        flex-wrap: wrap;
    }
    .nb-drawer-fd-manual-input {
        flex: 1 1 140px;
        max-width: none;
    }
    .nb-drawer-media-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .nb-note-lightbox {
        padding: 0;
        place-items: stretch;
    }
    .nb-note-lightbox-shell {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }
    .nb-note-lightbox-head {
        top: max(10px, env(safe-area-inset-top));
        left: 10px;
        right: 10px;
    }
    .nb-note-lightbox-count {
        max-width: calc(100vw - 92px);
        min-height: 34px;
        font-size: 11px;
    }
    .nb-note-lightbox-close {
        width: 58px;
        height: 58px;
        font-size: 40px;
    }
    .nb-note-lightbox-frame {
        padding: 8px 0 18px;
    }
    .nb-note-lightbox-media {
        border-radius: 0;
    }
    .nb-note-lightbox-nav {
        top: auto;
        bottom: 18px;
        transform: none;
        width: 46px;
        height: 46px;
        font-size: 32px;
        background: rgb(11 18 32 / 0.76);
    }
    .nb-note-lightbox-nav.is-prev { left: 12px; }
    .nb-note-lightbox-nav.is-next { right: 12px; }
    .nb-drawer-person { padding: 10px var(--sp-md); }
    .nb-drawer-person-rm { width: 44px; height: 44px; }
    .nb-drawer-confirm-layer {
        align-items: end;
        padding: 12px;
    }
    .nb-drawer-confirm-card {
        width: 100%;
        border-radius: 20px;
    }
    .nb-drawer-sheet-layer {
        align-items: end;
        padding: 0;
    }
    .nb-drawer-sheet {
        width: 100%;
        max-height: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
    .nb-drawer-sheet-head {
        padding: 16px 16px 12px;
    }
    .nb-status-sync-head {
        flex-direction: column;
    }
    .nb-drawer-sheet-body {
        padding: 14px;
    }
    .nb-drawer-sheet-foot {
        padding: 14px;
        flex-wrap: wrap;
    }
    .nb-drawer-sheet-foot .btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
    }
}

/* ============================================================
   Notitiebord-instellingen — uitgebreide forms (cats / tags / defaults)
   ============================================================ */
.ni-section { margin-bottom: 20px; }
.ni-section-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.ni-section-head h3 { margin: 0; font-size: 15px; }
.ni-section-hint { font-size: 12px; color: var(--color-text-secondary); margin: 0 0 10px; }
.ni-cat-list { display: flex; flex-direction: column; gap: 6px; }
.ni-cat-row {
    display: grid;
    grid-template-columns: 1fr 1fr 200px 80px auto;
    gap: 8px; align-items: center;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ni-cat-row.is-inactive { opacity: 0.55; }
.ni-cat-row .form-input,
.ni-cat-row select { height: 36px; }
.ni-cat-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.ni-cat-add {
    margin-top: 8px;
    padding: 10px;
    background: var(--surface-muted);
    border: 1px dashed var(--border);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr 200px 80px auto;
    gap: 8px; align-items: center;
}
.ni-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ni-tag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px;
    background: var(--primary-50);
    color: var(--primary);
    border-radius: 4px;
    font-size: 12px;
}
.ni-defaults-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .ni-cat-row,
    .ni-cat-add { grid-template-columns: 1fr; }
    .ni-defaults-grid { grid-template-columns: 1fr; }
}

/* === Notitiebord Phase 2 — keyboard, search highlight, pin, typeahead, kanban counters === */

.notes-search-mark {
    background: var(--warning-50);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

[data-kbd-focus] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 4px;
}

.nb-pin-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nb-shortcut-help {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nb-shortcut-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.42);
}
.nb-shortcut-help-dialog {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    max-width: 420px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--e3);
}
.nb-shortcut-help-dialog h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}
.nb-shortcut-help-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 16px;
    margin: 0;
    align-items: center;
}
.nb-shortcut-help-list dt {
    margin: 0;
}
.nb-shortcut-help-list dd {
    margin: 0;
    font-size: 13px;
    color: var(--color-text);
}
.nb-shortcut-help-list kbd {
    display: inline-block;
    min-width: 28px;
    padding: 3px 8px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text);
    text-align: center;
    line-height: 1;
}
@media (max-width: 480px) {
    .nb-shortcut-help-dialog {
        width: 94vw;
        padding: 18px;
    }
    .nb-shortcut-help-list {
        grid-template-columns: max-content 1fr;
        gap: 8px 12px;
    }
}

.nb-drawer-pin {
    appearance: none;
    background: color-mix(in srgb, var(--surface) 68%, var(--surface-muted));
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    min-width: 46px;
    height: 36px;
    border-radius: 14px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.nb-drawer-pin:hover {
    background: var(--surface);
    color: var(--color-text);
}
.nb-drawer-pin.is-pinned {
    background: var(--warning-50);
    color: var(--warning);
    border-color: var(--warning);
}

.nb-tag-typeahead {
    position: fixed;
    z-index: 2100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--e2);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px;
    min-width: 200px;
}
.nb-tag-typeahead-item {
    appearance: none;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    border-radius: 10px;
}
.nb-tag-typeahead-item:hover,
.nb-tag-typeahead-item:focus {
    background: var(--surface-muted);
    color: var(--color-primary);
}
@media (max-width: 480px) {
    .nb-tag-typeahead {
        left: 8px !important;
        right: 8px;
        width: auto !important;
        max-width: calc(100vw - 16px);
    }
}

.nb-kcol-counts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.nb-kcol-overdue {
    color: var(--color-warning);
    font-weight: 600;
}
.nb-kcol-critical {
    color: var(--color-danger);
    font-weight: 600;
}
@media (max-width: 480px) {
    .nb-kcol-counts {
        font-size: 14px;
        gap: 4px;
    }
}

/* ============================================================
   Phase 3 — Mobile + error handling
   Tokens only — geen hardcoded hex.
   ============================================================ */

/* Task 3.1 — Drawer fullscreen <768px */
@media (max-width: 768px) {
    .nb-drawer {
        width: auto;
        max-width: 100%;
        right: 0;
        left: 0;
    }
    .nb-drawer-backdrop {
        display: none;
    }
}

/* Task 3.3 — Touch-target audit: min 44x44 op mobiel */
@media (max-width: 768px) {
    .btn-icon, .nb-drawer-close, .nb-drawer-sheet-close, .nb-kcol-action, .nb-drawer-tab,
    .nb-drawer-pin, .nb-mfilter-tag, .nb-row-action {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nb-row-action {
        position: relative;
    }
    .nb-row-action::before {
        content: '';
        position: absolute;
        inset: -8px;
    }
}

/* Task 3.4 — Offline banner */
.nb-offline-banner {
    position: sticky;
    top: 0;
    z-index: 250;
    background: var(--warning);
    color: var(--surface);
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
}

/* Task 3.5 — Retry banner */
.nb-retry-banner {
    position: sticky;
    top: 0;
    z-index: 250;
    background: var(--warning-50);
    border-bottom: 1px solid var(--warning);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.nb-retry-banner button {
    background: var(--warning);
    color: var(--surface);
    border: 0;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    min-height: 32px;
}
.nb-retry-banner button[aria-label="Negeer"] {
    background: transparent;
    color: var(--color-text-secondary);
    margin-left: auto;
    font-size: 18px;
    padding: 4px 8px;
}
@media (max-width: 768px) {
    .nb-retry-banner button {
        min-width: 44px;
        min-height: 44px;
    }
}

#page-notities .nb-sync-status {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--color-border));
    border-radius: var(--r-card);
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

#page-notities .nb-sync-status strong {
    display: block;
    color: var(--color-text);
    font-size: 13px;
}

#page-notities .nb-sync-status span {
    color: var(--color-text-secondary);
}

#page-notities .nb-sync-status.is-offline,
#page-notities .nb-sync-status.has-blocked {
    border-color: color-mix(in srgb, var(--warning) 54%, var(--color-border));
    background: color-mix(in srgb, var(--warning-50) 76%, var(--surface));
}

#page-notities .nb-sync-pending {
    background: color-mix(in srgb, var(--warning-50) 70%, var(--surface));
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}

@media (max-width: 768px) {
    #page-notities .nb-sync-status {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============== NOTITIES DATUM PRESETS ============== */
#page-notities .nb-date-presets {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
#page-notities .nb-date-preset {
    min-height: 32px;
}
#page-notities .nb-date-preset:not(.chip-primary) {
    color: var(--text-primary, #111827);
}

@media (max-width: 768px) {
    #page-notities .nb-date-presets {
        width: 100%;
        gap: 6px;
    }
    #page-notities .nb-date-preset {
        min-height: 36px;
        flex: 1 1 calc(50% - 6px);
    }
}

/* ============================================================
   NOTITIES CARDSTACK — losse kaarten op zachte achtergrond.
   Phase 1: additive achter ?view=cardstack. Phase 2: default.
   Edge-to-edge mobile via .page-container[data-mobile-bleed=true]
   (rrb-responsive.css v2.1.0).
   ============================================================ */
#page-notities .notes-cardstack-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

/* Filter-pills toolbar — pills hebben elk een eigen border, dus geen inner container-fill */
#page-notities .nb-cs-pills,
#page-notities .nb-cs-pillrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
/* Pill base — elke pill heeft standaard een 1.5px border in eigen categorie-kleur,
   tekst in dezelfde kleur. Active-state krijgt lichte tint-fill in dezelfde familie. */
#page-notities .nb-cs-pill {
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--nb-pill-color, var(--border));
    padding: 5px 11px;
    border-radius: var(--r-btn);
    font: 600 13px/1 var(--font);
    color: var(--nb-pill-color, var(--text-muted));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#page-notities .nb-cs-pill:hover {
    background: var(--nb-pill-tint, var(--surface-muted));
}
#page-notities .nb-cs-pill.is-active {
    background: var(--nb-pill-tint, var(--surface-muted));
    box-shadow: inset 0 0 0 0.5px var(--nb-pill-color, var(--border));
}
#page-notities .nb-cs-pill-count {
    background: var(--nb-pill-tint, var(--surface-muted));
    color: var(--nb-pill-color, var(--text-muted));
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#page-notities .nb-cs-pill.is-active .nb-cs-pill-count {
    background: var(--surface);
}

/* Categorie-kleuren — RRB style-card tokens */
#page-notities .nb-cs-pill-mine_open { --nb-pill-color: var(--primary); --nb-pill-tint: var(--primary-50, #f2f7fb); }
#page-notities .nb-cs-pill-scope     { --nb-pill-color: var(--accent-800, #007a1d); --nb-pill-tint: var(--accent-50, #eef9f1); }
#page-notities .nb-cs-pill-update    { --nb-pill-color: #7e22ce; --nb-pill-tint: #f3e8ff; }
/* RRB-EXCEPTION: yellow shade for Bezig (work-in-progress) to differentiate
   from orange Filters / Met Ticket — shared tokens have no yellow palette. */
#page-notities .nb-cs-pill-busy      { --nb-pill-color: #ca8a04; --nb-pill-tint: #fef9c3; }
#page-notities .nb-cs-pill-done      { --nb-pill-color: var(--accent-500, #0fa74a); --nb-pill-tint: var(--accent-50, #eef9f1); }
#page-notities .nb-cs-pill-archive   { --nb-pill-color: var(--text-muted); --nb-pill-tint: var(--surface-muted); }
#page-notities .nb-cs-pill-fd        { --nb-pill-color: var(--warning-700, #c2410c); --nb-pill-tint: var(--warning-50, #fff7ed); }
#page-notities .nb-cs-pill-more      { --nb-pill-color: var(--warning, #ef6c00); --nb-pill-tint: var(--warning-50, #fff7ed); display: none; }
#page-notities .nb-cs-pill svg { flex-shrink: 0; opacity: 0.9; }
#page-notities .nb-cs-label-mobile { display: none; }
#page-notities .nb-cs-divider {
    width: 1px;
    align-self: stretch;
    margin: 4px 4px;
    background: var(--border);
    opacity: 0.7;
}
/* Compact search-bar — RRB primary-200 ring, smaller padding */
#page-notities .notes-searchbar {
    border: 1.5px solid var(--primary-200, var(--primary));
    border-radius: 10px;
    padding: 7px 10px;
    transition: border-color var(--t), box-shadow var(--t);
    background: var(--surface);
}
#page-notities .notes-searchbar:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(26 106 163 / 0.12);
}
#page-notities .notes-searchbar .search-icon { color: var(--primary); }
#page-notities .notes-searchbar .search-input {
    font-size: 13px;
    min-height: 20px;
}

/* Card-stack pane — zachte surround */
#page-notities .notes-cardstack-pane {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-sm);
}
#page-notities .notes-cardstack-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 1025px) {
    #page-notities .notes-cardstack-rows {
        display: grid;
        grid-template-columns: repeat(2, minmax(min(100%, 27rem), 1fr));
        align-items: start;
    }
}
#page-notities .notes-cardstack-empty {
    padding: var(--sp-lg);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Single card row */
#page-notities .notes-cardrow {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-md);
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--sp-sm);
    cursor: pointer;
    position: relative;
    transition:
        border-color var(--t) var(--ease),
        box-shadow var(--t) var(--ease),
        transform var(--t) var(--ease),
        background var(--t) var(--ease);
}
#page-notities .notes-cardrow:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}
#page-notities .notes-cardrow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Priority left strip — single source of priority signal (no badge) */
#page-notities .notes-cardrow.nb-prio-crit { border-left-color: var(--danger); }
#page-notities .notes-cardrow.nb-prio-high { border-left-color: var(--warning); }
#page-notities .notes-cardrow.nb-prio-norm { border-left-color: var(--primary); }
#page-notities .notes-cardrow.nb-prio-low  { border-left-color: var(--border-strong); }

/* Pin = corner icon (top-right), warning kleur, geen bg */
#page-notities .notes-cardrow .nb-pin-corner {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--warning);
    pointer-events: none;
    line-height: 0;
}
#page-notities .notes-cardrow .nb-pin-corner svg { display: block; }

/* Color legend strip — verklaart linkerrand-kleurcodering */
#page-notities .nb-cs-legend {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 8px var(--sp-md);
    margin-bottom: var(--sp-sm);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    color: var(--text-muted);
    font-size: 11px;
    flex-wrap: wrap;
}
#page-notities .nb-cs-legend-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}
#page-notities .nb-cs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#page-notities .nb-cs-legend-pin {
    margin-left: auto;
    color: var(--warning);
}
#page-notities .nb-cs-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
#page-notities .nb-cs-swatch-crit { background: var(--danger); }
#page-notities .nb-cs-swatch-high { background: var(--warning); }
#page-notities .nb-cs-swatch-norm { background: var(--primary); }
#page-notities .nb-cs-swatch-low  { background: var(--border-strong); }

/* Checkbox column */
#page-notities .notes-cardrow-check {
    padding-top: 2px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
#page-notities .notes-cardrow-check input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
#page-notities .notes-cardrow-check.is-disabled {
    width: 16px;
    height: 16px;
}

/* Body column */
#page-notities .notes-cardrow-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
#page-notities .notes-cardrow-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
#page-notities .notes-cardrow-customer {
    font: 600 var(--fs-md)/1.3 var(--font);
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}
#page-notities .notes-cardrow-klant {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
#page-notities .notes-cardrow-id {
    color: var(--text-subtle);
    font-weight: 500;
    font-size: var(--fs-xs);
    flex-shrink: 0;
}
#page-notities .notes-cardrow-preview {
    color: var(--text);
    font: 400 var(--fs-sm)/1.5 var(--font);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
#page-notities .notes-cardrow-footer {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
    font: 400 var(--fs-xs)/1.3 var(--font);
    color: var(--text-muted);
}
#page-notities .notes-cardrow-meta-line {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}
#page-notities .notes-cardrow-date {
    color: var(--text-subtle);
    flex-shrink: 0;
}
#page-notities .notes-cardrow-origin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-subtle);
    flex-shrink: 0;
    font-size: var(--fs-xs);
    white-space: nowrap;
}
#page-notities .notes-cardrow-origin svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
/* Mobile/tablet ≤1024px — cardstack filter bar becomes a single horizontal
   scrolling row. All 7 pills stay reachable without eating vertical space.
   Edge-fade hints scrollability, mobile labels (Mij/Bezig/Dicht/Archief)
   keep pills compact. */
@media (max-width: 1024px) {
    #page-notities .notes-cardstack-pane { padding: 6px; }
    #page-notities .notes-cardstack-rows { gap: 6px; }

    #page-notities .notes-cardstack-wrap > .nb-cs-pills {
        position: relative;
    }
    #page-notities .notes-cardstack-wrap > .nb-cs-pills::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: 18px;
        background: linear-gradient(to right, transparent, var(--surface, #fff));
        pointer-events: none;
        opacity: 0.9;
    }

    #page-notities .nb-cs-pills,
    #page-notities .nb-cs-pillrow {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 2px 2px 4px;
        gap: 6px;
    }
    #page-notities .nb-cs-pills::-webkit-scrollbar,
    #page-notities .nb-cs-pillrow::-webkit-scrollbar { display: none; }

    #page-notities .nb-cs-pill {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 5px 10px;
        font-size: 12.5px;
        line-height: 1.2;
        white-space: nowrap;
        scroll-snap-align: start;
    }
    #page-notities .nb-cs-pill svg { width: 12px; height: 12px; }
    #page-notities .nb-cs-pill-count {
        font-size: 11px;
        padding: 1px 5px;
    }
    #page-notities .nb-cs-pill-more,
    #page-notities [data-cardstack-scope="mij"] {
        display: inline-flex;
    }
    /* Filters pill is the primary entry point on mobile — pin it first. */
    #page-notities .nb-cs-pill-more {
        order: -1;
        scroll-snap-align: start;
    }
    #page-notities .nb-cs-divider { display: none; }
    #page-notities .nb-cs-label-full { display: none; }
    #page-notities .nb-cs-label-mobile { display: inline; }
}

/* Phone ≤480px — works with .page-container[data-mobile-bleed=true]
   to give cards full screen width. Drop pane border + radius so the
   soft-grey background reaches viewport edges. */
@media (max-width: 480px) {
    #page-notities .page-header {
        align-items: stretch;
        gap: 8px;
    }
    #page-notities .nb-header-cluster {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
    }
    #page-notities #notities-new {
        width: 100%;
        max-width: none;
        justify-content: center;
    }
    #page-notities .nb-view-toggle {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #page-notities .notes-toolbar {
        border-radius: 10px;
        margin-bottom: 8px;
    }
    /* Cardstack pillrow is sized in the ≤1024px block above (horizontal scroll). */
    .page-container[data-mobile-bleed="true"] #page-notities .notes-cardstack-pane {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        padding: 4px;
    }
    .page-container[data-mobile-bleed="true"] #page-notities .notes-cardstack-rows {
        gap: 4px;
    }
    #page-notities .notes-cardrow {
        padding: 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }
    #page-notities .notes-cardrow-customer { font-size: var(--fs-sm); line-height: 1.35; }
    #page-notities .notes-cardrow-preview { font-size: 14px; }
    #page-notities .notes-cardrow-meta .badge { font-size: 14px; padding: 1px 6px; }
    #page-notities .notes-cardrow-footer {
        gap: 5px 8px;
        font-size: 12px;
    }
    #page-notities .notes-cardrow-origin {
        width: 100%;
    }
    #page-notities .notes-cardrow-check {
        padding-top: 0;
    }
    #page-notities .notes-cardrow-check input {
        width: 18px;
        height: 18px;
    }
    .page-container[data-mobile-bleed="true"] #page-notities .nb-cs-legend {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        margin-bottom: 0;
        padding: 5px 8px;
        font-size: 11px;
        gap: 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .page-container[data-mobile-bleed="true"] #page-notities .nb-cs-legend::-webkit-scrollbar {
        display: none;
    }
    #page-notities .nb-cs-legend-item {
        flex: 0 0 auto;
        gap: 3px;
    }
    #page-notities .nb-cs-swatch {
        width: 7px;
        height: 7px;
        border-radius: 2px;
    }
    #page-notities .nb-cs-legend-pin {
        display: none;
    }
    #page-notities .nb-cs-legend-title { font-size: 10px; flex: 0 0 auto; }
    #page-notities .nb-pin-corner { top: 6px; right: 8px; }
    #page-notities .nb-pin-corner svg { width: 11px; height: 11px; }
}

/* ===================================================================== */
/* Planning (agenda) — Fase B. Structural only; colours via design tokens */
/* and per-group --group-color custom property (no hardcoded hex here).   */
/* ===================================================================== */
#page-planning .planning-header { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-sm, 8px); }
#page-planning .planning-nav { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs, 4px); }
#page-planning .planning-range { font-weight: 600; color: var(--color-text);
  margin: 0 var(--space-sm, 8px); min-width: 12ch; }

#page-planning .planning-vtabs { display: inline-flex; border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px); overflow: hidden; }
#page-planning .planning-vtab { border: 0; background: var(--color-card); color: var(--color-text-muted);
  padding: 6px 12px; cursor: pointer; font-size: var(--font-size-small, 13px); }
#page-planning .planning-vtab + .planning-vtab { border-left: 1px solid var(--color-border); }
#page-planning .planning-vtab.is-on { background: var(--color-primary); color: #fff; }

#page-planning .planning-filterbar { display: flex; flex-direction: column;
  gap: var(--space-xs, 4px); margin: var(--space-sm, 8px) 0; }
#page-planning .planning-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-xs, 4px); }
#page-planning .planning-chip { border: 1px solid var(--color-border); background: var(--color-card);
  color: var(--color-text-muted); border-radius: 999px; padding: 3px 12px; cursor: pointer;
  font-size: var(--font-size-small, 13px); display: inline-flex; align-items: center; gap: 6px; }
#page-planning .planning-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--group-color, var(--color-text-muted)); flex: 0 0 auto; }
#page-planning .planning-chip-m::before { background: var(--member-color, var(--color-primary)); }
#page-planning .planning-chip.is-on { color: var(--color-text); border-color: var(--group-color, var(--color-primary));
  background: color-mix(in srgb, var(--group-color, var(--color-primary)) 14%, var(--color-card)); }
#page-planning .planning-chip-m { opacity: .58; }
#page-planning .planning-chip-m.is-on { opacity: 1; border-color: var(--member-color, var(--color-primary));
  background: color-mix(in srgb, var(--member-color, var(--color-primary)) 14%, var(--color-card)); }

#page-planning .planning-viewport { border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px); background: var(--color-card); overflow: auto; }
#page-planning .planning-weekhead,
#page-planning .planning-weekbody { display: grid; grid-template-columns: 56px repeat(7, minmax(80px, 1fr)); }
#page-planning .planning-weekhead { position: sticky; top: 0; z-index: 2;
  background: var(--color-card); border-bottom: 1px solid var(--color-border); }
#page-planning .planning-dayhead { padding: 6px 8px; text-align: center; font-weight: 600;
  font-size: var(--font-size-small, 13px); color: var(--color-text-muted);
  border-left: 1px solid var(--color-border); }
#page-planning .planning-dayhead-member { box-shadow: inset 0 -3px 0 var(--member-color, var(--color-primary)); }
#page-planning .planning-corner { border-right: 1px solid var(--color-border); }

#page-planning .planning-ruler { display: flex; flex-direction: column; }
#page-planning .planning-hour { font-size: 11px; color: var(--color-text-muted);
  text-align: right; padding-right: 6px; box-sizing: border-box;
  border-top: 1px solid var(--color-border); }
#page-planning .planning-daycol { position: relative; border-left: 1px solid var(--color-border);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent 45px,
    color-mix(in srgb, var(--color-border) 60%, transparent) 45px,
    color-mix(in srgb, var(--color-border) 60%, transparent) 46px); }
#page-planning .planning-daycol.is-today { background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-card)); }

#page-planning .planning-ev { position: absolute; left: 3px; right: 3px; box-sizing: border-box;
  border-radius: var(--radius-md, 6px); padding: 2px 6px; overflow: hidden; cursor: pointer;
  border-left: 4px solid var(--group-color, var(--color-primary));
  background: color-mix(in srgb, var(--group-color, var(--color-primary)) 16%, var(--color-card));
  font-size: var(--font-size-small, 13px); line-height: 1.25; }
#page-planning .planning-ev.is-external { border-left-color: var(--group-color, var(--color-text-muted));
  background: color-mix(in srgb, var(--group-color, var(--color-text-muted)) 9%, var(--color-card));
  opacity: .86; cursor: default; }
#page-planning .planning-ev-time { font-weight: 600; margin-right: 4px; }
#page-planning .planning-ev-title { color: var(--color-text); }
/* Drag-to-reschedule: touch-action:none stops the page scrolling while dragging. */
#page-planning .planning-ev.is-draggable { cursor: grab; touch-action: none; }
#page-planning .planning-ev.is-dragging { cursor: grabbing; opacity: .85; z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
/* Smalle sub-kolommen bij overlap: hover/focus tilt het blokje leesbaar bovenop. */
#page-planning .planning-ev:hover { z-index: 6; opacity: 1; min-width: 96px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
#page-planning .planning-placeholder { padding: var(--space-lg, 16px); color: var(--color-text-muted); }

/* Day (resource) view — one column per monteur, --pl-cols set inline by JS. */
#page-planning .planning-dayhead-row,
#page-planning .planning-daybody { display: grid; grid-template-columns: 56px repeat(var(--pl-cols, 1), minmax(120px, 1fr)); }
#page-planning .planning-dayhead-row { position: sticky; top: 0; z-index: 2;
  background: var(--color-card); border-bottom: 1px solid var(--color-border); }

/* Month view — 6×7 grid of collapsed appointment chips. */
#page-planning .planning-monthhead,
#page-planning .planning-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#page-planning .planning-monthhead { position: sticky; top: 0; z-index: 2;
  background: var(--color-card); border-bottom: 1px solid var(--color-border); }
#page-planning .planning-mwd { padding: 6px 8px; text-align: center; font-weight: 600;
  font-size: var(--font-size-small, 13px); color: var(--color-text-muted); }
#page-planning .planning-mcell { min-height: 96px; padding: 4px; box-sizing: border-box;
  border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 2px; }
#page-planning .planning-mcell:nth-child(7n) { border-right: 1px solid var(--color-border); }
#page-planning .planning-mcell.is-other { background: var(--color-card-alt, var(--color-bg)); }
#page-planning .planning-mcell.is-other .planning-mdate { color: var(--color-text-muted); opacity: .6; }
#page-planning .planning-mcell.is-today { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card)); }
#page-planning .planning-mdate { font-size: var(--font-size-small, 13px); font-weight: 600;
  color: var(--color-text); align-self: flex-end; }
#page-planning .planning-mchip { display: block; width: 100%; box-sizing: border-box; text-align: left;
  border: 0; border-left: 3px solid var(--group-color, var(--color-primary));
  background: color-mix(in srgb, var(--group-color, var(--color-primary)) 16%, var(--color-card));
  border-radius: var(--radius-md, 6px); padding: 1px 5px; cursor: pointer;
  font-size: var(--font-size-small, 13px); line-height: 1.3; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-planning .planning-mchip.is-external { border-left-color: var(--group-color, var(--color-text-muted));
  background: color-mix(in srgb, var(--group-color, var(--color-text-muted)) 8%, var(--color-card));
  opacity: .86; }
#page-planning .planning-mchip-time { font-weight: 600; }
#page-planning .planning-mmore { font-size: 11px; color: var(--color-text-muted); padding: 0 5px; }

/* Create/edit paneel internals. The overlay mounts on document.body (outside
   #page-planning), so these are scoped under .dashboard-modal-panel, not the page. */
.dashboard-modal-panel .planning-req { color: var(--color-danger); }
.dashboard-modal-panel .planning-hint { color: var(--color-text-muted); font-size: var(--font-size-small, 13px); }
.dashboard-modal-panel .planning-cust-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 2px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); max-height: 240px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.dashboard-modal-panel .planning-cust-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.dashboard-modal-panel .planning-cust-item:last-child { border-bottom: 0; }
.dashboard-modal-panel .planning-cust-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card)); }
.dashboard-modal-panel .planning-cust-name { font-size: 14px; color: var(--color-text); }
.dashboard-modal-panel .planning-cust-meta { font-size: var(--font-size-small, 13px); color: var(--color-text-muted); }
.dashboard-modal-panel .planning-cust-empty { padding: 8px 10px; font-size: var(--font-size-small, 13px); color: var(--color-text-muted); }
.dashboard-modal-panel .planning-cust-picked { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--color-card-alt, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); font-size: 14px; color: var(--color-text); }
.dashboard-modal-panel .planning-cust-clear { background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.dashboard-modal-panel .planning-loc { display: flex; flex-direction: column; gap: 4px; }
.dashboard-modal-panel .planning-locopt { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--color-text); cursor: pointer; }
.dashboard-modal-panel .planning-loc-manual { margin-top: 4px; }
.dashboard-modal-panel .planning-notes-info { margin: 4px 0 12px; padding: 8px 10px; background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card)); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md, 6px); font-size: var(--font-size-small, 13px); color: var(--color-text); }
.dashboard-modal-panel .planning-estimates { display: flex; flex-direction: column; gap: 6px; }
.dashboard-modal-panel .planning-estimate-opt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); background: var(--color-card-alt, var(--color-bg)); color: var(--color-text); font-size: 14px; cursor: pointer; }
.dashboard-modal-panel .planning-estimate-opt input { margin-top: 2px; }
.dashboard-modal-panel .planning-estimate-empty { padding: 8px 10px; border: 1px dashed var(--color-border); border-radius: var(--radius-md, 6px); color: var(--color-text-muted); font-size: var(--font-size-small, 13px); }
.dashboard-modal-panel .planning-estimate-bynr { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: 6px; }
.dashboard-modal-panel .planning-estimate-bynr-row { display: flex; gap: 8px; }
.dashboard-modal-panel .planning-estimate-bynr-row .form-input { flex: 1; }
.dashboard-modal-panel .planning-estimate-bynr-msg { font-size: var(--font-size-small, 13px); color: var(--color-text-muted); }
.dashboard-modal-panel .planning-estimate-bynr-msg.is-ok { color: var(--color-success); }
.dashboard-modal-panel .planning-estimate-bynr-msg.is-err { color: var(--color-danger); }
.dashboard-modal-panel .planning-preview { margin: 4px 0 0; border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); background: var(--color-card-alt, var(--color-bg)); }
.dashboard-modal-panel .planning-preview-summary { padding: 8px 10px; cursor: pointer; font-size: var(--font-size-small, 13px); font-weight: 600; color: var(--color-primary); list-style: none; }
.dashboard-modal-panel .planning-preview-summary::-webkit-details-marker { display: none; }
.dashboard-modal-panel .planning-preview-summary::before { content: "\25B8  "; }
.dashboard-modal-panel .planning-preview[open] .planning-preview-summary::before { content: "\25BE  "; }
.dashboard-modal-panel .planning-preview-body { padding: 0 10px 10px; }
.dashboard-modal-panel .planning-preview-frame-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); background: var(--color-card); overflow: hidden; }
.dashboard-modal-panel .planning-preview-doc { max-height: 320px; overflow: auto; padding: 10px 12px; font-size: var(--font-size-small, 13px); color: var(--color-text); }
.dashboard-modal-panel .planning-preview-doc p { margin: 4px 0; }
.dashboard-modal-panel .planning-preview-doc ul { margin: 4px 0; padding-left: 18px; }
.dashboard-modal-panel .planning-preview-doc a { color: var(--color-primary); }
.dashboard-modal-panel .planning-preview-fieldshead { margin: 12px 0 4px; font-size: var(--font-size-small, 13px); font-weight: 600; color: var(--color-text); }
.dashboard-modal-panel .planning-preview-fields { margin: 0; padding-left: 18px; font-size: var(--font-size-small, 13px); color: var(--color-text); display: flex; flex-direction: column; gap: 3px; }
.dashboard-modal-panel .planning-grpchecks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dashboard-modal-panel .planning-grpcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); cursor: pointer; }
.dashboard-modal-panel .planning-grpdot { width: 10px; height: 10px; border-radius: 3px; background: var(--group-color, var(--color-primary)); }
.dashboard-modal-panel .planning-memberchecks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dashboard-modal-panel .planning-membercheck { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text); cursor: pointer; }
.dashboard-modal-panel .planning-memberdot { width: 10px; height: 10px; border-radius: 50%; background: var(--member-color, var(--color-primary)); }
.dashboard-modal-panel .planning-dtrow { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 12px; }
.dashboard-modal-panel .planning-form-error { margin: 12px 0 0; color: var(--color-danger); font-size: var(--font-size-small, 13px); }
/* Detail/bewerk paneel (slice 5). */
.dashboard-modal-panel .planning-detail { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.dashboard-modal-panel .planning-detail-row { display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--color-text); }
.dashboard-modal-panel .planning-detail-label { flex: 0 0 84px; color: var(--color-text-muted); font-size: var(--font-size-small, 13px); }
.dashboard-modal-panel .planning-detail-val { flex: 1 1 auto; min-width: 0; }
.dashboard-modal-panel .planning-grouptag { display: inline-flex; align-items: center; padding: 1px 8px 1px 7px; margin: 0 4px 4px 0; border-radius: var(--radius-md, 6px); border-left: 3px solid var(--group-color, var(--color-primary)); background: color-mix(in srgb, var(--group-color, var(--color-primary)) 16%, var(--color-card)); font-size: var(--font-size-small, 13px); color: var(--color-text); }
.dashboard-modal-panel .planning-targets { display: flex; flex-direction: column; gap: 4px; }
.dashboard-modal-panel .planning-target { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--color-card-alt, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); font-size: 14px; color: var(--color-text); }
.dashboard-modal-panel .planning-notes-ro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dashboard-modal-panel .planning-note-ro { padding: 7px 10px; background: var(--color-card-alt, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); }
.dashboard-modal-panel .planning-note-text { font-size: 14px; color: var(--color-text); white-space: pre-wrap; }
.dashboard-modal-panel .planning-note-meta { margin-top: 2px; font-size: var(--font-size-small, 13px); color: var(--color-text-muted); }
.dashboard-modal-panel .planning-detail-body { font-size: 14px; color: var(--color-text); white-space: pre-wrap; }
/* Externe Outlook-events: klikbaar voor admins (verplaats/dupliceer/verwijder). */
#page-planning .planning-ev.is-actionable,
#page-planning .planning-mchip.is-actionable { cursor: pointer; }
/* Tijd-grid popover: uren-grid + kwartierknoppen i.p.v. het scroll-dropdownmenu. */
.dashboard-modal-panel .planning-dtrow .form-group { position: relative; }
.dashboard-modal-panel .planning-timegrid {
  position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px;
  min-width: 236px; padding: 8px; background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
}
.dashboard-modal-panel .planning-dtrow .form-group:last-child .planning-timegrid { left: auto; right: 0; }
.dashboard-modal-panel .planning-tg-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.dashboard-modal-panel .planning-tg-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
.dashboard-modal-panel .planning-tg-h,
.dashboard-modal-panel .planning-tg-m {
  padding: 5px 0; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-card); font-size: var(--font-size-small, 13px);
  color: var(--color-text); cursor: pointer; text-align: center;
}
.dashboard-modal-panel .planning-tg-h:hover,
.dashboard-modal-panel .planning-tg-m:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dashboard-modal-panel .planning-tg-h.is-on,
.dashboard-modal-panel .planning-tg-m.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
@media (max-width: 768px) {
  .dashboard-modal-panel .planning-dtrow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  #page-planning .planning-weekhead,
  #page-planning .planning-weekbody { grid-template-columns: 44px repeat(7, minmax(72px, 1fr)); min-width: 560px; }
  #page-planning .planning-dayhead-row,
  #page-planning .planning-daybody { grid-template-columns: 44px repeat(var(--pl-cols, 1), minmax(96px, 1fr)); min-width: 320px; }
  #page-planning .planning-month,
  #page-planning .planning-monthhead { min-width: 560px; }
  #page-planning .planning-mcell { min-height: 72px; }

  /* Mobiele toolbar: nette gestapelde rijen mét lucht ertussen, afgeronde
     bedieningselementen (geen vierkante knoppen) en gecentreerde pijlen.
     Rij-volgorde via flex order + flex-basis 100%:
       rij 1: [‹  Vandaag  ›] (gecentreerd)
       rij 2: datumlabel (gecentreerd, eigen rij — niet geklemd naast de pijlen)
       rij 3: Week | Dag | Maand (volle breedte, afgeronde segmented control)
       rij 4+: status / Koppelen / "Nieuwe afspraak" (elk eigen volle rij). */
  .planning-tab-strip { gap: 6px; margin-bottom: 14px; }
  .planning-tab-strip .tab-item {
    flex: 1 1 auto; justify-content: center; padding: 9px 10px; font-size: 13px;
  }

  #page-planning .planning-nav {
    gap: 10px; align-items: center; justify-content: center; margin-bottom: 14px;
  }
  #page-planning .planning-nav .btn[data-act="prev"],
  #page-planning .planning-nav .btn[data-act="next"] {
    width: 44px; min-width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg, 8px); font-size: 20px; line-height: 1;
  }
  #page-planning .planning-nav .btn[data-act="today"] {
    height: 44px; flex: 0 0 auto; border-radius: var(--radius-lg, 8px);
  }
  #page-planning .planning-range {
    flex: 1 0 100%; order: 0; min-width: 0; margin: 2px 0 0; text-align: center;
    font-size: 15px; font-weight: 600;
  }
  #page-planning .planning-vtabs {
    order: 1; flex: 1 0 100%; border-radius: var(--radius-lg, 8px);
  }
  #page-planning .planning-vtab { flex: 1; height: 44px; }
  #page-planning .planning-nav .status-chip { order: 2; flex: 1 0 100%; justify-content: center; }
  #page-planning .planning-nav .btn[data-act="planning-oauth"] {
    order: 2; flex: 1 0 100%; height: 44px; justify-content: center;
    border-radius: var(--radius-lg, 8px);
  }
  #page-planning .planning-nav .btn-primary[data-act="new"] {
    order: 3; flex: 1 0 100%; height: 46px; justify-content: center;
    border-radius: var(--radius-lg, 8px);
  }
  /* Lucht tussen toolbar en agenda eronder. */
  #page-planning .planning-filterbar { margin: 0 0 14px; }

  /* Filter-chips horizontaal scrollen i.p.v. verdringende wrap (beide rijen). */
  #page-planning .planning-chiprow {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-bottom: 2px;
  }
  #page-planning .planning-chiprow::-webkit-scrollbar { display: none; }
  #page-planning .planning-chip { flex: 0 0 auto; }
}

/* Afspraak-aanmaakmodal (nieuwe onderhoud/offerte, window.MF.openVenster) is een
   twee-pane layout (invoer links, live preview rechts). De panes + body dragen
   inline flex/overflow/breedte-styles; op mobiel stapelen we ze zodat alle
   invoervelden bereikbaar zijn en de modal-panel als geheel scrollt i.p.v. de
   velden te clippen. Inline styles → !important. (Was gespecificeerd als
   "gestapeld ≤767px" maar de regel ontbrak — vandaar onbereikbare velden.) */
@media (max-width: 768px) {
  .mf-venster .mf-venster-body { display: block !important; overflow: visible !important; }
  .mf-venster .mf-pane-left,
  .mf-venster .mf-pane-right {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .mf-venster .mf-pane-right {
    border-left: 0 !important;
    border-top: 1px solid var(--color-border);
  }
  /* Touch-ergonomie van de formuliervelden: 44px hoog, 16px tekst (voorkomt
     iOS auto-zoom). Vult de ≤480px dashboard-modal-regel aan tot ≤768px. */
  .mf-venster .form-input { min-height: 44px; font-size: 16px; }
  .mf-venster textarea.form-input { min-height: 96px; }
}

/* Afspraak-popups (agenda "Nieuwe afspraak"/detail/extern via .planning-modal en
   de onderhoud/offerte-aanmaakmodal .mf-venster) tonen elk veld als platte
   label+input-rij i.p.v. de gekaderde .form-group-primitive (border + 16px
   padding). Dat geeft het rustige, single-koloms formulier uit de mockup i.p.v.
   zware dubbel-omrande vakjes. RRB-EXCEPTION: bewust afwijken van de gekaderde
   .form-group-card binnen deze planning-modals (scoped, raakt andere formulieren
   niet). */
.planning-modal .form-group,
.mf-venster .form-group {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 14px;
}
.planning-modal .form-label,
.mf-venster .form-label {
  display: block;
  margin-bottom: var(--space-xs, 4px);
  font-size: var(--font-size-small, 13px);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* "Aangekleed" RRB-formulier i.p.v. kaal wit: gevulde velden (lichte tint) met
   duidelijke blauwe focus, en lichtblauw getinte tijdslot-blokken. */
.planning-modal .form-input,
.mf-venster .form-input {
  background: var(--surface-muted, #f2f4f7);
  border-color: var(--border-strong, #d1d5db);
}
.planning-modal .form-input:focus,
.mf-venster .form-input:focus {
  background: var(--surface, #fff);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--primary-50, #f2f7fb);
}
/* Tijdslot-blokken: lichtblauwe RRB-tint zodat de sectie leeft i.p.v. wit-op-wit. */
.mf-venster .mf-slot-block {
  background: var(--primary-50, #f2f7fb);
  border-color: var(--primary-100, #dfebf5) !important;
}
.mf-venster .mf-slot-block .form-input {
  background: var(--surface, #fff);
}
/* Date/time-inputs mogen niet buiten het slot-blok lopen: laat ze in de
   grid-cel krimpen (width:100% bestaat al; min-width:0 ontgrendelt het). */
.mf-venster .mf-slot-grid,
.mf-venster .mf-slot-grid > .form-group {
  min-width: 0;
}
.mf-venster .mf-slot-grid .form-input {
  min-width: 0;
  box-sizing: border-box;
}

/* Onderhoud/offerte-overzicht gebruikt de gedeelde .rrb-mobile-list tap-kaart op
   mobiel. De kaart-cel (.rrb-mobile-list-cell) hoort ALLEEN op mobiel; op desktop
   blijft de normale tabel met losse kolommen. Verberg de kaart-cel dus op desktop
   (de gedeelde mobiele regel toont 'm met !important op ≤768px). Anders zou de
   klantnaam-kaart op desktop náást de losse kolommen dubbel verschijnen. */
.mf-onderhoud-table .rrb-mobile-list-cell,
.mf-offerte-table .rrb-mobile-list-cell {
  display: none;
}

/* ============================================================
   KLANTDOSSIER — geconsolideerd paneel met segment-control.
   Gebruikt op serviceplannen- en contacten-detail (mountCustomerDossier).
   RRB-EXCEPTION: dossier-only layout-host op basis van RRB-tokens en
   globale .badge/.nb-* primitives. De .notes-cardrow* regels zijn bewust
   1-op-1 overgenomen uit de #page-notities board-kaart en her-gescoped
   onder .dossier-notes, zodat klantnotities exact het notitiebord-uiterlijk
   krijgen ZONDER de echte board-mount (getElementById('page-notities')) te
   kapen door id-hergebruik. Scope: klantdossier-kaart. Promotie naar shared
   CSS pas overwegen als een tweede project ditzelfde dossier hergebruikt.
   ============================================================ */
.dossier-shell {
    min-width: 0;
}
.dossier-body { background: var(--surface); }
.dossier-body-content { padding: 0; }
.dossier-kpi-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.dossier-kpi {
    min-width: 7.5rem;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
}
.dossier-kpi b {
    display: block;
    color: var(--text);
    font: 760 var(--fs-md)/1.15 var(--font);
    font-variant-numeric: tabular-nums;
}
.dossier-kpi span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font: 700 11px/1.2 var(--font);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dossier-bar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    gap: 12px;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.dossier-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--sp-lg);
    background: var(--surface);
}

.dossier-seg-wrap {
    overflow-x: auto;
    scrollbar-width: none;
}
.dossier-seg-wrap::-webkit-scrollbar { display: none; }
.dossier-seg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 8px;
    width: 100%;
}
.dossier-seg button {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 9px 11px;
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 58px;
    min-width: 0;
    text-align: left;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
.dossier-seg button:hover { border-color: var(--border-strong); background: var(--surface-muted); }
.dossier-seg button.is-active {
    color: var(--seg-ink);
    background: var(--seg-tint);
    border-color: var(--seg-border, var(--border-strong));
    box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.04), 0 1px 5px rgb(15 23 42 / 0.08);
}
.dossier-seg button:focus-visible { outline: 2px solid var(--seg-ink); outline-offset: 2px; }
.dossier-seg-ic {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-field);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--seg-ink, var(--primary-700));
}
.dossier-seg-ic svg,
.dossier-search-field svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dossier-seg-label {
    min-width: 0;
    display: grid;
    gap: 2px;
    font: 750 var(--fs-sm)/1.15 var(--font);
    color: inherit;
}
.dossier-seg-label small {
    color: var(--text-muted);
    font: 500 var(--fs-xs)/1.25 var(--font);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dossier-seg-c {
    justify-self: end;
    min-width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    background: var(--surface);
    color: var(--seg-ink);
    border: 1px solid var(--border);
    border-radius: var(--r-pill, 999px);
    padding: 0 7px;
    font-variant-numeric: tabular-nums;
}
.dossier-seg button:nth-child(1) { --seg-tint: var(--primary-50); --seg-ink: var(--primary-700); --seg-border: var(--primary-100); }
.dossier-seg button:nth-child(2) { --seg-tint: var(--warning-50); --seg-ink: var(--warning-700); --seg-border: var(--warning-100, var(--border-strong)); }
.dossier-seg button:nth-child(3) { --seg-tint: var(--accent-50);  --seg-ink: var(--accent-800); --seg-border: var(--accent-100, var(--border-strong)); }
.dossier-seg button:nth-child(4) { --seg-tint: var(--danger-50);  --seg-ink: var(--danger-700); --seg-border: var(--danger-100, var(--border-strong)); }

.dossier-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "search clear"
        "meta meta";
    gap: 8px;
    align-items: center;
}
.dossier-search {
    grid-area: search;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dossier-toolbar [data-dossier-search-clear] { grid-area: clear; }
.dossier-search-field {
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--text-muted);
}
.dossier-search-field:focus-within {
    border-color: var(--primary-300, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.dossier-search-field input {
    border: 0;
    outline: 0;
    min-width: 0;
    width: 100%;
    color: var(--text);
    background: transparent;
}
.dossier-toolbar [hidden] { display: none !important; }
.dossier-search-meta {
    grid-area: meta;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    white-space: normal;
}
.dossier-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.dossier-filter {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: var(--r-pill, 999px);
    min-height: 36px;
    padding: 6px 11px;
    cursor: pointer;
    font: 650 var(--fs-xs)/1 var(--font);
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.dossier-filter:hover { border-color: var(--border-strong); }
.dossier-filter.is-active {
    background: var(--accent-50);
    color: var(--accent-800);
    border-color: var(--accent-200, var(--border-strong));
}
.dossier-pane { display: none; }
.dossier-pane.is-active { display: block; }
.dossier-pane[hidden] { display: none !important; }
.dossier-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}
.dossier-view-head h3 {
    margin: 0;
    color: var(--text);
    font: 750 var(--fs-lg)/1.2 var(--font);
}
.dossier-view-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font: 500 var(--fs-sm)/1.4 var(--font);
}
.dossier-view-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
.dossier-pane.is-dossier-scope-hidden { display: none !important; }
.dossier-search-pane-title {
    display: none;
    margin: 2px 0 8px;
    font: 700 var(--fs-sm)/1.2 var(--font);
    color: var(--primary-700);
}
.dossier-panel.is-searching .dossier-pane { display: block; }
.dossier-panel.is-searching .dossier-pane + .dossier-pane {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 2px;
}
.dossier-panel.is-searching .dossier-search-pane-title { display: block; }
.is-dossier-search-hidden { display: none !important; }
.dossier-panel [data-dossier-search-item],
.dossier-panel .notes-cardrow,
.dossier-panel .cm-rail-item,
.dossier-panel .cm-search-result,
.dossier-panel .act-card,
.dossier-panel .dwo-card,
.dossier-panel .cn-note,
.dossier-panel .cm-context {
    scroll-margin-top: clamp(8rem, 18vh, 13rem);
}
.dossier-search-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-card);
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: var(--fs-sm);
}
mark.dossier-mark {
    background: var(--warning-50);
    color: inherit;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgb(183 107 0 / 0.16);
    padding: 0 2px;
}

@media (max-width: 480px) {
    .dossier-seg {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        padding-bottom: 2px;
    }
    .dossier-seg::-webkit-scrollbar { display: none; }
    .dossier-seg button {
        flex: 0 0 min(82vw, 15rem);
        scroll-snap-align: start;
        padding: 9px 10px;
    }
    .dossier-toolbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "meta"
            "clear";
        align-items: stretch;
    }
    .dossier-toolbar .btn {
        width: 100%;
        justify-content: center;
    }
    .dossier-search-meta { min-height: auto; }
    .dossier-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .dossier-filters::-webkit-scrollbar { display: none; }
    .dossier-filter { flex: 0 0 auto; }
}

@media (max-width: 920px) {
    .dossier-toolbar {
        grid-template-columns: 1fr;
    }
    .dossier-kpi-row { justify-content: stretch; }
    .dossier-kpi { flex: 1 1 10rem; }
    .dossier-view-head {
        flex-direction: column;
        align-items: stretch;
    }
    .dossier-view-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .dossier-bar,
    .dossier-content {
        padding: var(--sp-md);
    }
    .dossier-header .dossier-kpi-row {
        grid-column: 1 / -1;
    }
}

/* Media-paneel: hergebruikt customer-media-panel maar zonder eigen kaart-chrome
   (de dossier-kaart is al de omhulling). */
.dossier-media .cm-panel { border: 0; background: transparent; border-radius: 0; }
.dossier-media .cm-panel > .rrb-disclosure__header { display: none; }
.dossier-media .cm-panel.is-dossier-search-mode .cm-disclosure-content { padding-top: 0; }
.cm-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--sp-sm);
}
.cm-search-result {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 78px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.cm-search-result:hover {
    border-color: var(--border-strong);
    background: var(--surface-muted);
}
.cm-search-result:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.cm-search-result-thumb {
    position: relative;
    width: 72px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-field);
    background: var(--surface-muted);
}
.cm-search-result-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.cm-search-result-copy strong,
.cm-search-result-copy span,
.cm-search-result-copy small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cm-search-result-copy strong {
    color: var(--text);
    font: 750 var(--fs-sm)/1.25 var(--font);
}
.cm-search-result-copy span {
    color: var(--text-muted);
    font: 600 var(--fs-xs)/1.3 var(--font);
}
.cm-search-result-copy small {
    color: var(--text-muted);
    font: 500 var(--fs-xs)/1.35 var(--font);
}

/* === Werkbonnen-paneel: één inklapbare kaart per ingediend formulier === */
.dwo-intro {
    margin: 0 0 10px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.dwo-list {
    display: grid;
    gap: var(--sp-md);
}
@media (min-width: 769px) {
    .dwo-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
.dwo-empty {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.dwo-card {
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    flex: 0 0 auto;
    overflow: hidden;
}
.dwo-card[open] { border-color: var(--border-strong); }
.dwo-head {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 44px;
    user-select: none;
    transition: background var(--t) var(--ease);
    min-width: 0;
}
.dwo-head::-webkit-details-marker { display: none; }
.dwo-head:hover { background: var(--primary-50); }
.dwo-chev {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-subtle);
    transition: transform var(--t) var(--ease);
}
.dwo-chev svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dwo-card[open] .dwo-chev { transform: rotate(90deg); }
.dwo-title-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.dwo-type { flex-shrink: 0; }
.dwo-date {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.dwo-who {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dwo-count {
    justify-self: end;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-subtle);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-pill, 999px);
    padding: 2px 7px;
    white-space: nowrap;
}
.dwo-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
}
.dwo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}

/* Gedeelde label/waarde-blokken (werkbon-veld). */
.dwo-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dwo-field-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-subtle);
}
.dwo-field-val {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
@media (min-width: 769px) {
    .act-card .dwo-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .act-card .act-ctrl-list,
    .act-card .dwo-actions,
    .act-card .dwo-empty,
    .act-card .act-entry-meta {
        grid-column: 1 / -1;
    }
}

/* === Variant B: Activiteit-feed (daggroepen + compacte summary) === */
.act-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.act-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
}
.act-tile-val {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.act-tile-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.act-fchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.act-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    min-height: 30px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.act-fchip:hover { border-color: var(--border-strong); }
.act-fchip.is-active {
    color: var(--surface);
    background: var(--primary);
    border-color: var(--primary);
}
.act-fchip-c {
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface-muted);
    color: var(--text-subtle);
}
.act-fchip.is-active .act-fchip-c {
    background: rgba(255, 255, 255, 0.25);
    color: var(--surface);
}
.dwo-card.is-filter-hidden { display: none; }
/* Platte kaart-grid (Variant B): geen aparte datum-rail; de datum staat compact
   in elke kaart. Twee kolommen op volle-breedte dossier, één kolom mobiel. */
.act-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.act-entry {
    border-left: 3px solid var(--border);
}
.act-entry.is-visit,
.act-entry.is-remote { border-left-color: var(--warning); }
.act-entry.is-werkbon { border-left-color: var(--success); }
.act-entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-height: 54px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
}
.act-entry-head::-webkit-details-marker { display: none; }
.act-entry-head:hover { background: var(--primary-50); }
.act-entry-head .dwo-chev {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
/* Micro-kaart-summary: type-dot + titel + één sub-regel (Variant B). */
.act-micro-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.act-micro-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.act-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--success);
}
.act-type-dot.is-service { background: var(--warning); }
.act-micro-title strong {
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.act-micro-sub {
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Datum-in-kaart: leidt de sub-regel, iets zwaarder zodat hij opvalt. */
.act-micro-date {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.act-entry-chiprow {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    justify-self: end;
}
.act-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    padding: 3px 9px;
    border-radius: var(--r-pill, 999px);
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.act-entry-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 0 12px 12px;
}
.act-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.act-entry-body .dwo-field {
    min-width: 0;
}
.act-entry-body .dwo-field-label {
    font-size: var(--fs-xs);
}
.act-entry-body .dwo-field-val {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.act-entry-body .act-ctrl-list,
.act-entry-body .dwo-actions,
.act-entry-body .dwo-empty {
    grid-column: 1 / -1;
}
/* Variant B mobiel: één kolom kaarten (datum staat in de kaart). */
@media (max-width: 768px) {
    .act-feed-grid { grid-template-columns: 1fr; }
}

/* Zoek-markering: licht de gevonden tekst op in statische panes (activiteit). */
mark.dossier-mark {
    background: var(--warning-200);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.act-chips {
    grid-column: 5;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.act-score-chip {
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-pill, 999px);
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
/* RRB-EXCEPTION: .act-foto-chip blijft bewust < 44px touch-target. Het is een
   inline chip direct naast de activiteitstitel; 44px afdwingen zou de kophoogte
   vergroten, wat de spec-eis "minimale rij-hoogte" schendt. Compensatie: ruime
   horizontale padding. Scope: werkbon activiteit-feed + lijstpagina's. */
.act-foto-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    padding: 3px 9px;
    border-radius: var(--r-pill, 999px);
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
button.act-foto-chip {
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button.act-foto-chip:hover {
    border-color: var(--warning);
    color: var(--warning);
    background: var(--surface);
}
button.act-foto-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.act-foto-chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.act-score-chip { color: var(--primary-700); border-color: var(--primary-200); }
.act-ctrl-sum {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-pill, 999px);
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.act-ctrl-sum svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.act-ctrl-sum.is-full {
    color: var(--success-700);
    background: var(--success-50);
    border-color: var(--success-200);
}
.act-ctrl-sum.is-na { color: var(--text-subtle); }

/* Controlepunt-lijst in de kaartbody. */
.act-ctrl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.act-ctrl-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
}
.act-ctrl-item svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.act-ctrl-item.is-ok {
    color: var(--success-700);
    background: var(--success-50);
    border-color: var(--success-200);
}
.act-ctrl-item.is-no {
    color: var(--danger-700);
    background: var(--danger-50);
    border-color: var(--danger-200);
}
.act-ctrl-item.is-na {
    color: var(--text-subtle);
    background: var(--surface-muted);
}

/* Cross-pane deeplink: kaart kort markeren na "Ga naar bron". */
.dossier-flash {
    animation: dossier-flash-kf 1.8s var(--ease) both;
}
@keyframes dossier-flash-kf {
    0% { box-shadow: 0 0 0 0 var(--primary); background: var(--primary-50); }
    30% { box-shadow: 0 0 0 3px var(--primary); background: var(--primary-50); }
    100% { box-shadow: 0 0 0 0 transparent; background: var(--surface); }
}

/* "Ga naar bron"-knop in het media-contextpaneel. */
.cm-goto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    min-height: 36px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-700);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--r-btn, 6px);
    cursor: pointer;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.cm-goto:hover { background: var(--primary-100); border-color: var(--primary); }
.cm-goto svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 480px) {
    .dwo-list { max-height: none; }
    .dwo-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .dwo-title-row {
        grid-column: 2 / -1;
        min-width: 0;
    }
    .dwo-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .dwo-date,
    .dwo-who {
        grid-column: 2 / -1;
    }
    .dwo-count {
        grid-column: 3;
        grid-row: 1;
    }
    .act-bento { grid-template-columns: 1fr 1fr; }
    .act-feed-grid {
        grid-template-columns: 1fr;
    }
    .act-entry-body {
        grid-template-columns: 1fr;
    }
    .act-chips {
        grid-column: 2 / -1;
        grid-row: 4;
        justify-self: start;
    }
}

.dossier-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-md);
}
.dossier-context-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: var(--sp-md);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
}
.dossier-context-card strong {
    color: var(--text);
    font: 750 var(--fs-sm)/1.3 var(--font);
}
.dossier-context-card span {
    color: var(--text-muted);
    font: 500 var(--fs-sm)/1.45 var(--font);
    overflow-wrap: anywhere;
}

/* Notities-paneel — board-kaart look, her-gescoped (zie kop). */
.dossier-notes .dossier-notes-hint {
    margin: 0 0 12px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.dossier-notes .dossier-notes-hint a { color: var(--primary-700); font-weight: 600; }

/* status-filter pills (Alle/Open/Bezig) */
.dossier-pillrow {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.dossier-pill {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 var(--fs-xs)/1 var(--font);
    color: var(--pill-ink, var(--text-muted));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill, 999px);
    padding: 6px 11px;
    min-height: 32px;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.dossier-pill:hover { border-color: var(--pill-ink, var(--border-strong)); }
.dossier-pill.is-active { background: var(--pill-tint); border-color: transparent; color: var(--pill-ink); }
.dossier-pill-c {
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-muted);
    color: inherit;
    border-radius: var(--r-pill, 999px);
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
.dossier-pill.is-active .dossier-pill-c { background: rgb(255 255 255 / 0.65); }
.dossier-pill-all  { --pill-ink: var(--primary-700); --pill-tint: var(--primary-50); }
.dossier-pill-open { --pill-ink: var(--primary-700); --pill-tint: var(--primary-50); }
.dossier-pill-busy { --pill-ink: var(--warning-700); --pill-tint: var(--warning-50); }

/* === notitiebord-kaart, her-gescoped van #page-notities (geen checkbox-kolom) === */
.dossier-notes .notes-cardstack-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
    gap: var(--sp-md);
    max-height: min(70vh, 62rem);
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-gutter: stable;
    padding-right: 4px;
}
.dossier-notes .notes-cardrow {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-md);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
    cursor: pointer;
    position: relative;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
}
.dossier-notes .notes-cardrow:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}
.dossier-notes .notes-cardrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dossier-notes .notes-cardrow.nb-prio-crit { border-left-color: var(--danger); }
.dossier-notes .notes-cardrow.nb-prio-high { border-left-color: var(--warning); }
.dossier-notes .notes-cardrow.nb-prio-norm { border-left-color: var(--primary); }
.dossier-notes .notes-cardrow.nb-prio-low  { border-left-color: var(--border-strong); }
.dossier-notes .notes-cardrow .nb-pin-corner {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--warning);
    pointer-events: none;
    line-height: 0;
}
.dossier-notes .notes-cardrow .nb-pin-corner svg { display: block; }
.dossier-notes .notes-cardrow-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dossier-notes .notes-cardrow-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); }
.dossier-notes .notes-cardrow-customer { font: 600 var(--fs-md)/1.3 var(--font); color: var(--text); display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.dossier-notes .notes-cardrow-klant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dossier-notes .notes-cardrow-id { color: var(--text-subtle); font-weight: 500; font-size: var(--fs-xs); flex-shrink: 0; }
.dossier-notes .notes-cardrow-preview { color: var(--text); font: 400 var(--fs-sm)/1.5 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.dossier-panel.is-searching .dossier-notes .notes-cardrow-preview {
    display: block;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
}
.dossier-notes .notes-cardrow-footer { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; justify-content: space-between; padding-top: 6px; border-top: 1px dashed var(--border); margin-top: 4px; font: 400 var(--fs-xs)/1.3 var(--font); color: var(--text-muted); }
.dossier-notes .notes-cardrow-meta-line { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.dossier-notes .notes-cardrow-date { color: var(--text-subtle); flex-shrink: 0; }

.sys-sum-dot.is-muted,
.sys-tab-dot.is-muted { background: var(--warning); }
.mon-pane-snooze { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.mon-snooze-until { font-size: var(--fs-xs); color: var(--warning); }

/* ========== Werkvoorbereiding ========== */
.wv-sub { font-size: 12.5px; color: var(--text-muted); }
.wv-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; }
.wv-group-header { min-height: 44px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; transition: background var(--t) var(--ease); }
.wv-group-header:hover { background: var(--surface-muted); }
.wv-grp-chevron { font-size: 9px; transition: transform 0.2s; color: var(--text-muted); }
.wv-group-header.expanded .wv-grp-chevron { transform: rotate(90deg); }
.wv-group-body { display: none; border-top: 1px solid var(--gray-100); }
.wv-group-header.expanded + .wv-group-body { display: block; }
.wv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wv-cnt { font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.wv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wv-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-muted); padding: 8px 16px; border-bottom: 1px solid var(--gray-100); }
.wv-table td { padding: 10px 16px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.wv-table tr:last-child td { border-bottom: none; }
.wv-row { transition: background var(--t) var(--ease); }
.wv-row:hover { background: var(--primary-50); cursor: pointer; }
.wv-num { text-align: right; font-variant-numeric: tabular-nums; }
.wv-offnr { font-weight: 600; color: var(--color-primary); }
.wv-klant { font-weight: 500; }
.wv-status-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font: 500 12px/1 var(--font); cursor: pointer; border: none; white-space: nowrap; transition: box-shadow var(--t) var(--ease); }
.wv-status-pill:hover { box-shadow: var(--e1); }
.wv-status-pill.wv-inactive { opacity: 0.45; }
.wv-c-grijs { background: var(--surface-muted); color: var(--gray-500); }
.wv-c-blauw { background: var(--primary-50); color: var(--primary-700); }
.wv-c-oranje { background: var(--warning-50); color: var(--warning-700); }
.wv-c-groen { background: var(--accent-50); color: var(--accent-800); }
.wv-c-rood { background: var(--danger-50); color: var(--danger); }
.wv-c-paars { background: var(--gray-100); color: var(--primary-800); }
.wv-dot.wv-c-grijs { background: var(--gray-400); } .wv-dot.wv-c-blauw { background: var(--color-primary); }
.wv-dot.wv-c-oranje { background: var(--warning); } .wv-dot.wv-c-groen { background: var(--accent); }
.wv-dot.wv-c-rood { background: var(--danger); } .wv-dot.wv-c-paars { background: var(--primary-800); }
.wv-stat-grijs { border-left: 4px solid var(--gray-400); } .wv-stat-blauw { border-left: 4px solid var(--color-primary); }
.wv-stat-oranje { border-left: 4px solid var(--warning); } .wv-stat-groen { border-left: 4px solid var(--accent); }
.wv-stat-rood { border-left: 4px solid var(--danger); } .wv-stat-paars { border-left: 4px solid var(--primary-800); }
.wv-pill-menu { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12); padding: 6px; z-index: 60; display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.wv-archief-note { padding: 12px 16px; font-size: 12.5px; color: var(--text-muted); }
.wv-archief-note a { color: var(--color-primary); font-weight: 500; text-decoration: none; }
.wv-archief-zoek { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
.wv-input { border: 1px solid var(--border); border-radius: var(--r-btn); padding: 7px 12px; font-size: 13px; font-family: var(--font); min-height: 34px; background: var(--surface); transition: border-color var(--t) var(--ease); }
.wv-input:hover { border-color: var(--border-strong); }
.wv-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 80; display: flex; justify-content: flex-end; }
.wv-drawer { background: var(--surface); width: min(560px, 100%); height: 100%; overflow-y: auto; box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15); }
.wv-drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: sticky; top: 0; background: var(--surface); z-index: 5; }
.wv-drawer-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.wv-drawer-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.wv-drawer-meta a { color: var(--color-primary); text-decoration: none; }
.wv-drawer-close { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-btn); cursor: pointer; font-size: 14px; color: var(--text-muted); flex: none; transition: all var(--t) var(--ease); }
.wv-drawer-close:hover { color: var(--text); border-color: var(--border-strong); }
.wv-drawer-sec { padding: 16px 20px; border-bottom: 1px solid var(--gray-100); }
.wv-drawer-sec h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.wv-statusrow { display: flex; gap: 8px; flex-wrap: wrap; }
.wv-regel-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wv-regel-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--gray-100); }
.wv-regel-table td { padding: 8px; border-bottom: 1px solid var(--gray-100); }
.wv-print-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wv-print-meta { font-size: 12px; color: var(--text-muted); }
.wv-print-ok { color: var(--accent) !important; border-color: var(--accent) !important; }
.wv-activity { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.wv-act-t { color: var(--text-subtle); font-variant-numeric: tabular-nums; margin-right: 6px; }
.wv-status-edit-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.wv-status-edit-row:last-of-type { border-bottom: none; }
.wv-order-btns { display: flex; gap: 4px; }
.wv-naam { flex: 1; }
.wv-sysflag { font: 500 11px/1 var(--font); color: var(--text-muted); background: var(--surface-muted); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.wv-del { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--surface); color: var(--danger); cursor: pointer; transition: all var(--t) var(--ease); }
.wv-del:hover { background: var(--danger-50); border-color: var(--danger); }
.wv-status-add { padding-top: 10px; }
.wv-skeleton { padding: 24px; color: var(--text-muted); }
body.wv-drawer-open { overflow: hidden; }

/* === Bestelvoorstel (Task 6) === */
.wv-proposal { display: flex; flex-direction: column; gap: 10px; }
.wv-proposal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.wv-proposal-line:last-of-type { border-bottom: none; }
.wv-prop-desc { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.wv-prop-chip { flex: none; }
.wv-match-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11px/1 var(--font); white-space: nowrap; }
.wv-m-ok { background: var(--accent-50); color: var(--accent-800); border: 1px solid color-mix(in srgb, var(--accent-50) 60%, var(--accent-800)); }
.wv-m-sugg { background: var(--warning-50); color: var(--warning-700); border: 1px solid color-mix(in srgb, var(--warning-50) 60%, var(--warning-700)); }
.wv-m-none { background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--border); }
.wv-m-skip { background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--border); text-decoration: line-through; }
.wv-prop-btns { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.wv-prop-qty-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.wv-prop-qty-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.wv-prop-qty-lbl input { width: 68px; text-align: right; }
.wv-input-sm { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.wv-prop-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 8px; }
.wv-prop-ordered { padding-top: 4px; }
.wv-prop-loading { font-size: 12.5px; color: var(--text-muted); padding: 6px 0; }
.wv-prop-search { margin-top: 4px; flex: 1 1 100%; }
.wv-prop-search-inner { display: flex; flex-direction: column; gap: 6px; }
.wv-prop-search-results { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.wv-prop-search-item { display: flex; align-items: center; gap: 6px; text-align: left; padding: 7px 10px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface); font-size: 12px; cursor: pointer; transition: background var(--t) var(--ease); }
.wv-prop-search-item:hover { background: var(--primary-50); border-color: var(--primary-700); }
.wv-prop-search-item strong { font-weight: 600; color: var(--text); }
.wv-prop-sku { color: var(--text-muted); font-size: 11px; }
.wv-prop-search-empty { font-size: 12px; color: var(--text-muted); padding: 6px 2px; }

/* === Automation recipes (Task 7) === */
.wv-recipe { padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.wv-recipe:last-of-type { border-bottom: none; }
.wv-recipe-sentence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wv-recipe-chunk { display: inline-flex; align-items: center; }
.wv-recipe-extra { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-left: 4px; }
.wv-recipe-add { padding-top: 12px; }
/* Toggle pill */
.wv-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.wv-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wv-toggle-track { width: 40px; height: 22px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border); transition: background var(--t) var(--ease), border-color var(--t) var(--ease); position: relative; }
.wv-toggle input:checked + .wv-toggle-track { background: var(--accent-50); border-color: var(--accent-800); }
.wv-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform var(--t) var(--ease), background var(--t) var(--ease); }
.wv-toggle input:checked + .wv-toggle-track .wv-toggle-thumb { transform: translateX(18px); background: var(--accent-800); }
/* Email preview */
.wv-preview { border: 1px solid var(--border); border-radius: var(--r-btn); overflow: hidden; font-size: 13px; }
.wv-preview-sum { padding: 7px 12px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; color: var(--color-primary); background: var(--primary-50); list-style: none; }
.wv-preview-sum::-webkit-details-marker { display: none; }
.wv-preview-body { padding: 12px; background: var(--surface); max-height: 360px; overflow-y: auto; font-size: 12px; }
.wv-preview-card { border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px; background: var(--surface); }
@media (max-width: 768px) {
    .wv-table thead { display: none; }
    .wv-table tr.wv-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 16px; border-bottom: 1px solid var(--gray-100); }
    .wv-table tr.wv-row td { display: block; padding: 0; border: none; }
    .wv-table td.wv-cell-acties { grid-row: 1 / 4; grid-column: 2; align-self: start; }
    .wv-drawer { width: 100%; }
}