/**
 * Oracle BodyCam Admin Portal - Oracle Redwood Inspired Design System
 *
 * Design Principles:
 * - Clean, clutter-free interface
 * - Neutral color palette with soft accents
 * - Modern sans-serif typography
 * - Ample whitespace
 * - Clear visual hierarchy
 * - Accessibility-focused
 */

/* ============================================================================
   CSS Variables - Design Tokens
   ============================================================================ */
:root {
    /* Primary Colors */
    --rw-primary: #1a73e8;
    --rw-primary-hover: #1557b0;
    --rw-primary-light: #e8f0fe;

    /* Neutral Colors */
    --rw-neutral-0: #ffffff;
    --rw-neutral-50: #f8f9fa;
    --rw-neutral-100: #f1f3f4;
    --rw-neutral-200: #e8eaed;
    --rw-neutral-300: #dadce0;
    --rw-neutral-400: #bdc1c6;
    --rw-neutral-500: #9aa0a6;
    --rw-neutral-600: #80868b;
    --rw-neutral-700: #5f6368;
    --rw-neutral-800: #3c4043;
    --rw-neutral-900: #202124;

    /* Semantic Colors */
    --rw-success: #1e8e3e;
    --rw-success-light: #e6f4ea;
    --rw-warning: #f9ab00;
    --rw-warning-light: #fef7e0;
    --rw-warning-dark: #995c00;
    --rw-danger: #d93025;
    --rw-danger-light: #fce8e6;
    --rw-info: #1a73e8;
    --rw-info-light: #e8f0fe;

    /* Typography */
    --rw-font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --rw-font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    --rw-font-size-xs: 0.75rem;
    --rw-font-size-sm: 0.8125rem;
    --rw-font-size-base: 0.9375rem;
    --rw-font-size-lg: 1.0625rem;
    --rw-font-size-xl: 1.25rem;
    --rw-font-size-2xl: 1.5rem;
    --rw-font-size-3xl: 1.875rem;

    /* Spacing */
    --rw-spacing-xs: 0.25rem;
    --rw-spacing-sm: 0.5rem;
    --rw-spacing-md: 1rem;
    --rw-spacing-lg: 1.5rem;
    --rw-spacing-xl: 2rem;
    --rw-spacing-2xl: 3rem;

    /* Border Radius */
    --rw-radius-sm: 4px;
    --rw-radius-md: 8px;
    --rw-radius-lg: 12px;
    --rw-radius-full: 9999px;

    /* Shadows */
    --rw-shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.1);
    --rw-shadow-md: 0 2px 6px 2px rgba(60, 64, 67, 0.15);
    --rw-shadow-lg: 0 4px 12px 4px rgba(60, 64, 67, 0.15);

    /* Transitions */
    --rw-transition-fast: 150ms ease;
    --rw-transition-normal: 250ms ease;

    /* Layout */
    --rw-sidebar-width: 260px;
    --rw-header-height: 64px;
}

/* ============================================================================
   Dark Theme
   ============================================================================ */
[data-theme="dark"] {
    --rw-primary: #8ab4f8;
    --rw-primary-hover: #aecbfa;
    --rw-primary-light: #1a3a5c;
    --rw-neutral-0: #1e1e1e;
    --rw-neutral-50: #252525;
    --rw-neutral-100: #2d2d2d;
    --rw-neutral-200: #3c3c3c;
    --rw-neutral-300: #4a4a4a;
    --rw-neutral-400: #6b6b6b;
    --rw-neutral-500: #8c8c8c;
    --rw-neutral-600: #a8a8a8;
    --rw-neutral-700: #c4c4c4;
    --rw-neutral-800: #e0e0e0;
    --rw-neutral-900: #f5f5f5;
    --rw-success: #81c995;
    --rw-success-light: #1e3a2a;
    --rw-warning: #fdd663;
    --rw-warning-light: #3d3520;
    --rw-warning-dark: #f9a825;
    --rw-danger: #f28b82;
    --rw-danger-light: #3d2020;
    --rw-info: #8ab4f8;
    --rw-info-light: #1a3a5c;
    --rw-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 0 4px rgba(138, 180, 248, 0.02);
    --rw-shadow-md: 0 2px 6px 2px rgba(0, 0, 0, 0.4), 0 0 8px rgba(138, 180, 248, 0.03);
    --rw-shadow-lg: 0 4px 12px 4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(138, 180, 248, 0.04);

    /* Glow intensity scale */
    --rw-glow-sm: 0 0 8px rgba(138, 180, 248, 0.1);
    --rw-glow-md: 0 0 16px rgba(138, 180, 248, 0.18);
    --rw-glow-lg: 0 0 28px rgba(138, 180, 248, 0.28);
    --rw-glow-success: 0 0 14px rgba(129, 201, 149, 0.2);
    --rw-glow-warning: 0 0 14px rgba(253, 214, 99, 0.2);
    --rw-glow-danger: 0 0 14px rgba(242, 139, 130, 0.2);

    /* Tactical accent tokens */
    --rw-tactical-cyan: rgba(138, 180, 248, 0.7);
    --rw-tactical-dim: rgba(138, 180, 248, 0.15);
    --rw-tactical-glow: rgba(138, 180, 248, 0.25);
    --rw-inset-glow: inset 0 0 18px rgba(138, 180, 248, 0.03);
    --rw-sparkline-bg: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(138, 180, 248, 0.12); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(138, 180, 248, 0.25); }
[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c4c4c4' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); }
[data-theme="dark"] .btn-danger { background: rgba(242, 80, 70, 0.12); border-color: rgba(242, 100, 90, 0.35); color: #f28b82; }
[data-theme="dark"] .btn-danger:hover:not(:disabled) { background: rgba(242, 80, 70, 0.22); box-shadow: 0 0 14px rgba(242, 80, 70, 0.12); }

/* ============================================================================
   Reset & Base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; padding: 0; font-family: var(--rw-font-family); font-size: var(--rw-font-size-base); line-height: 1.5; color: var(--rw-neutral-800); background-color: var(--rw-neutral-50); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--rw-spacing-md); font-weight: 500; line-height: 1.3; color: var(--rw-neutral-900); }
h1 { font-size: var(--rw-font-size-3xl); }
h2 { font-size: var(--rw-font-size-2xl); }
h3 { font-size: var(--rw-font-size-xl); }
h4 { font-size: var(--rw-font-size-lg); }
p { margin: 0 0 var(--rw-spacing-md); }
a { color: var(--rw-primary); text-decoration: none; transition: color var(--rw-transition-fast); }
a:hover { color: var(--rw-primary-hover); }

/* ============================================================================
   Layout - App Shell
   ============================================================================ */
.app-container { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed; top: 0; left: 0; width: var(--rw-sidebar-width); height: 100vh;
    background: var(--rw-neutral-0); border-right: 1px solid var(--rw-neutral-200);
    display: flex; flex-direction: column; z-index: 100; transition: transform var(--rw-transition-normal);
}
.sidebar-header { padding: var(--rw-spacing-lg); border-bottom: 1px solid var(--rw-neutral-200); }
.sidebar-logo { display: flex; align-items: center; gap: var(--rw-spacing-sm); }
.sidebar-logo-icon {
    width: 36px; height: 36px; background: var(--rw-primary); border-radius: var(--rw-radius-md);
    display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: var(--rw-font-size-lg);
}
.sidebar-logo-text { font-size: var(--rw-font-size-lg); font-weight: 600; color: var(--rw-neutral-900); }
.sidebar-logo-subtitle { font-size: var(--rw-font-size-xs); color: var(--rw-neutral-600); text-transform: uppercase; letter-spacing: 0.5px; }

.nav-menu { flex: 1; overflow-y: auto; padding: var(--rw-spacing-md) 0; }
.nav-section { margin-bottom: var(--rw-spacing-lg); }
.nav-section-title { padding: var(--rw-spacing-sm) var(--rw-spacing-lg); font-size: 21px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--rw-neutral-500); position: relative; cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.nav-section-title:hover { color: var(--rw-neutral-700); }
.nav-section-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.nav-section-title.expanded .nav-section-chevron { transform: rotate(0deg); }
.nav-section-title:not(.expanded) .nav-section-chevron { transform: rotate(-90deg); }
.nav-section-items.collapsed { display: none; }
[data-theme="dark"] .nav-section-title { color: var(--rw-tactical-cyan); text-shadow: 0 0 8px rgba(138, 180, 248, 0.12); letter-spacing: 1px; }
[data-theme="dark"] .nav-section-title:hover { color: #fff; }
[data-theme="dark"] .nav-section-title::after { content: ''; position: absolute; bottom: 0; left: var(--rw-spacing-lg); width: 50%; height: 1px; background: linear-gradient(90deg, rgba(138, 180, 248, 0.2), transparent); pointer-events: none; }
.nav-item { display: flex; align-items: center; gap: var(--rw-spacing-sm); padding: var(--rw-spacing-sm) var(--rw-spacing-lg); color: var(--rw-neutral-700); cursor: pointer; transition: all var(--rw-transition-fast); border-left: 3px solid transparent; }
.nav-item:hover { background: var(--rw-neutral-100); color: var(--rw-neutral-900); }
.nav-item.active { background: var(--rw-primary-light); color: var(--rw-primary); border-left-color: var(--rw-primary); }
.nav-item-icon { width: 20px; height: 20px; opacity: 0.7; }
.nav-item.active .nav-item-icon { opacity: 1; }
.nav-item-text { font-size: 23px; font-weight: 500; }
.nav-item-badge { margin-left: auto; background: var(--rw-danger); color: white; font-size: var(--rw-font-size-xs); padding: 2px 6px; border-radius: var(--rw-radius-full); font-weight: 500; }

.main-content { flex: 1; margin-left: 0; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; overflow-x: hidden; }

.header {
    height: var(--rw-header-height); background: var(--rw-neutral-0); border-bottom: 1px solid var(--rw-neutral-200);
    display: flex; align-items: center; justify-content: space-between; padding: 0 var(--rw-spacing-xl);
    position: sticky; top: 0; z-index: 50;
}
.header-title { font-size: var(--rw-font-size-xl); font-weight: 500; color: var(--rw-neutral-900); display: flex; align-items: center; }
[data-theme="dark"] .header-title { text-shadow: 0 0 10px rgba(138, 180, 248, 0.08); }
[data-theme="dark"] .header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(138, 180, 248, 0.15), rgba(249, 171, 0, 0.1), transparent); pointer-events: none; }
.header-actions { display: flex; align-items: center; gap: var(--rw-spacing-md); }
.page-content { flex: 1; padding: var(--rw-spacing-xl); min-width: 0; overflow-x: hidden; }

/* ============================================================================
   Cards
   ============================================================================ */
.card { background: var(--rw-neutral-0); border-radius: var(--rw-radius-lg); box-shadow: var(--rw-shadow-sm); border: 1px solid var(--rw-neutral-200); }
.card-header { padding: var(--rw-spacing-lg); border-bottom: 1px solid var(--rw-neutral-200); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: var(--rw-font-size-lg); font-weight: 500; margin: 0; }
.card-body { padding: var(--rw-spacing-lg); }
.card-footer { padding: var(--rw-spacing-md) var(--rw-spacing-lg); border-top: 1px solid var(--rw-neutral-200); background: var(--rw-neutral-50); border-radius: 0 0 var(--rw-radius-lg) var(--rw-radius-lg); }

.stat-card { padding: var(--rw-spacing-lg); }
.stat-card-label { font-size: var(--rw-font-size-sm); color: var(--rw-neutral-600); margin-bottom: var(--rw-spacing-xs); }
.stat-card-value { font-size: var(--rw-font-size-3xl); font-weight: 600; color: var(--rw-neutral-900); font-variant-numeric: tabular-nums; }

/* Health strip — 3px status bar at card bottom */
.card-health-strip { height: 3px; width: 100%; border-radius: 0 0 var(--rw-radius-lg) var(--rw-radius-lg); transition: background 0.4s ease; }
.card-health-strip[data-health="good"] { background: var(--rw-success); }
.card-health-strip[data-health="warning"] { background: var(--rw-warning); }
.card-health-strip[data-health="critical"] { background: var(--rw-danger); }
.card-health-strip[data-health="offline"] { background: var(--rw-neutral-400); }

/* Tactical uppercase label */
.rw-tactical-label { font-size: 19px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rw-neutral-500); }
[data-theme="dark"] .rw-tactical-label { color: var(--rw-tactical-cyan); text-shadow: 0 0 8px rgba(138, 180, 248, 0.15); }

/* tabular-nums for numeric displays */
.badge, .nav-item-badge, .player-transcript-time, .nvr-mv-time, .nvr-mv-drift { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Buttons
   ============================================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--rw-spacing-sm);
    padding: var(--rw-spacing-sm) var(--rw-spacing-md); font-family: inherit; font-size: var(--rw-font-size-sm);
    font-weight: 500; line-height: 1.5; border: 1px solid transparent; border-radius: var(--rw-radius-md);
    cursor: pointer; transition: all var(--rw-transition-fast); text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--rw-primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--rw-primary-hover); }
.btn-secondary { background: var(--rw-neutral-0); color: var(--rw-neutral-700); border-color: var(--rw-neutral-300); }
.btn-secondary:hover:not(:disabled) { background: var(--rw-neutral-100); border-color: var(--rw-neutral-400); }
.btn-danger { background: var(--rw-danger); color: white; }
.btn-danger:hover:not(:disabled) { background: #c5221f; }
.btn-ghost { background: transparent; color: var(--rw-neutral-700); }
.btn-ghost:hover:not(:disabled) { background: var(--rw-neutral-100); }
.btn-sm { padding: var(--rw-spacing-xs) var(--rw-spacing-sm); font-size: var(--rw-font-size-xs); }
.btn-xs { padding: 2px 8px; font-size: 20px; }
.btn-lg { padding: var(--rw-spacing-md) var(--rw-spacing-lg); font-size: var(--rw-font-size-base); }
.btn-icon { padding: var(--rw-spacing-sm); }
.btn:active:not(:disabled) { transform: scale(0.97); }
[data-theme="dark"] .btn-primary:active:not(:disabled) { box-shadow: 0 0 12px rgba(138, 180, 248, 0.25); }
[data-theme="dark"] .btn-danger:active:not(:disabled) { box-shadow: 0 0 12px rgba(242, 139, 130, 0.25); }

/* ============================================================================
   Theme Toggle
   ============================================================================ */
.theme-toggle {
    background: none; border: 1px solid var(--rw-neutral-300); border-radius: var(--rw-radius-md);
    padding: var(--rw-spacing-xs) var(--rw-spacing-sm); cursor: pointer; color: var(--rw-neutral-700);
    display: inline-flex; align-items: center; justify-content: center; transition: all var(--rw-transition-fast);
}
.theme-toggle:hover { background: var(--rw-neutral-100); border-color: var(--rw-neutral-400); }

/* ============================================================================
   Forms
   ============================================================================ */
.form-group { margin-bottom: var(--rw-spacing-lg); }
.form-label { display: block; margin-bottom: var(--rw-spacing-xs); font-size: var(--rw-font-size-sm); font-weight: 500; color: var(--rw-neutral-700); }
.form-label.required::after { content: '*'; color: var(--rw-danger); margin-left: 2px; }
.form-input {
    width: 100%; padding: var(--rw-spacing-sm) var(--rw-spacing-md); font-family: inherit; font-size: var(--rw-font-size-base);
    line-height: 1.5; color: var(--rw-neutral-800); background: var(--rw-neutral-0);
    border: 1px solid var(--rw-neutral-300); border-radius: var(--rw-radius-md); transition: all var(--rw-transition-fast);
}
.form-input:focus { outline: none; border-color: var(--rw-primary); box-shadow: 0 0 0 3px var(--rw-primary-light); }
.form-input:disabled { background: var(--rw-neutral-100); cursor: not-allowed; }
.form-input.error { border-color: var(--rw-danger); }
.form-input.error:focus { box-shadow: 0 0 0 3px var(--rw-danger-light); }
.form-helper { margin-top: var(--rw-spacing-xs); font-size: var(--rw-font-size-sm); color: var(--rw-neutral-600); }
.form-error { margin-top: var(--rw-spacing-xs); font-size: var(--rw-font-size-sm); color: var(--rw-danger); }
.form-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.form-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.form-switch input { opacity: 0; width: 0; height: 0; }
.form-switch-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--rw-neutral-400); transition: var(--rw-transition-fast); border-radius: var(--rw-radius-full);
}
.form-switch-slider::before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: var(--rw-transition-fast); border-radius: 50%; box-shadow: var(--rw-shadow-sm);
}
.form-switch input:checked + .form-switch-slider { background-color: var(--rw-primary); }
.form-switch input:checked + .form-switch-slider::before { transform: translateX(20px); }

/* ============================================================================
   Tables
   ============================================================================ */
.table-container { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--rw-font-size-sm); }
.table th { padding: var(--rw-spacing-md); text-align: left; font-weight: 600; color: var(--rw-neutral-700); background: var(--rw-neutral-50); border-bottom: 2px solid var(--rw-neutral-200); white-space: nowrap; }
.table td { padding: var(--rw-spacing-md); border-bottom: 1px solid var(--rw-neutral-200); color: var(--rw-neutral-800); vertical-align: middle; }
.table tr:hover td { background: var(--rw-neutral-50); }
.table-actions { white-space: nowrap; }
.table-actions .btn { display: inline-flex; margin-right: var(--rw-spacing-xs); }
.table-actions .btn:last-child { margin-right: 0; }
[data-theme="dark"] .table th { font-size: 19px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--rw-tactical-cyan); border-bottom-color: var(--rw-tactical-dim); }
[data-theme="dark"] .table tr:hover td { background: rgba(138, 180, 248, 0.03); }

/* ============================================================================
   Badges
   ============================================================================ */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: var(--rw-font-size-xs); font-weight: 500; border-radius: var(--rw-radius-full); }
.badge-primary { background: var(--rw-primary-light); color: var(--rw-primary); }
.badge-success { background: var(--rw-success-light); color: var(--rw-success); }
.badge-warning { background: var(--rw-warning-light); color: var(--rw-warning-dark); }
.badge-danger { background: var(--rw-danger-light); color: var(--rw-danger); }
.badge-neutral { background: var(--rw-neutral-200); color: var(--rw-neutral-700); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-online { background: var(--rw-success); box-shadow: 0 0 0 2px var(--rw-success-light); }
.status-offline { background: var(--rw-neutral-400); box-shadow: 0 0 0 2px var(--rw-neutral-200); }

/* Neon status badges — translucent bg + neon text (dark mode optimized) */
.badge-neon-success { background: rgba(30, 142, 62, 0.12); color: var(--rw-success); border: 1px solid rgba(30, 142, 62, 0.25); border-radius: var(--rw-radius-full); }
.badge-neon-warning { background: rgba(249, 171, 0, 0.12); color: var(--rw-warning); border: 1px solid rgba(249, 171, 0, 0.25); border-radius: var(--rw-radius-full); }
.badge-neon-danger { background: rgba(217, 48, 37, 0.12); color: var(--rw-danger); border: 1px solid rgba(217, 48, 37, 0.25); border-radius: var(--rw-radius-full); }
.badge-neon-info { background: rgba(138, 180, 248, 0.1); color: var(--rw-primary); border: 1px solid rgba(138, 180, 248, 0.2); border-radius: var(--rw-radius-full); }
.badge-neon-purple { background: rgba(138, 43, 226, 0.12); color: #b39ddb; border: 1px solid rgba(138, 43, 226, 0.25); border-radius: var(--rw-radius-full); }
.badge-neon-cyan { background: rgba(0, 212, 255, 0.1); color: #80e5ff; border: 1px solid rgba(0, 212, 255, 0.2); border-radius: var(--rw-radius-full); }

/* ============================================================================
   Modals
   ============================================================================ */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
    opacity: 0; visibility: hidden; transition: all var(--rw-transition-normal);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
    background: var(--rw-neutral-0); border-radius: var(--rw-radius-lg); box-shadow: var(--rw-shadow-lg);
    width: 100%; max-width: 500px; max-height: 90vh; overflow: hidden;
    transform: scale(0.95); transition: transform var(--rw-transition-normal);
}
.modal-overlay.active .modal { transform: scale(1); }
.modal-header { padding: var(--rw-spacing-lg); border-bottom: 1px solid var(--rw-neutral-200); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: var(--rw-font-size-lg); font-weight: 500; margin: 0; }
.modal-close { background: none; border: none; cursor: pointer; padding: var(--rw-spacing-xs); color: var(--rw-neutral-600); border-radius: var(--rw-radius-sm); }
.modal-close:hover { background: var(--rw-neutral-100); }
.modal-body { padding: var(--rw-spacing-lg); overflow-y: auto; max-height: 60vh; }
.modal-footer { padding: var(--rw-spacing-md) var(--rw-spacing-lg); border-top: 1px solid var(--rw-neutral-200); display: flex; justify-content: flex-end; gap: var(--rw-spacing-sm); background: var(--rw-neutral-50); }

/* ============================================================================
   Themed Dialog (replaces native alert/confirm/prompt)
   ============================================================================ */
.rw-dialog-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center; z-index: 2500;
    animation: rwDialogFadeIn 150ms ease;
}
@keyframes rwDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rw-dialog-overlay .modal { transform: scale(1); max-width: 420px; animation: rwDialogSlideIn 150ms ease; }
@keyframes rwDialogSlideIn { from { transform: scale(0.95) translateY(-8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.rw-dialog-message { font-size: var(--rw-font-size-md); color: var(--rw-neutral-700); margin-bottom: var(--rw-spacing-md); white-space: pre-line; }
.rw-dialog-message:last-child { margin-bottom: 0; }
.rw-dialog-input {
    width: 100%; padding: var(--rw-spacing-sm) var(--rw-spacing-md);
    border: 1px solid var(--rw-neutral-300); border-radius: var(--rw-radius-md);
    font-size: var(--rw-font-size-md); color: var(--rw-neutral-800);
    background: var(--rw-neutral-0); outline: none; transition: border-color 0.15s;
}
.rw-dialog-input:focus { border-color: var(--rw-primary); box-shadow: 0 0 0 3px rgba(199, 70, 52, 0.12); }
[data-theme="dark"] .rw-dialog-input { background: var(--rw-neutral-100); color: var(--rw-neutral-800); border-color: var(--rw-neutral-300); }
[data-theme="dark"] .rw-dialog-input:focus { box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.15); }
[data-theme="dark"] .rw-dialog-message { color: var(--rw-neutral-700); }
[data-theme="dark"] .rw-dialog-select-item { color: var(--rw-neutral-600); border-bottom-color: var(--rw-neutral-200); }
[data-theme="dark"] .rw-dialog-select-item:hover { background: var(--rw-neutral-100); color: var(--rw-primary); }
.rw-dialog-select-list { max-height: 280px; overflow-y: auto; }
.rw-dialog-select-item {
    display: flex; align-items: center; gap: var(--rw-spacing-sm);
    padding: var(--rw-spacing-sm) var(--rw-spacing-lg); cursor: pointer;
    font-size: var(--rw-font-size-md); color: var(--rw-neutral-600);
    transition: background 80ms ease; border-bottom: 1px solid var(--rw-neutral-100);
}
.rw-dialog-select-item:last-child { border-bottom: none; }
.rw-dialog-select-item:hover { background: var(--rw-neutral-50); color: var(--rw-primary); }

/* ============================================================================
   Toast Notifications
   ============================================================================ */
.toast-container { position: fixed; top: var(--rw-spacing-lg); right: var(--rw-spacing-lg); z-index: 2000; display: flex; flex-direction: column; gap: var(--rw-spacing-sm); }
.toast { background: var(--rw-neutral-0); border-radius: var(--rw-radius-md); box-shadow: var(--rw-shadow-lg); padding: var(--rw-spacing-md); display: flex; align-items: center; gap: var(--rw-spacing-sm); min-width: 300px; animation: slideIn var(--rw-transition-normal) ease; }
.toast-success { border-left: 4px solid var(--rw-success); }
.toast-error { border-left: 4px solid var(--rw-danger); }
.toast-info { border-left: 4px solid var(--rw-info); }
.toast-warning { border-left: 4px solid var(--rw-warning); }
.toast-face { border-left: 4px solid #8a2be2; }
.toast-plate { border-left: 4px solid #00ff88; }
.toast-marker { border-left: 4px solid #648cb4; }
.toast-geofence { border-left: 4px solid var(--rw-warning); }
.toast-sound { border-left: 4px solid #06b6d4; }
/* Dark mode: fully colored toast backgrounds for high-severity */
[data-theme="dark"] .toast-danger-full { background: rgba(217, 48, 37, 0.9); color: #fff; border-left: none; }
[data-theme="dark"] .toast-warning-full { background: rgba(249, 171, 0, 0.9); color: #000; border-left: none; }
[data-theme="dark"] .toast-face-full { background: rgba(138, 43, 226, 0.9); color: #fff; border-left: none; }
[data-theme="dark"] .toast-plate-full { background: rgba(0, 255, 136, 0.85); color: #000; border-left: none; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============================================================================
   Notification Panel
   ============================================================================ */
.notif-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 360px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--rw-neutral-50);
  border: 1px solid var(--rw-neutral-300);
  border-radius: var(--rw-radius-lg);
  box-shadow: var(--rw-shadow-lg);
  z-index: 1000;
  padding: 0;
}
[data-theme="dark"] .notif-panel {
  background: #1a1d24;
  border-color: rgba(138, 180, 248, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(138, 180, 248, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
[data-theme="dark"] .notif-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rw-radius-lg);
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(138, 180, 248, 0.015) 3px, rgba(138, 180, 248, 0.015) 4px);
  z-index: 0;
}
.notif-panel > * { position: relative; z-index: 1; }
.notif-panel-header {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rw-neutral-200);
}
[data-theme="dark"] .notif-panel-header {
  border-bottom-color: rgba(138, 180, 248, 0.12);
  background: rgba(138, 180, 248, 0.04);
}
.notif-panel-header strong {
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--rw-neutral-900);
}
[data-theme="dark"] .notif-panel-header strong {
  color: var(--rw-primary);
  text-shadow: 0 0 10px rgba(138, 180, 248, 0.3);
  letter-spacing: 1.5px;
  font-size: 20px;
  text-transform: uppercase;
}
.notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rw-neutral-200);
  font-size: 21px;
  transition: background 0.15s;
}
[data-theme="dark"] .notif-item {
  border-bottom-color: rgba(138, 180, 248, 0.06);
}
[data-theme="dark"] .notif-item:hover {
  background: rgba(138, 180, 248, 0.05);
}
.notif-item.notif-acked { opacity: 0.45; }
.notif-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notif-item-type { font-weight: 600; font-size: 20px; letter-spacing: 0.3px; }
.notif-item-time { color: var(--rw-neutral-500); font-size: 20px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .notif-item-time { color: var(--rw-neutral-600); }
.notif-item-body { margin-top: 3px; color: var(--rw-neutral-700); font-size: 21px; }
[data-theme="dark"] .notif-item-body { color: var(--rw-neutral-600); }
.notif-ack-btn {
  font-size: 19px;
  background: none;
  border: 1px solid var(--rw-neutral-300);
  border-radius: 3px;
  color: var(--rw-neutral-600);
  cursor: pointer;
  padding: 1px 6px;
  margin-left: 6px;
  transition: all 0.15s;
}
[data-theme="dark"] .notif-ack-btn {
  border-color: rgba(138, 180, 248, 0.2);
  color: var(--rw-neutral-500);
}
[data-theme="dark"] .notif-ack-btn:hover {
  border-color: var(--rw-primary);
  color: var(--rw-primary);
  box-shadow: 0 0 6px rgba(138, 180, 248, 0.15);
}
.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--rw-neutral-500);
  font-size: 22px;
}
[data-theme="dark"] .notif-empty {
  color: var(--rw-neutral-600);
  font-family: var(--rw-font-mono);
  letter-spacing: 1px;
  font-size: 20px;
}
.notif-status-bar {
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rw-neutral-200);
}
[data-theme="dark"] .notif-status-bar {
  border-bottom-color: rgba(138, 180, 248, 0.06);
}
.notif-status-bar span {
  font-size: 20px;
  color: var(--rw-neutral-500);
}
[data-theme="dark"] .notif-status-bar span {
  color: var(--rw-neutral-600);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Grid & Utilities
   ============================================================================ */
.grid { display: grid; gap: var(--rw-spacing-lg); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .grid-cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .grid-cols-5, .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-cols-5, .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-sm { gap: var(--rw-spacing-sm); }
.gap-md { gap: var(--rw-spacing-md); }
.gap-lg { gap: var(--rw-spacing-lg); }
.mt-md { margin-top: var(--rw-spacing-md); }
.mt-lg { margin-top: var(--rw-spacing-lg); }
.mb-md { margin-bottom: var(--rw-spacing-md); }
.mb-lg { margin-bottom: var(--rw-spacing-lg); }
.text-center { text-align: center; }
.text-muted { color: var(--rw-neutral-600); }
.text-sm { font-size: var(--rw-font-size-sm); }
.font-medium { font-weight: 500; }

/* ============================================================================
   Empty & Loading States
   ============================================================================ */
.empty-state { text-align: center; padding: var(--rw-spacing-2xl); }
.empty-state-icon { width: 64px; height: 64px; margin: 0 auto var(--rw-spacing-md); color: var(--rw-neutral-400); }
.empty-state-title { font-size: var(--rw-font-size-lg); font-weight: 500; margin-bottom: var(--rw-spacing-xs); }
.empty-state-message { color: var(--rw-neutral-600); margin-bottom: var(--rw-spacing-lg); }

.spinner { width: 24px; height: 24px; border: 3px solid var(--rw-neutral-200); border-top-color: var(--rw-primary); border-radius: 50%; animation: spin 1s linear infinite; }
.spinner-sm { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: var(--rw-spacing-md); }
.loading-container .spinner { width: 40px; height: 40px; border-width: 4px; }
.loading-text { color: var(--rw-neutral-600); font-size: var(--rw-font-size-sm); }

/* C6: Loading skeletons */
@keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--rw-border, #e2e2e2) 25%, var(--rw-neutral-100, #ececec) 50%, var(--rw-border, #e2e2e2) 75%);
    background-size: 800px 100%;
    border-radius: var(--rw-radius-sm, 4px);
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--rw-neutral-200, #3c3c3c) 25%, var(--rw-neutral-300, #4a4a4a) 50%, var(--rw-neutral-200, #3c3c3c) 75%);
    background-size: 800px 100%;
}
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long { width: 90%; }
.skeleton-heading {
    height: 22px;
    width: 50%;
    margin-bottom: 16px;
}
.skeleton-card {
    height: 100px;
    border-radius: var(--rw-radius-lg, 12px);
    margin-bottom: 12px;
}
.skeleton-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    align-items: center;
}
.skeleton-row .skeleton-cell {
    height: 16px;
    flex: 1;
    border-radius: 4px;
}
.skeleton-row .skeleton-cell:first-child { flex: 0 0 40px; }
.skeleton-row .skeleton-cell:last-child { flex: 0 0 80px; }
.skeleton-table {
    padding: 16px;
}
.skeleton-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.skeleton-loading-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
    color: var(--rw-neutral-500, #8c8c8c);
    font-size: 15px;
    font-family: var(--rw-font-family);
}
.skeleton-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--rw-neutral-300, #d0d0d0);
    border-top-color: var(--rw-primary, #C74634);
    border-radius: 50%;
    animation: skeleton-spin 0.8s linear infinite;
}
[data-theme="dark"] .skeleton-spinner {
    border-color: var(--rw-neutral-400, #6b6b6b);
    border-top-color: var(--rw-primary, #8ab4f8);
}
@keyframes skeleton-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   Login Page
   ============================================================================ */
.login-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--rw-neutral-50); z-index: 5000;
    display: flex; align-items: center; justify-content: center;
}
.login-card {
    background: var(--rw-neutral-0); border-radius: var(--rw-radius-lg); box-shadow: var(--rw-shadow-lg);
    width: 100%; max-width: 500px; padding: var(--rw-spacing-2xl);
}
.login-logo { text-align: center; margin-bottom: var(--rw-spacing-xl); }
.login-logo-icon {
    width: 56px; height: 56px; background: var(--rw-primary); border-radius: var(--rw-radius-lg);
    display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.9rem; margin-bottom: var(--rw-spacing-sm);
}
.login-logo-title { font-size: var(--rw-font-size-2xl); font-weight: 600; color: var(--rw-neutral-900); }
.login-logo-subtitle { font-size: var(--rw-font-size-sm); color: var(--rw-neutral-600); }
.login-divider { display: flex; align-items: center; gap: var(--rw-spacing-md); margin: var(--rw-spacing-lg) 0; color: var(--rw-neutral-500); font-size: var(--rw-font-size-sm); }
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--rw-neutral-200); }
.login-error { background: var(--rw-danger-light); color: var(--rw-danger); padding: var(--rw-spacing-sm) var(--rw-spacing-md); border-radius: var(--rw-radius-md); font-size: var(--rw-font-size-sm); margin-bottom: var(--rw-spacing-md); display: none; }

/* ============================================================================
   Video Player Slide-out Panel (C3)
   ============================================================================ */
.player-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    display: none;
}
.player-backdrop.active {
    display: block;
}
.player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3vh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
}
.player-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.player-container {
    position: relative;
    width: 1280px;
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    background: var(--rw-bg-dark, #1a1a2e);
    border-radius: var(--rw-radius-lg, 12px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.player-video-col {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 720px;
    position: relative;
    background: #000;
    border-radius: var(--rw-radius-lg, 12px) var(--rw-radius-lg, 12px) 0 0;
    overflow: hidden;
}
.player-video-col .video-js { width: 100%; height: 100%; background: #000; }
.player-video-col .video-js video { width: 100%; height: 100%; object-fit: contain; }
.player-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 29px;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.player-close:hover { background: rgba(0,0,0,0.85); }
.player-transcript {
    flex: 1 1 auto;
    min-height: 100px;
    max-height: 350px;
    overflow-y: auto;
    border-top: 1px solid var(--rw-border, #e0e0e0);
    background: var(--rw-neutral-0);
    display: none; flex-direction: column;
    border-radius: 0 0 var(--rw-radius-lg, 12px) var(--rw-radius-lg, 12px);
}
.player-transcript.active { display: flex; }
.player-transcript-header { padding: var(--rw-spacing-sm) var(--rw-spacing-md); font-size: var(--rw-font-size-sm); font-weight: 600; border-bottom: 1px solid var(--rw-neutral-200); }
.player-transcript-lines { overflow-y: auto; flex: 1; padding: var(--rw-spacing-sm) 0; }
.player-transcript-line { padding: var(--rw-spacing-xs) var(--rw-spacing-md); cursor: pointer; font-size: var(--rw-font-size-sm); line-height: 1.4; transition: background var(--rw-transition-fast); }
.player-transcript-line:hover { background: var(--rw-neutral-100); }
.player-transcript-line.active { background: var(--rw-primary-light); }
.player-transcript-time { color: var(--rw-neutral-500); font-size: var(--rw-font-size-xs); margin-right: 6px; font-family: monospace; }
.player-lang-badge { display: inline-block; font-size: 15px; font-weight: 700; padding: 1px 5px; margin-right: 5px; border-radius: 3px; background: var(--rw-primary, #c74634); color: #fff; text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle; }
.player-lang-toggle { font-size: 16px; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--rw-neutral-300, #ccc); border-radius: 3px; background: transparent; color: var(--rw-neutral-600, #666); cursor: pointer; vertical-align: middle; }
.player-lang-toggle:hover { background: var(--rw-neutral-100, #f3f4f6); }

/* Player markers panel */
.player-markers-panel {
    flex: 0 0 auto; max-height: 150px; width: 100%; background: var(--rw-neutral-0);
    border-top: 1px solid var(--rw-neutral-200);
    display: none; flex-direction: column; overflow: hidden;
}
.player-markers-panel:not([style*="display: none"]) { display: flex; }
.player-markers-list { overflow-y: auto; flex: 1; padding: var(--rw-spacing-xs) 0; }
.player-marker-item {
    padding: 6px var(--rw-spacing-md); cursor: pointer; font-size: var(--rw-font-size-sm); line-height: 1.4;
    display: flex; align-items: center; gap: 6px; transition: background var(--rw-transition-fast);
}
.player-marker-item:hover { background: var(--rw-neutral-100); }
.player-marker-time { color: var(--rw-neutral-500); font-size: var(--rw-font-size-xs); font-family: monospace; white-space: nowrap; }
.player-marker-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .player-markers-panel { background: var(--rw-neutral-800); border-color: var(--rw-neutral-700); }
[data-theme="dark"] .player-marker-item:hover { background: var(--rw-neutral-700); }
[data-theme="dark"] .player-marker-time { color: var(--rw-neutral-400); }

/* Alert message panel (inside player video column) */
.player-alert-msg {
    flex-shrink: 0;
    background: var(--rw-neutral-0); border: 1px solid var(--rw-neutral-200);
    border-radius: var(--rw-radius-md); padding: var(--rw-spacing-sm) var(--rw-spacing-md);
}
.player-alert-msg-header {
    font-size: var(--rw-font-size-xs); font-weight: 600; color: var(--rw-neutral-500);
    margin-bottom: var(--rw-spacing-xs);
}
.player-alert-msg-body { display: flex; gap: var(--rw-spacing-sm); align-items: center; }
.player-alert-msg-body .form-input { flex: 1; padding: 6px var(--rw-spacing-sm); font-size: var(--rw-font-size-sm); }
.player-alert-msg-status {
    font-size: var(--rw-font-size-xs); margin-top: 4px; min-height: 16px;
}
.player-alert-msg-status.success { color: var(--rw-success); }
.player-alert-msg-status.error { color: var(--rw-danger); }

/* Vitals strip overlay on live streams */
.vitals-strip {
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: var(--rw-font-size-sm);
    font-family: var(--rw-font-mono, monospace);
    text-align: center;
    z-index: 12;
    pointer-events: none;
    letter-spacing: 0.5px;
}

/* ============================================================================
   Timeline
   ============================================================================ */
.timeline-container { display: flex; flex-direction: column; gap: var(--rw-spacing-md); }
.timeline-top-bar { display: flex; gap: var(--rw-spacing-md); align-items: center; flex-wrap: wrap; }
.timeline-player-area { display: flex; gap: 0; background: var(--rw-neutral-0); border-radius: var(--rw-radius-lg); border: 1px solid var(--rw-neutral-200); overflow: hidden; min-height: 300px; }
.timeline-video-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.timeline-video-wrap video { width: 100%; flex: 1; min-height: 0; background: #000; }
.timeline-video-controls { display: flex; align-items: center; gap: var(--rw-spacing-sm); padding: var(--rw-spacing-sm) var(--rw-spacing-md); background: var(--rw-neutral-50); border-top: 1px solid var(--rw-neutral-200); }
.timeline-bar-wrap { background: var(--rw-neutral-0); border: 1px solid var(--rw-neutral-200); border-radius: var(--rw-radius-lg); padding: var(--rw-spacing-md); }
.timeline-bar-outer { position: relative; height: 48px; background: var(--rw-neutral-100); border-radius: var(--rw-radius-sm); overflow: hidden; cursor: pointer; user-select: none; }
.timeline-segment { position: absolute; top: 8px; height: 32px; border-radius: 2px; cursor: pointer; transition: opacity var(--rw-transition-fast); min-width: 2px; }
.timeline-segment:hover { opacity: 0.85; }
.timeline-segment.source-live { background: var(--rw-primary); }
.timeline-segment.upload { background: var(--rw-warning); }
.timeline-segment.currently-live { background: var(--rw-success); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.timeline-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rw-danger); z-index: 10; pointer-events: none; }
.timeline-playhead::after { content: ''; position: absolute; top: -2px; left: -4px; width: 10px; height: 10px; background: var(--rw-danger); border-radius: 50%; }
.timeline-axis { position: relative; height: 20px; margin-top: 4px; }
.timeline-tick { position: absolute; top: 0; font-size: var(--rw-font-size-xs); color: var(--rw-neutral-500); transform: translateX(-50%); white-space: nowrap; }

/* ============================================================================
   Map
   ============================================================================ */
.map-container { display: flex; height: calc(100vh - 200px); min-height: 500px; gap: 0; border: 1px solid var(--rw-neutral-200); border-radius: var(--rw-radius-lg); overflow: hidden; }
.map-left { flex: 1; min-width: 0; position: relative; }
.map-left #mapCanvas { width: 100%; height: 100%; }
.map-right { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--rw-neutral-0); border-left: 1px solid var(--rw-neutral-200); }
.map-toolbar { display: flex; gap: var(--rw-spacing-sm); align-items: center; padding: var(--rw-spacing-sm) var(--rw-spacing-md); background: var(--rw-neutral-50); border-bottom: 1px solid var(--rw-neutral-200); flex-wrap: wrap; }

/* ============================================================================
   Responsive
   ============================================================================ */
/* C8: Mobile responsive user portal */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .mobile-menu-toggle { display: flex; }
    .header { padding: 0 12px; }
    .header-actions { gap: 8px; }
}

@media (max-width: 768px) {
    /* Card-based layouts for tables */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table th, .table td { padding: 8px 10px; font-size: 22px; white-space: nowrap; }

    /* Stat grid single column */
    .stat-grid, .stats-row { grid-template-columns: 1fr !important; }

    /* Stack card headers */
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-header .flex { flex-wrap: wrap; }

    /* Touch-friendly buttons (min 44x44 tap target) */
    .btn { min-height: 44px; min-width: 44px; padding: 10px 16px; }
    .btn-sm { min-height: 44px; min-width: 44px; padding: 10px 12px; }

    /* Form inputs touch-friendly */
    .form-input, .form-select, select.form-input { min-height: 44px; font-size: 25px; }

    /* Modal responsive */
    .modal-content { width: 95vw; max-width: 95vw; margin: 8px; max-height: 90vh; }

    /* Player panel full-width on mobile */
    .player-container {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .player-video-col {
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .header-title { font-size: 23px; }
    .header-logo { height: 28px; }
    .nav-item { padding: 12px 16px; font-size: 23px; }
    .nav-section-title { padding: 12px 16px; }
    .page-header h2 { font-size: 27px; }
}

.mobile-menu-toggle { display: none; background: none; border: none; padding: var(--rw-spacing-sm); cursor: pointer; color: var(--rw-neutral-700); }

/* ============================================================================
   Scrollbar
   ============================================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--rw-neutral-100); }
::-webkit-scrollbar-thumb { background: var(--rw-neutral-400); border-radius: var(--rw-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--rw-neutral-500); }

/* ============================================================================
   Sidebar User Footer
   ============================================================================ */
.sidebar-footer { padding: var(--rw-spacing-md) var(--rw-spacing-lg); border-top: 1px solid var(--rw-neutral-200); }
.sidebar-user { display: flex; align-items: center; gap: var(--rw-spacing-sm); }
.sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rw-primary-light); color: var(--rw-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--rw-font-size-sm); }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: var(--rw-font-size-sm); font-weight: 500; color: var(--rw-neutral-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: var(--rw-font-size-xs); color: var(--rw-neutral-500); }

/* ============================================================================
   Multi-View Module — NVR Dark Theme (scoped)
   ============================================================================ */

/* NVR design tokens scoped to multiview container */
.nvr-mv {
    --nvr-bg: #161616;
    --nvr-surface: #1e1e1e;
    --nvr-surface-2: #252525;
    --nvr-surface-3: #2d2d2d;
    --nvr-border: #3c3c3c;
    --nvr-border-light: #4a4a4a;
    --nvr-text: #e0e0e0;
    --nvr-text-muted: #a8a8a8;
    --nvr-text-dim: #6b6b6b;
    --nvr-accent: #8ab4f8;
    --nvr-accent-hover: #aecbfa;
    --nvr-alert: #f28b82;
    --nvr-success: #81c995;
    --nvr-primary-light: #1a3a5c;
    --nvr-danger: #f28b82;
    --nvr-font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    --nvr-radius: 8px;
    --nvr-radius-sm: 4px;
    --nvr-radius-lg: 12px;
    --nvr-transition: 150ms ease;
}

/* NVR button styles (scoped to multiview) */
.nvr-mv .nvr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px; border: 1px solid var(--nvr-border); border-radius: var(--nvr-radius);
    background: var(--nvr-surface-2); color: var(--nvr-text); font-size: 21px; font-weight: 500;
    cursor: pointer; transition: all var(--nvr-transition); white-space: nowrap; font-family: inherit; line-height: 1;
}
.nvr-mv .nvr-btn:hover { background: var(--nvr-surface-3); border-color: var(--nvr-border-light); }
.nvr-mv .nvr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nvr-mv .nvr-btn-primary { background: var(--nvr-accent); border-color: var(--nvr-accent); color: #fff; }
.nvr-mv .nvr-btn-primary:hover { background: var(--nvr-accent-hover); }
.nvr-mv .nvr-btn-ghost { background: transparent; border-color: transparent; color: var(--nvr-text-muted); }
.nvr-mv .nvr-btn-ghost:hover { color: var(--nvr-text); background: var(--nvr-surface-2); }
.nvr-mv .nvr-btn-sm { padding: 5px 10px; font-size: 20px; }
.nvr-mv .nvr-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: var(--nvr-radius-sm);
    background: transparent; color: var(--nvr-text-muted); cursor: pointer; transition: all var(--nvr-transition);
}
.nvr-mv .nvr-btn-icon:hover { background: var(--nvr-surface-2); color: var(--nvr-text); }

/* Multi-View Layout */
.nvr-mv { display: flex; flex-direction: column; height: calc(100vh - var(--rw-header-height) - 2 * 2rem); gap: 0; }
.nvr-mv-header {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: var(--nvr-surface); border: 1px solid var(--nvr-border);
    border-radius: var(--nvr-radius) var(--nvr-radius) 0 0; flex-wrap: wrap;
}
.nvr-mv-device-picker { display: flex; align-items: center; gap: 4px; }
.nvr-mv-select {
    padding: 4px 8px; background: var(--nvr-surface-2); border: 1px solid var(--nvr-border);
    border-radius: var(--nvr-radius-sm); color: var(--nvr-text); font-size: 21px;
    font-family: inherit; outline: none; min-width: 180px;
}
.nvr-mv-select:focus { border-color: var(--nvr-accent); box-shadow: 0 0 0 3px var(--nvr-primary-light); }
.nvr-mv-layout-btns { display: flex; gap: 2px; }
.nvr-mv-layout-btns .nvr-btn.active { background: var(--nvr-accent); color: #fff; }
.nvr-mv-transport { display: flex; align-items: center; gap: 6px; }
.nvr-mv-time { font-family: var(--nvr-font-mono); font-size: 21px; color: var(--nvr-text-muted); white-space: nowrap; }
.nvr-mv-speed { display: flex; gap: 2px; margin-left: auto; }
.nvr-mv-speed .nvr-btn.active { background: var(--nvr-accent); color: #fff; }
.nvr-mv-sync { display: flex; align-items: center; gap: 6px; }
.nvr-mv-sync-label { font-size: 20px; color: var(--nvr-text-muted, var(--rw-neutral-500)); white-space: nowrap; }
.nvr-mv-sync-select {
    padding: 3px 6px; background: var(--nvr-surface-2, var(--rw-bg-alt, #f5f5f5)); border: 1px solid var(--nvr-border, var(--rw-neutral-300));
    border-radius: 4px; color: var(--nvr-text, inherit); font-size: 20px; font-family: inherit; outline: none; cursor: pointer;
}
.nvr-mv-sync-select:focus { border-color: var(--nvr-accent, var(--rw-primary)); }
.nvr-mv-drift { font-family: var(--nvr-font-mono, monospace); font-size: 20px; color: var(--rw-neutral-500); white-space: nowrap; min-width: 50px; }
.nvr-mv-drift.nvr-mv-drift-warn { color: var(--rw-danger, #ef4444); }
.nvr-mv-drift.nvr-mv-drift-ok { color: var(--rw-success, #22c55e); }

/* Middle: grid + map */
.nvr-mv-middle {
    display: flex; gap: 1px; background: var(--nvr-border); border: 1px solid var(--nvr-border);
    border-top: none; overflow: hidden; flex: 1; min-height: 0;
}
.nvr-mv-grid { flex: 1; min-width: 0; display: grid; gap: 1px; background: var(--nvr-border); }
.nvr-mv-grid[data-layout="1x1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.nvr-mv-grid[data-layout="1x2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.nvr-mv-grid[data-layout="2x1"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.nvr-mv-grid[data-layout="2x2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.nvr-mv-grid[data-layout="3x3"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

/* Video slots */
.nvr-mv-slot {
    background: #000; position: relative; display: flex; flex-direction: column;
    overflow: hidden; border: 2px solid transparent; transition: border-color var(--nvr-transition);
}
.nvr-mv-slot video { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.nvr-mv-slot.nvr-mv-empty {
    background: var(--nvr-surface); display: flex; align-items: center;
    justify-content: center; border-color: var(--nvr-border);
}
.nvr-mv-slot-placeholder { color: var(--nvr-text-dim); font-size: 23px; }
.nvr-mv-slot-header { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 20px; flex-shrink: 0; }
.nvr-mv-slot-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nvr-mv-slot-label { font-weight: 600; color: var(--nvr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvr-mv-slot-info { font-size: 19px; color: var(--nvr-text-dim); margin-left: auto; white-space: nowrap; }
.nvr-mv-slot-audio, .nvr-mv-slot-remove {
    padding: 0 4px; font-size: 21px; cursor: pointer; opacity: 0.6; transition: opacity var(--nvr-transition);
}
.nvr-mv-slot-audio:hover, .nvr-mv-slot-remove:hover { opacity: 1; }
.nvr-mv-slot-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6); color: var(--nvr-text-dim); font-size: 22px; z-index: 5;
}

/* Map panel */
.nvr-mv-map-panel { width: 300px; flex-shrink: 0; background: var(--nvr-surface); }
.nvr-mv-map-inner { width: 100%; height: 100%; }
.nvr-mv-map-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center;
    justify-content: center; color: var(--nvr-text-dim); font-size: 21px;
}

/* Timeline section */
.nvr-mv-timeline-section {
    background: var(--nvr-surface); border: 1px solid var(--nvr-border); border-top: none;
    border-radius: 0 0 var(--nvr-radius) var(--nvr-radius); padding: 6px 12px;
}
.nvr-mv-tl-controls { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.nvr-mv-tl-canvas-wrap { position: relative; min-height: 48px; cursor: pointer; user-select: none; }
.nvr-mv-tl-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.nvr-mv-tl-axis { position: relative; height: 18px; margin-top: 2px; }

/* Timeline shared classes (legend, axis, tooltip) */
.nvr-tl-axis-tick {
    position: absolute; top: 0; font-size: 19px; color: var(--nvr-text-dim);
    transform: translateX(-50%); white-space: nowrap; font-family: var(--nvr-font-mono);
}
.nvr-tl-tooltip {
    position: fixed; background: #252525; border: 1px solid #3c3c3c;
    border-radius: 4px; padding: 4px 8px; font-size: 20px; color: #e0e0e0;
    pointer-events: none; z-index: 200; display: none; white-space: pre-line;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; max-width: 320px;
}
/* Incident Hierarchy Diagram */
.incident-hierarchy { display: flex; flex-direction: column; gap: 24px; }
.hier-incident { background: var(--rw-neutral-50); border: 1px solid var(--rw-neutral-200); border-radius: var(--rw-radius-lg); padding: 16px; }
[data-theme="dark"] .hier-incident { background: var(--rw-neutral-100); border-color: var(--rw-neutral-200); }
.hier-incident-header { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 4px; border-radius: var(--rw-radius-md); }
.hier-incident-header:hover { background: var(--rw-primary-light); }
.hier-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--rw-radius-md); }
.hier-icon-incident { width: 36px; height: 36px; background: #fde68a; color: #92400e; }
[data-theme="dark"] .hier-icon-incident { background: #78350f; color: #fde68a; }
.hier-icon-unit { width: 28px; height: 28px; background: var(--rw-primary-light); color: var(--rw-primary); }
[data-theme="dark"] .hier-icon-unit { background: #1e3a5f; color: #93c5fd; }
.hier-icon-device { width: 24px; height: 24px; background: var(--rw-neutral-200); color: var(--rw-neutral-600); }
[data-theme="dark"] .hier-icon-device { background: var(--rw-neutral-300); color: var(--rw-neutral-500); }
.hier-label { flex: 1; min-width: 0; }
.hier-label strong { font-size: 23px; }
.hier-addr { font-size: 21px; color: var(--rw-neutral-500); font-weight: normal; margin-left: 8px; }
[data-theme="dark"] .hier-addr { color: var(--rw-neutral-400); }
.hier-desc { font-size: 21px; color: var(--rw-neutral-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px; }
.hier-meta { font-size: 20px; color: var(--rw-neutral-400); margin-top: 2px; }
.hier-children { margin-left: 24px; margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--rw-neutral-300); display: flex; flex-direction: column; gap: 10px; }
[data-theme="dark"] .hier-children { border-left-color: var(--rw-neutral-400); }
.hier-unit { padding: 8px; }
.hier-unit-header { display: flex; align-items: flex-start; gap: 10px; }
.hier-devices { margin-left: 20px; margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--rw-neutral-200); display: flex; flex-direction: column; gap: 4px; }
[data-theme="dark"] .hier-devices { border-left-color: var(--rw-neutral-300); }
.hier-device { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 22px; }
.hier-device .badge { font-size: 19px; padding: 1px 6px; }

.nvr-tl-legend { display: flex; align-items: center; gap: 12px; padding: 4px 8px; font-size: 20px; color: var(--nvr-text-muted); flex-wrap: wrap; }
.nvr-tl-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.nvr-tl-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.nvr-tl-legend-circle { border-radius: 50%; width: 8px; height: 8px; }
.nvr-tl-legend-triangle { width: 0; height: 0; background: none !important; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; border-radius: 0; }
.nvr-tl-legend-line { width: 2px; height: 12px; border-radius: 1px; }
.nvr-tl-legend-dash { width: 14px; height: 0; background: none !important; border-top: 2px dashed; border-radius: 0; }

/* ============================================================================
   Futuristic Homepage-Inspired Enhancements
   ============================================================================ */

/* --- Login Overlay: Dramatic dark background with portal image ------------ */
.login-overlay {
    background: #0a0a0e;
}
.login-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/portals/images/btn_user.png') center center / contain no-repeat;
    opacity: 0.3;
    filter: blur(2px) saturate(1.2);
}
.login-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10,10,14,0.3) 0%, rgba(10,10,14,0.92) 70%);
}
.login-card {
    position: relative;
    z-index: 1;
    background: rgba(10, 16, 24, 0.94);
    border: 1px solid rgba(0, 190, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.18), inset 0 0 20px rgba(0, 130, 255, 0.06), 0 0 80px rgba(0, 60, 180, 0.04);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #d8f2ff;
}
/* Scanline overlay on login card */
.login-card > .login-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,190,255,0.015) 2px, rgba(0,190,255,0.015) 4px);
    pointer-events: none;
    border-radius: 14px;
    z-index: 2;
}
.login-logo-title { color: #d8f2ff; }
.login-logo-subtitle { color: #8ab4f8; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: 20px; }
.login-divider { color: #5a7090; }
.login-divider::before, .login-divider::after { border-top-color: rgba(0, 190, 255, 0.12); }
.login-card .form-label { color: #8ea1bd; letter-spacing: 0.5px; }
.login-card .form-input {
    background: rgba(12, 19, 28, 0.95);
    border-color: rgba(0, 190, 255, 0.22);
    color: #e3f2ff;
    border-radius: 8px;
}
.login-card .form-input:focus {
    border-color: rgba(0, 190, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 190, 255, 0.1), 0 0 12px rgba(0, 190, 255, 0.08);
}
.login-card .form-input::placeholder { color: #4a6080; }
/* Passkey button — distinct orange accent (next-gen style) */
.login-card .btn-primary {
    background: rgba(255, 140, 30, 0.14);
    border: 1px solid rgba(255, 140, 30, 0.45);
    color: #ffc080;
}
.login-card .btn-primary:hover:not(:disabled) {
    background: rgba(255, 140, 30, 0.22);
    box-shadow: 0 0 20px rgba(255, 140, 30, 0.15);
}
/* Password sign-in button — cyan accent */
.login-card .btn-secondary {
    background: rgba(0, 160, 255, 0.1);
    border: 1px solid rgba(0, 180, 255, 0.3);
    color: #b0d8ff;
}
.login-card .btn-secondary:hover:not(:disabled) {
    background: rgba(0, 160, 255, 0.18);
    border-color: rgba(0, 180, 255, 0.45);
    box-shadow: 0 0 15px rgba(0, 160, 255, 0.1);
}

/* Corner accent brackets on login card — cyan glow */
.login-card::before, .login-card::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(0, 190, 255, 0.5);
    border-style: solid;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(0, 190, 255, 0.3));
}
.login-card::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
    border-radius: 6px 0 0 0;
}
.login-card::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 6px 0;
}

/* --- Sidebar: Subtle portal image in header (dark mode) ------------------- */
[data-theme="dark"] .sidebar-header {
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .sidebar-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/portals/images/btn_user.png') center center / cover no-repeat;
    opacity: 0.06;
    filter: saturate(0.5);
}
[data-theme="dark"] .sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 180, 248, 0.2), transparent);
}

/* --- Dark mode: Subtle glow accents on cards ------------------------------ */
[data-theme="dark"] .card {
    border-color: rgba(138, 180, 248, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .card:hover {
    border-color: rgba(138, 180, 248, 0.2);
    box-shadow: 0 0 16px rgba(138, 180, 248, 0.06), var(--rw-shadow-md);
}

/* --- Dark mode: Sci-fi stat cards with corner brackets -------------------- */
[data-theme="dark"] .stat-card {
    position: relative;
    background: linear-gradient(135deg, var(--rw-neutral-0) 0%, rgba(138, 180, 248, 0.02) 100%);
    border-color: rgba(138, 180, 248, 0.12);
    box-shadow: var(--rw-shadow-sm), 0 0 12px rgba(138, 180, 248, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .stat-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 16px; height: 16px;
    border-top: 2px solid rgba(138, 180, 248, 0.3);
    border-left: 2px solid rgba(138, 180, 248, 0.3);
    border-radius: 2px 0 0 0;
    pointer-events: none;
}
[data-theme="dark"] .stat-card::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 16px; height: 16px;
    border-bottom: 2px solid rgba(138, 180, 248, 0.3);
    border-right: 2px solid rgba(138, 180, 248, 0.3);
    border-radius: 0 0 2px 0;
    pointer-events: none;
}

/* --- Dark mode: Glowing active nav item ----------------------------------- */
[data-theme="dark"] .nav-item.active {
    box-shadow: inset 3px 0 8px -4px rgba(138, 180, 248, 0.3);
}

/* --- Dark mode: Subtle portal image background ---------------------------- */
[data-theme="dark"] .page-content {
    position: relative;
}
[data-theme="dark"] .page-content::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: url('/portals/images/btn_user.png') center 20% / cover no-repeat;
    opacity: 0.08;
    filter: saturate(0.6) brightness(1.2);
}
[data-theme="dark"] .page-content::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(80, 140, 255, 0.04) 0%, var(--rw-neutral-50) 75%);
}
[data-theme="dark"] .page-content > *:not(.modal-overlay) {
    position: relative;
    z-index: 1;
}

/* Search result highlighting */
mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; }
[data-theme="dark"] mark { background: #854d0e; color: #fef08a; }

/* Bookmark star */
.rec-bookmark:hover { transform: scale(1.2); transition: transform 0.1s; }

/* Keyboard shortcut help */
kbd { display: inline-block; background: var(--rw-neutral-100); border: 1px solid var(--rw-neutral-300); border-radius: 4px; padding: 1px 6px; font-size: 21px; font-family: inherit; line-height: 1.4; }
[data-theme="dark"] kbd { background: var(--rw-neutral-700, #3a3a3e); border-color: var(--rw-neutral-500, #555); }

/* ============================================================================
   Accessibility
   ============================================================================ */

/* Skip-to-content link — visible only on focus */
.skip-to-content {
    position: fixed; top: -100%; left: 16px; z-index: 100000;
    padding: 8px 16px; background: var(--rw-primary); color: #fff;
    border-radius: 0 0 var(--rw-radius-md) var(--rw-radius-md);
    font-size: 23px; font-weight: 600; text-decoration: none;
    transition: top 0.15s;
}
.skip-to-content:focus { top: 0; outline: 2px solid var(--rw-primary); outline-offset: 2px; }

/* Keyboard focus indicators */
:focus-visible {
    outline: 2px solid var(--rw-primary);
    outline-offset: 2px;
}
[data-theme="dark"] :focus-visible { outline-color: rgba(138, 180, 248, 0.6); }
.nav-item:focus-visible { outline: 2px solid var(--rw-primary); outline-offset: -2px; border-radius: var(--rw-radius-md); }

/* Make nav items keyboard-focusable */
.nav-item { cursor: pointer; }

/* --- Case Evidence Preview ------------------------------------------------- */
.case-evidence-preview {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 40px;
    border-radius: var(--rw-radius-sm, 4px);
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1e;
}
.case-evidence-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.case-evidence-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.15s;
}
.case-evidence-preview:hover .case-evidence-play { opacity: 1; }

/* High-contrast mode */
@media (forced-colors: active) {
    .btn, .badge, .card { border: 1px solid ButtonText; }
    .nav-item.active { border-left: 3px solid Highlight; }
    .spinner { border-color: ButtonText; border-top-color: Highlight; }
}

/* --- Severity-tied alert pulse animations -------------------------------- */
@keyframes rwAlertCritical {
    0%, 100% { box-shadow: var(--rw-shadow-sm); }
    50% { box-shadow: var(--rw-shadow-sm), 0 0 18px rgba(217, 48, 37, 0.25); }
}
@keyframes rwAlertWarning {
    0%, 100% { box-shadow: var(--rw-shadow-sm); }
    50% { box-shadow: var(--rw-shadow-sm), 0 0 14px rgba(249, 171, 0, 0.2); }
}
.pulse-active[data-severity="critical"],
.pulse-active.badge-danger { animation: rwAlertCritical 1.5s ease-in-out 3; }
.pulse-active[data-severity="warning"],
.pulse-active.badge-warning { animation: rwAlertWarning 1.5s ease-in-out 3; }

/* --- Critical alert flash (viewport-level red glow) ---------------------- */
@keyframes rwCriticalFlash {
    0% { box-shadow: inset 0 0 60px rgba(217, 48, 37, 0.35); }
    25% { box-shadow: inset 0 0 30px rgba(217, 48, 37, 0.18); }
    50% { box-shadow: inset 0 0 40px rgba(217, 48, 37, 0.12); }
    100% { box-shadow: none; }
}
.rw-critical-flash { animation: rwCriticalFlash 1.5s ease-out; pointer-events: none; position: fixed; inset: 0; z-index: 9998; }

/* --- OLED mode (opt-in via body class) ----------------------------------- */
[data-theme="dark"].rw-oled {
    --rw-neutral-0: #000000;
    --rw-neutral-50: #0a0a0a;
    --rw-neutral-100: #111111;
    --rw-neutral-200: #1a1a1a;
    --rw-glow-sm: 0 0 6px rgba(138, 180, 248, 0.06);
    --rw-glow-md: 0 0 12px rgba(138, 180, 248, 0.1);
    --rw-glow-lg: 0 0 20px rgba(138, 180, 248, 0.18);
}
[data-theme="dark"].rw-oled .rw-scanlines { display: none; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .rw-scanlines { display: none; }
}

/* ============================================================================
   Tactical Ops Theme Enhancements (ported from next-gen)
   ============================================================================ */

/* --- Scanline overlay for dark mode -------------------------------------- */
[data-theme="dark"] .rw-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.04) 2px,
        rgba(0, 0, 0, 0.04) 4px
    );
    opacity: 0.18;
}

/* --- Raster overlay for video panels ------------------------------------- */
.rw-raster {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(138, 180, 248, 0.05) 4px, rgba(138, 180, 248, 0.05) 5px);
    pointer-events: none;
    z-index: 1;
}

/* --- Enhanced dark mode panel glows -------------------------------------- */
[data-theme="dark"] .card {
    box-shadow: var(--rw-shadow-sm), inset 0 0 18px rgba(138, 180, 248, 0.02);
}

/* --- Status-aware tile cards --------------------------------------------- */
.stat-card {
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.stat-card:hover {
    transform: translateY(-1px);
}
[data-theme="dark"] .stat-card:hover {
    border-color: rgba(138, 180, 248, 0.35);
    box-shadow: var(--rw-shadow-sm), 0 0 20px rgba(138, 180, 248, 0.1);
}

/* Status pill badge */
.stat-card-status {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Status-specific colors */
.stat-card[data-status="active"] .stat-card-status,
.stat-card.stat-active .stat-card-status {
    color: var(--rw-success);
    border-color: rgba(30, 142, 62, 0.4);
}
.stat-card[data-status="warning"] .stat-card-status,
.stat-card.stat-warning .stat-card-status {
    color: var(--rw-warning);
    border-color: rgba(249, 171, 0, 0.4);
}
.stat-card[data-status="critical"] .stat-card-status,
.stat-card.stat-critical .stat-card-status {
    color: var(--rw-danger);
    border-color: rgba(217, 48, 37, 0.45);
}
.stat-card[data-status="idle"] .stat-card-status,
.stat-card.stat-idle .stat-card-status {
    color: var(--rw-neutral-500);
    border-color: rgba(128, 128, 128, 0.3);
}

/* Dark mode status glow effects */
[data-theme="dark"] .stat-card[data-status="active"],
[data-theme="dark"] .stat-card.stat-active {
    border-color: rgba(30, 142, 62, 0.2);
    box-shadow: var(--rw-shadow-sm), 0 0 12px rgba(30, 142, 62, 0.06);
}
[data-theme="dark"] .stat-card[data-status="warning"],
[data-theme="dark"] .stat-card.stat-warning {
    border-color: rgba(249, 171, 0, 0.2);
    box-shadow: var(--rw-shadow-sm), 0 0 12px rgba(249, 171, 0, 0.06);
}
[data-theme="dark"] .stat-card[data-status="critical"],
[data-theme="dark"] .stat-card.stat-critical {
    border-color: rgba(217, 48, 37, 0.25);
    box-shadow: var(--rw-shadow-sm), 0 0 12px rgba(217, 48, 37, 0.08);
}

/* Stat card header row with label + status */
.stat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Stat card subtitle */
.stat-card-sub {
    margin-top: 4px;
    font-size: var(--rw-font-size-xs);
    color: var(--rw-neutral-500);
}

/* --- Compact Event Rail -------------------------------------------------- */
.event-rail {
    position: relative;
    border: 1px solid var(--rw-neutral-200);
    border-radius: var(--rw-radius-lg);
    padding: var(--rw-spacing-md) var(--rw-spacing-lg);
    background: var(--rw-neutral-0);
}
.event-rail-title {
    font-size: var(--rw-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--rw-neutral-600);
    margin-bottom: 8px;
}
.event-rail-track {
    position: relative;
    height: 48px;
}
.event-rail-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 22px;
    height: 4px;
    border-radius: 999px;
    background: var(--rw-neutral-200);
}
[data-theme="dark"] .event-rail-line {
    background: linear-gradient(90deg, rgba(138, 180, 248, 0.1), rgba(138, 180, 248, 0.3), rgba(249, 171, 0, 0.25));
}
.event-rail-dot {
    position: absolute;
    top: 14px;
    width: 10px;
    height: 20px;
    border-radius: 5px;
    transform: translateX(-50%);
}
.event-rail-dot.dot-info {
    background: var(--rw-info);
    box-shadow: 0 0 8px rgba(26, 115, 232, 0.4);
}
.event-rail-dot.dot-warning {
    background: var(--rw-warning);
    box-shadow: 0 0 8px rgba(249, 171, 0, 0.4);
}
.event-rail-dot.dot-danger {
    background: var(--rw-danger);
    box-shadow: 0 0 8px rgba(217, 48, 37, 0.4);
}
.event-rail-dot.dot-success {
    background: var(--rw-success);
    box-shadow: 0 0 8px rgba(30, 142, 62, 0.4);
}
.event-rail-meta {
    margin-top: 8px;
    font-size: var(--rw-font-size-xs);
    color: var(--rw-neutral-500);
    display: flex;
    gap: 16px;
}

/* Dark mode event rail */
[data-theme="dark"] .event-rail {
    background: var(--rw-neutral-0);
    border-color: rgba(138, 180, 248, 0.1);
    box-shadow: inset 0 0 18px rgba(138, 180, 248, 0.03);
}

/* --- Monospace tactical data --------------------------------------------- */
.rw-mono {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: 0.3px;
}

/* --- Pulse animation for live indicators --------------------------------- */
@keyframes rwPulse {
    0% { transform: scale(0.95); opacity: 0.85; }
    50% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.85; }
}
.rw-dot-live {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rw-success);
    animation: rwPulse 1.5s ease-in-out infinite;
}
[data-theme="dark"] .rw-dot-live {
    box-shadow: 0 0 10px rgba(30, 142, 62, 0.5);
}

/* ============================================================================
   Command Palette (Cmd/Ctrl+K)
   ============================================================================ */
.cmd-palette-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 20vh; z-index: 6000;
    opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 150ms ease;
}
.cmd-palette-overlay.active { opacity: 1; visibility: visible; }
.cmd-palette {
    background: var(--rw-neutral-0); border: 1px solid var(--rw-neutral-300);
    border-radius: var(--rw-radius-lg); box-shadow: var(--rw-shadow-lg);
    width: 100%; max-width: 520px; overflow: hidden;
}
.cmd-palette-input {
    width: 100%; padding: 14px 18px; font-size: 25px; font-family: inherit;
    border: none; border-bottom: 1px solid var(--rw-neutral-200);
    background: transparent; color: var(--rw-neutral-900); outline: none;
}
.cmd-palette-input::placeholder { color: var(--rw-neutral-500); }
.cmd-palette-results { max-height: 320px; overflow-y: auto; padding: 6px 0; }
.cmd-palette-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; cursor: pointer; font-size: var(--rw-font-size-sm);
    color: var(--rw-neutral-700); transition: background 80ms ease;
}
.cmd-palette-item:hover, .cmd-palette-item.active {
    background: var(--rw-primary-light); color: var(--rw-primary);
}
.cmd-palette-item-icon { width: 16px; text-align: center; opacity: 0.6; }
.cmd-palette-empty { padding: 18px; text-align: center; color: var(--rw-neutral-500); font-size: var(--rw-font-size-sm); }
.cmd-palette-hint { padding: 8px 18px; font-size: 20px; color: var(--rw-neutral-500); border-top: 1px solid var(--rw-neutral-200); display: flex; gap: 12px; }
.cmd-palette-hint kbd { font-size: 19px; padding: 0 4px; }
[data-theme="dark"] .cmd-palette { background: var(--rw-neutral-50); border-color: var(--rw-tactical-dim); box-shadow: var(--rw-shadow-lg), 0 0 20px rgba(138, 180, 248, 0.08); }
[data-theme="dark"] .cmd-palette-input { color: var(--rw-neutral-900); border-bottom-color: var(--rw-neutral-200); }
[data-theme="dark"] .cmd-palette-item:hover,
[data-theme="dark"] .cmd-palette-item.active { background: rgba(138, 180, 248, 0.08); color: var(--rw-primary); }
[data-theme="dark"] .cmd-palette-hint kbd { background: rgba(138, 180, 248, 0.08); border-color: var(--rw-tactical-dim); }

/* ============================================================================
   Sci-Fi Modal Cards — Annotations, Cases, Evidence
   ============================================================================ */
.scifi-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.scifi-modal-overlay.active { opacity: 1; visibility: visible; }

.scifi-modal {
    position: relative;
    width: 560px; max-width: 92vw; max-height: 88vh;
    background: rgba(10, 16, 24, 0.96);
    border: 1px solid rgba(0, 190, 255, 0.28);
    border-radius: 12px;
    box-shadow:
        0 0 40px rgba(0, 140, 255, 0.12),
        inset 0 0 30px rgba(0, 100, 255, 0.04),
        0 24px 48px rgba(0, 0, 0, 0.4);
    color: #d8f2ff;
    transform: scale(0.92) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.scifi-modal-overlay.active .scifi-modal {
    transform: scale(1) translateY(0);
}

/* Scanline overlay */
.scifi-modal::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0, 190, 255, 0.012) 2px, rgba(0, 190, 255, 0.012) 4px
    );
    pointer-events: none; z-index: 3; border-radius: 12px;
}

/* Corner brackets */
.scifi-modal::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 24px; height: 24px;
    border-bottom: 2px solid rgba(0, 190, 255, 0.45);
    border-right: 2px solid rgba(0, 190, 255, 0.45);
    border-radius: 0 0 6px 0;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0, 190, 255, 0.25));
}
.scifi-modal-bracket-tl {
    position: absolute; top: -1px; left: -1px;
    width: 24px; height: 24px;
    border-top: 2px solid rgba(0, 190, 255, 0.45);
    border-left: 2px solid rgba(0, 190, 255, 0.45);
    border-radius: 6px 0 0 0;
    pointer-events: none; z-index: 4;
    filter: drop-shadow(0 0 3px rgba(0, 190, 255, 0.25));
}

/* Header */
.scifi-modal-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(0, 190, 255, 0.12);
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 2;
}
.scifi-modal-title {
    font-size: 24px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #b0d8ff; margin: 0;
}
.scifi-modal-title-accent {
    display: inline-block; width: 3px; height: 14px;
    background: rgba(0, 190, 255, 0.7);
    border-radius: 2px; margin-right: 10px; vertical-align: middle;
    box-shadow: 0 0 6px rgba(0, 190, 255, 0.4);
}
.scifi-modal-close {
    background: none; border: 1px solid rgba(255, 255, 255, 0.1);
    color: #6a8aa8; cursor: pointer; font-size: 27px;
    width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.scifi-modal-close:hover {
    color: #f28b82; border-color: rgba(242, 139, 130, 0.3);
    box-shadow: 0 0 10px rgba(242, 139, 130, 0.15);
}

/* Body */
.scifi-modal-body {
    padding: 20px 24px;
    overflow-y: auto; max-height: 60vh;
    position: relative; z-index: 2;
}

/* Form elements inside scifi modal */
.scifi-field { margin-bottom: 18px; }
.scifi-field:last-child { margin-bottom: 0; }
.scifi-label {
    display: block; font-size: 20px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #6a8aad; margin-bottom: 6px;
}
.scifi-input, .scifi-select, .scifi-textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px; font-size: 23px;
    font-family: inherit;
    background: rgba(12, 19, 28, 0.9);
    border: 1px solid rgba(0, 190, 255, 0.18);
    border-radius: 8px; color: #e3f2ff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.scifi-input:focus, .scifi-select:focus, .scifi-textarea:focus {
    border-color: rgba(0, 190, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 190, 255, 0.08), 0 0 14px rgba(0, 190, 255, 0.06);
}
.scifi-input::placeholder, .scifi-textarea::placeholder {
    color: #3c5670;
}
.scifi-select {
    -webkit-appearance: none;
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8aad' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
.scifi-select option {
    background: #0c131c; color: #e3f2ff;
}
.scifi-textarea {
    resize: vertical; min-height: 80px;
    line-height: 1.5;
}

/* Cascading filter row */
.scifi-filter-row {
    display: flex; gap: 10px; margin-bottom: 14px;
}
.scifi-filter-row > * { flex: 1; }

/* Date-time input group */
.scifi-datetime-row {
    display: flex; gap: 10px;
}
.scifi-datetime-row > * { flex: 1; }
.scifi-input[type="date"], .scifi-input[type="time"] {
    color-scheme: dark;
}

/* Footer */
.scifi-modal-footer {
    padding: 14px 24px 18px;
    border-top: 1px solid rgba(0, 190, 255, 0.10);
    display: flex; justify-content: flex-end; gap: 10px;
    position: relative; z-index: 2;
}
.scifi-btn {
    padding: 9px 22px; font-size: 22px; font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase;
    border-radius: 8px; border: 1px solid transparent;
    cursor: pointer; transition: all 0.2s ease;
    font-family: inherit;
}
.scifi-btn-primary {
    background: rgba(0, 160, 255, 0.15);
    border-color: rgba(0, 180, 255, 0.4);
    color: #a0d4ff;
}
.scifi-btn-primary:hover:not(:disabled) {
    background: rgba(0, 160, 255, 0.25);
    border-color: rgba(0, 180, 255, 0.6);
    box-shadow: 0 0 18px rgba(0, 160, 255, 0.15);
}
.scifi-btn-primary:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.scifi-btn-cancel {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #6a8aa8;
}
.scifi-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #8ea8c4;
}
.scifi-btn-danger {
    background: rgba(242, 80, 70, 0.12);
    border-color: rgba(242, 100, 90, 0.35);
    color: #f28b82;
}
.scifi-btn-danger:hover:not(:disabled) {
    background: rgba(242, 80, 70, 0.22);
    box-shadow: 0 0 14px rgba(242, 80, 70, 0.12);
}

/* Hint text */
.scifi-hint {
    font-size: 20px; color: #4a6580; margin-top: 4px;
}

/* Divider */
.scifi-divider {
    border: none; border-top: 1px solid rgba(0, 190, 255, 0.08);
    margin: 16px 0;
}

/* Status chip row inside modal */
.scifi-chip-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.scifi-chip {
    padding: 5px 14px; font-size: 21px; font-weight: 500;
    border-radius: 20px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #7a96b0; transition: all 0.15s ease;
}
.scifi-chip:hover { border-color: rgba(0, 190, 255, 0.25); color: #a0c4e0; }
.scifi-chip.active {
    border-color: rgba(0, 190, 255, 0.45);
    background: rgba(0, 190, 255, 0.1);
    color: #b0d8ff;
    box-shadow: 0 0 8px rgba(0, 190, 255, 0.1);
}

/* Wide variant for cases */
.scifi-modal.scifi-modal-wide { width: 640px; }

/* ============================================================================
   Canvas Page — Drag & Drop Layout
   ============================================================================ */
.canvas-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 120px);
    min-height: 500px;
}
.canvas-area {
    flex: 1;
    position: relative;
    overflow: auto;
    padding-top: 60px;
    background-color: var(--rw-neutral-100);
    background-image: radial-gradient(circle, var(--rw-neutral-400) 1px, transparent 1px);
    background-size: 20px 20px;
    border-right: 1px solid var(--rw-neutral-300);
}
.canvas-sidebar {
    width: 280px;
    min-width: 280px;
    overflow-y: auto;
    padding: 16px;
    background: var(--rw-neutral-0);
    border-left: 1px solid var(--rw-neutral-200);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.canvas-sidebar-title {
    font-weight: 700;
    font-size: var(--rw-font-size-xs);
    color: var(--rw-neutral-800);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.canvas-sidebar-add {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rw-neutral-400); border-radius: var(--rw-radius-sm);
    background: var(--rw-neutral-0); color: var(--rw-neutral-700);
    font-size: 25px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0;
}
.canvas-sidebar-add:hover { background: var(--rw-primary); color: #fff; border-color: var(--rw-primary); }
.canvas-sidebar-empty {
    padding: 8px;
    font-size: var(--rw-font-size-sm);
    color: var(--rw-neutral-600);
}
.canvas-actions {
    display: flex;
    gap: 8px;
}
/* Sidebar draggable items */
.canvas-item {
    padding: 8px 12px;
    background: var(--rw-neutral-100);
    border: 1px solid var(--rw-neutral-300);
    border-radius: var(--rw-radius-md);
    margin-bottom: 6px;
    cursor: grab;
    font-size: var(--rw-font-size-sm);
    font-weight: 500;
    color: var(--rw-neutral-900);
    transition: background-color 0.15s, box-shadow 0.15s;
    user-select: none;
}
.canvas-item:hover {
    background: var(--rw-neutral-200);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.canvas-item.dragging { opacity: 0.4; }
.canvas-item-incident { border-left: 3px solid #b45309; }
.canvas-item-unit { border-left: 3px solid #1557b0; }
.canvas-item-device { border-left: 3px solid var(--rw-neutral-600); }
.canvas-item-count {
    font-size: var(--rw-font-size-xs);
    color: var(--rw-neutral-600);
    font-weight: 400;
}
/* Incident card on canvas */
.canvas-incident {
    position: absolute;
    width: 380px;
    min-height: 100px;
    background: var(--rw-neutral-0);
    border: 2px solid #b45309;
    border-radius: var(--rw-radius-lg);
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    transition: box-shadow 0.15s;
}
.canvas-incident.drag-over {
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.35);
}
.canvas-incident-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 12px;
    background: #92400e;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-size: var(--rw-font-size-sm);
    cursor: grab;
}
.canvas-incident-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
}
/* Unit sub-card inside incident */
.canvas-unit {
    background: var(--rw-neutral-50);
    border: 1px solid var(--rw-neutral-300);
    border-radius: var(--rw-radius-md);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.canvas-unit.drag-over {
    border-color: #1557b0;
    box-shadow: 0 0 0 2px rgba(21, 87, 176, 0.3);
}
.canvas-unit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #1557b0;
    color: #fff;
    font-size: var(--rw-font-size-xs);
    font-weight: 600;
}
.canvas-unit-devices {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* Device chip inside unit */
.canvas-device-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    background: var(--rw-neutral-100);
    border: 1px solid var(--rw-neutral-300);
    border-radius: var(--rw-radius-sm);
    font-size: var(--rw-font-size-xs);
    color: var(--rw-neutral-800);
}
/* Shared X button */
.canvas-chip-x {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    font-size: 29px;
    line-height: 1;
    padding: 2px 6px;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.canvas-chip-x:hover { color: #fff; background: rgba(255,255,255,0.2); }
.canvas-device-chip.drag-over {
    border-color: #1557b0;
    box-shadow: 0 0 0 2px rgba(21, 87, 176, 0.3);
}
.canvas-device-chip-assoc {
    margin-left: 16px;
    background: var(--rw-neutral-50);
    border-style: dashed;
    font-size: 20px;
}
.canvas-device-chip .canvas-chip-x { color: var(--rw-neutral-500); }
.canvas-device-chip .canvas-chip-x:hover { color: var(--rw-danger); background: rgba(199,70,52,0.1); }
.canvas-incident-header .canvas-chip-x { color: rgba(255,255,255,0.6); }
.canvas-incident-header .canvas-chip-x:hover { color: #fff; }
/* Drop hint text */
.canvas-drop-hint {
    padding: 6px 0;
    text-align: center;
    font-size: var(--rw-font-size-xs);
    color: var(--rw-neutral-500);
    font-style: italic;
}
.canvas-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--rw-neutral-600);
    font-size: var(--rw-font-size-base);
    font-weight: 500;
    pointer-events: none;
}
/* Canvas toolbar */
.canvas-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rw-border, #e5e5e5);
}
.canvas-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.canvas-incident-flip {
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="dark"] .canvas-toolbar {
    background: rgba(26, 26, 30, 0.85);
    border-bottom-color: #444;
}
/* Canvas dark theme */
[data-theme="dark"] .canvas-area {
    background-color: #161618;
    background-image: radial-gradient(circle, #444 1px, transparent 1px);
    border-right-color: #444;
}
[data-theme="dark"] .canvas-sidebar {
    background: #1a1a1e;
    border-left-color: #333;
}
[data-theme="dark"] .canvas-sidebar-title { color: #ccc; }
[data-theme="dark"] .canvas-sidebar-add { background: #2a2a2e; color: #ccc; border-color: #555; }
[data-theme="dark"] .canvas-sidebar-add:hover { background: var(--rw-primary); color: #fff; border-color: var(--rw-primary); }
[data-theme="dark"] .canvas-sidebar-empty { color: #888; }
[data-theme="dark"] .canvas-item {
    background: #2a2a2e;
    border-color: #444;
    color: #e0e0e0;
}
[data-theme="dark"] .canvas-item:hover { background: #3a3a3e; }
[data-theme="dark"] .canvas-item-count { color: #999; }
[data-theme="dark"] .canvas-incident {
    background: #222226;
    border-color: #b45309;
}
[data-theme="dark"] .canvas-incident-header { background: #7c2d12; }
[data-theme="dark"] .canvas-unit {
    background: #2a2a2e;
    border-color: #444;
}
[data-theme="dark"] .canvas-unit-header { background: #1e40af; }
[data-theme="dark"] .canvas-device-chip {
    background: #1a1a1e;
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .canvas-device-chip-assoc {
    background: #222226;
    border-color: #555;
}
[data-theme="dark"] .canvas-drop-hint { color: #666; }
[data-theme="dark"] .canvas-empty { color: #777; }

/* Page Help Button & Modal */
.page-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border-radius: var(--rw-radius-md); font-size: 21px; font-weight: 600; line-height: 1;
    margin-left: 10px; flex-shrink: 0; cursor: pointer;
    background: transparent; color: var(--rw-neutral-600);
    border: 1px solid var(--rw-neutral-300);
    transition: all var(--rw-transition-fast);
}
.page-help-btn:hover {
    background: var(--rw-neutral-100); color: var(--rw-primary); border-color: var(--rw-primary);
}
[data-theme="dark"] .page-help-btn {
    background: transparent; border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5);
}
[data-theme="dark"] .page-help-btn:hover {
    background: rgba(138,180,248,0.12); border-color: rgba(138,180,248,0.4); color: #8ab4f8;
    box-shadow: 0 0 10px rgba(138,180,248,0.15);
}
.page-help-body { font-size: 23px; line-height: 1.75; color: var(--rw-neutral-700); }
[data-theme="dark"] .page-help-body { color: rgba(255,255,255,0.75); }