/**
 * Clear View - Unified Stylesheet
 * Modern, dark-themed dashboard with CSS variables
 */

/* ==================== CSS Variables ==================== */
:root {
    /* Color Palette - Deep Space Theme */
    --color-bg-primary: #101010;
    --color-bg-secondary: #141414;
    --color-bg-tertiary: #1A181C;
    --color-bg-elevated: #22222e;
    
    --color-surface: #101010;
    --color-surface-hover: #252532;
    --color-surface-active: #2a2a3a;
    
    --color-border: #2d2d3a;
    --color-border-light: #3a3a4a;
    
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a0a0b0;
    --color-text-muted: #6a6a7a;
    
    /* Accent Colors */
    --color-primary: #00bdf6;
    --color-primary-rgb: 99, 102, 241;
    --color-primary-light: #001f5f;
    --color-primary-dark: #00bdf6;
    --color-primary-900: rgba(99, 102, 241, 0.1);
    
    --color-accent: #06b6d4;
    --color-accent-light: #22d3ee;
    --color-accent-dark: #0891b2;
    
    /* Status Colors */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-900: rgba(16, 185, 129, 0.1);
    
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-900: rgba(245, 158, 11, 0.1);
    
    --color-danger: #ef4444;
    --color-danger-light: #f87171;
    --color-danger-900: rgba(239, 68, 68, 0.1);
    
    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-900: rgba(59, 130, 246, 0.1);
    
    --color-neutral: #6b7280;
    --color-neutral-light: #9ca3af;
    --color-neutral-900: rgba(107, 114, 128, 0.1);
    
    /* Typography */
    --font-family-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Layout */
    --sidebar-width: 260px;
    --header-height: 64px;
}

/* Light Theme Override */
[data-theme="light"] {
    --color-bg-primary: #f8fafc;
    --color-bg-secondary: #f1f5f9;
    --color-bg-tertiary: #e2e8f0;
    --color-bg-elevated: #ffffff;
    
    --color-surface: #ffffff;
    --color-surface-hover: #f8fafc;
    --color-surface-active: #f1f5f9;
    
    --color-border: #e2e8f0;
    --color-border-light: #cbd5e1;
    
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ==================== Reset & Base ==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

code {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
    background: var(--color-bg-tertiary);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
}

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

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: width var(--transition-base);
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar-header {
    height: var(--header-height);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    opacity: 0;
    pointer-events: none;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.sidebar-header:hover .sidebar-toggle {
    opacity: 1;
    pointer-events: all;
}

.sidebar-toggle:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.sidebar.collapsed .sidebar-toggle {
    opacity: 1;
    pointer-events: all;
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
}

.sidebar.collapsed .toggle-icon .icon-expand {
    display: none;
}

.sidebar.collapsed .toggle-icon .icon-collapse {
    display: block;
}

.sidebar:not(.collapsed) .toggle-icon .icon-collapse {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.icon {
    width: 25px;
    height: 25px;
    filter: invert(1);
}
.icon.invert {
    width: 25px;
    height: 25px;
    filter: none;
}
.logo-icon {
    width: 40px;
    height: 40px;
    /*background: linear-gradient(135deg, var(--color-primary), var(--color-accent));*/
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: white;
    box-shadow: var(--shadow-glow);
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: opacity var(--transition-base), width var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-md);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
    transition: all var(--transition-fast);
    position: relative;
    justify-content: flex-start;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: var(--spacing-md);
}

.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + var(--spacing-md));
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 1000;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-sm);
}

.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
}

.nav-item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.nav-item.active {
    background: var(--color-primary-900);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.nav-icon {
    font-size: var(--font-size-lg);
    width: 30px;
    height: 30px;
    filter: contrast(0.5);
    flex-shrink: 0;
}

.nav-text {
    transition: opacity var(--transition-base), width var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .nav-text {
    opacity: 0;
    width: 0;
    position: absolute;
}

.nav-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-md) 0;
}

.sidebar-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.sidebar.collapsed .sidebar-footer {
    padding: var(--spacing-md);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
}

.sidebar.collapsed .user-profile {
    justify-content: center;
    gap: 0;
}

.sidebar.collapsed .user-profile .user-info {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.user-info {
    transition: opacity var(--transition-base), width var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-footer .btn {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-sm);
}

.avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    color: white;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.user-role {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* v3.3 — view-only badge styling. Amber background tints the label so
   the operator can see at a glance why action buttons might be missing
   on the page they're looking at. Matches the warning palette used
   elsewhere (session tabs, sync toggle, ending-soon alert). */
.user-role.user-role-viewer {
    display: inline-block;
    color: var(--color-warning-light, #fbbf24);
    background: var(--color-warning-900, rgba(245, 158, 11, 0.12));
    border: 1px solid var(--color-warning, #f59e0b);
    border-radius: 9999px;
    padding: 1px 8px;
    font-weight: var(--font-weight-semibold, 600);
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* Main Content
   The sidebar is position:fixed (out of the document flow), so we reserve
   horizontal space for it on .main-content with BOTH margin-left and an
   explicit width. The margin-left pushes the content past the fixed
   sidebar; the width clamp prevents the flex:1 from blowing the content
   out to 100vw (which would overflow on the right). Both values switch in
   lockstep with the sidebar state via the adjacent-sibling selector below
   so there's no gap and no horizontal overflow at either size. */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-base),
                width var(--transition-base),
                max-width var(--transition-base);
    overflow-x: hidden;
}

/* Use the GENERAL sibling combinator (~), not adjacent (+). The
   .mobile-overlay div sits between .sidebar and .main-content in the
   markup, which made the adjacent selector silently no-op — the freed
   200px of horizontal space wasn't being reclaimed. */
.sidebar.collapsed ~ .main-content {
    margin-left: 80px;
    width: calc(100% - 80px);
    max-width: calc(100vw - 80px);
}

.page-header {
    height: var(--header-height);
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.page-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.page-header-right > *:not(:last-child) {
    position: relative;
}

.page-header-right > div:has(.badge):after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--spacing-md) / 2);
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 1px;
    background: var(--color-border);
}

.page-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.page-content {
    flex: 1;
    padding: var(--spacing-xs);
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    min-width: 0; /* Fixes flexbox shrinking lock-out so children can shrink below their intrinsic size */
}

/* Make every direct .page wrapper inside page-content fill the available
   width — this fixes the "not fluid" feel where the dashboard / monitor
   pages used to hug a narrower implicit max-width when the sidebar was
   collapsed or hidden. */
.page-content > .page,
.page-content > section,
.page-content > .panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ==================== Components ==================== */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-border-light);
}

.btn-accent {
    background: var(--color-accent);
    color: white;
}

.btn-accent:hover:not(:disabled) {
    background: var(--color-accent-light);
}

.btn-success {
    background: var(--color-success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: var(--color-success-light);
}

.btn-danger {
    background: var(--color-danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: var(--color-danger-light);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.btn-disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-disabled:hover,
.btn:disabled:hover {
    transform: none;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
}

.btn-block {
    width: 100%;
}

/* Cards */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    align-content: space-between;
}

/* OBS Monitor page only: drop the border on the page's wrapping card. That
   card is the one containing #obs-content-area, so this stays scoped to the
   OBS Monitor without needing a page-level body class. */
.card:has(#obs-content-area) {
    border: none;
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.card-body {
    padding: var(--spacing-lg);
    max-width: 100%;
}

.card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

/* Connection Cards */
.connection-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.connection-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.connection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.connection-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.connection-ip {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 0.25fr));
    gap: var(--spacing-xs);
}

.stat-card {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.stat-value.good { color: var(--color-success); }
.stat-value.warning { color: var(--color-warning); }
.stat-value.critical { color: var(--color-danger); }

.loading-text {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--font-size-sm);
}

/* ==================== Dashboard ==================== */

.dash-stats-bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.dash-stat {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    flex: 1 1 0;
    min-width: 90px;
    text-align: center;
}

.dash-stat-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.dash-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-main {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .dash-main {
        grid-template-columns: 1fr;
    }
}

.dash-chart-card {
    min-height: 320px;
}

.dash-chart-wrap {
    position: relative;
    width: 100%;
}

.dash-chart-wrap canvas {
    display: block;
    width: 100%;
}

.dash-chart-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.dash-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.dash-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dash-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.dash-log-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.dash-log-row:last-child {
    border-bottom: none;
}

.dash-log-time {
    color: var(--color-text-muted);
    flex-shrink: 0;
    min-width: 60px;
}

.dash-log-module {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.dash-log-msg {
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* OBS Machine List Sidebar */
.dash-obs-list-card {
    min-width: 0;
}

.dash-obs-rows {
    display: flex;
    flex-direction: column;
}

.dash-obs-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    transition: background var(--transition-fast);
}

.dash-obs-row:last-child {
    border-bottom: none;
}

.dash-obs-row:hover {
    background: var(--color-surface-hover);
}

.dash-obs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-obs-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.dash-obs-status {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.dash-obs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.dash-obs-page-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    min-width: 40px;
    text-align: center;
}

.dash-obs-legend-footer {
    padding: var(--spacing-xs) var(--spacing-md) !important;
    border-top: 1px solid var(--color-border);
}

.dash-obs-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.dash-obs-key-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    white-space: nowrap;
    letter-spacing: 0.025em;
}

.badge-primary { background: var(--color-primary-900); color: var(--color-primary-light); }
.badge-success { 
    background: var(--color-success-900); 
    color: var(--color-success-light);
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.badge-warning { 
    background: var(--color-warning-900); 
    color: var(--color-warning-light);
    border: 1px solid rgba(251, 191, 36, 0.2);
}
.badge-danger { 
    background: var(--color-danger-900); 
    color: var(--color-danger-light);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.badge-info { 
    background: var(--color-info-900); 
    color: var(--color-info-light);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.badge-neutral { 
    background: var(--color-neutral-900); 
    color: var(--color-neutral-light);
    border: 1px solid var(--color-border);
}
.badge-accent { 
    background: rgba(6, 182, 212, 0.1); 
    color: var(--color-accent-light);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Status Dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    display: inline-block;
}

.status-dot-online { background: var(--color-success); }
.status-dot-offline { background: var(--color-danger); }
.status-dot-warning { background: var(--color-warning); }

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}
.form-group.upcoming {
    background: #242424;
    padding: 1rem;
    border-radius: var(--radius-md);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-900);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}
.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-lg) 0;
}

/* Progress Bars */
.progress-bar {
    width: 100%;
    height: 24px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Data Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.data-table th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-bg-tertiary);
}

.data-table tbody tr:hover {
    background: var(--color-surface-hover);
}

.data-table .active-row {
    background: var(--color-primary-900);
}

/* Go Live row highlighting */
.data-table tbody tr.row-go-live-active {
    background: rgba(34, 197, 94, 0.15);
    border-left: 3px solid var(--color-success);
}

.data-table tbody tr.row-go-live-active:hover {
    background: rgba(34, 197, 94, 0.25);
}

/* Responsive Table Wrapper */
.card-body {
    padding: var(--spacing-lg);
    min-width: 0;
    overflow-x: hidden;
}

.table-responsive {
    display: grid;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
}

/* Matrix top scrollbar (profile migration) */
.matrix-scroll-top {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.matrix-scroll-top::-webkit-scrollbar {
    height: 8px;
}

.matrix-scroll-top::-webkit-scrollbar-track {
    background: var(--color-bg);
}

.matrix-scroll-top::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

.matrix-scroll-top::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.matrix-scroll-body {
    overflow-x: auto;
    height: 600px;
}

/* Reflex DB dual scrollbars */
.reflex-scroll-top {
    margin-bottom: 8px;
}

.reflex-scroll-top .matrix-scroll-spacer {
    height: 1px;
}

/* Size to content so all rows on the current page (default 10) are
   visible without a fixed-height scrollbar appearing. The max-height
   cap kicks in only when the viewport is shorter than the rendered
   table — at which point overflow-y: auto adds a scrollbar.
   Net effect: tall monitor → no vertical scroll at all; short laptop
   / narrow window → table scrolls within its container instead of
   blowing out the whole page layout. */
.reflex-scroll-body {
    overflow-x: auto;
    overflow-y: auto;
    height: auto;
    /* The buffer (260px) accounts for the app header (60), DB card
       header (~70), filters/tabs (~60), pagination footer (~50), and a
       little breathing room. Adjust if those elements ever shift. */
    max-height: calc(100vh - 260px);
}

.data-table {
    min-width: 600px; /* Ensure table doesn't get too small */
    width: 100%;
    /*table-layout: fixed;*/
}

.data-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-tertiary);
    z-index: 10;
}

.data-table td {
    max-width: 300px; /* Prevent cells from getting too wide */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-word;
}

/* Actions cells should never truncate */
.data-table td:last-child:has(.btn) {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Force table to respect container width */
.card-body > .data-table {
    display: table;
}

/* Ensure Actions column doesn't shrink */
.data-table th:last-child,
.data-table td:last-child {
    min-width: 50px;
}

/* Ensure Go Live column stays fixed. Widened in v3.3.2 so the header
   label "Go Live" + the column-options ▾ button fit on one line; body
   cells get the same width so header/body alignment stays clean. */
.data-table .checkbox-cell {
    min-width: 110px;
    max-width: 110px;
    text-align: center;
}

/* Custom checkbox styling for Go Live column */
.data-table .checkbox-cell input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-bg);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.data-table .checkbox-cell input[type="checkbox"]:hover {
    border-color: var(--color-primary);
}

.data-table .checkbox-cell input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.data-table .checkbox-cell input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* NOTE (v3.3.2): the earlier 40px rule below was overriding the 110px
   width set above for the Go Live header, clipping the label. We keep
   text-align + vertical-align here but drop the conflicting width — the
   min/max-width pair above is the single source of truth now. */
.data-table .checkbox-cell {
    text-align: center;
    vertical-align: middle;
}

/* Column Mapping Styles */
#column-mapping-form .form-group {
    margin-bottom: var(--spacing-lg);
}

#column-mapping-form .form-label {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

#column-mapping-form .form-label span[style*="color"] {
    margin-left: var(--spacing-xs);
}

/* Bulk Reorder Styles */
#bulk-reorder-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.reorder-column-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.reorder-column-name {
    flex: 1;
    font-weight: 500;
    color: var(--color-text);
}

.reorder-column-input {
    width: 80px;
    text-align: center;
    font-weight: 600;
}

/* Documentation Styles */
.docs-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.docs-sidebar {
    position: sticky;
    top: var(--spacing-lg);
    height: fit-content;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
}

.docs-sidebar h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

.docs-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-nav li {
    margin-bottom: var(--spacing-xs);
}

.docs-nav a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    font-size: var(--font-size-sm);
}

.docs-nav a:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.docs-content {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border);
    max-width: 100%;
    overflow-x: auto;
}

.doc-section {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--color-border);
}

.doc-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.doc-section h2 {
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.doc-section h3 {
    color: var(--color-text);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.doc-section h4 {
    color: var(--color-text);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.doc-section p {
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.doc-section ul,
.doc-section ol {
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
    color: var(--color-text);
}

.doc-section li {
    margin-bottom: var(--spacing-xs);
}

.doc-section code {
    background: var(--color-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

.doc-section pre {
    background: var(--color-bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-md) 0;
    border: 1px solid var(--color-border);
}

.doc-section pre code {
    background: none;
    padding: 0;
    border: none;
    color: var(--color-text);
}

.doc-section hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-2xl) 0;
}

.doc-section strong {
    color: var(--color-text);
    font-weight: 600;
}

.doc-section em {
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .docs-container {
        grid-template-columns: 1fr;
    }
    
    .docs-sidebar {
        position: static;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .data-table {
        min-width: 500px;
        font-size: 0.9em;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .data-table td {
        max-width: 200px;
    }
}

/* Ensure table scrolls smoothly */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}

/* Match app scrollbar styling for top/bottom scroll helpers */
.matrix-scroll-top::-webkit-scrollbar,
.matrix-scroll-body::-webkit-scrollbar,
.reflex-scroll-top::-webkit-scrollbar,
.reflex-scroll-body::-webkit-scrollbar {
    height: 8px;
}

.matrix-scroll-top::-webkit-scrollbar-track,
.matrix-scroll-body::-webkit-scrollbar-track,
.reflex-scroll-top::-webkit-scrollbar-track,
.reflex-scroll-body::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 4px;
}

.matrix-scroll-top::-webkit-scrollbar-thumb,
.matrix-scroll-body::-webkit-scrollbar-thumb,
.reflex-scroll-top::-webkit-scrollbar-thumb,
.reflex-scroll-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.matrix-scroll-top::-webkit-scrollbar-thumb:hover,
.matrix-scroll-body::-webkit-scrollbar-thumb:hover,
.reflex-scroll-top::-webkit-scrollbar-thumb:hover,
.reflex-scroll-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.matrix-scroll-top,
.matrix-scroll-body,
.reflex-scroll-top,
.reflex-scroll-body {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}

/* Pagination */
.btn-sm[disabled],
.btn-xs[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* Log Entries */
.log-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.log-entry:last-child {
    border-bottom: none;
}

.log-timestamp {
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    min-width: 120px;
}

.log-message {
    flex: 1;
    color: var(--color-text-primary);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-xl);
}

.modal-backdrop.active {
    display: flex;
}

.modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in 0.2s ease;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slide-in 0.3s ease;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-success { border-left: 3px solid var(--color-success); }
.toast-error { border-left: 3px solid var(--color-danger); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-info { border-left: 3px solid var(--color-info); }

/* ==================== Notification Center (bell) ==================== */
.page-header-end {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.notif-center {
    position: relative;
    flex-shrink: 0;
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.notif-bell:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}
.notif-center.open .notif-bell {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

/* Ring animation — added briefly each time a new notification arrives. */
.notif-bell.ringing svg {
    transform-origin: top center;
    animation: bell-ring 0.8s ease;
}
@keyframes bell-ring {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-12deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-8deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-bg-secondary);
}

.notif-panel {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    right: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1500;
    overflow: hidden;
    animation: slide-in 0.18s ease;
}
/* The author `display: flex` above beats the UA `[hidden] { display: none }`
   rule, so without this the panel could never collapse. This restores it. */
.notif-panel[hidden] { display: none; }

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.notif-panel-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.notif-list {
    overflow-y: auto;
    padding: var(--spacing-xs);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}
.notif-list::-webkit-scrollbar { width: 8px; }
.notif-list::-webkit-scrollbar-track { background: var(--color-surface); border-radius: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.notif-list::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-border);
}
.notif-item:hover { background: var(--color-surface-hover); }
.notif-item + .notif-item { margin-top: 2px; }
.notif-item.notif-success { border-left-color: var(--color-success); }
.notif-item.notif-error   { border-left-color: var(--color-danger); }
.notif-item.notif-warning { border-left-color: var(--color-warning); }
.notif-item.notif-info    { border-left-color: var(--color-info); }

.notif-item-icon { font-size: 1.1em; line-height: 1.4; flex-shrink: 0; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-msg {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    word-break: break-word;
}
.notif-item-time {
    color: var(--color-text-tertiary, var(--color-text-secondary));
    font-size: var(--font-size-xs);
    margin-top: 2px;
}
.notif-item-dismiss {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}
.notif-item-dismiss:hover { color: var(--color-text-primary); background: var(--color-surface); }

.notif-empty {
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Repeat-count pill shown when identical alerts are grouped. */
.notif-count {
    display: inline-block;
    margin-left: var(--spacing-xs);
    padding: 0 6px;
    border-radius: 9px;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    vertical-align: middle;
}

/* Auto-open toggle row in the panel header. */
.notif-setting {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    flex-shrink: 0;
}
.notif-setting input { cursor: pointer; margin: 0; }
.notif-setting:hover { color: var(--color-text-primary); }

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-lg);
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.empty-state-description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Alert */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
}

.alert-danger {
    background: var(--color-danger-900);
    color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ==================== Login Page ==================== */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.login-container {
    position: relative;
    z-index: 1;
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 10;
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.logo-large {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.logo-icon-large {
    width: 80px;
    height: 80px;
    /*background: linear-gradient(135deg, var(--color-primary), var(--color-accent));*/
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
    color: white;
    box-shadow: var(--shadow-glow);
}

.login-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
}

.login-header p {
    color: var(--color-text-muted);
}

.login-form {
    margin-bottom: var(--spacing-lg);
}

.login-footer {
    text-align: center;
}

.default-creds {
    display: none;
    background: var(--color-warning-900);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.default-creds strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-warning-light);
}

.default-creds p {
    margin-bottom: var(--spacing-xs);
}

.default-creds small {
    color: var(--color-text-muted);
}

/* Background Animation */
.login-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: var(--color-primary);
    top: -200px;
    right: -100px;
    animation: float 20s ease-in-out infinite;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--color-accent);
    bottom: -100px;
    left: -100px;
    animation: float 15s ease-in-out infinite reverse;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--color-success);
    bottom: 30%;
    right: 20%;
    animation: float 18s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

/* ==================== Utility Classes ==================== */
.flex { display: flex; gap: var(--spacing-md); }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: var(--spacing-sm); }
.gap-4 { gap: var(--spacing-md); }
.gap-6 { gap: var(--spacing-lg); }
.w-full { width: 100%; }

.mt-4 { margin-top: var(--spacing-md); }
.mt-6 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-md); }
.mb-6 { margin-bottom: var(--spacing-lg); }

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ==================== Responsive ==================== */
@media (max-width: 1024px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Mobile Menu Button — hidden on desktop */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    transition: all var(--transition-fast);
}

.mobile-menu-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

/* Mobile Overlay — backdrop behind sidebar when open on mobile */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mobile-overlay.active {
    opacity: 1;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }

    .mobile-overlay {
        display: block;
        pointer-events: none;
    }

    .mobile-overlay.active {
        pointer-events: all;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        width: var(--sidebar-width);
    }

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

    .sidebar.collapsed {
        width: var(--sidebar-width);
    }

    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .user-info,
    .sidebar.collapsed .sidebar-footer .btn {
        opacity: 1;
        width: auto;
        display: flex;
    }

    .sidebar.collapsed .nav-item {
        justify-content: flex-start;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .sidebar.collapsed .nav-item::after {
        display: none;
    }

    .sidebar-toggle {
        display: none !important;
    }

    .main-content {
        /* The sidebar is transform:translateX(-100%) on mobile (it doesn't
           visually occupy space), so the desktop width clamp that subtracts
           sidebar-width would leave main-content artificially narrow. Reset
           to the full viewport so cards, search inputs, and grids get their
           expected space. */
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .page-header {
        padding: 0 var(--spacing-md);
        height: auto;
        min-height: var(--header-height);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }

    .page-header-left {
        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .page-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .page-header-right > div:has(.badge):after {
        display: none;
    }

    .page-content {
        padding: var(--spacing-md);
    }

    .grid-auto {
        grid-template-columns: 1fr;
    }

    /* ─────────────────────────────────────────────────────────────────
       Mobile responsiveness pass — v3.3.2
       Card grids: drop the 280px minmax floor that forces 1 column at
       ~300px viewport widths but eats horizontal margin. Use full-width
       single column with a max-width cap so very wide phones (tablets)
       still get a sensible card width.
       ───────────────────────────────────────────────────────────────── */
    .obs-cards-grid,
    .video-cards-grid,
    .machines-grid,
    .grid-cards {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-sm);
    }

    .obs-card,
    .video-card {
        padding-right: var(--spacing-md);  /* drop the desktop 34px VU-meter reserve */
        min-width: 0;                       /* let flex/grid shrink content as needed */
    }

    .obs-card-actions-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Stat cards (CPU, Disk, etc.) — stack to two-column on mobile so
       labels and values stay legible on narrow screens. */
    .obs-card-stats {
        grid-template-columns: 1fr 1fr;
    }

    /* Forms and inputs — fill width, no fixed widths that overflow viewport. */
    .form-input,
    .form-select,
    .search-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Tables that don't fit get horizontal scroll inside their container
       instead of breaking the page layout. */
    .table-container,
    .machines-table-wrapper,
    .data-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals — full-width on mobile with a sensible viewport cap so the
       Stream Preview, Settings, and DB Link dialogs aren't clipped. */
    .modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh;
        margin: 5vh auto;
    }
    .modal-body {
        max-height: calc(90vh - 120px);
        overflow-y: auto;
    }

    /* Tabs row — let them scroll horizontally instead of wrapping into
       multiple lines that consume vertical space. */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tabs .tab {
        flex-shrink: 0;
    }

    /* The Reflex DB Page Builder's three-pane editor (toolbar / canvas /
       props) is too wide for mobile — let the operator scroll horizontally
       to reach each pane instead of trying to compress everything. */
    .pb-editor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Extra-narrow screens (< 480px) — tighten further. */
@media (max-width: 480px) {
    .page-content {
        padding: var(--spacing-sm);
    }
    .page-title {
        font-size: 1.25rem;
    }
    .btn-xs {
        font-size: 0.7rem;
        padding: 4px 6px;
    }
    .obs-card-name {
        font-size: 1rem;
    }
}

/* ==================== Bulk Actions / File Upload ==================== */
.file-upload-zone {
    border: 2px dashed var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
    cursor: pointer;
    background: var(--color-bg-secondary);
}

.file-upload-zone:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-900);
}

.file-upload-zone.drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-900);
    box-shadow: var(--shadow-glow);
    transform: scale(1.02);
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.file-upload-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.file-upload-zone p {
    color: var(--color-text-secondary);
    margin: 0;
}

.file-upload-zone .text-sm {
    font-size: var(--font-size-xs);
}

/* File Preview */
.file-preview {
    margin-top: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.file-preview.hidden {
    display: none;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
}

.preview-header .badge {
    flex-shrink: 0;
}

.preview-header .text-muted {
    flex: 1;
}

.preview-table {
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

.preview-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.preview-table th,
.preview-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.preview-table th {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    position: sticky;
    top: 0;
}

.preview-table tr:hover td {
    background: var(--color-surface-hover);
}

.preview-table td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Code tag in cards */
.card-body code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-accent);
}

/* Card footer alignment */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

/* ==================== OBS Cards - Compact Uniform Grid ==================== */
.obs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: var(--spacing-md);
}

.obs-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    padding-right: 34px;   /* make room for the 26px dual VU meter strip */
    display: flex;
    flex-direction: column;
   /* max-height: 370px;*/
}

.obs-card-warning {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.obs-card-danger {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.obs-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    /* Sit above the absolute-positioned VU meter strip */
    position: relative;
    z-index: 10;
    background: inherit;   /* inherits card bg — works for normal, warning, danger variants */
}

.obs-card-header-warning {
    border: 1px solid #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    position: relative;
    z-index: 10;
}

.obs-card-header-danger {
    border: 1px solid #ef4444;
    background: rgba(239, 68, 68, 0.18);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    position: relative;
    z-index: 10;
}

.obs-profile-times-group {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.obs-profile-times-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.obs-profile-times-row:last-child {
    margin-bottom: 0;
}

.obs-profile-time-col {
    flex: 1;
    min-width: 0;
}

.obs-profile-time-col .text-muted {
    margin-bottom: 4px;
}

.obs-profile-time-col > div:not(.text-muted) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.obs-card-info {
    flex: 1;
    min-width: 0;
}

.obs-card-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obs-card-ip {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
}

/* Legacy HLS wrapper kept for any existing references */
.obs-inline-video-wrap {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
    width: 100%;
    position: relative;
    height: 0;
    padding-top: 56.25%;
}
.obs-inline-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* ── WebSocket frame preview ── */
.obs-frame-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.obs-frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

.obs-frame-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.obs-frame-controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.obs-frame-wrap:hover .obs-frame-controls {
    opacity: 1;
}

.obs-frame-fullscreen-btn {
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    backdrop-filter: blur(4px);
}
.obs-frame-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Fullscreen state: fill the screen */
.obs-frame-wrap:fullscreen,
.obs-frame-wrap:-webkit-full-screen {
    height: 100vh;
    width: 100vw;
    padding-top: 0;
    border-radius: 0;
}
.obs-frame-wrap:fullscreen .obs-frame-img,
.obs-frame-wrap:-webkit-full-screen .obs-frame-img {
    object-fit: contain;
}

.obs-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    flex: 1;
    overflow: hidden;
    min-width: 0;
    justify-items: stretch;
}

.obs-stat {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    text-align: center;
    overflow: hidden;
    min-width: 0;
}

.obs-stat-span-2 {
    grid-column: span 2;
    max-width: none;
}

.obs-stat-label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.obs-stat-value {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.obs-stat-value.good { color: var(--color-success); }
.obs-stat-value.warning { color: var(--color-warning); }
.obs-stat-value.critical { color: var(--color-danger); }

.obs-stat-text {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.obs-card-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: auto;
    flex-direction: column;
}

.obs-card-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xs);
    width: 100%;
}

.obs-card-actions-grid .btn {
    width: 100%;
    justify-content: center;
}

.obs-action-span-2 {
    grid-column: span 2;
}

.obs-card-offline {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-xs {
    padding: 4px 8px;
    font-size: 11px;
}

.badge-sm {
    padding: 2px 8px;
    font-size: 10px;
}

/* ==================== Tabs ==================== */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-xs);
}

.tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.tab:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
}

.tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/*
 * OBS card "Sync" button.
 * - Off: muted ghost-style pill so it doesn't compete with the primary
 *   action buttons when synced control is unused.
 * - On:  amber/warning fill so it's obvious which machines are wired up
 *   and that any action will cascade to room-mates.
 */
.obs-sync-btn {
    border: 1px dashed var(--color-border, #4b5563);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.01em;
}
.obs-sync-btn.obs-sync-off {
    background: transparent;
    color: var(--color-text-secondary, #9ca3af);
}
.obs-sync-btn.obs-sync-off:hover {
    color: var(--color-warning, #f59e0b);
    border-color: var(--color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.06);
}
.obs-sync-btn.obs-sync-on {
    background: var(--color-warning-900, rgba(245, 158, 11, 0.1));
    color: var(--color-warning-light, #fbbf24);
    border-style: solid;
    border-color: var(--color-warning, #f59e0b);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15) inset;
}
.obs-sync-btn.obs-sync-on::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning, #f59e0b);
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.obs-sync-btn.obs-sync-on:hover {
    background: rgba(245, 158, 11, 0.18);
}

/*
 * Session-view tabs (Current / Upcoming) on the OBS Monitor.
 * Distinct accent color so they stand out from the regular group tabs
 * even when not active. Uses the warning/amber accent so it visually ties
 * to the same "yellow ending soon" alert that drives the bucket logic.
 */
.tab.tab-session {
    color: var(--color-warning, #f59e0b);
    font-weight: var(--font-weight-semibold, 600);
    position: relative;
}
.tab.tab-session::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warning, #f59e0b);
    margin-right: var(--spacing-xs, 4px);
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.tab.tab-session:hover {
    color: var(--color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
}
.tab.tab-session.active {
    color: var(--color-warning, #f59e0b);
    border-bottom-color: var(--color-warning, #f59e0b);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    overflow: hidden;
    max-width: 100%;
}

/* Column Resizing - Removed drag resize, now using manual input */

/* Column Drag & Drop */
.data-table thead th[draggable="true"] {
    cursor: move;
}

.data-table thead th.drag-over {
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-100);
}

/* ==================== Additional Utility Classes ==================== */

/* Card header without bottom padding/border */
.card-header-no-border {
    padding-bottom: 0;
    border-bottom: none;
}

/* Tabs container styles */
.tabs-scrollable {
    margin-bottom: 16px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.tabs-scrollable::-webkit-scrollbar {
    height: 8px;
}

.tabs-scrollable::-webkit-scrollbar-track {
    background: var(--color-bg);
}

.tabs-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

.tabs-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.tabs-scrollable .tab {
    flex-shrink: 0;
}

/* Flexible header with wrapping */
.card-header-flex-wrap {
    flex-wrap: wrap;
    max-width: 100%;
}

/* ROS tab header responsiveness */
#overlay-tab-ros .card-header,
#overlay-tab-ros .card-header-flex-wrap {
    max-width: 100%;
    overflow-x: visible;
}

#overlay-tab-ros .card-header-flex-wrap {
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: var(--spacing-sm);
}

#overlay-tab-ros .card-body {
    max-width: 100%;
    overflow-x: hidden;
}

#overlay-tab-ros {
    overflow-x: hidden;
}

#overlay-tab-ros .card {
    max-width: 100%;
    overflow-x: hidden;
}

#overlay-tab-ros .ros-timeline-header {
    overflow-x: visible;
}

/* Flex item with min width */
.flex-item-minw-200 {
    flex: 1;
    min-width: 200px;
}

/* Action row with margin */
.action-row-margin {
    margin: 8px 8px;
}

/* Small font text */
.text-small {
    font-size: 0.85em;
}

/* Small form inputs */
.form-input-small {
    width: auto;
    padding: 2px 4px;
    font-size: 0.85em;
}

/* Medium width input */
.form-input-medium {
    width: 160px;
    padding: 2px 4px;
    font-size: 0.85em;
}

/* Clear search button hidden by default */
.clear-search-btn {
    display: none;
}

/* Hidden columns button */
.hidden-cols-btn {
    display: none;
}

/* Pagination footer */
.pagination-footer {
    display: none;
}

/* Card with no margin */
.card-no-margin {
    margin: 0;
}

/* List with no margin */
.list-no-margin {
    margin: 0;
}

/* Notification list styling */
.notification-item-live {
    border-left: 4px solid var(--color-success);
    background: rgba(34, 197, 94, 0.08);
}

.notification-item-upcoming {
    border-left: 4px solid var(--color-primary);
    background: rgba(59, 130, 246, 0.08);
    margin-top: 1rem;
}

.tab-close {
    margin-left: 8px;
    font-weight: 700;
    opacity: 0.6;
}

.tab-close:hover {
    opacity: 1;
}

/* OBS link matrix */
.obs-link-matrix-grid {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.obs-link-matrix-table {
    width: max-content;
    min-width: 100%;
}

.obs-link-matrix-table .matrix-row {
    display: flex;
    align-items: stretch;
}

.obs-link-matrix-table .matrix-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.obs-link-matrix-table .matrix-cell {
    min-width: 180px;
    width: 180px;
    padding: 8px;
    border-right: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.obs-link-matrix-table .matrix-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-bg-tertiary);
}

.obs-link-matrix-table .matrix-header-cell {
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.obs-link-matrix-table .matrix-sticky-col {
    position: sticky;
    left: 0;
    z-index: 4;
    justify-content: flex-start;
    background: var(--color-bg-tertiary);
}

.obs-link-matrix-table .matrix-checkbox-cell {
    justify-content: center;
}

/* Pagination container */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Pagination info text */
.pagination-info {
    font-size: 0.85em;
}

/* Pagination controls */
.pagination-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Pagination page text */
.pagination-page {
    font-size: 0.9em;
}

/* Table header cell with relative positioning */
.th-resizable {
    position: relative;
    user-select: none;
}

/* Table header content flex */
.th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Single-line header — long field names truncate with ellipsis instead
       of wrapping to two lines and adding row height. Horizontal scroll
       reveals the rest, and the full name shows up in the tooltip. */
    white-space: nowrap;
    overflow: hidden;
    gap: 4px;
}

/* Sortable header span */
.th-sortable {
    cursor: pointer;
    flex: 1;
    /* Match the th-content single-line rule and clip with ellipsis. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Sort icon */
.sort-icon {
    font-size: 1.2em;
    opacity: 0.6;
}

/* Column menu button */
.column-menu-btn {
    padding: 0 4px;
    font-size: 1.5rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Right-click row context menu — Reflex DB tables
   Floats above the page, anchored at the cursor by JS. Items use the same
   surface / border / text vars as other panels so it inherits the theme.
   ────────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────────
   File Compare (Media Management tab) + Editor (nav item) — v3.3.2
   Reuses the .card / .form-input / .badge primitives so the look matches
   the rest of ClearView. Only adds the bits that are genuinely new
   (chip lists, mapping grids, file-tech rows, plan summary, etc.).
   ────────────────────────────────────────────────────────────────────────── */
/* .fc-layout lives inside #media-grid which is a CSS grid laid out for
   200px-min media thumbnails. Span the full width so the config card +
   results table get real estate instead of being squeezed into one
   thumbnail-sized column. Side-effect: forcing block layout on the host
   #media-grid would be cleaner, but other code keys off the grid layout
   for the other tabs — so we just claim every column via 1/-1. */
.fc-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* When the File Compare tab is active, suppress the media-toolbar
   (search input + grid/list view toggle) and the media-info-bar (the
   "0 B · Upload files to share across the network" footer) — neither
   applies to scan/reconcile results. The breadcrumb is hidden in JS
   already; this CSS handles the rest. */
.media-layout-fc .media-toolbar,
.media-layout-fc .media-info-bar { display: none !important; }
.media-layout-fc #media-grid {
    display: block;       /* drop the thumbnail grid for full-width content */
    padding: 0;
}
.fc-config-grid { display: flex; flex-direction: column; gap: var(--spacing-md); }
.fc-mapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
}
.fc-tolerance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}
.fc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    align-items: center;
}
.fc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 4px 8px;
    font-size: 0.8rem;
    max-width: 100%;
}
.fc-chip > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 320px;
}
.fc-chip-x {
    background: transparent; border: none; color: var(--color-text-secondary);
    cursor: pointer; font-size: 0.85rem; padding: 0 2px;
}
.fc-chip-x:hover { color: #ef4444; }

.fc-table th, .fc-table td { vertical-align: top; }
.fc-file-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; padding: 4px 6px;
    border-bottom: 1px dashed var(--color-border);
    border-radius: 4px;
    transition: background-color 80ms ease;
}
.fc-file-row:last-child { border-bottom: none; }
/* Per-row hover highlight. The previous behavior shaded EVERY file under
   the detail row at once because the global `.data-table tbody tr:hover`
   rule (line 1183) was firing on the parent <tr.fc-session-detail-row>.
   We disable that hover on detail rows below so the individual file row
   can light up on its own. */
.fc-file-row:hover {
    background: var(--color-surface-hover);
}

/* Suppress the global table-row hover for File Compare's detail rows so
   hovering one file inside the expanded block doesn't tint every file
   underneath. The per-file .fc-file-row:hover above takes over. */
.data-table tbody tr.fc-session-detail-row:hover {
    background: transparent;
}
.data-table tbody tr.fc-session-detail-row:hover > td {
    background: var(--color-bg); /* keep the existing detail-cell bg */
}

/* ── ISO sub-folder ──────────────────────────────────────────────────── */
.fc-iso-folder {
    margin-top: 6px;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-secondary, transparent);
}
.fc-iso-folder-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
}
.fc-iso-folder-header:hover { background: var(--color-surface-hover); }
.fc-iso-folder-icon { font-size: 0.95rem; }
.fc-iso-folder-body {
    padding: 4px 8px 6px;
    border-top: 1px dashed var(--color-border);
}

/* ── Rename modal ────────────────────────────────────────────────────── */
.fc-rename-tabs {
    display: flex;
    gap: 6px;
}
.fc-rename-tab.active { font-weight: 600; }

/* ── Row-presence filter (All / Found / Missing) ─────────────────────── */
/* A segmented button group sitting between the result summary and the
   search row. Only ONE state is active at a time. The Found and Missing
   buttons borrow the success/danger accent colours so the operator can
   tell them apart at a glance. */
.fc-found-filter {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-secondary, transparent);
}
.fc-found-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 80ms ease, color 80ms ease;
}
.fc-found-btn + .fc-found-btn {
    border-left: 1px solid var(--color-border);
}
.fc-found-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}
.fc-found-btn.active {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}
.fc-found-btn-found.active {
    background: var(--color-success-900, var(--color-surface-hover));
    color: var(--color-success-light, var(--color-text-primary));
}
.fc-found-btn-missing.active {
    background: var(--color-danger-900, var(--color-surface-hover));
    color: var(--color-danger-light, var(--color-text-primary));
}
.fc-found-btn-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.18);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* ── Kind filter (Show: MAIN / BACKUP / ISO / EDITED) ─────────────────── */
.fc-kind-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary, transparent);
}
.fc-kind-filter-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fc-kind-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
}
.fc-kind-toggle input { cursor: pointer; }
.fc-kind-toggle-only {
    color: var(--color-info, var(--color-primary));
    font-weight: 600;
}
.fc-kind-sep {
    color: var(--color-text-secondary);
    opacity: 0.4;
    user-select: none;
}

/* ── ✂ Edited badge — clickable, opens metadata-aware playback modal ── */
.fc-edited-badge {
    cursor: pointer;
    transition: filter 80ms ease;
}
.fc-edited-badge:hover { filter: brightness(1.15); }

/* ── Per-file rows in Media → Transfer ────────────────────────────────
   Dedicated layout — does NOT reuse .fc-file-row (which has flex-wrap
   and align-items:center that made things look centered when the row
   couldn't fit, and made the progress bar lose its sized parent).
   Single-line flex: icon · filename (left-aligned, ellipsis) ·
   fixed-width progress bar · fixed-width tail. */
.mt-file-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-left: 3px solid transparent;
    border-bottom: 1px dashed var(--color-border);
    border-radius: 4px;
    transition: background-color 100ms ease, border-color 100ms ease;
}
.mt-file-line:last-child { border-bottom: none; }
.mt-file-icon {
    flex: 0 0 1.2em;
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}
.mt-file-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    color: var(--color-text-primary);
}
.mt-file-bar {
    flex: 0 0 180px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.mt-file-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 250ms ease, background-color 120ms ease;
}
/* Indeterminate sweep — shown while a file is copying but Robocopy /MT
   isn't reporting a per-file percentage (its multithreaded mode usually
   doesn't). Reads as "working" instead of a stuck empty bar. */
.mt-file-bar-indeterminate {
    position: relative;
}
.mt-file-bar-indeterminate .mt-file-bar-fill {
    width: 35% !important;
    border-radius: 3px;
    background: var(--color-primary, #3b82f6);
    animation: mt-bar-sweep 1.1s ease-in-out infinite;
}
@keyframes mt-bar-sweep {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}
.mt-file-tail {
    flex: 0 0 110px;
    font-size: 0.8rem;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-file-tail-muted { color: var(--color-text-secondary); }
.mt-file-tail-done  { color: var(--color-success, #22c55e); }
.mt-file-tail-pct   { color: var(--color-primary, #3b82f6); font-weight: 600; }
.mt-file-tail-warn  { color: var(--color-warning, #f59e0b); }
.mt-file-tail-err   { color: var(--color-danger, #ef4444); }

/* Status-driven row tint + left rule + bar fill colour. Each state has
   its own subtle background so completed/failed files are visible at a
   glance without needing to read the tail text. */
.mt-file-status-completed {
    background: rgba(34, 197, 94, 0.10);
    border-left-color: var(--color-success, #22c55e);
}
.mt-file-status-completed .mt-file-bar-fill { background: var(--color-success, #22c55e); }

.mt-file-status-failed {
    background: rgba(239, 68, 68, 0.12);
    border-left-color: var(--color-danger, #ef4444);
}
.mt-file-status-failed .mt-file-bar-fill { background: var(--color-danger, #ef4444); }

.mt-file-status-skipped {
    background: rgba(245, 158, 11, 0.10);
    border-left-color: var(--color-warning, #f59e0b);
}
.mt-file-status-skipped .mt-file-bar-fill { background: var(--color-warning, #f59e0b); }

.mt-file-status-retrying {
    background: rgba(245, 158, 11, 0.10);
    border-left-color: var(--color-warning, #f59e0b);
}
.mt-file-status-retrying .mt-file-bar-fill { background: var(--color-warning, #f59e0b); }

.mt-file-status-transferring {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: var(--color-primary, #3b82f6);
}
.mt-file-status-transferring .mt-file-bar-fill { background: var(--color-primary, #3b82f6); }

.mt-file-status-queued {
    border-left-color: var(--color-border);
}
.mt-file-status-queued .mt-file-bar-fill { background: rgba(255, 255, 255, 0.15); }

/* 'unchanged' = file was already at the destination and skipped this run
   (conflictMode=skip). Deliberately muted — NOT the green of a freshly
   copied file — so a rerun's "completed" reads as just the new files. */
.mt-file-status-unchanged {
    border-left-color: var(--color-border);
    opacity: 0.72;
}
.mt-file-status-unchanged .mt-file-icon { color: var(--color-text-secondary); }
.mt-file-status-unchanged .mt-file-bar-fill { background: rgba(255, 255, 255, 0.18); }

/* Narrow screens: drop the fixed widths so things stack instead of
   crushing the name into 2 characters. */
@media (max-width: 760px) {
    .mt-file-bar  { flex: 1 1 100px; }
    .mt-file-tail { flex: 0 0 90px; }
}

/* "▶✂" Play-edited button shown next to the regular ▶ on source rows that
   have on-disk edits. The little scissors mark sits next to the play
   triangle so the operator can scan past the row and see at a glance
   that BOTH original and edited playback are available. */
.fc-play-edited-btn { position: relative; }
.fc-play-edited-mark {
    font-size: 0.7em;
    margin-left: 2px;
    color: var(--color-info, var(--color-primary));
}

/* ── Source + edit grouping ──────────────────────────────────────────── */
/* Wraps one source file and any of its on-disk edits so they render as a
   single visual unit. The edits sit indented just below the source with
   a left rule, making the parent/child relationship obvious without the
   operator having to expand or click anything. */
.fc-file-group {
    /* No outer border — the underlying .fc-file-row dashed dividers do
       the visual job. We just need an anchor for the indented children. */
}
.fc-file-group + .fc-file-group {
    margin-top: 2px;
}
.fc-edit-children {
    margin-left: 18px;
    padding-left: 10px;
    border-left: 2px solid rgba(59, 130, 246, 0.35);
    /* Tighten the spacing of the nested file rows so the cluster reads
       as one block visually. */
}
.fc-edit-children .fc-file-row {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom-style: dotted;
    opacity: 0.95;
}
/* An edit file rendered without a source in the same list (orphan) gets
   a subtle marker so the operator can tell it's not under a parent.
   Currently no visible decoration — the absence of a source row above
   it is its own signal — but the hook is here if we want one later. */
.fc-file-group-orphan-edit .fc-edit-children {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* ── Edited-playback metadata block ──────────────────────────────────── */
.fc-edited-meta {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 6px;
    column-gap: 12px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.fc-edited-meta-row {
    display: contents;
}
.fc-edited-meta-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}
.fc-edited-meta-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    word-break: break-word;
}
.fc-file-main {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 200px;
    overflow: hidden;
}
.fc-file-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: monospace; font-size: 0.85rem;
}
.fc-file-tech {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* File Compare chip-button variant — used for the "quick-pick from
   external folders" buttons. Same look as a chip but clickable. */
.fc-chip-clickable {
    cursor: pointer;
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}
.fc-chip-clickable:hover {
    background: var(--color-primary, #3b82f6);
    color: white;
    border-color: var(--color-primary, #3b82f6);
}
.fc-summary {
    padding: 0.6rem 0.8rem;
    margin: var(--font-size-xs);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Editor */
.editor-layout { display: flex; flex-direction: column; gap: var(--spacing-md); }
.ed-file-tech {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ed-trim-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

/* Stage: video + VU side by side. Video flex-grows; VU is fixed-width. */
.ed-stage {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* 16:9 wrapper for the editor's main <video>. Locks the frame aspect even
   when no file is loaded so the layout below (waveform/timeline/controls)
   stays in its final position from the very first render. */
.ed-video-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    background: #000;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.ed-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    /* `object-fit: contain` so non-16:9 sources letterbox instead of
       stretching the inner image — the 16:9 frame is the *container*, the
       video respects its own aspect. */
    object-fit: contain;
}
.ed-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Placeholder visual when the source/file isn't loaded yet: dim and disable
   the cards so it's obvious they're awaiting data, without removing them
   from the layout (the operator sees the editor shape immediately). */
.card.ed-disabled {
    opacity: 0.55;
}
.card.ed-disabled .card-body {
    pointer-events: none;
    user-select: none;
}
.ed-vu {
    display: flex;
    gap: 4px;
    width: 32px;
    flex-shrink: 0;
    background: #0a0a0a;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 4px;
}
.ed-vu-track {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.ed-vu-fill {
    width: 100%;
    background: #22c55e;
    transition: height 50ms linear, background 100ms linear;
}

/* Custom timeline with draggable in/out handles. Built from absolutely-
   positioned divs so we get hardware-accelerated movement and clean
   pointer-event handling on each handle. */
.ed-timeline-wrap {
    user-select: none;
}
.ed-timeline {
    position: relative;
    height: 28px;
    cursor: pointer;
}
.ed-tl-base {
    position: absolute; left: 0; right: 0; top: 11px; height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
.ed-tl-range {
    position: absolute; top: 11px; height: 6px;
    background: linear-gradient(90deg, rgba(59,130,246,0.55), rgba(59,130,246,0.85));
    border-radius: 3px;
    pointer-events: none;
}
.ed-tl-playhead {
    position: absolute; top: 4px; width: 2px; height: 20px;
    background: #f59e0b;
    transform: translateX(-1px);
    pointer-events: none;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.7);
}
.ed-tl-handle {
    position: absolute; top: 0;
    width: 14px; height: 28px;
    transform: translateX(-7px);
    cursor: ew-resize;
    border-radius: 3px;
    background: #fb923c;       /* orange — matches "trim points" branding */
    border: 1px solid #c2410c;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
    z-index: 2;
}
.ed-tl-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(0,0,0,0.4);
    transform: translateX(-1px);
}
.ed-tl-handle:hover { filter: brightness(1.1); }
.ed-tl-in::before  { content: 'IN';  position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 0.65rem; font-weight: 700; color: #fb923c; }
.ed-tl-out::before { content: 'OUT'; position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 0.65rem; font-weight: 700; color: #fb923c; }
.ed-tl-labels {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.ed-tl-labels strong { color: var(--color-text-primary); font-family: monospace; }

/* Generic collapse chevron injected by app.js → enhanceCollapsibleCards.
   Sits at the start of any .card-header that opts in via
   data-collapsible-key="<id>". */
.collapse-chevron {
    display: inline-block;
    width: 14px;
    text-align: center;
    color: var(--color-text-secondary);
    margin-right: 6px;
    font-size: 0.85rem;
    flex-shrink: 0;
}
[data-collapsible-key]:hover .collapse-chevron { color: var(--color-text-primary); }

/* Native-details collapsibles used inside Settings (Server / Appearance
   / Logging / Performance / Licensing tabs). Each <h4> sub-section gets
   wrapped at runtime; this CSS just makes the disclosure chevron feel
   native to the rest of the app. */
.settings-section { margin-bottom: var(--spacing-md); }
.settings-section > .settings-section-summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.settings-section > .settings-section-summary::-webkit-details-marker { display: none; }
.settings-section > .settings-section-summary::before {
    content: '▸';
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    transition: transform 120ms ease;
    width: 12px;
    flex-shrink: 0;
}
.settings-section[open] > .settings-section-summary::before { content: '▾'; }
.settings-section > .settings-section-summary:hover::before { color: var(--color-text-primary); }
.settings-section > .settings-section-summary h4 { margin: 0; }

/* Active-render badge — pulses gently so the operator can see at a
   glance that something is in flight without it being distracting. */
.fc-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}
.fc-pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: fc-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes fc-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* File Compare config-card header — title (with collapse chevron) on
   the left, action buttons on the right. */
.fc-config-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.fc-config-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.fc-config-title:hover .fc-chevron { color: var(--color-text-primary); }

/* File rows that ARE edit files (separate-row rendering) get a blue
   accent so the operator can spot them inside the expanded block. */
.fc-file-row-edit-file {
    background: rgba(59, 130, 246, 0.10);
    border-left: 3px solid rgba(59, 130, 246, 0.8);
    border-radius: 4px;
    padding-left: 6px;
}

/* File Compare accordion — sessions render as TWO rows in the table:
   one summary <tr.fc-session-row> + one detail <tr.fc-session-detail-row>
   that appears below it when expanded. The detail cell uses colspan=6
   so the file list spans the whole table width. Clicking anywhere on
   the summary row toggles the detail row. */
.fc-accordion-table tbody { /* shared border collapse — handled by .data-table */ }
.fc-session-row-clickable { cursor: pointer; transition: background-color 80ms ease; }
.fc-session-row-clickable:hover { background: var(--color-surface-hover); }
.fc-session-row-open { background: var(--color-surface-hover); }
.fc-session-row-open > td { border-bottom-color: transparent; }
.fc-chevron-cell { text-align: center; width: 32px; }
.fc-chevron {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1;
}
.fc-chevron-empty { opacity: 0.25; }

/* Room header row — top-level group divider in the hierarchical results. */
.fc-room-header {
    cursor: pointer;
    background: var(--color-bg-secondary, var(--color-surface-hover));
    border-top: 2px solid var(--color-border);
}
.fc-room-header > td {
    padding: 10px 12px !important;
    font-size: 0.95rem;
}
.fc-room-header:hover { background: var(--color-surface-hover); }
.fc-room-header strong { margin-right: 8px; }
.fc-room-header .text-muted { margin-right: 8px; }
.fc-room-header .badge { margin-left: 4px; }

/* Nested rows under a room get a small left indent so the grouping is
   visually obvious. The chevron cell already gives a column of breathing
   room — this just adds a tint band on the leftmost rendered cell. */
.fc-room-child > td:nth-child(2) {
    box-shadow: inset 3px 0 0 var(--color-primary, #3b82f6);
}
.fc-file-count {
    font-weight: 600;
    font-size: 0.85rem;
}
.fc-files-summary-cell {
    display: flex !important;     /* override the default <td> block */
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fc-session-detail-row > td {
    background: var(--color-bg);
    padding: 12px 16px !important;
    border-top: 1px dashed var(--color-border);
}
.fc-row-files-expanded {
    border-left: 2px solid rgba(59, 130, 246, 0.4);
    padding-left: 10px;
}

/* Edited-file row highlight (File Compare) — gentle blue tint so the
   operator can spot "already-processed" sessions without it shouting. */
.fc-file-row-edited { background: rgba(59, 130, 246, 0.06); border-radius: 4px; padding-left: 4px; }
.fc-row-edited > td:first-child { border-left: 3px solid rgba(59, 130, 246, 0.6); }

/* Editor: trim controls layout — paired Set/Jump button + numeric
   input column for IN and OUT, plus a misc column for Preview / Reset.
   Grid keeps them aligned on desktop and stacks them on narrow screens. */
.ed-trim-controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--spacing-md);
    align-items: start;
}
.ed-trim-side { min-width: 0; }
.ed-trim-num { width: 110px; }
.ed-trim-misc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.form-label-inline {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0;
    flex-shrink: 0;
    min-width: 38px;
}
@media (max-width: 768px) {
    .ed-trim-controls {
        grid-template-columns: 1fr;
    }
    .ed-trim-misc { align-items: flex-start; }
}

/* Editor card headers — chevron + clickable to collapse. */
.ed-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.ed-chevron {
    font-size: 0.85rem;
    width: 1rem;
    display: inline-block;
    text-align: center;
    color: var(--color-text-secondary);
}

/* Synced waveform under the player.
   Canvas + playhead + trim mask layered absolutely. */
.ed-waveform-wrap {
    position: relative;
    height: 80px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.ed-waveform { display: block; width: 100%; height: 80px; }
.ed-wf-playhead {
    position: absolute; top: 0; bottom: 0;
    width: 2px; background: #f59e0b;
    transform: translateX(-1px);
    pointer-events: none;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.7);
}
.ed-wf-trim-mask {
    position: absolute; top: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.ed-wf-trim-left  { left: 0; width: 0; }
.ed-wf-trim-right { right: 0; width: 0; }
.ed-wf-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-secondary); font-size: 0.85rem;
    pointer-events: none;
}

/* Range slider — match input width and use ClearView primary color. */
input[type="range"]#ed-gain-slider { accent-color: var(--color-primary, #3b82f6); }

/* Auto-edit details block — disclosure-style so it doesn't dominate. */
.ed-auto {
    margin-top: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: var(--color-bg);
}
.ed-auto > summary {
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}
.ed-plan {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}
.ed-readonly {
    background: var(--color-bg); color: var(--color-text-primary);
    cursor: default;
}
.ed-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
}
.ed-output-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
    /* Extra breathing room between the output settings grid and the
       render-button row that sits beneath it. */
    margin-bottom: var(--spacing-lg);
}
/* Bottom padding on the entire Render Output card body so the render
   button + overwrite checkbox don't crowd the card's lower edge. */
[data-card-body="output"] {
    padding-bottom: var(--spacing-lg);
}
.ed-overwrite-cell { grid-column: 1 / -1; }
.ed-overwrite-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}
.ed-job-progress .progress-bar {
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); height: 8px; overflow: hidden;
}
.ed-job-progress .progress-fill {
    height: 100%;
    background: var(--color-primary, #3b82f6);
    transition: width var(--transition-base);
}

@media (max-width: 768px) {
    .fc-mapping-grid, .ed-trim-row, .ed-auto-grid, .ed-output-grid, .fc-tolerance-grid {
        grid-template-columns: 1fr;
    }
}

.overlay-row-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 4px;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    user-select: none;
}
.overlay-row-context-item {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background var(--transition-fast);
}
.overlay-row-context-item:hover {
    background: var(--color-surface-hover);
}
.overlay-row-context-item.danger {
    color: #ef4444;
}
.overlay-row-context-item.danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Checkbox cell fixed width. Widened in v3.3.2 so the "Go Live" header
   text fits on a single line alongside the column-options ▾ button —
   80px was clipping the label after the single-line header rule landed. */
.checkbox-cell-fixed {
    width: 110px;
    min-width: 110px;
}

/* Actions cell - admin */
.actions-cell-admin {
    width: 140px;
}

/* Actions cell - regular */
.actions-cell-regular {
    width: 50px;
}

/* Table cell with ellipsis */
.td-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column width input */
.column-width-input {
    width: 120px;
}

/* Column value list */
.column-value-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    padding: 6px;
    border-radius: 4px;
}

/* View item modal content */
.view-item-content {
    max-height: 500px;
    overflow-y: auto;
}

/* View item table */
.view-item-table {
    width: 100%;
}

/* View item table cells */
.view-item-th-field {
    width: 40%;
}

.view-item-th-value {
    width: 60%;
}

/* Hidden row background */
.hidden-row-bg {
    background: rgba(255, 193, 7, 0.1);
}

/* Hidden badge with margin */
.badge-with-margin {
    margin-left: 8px;
}

/* Word wrap cell */
.td-word-wrap {
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

/* View item footer text */
.view-item-footer {
    margin-top: 12px;
    font-size: 0.85em;
}

/* Warning color text */
.text-warning-color {
    color: var(--color-warning);
}

/* Icon legend */
.icon-legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-muted);
}

.legend-item img {
    width: 16px;
    height: 16px;
    filter: invert(0.7);
}

/* Flex with wrap */
.flex-wrap-enabled {
    flex-wrap: wrap;
}

/* Font weight semibold */
.font-semibold {
    font-weight: 600;
}

/* Update DB fields hidden */
.update-db-fields-hidden {
    display: none;
}

/* Key field group hidden */
.key-field-group-hidden {
    display: none;
}

/* Scrollable log content */
.log-content-scrollable {
    max-height: 400px;
    overflow-y: auto;
}

/* Log entry with flex */
.log-entry-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Timestamp text */
.timestamp-text {
    font-size: 11px;
}

/* Grid column widths */
.grid-col-1-3 {
    grid-column: 1 / 3;
}

.grid-col-2-3 {
    grid-column: 2 / 3;
}

/* Width utilities */
.w-50 {
    width: 50%;
}

.w-48 {
    width: 48%;
}

.w-auto {
    width: auto;
}

/* Max width utilities */
.max-w-180 {
    max-width: 180px;
}

/* Margin utilities */
.mr-1 {
    margin-right: 0.25rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

/* Padding utilities */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

/* Min width utilities */
.min-w-100 {
    min-width: 100px;
}

.min-w-120 {
    min-width: 120px;
}

.min-w-150 {
    min-width: 150px;
}

.min-w-200 {
    min-width: 200px;
}

/* Warning box */
.warning-box {
    background: var(--color-warning-900);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

/* Info box */
.info-box {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

/* Transfer progress */
.transfer-progress-hidden {
    display: none;
    margin-top: var(--spacing-md);
}

/* Progress fill width */
.progress-fill-zero {
    width: 0%;
}

/* Transfer file list */
.transfer-file-list {
    margin-top: var(--spacing-sm);
    max-height: 200px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
}

/* Transfer list item */
.transfer-list-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
}

/* Watch Agent cards */
/* ── Watch Agents Modal ── */

.wa-modal-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.wa-modal-search {
    flex: 1;
    min-width: 160px;
}

.wa-modal-stats {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-shrink: 0;
}

.wa-stat-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    white-space: nowrap;
}

.wa-stat-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wa-stat-pill-dot.online  { background: var(--color-success); }
.wa-stat-pill-dot.offline { background: var(--color-text-muted); }

/* Grid */
.wa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

/* Card */
.wa-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s;
}

.wa-card.online  { border-left-color: var(--color-success); }
.wa-card.offline { border-left-color: var(--color-text-muted); }

/* Card header */
.wa-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.wa-card-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-card-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Key-value rows */
.wa-card-body {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.wa-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
    min-width: 0;
}

.wa-row:last-child {
    border-bottom: none;
}

.wa-label {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    min-width: 76px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wa-val {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    word-break: break-all;
    min-width: 0;
    flex: 1;
}

.wa-val.mono {
    font-family: var(--font-family-mono);
    font-size: 11px;
}

/* Transfer progress section */
.wa-progress-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wa-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.wa-progress-status { color: var(--color-text-primary); font-weight: 500; }
.wa-progress-pct    { color: var(--color-text-muted); }

.wa-progress-track {
    height: 5px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.wa-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    transition: width 0.4s ease;
}

.wa-progress-file {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-progress-error {
    font-size: 11px;
    color: var(--color-danger);
}

/* Actions */
.wa-card-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    background: var(--color-bg-tertiary);
}

.wa-card-actions-spacer {
    flex: 1;
}

/* Empty state */
.wa-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Legacy class aliases — kept so old code that may reference them doesn't break */
.watch-agent-grid  { display: none; }
.watch-agent-card  { display: none; }

/* Raw output pre */
.raw-output-pre {
    background: var(--color-neutral-900);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 12px;
}

/* OBS specific */
.obs-indicator-flex {
    display: flex;
    gap: 6px;
    align-items: center;
}

.obs-actions-flex {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.obs-collapse-btn {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 10;
}

/* Vertical dual-channel VU meter — right edge of card */
.obs-vu-top {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Widened to fit OBS-style dB tick labels on the left edge of the strip.
       Originally 26px; +18px for the tick column. */
    width: 44px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 3px 4px 3px;
    gap: 2px;
}
/* The "Input VU Meter" card-pref toggle adds .hidden to the VU strip.
   Without an explicit CSS rule, the class did nothing and the bars
   stayed visible. Override with !important to win against the inline
   `display:flex` on `.obs-vu-top`. Also nudge the card-padding back so
   text isn't cramped against the right edge when the bars are gone. */
.obs-vu-top.hidden { display: none !important; }
.obs-card:has(.obs-vu-top.hidden) { padding-right: var(--spacing-md); }

/* ===== Collapsed card: VU strip matches the preview-frame height =====
   When collapsed WITH the inline preview on, the frame + VU sit in a flex row
   so the VU is only as tall as the 16:9 frame (instead of spanning the whole
   card). Name/IP and the actions row are unchanged. */
.obs-collapsed-vufit {
    /* The VU is now in-flow inside the row, so drop the card's right reserve. */
    padding-right: var(--spacing-md);
}
.obs-collapsed-row {
    display: flex;
    align-items: stretch;   /* VU stretches to the frame's height */
    gap: 4px;
    margin-top: var(--spacing-xs);
}
.obs-collapsed-row .obs-frame-wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;              /* row gap handles spacing */
}
.obs-collapsed-vufit .obs-vu-top {
    position: static;       /* in-flow column beside the frame */
    top: auto; right: auto; bottom: auto;
    flex: 0 0 44px;
    align-self: stretch;    /* = frame height */
}

/* Row holding the dB-tick scale + both L + R bars side by side. Positioned
   relative so each .obs-vu-tick can anchor by `bottom: X%` against the bar
   travel range. */
.obs-vu-bars {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
    width: 100%;
    position: relative;
}

/* Vertical column of dB tick labels (OBS-style scale). Sits to the LEFT of
   the L/R bars. Each label is absolute-positioned by `bottom: X%` so it
   tracks the same -60..0 dB → 0..100% mapping the bars use. */
.obs-vu-ticks {
    position: relative;
    width: 16px;
    height: 98%;
    flex: 0 0 16px;
    margin-right: 1px;
}
.obs-vu-tick {
    position: absolute;
    right: 0;
    font-size: 7px;
    line-height: 1;
    color: var(--color-text-primary);
    opacity: 0.7;
    /* Center the label vertically on its dB position, but clamp at the
       extremes so the "0" and "-60" labels aren't half-cut at the edges. */
    transform: translateY(50%);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.3px;
}
.obs-vu-tick[style*="bottom:100%"] { transform: translateY(0); }
.obs-vu-tick[style*="bottom:0%"]   { transform: translateY(100%); }

/* File Compare ↔ Active-transfer panel rows. Lives above the results
   table and shows per-machine progress while transfers are in flight. */
.fc-xfer-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}
.fc-xfer-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.fc-xfer-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #3b82f6);
  border-radius: 3px;
  transition: width 200ms linear;
}

/* OBS Monitor health-alert badge — gentle pulse so it pulls the eye
   without strobing. Clickable; opens the alert config modal. */
.obs-health-badge {
  cursor: pointer;
  animation: obs-health-pulse 1.6s ease-in-out infinite;
}
@keyframes obs-health-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
}

.obs-vu-track {
    width: 8px;
    flex: 1;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.obs-vu-fill {
    width: 100%;
    height: 0%;
    transition: height 180ms linear;
    background: linear-gradient(0deg, #22c55e 0%, #f59e0b 70%, #ef4444 100%);
    border-radius: 3px 3px 0 0;
}

/* Horizontal dB label — landscape, no rotation */
.obs-vu-db {
    font-size: 8px;
    color: var(--color-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    letter-spacing: -0.3px;
    /* Breathing room so the value doesn't overlap the bars / bottom tick. */
    padding: 4px 2px 2px;
    margin-top: 2px;
}

.obs-card {
    position: relative;
}

.obs-card.collapsed {
    position: relative;
}

/* Body section below the header — VU is positioned relative to this */
.obs-card-body {
    position: relative;
    /* Extend right to the card's inner-right border so the VU strip
       stays at the card edge, not the content edge */
    margin-right: -34px;
    padding-right: 45px;
    flex: 1;
}

/* Scene/Profile list */
.scene-profile-list {
    max-height: 400px;
    overflow-y: auto;
}

/* OBS Monitor top-nav legend key (reuses .dash-obs-key dot styling). */
.obs-legend-key {
    margin-left: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    border-left: 1px solid var(--color-border);
}

/* ==================== Studio (preview / program monitor) ==================== */
.obs-studio { display: flex; flex-direction: column; gap: var(--spacing-md); }
.obs-studio-stage {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-md);
}
.obs-studio-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.obs-studio-pane-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}
.obs-studio-pane-label.live { color: var(--color-danger); }
.obs-studio-pane-label.preview { color: var(--color-success); }
.obs-studio-img-wrap {
    aspect-ratio: 16 / 9;
    background: #000;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.obs-studio-pane:has(.preview) .obs-studio-img-wrap { border-color: var(--color-success); }
.obs-studio-pane:has(.live) .obs-studio-img-wrap { border-color: var(--color-danger); }
.obs-studio-img { width: 100%; height: 100%; object-fit: contain; display: none; }
.obs-studio-scene-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.obs-studio-take {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 var(--spacing-sm);
}
.obs-studio-scenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    max-height: 320px;
    overflow-y: auto;
    padding-top: 2px;
}
.obs-studio-scene-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-base);
}
.obs-studio-scene-btn:hover { border-color: var(--color-text-secondary); }
.obs-studio-scene-btn.preview-active { border-color: var(--color-success); }
.obs-studio-scene-btn.live-active { box-shadow: inset 0 0 0 2px var(--color-danger); }
.obs-studio-scene-thumb-wrap {
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.obs-studio-scene-thumb { width: 100%; height: 100%; object-fit: contain; }
.obs-studio-scene-cap {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scene-profile-item {
    cursor: pointer;
}

.scene-profile-item-active {
    background: var(--color-primary-900);
}

.scene-profile-item-name {
    flex: 1;
}

/* Info text box */
.info-text-box {
    background: var(--color-info-900);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

/* Logs specific */
.filters-flex {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-item {
    min-width: 150px;
    margin: 0;
}

.filter-item-search {
    flex: 1;
    min-width: 200px;
    margin: 0;
}

.filter-item-button {
    margin: 0;
    align-self: flex-end;
}

/*
 * Logs page action toolbar — keeps Clear Filters / Export / Upload to
 * Licensing / Clear Logs the same height + spacing regardless of the
 * inline icons that some of them once had. The Clear Logs separator
 * pushes the destructive action to the right edge so it's harder to
 * mis-click while doing routine exports.
 */
.log-actions-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    flex-wrap: wrap;
}
.log-actions-toolbar .log-action-btn {
    height: 32px;
    min-width: 116px;
    padding: 0 var(--spacing-md, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}
.log-actions-toolbar .log-action-separator {
    flex: 1 0 auto;
    min-width: var(--spacing-md, 12px);
}

.transfer-entry {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.transfer-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.transfer-body {
    width: 100%;
}

.transfer-progress-bar {
    height: 20px;
    margin-bottom: var(--spacing-xs);
}

.transfer-stats {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
}

.transfer-details {
    width: 100%;
    font-size: var(--font-size-sm);
}

.transfer-throughput {
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.transfer-error {
    margin-top: var(--spacing-xs);
}

.log-detail-value {
    background: var(--color-neutral-900);
}

.warning-icon-large {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

/* Video Cards Grid */
.video-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.video-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.video-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.video-card-info {
    flex: 1;
}

.video-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.video-card-ip {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.video-player-container {
    position: relative;
    width: 100%;
    flex: 1;
    min-width: 0;
    background: #000;
    overflow: hidden;
}

.video-player-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

/* Toggle Switch */
.toggle-with-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toggle-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 60px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch input:disabled {
  cursor: not-allowed;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-text-muted);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.toggle-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  z-index: 1;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Video Controls Group */
.video-controls-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.video-url-btn {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
}

/* Video Content Container */
.video-content-container {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

/* VU Meter */
.vu-meter-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* gap: 0.5rem; */
  /* padding: 0.2rem 0.5rem; */
  background: var(--bg-secondary);
  /* min-width: 120px; */
  flex-shrink: 0;
}

.vu-meter-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vu-meter-canvas {
  width: 40px;
  height: 200px;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  background: #1a1a1a;
  margin: 0 4px;
}

.vu-meter-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.vu-meter-status {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Video Preview Modal */
.video-preview-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.video-preview-info {
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--text-color);
}

.video-preview-player {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
}

.video-preview-player .video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-preview-player .video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1rem;
  text-align: center;
}

.video-preview-footer {
  width: 100%;
  max-width: 800px;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* Stage: player on the left, VU strip on the right */
.video-preview-stage {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
  max-width: 854px;  /* 800px player + 44px VU + 10px gap */
  margin: 0 auto;
}
.video-preview-stage .video-preview-player {
  flex: 1;
  margin: 0; /* override default auto-center inside the flex row */
}
.video-preview-stage .preview-vu-strip {
  position: relative; /* override .obs-vu-top absolute positioning */
  /* Match the card meter's 44px so the dB tick column + L/R bars fit without
     cramping. Was 26px (the pre-tick-column width), which squeezed the ticks
     and bars together and made the overflow meter read inaccurately. */
  width: 44px;
  min-width: 44px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  padding: 6px 3px 6px 3px;
}

.video-preview-footer .form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.video-preview-footer .form-input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.video-preview-footer .form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.video-preview-footer code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* HLS URL Modal */
.hls-url-container {
  padding: 0.5rem 0;
}

.hls-url-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem;
}

.hls-url-box input {
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  cursor: pointer;
}

.hls-url-box input:focus {
  outline: none;
  box-shadow: none;
}

/* ==================== ROS Timeline ==================== */
.ros-timeline-container {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

.ros-timeline-header {
  padding: var(--spacing-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.ros-timeline-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  flex-wrap: wrap;
}

.ros-day-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.ros-day-btn {
  min-width: auto;
  white-space: nowrap;
}

.ros-search-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  position: relative;
}

.ros-search-input {
  width: 250px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.ros-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ros-search-results {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ros-realtime-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.ros-clock-time {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  font-family: 'Courier New', monospace;
}

.ros-clock-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.ros-date-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 300px;
}

.ros-current-date {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}

.ros-date-range {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- New layout: fixed header bar + scrollable body grid ---- */
.ros-timeline-grid-wrap {
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Header bar: corner + room names — never participates in scroll */
.ros-timeline-header-bar {
  display: flex;
  overflow: hidden;              /* hides rooms strip overflow */
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  flex-shrink: 0;
}

.ros-timeline-rooms-strip {
  flex: 1;
  overflow: hidden;              /* horizontal position synced via JS */
  min-width: 0;
}

/* Scrollable body */
.ros-timeline-grid {
  display: flex;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 68vh;
  width: 100%;
}

.ros-timeline-grid::-webkit-scrollbar {
  height: 8px;
  width: 6px;
}

.ros-timeline-grid::-webkit-scrollbar-track {
  background: var(--color-bg);
}

.ros-timeline-grid::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

.ros-timeline-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Corner: fixed part of header bar, always visible */
.ros-timeline-corner {
  width: 140px;
  flex-shrink: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-right: 2px solid var(--color-border);
  background: var(--color-surface);
}

/* Sidebar: time labels, sticky left inside scrollable grid */
.ros-timeline-sidebar {
  flex-shrink: 0;
  width: 140px;
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
  position: sticky;
  left: 0;
  z-index: 5;
}

.ros-timeline-times {
  display: flex;
  flex-direction: column;
}

.ros-timeline-time {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  font-size: 0.85rem;
  background: var(--color-bg);
}

.ros-timeline-resource {
  min-height: 120px;
  height: auto;
  display: flex;
  align-items: center;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  font-size: 0.9rem;
}

.ros-timeline-main {
  flex: 1;
  overflow: visible;
  min-width: 0;
}

/* Room headers row (inside the strip, not sticky — strip handles it) */
.ros-timeline-rooms {
  height: 50px;
  display: flex;
  width: fit-content;
  min-width: 100%;
}

.ros-timeline-room {
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  padding: var(--spacing-xs);
}

.ros-timeline-body-vertical {
  position: relative;
  width: fit-content;
  min-width: 100%;
}

.ros-timeline-columns {
  display: flex;
}

.ros-timeline-column {
  position: relative;
  min-width: 180px;
  border-right: 1px solid var(--color-border-light);
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(var(--slot-height, 60px) - 1px),
    var(--color-border-light) calc(var(--slot-height, 60px) - 1px),
    var(--color-border-light) var(--slot-height, 60px)
  );
}

@media (max-width: 1024px) {
  .ros-search-input {
    width: 200px;
  }

  .ros-timeline-sidebar {
    width: 120px;
  }

  .ros-timeline-room,
  .ros-timeline-column {
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .ros-search-input {
    width: 160px;
  }

  .ros-timeline-header {
    padding: var(--spacing-xs);
  }

  .ros-timeline-sidebar,
  .ros-timeline-corner {
    width: 100px;
  }

  .ros-timeline-room,
  .ros-timeline-column {
    min-width: 130px;
  }
}

/* Current time "now" indicator line */
.ros-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-danger, #ef4444);
  z-index: 5;
  pointer-events: none;
}

.ros-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--color-danger, #ef4444);
  border-radius: 50%;
}

/* Highlight the current time slot in the sidebar */
.ros-timeline-time.ros-time-now {
  background: rgba(239, 68, 68, 0.15);
  font-weight: 700;
  color: var(--color-danger, #ef4444);
}

.ros-event {
  position: absolute;
  left: 6px;
  right: 6px;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
}

.ros-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.ros-event-live {
  animation: pulse-live 2s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
}

.ros-event-search-match {
  background-color: #ffc107 !important;
  color: #000 !important;
  animation: pulse-search 1.5s ease-in-out infinite;
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.9), 0 0 15px rgba(255, 193, 7, 0.7), 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  border: 3px solid #ff9800 !important;
  z-index: 100;
  font-weight: 600;
  overflow: visible !important;
}

.ros-event-search-match .ros-event-line {
  color: #000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.ros-event-search-match::before {
  content: '🔍 MATCH';
  position: absolute;
  top: -12px;
  right: 5px;
  background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  animation: bounce-indicator 1s ease-in-out infinite;
  letter-spacing: 0.5px;
  border: 2px solid #ff6f00;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes pulse-search {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.9), 0 0 15px rgba(255, 193, 7, 0.7), 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(255, 193, 7, 1), 0 0 20px rgba(255, 193, 7, 0.9), 0 6px 12px rgba(0, 0, 0, 0.4);
  }
}

@keyframes bounce-indicator {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.ros-event-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ros-event-line {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
}

.ros-event-details-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.ros-event-details-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.ros-event-details-btn .icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.ros-live-indicator {
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  animation: blink-live 1.5s ease-in-out infinite;
}

@keyframes blink-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.checkbox-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.btn-group {
  display: flex;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
  border-right: 1px solid var(--color-border);
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border-right: none;
}

.color-preview {
  width: 50px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-text-light);
  position: relative;
}

.color-preview:hover {
  transform: scale(1.05);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.color-preview::after {
  content: attr(title);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.color-preview:hover::after {
  opacity: 1;
}

.ros-color-rule {
  background: var(--color-surface);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.ros-color-preview {
  transition: all 0.2s ease;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ros-color-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ros-zoom-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.ros-field-display-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.ros-field-display-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.ros-field-display-row:last-child {
  border-bottom: none;
}

.ros-field-name {
  font-weight: 500;
  flex: 1;
}

.ros-field-options {
  display: flex;
  gap: var(--spacing-md);
}

.ros-field-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  font-size: 0.875rem;
}

.ros-field-option input[type="radio"] {
  cursor: pointer;
}

/* ==================== Video Wall ==================== */

.vw-body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar */
.vw-toolbar {
  height: 52px;
  min-height: 52px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  flex-shrink: 0;
  overflow-x: auto;
}

.vw-toolbar-title {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.vw-div {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
}

.vw-label {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Column buttons */
.vw-col-btns {
  display: flex;
  gap: 2px;
}

.vw-col-btn {
  background: var(--color-bg-tertiary);
  border: none;
  color: var(--color-text-primary);
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.vw-col-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.vw-col-btn:hover:not(.active) {
  background: var(--color-surface-hover);
}

/* Toggle pill */
.vw-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  white-space: nowrap;
}

.vw-toggle input[type=checkbox] {
  display: none;
}

.vw-toggle-pill {
  width: 32px;
  height: 17px;
  background: var(--color-bg-tertiary);
  border-radius: 9px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}

.vw-toggle-pill::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}

.vw-toggle input:checked + .vw-toggle-pill {
  background: var(--color-primary);
}

.vw-toggle input:checked + .vw-toggle-pill::after {
  left: 17px;
}

/* Close button */
.vw-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.vw-btn:hover {
  background: var(--color-surface-hover);
}

/* Scroll + grid */
.vw-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.vw-grid {
  display: grid;
  grid-template-columns: repeat(var(--vw-cols, 3), 1fr);
  gap: 10px;
}

/* Card */
.vw-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Video + VU side-by-side row */
.vw-media-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #000;
  position: relative;
}

/* 16:9 video wrapper using padding-top trick */
.vw-video-outer {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.vw-video-outer::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.vw-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Status dot */
.vw-dot {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text-muted);
  border: 1.5px solid rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.vw-dot.online  { background: var(--color-success); }
.vw-dot.offline { background: var(--color-danger); }

/* Offline overlay — hidden by default, toggled via .show */
.vw-nosig {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
  z-index: 4;
}

.vw-nosig.show {
  display: flex;
}

.vw-nosig span {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Vertical VU meter column */
.vw-vu-col {
  width: 18px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 3px 20px;
  position: relative;
}

.vw-vu-track-v {
  flex: 1;
  width: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Fill rises from bottom */
.vw-vu-fill-v {
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, #22c55e 0%, #f59e0b 65%, #ef4444 100%);
  transition: height 180ms linear;
  border-radius: 2px;
}

.vw-vu-db-v {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: var(--color-text-muted);
  line-height: 1;
  pointer-events: none;
}

/* Machine info row */
.vw-info {
  padding: 7px 10px 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.vw-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-ip {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: monospace;
}

/* Profile rows */
.vw-profile {
  padding: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vw-prow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.vw-plabel {
  color: var(--color-text-muted);
  min-width: 56px;
}

.vw-pval {
  font-weight: 500;
}

.vw-profile.match    .vw-pval { color: var(--color-success); }
.vw-profile.mismatch .vw-pval { color: var(--color-warning); }

/* Toolbar toggle visibility classes */
.vw-hide-video   .vw-video-outer { display: none; }
.vw-hide-vu      .vw-vu-col      { display: none; }
.vw-hide-info    .vw-info        { display: none; }
.vw-hide-profile .vw-profile     { display: none; }

/* Splash / loading screen */
.vw-splash {
  position: fixed;
  inset: 0;
  background: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 100;
}

.vw-splash-title {
  font-size: 22px;
  font-weight: 700;
}

.vw-splash-msg {
  font-size: 14px;
  color: var(--color-text-muted);
}

.vw-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: vw-spin 0.7s linear infinite;
}

@keyframes vw-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .vw-grid { --vw-cols: 1 !important; }
}

/* ==================== Settings Page ==================== */

.settings-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Three equal cards */
.settings-row {
  display: grid;
  gap: var(--spacing-md);
  align-items: start;
}

.settings-row-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Full-width danger zone at page bottom */
.settings-danger-full {
  width: 100%;
}

.settings-card {
  height: 100%;
}

.settings-card-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-sm);
}

.settings-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Field row: label stack on top, input below */
.settings-field {
  padding: var(--spacing-md) 0;
}

.settings-field:first-child {
  padding-top: 0;
}

.settings-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-xs);
}

.settings-field-label .form-label {
  margin-bottom: 0;
}

/* Horizontal field: label left, control right */
.settings-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.settings-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

/* Unit select (ms/s) next to a number input */
.settings-unit-select {
  width: 70px;
  flex-shrink: 0;
}

/* Toggle switch (replaces checkbox) */
.settings-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-toggle-track {
  width: 38px;
  height: 22px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}

.settings-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: left 0.2s, background 0.2s;
}

.settings-toggle input:checked + .settings-toggle-track {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.settings-toggle input:checked + .settings-toggle-track::after {
  left: 19px;
  background: #fff;
}

/* Accent color row */
.settings-color-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.settings-color-input {
  width: 48px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

/* Info box inside Video card */
.settings-info-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.settings-code {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 0.8rem;
  color: var(--color-primary);
  margin-top: var(--spacing-xs);
  word-break: break-all;
}

.settings-code.mt-2 {
  margin-top: var(--spacing-sm);
}

/* Danger zone card */
.settings-danger-card {
  border-color: var(--color-danger) !important;
}

.settings-danger-header {
  background: rgba(239, 68, 68, 0.06);
}

.settings-danger-title {
  color: var(--color-danger) !important;
}

.settings-danger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.settings-danger-item {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  justify-content: space-between;
}

.settings-danger-item-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

.settings-factory-reset {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

/* Save row */
.settings-save-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 1100px) {
  .settings-row-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .settings-row-3 { grid-template-columns: 1fr; }
}

/* ==================== Pearl Monitor ==================== */

.pearl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
    gap: var(--spacing-lg);
}

/* Card shell */
.pearl-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-left-color 0.25s;
}
.pearl-card.pearl-card-online  { border-left-color: var(--color-success); }
.pearl-card.pearl-card-offline { border-left-color: var(--color-text-muted); }

/* Card header */
.pearl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.pearl-card-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pearl-ip {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Card body */
.pearl-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

/* System stats bar */
.pearl-stats-bar {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.pearl-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pearl-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.pearl-stat-val {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}
.pearl-stat-val.pearl-stat-warn {
    color: var(--color-warning, #f59e0b);
}

/* Storage bar */
.pearl-storage-bar {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pearl-storage-stats {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}
.pearl-storage-track {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.pearl-storage-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width 400ms ease;
}
.pearl-storage-fill.pearl-storage-warn {
    background: var(--color-danger, #ef4444);
}

/* Main columns layout */
.pearl-main-cols {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 180px;
}

/* Left: channels + recorders */
.pearl-controls-col {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-right: 1px solid var(--color-border);
}

/* VU meter column (vertical, rises from bottom) */
.pearl-vu-col {
    width: 18px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 3px 20px;
    position: relative;
    border-right: 1px solid var(--color-border);
}
.pearl-vu-track {
    flex: 1;
    width: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.pearl-vu-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, #22c55e 0%, #f59e0b 65%, #ef4444 100%);
    transition: height 80ms linear;
    border-radius: 2px;
}
.pearl-vu-db {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    color: var(--color-text-muted);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}

/* Section (channels / recorders) */
.pearl-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pearl-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}
.pearl-items-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Individual item row */
.pearl-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 5px 8px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.pearl-item-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pearl-item-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pearl-item-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}
.pearl-item-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.pearl-streaming-badge { animation: pearl-pulse 2s ease-in-out infinite; }
.pearl-rec-badge       { animation: pearl-pulse 1.5s ease-in-out infinite; }

@keyframes pearl-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* Right: preview */
.pearl-preview-col {
    width: 220px;
    flex-shrink: 0;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pearl-preview-wrap {
    position: relative;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pearl-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pearl-preview-placeholder {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
    z-index: 1;
}
.pearl-preview-footer {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Switcher iframe */
.pearl-switcher-iframe {
    width: 100%;
    min-height: 600px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    flex: 1;
}

/* Responsive */
@media (max-width: 1200px) {
    .pearl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pearl-main-cols { flex-direction: column; }
    .pearl-controls-col { border-right: none; border-bottom: 1px solid var(--color-border); }
    .pearl-vu-col { width: 100%; height: 20px; flex-direction: row; padding: 3px 6px 3px 20px; }
    .pearl-vu-track { flex-direction: row; justify-content: flex-start; height: 100%; }
    .pearl-vu-fill { width: 0%; height: 100%; }
    .pearl-preview-col { width: 100%; }
}

/* ==================== Page Builder ==================== */
.pb-editor-wrap {
    overflow: hidden;
    /* Container clips any flex children that would otherwise push the
       canvas wider than its parent — most often the long DB Bindings
       header in the 160px sidebar. */
    min-width: 0;
}
.pb-editor-layout {
    display: grid;
    /* Default columns. ALWAYS overridden inline by renderPbEditor with the
       persisted toolbar/props widths plus the two 6px resize-handle tracks,
       e.g. "160px 6px 1fr 6px 220px". Kept here only as a fallback for
       very brief render windows where the inline style hasn't applied yet
       — the 5-track layout still works with 5-track CSS. */
    grid-template-columns: 160px 6px 1fr 6px 220px;
    gap: var(--spacing-sm);
    min-height: 650px;
    transition: grid-template-columns 0.15s ease;
}
.pb-toolbar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    background: var(--color-bg);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 800px;
    /* CRITICAL: a grid item without min-width:0 inherits min-content as a
       minimum, which is what was making "Collapse all / Expand all / Edit"
       force horizontal scroll instead of wrapping. */
    min-width: 0;
    /* Firefox scrollbar to match the rest of the app (matrix tables,
       reflex-db rows, table-responsive, etc.). */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}
/*
 * WebKit scrollbar styling — mirrors .table-responsive / .matrix-scroll-*
 * so the toolbar and props panel feel like first-class citizens instead of
 * sticking out with the default OS scrollbar.
 */
.pb-toolbar::-webkit-scrollbar,
.pb-props-panel::-webkit-scrollbar,
.pb-canvas-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.pb-toolbar::-webkit-scrollbar-track,
.pb-props-panel::-webkit-scrollbar-track,
.pb-canvas-area::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 4px;
}
.pb-toolbar::-webkit-scrollbar-thumb,
.pb-props-panel::-webkit-scrollbar-thumb,
.pb-canvas-area::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.pb-toolbar::-webkit-scrollbar-thumb:hover,
.pb-props-panel::-webkit-scrollbar-thumb:hover,
.pb-canvas-area::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ----------------------------------------------------------------------
 * Editor top bar (above the 3-column layout). Replaces the prior
 * `flex items-center justify-between` row that was causing overflow on
 * narrow viewports. Wraps cleanly when the right cluster of buttons
 * grows (3 panel-toggles + Grid + Preview + Publish + sep).
 * ---------------------------------------------------------------------- */
.pb-editor-topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    margin-bottom: var(--spacing-md, 12px);
    min-width: 0;
}
.pb-editor-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    min-width: 0;
    flex: 1 1 auto;
}
.pb-editor-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.pb-editor-title {
    margin: 0;
    font-size: var(--font-size-md, 15px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 360px;
}
.pb-topbar-sep {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    margin: 0 4px;
}
.pb-panel-toggle {
    /* Slightly tighter than default btn-sm so all three fit on a single
       row at typical screen widths. */
    padding-left: var(--spacing-sm, 8px);
    padding-right: var(--spacing-sm, 8px);
}

/* ----------------------------------------------------------------------
 * Resize handles between the side panels and the canvas. The 6px grid
 * track holds an invisible-by-default vertical bar that lights up to a
 * 2px primary-color line on hover or active drag. Double-click to reset
 * the width to the panel's default. Disabled when the adjacent panel is
 * collapsed (since there's no width to drag).
 * ---------------------------------------------------------------------- */
.pb-resize-handle-col {
    position: relative;
    cursor: col-resize;
    background: transparent;
    transition: background-color 0.12s ease;
}
.pb-resize-handle-col::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--color-border);
    border-radius: 1px;
    opacity: 0.5;
    transition: background-color 0.12s ease, opacity 0.12s ease;
}
.pb-resize-handle-col:hover::before,
.pb-resize-handle-col:active::before {
    background: var(--color-primary);
    opacity: 1;
}
.pb-resize-handle-col.pb-resize-handle-disabled {
    cursor: default;
}
.pb-resize-handle-col.pb-resize-handle-disabled::before {
    opacity: 0.2;
}
.pb-resize-handle-col.pb-resize-handle-disabled:hover::before {
    background: var(--color-border);
    opacity: 0.2;
}

/* ----------------------------------------------------------------------
 * Collapsed-panel stub. Replaces the full toolbar / props-panel column
 * with a 28px-wide vertical strip that's still clickable to expand.
 * Vertical text label keeps the affordance discoverable without taking
 * any horizontal space.
 * ---------------------------------------------------------------------- */
.pb-panel-stub {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 0;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    min-height: 200px;
}
.pb-panel-stub:hover {
    background: var(--color-surface-hover, rgba(255,255,255,0.04));
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}
.pb-panel-stub-chevron {
    font-size: 12px;
    line-height: 1;
}
.pb-panel-stub-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------
 * DB Bindings header inside the toolbar. The 160px sidebar can't hold
 * "DB Bindings" + three labeled buttons on one row, so we stack into
 * two compact rows:
 *   row 1 → title + Edit (primary action)
 *   row 2 → bulk collapse/expand icon buttons (only when groups exist)
 * Both rows respect the sidebar's min-width:0 so nothing escapes.
 * ---------------------------------------------------------------------- */
.pb-bindings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: var(--spacing-md, 12px) 0 4px;
    min-width: 0;
}
.pb-bindings-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pb-bindings-edit-btn {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 2px 8px;
}
.pb-bindings-bulk-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}
.pb-bindings-bulk-btn {
    flex: 1 1 0;
    font-size: 10px;
    padding: 2px 4px;
    font-family: var(--font-family-mono, ui-monospace, monospace);
    /* Mono font keeps the chevron + "All" centred at the same width
       as its sibling for visual balance. */
    text-align: center;
}
.pb-tool-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pb-tool-item {
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: grab;
    user-select: none;
    transition: border-color 0.15s;
}
.pb-tool-item:hover {
    border-color: var(--color-primary);
}
.pb-tool-field {
    border-left: 3px solid var(--color-primary);
}
/* Sub-DB drag tiles use the warning amber so they're visually distinct
   from parent-DB tiles in the sidebar. Same color cue as the SUB badge
   on the group header above them. */
.pb-tool-field-sub {
    border-left: 3px solid var(--color-warning, #f59e0b);
}

/*
 * Collapsible group header in the editor's DB Bindings sidebar. Looks
 * like static text (it isn't a typical button) but is fully clickable
 * on its whole horizontal area, with a subtle hover so the operator
 * knows it's interactive. Chevron + count appear inline so the header
 * stays a single short row even with sub-DB amber pill present.
 */
.pb-binding-group-header {
    border-radius: var(--radius-sm, 4px);
    padding: 4px 6px;
    transition: background-color 0.12s ease;
}
.pb-binding-group-header:hover {
    background-color: var(--color-surface-hover, rgba(255,255,255,0.04));
}
.pb-binding-group-header:focus-visible {
    outline: 1px solid var(--color-primary);
    outline-offset: 1px;
}
.pb-upload-item {
    padding: 2px;
    cursor: grab;
}
.pb-canvas-area {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}
.pb-canvas-wrapper {
    position: relative;
    flex-shrink: 0;
}
.pb-canvas {
    position: relative;
    background-color: #000;
    overflow: hidden;
    cursor: default;
}
.pb-el {
    position: absolute;
    cursor: move;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
    user-select: none;
}
.pb-el-selected {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.pb-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 2px;
    z-index: 10;
}
.pb-rh-br { right: -5px; bottom: -5px; cursor: se-resize; }
.pb-rh-bl { left: -5px; bottom: -5px; cursor: sw-resize; }
.pb-rh-tr { right: -5px; top: -5px; cursor: ne-resize; }
.pb-rh-tl { left: -5px; top: -5px; cursor: nw-resize; }
.pb-props-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 800px;
    /* Same min-width:0 fix as .pb-toolbar — without this a long property
       label would push the canvas grid column wider than its allotted
       1fr and trigger horizontal scroll on the whole editor. */
    min-width: 0;
    /* Firefox scrollbar to match the app palette. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}

/* Wizard orientation selector */
.pb-orient-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-md);
}
.pb-orient-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.pb-orient-btn:hover {
    border-color: var(--color-primary);
}
.pb-orient-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary-900);
}
.pb-orient-preview {
    border: 2px solid var(--color-text-muted);
    border-radius: var(--radius-sm);
}
.pb-orient-land {
    width: 80px;
    height: 45px;
}
.pb-orient-port {
    width: 45px;
    height: 80px;
}
.pb-orient-resp {
    width: 80px;
    height: 50px;
    border-style: dashed;
    position: relative;
}
.pb-orient-resp::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px dashed var(--color-text-muted);
    border-radius: 2px;
}

/* Upload thumbnails in toolbar */
.pb-upload-thumb {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: grab;
    border: 1px solid var(--color-border);
    aspect-ratio: 1;
}
.pb-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.pb-upload-thumb:hover {
    border-color: var(--color-primary);
}

/* Media Manager */
.pb-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    max-height: 55vh;
    overflow-y: auto;
    padding: var(--spacing-xs);
}
.pb-media-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-secondary);
}
.pb-media-thumb {
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
}
.pb-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.15s;
}
.pb-media-thumb:hover img {
    transform: scale(1.05);
}
.pb-media-info {
    padding: 6px 8px;
}
.pb-media-name {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

/*
 * Floating help widget — circular "?" button in the bottom-right corner,
 * paired with a slide-in panel containing per-page docs. Hidden when
 * Settings → Server → "Show help (?) button" is unchecked.
 */
#help-widget-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
#help-widget-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
#help-widget-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

#help-widget-panel {
    position: fixed;
    right: 18px;
    bottom: 72px;
    z-index: 10001;
    width: min(420px, calc(100vw - 36px));
    max-height: min(640px, calc(100vh - 110px));
    background: var(--color-bg-elevated, #1a1a2e);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
#help-widget-panel.help-widget-panel-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.help-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-md, 14px);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg, #0e0e1a);
}
.help-widget-header h3 {
    margin: 0;
    font-size: var(--font-size-md, 15px);
    color: var(--color-text-primary);
}
.help-widget-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 4px;
}
.help-widget-close:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover, rgba(255,255,255,0.06));
}
.help-widget-body {
    padding: var(--spacing-md, 14px);
    overflow-y: auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    /* Match the rest of the app's scrollbar palette. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}
.help-widget-body::-webkit-scrollbar { width: 8px; }
.help-widget-body::-webkit-scrollbar-track { background: var(--color-surface); border-radius: 4px; }
.help-widget-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.help-widget-body::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }
.help-widget-body p { margin: 0 0 10px; }
.help-widget-body ul,
.help-widget-body ol {
    margin: 0 0 10px;
    padding-left: 18px;
}
.help-widget-body li {
    margin-bottom: 6px;
}
.help-widget-body code {
    background: var(--color-surface);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}
.help-widget-body kbd {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: var(--font-family-mono, monospace);
}
.help-widget-body em {
    font-style: normal;
    color: var(--color-text-primary);
    font-weight: 500;
}
/* Lead-in paragraph that opens every page's docs. Slightly emphasised
   so the operator can read the gist in one glance, then drop into the
   sections below for detail. */
.help-widget-overview {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}
/* Each subheading separates a thematic chunk (Key Areas / How to / Tips
   / etc.). The bottom margin gives breathing room; the small top
   margin distinguishes one section from the next without feeling like
   a hard divider. */
.help-widget-section {
    margin-bottom: 14px;
}
.help-widget-section:last-child {
    margin-bottom: 0;
}
.help-widget-section-heading {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.help-widget-section:first-of-type .help-widget-section-heading {
    margin-top: 0;
}
.help-widget-section-body {
    color: var(--color-text-secondary);
}
.help-widget-footer {
    padding: 8px var(--spacing-md, 14px);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 11px;
    background: var(--color-bg, #0e0e1a);
}

/*
 * Reflex DB search autocomplete. The dropdown anchors to the input via
 * absolute positioning inside .reflex-search-wrap. Keep it narrow (matches
 * input width, min 220px) so long values wrap rather than blow out the
 * card header. Matched substrings get a highlight via <mark>.
 */
.reflex-search-wrap {
    position: relative;
}
.reflex-search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-bg-elevated, #1a1a2e);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    min-width: 220px;
    /* Match the rest of the app's scrollbar styling. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}
.reflex-search-suggest::-webkit-scrollbar {
    width: 8px;
}
.reflex-search-suggest::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 4px;
}
.reflex-search-suggest::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.reflex-search-suggest::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}
.reflex-search-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-secondary, rgba(255,255,255,0.04));
    transition: background-color 0.1s ease;
}
.reflex-search-suggest-item:last-child {
    border-bottom: none;
}
.reflex-search-suggest-item:hover,
.reflex-search-suggest-item.reflex-search-suggest-active {
    background: var(--color-surface-hover, rgba(255,255,255,0.06));
}
.reflex-search-suggest-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.reflex-search-suggest-value mark {
    background: rgba(99, 102, 241, 0.25);
    color: var(--color-primary, #818cf8);
    padding: 0;
    border-radius: 2px;
    font-weight: 600;
}
.reflex-search-suggest-field {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: 8px;
}

/*
 * Reflex DB "Jump to Live" highlight pulse. Briefly flashes the targeted
 * row on a yellow/green wash so the operator can spot it after a long
 * scroll-into-view. ~1.8s total — long enough to see, short enough not
 * to be annoying. Uses background-color only (no transform) so it
 * doesn't fight the table's existing row layout.
 */
@keyframes row-jump-flash-keys {
    0%   { background-color: rgba(34, 197, 94, 0.45); }
    50%  { background-color: rgba(34, 197, 94, 0.25); }
    100% { background-color: transparent; }
}
.row-jump-flash {
    animation: row-jump-flash-keys 1.8s ease-out;
}
.row-jump-flash > td {
    /* Make sure the wash sits above any odd/even row striping. */
    background-color: transparent !important;
}

/* Snap guide lines */
.pb-guide {
    position: absolute;
    z-index: 50;
    pointer-events: none;
}
.pb-guide-v {
    width: 1px;
    top: 0;
    background: rgba(255, 60, 100, 0.7);
}
.pb-guide-h {
    height: 1px;
    left: 0;
    background: rgba(255, 60, 100, 0.7);
}

/* Toggleable alignment grid overlay — uses ::after so it doesn't clobber background-image */
.pb-canvas.pb-grid-on::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.15) 1px, transparent 1px),
        linear-gradient(to right, rgba(100,180,255,0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(100,180,255,0.3) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
}

@media (max-width: 900px) {
    /* On narrow viewports we stack the three panels vertically. The
       !important here defeats the inline `grid-template-columns` that
       renderPbEditor sets to handle the collapsed-panel stub widths
       (28px / 160px / 220px). On mobile the operator should always see
       the full toolbar above and props below the canvas regardless of
       desktop collapse preferences. */
    .pb-editor-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr auto;
    }
    .pb-toolbar {
        max-height: none;
    }
    .pb-props-panel {
        max-height: none;
    }
    /* Hide the collapse stubs on mobile — they don't make sense in a
       stacked layout. */
    .pb-panel-stub {
        display: none;
    }
    /* Hide the resize handles on mobile — they'd render as meaningless
       horizontal 6px strips between stacked panels. */
    .pb-resize-handle-col {
        display: none;
    }
}

/* ==================== Agent Chat ==================== */

.agent-layout {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 140px);
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-primary);
}

/* Sidebar config list */
.agent-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agent-sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.agent-sidebar-header h4 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-config-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xs);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}

.agent-config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    gap: var(--spacing-sm);
}

.agent-config-item:hover {
    background: var(--color-bg-elevated);
}

.agent-config-item.active {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
    border: 1px solid hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
}

.agent-config-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.agent-config-item-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-config-item-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    gap: var(--spacing-xs);
    margin-top: 2px;
}

.agent-config-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.agent-config-item:hover .agent-config-item-actions {
    opacity: 1;
}

.agent-config-item-actions .btn {
    padding: 2px 6px;
    font-size: 11px;
}

/* Chat area */
.agent-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-bg-primary);
}

.agent-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    text-align: center;
}

.agent-chat-empty-icon {
    font-size: 3rem;
    opacity: 0.4;
}

.agent-chat-empty h3 {
    color: var(--color-text-secondary);
    margin: 0;
}

.agent-chat-empty p {
    max-width: 400px;
    line-height: 1.5;
}

/* Messages area */
.agent-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
}

.agent-chat-messages::-webkit-scrollbar,
.agent-config-list::-webkit-scrollbar {
    width: 8px;
}

.agent-chat-messages::-webkit-scrollbar-track,
.agent-config-list::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 4px;
}

.agent-chat-messages::-webkit-scrollbar-thumb,
.agent-config-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.agent-chat-messages::-webkit-scrollbar-thumb:hover,
.agent-config-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.agent-message {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    animation: agentMsgIn 0.2s ease;
}

@keyframes agentMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.agent-message.user {
    align-self: flex-end;
}

.agent-message.assistant {
    align-self: flex-start;
}

.agent-message-content {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.agent-message.user .agent-message-content {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
    border: 1px solid hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
    color: var(--color-text-primary);
    border-bottom-right-radius: var(--radius-sm);
}

.agent-message.assistant .agent-message-content {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-bottom-left-radius: var(--radius-sm);
}

.agent-message-content code {
    background: rgba(0,0,0,0.2);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
}

.agent-message-content pre {
    background: rgba(0,0,0,0.25);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: var(--spacing-xs) 0;
}

.agent-message-content pre code {
    background: none;
    padding: 0;
}

.agent-message-time {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 4px;
    padding: 0 var(--spacing-sm);
}

.agent-message.user .agent-message-time {
    text-align: right;
}

/* Input bar */
.agent-chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.agent-chat-input-bar textarea {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s;
}

.agent-chat-input-bar textarea:focus {
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

.agent-chat-input-bar textarea::placeholder {
    color: var(--color-text-muted);
}

.agent-chat-input-bar .btn {
    height: 40px;
    min-width: 72px;
}

/* Typing / thinking indicator */
.agent-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.agent-typing-dots {
    display: flex;
    gap: 3px;
}

.agent-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--color-text-muted);
    border-radius: 50%;
    animation: agentBounce 1.2s ease-in-out infinite;
}

.agent-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.agent-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes agentBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Welcome message */
.agent-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    color: var(--color-text-muted);
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
}

.agent-welcome-icon {
    font-size: 2.5rem;
    opacity: 0.5;
}

/* Wizard step indicators */
.agent-wizard-steps {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.agent-wizard-step {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background 0.2s;
}

.agent-wizard-step.active {
    background: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

.agent-wizard-step.done {
    background: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 15%));
}

/* Responsive */
@media (max-width: 768px) {
    .agent-layout {
        flex-direction: column;
        height: calc(100vh - 120px);
    }
    .agent-sidebar {
        width: 100%;
        min-width: unset;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .agent-message {
        max-width: 90%;
    }
}

/* Inline schedule card inside chat bubble */
.inline-sched-card .form-select,
.inline-sched-card .form-input {
    background: var(--color-bg-primary);
    border-color: var(--color-border);
    font-size: var(--font-size-xs);
}

.inline-sched-card .form-select:focus,
.inline-sched-card .form-input:focus {
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

/* ==================== Media Management ==================== */

/* Quick Schedule timing toggle */
.qs-timing-btn.active {
    background: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    color: #fff;
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

.media-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.media-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.media-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.media-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
}

.media-tab.active {
    color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    border-bottom-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}

/* Breadcrumb */
.media-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-wrap: wrap;
}

.media-crumb-link {
    color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.15s;
}

.media-crumb-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.media-crumb-sep {
    color: var(--color-text-muted);
}

.media-crumb-current {
    color: var(--color-text-primary);
    font-weight: 600;
}

.media-info-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.media-info-hint {
    margin-left: auto;
    font-style: italic;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.media-grid .empty-state {
    grid-column: 1 / -1;
}

.media-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.media-card:hover {
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.media-card-preview {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
    cursor: pointer;
    overflow: hidden;
}

.media-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-file-icon {
    font-size: 2rem;
    opacity: 0.5;
}

.media-folder-preview {
    background: var(--color-bg-elevated) !important;
}

.media-folder-icon {
    font-size: 3rem;
    opacity: 0.7;
}

.media-card-folder {
    border-style: dashed;
}

.media-card-folder:hover {
    border-style: solid;
}

/* Source-type folder cards on the unified Media root — visually distinct
   from regular subfolders so the operator can tell at a glance which
   bucket they're entering when they click in. */
.media-card-source-site .media-folder-preview {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04));
}
.media-card-source-external .media-folder-preview {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.04));
}
.media-card-source-site,
.media-card-source-external {
    border-style: solid;
}

/* List-mode equivalents — gentle row tint so the source entries still
   read as distinct from regular folders when the operator flips to List. */
.media-list-row.media-list-source-site > td {
    background: rgba(34, 197, 94, 0.05);
}
.media-list-row.media-list-source-external > td {
    background: rgba(59, 130, 246, 0.05);
}

.media-card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
}

.media-card-name {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.media-card-size {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.media-card-actions {
    display: flex;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm) var(--spacing-sm);
    flex-wrap: wrap;
}

.media-card-actions .btn {
    font-size: 11px;
    padding: 2px 8px;
}

/* Upload modal */
.media-upload-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.media-upload-zone:hover,
.media-upload-zone.drag-over {
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.05);
}

.media-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.media-upload-list {
    margin-top: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
}

.media-upload-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.media-upload-progress {
    margin-top: var(--spacing-md);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    border-radius: 3px;
    transition: width 0.2s;
}

@media (max-width: 768px) {
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .media-card-preview {
        height: 100px;
    }
}

/* ==================== Tasks Page ==================== */
.tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-sm);
}

.task-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: border-color var(--transition-fast);
}

.task-card:hover {
    border-color: var(--color-border-light);
}

.task-card.task-pending {
    border-left: 3px solid var(--color-warning, #f59e0b);
}

.task-card.task-completed {
    border-left: 3px solid var(--color-success, #22c55e);
    opacity: 0.7;
}

.task-card.task-cancelled {
    border-left: 3px solid var(--color-text-muted);
    opacity: 0.55;
}

.task-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.task-card-type {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-primary);
}

.task-card-target {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.task-card-detail {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 4px;
}

.task-card-meta {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

@media (max-width: 768px) {
    .tasks-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== Groups Editor (shared chip UI) ==================== */
.cv-groups-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cv-groups-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    padding: 6px 8px;
    background: var(--color-bg-secondary, #1a1d24);
    border: 1px solid var(--color-border, #2a2f38);
    border-radius: 6px;
}
.cv-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    background: var(--color-primary-900, #4338ca);
    color: #fff;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
}
.cv-group-chip-label { white-space: nowrap; }
.cv-group-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.cv-group-chip-remove:hover { background: rgba(255, 255, 255, 0.35); }
.cv-group-add-btn {
    padding: 4px 10px;
    border: 1px dashed var(--color-border, #2a2f38);
    background: transparent;
    color: var(--color-text-muted, #9ca3af);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
}
.cv-group-add-btn:hover {
    color: var(--color-text, #e5e7eb);
    border-color: var(--color-primary, #6366f1);
}
.cv-group-empty {
    font-size: 0.85rem;
    font-style: italic;
}
.cv-groups-add-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cv-groups-add-form .form-input { flex: 1; }
.cv-groups-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.cv-group-suggest {
    padding: 2px 8px;
    border: 1px solid var(--color-border, #2a2f38);
    background: transparent;
    color: var(--color-text-muted, #9ca3af);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.75rem;
}
.cv-group-suggest:hover {
    color: var(--color-text, #e5e7eb);
    border-color: var(--color-primary, #6366f1);
    background: var(--color-primary-900, rgba(99, 102, 241, 0.15));
}

/* ==================== Media Toolbar (search + view toggle) ==================== */
.media-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem 0;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.media-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 520px;
    min-width: 200px;
}
.media-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    pointer-events: none;
    opacity: 0.7;
}
.media-search-input {
    width: 100%;
    height: 36px;
    padding: 0 2.25rem 0 2rem;
    font-size: 0.875rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.media-search-input:focus {
    border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    box-shadow: 0 0 0 3px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
    outline: none;
}
.media-search-input::-webkit-search-cancel-button {
    display: none;
}
.media-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.media-search-clear:hover {
    background: var(--color-bg-elevated, rgba(255, 255, 255, 0.08));
    color: var(--color-text, #e5e7eb);
}
.media-view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}
.media-view-toggle .media-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    height: 28px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.media-view-toggle .media-view-btn:hover {
    color: var(--color-text, #e5e7eb);
}
.media-view-toggle .media-view-btn.active {
    background: var(--color-primary-900, rgba(99, 102, 241, 0.22));
    color: var(--color-text, #e5e7eb);
}
.media-view-btn-icon {
    font-size: 0.85rem;
    line-height: 1;
}

/* Path badge for search results */
.media-path-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family-mono, monospace);
}
.media-path-badge.media-path-root {
    font-style: italic;
    opacity: 0.7;
}
.media-list-sub {
    margin-top: 3px;
}

.media-search-diag {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.media-search-diag > summary {
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
    color: var(--color-text-muted);
    list-style: disclosure-closed;
}
.media-search-diag[open] > summary {
    list-style: disclosure-open;
}
.media-search-diag-body {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-family-mono, monospace);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .media-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .media-search-wrap {
        max-width: none;
    }
    .media-view-toggle {
        align-self: flex-start;
    }
}

/* ==================== Media List View ==================== */
.media-grid.media-grid-list {
    display: block;
    gap: 0;
}
.media-list-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.media-list-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}
.media-list-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.12s;
}
.media-list-table tbody tr:last-child {
    border-bottom: none;
}
.media-list-table tbody tr:hover {
    background: var(--color-bg-elevated, rgba(255, 255, 255, 0.03));
}
.media-list-table td {
    padding: 8px 12px;
    font-size: 0.875rem;
    vertical-align: middle;
}
.media-list-icon {
    width: 40px;
    text-align: center;
}
.media-folder-icon-sm {
    font-size: 1.25rem;
}
.media-list-name .media-list-link {
    color: var(--color-text, #e5e7eb);
    cursor: pointer;
    text-decoration: none;
}
.media-list-name .media-list-link:hover {
    color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    text-decoration: underline;
}
.media-list-type,
.media-list-size {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.media-list-actions {
    white-space: nowrap;
    text-align: right;
}
.media-list-actions .btn {
    margin-left: 4px;
}