/* ============================================================
   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);
    --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);
}

/* === Reset === */
html { overflow-x: hidden; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: radial-gradient(ellipse at top left, #f0f4fa, #f5f5f5 60%); min-height: 100vh; color: var(--color-text); -webkit-text-size-adjust: 100%; }
body.sidebar-open { overflow: hidden; }

/* === Login === */
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); }
.login-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 400px; }
.login-error { color: #d32f2f; font-size: 13px; margin-bottom: 12px; }

/* === Buttons === */
.btn { padding: var(--space-sm) var(--space-md); background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 13px; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-success { background: var(--color-success); }
.btn-success:hover { background: var(--color-accent-hover); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #c82333; }
.btn-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); }
.btn-outline:hover { background: var(--color-bg); }
.btn-sm { padding: 6px 10px; font-size: 12px; touch-action: manipulation; }

/* === Badges === */
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 12px; font-weight: 500; white-space: nowrap; margin-right: 3px; margin-bottom: 2px; }
.badge-info { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); box-shadow: var(--glow-info); }
.badge-werkbon { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); }
.badge-service { background: #f3e5f5; color: #7b1fa2; }
.badge-success { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); box-shadow: var(--glow-success); }
.badge-warning { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); box-shadow: var(--glow-warning); }
.badge-partial { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.badge-failed, .badge-danger { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); box-shadow: var(--glow-danger); }
.badge-neutral { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }

/* Badge — Plan types */
.badge-plan-basic { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); }
.badge-plan-plus { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.badge-plan-solid { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.badge-plan-custom { background: var(--color-teal-bg); color: var(--color-teal); }

/* Badge — System types */
.badge-sys-dahua { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); }
.badge-sys-milestone { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); }
.badge-sys-ajax { background: #212121; color: #fff; }
.badge-sys-paxton { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.badge-sys-nxwitness { background: #f3e5f5; color: #7b1fa2; }
.badge-sys-axis { background: #fffde7; color: #f9a825; }
.badge-sys-2n { background: #e0f2f1; color: #00695c; }
.badge-sys-unifi { background: #e0f7fa; color: #006064; }
.badge-sys-default { background: var(--color-badge-neutral-bg); color: var(--color-badge-neutral-text); }

/* === Table containers === */
.table-container {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.table-header {
    padding: 12px 16px;
    background: var(--color-card-highlight);
    border-bottom: 1px solid var(--color-border-light);
}
.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; }

/* === 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;
}
.modal {
    background: var(--color-card); border-radius: var(--radius-lg);
    padding: 24px; width: 100%;
}

/* 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(--color-card);
    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: #ddd; 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(--color-bg); border-radius: 8px;
    border: 1px solid var(--color-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: #e8f0f8; }
.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(--color-table-header-bg); border-bottom: 1px solid var(--color-border-light); font-weight: 600; color: var(--color-text-table-header); font-size: 12px; text-transform: uppercase; white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--color-border-faint); }
tr:last-child td { border-bottom: none; }

/* === Forms === */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 4px; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 14px; transition: border-color 0.15s; }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26, 106, 163, 0.12); outline: none; }
select.form-input { appearance: auto; }

/* === 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(--space-md); text-align: center; color: var(--color-text-muted); }
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(--space-sm); padding: var(--space-md); flex-wrap: wrap; }
.pagination button { padding: var(--space-sm) 14px; border: 1px solid var(--color-border); background: var(--color-card); border-radius: var(--radius); cursor: pointer; font-size: 13px; min-height: 36px; }
.pagination button:hover { background: var(--color-border-faint); }
.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, #1a6aa3 0%, #12527d 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; }

.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;
}

.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;
}

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

.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
   ============================================================ */

.skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius);
}
.skeleton-card { height: 80px; border-radius: var(--radius-lg); }
.skeleton-chart { height: 200px; border-radius: var(--radius-lg); }
.skeleton-row { height: 44px; margin-bottom: 8px; border-radius: var(--radius); }
.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);
}

/* === Pulse Indicators === */
@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,106,163,0.35); }
    50% { box-shadow: 0 0 0 5px rgba(26,106,163,0); }
}
.pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse-ring 2s infinite;
}
.pulse-dot-success {
    background: var(--color-success);
    animation-name: pulse-ring-success;
}
@keyframes pulse-ring-success {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,193,48,0.35); }
    50% { box-shadow: 0 0 0 5px rgba(0,193,48,0); }
}
.pulse-dot-warning {
    background: var(--color-warning);
    animation-name: pulse-ring-warning;
}
@keyframes pulse-ring-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,108,0,0.35); }
    50% { box-shadow: 0 0 0 5px rgba(239,108,0,0); }
}
.pulse-dot-danger {
    background: var(--color-danger);
    animation-name: pulse-ring-danger;
}
@keyframes pulse-ring-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0.35); }
    50% { box-shadow: 0 0 0 5px rgba(220,53,69,0); }
}

/* === 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(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; min-width: 0; overflow: hidden; }
.chart-card h4 { font-size: 13px; font-weight: 600; color: #555; margin: 0 0 12px; }

.stat-card { background: var(--color-card); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 16px; text-align: center; }
.stat-card-info { background: var(--gradient-info); }
.stat-card-success { background: var(--gradient-success); }
.stat-card-warning { background: var(--gradient-warning); }
.stat-card-danger { background: var(--gradient-danger); }
.stat-card-teal { background: var(--gradient-teal); }
.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(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); 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: #555; 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: 769px) {
    #page-overzicht .charts-grid { grid-template-columns: minmax(280px, 380px) 1fr; }
}

/* Overzicht submission cards */
.ovz-subs-panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); 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(--color-border-light); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; transition: border-color 0.15s; }
.ovz-sub-card.expanded { border-color: var(--color-primary); }
.ovz-sub-header { padding: 10px 12px; background: var(--color-card-highlight); display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 8px; }
.ovz-sub-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; 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 { font-size: 11px; color: var(--color-text-secondary); transition: transform 0.2s; }
.ovz-sub-card.expanded .ovz-sub-chevron { transform: rotate(180deg); }
.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(--color-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(--color-border-faint); }
.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(--color-card-highlight); }

/* 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(--color-border-light); 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(--color-border); color: var(--color-text); padding: 4px 10px; font-size: 12px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: background 0.15s; display: inline-flex; align-items: center; gap: 4px; }
.btn-action:hover { background: var(--color-bg); }

/* === Info bar — device detail strip inside recorder/server cards === */
.info-bar { padding: 10px 16px; background: var(--color-card-highlight); font-size: 13px; color: var(--color-text-secondary); display: flex; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border-light); }
.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: #fff8e1; color: #7a5800; border: 1px solid #ffe082; font-size: 11px; }
.badge-fase-2-ok { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); border: 1px solid #a5d6a7; font-size: 11px; box-shadow: var(--glow-success); }
.badge-fase-2-fail { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); border: 1px solid #ef9a9a; font-size: 11px; box-shadow: var(--glow-danger); }

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

/* Tab strip — fixed at top of scrollable area */
.sys-tab-strip {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.sys-tab-strip::-webkit-scrollbar { display: none; }

.sys-tab-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 14px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.sys-tab-item:hover { color: var(--color-text); }
.sys-tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.sys-tab-item svg { width: 20px; height: 20px; }
.sys-tab-item .tab-alert {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 7px;
    height: 7px;
    background: var(--color-danger);
    border-radius: 50%;
}

/* Summary line (desktop only) */
.sys-summary-line {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--color-card-highlight);
    border-bottom: 1px solid var(--color-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: 2px; }

.sys-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-card);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--color-border-light);
    -webkit-tap-highlight-color: transparent;
}
.sys-section-header:active { background: var(--color-card-highlight); }
.sys-section-header svg { width: 16px; height: 16px; color: var(--color-text-secondary); flex-shrink: 0; }

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

.sys-section-stats {
    display: flex;
    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: rgba(0,193,48,0.08); color: #0d7a2b; border-color: rgba(0,193,48,0.2); }
.sys-status-warn { background: rgba(239,108,0,0.08); color: #9a4500; border-color: rgba(239,108,0,0.2); }
.sys-status-bad  { background: rgba(220,53,69,0.08); color: #a8271e; border-color: rgba(220,53,69,0.2); }

.sys-chevron {
    font-size: 10px;
    color: var(--color-text-secondary);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.sys-section.expanded .sys-chevron { transform: rotate(180deg); }

.sys-section-body {
    display: none;
    background: var(--color-card);
}
.sys-section.expanded .sys-section-body { display: block; }

/* 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(--color-border-faint);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.trow:hover { background: var(--color-card-highlight); }
.trow.warn-row { background: #fff5f5; }
.trow.warn-row:hover { background: #ffebee; }

.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(--radius);
    white-space: nowrap;
}
.trow-metric-ok { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.trow-metric-warn { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.trow-metric-bad { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); }
.trow-metric-info { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); }

.trow-actions {
    display: flex;
    gap: 4px;
}
.trow-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
    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(--color-card-highlight);
    border-bottom: 1px solid var(--color-border-light);
}
.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(--radius);
}
.dchip-ok { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); }
.dchip-warn { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.dchip-bad { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); }
.dchip-info { background: var(--color-card-highlight); color: var(--color-text-secondary); border: 1px solid var(--color-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(--color-border);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    width: 100%;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sys-add-row button:hover { background: #f0f7ff; border-color: var(--color-primary); }

/* Sub-group header inside a section */
.trow-group-header {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--color-card-highlight);
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}
.trow-group-header .grp-chevron {
    font-size: 9px;
    transition: transform 0.2s;
}
.trow-group-header.expanded .grp-chevron { transform: rotate(90deg); }
.trow-group-body { display: none; }
.trow-group-header.expanded + .trow-group-body { display: block; }

/* Klant-grouping inside severity buckets (unifi/uisp/dahua/ajax/offline-cameras) */
.klant-subgroup {
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--klant-accent, var(--color-border-light));
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--color-card);
    transition: border-color 0.15s ease;
}
.klant-subgroup:last-child { margin-bottom: 0; }
.klant-subgroup:hover { border-color: var(--color-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: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-weight: 600;
}
.klant-alert-pill.warn { background: var(--color-warning); }

/* ============================================
   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(--color-card);
}
.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(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    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, #b0b6bd);
    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, #b0b6bd); }

.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, #b0b6bd);
    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(--color-card-highlight);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
    white-space: nowrap;
}
.stile-tag.t-ok   { background: var(--color-badge-success-bg); color: var(--color-badge-success-text); border-color: transparent; }
.stile-tag.t-warn { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); border-color: transparent; }
.stile-tag.t-bad  { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); border-color: transparent; }
.stile-tag.t-info { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); 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(--color-badge-success-bg); color: var(--color-badge-success-text); }
.stile-metric.m-warn { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text); }
.stile-metric.m-bad  { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text); }
.stile-metric.m-info { background: var(--color-badge-info-bg); color: var(--color-badge-info-text); }

.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(--color-border);
    border-radius: 4px;
    background: var(--color-card);
    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(--color-border);
    border-radius: 4px;
    background: var(--color-card);
    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(--color-card-highlight);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    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: 12px; }
}

/* ============================================================
   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(--color-card);
}
.ssheet-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 10px 9px;
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    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, #b0b6bd);
}
.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, #b0b6bd); }
.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: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.ssheet-sub {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    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: #f0f2f5;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}
.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(--color-border);
    border-radius: 3px;
    background: var(--color-card);
    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(--color-border-light);
    background: var(--color-card);
}
.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: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    color: var(--color-text-muted, #b0b6bd);
    padding: 1px 6px;
    border: 1px solid var(--color-border-light);
    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: inherit; 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: 12px; }
}

/* UISP switch selector */
.uisp-sw-list { border-bottom: 1px solid var(--color-border-light); }
.uisp-sw-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--color-border-light);
    min-height: 44px;
}
.uisp-sw-item:last-child { border-bottom: none; }
.uisp-sw-item:hover { background: #f8f9fa; }
.uisp-sw-item.selected { background: #e3f2fd; 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: #bbdefb; color: #0d47a1; border-color: #64b5f6; }
.uisp-port-cell.active { background: #d4edda; color: #155724; border-color: #a3d9a5; }
.uisp-port-cell.inactive { background: #f3f3f3; color: #bbb; border-color: #e8e8e8; }
.uisp-port-cell.disabled { background: #fce4ec; color: #b71c1c; border-color: #ef9a9a; }
.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: #f8f9fa; border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg); 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(--radius); border: none; cursor: pointer; }

/* UISP scrollable port list */
.uisp-port-list-box {
    margin: 0 12px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    max-height: 200px; overflow-y: auto; background: #fafbfc;
}
.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(--color-border-light); background: #f0f4f8;
    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(--color-border-light);
    cursor: pointer; transition: background 0.1s; align-items: center;
}
.uisp-port-list-row:last-child { border-bottom: none; }
.uisp-port-list-row:hover { background: #e8f0fe; }
.uisp-port-list-row.highlight { background: #e3f2fd; }
.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: #bbb; }

/* 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: #666; 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(--color-border-light); flex-wrap: wrap;
}
.unifi-filter-btn {
    padding: 3px 10px; font-size: 12px; border: 1px solid var(--color-border);
    border-radius: var(--radius); background: none; cursor: pointer; color: var(--color-text-secondary);
    transition: all 0.15s; white-space: nowrap;
}
.unifi-filter-btn:hover { background: #f0f4f8; }
.unifi-filter-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* UISP non-switch device list */
.uisp-device-row { padding: 8px 14px; border-bottom: 1px solid var(--color-border-light); 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: #fff; flex: 1; }
.uisp-btn-close { background: none; border: 1px solid var(--color-border) !important; color: var(--color-text); }

/* UISP body: side-by-side on desktop */
@media (min-width: 769px) {
    .uisp-body { display: grid; grid-template-columns: 260px 1fr; }
    .uisp-sw-list { border-bottom: none; border-right: 1px solid var(--color-border-light); 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(--color-border);
    background: var(--color-card);
}

/* ============================================================
   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 { --sp-ok:#15a34a; --sp-warn:#ea7a1b; --sp-bad:#dc2626; --sp-off:#cbd0d6; --sp-off-ink:#5a6069; --sp-sfp:#3b82f6; --sp-25g:#06b6d4; --sp-unk:#94a3b8; --sp-ink:#0f1114; --sp-ink2:#3a3f46; --sp-mute:#6b7280; --sp-line:#e3e6eb; --sp-bg:#f6f7f9; --sp-card:#ffffff; margin-top: 10px; }
.sw-subtabs { display:flex; gap:6px; background:var(--sp-card); padding:4px; border:1px solid var(--sp-line); 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(--sp-ink2); min-height:36px; display:inline-flex; align-items:center; gap:6px; }
.sw-subtab[data-active="1"] { background:var(--sp-ink); color:#fff; }
.sw-subtab .n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size:10px; opacity:.7; }
.sw-kpis { display:flex; gap:6px; padding:0 12px 10px; flex-wrap:wrap; }
.sw-kpi { background:var(--sp-bg); border:1px solid var(--sp-line); border-radius:8px; padding:5px 9px; font-size:11.5px; font-weight:600; color:var(--sp-ink2); }
.sw-kpi b { color:var(--sp-ink); font-size:12.5px; margin-right:3px; }
.sw-kpi.ok { border-color:#b7e4c6; background:#eef8f1; }
.sw-kpi.warn { border-color:#f4d5ad; background:#fcf2e4; }
.sw-kpi.bad { border-color:#f0b9b9; background:#fbe9e9; }
.sw-note { margin: 0 12px 10px; background:#fff8eb; border:1px solid #f4c48c; border-radius:8px; padding:8px 10px; font-size:12px; color:#78430a; }
.sw-note b { color:#5a3106; }
.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:#fff; 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(--sp-ok); }
.sw-g-port.s-100 { background: var(--sp-warn); }
.sw-g-port.s-10g { background: var(--sp-sfp); }
.sw-g-port.s-2_5g { background: var(--sp-25g); }
.sw-g-port.s-off { background: var(--sp-off); color: var(--sp-off-ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.06); }
.sw-g-port.s-dis { background: repeating-linear-gradient(135deg, #b6bcc4 0 8px, #cdd2d9 8px 16px); color:#3a3f46; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.sw-g-port.s-err { background: var(--sp-bad); }
.sw-g-port.s-unk { background: var(--sp-unk); color:#fff; }
.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: 'JetBrains Mono', ui-monospace, monospace; 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:#fff !important; stroke:#fff !important; }
.sw-g-port.s-off .g-mid svg *, .sw-g-port.s-dis .g-mid svg * { fill: var(--sp-off-ink) !important; stroke: var(--sp-off-ink) !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:#fff; }
.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:#fff; 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:'JetBrains Mono',ui-monospace,monospace; 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(--sp-card); border: 1px solid var(--sp-line); 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(--sp-line); 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: #eef2f7; }
.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:#fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight:700; font-size:13px; letter-spacing:.04em; position:relative; }
.sw-l-rail.s-1g { background: var(--sp-ok); }
.sw-l-rail.s-100 { background: var(--sp-warn); }
.sw-l-rail.s-10g { background: var(--sp-sfp); }
.sw-l-rail.s-2_5g { background: var(--sp-25g); }
.sw-l-rail.s-off { background: var(--sp-off); color: var(--sp-off-ink); }
.sw-l-rail.s-dis { background: repeating-linear-gradient(135deg, #b6bcc4 0 8px, #cdd2d9 8px 16px); color:#3a3f46; }
.sw-l-rail.s-err { background: var(--sp-bad); }
.sw-l-rail.s-unk { background: var(--sp-unk); color:#fff; }
.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:#fff; }
.sw-l-ico { display:flex; justify-content:center; align-items:center; color: var(--sp-ink2); }
.sw-l-ico svg { width:20px; height:20px; }
.sw-l-ico svg * { fill: var(--sp-ink2) !important; stroke: var(--sp-ink2) !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(--sp-mute); 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(--sp-bg); color: var(--sp-ink2); border:1px solid var(--sp-line); white-space:nowrap; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing:.04em; }
.sw-l-tag.hi { background:#fcf2e4; border-color:#f4d5ad; color:#b85c0a; }
.sw-l-tag.ok { background:#eef8f1; border-color:#b7e4c6; color:#0f7a38; }
.sw-l-tag.bad { background:#fbe9e9; border-color:#f0b9b9; color:#9f1212; }
.sw-l-tag.unk { background:#eef1f5; border-color:#c9d2de; color:#4b5563; }

/* 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(--sp-card, #fff); 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:#fff; display:flex; gap:12px; align-items:center; }
.sw-sheet-head.s-1g { background:#15a34a; }
.sw-sheet-head.s-100 { background:#ea7a1b; }
.sw-sheet-head.s-10g { background:#3b82f6; }
.sw-sheet-head.s-2_5g { background:#06b6d4; }
.sw-sheet-head.s-off { background:#6b7280; }
.sw-sheet-head.s-dis { background:#4b5563; }
.sw-sheet-head.s-err { background:#dc2626; }
.sw-sheet-head.s-unk { background:#94a3b8; }
.sw-sheet-pn { font-family: 'JetBrains Mono', ui-monospace, monospace; 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: 'JetBrains Mono', ui-monospace, monospace; 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:#fff; 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:#6b7280; 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:#0f1114; font-family: 'JetBrains Mono', ui-monospace, monospace; word-break:break-all; }
.sw-sheet-meta dd.na { color:#6b7280; font-style:italic; font-family:inherit; font-weight:500; }
.sw-sheet-note { background:#f1f5f9; border:1px solid #d6dde7; border-radius:8px; padding:10px 12px; margin:0 0 14px; font-size:12.5px; color:#3b4a5b; 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 #e3e6eb; background:#fff; color:#0f1114; 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:#f6f7f9; }
.sw-sheet-actions button.primary { background:#0f1114; color:#fff; border-color:#0f1114; }
.sw-sheet-actions button.warn { background:#fff4e8; border-color:#f4c48c; color:#b85c0a; }
.sw-sheet-actions button.danger { background:#fdecec; border-color:#f0b9b9; color:#9f1212; }
.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:#0f1114; color:#fff; 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:13px; }
    .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:10px; }
    .sw-g-port .g-name { font-size:11px; }
    .sw-l-title { font-size:13px; }
    .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(--color-table-header-bg); border-bottom: 1px solid var(--color-border-light); font-weight: 600; color: var(--color-text-table-header); font-size: 12px; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 10px 16px; border-bottom: 1px solid var(--color-border-faint); }
.data-table tr:last-child td { border-bottom: none; }

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

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

/* Serviceplannen list — mobile elements hidden on desktop */
@media (min-width: 769px) {
    .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 .sp-table */
    .sp-table { font-size: 13px; }
    .sp-table thead th {
        position: sticky; top: 0; z-index: 2;
        font-family: Menlo, Consolas, ui-monospace, 'SF Mono', monospace;
        font-size: 10.5px; font-weight: 600;
        letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--color-text-secondary);
        background: #fbfcfd;
        padding: 8px 12px;
        border-bottom: 1px solid var(--color-border);
        white-space: nowrap;
    }
    .sp-table thead th [id^="sp-sort-"] {
        color: var(--color-border);
        margin-left: 4px;
        font-weight: 700;
        letter-spacing: 0;
    }
    .sp-table tbody td {
        padding: 7px 12px;
        vertical-align: middle;
        line-height: 1.35;
        white-space: nowrap;
    }
    .sp-table tbody tr.sp-row {
        background: #fff;
        border-bottom: 1px solid var(--primary-100, #dfebf5);
        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;
    }
    .sp-table tbody tr.sp-row * {
        cursor: pointer;
    }
    .sp-table tbody tr.sp-row:nth-child(even) {
        background: rgba(242, 247, 251, 0.4);
    }
    .sp-table tbody tr.sp-row:hover {
        background: #f4f8fb;
        box-shadow: inset 3px 0 0 var(--color-primary), 0 2px 6px rgba(26, 106, 163, 0.08);
        transform: translateY(-1px);
    }
    .sp-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. */
    .sp-table tbody tr.sp-row .sp-b-avatar {
        transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    }
    .sp-table tbody tr.sp-row .sp-b-name {
        transition: color 0.12s ease;
    }
    .sp-table tbody tr.sp-row:hover .sp-b-avatar {
        background: var(--primary-100, #dfebf5);
        color: var(--color-primary);
        transform: translateX(1px);
    }
    .sp-table tbody tr.sp-row:hover .sp-b-name {
        color: var(--color-primary);
    }
    .sp-table tbody tr.sp-row:last-child {
        border-bottom: none;
    }
    /* Name column constrains + ellipsis for long names */
    .sp-table .sp-row-name-inline,
    .sp-table td:first-child > * {
        max-width: 320px;
    }
    .sp-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: Menlo, Consolas, ui-monospace, monospace;
        font-size: 12px;
    }
    .sp-c-ticket .badge-n {
        background: var(--color-danger, #dc3545);
        color: #fff;
        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, #ef6c00); }
    .sp-c-ticket.is-zero { color: var(--color-border, #ddd); }

    /* 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). */
    .sp-table .sp-row-mobile-cell {
        padding: 4px 12px;
        max-width: 320px;
    }
    .sp-table .sp-row-card {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 30px;
    }
    .sp-table .sp-b-avatar {
        width: 26px; height: 26px;
        border-radius: 6px;
        background: var(--primary-50, #f2f7fb);
        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;
    }
    .sp-table .sp-b-body { flex: 1; min-width: 0; overflow: hidden; }
    .sp-table .sp-b-title {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 0;
    }
    .sp-table .sp-b-name {
        flex: 1; min-width: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sp-table .sp-b-chip,
    .sp-table .sp-b-dot,
    .sp-table .sp-b-addr,
    .sp-table .sp-b-sep,
    .sp-table .sp-b-age,
    .sp-table .sp-b-meta,
    .sp-table .sp-b-meta2,
    .sp-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) {
    /* Login: reduce padding so it doesn't feel zoomed-in on mobile */
    .login-container { padding: 16px; }
    .login-card { padding: 24px; }

    /* Sidebar: slide-in from left instead of display toggle */
    .sidebar {
        position: fixed;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
    }
    .sidebar.collapsed { width: 240px; padding: 16px; align-items: stretch; }
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .sidebar-user-name { display: inline !important; }
    .sidebar.collapsed .nav-item { width: auto; height: auto; padding: 14px 16px; 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); }

    /* Larger touch targets for mobile nav */
    .sidebar .nav-item {
        padding: 14px 16px;
        font-size: 15px;
        gap: 12px;
        min-height: 48px;
    }
    .sidebar .nav-icon { font-size: 18px; }
    .sidebar .sidebar-user { padding: 14px 16px; }

    /* 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; }

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

    /* Overzicht page — mobile */
    .ovz-stat-value { font-size: 22px; letter-spacing: -0.3px; }
    .ovz-stat-label { font-size: 11px; }
    .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%; }
    .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: 11px; }
    .ovz-sub-body { padding: 10px; }
    .ovz-field-label { white-space: normal; font-size: 11px; padding: 3px 4px; }
    .ovz-field-value { font-size: 12px; 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(--color-border-faint); }
    .ovz-fields-table tr:last-child { border-bottom: none; }

    /* Compact table — tighter on mobile but stays tabular */
    .ovz-compact-table { font-size: 12px; }
    .ovz-compact-table th { font-size: 10px; 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: 11px; }
    .ovz-bar-track { height: 6px; }

    /* Chart cards tighter */
    .chart-card { padding: 12px; }
    .chart-card h4 { font-size: 12px; 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: 12px; 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(--color-border-light); }
    .ovz-client-table tbody td { display: table-cell; padding: 8px; font-size: 13px; 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: 13px; 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: 36px; min-width: 36px; padding: 8px 14px; font-size: 13px; }
    .btn-action { min-height: 44px; min-width: 44px; padding: 10px 12px; font-size: 13px; }

    /* 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;
    }

    /* 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; }
    .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(--color-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: 13px;
        margin-bottom: 10px;
    }
    .device-card .card-expand-body .detail-grid span.label {
        color: var(--color-text-secondary);
        font-size: 12px;
    }
    .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(--radius);
        flex: 1;
        min-width: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        color: white;
    }
    .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); }

    /* ========================================================================
       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;
    }

    .sp-row .sp-row-cell-desktop { display: none !important; }

    /* Row = single tap zone. Override shared .responsive-table card layout. */
    .responsive-table tbody tr.sp-row {
        display: block !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--color-border-light) !important;
        border-left: 3px solid transparent !important;
        transition: background-color 0.15s ease, border-left-color 0.15s ease;
        -webkit-tap-highlight-color: rgba(26, 106, 163, 0.08);
        cursor: pointer;
    }
    .responsive-table tbody tr.sp-row:active,
    .responsive-table tbody tr.sp-row.sp-row-loading {
        background-color: #f1f6fa !important;
        border-left-color: var(--color-primary) !important;
    }
    .sp-row .sp-row-mobile-cell {
        display: block !important;
        padding: 0 !important;
        width: 100%;
    }
    .sp-row .sp-row-mobile-cell::before { display: none !important; }

    /* Card = flex row: avatar + body + arrow.
       touch-action + user-select kill iOS tap delay and text-selection swallowing. */
    .sp-row .sp-row-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        min-height: 64px;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    /* Initials avatar — visual anchor + scan landmark */
    .sp-row .sp-b-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--primary-50, #f2f7fb);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        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: Menlo, Consolas, monospace;
        font-size: 10px;
        letter-spacing: 0.04em;
        background: var(--primary-50, #f2f7fb);
        color: var(--color-primary-dark);
        padding: 2px 7px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    /* Meta line: status dot + address + separator + last-visit age */
    .sp-row .sp-b-meta {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 3px;
        font-size: 12px;
        color: var(--color-text-secondary);
        line-height: 1.35;
    }
    .sp-row .sp-b-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .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(--color-border-light);
        flex-shrink: 0;
    }
    .sp-row .sp-b-age {
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    /* Meta2 line — next visit + open tickets */
    .sp-row .sp-b-meta2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
        font-size: 11.5px;
        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, #ef6c00); font-weight: 600; }
    .sp-row .sp-b-next.is-overdue { color: var(--color-danger, #dc3545); 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, #dc3545);
        color: #fff;
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 6px;
        min-width: 18px;
        text-align: center;
        font-size: 10px;
    }
    .sp-row .sp-b-tick.is-warn .b { background: var(--color-warning, #ef6c00); }

    /* 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(--color-border-light);
        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) {
    .login-container { padding: 12px; }
    .login-card { padding: 20px; }
    body { font-size: 13px; }
    .alert-config-grid { grid-template-columns: 1fr !important; }
    .stats-grid .stat-card { padding: 12px 8px; }
    .stats-grid .stat-card div:first-child { font-size: 24px !important; }
    .stat-value { font-size: 22px; }
    .stat-label { font-size: 11px; }
    .page-title { font-size: 16px; }
    .card-title, h3 { font-size: 14px; }
    .badge { font-size: 10px; padding: 2px 6px; }
    .chart-card { padding: 12px; }
    .chart-card h4 { font-size: 12px; }

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

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


/* Desktop enhancements for system sections */
@media (min-width: 769px) {
    .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 16px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        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; }
}

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