/* GraphDoc Styles - Maximal Design System */

:root {
    /* Color Primitives */
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a5f;

    --color-purple-400: #a78bfa;
    --color-purple-500: #8b5cf6;
    --color-purple-600: #7c3aed;

    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;

    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;

    --color-rose-400: #fb7185;
    --color-rose-500: #f43f5e;

    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* Semantic Tokens */
    --primary-color: var(--color-blue-500);
    --primary-dark: var(--color-blue-600);
    --primary-light: var(--color-blue-100);
    --secondary-color: var(--color-slate-500);
    --success-color: var(--color-emerald-500);
    --danger-color: var(--color-rose-500);
    --warning-color: var(--color-amber-500);
    --accent-color: var(--color-purple-500);
    --dark-color: #343a40;
    --light-color: #f8f9fa;

    /* Surface & Background */
    --bg-color: var(--color-slate-50);
    --bg-elevated: #ffffff;
    --bg-sunken: var(--color-slate-100);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --text-color: var(--color-slate-800);
    --text-muted: var(--color-slate-500);
    --text-inverse: #ffffff;
    --card-bg: #ffffff;
    --canvas-bg: var(--color-slate-100);

    /* Borders & Dividers */
    --border-color: var(--color-slate-200);
    --border-focus: var(--color-blue-400);
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Layout */
    --sidebar-width: 280px;
    --nav-height: 50px;
    --toolbar-height: 40px;
    --status-bar-height: 28px;

    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

/* Dark Mode */
[data-theme="dark"] {
    --primary-color: #5ba0e9;
    --primary-dark: #4a90d9;
    --secondary-color: #9ca3af;
    --dark-color: #1f2937;
    --light-color: #374151;
    --border-color: #4b5563;
    --bg-color: #111827;
    --text-color: #f3f4f6;
    --card-bg: #1f2937;
    --canvas-bg: #1a1a2e;
}

[data-theme="dark"] body {
    background: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .dialog,
[data-theme="dark"] .card,
[data-theme="dark"] .context-menu,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .search-results-panel {
    background: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .canvas-toolbar,
[data-theme="dark"] .panel-toolbar {
    background: var(--card-bg);
}

[data-theme="dark"] .canvas-container {
    background: var(--canvas-bg);
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}

[data-theme="dark"] .form-control {
    background: var(--dark-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .btn {
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-icon {
    color: var(--text-color);
}

[data-theme="dark"] .node-rect {
    fill: var(--card-bg) !important;
}

[data-theme="dark"] .data-table th {
    background: var(--dark-color);
}

/* kggen Theme - Purple gradient with glass-morphism */
[data-theme="kggen"] {
    --primary-color: #667eea;
    --primary-dark: #5a6fd6;
    --secondary-color: #a0aec0;
    --dark-color: #1a1a2e;
    --light-color: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.1);
    --bg-color: #1a1a2e;
    --text-color: #e8e8e8;
    --card-bg: rgba(255, 255, 255, 0.03);
    --canvas-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-hover: rgba(255, 255, 255, 0.08);
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --node-document: #667eea;
    --node-page: #4ecdc4;
    --node-concept: #ff6b6b;
    --node-entity: #f7b731;
    --node-default: #a55eea;
}

[data-theme="kggen"] body {
    background: var(--bg-color);
    color: var(--text-color);
}

[data-theme="kggen"] .sidebar,
[data-theme="kggen"] .dialog,
[data-theme="kggen"] .card,
[data-theme="kggen"] .context-menu,
[data-theme="kggen"] .dropdown-menu,
[data-theme="kggen"] .search-results-panel,
[data-theme="kggen"] .tool-grid {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

[data-theme="kggen"] .sidebar-header,
[data-theme="kggen"] .controls-header {
    background: var(--accent-gradient);
    color: white;
}

[data-theme="kggen"] .canvas-toolbar,
[data-theme="kggen"] .panel-toolbar {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="kggen"] .canvas-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    background-image:
        linear-gradient(135deg, #1a1a2e 0%, #16213e 100%),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
}

[data-theme="kggen"] .form-control {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="kggen"] .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

[data-theme="kggen"] .btn {
    border-color: var(--border-color);
}

[data-theme="kggen"] .btn-primary {
    background: var(--accent-gradient);
    border: none;
}

[data-theme="kggen"] .btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
}

[data-theme="kggen"] .btn-icon {
    color: var(--text-color);
}

[data-theme="kggen"] .btn-icon:hover {
    background: var(--glass-hover);
}

[data-theme="kggen"] .node-rect {
    fill: var(--glass-bg) !important;
}

[data-theme="kggen"] .data-table th {
    background: var(--dark-color);
}

[data-theme="kggen"] .top-nav {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="kggen"] .status-bar {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="kggen"] .nav-tab.active {
    background: var(--accent-gradient);
}

[data-theme="kggen"] .graph-list li.active {
    background: var(--accent-gradient);
}

[data-theme="kggen"] .favorite-item:hover,
[data-theme="kggen"] .recent-item:hover {
    background: var(--accent-gradient);
}

[data-theme="kggen"] .toast {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="kggen"] .command-palette {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
}

[data-theme="kggen"] .command-palette-item.selected,
[data-theme="kggen"] .command-palette-item:hover {
    background: var(--accent-gradient);
}

/* kggen theme badge colors */
[data-theme="kggen"] .badge-success {
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
}

[data-theme="kggen"] .badge-warning {
    background: rgba(247, 183, 49, 0.2);
    color: #f7b731;
}

[data-theme="kggen"] .badge-danger {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

[data-theme="kggen"] .badge-info {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
}

/* Cosmos Theme - Deep space with luminous accents */
[data-theme="cosmos"] {
    --primary-color: #818cf8;
    --primary-dark: #6366f1;
    --primary-light: rgba(129, 140, 248, 0.15);
    --secondary-color: #94a3b8;
    --success-color: #34d399;
    --danger-color: #fb7185;
    --warning-color: #fbbf24;
    --accent-color: #c084fc;
    --dark-color: #12122a;
    --light-color: #1e1e3a;

    --bg-color: #0a0a1a;
    --bg-elevated: #12122a;
    --bg-sunken: #06060f;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --text-inverse: #0a0a1a;
    --card-bg: #16163a;
    --canvas-bg: #0d0d24;

    --border-color: rgba(129, 140, 248, 0.15);
    --border-focus: #818cf8;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(129, 140, 248, 0.2);
    --shadow-glow-purple: 0 0 30px rgba(192, 132, 252, 0.2);
}

[data-theme="cosmos"] body {
    background: var(--bg-color);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(129, 140, 248, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(192, 132, 252, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(52, 211, 153, 0.02) 0%, transparent 50%);
    color: var(--text-color);
}

[data-theme="cosmos"] .sidebar,
[data-theme="cosmos"] .dialog,
[data-theme="cosmos"] .card,
[data-theme="cosmos"] .context-menu,
[data-theme="cosmos"] .dropdown-menu,
[data-theme="cosmos"] .search-results-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-color);
}

[data-theme="cosmos"] .canvas-toolbar,
[data-theme="cosmos"] .panel-toolbar {
    background: rgba(18, 18, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="cosmos"] .canvas-container {
    background: var(--canvas-bg);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(129, 140, 248, 0.06) 1px, transparent 0);
    background-size: 40px 40px;
}

[data-theme="cosmos"] .top-nav {
    background: rgba(18, 18, 42, 0.85);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid rgba(129, 140, 248, 0.1);
}

[data-theme="cosmos"] .status-bar {
    background: rgba(18, 18, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="cosmos"] .form-control {
    background: rgba(129, 140, 248, 0.05);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="cosmos"] .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

[data-theme="cosmos"] .btn {
    border-color: var(--border-color);
}

[data-theme="cosmos"] .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    box-shadow: 0 2px 10px rgba(129, 140, 248, 0.3);
}

[data-theme="cosmos"] .btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(129, 140, 248, 0.5);
    transform: translateY(-1px);
}

[data-theme="cosmos"] .btn-icon {
    color: var(--text-color);
}

[data-theme="cosmos"] .btn-icon:hover {
    background: rgba(129, 140, 248, 0.1);
}

[data-theme="cosmos"] .node-rect {
    fill: var(--card-bg) !important;
}

[data-theme="cosmos"] .data-table th {
    background: var(--dark-color);
}

[data-theme="cosmos"] .nav-tab.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

[data-theme="cosmos"] .graph-list li.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

[data-theme="cosmos"] .favorite-item:hover,
[data-theme="cosmos"] .recent-item:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

[data-theme="cosmos"] .toast {
    background: rgba(18, 18, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="cosmos"] .command-palette {
    background: rgba(18, 18, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
}

[data-theme="cosmos"] .command-palette-item.selected,
[data-theme="cosmos"] .command-palette-item:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* Visually Hidden (for screen readers) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus States for Accessibility */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.2);
}

/* Status Bar */
.status-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    height: var(--status-bar-height);
    background: var(--dark-color);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.status-label {
    color: rgba(255, 255, 255, 0.5);
}

.status-value {
    font-weight: 500;
}

.status-spacer {
    flex: 1;
}

.status-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 8px;
}

/* Status Bar Terminal Items (minimized terminals) */
.status-bar-terminals {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
}

.status-bar-terminal-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.status-bar-terminal-item:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.5);
}

.status-bar-terminal-item .terminal-status-icon {
    color: #00d4ff;
    font-size: 0.8rem;
}

.status-bar-terminal-item .terminal-status-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.9);
}

.status-bar-terminal-item .terminal-restore-btn,
.status-bar-terminal-item .terminal-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 0.2rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.status-bar-terminal-item .terminal-restore-btn:hover {
    color: #00d4ff;
}

.status-bar-terminal-item .terminal-close-btn:hover {
    color: #ff4444;
}

/* Connection Status Indicator */
.connection-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.connection-indicator.online {
    background-color: #28a745;
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);
}

.connection-indicator.offline {
    background-color: #dc3545;
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.btn-xs {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    gap: 1rem;
}

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

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

.loading-message {
    color: white;
    font-size: 1rem;
    font-weight: 500;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color, #333);
    background: var(--bg-color, #f5f5f5);
    overflow: hidden;
}

/* Top Navigation */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 1rem;
    background: var(--dark-color);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow: hidden;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    flex-shrink: 0;
    font-weight: 600;
}

.brand-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.nav-tabs {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 1;
    overflow: hidden;
}

.nav-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.nav-tab:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.nav-tab.active {
    background: var(--primary-color);
    color: white;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 1;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: var(--nav-height);
    justify-content: flex-end;
}

/* Main Container */
.main-container {
    display: flex;
    margin-top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    overflow: hidden;
    width: 100%;
}

/* Sidebars */
.sidebar {
    width: var(--sidebar-width);
    min-width: 0;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #333);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s;
    max-width: var(--sidebar-width);
}

.right-sidebar {
    border-right: none;
    border-left: 1px solid var(--border-color);
    transform: translateX(100%);
}

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

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

.sidebar-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.sidebar-section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section label {
    display: block;
    font-size: 0.75rem;
    color: var(--secondary-color);
    margin-bottom: 0.25rem;
}

/* Datastore Select Row with Settings Button */
.datastore-select-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.datastore-select-row select {
    flex: 1;
}

.datastore-select-row .btn-icon {
    width: auto !important;
    height: auto !important;
    min-width: 32px;
    min-height: 32px;
    padding: 0.25rem 0.5rem !important;
    background: var(--light-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.datastore-select-row .btn-icon:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white;
}

.datastore-select-row .icon-gear {
    display: inline-block;
    font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* Datastore Settings Dialog Styles */
.datastore-stats {
    background: var(--light-color);
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.datastore-stats .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.datastore-stats .stat-item:last-child {
    border-bottom: none;
}

.datastore-stats .stat-label {
    color: var(--secondary-color);
}

/* Left Sidebar Collapsible Sections */
.left-sidebar .sidebar-section.favorites-section,
.left-sidebar .sidebar-section.recent-section {
    padding: 0;
    border-top: 1px solid var(--border-color);
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    background: var(--light-color);
    user-select: none;
}

.sidebar-section-header:hover {
    background: var(--border-color);
}

.sidebar-section-header h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.section-toggle {
    font-size: 10px;
    color: var(--secondary-color);
    transition: transform 0.2s;
}

.sidebar-section.collapsed .sidebar-section-content {
    display: none;
}

.sidebar-section.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.sidebar-section-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.favorite-item,
.recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}

.favorite-item:hover,
.recent-item:hover {
    background: var(--primary-color);
    color: var(--text-inverse, #fff);
}

.fav-icon,
.recent-icon {
    font-size: 11px;
    flex-shrink: 0;
}

.fav-name,
.recent-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fav-datastore {
    font-size: 9px;
    color: var(--secondary-color);
    opacity: 0.7;
}

.favorite-item:hover .fav-datastore {
    color: var(--text-inverse, #fff);
    opacity: 0.7;
}

.fav-remove {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--secondary-color);
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
}

.fav-remove:hover {
    background: var(--bg-overlay, rgba(0,0,0,0.1));
    color: var(--text-inverse, #fff);
}

.favorite-item:hover .fav-remove {
    display: flex;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    min-height: 0; /* Important for flex children to allow scrolling */
}

.right-sidebar .sidebar-content {
    max-height: calc(100vh - 120px); /* Account for header and status bar */
}

/* Graph List */
.graph-list {
    list-style: none;
}

.graph-list li {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2px;
}

.graph-list li:hover {
    background: var(--light-color);
}

.graph-list li.active {
    background: var(--primary-color);
    color: white;
}

.graph-list li .graph-icon {
    width: 20px;
    height: 20px;
    background: var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.graph-list li.active .graph-icon {
    background: rgba(255,255,255,0.3);
}

.graph-list li .graph-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.graph-list li .graph-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graph-list li .graph-datastore {
    font-size: 10px;
    color: var(--secondary-color);
    opacity: 0.8;
}

.graph-list li.active .graph-datastore {
    color: rgba(255,255,255,0.7);
}

.graph-favorite-star {
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    padding: 2px 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.graph-favorite-star:hover {
    color: #f5a623;
    transform: scale(1.2);
}

.graph-favorite-star.favorited {
    color: #f5a623;
}

.graph-list li.active .graph-favorite-star {
    color: rgba(255,255,255,0.5);
}

.graph-list li.active .graph-favorite-star.favorited {
    color: #ffd700;
}

.graph-list li.active .graph-favorite-star:hover {
    color: #ffd700;
}

.graph-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.graph-action-btn {
    font-size: 12px;
    color: #999;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
    opacity: 0;
}

.graph-list li:hover .graph-action-btn {
    opacity: 1;
}

.graph-execute-btn:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.graph-settings-btn:hover {
    color: var(--primary-color);
    background: rgba(74, 144, 217, 0.1);
}

.graph-list li.active .graph-action-btn {
    color: rgba(255,255,255,0.6);
    opacity: 1;
}

.graph-list li.active .graph-execute-btn:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

.graph-list li.active .graph-settings-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* Main Content */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
}

/* View Panels */
.view-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: visible;
}

.view-panel.active {
    display: flex;
}

/* Canvas Toolbar */
.canvas-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border-bottom: 1px solid var(--border-color);
    height: var(--toolbar-height);
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 100;
}

.canvas-toolbar::-webkit-scrollbar {
    display: none;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 0.5rem;
}

/* Canvas Container */
.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
    background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
}

#graphCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* Panel Toolbar */
.panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border-bottom: 1px solid var(--border-color);
}

.panel-toolbar h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

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

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.schema-card {
    cursor: grab;
}

.schema-card:active {
    cursor: grabbing;
}

.schema-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.card-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--light-color);
}

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    color: white;
    font-weight: bold;
}

.card-title {
    font-weight: 600;
    font-size: 1rem;
}

.card-subtitle {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

.card-body {
    padding: 1rem;
}

.card-body p {
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
    font-size: 0.875rem;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--light-color);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #333);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

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

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

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
}

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

.btn-secondary:hover:not(:disabled) {
    background: #5a6268;
}

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

.btn-danger:hover:not(:disabled) {
    background: #c82333;
}

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

.btn-success:hover:not(:disabled) {
    background: #218838;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: inherit;
}

.btn-icon:hover {
    background: var(--light-color);
}

/* Forms */
.form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #333);
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
}

.form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--secondary-color);
    font-size: 0.75rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.settings-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.settings-tab:hover {
    background: rgba(124, 58, 237, 0.1);
}

.settings-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    font-weight: 500;
}

.settings-panel {
    animation: fadeIn 0.2s ease;
}

/* Execution Model Settings */
.execution-model-group {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.execution-model-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.execution-model-header label {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.execution-model-desc {
    font-size: 0.8rem;
    color: var(--secondary-color);
}

.execution-model-group select {
    width: 100%;
}

/* Field rows for schema fields */
.field-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.field-row input {
    flex: 1;
}

.field-row select {
    width: 150px;
}

.field-row .btn-icon {
    flex-shrink: 0;
}

/* Schema Selector in New Graph Dialog */
.schema-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.schema-option-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.schema-option-row select {
    flex: 1;
}

.schema-option-row .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.inline-schema-form {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.inline-schema-form .form-row {
    display: flex;
    gap: 1rem;
}

.inline-schema-form .form-group {
    margin-bottom: 0.75rem;
}

.form-control-color {
    height: 38px;
    padding: 0.25rem;
    cursor: pointer;
}

/* Import Schema List */
.import-schema-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    background: var(--card-bg);
}

.import-schema-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.import-schema-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.import-schema-item.selected {
    background: rgba(74, 144, 217, 0.2);
    border: 1px solid var(--primary-color);
}

.import-schema-item input[type="checkbox"] {
    margin-right: 0.75rem;
}

.import-schema-item .schema-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.import-schema-item .schema-info {
    flex: 1;
}

.import-schema-item .schema-name {
    font-weight: 500;
}

.import-schema-item .schema-fields {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 0.5rem;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
}

/* Dialogs */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.dialog-overlay.open {
    display: flex;
}

.dialog {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.dialog-lg {
    max-width: 640px;
}

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

.dialog-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
}

/* Connection Execution Settings */
.connection-execution-section {
    margin-top: 1rem;
}

.connection-execution-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.connection-execution-section .form-group {
    margin-bottom: 0.75rem;
}

.connection-execution-section small {
    display: block;
    margin-top: 0.25rem;
}

.connection-type-info {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--light-color);
}

.dialog-footer .btn-danger {
    margin-right: auto;
}

/* Dialog Tabs */
.dialog-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.dialog-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--secondary-color);
    font-size: 0.875rem;
    border-radius: 4px;
}

.dialog-tab:hover {
    background: var(--light-color);
}

.dialog-tab.active {
    color: var(--primary-color);
    font-weight: 500;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 3000;
    display: none;
}

.context-menu.open {
    display: block;
}

.context-menu ul {
    list-style: none;
    padding: 0.25rem 0;
}

.context-menu li {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.context-menu li:hover {
    background: var(--light-color);
}

.context-menu li.danger {
    color: var(--danger-color);
}

.context-menu li.separator {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
    padding: 0;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: var(--dark-color);
    color: var(--text-color);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease;
    min-width: 200px;
    max-width: 400px;
}

.toast.success {
    background: var(--success-color);
    color: #fff;
}

.toast.error {
    background: var(--danger-color);
    color: #fff;
}

.toast.warning {
    background: var(--warning-color);
    color: #1a1a1a;
}

.toast-action {
    background: none;
    border: none;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    margin-left: 8px;
    opacity: 0.9;
}
.toast-action:hover { opacity: 1; }

/* Onboarding panel */
.onboarding-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 2rem 3rem;
    background: var(--card-bg, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    z-index: 10;
    max-width: 400px;
}
.onboarding-panel h2 { margin: 0 0 0.5rem; }
.onboarding-panel p { color: var(--text-muted); margin: 0 0 1.5rem; }
.onboarding-actions { display: flex; gap: 12px; justify-content: center; }

/* WebSocket disconnect banner */
.ws-disconnect-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 16px;
    background: var(--warning-color, #f59e0b);
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
}

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

/* Utility Classes */
.text-muted {
    color: var(--secondary-color);
}

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

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

/* Properties Panel */
.properties-section {
    margin-bottom: 1rem;
}

.properties-section h4 {
    font-size: 0.75rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.property-row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.property-label {
    width: 80px;
    font-size: 0.75rem;
    color: var(--secondary-color);
}

.property-value {
    flex: 1;
    font-size: 0.875rem;
}

.property-value .code-edit-link,
.property-value a[onclick*="editNode"] {
    transition: all 0.15s ease;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--light-color);
}

.property-value .code-edit-link:hover,
.property-value a[onclick*="editNode"]:hover {
    background: var(--primary-color);
    color: white !important;
}

.property-value .code-edit-link:hover span,
.property-value a[onclick*="editNode"]:hover span {
    color: white !important;
}

/* Help Panel (shown when no node selected) */
.help-panel {
    padding: 0.5rem 0;
}

.help-section {
    margin-bottom: 1.25rem;
}

.help-section h4 {
    font-size: 0.7rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.help-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem;
    margin: 0.25rem 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.help-item:hover {
    background: var(--light-color);
}

.help-icon {
    font-size: 1rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.help-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.help-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-color);
}

.help-desc {
    font-size: 0.7rem;
    color: var(--secondary-color);
    line-height: 1.3;
}

.help-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-color);
}

.shortcut-row kbd {
    min-width: 28px;
    text-align: center;
}

.shortcut-row span {
    color: var(--secondary-color);
}

.help-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.help-hint {
    font-size: 0.7rem;
    color: var(--secondary-color);
    font-style: italic;
}

/* Deployment Indicator */
.deployment-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-transform: uppercase;
    animation: live-pulse 2s ease-in-out infinite;
}

.live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: live-dot 1s ease-in-out infinite;
}

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

@keyframes live-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
}

.deployment-indicator .btn-icon {
    padding: 4px 6px;
    font-size: 0.85rem;
}

/* Checkbox group styling */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Deployment status card */
.deployment-status-card {
    transition: all 0.2s ease;
}

/* SSO Providers */
.sso-providers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sso-btn:hover {
    background: var(--light-color);
    border-color: var(--primary-color);
}

.sso-btn .sso-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.sso-btn.sso-google {
    border-color: #4285F4;
}
.sso-btn.sso-google:hover {
    background: #4285F410;
}
.sso-btn.sso-google .sso-icon {
    color: #4285F4;
}

.sso-btn.sso-github {
    border-color: #333;
}
.sso-btn.sso-github:hover {
    background: #33333310;
}
.sso-btn.sso-github .sso-icon {
    color: #333;
}

.sso-btn.sso-microsoft {
    border-color: #00A4EF;
}
.sso-btn.sso-microsoft:hover {
    background: #00A4EF10;
}
.sso-btn.sso-microsoft .sso-icon {
    color: #00A4EF;
}

.sso-btn.sso-apple {
    border-color: #000;
}
.sso-btn.sso-apple:hover {
    background: #00000010;
}
.sso-btn.sso-apple .sso-icon {
    color: #000;
}

.sso-btn.sso-facebook {
    border-color: #1877F2;
}
.sso-btn.sso-facebook:hover {
    background: #1877F210;
}
.sso-btn.sso-facebook .sso-icon {
    color: #1877F2;
}

.sso-btn.sso-linkedin {
    border-color: #0A66C2;
}
.sso-btn.sso-linkedin:hover {
    background: #0A66C210;
}
.sso-btn.sso-linkedin .sso-icon {
    color: #0A66C2;
}

.sso-btn.sso-discord {
    border-color: #5865F2;
}
.sso-btn.sso-discord:hover {
    background: #5865F210;
}
.sso-btn.sso-discord .sso-icon {
    color: #5865F2;
}

.sso-btn.sso-gitlab {
    border-color: #FC6D26;
}
.sso-btn.sso-gitlab:hover {
    background: #FC6D2610;
}
.sso-btn.sso-gitlab .sso-icon {
    color: #FC6D26;
}

.sso-btn.sso-twitter {
    border-color: #000;
}
.sso-btn.sso-twitter:hover {
    background: #00000010;
}
.sso-btn.sso-twitter .sso-icon {
    color: #000;
}

.sso-btn.sso-slack {
    border-color: #4A154B;
}
.sso-btn.sso-slack:hover {
    background: #4A154B10;
}
.sso-btn.sso-slack .sso-icon {
    color: #4A154B;
}

.sso-btn.sso-okta {
    border-color: #007DC1;
}
.sso-btn.sso-okta:hover {
    background: #007DC110;
}
.sso-btn.sso-okta .sso-icon {
    color: #007DC1;
}

.sso-btn.sso-auth0 {
    border-color: #EB5424;
}
.sso-btn.sso-auth0:hover {
    background: #EB542410;
}
.sso-btn.sso-auth0 .sso-icon {
    color: #EB5424;
}

.sso-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1rem 0;
    color: var(--secondary-color);
    font-size: 0.8rem;
}

.sso-divider::before,
.sso-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.sso-divider span {
    padding: 0 0.75rem;
}

/* Dark mode SSO buttons */
[data-theme="dark"] .sso-btn.sso-github {
    border-color: #aaa;
}
[data-theme="dark"] .sso-btn.sso-github .sso-icon {
    color: #fff;
}
[data-theme="dark"] .sso-btn.sso-apple {
    border-color: #fff;
}
[data-theme="dark"] .sso-btn.sso-apple .sso-icon {
    color: #fff;
}
[data-theme="dark"] .sso-btn.sso-twitter {
    border-color: #fff;
}
[data-theme="dark"] .sso-btn.sso-twitter .sso-icon {
    color: #fff;
}

/* CORS Origins List */
.cors-origins-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.5rem;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.cors-origin-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: monospace;
}

.cors-origin-tag.default {
    background: var(--primary-color)15;
    border-color: var(--primary-color)40;
}

.cors-origin-tag .remove-origin {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 2px;
}

.cors-origin-tag .remove-origin:hover {
    opacity: 1;
    color: var(--danger-color);
}

/* Connect Mode Indicator */
.connect-mode .canvas-container {
    cursor: crosshair;
}

.connect-mode #btnConnectMode {
    background: var(--primary-color);
    color: white;
}

/* Node Styles (for canvas rendering reference) */
.node {
    position: absolute;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: move;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.node.selected {
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3);
}

.node-header {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.node-type {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

/* Loading State */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--secondary-color);
}

.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 0.5rem;
}

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--secondary-color);
}

.empty-state h3 {
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

/* Search box in nav */
.nav-search {
    flex: 0 1 200px;
    min-width: 100px;
}

.nav-search input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 0.375rem 0.75rem;
}

.nav-search input::placeholder {
    color: rgba(255,255,255,0.5);
}

.nav-search input:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--primary-color);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 140px;
    z-index: 1000;
    display: none;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu.open {
    display: block;
}

.dropdown-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
}

.dropdown-menu button:hover {
    background: var(--light-color);
}

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

.saved-layout-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 1rem;
    gap: 6px;
}

.saved-layout-item .saved-layout-name {
    flex: 1;
    cursor: pointer;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-layout-item .saved-layout-name:hover {
    color: var(--primary-color);
}

.saved-layout-item .saved-layout-delete {
    cursor: pointer;
    opacity: 0.4;
    font-size: 0.75rem;
    flex-shrink: 0;
    padding: 2px 4px;
    border-radius: 3px;
}

.saved-layout-item .saved-layout-delete:hover {
    opacity: 1;
    background: var(--danger-color, #ef4444);
    color: white;
}

/* Search Results Panel */
.search-results-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-height: 400px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    display: none;
    margin: 0.5rem;
    overflow: hidden;
}

.search-results-panel.open {
    display: block;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--light-color);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.875rem;
}

#searchResultsList {
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
}

#searchResultsList li {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

#searchResultsList li:hover {
    background: var(--light-color);
}

#searchResultsList li .node-name {
    font-weight: 500;
}

#searchResultsList li .node-type {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

/* Minimap */
.minimap {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 180px;
    height: 120px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
    z-index: 100;
}

.minimap canvas {
    width: 100%;
    height: 100%;
}

.minimap-viewport {
    position: absolute;
    border: 2px solid var(--primary-color);
    background: rgba(74, 144, 217, 0.1);
    pointer-events: none;
}

/* Grid Overlay */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Data Tables */
.table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th,
.data-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.data-table th {
    background: var(--light-color);
    font-weight: 600;
    white-space: nowrap;
}

.data-table tr:hover {
    background: rgba(74, 144, 217, 0.05);
}

.data-table.editable input {
    width: 100%;
    border: 1px solid transparent;
    padding: 0.25rem;
    font-size: inherit;
}

.data-table.editable input:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Button Group */
.btn-group {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.btn-group .btn {
    flex: 1;
    min-width: 80px;
}

/* Dialog XL size */
.dialog-xl {
    max-width: 900px;
}

/* Dialog with code editor - allow dynamic sizing */
.dialog.dialog-code {
    max-width: calc(100vw - 600px); /* Leave room for sidebars */
    width: auto !important;
    min-width: 500px;
    transition: width 0.2s ease;
}

.dialog.dialog-code .dialog-body {
    overflow-x: auto;
    overflow-y: auto;
}

.dialog.dialog-code .form-group {
    min-width: 0;
}

.dialog.dialog-code .code-editor-wrapper {
    max-width: 100%;
}

/* Filter/Report/Share list items */
.filter-list,
.report-list,
.share-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.filter-list .filter-item,
.report-list .report-item,
.share-list .share-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.filter-list .filter-item:hover,
.report-list .report-item:hover,
.share-list .share-item:hover {
    background: var(--light-color);
}

.filter-item .filter-name,
.report-item .report-name,
.share-item .share-email {
    font-weight: 500;
}

.filter-item .filter-actions,
.report-item .report-actions,
.share-item .share-actions {
    display: flex;
    gap: 0.25rem;
}

/* Keyboard shortcuts indicator */
kbd {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.75rem;
    font-family: monospace;
}

/* Node selection rectangle */
.selection-rect {
    position: absolute;
    border: 1px dashed var(--primary-color);
    background: rgba(74, 144, 217, 0.1);
    pointer-events: none;
}

/* Connection points animation */
.conn-point {
    transition: r 0.2s, fill 0.2s;
}

.conn-point:hover {
    r: 8;
    fill: var(--primary-dark);
}

/* Color palette for style picker */
.color-palette {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.color-btn {
    width: 32px;
    height: 32px;
    border: 2px solid white;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.color-btn:hover {
    transform: scale(1.1);
}

/* Help table */
.help-table {
    width: 100%;
    margin-bottom: 1rem;
}

.help-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.help-table td:first-child {
    width: 200px;
    white-space: nowrap;
}

/* Full screen mode */
body.fullscreen .top-nav,
body.fullscreen .left-sidebar {
    display: none !important;
}

body.fullscreen .main-container {
    margin-top: 0 !important;
    height: 100vh !important;
}

/* Connection line selected state */
.connection-line.selected {
    stroke-dasharray: none;
    animation: connectionPulse 1s ease-in-out infinite;
}

@keyframes connectionPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Animated connection flow */
.connection-line {
    transition: stroke-opacity var(--transition-fast), stroke-width var(--transition-fast);
}

.connection-line.flowing {
    stroke-dasharray: 8, 4;
    animation: connectionFlow 2s linear infinite;
}

.connection-line.active {
    stroke-width: 2.5;
    filter: url(#node-glow);
}

@keyframes connectionFlow {
    to { stroke-dashoffset: -12; }
}

/* Node visual tiers */
.node-group.tier-hub .node-rect {
    filter: url(#node-ambient);
    stroke-width: 2;
}

.node-group.tier-important .node-rect {
    filter: url(#node-glow);
}

.node-group.tier-connected .node-rect {
    filter: url(#node-shadow);
}

.node-group:hover .node-rect {
    filter: url(#node-glow);
    transition: filter var(--transition-base);
}

.node-group:hover {
    cursor: pointer;
}

/* Toolbar overflow handling */
.canvas-toolbar {
    flex-wrap: nowrap;
    height: var(--toolbar-height);
    overflow: visible;
    position: relative;
    z-index: 1000;
}

/* Ensure dropdowns in toolbar overlay the canvas */
.canvas-toolbar .dropdown {
    position: relative;
}

.canvas-toolbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10000;
}

/* Tooltips should appear above and overlay */
.canvas-toolbar [data-tooltip]::after,
.canvas-toolbar [data-tooltip]::before {
    z-index: 10001;
}

/* Fullscreen button */
#btnFullScreen {
    font-size: 1rem;
    line-height: 1;
}

/* Text box annotations */
.textbox-group {
    cursor: move;
}

.textbox-rect {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.textbox-text {
    pointer-events: none;
}

/* Dashboard overlay */
.dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 1000px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

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

.dashboard-search {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
    overflow-y: auto;
}

.dashboard-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-card-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.dashboard-card-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dashboard-card-meta {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

/* Icon selector grid */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-option:hover {
    border-color: var(--primary-color);
    background: var(--light-color);
}

.icon-option.selected {
    border-color: var(--primary-color);
    background: rgba(74, 144, 217, 0.1);
}

.icon-preview {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.icon-name {
    font-size: 0.7rem;
    color: var(--secondary-color);
    margin-top: 0.25rem;
}

/* Toolbar scrollable on small screens - but preserve dropdown visibility */
.canvas-toolbar {
    white-space: nowrap;
    /* Don't set overflow-x: auto here as it clips dropdown menus */
}

.canvas-toolbar .btn {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: var(--nav-height);
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
    }

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

    .right-sidebar {
        transform: translateX(100%);
    }

    .nav-tabs {
        display: none;
    }
}

/* Command Palette */
.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

.command-palette {
    background: var(--card-bg, white);
    border-radius: 8px;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    animation: paletteSlide 0.15s ease-out;
}

@keyframes paletteSlide {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.command-palette-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1rem;
    background: transparent;
    color: var(--text-color, #333);
    outline: none;
}

.command-palette-input::placeholder {
    color: var(--secondary-color);
}

.command-palette-results {
    max-height: 300px;
    overflow-y: auto;
}

.command-palette-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.1s;
}

.command-palette-item:hover,
.command-palette-item.selected {
    background: var(--primary-color);
    color: white;
}

.command-name {
    font-weight: 500;
}

.command-shortcut {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-family: monospace;
}

.command-palette-item.selected .command-shortcut,
.command-palette-item:hover .command-shortcut {
    background: rgba(255, 255, 255, 0.2);
}

.command-palette-empty {
    padding: 1rem 1.25rem;
    text-align: center;
    color: var(--secondary-color);
}

/* Tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.625rem;
    background: var(--dark-color);
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10001;
    pointer-events: none;
    margin-bottom: 5px;
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10001;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Touch-Friendly Hit Areas */
@media (pointer: coarse) {
    .btn,
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 0.625rem 1rem;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    .nav-tab {
        padding: 0.75rem 1.25rem;
    }

    .context-menu li {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    .graph-list li {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    .node-group {
        touch-action: none;
    }

    /* Larger connection points for touch */
    .conn-point {
        r: 10;
    }
}

/* Gesture Hints Overlay */
.gesture-hints-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gesture-hints-content {
    background: var(--card-bg, white);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.gesture-hints-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.gesture-hint {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--light-color);
    margin-bottom: 0.75rem;
}

.gesture-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gesture-text {
    flex: 1;
    text-align: left;
}

.gesture-action {
    font-weight: 500;
    color: var(--text-color);
}

.gesture-description {
    font-size: 0.75rem;
    color: var(--secondary-color);
}

.gesture-hints-close {
    margin-top: 1.5rem;
    padding: 0.75rem 2rem;
}

/* Keyboard Shortcut Hint */
.shortcut-hint {
    position: fixed;
    bottom: calc(var(--status-bar-height) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: var(--dark-color);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.shortcut-hint.visible {
    opacity: 1;
    visibility: visible;
}

/* Dark mode adjustments for command palette */
[data-theme="dark"] .command-palette {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .command-palette-input {
    color: var(--text-color);
}

[data-theme="dark"] .command-shortcut {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] [data-tooltip]::after {
    background: #e5e7eb;
    color: #1f2937;
}

[data-theme="dark"] [data-tooltip]::before {
    border-top-color: #e5e7eb;
}

/* ========================================
   Ops Panel Styles
   ======================================== */

/* Sidebar Tabs */
.sidebar-tabs {
    display: flex;
    gap: 0.25rem;
    flex: 1;
}

.sidebar-tab {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--secondary-color);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.sidebar-tab:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.sidebar-tab.active {
    background: var(--primary-color);
    color: white;
}

.sidebar-panel {
    display: none;
}

.sidebar-panel.active {
    display: block;
    height: 100%;
    overflow-y: auto;
}

/* Ops Sections */
.ops-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.ops-section:last-child {
    border-bottom: none;
}

.ops-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

/* Status Badges */
.status-badge-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.badge-loading {
    background: var(--light-color);
    color: var(--secondary-color);
}

/* Op Details */
.op-details {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--light-color);
    border-radius: 4px;
}

.op-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--secondary-color);
}

/* Ops Actions */
.ops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ops-actions .btn {
    flex: 1;
    min-width: calc(50% - 0.25rem);
}

/* Input Group */
.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group .form-control {
    flex: 1;
}

.input-group .btn {
    flex-shrink: 0;
}

/* ArXiv Results */
.arxiv-results {
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.arxiv-result {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.arxiv-result:hover {
    background: var(--hover-bg);
}

.arxiv-result-title {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.arxiv-result-id {
    color: var(--primary-color);
    font-family: monospace;
}

.arxiv-result-authors {
    color: var(--secondary-color);
    font-size: 0.7rem;
}

/* Execution Status */
.execution-status {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.execution-status.running {
    background: #fef3c7;
    color: #92400e;
}

.execution-status.success {
    background: #d1fae5;
    color: #065f46;
}

.execution-status.error {
    background: #fee2e2;
    color: #991b1b;
}

/* Remote Systems List */
.remote-systems-list {
    margin-top: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.remote-system-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
}

.remote-system-item .system-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-color);
    border-radius: 4px;
    font-size: 0.875rem;
}

.remote-system-item .system-info {
    flex: 1;
}

.remote-system-item .system-name {
    font-weight: 500;
    color: var(--text-color);
}

.remote-system-item .system-details {
    color: var(--secondary-color);
    font-size: 0.7rem;
}

.remote-system-item .system-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.remote-system-item .system-status.offline {
    background: #ef4444;
}

/* Dark mode for Ops Panel */
[data-theme="dark"] .badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] .badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .op-details,
[data-theme="dark"] .badge-loading {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .arxiv-result:hover,
[data-theme="dark"] .remote-system-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .execution-status.running {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .execution-status.success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .execution-status.error {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* ============= AUTH & SHARE STYLES ============= */

/* Nav separator */
.nav-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 0.5rem;
}

/* User account button */
.btn-user {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
}

.user-avatar {
    font-weight: bold;
    font-size: 14px;
}

/* User menu dropdown */
.user-menu {
    position: fixed;
    top: var(--nav-height);
    right: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1001;
}

.user-menu .user-info {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

.user-menu ul {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.user-menu li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.user-menu li:hover {
    background: var(--light-color);
}

.user-menu li.separator {
    height: 1px;
    background: var(--border-color);
    padding: 0;
    margin: 0.5rem 0;
}

.user-menu li.danger {
    color: var(--danger-color);
}

/* Share dialog styles */
.share-invite-table {
    width: 100%;
    border-collapse: collapse;
}

.share-invite-table th,
.share-invite-table td {
    padding: 0.5rem;
    text-align: left;
}

.share-invite-table th {
    font-weight: 500;
    color: var(--secondary-color);
    font-size: 0.85rem;
}

.share-invite-row td:first-child {
    width: 50%;
}

.share-invite-row td:last-child {
    width: 40px;
    text-align: center;
}

.share-list {
    max-height: 300px;
    overflow-y: auto;
}

.share-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.share-item:last-child {
    border-bottom: none;
}

.share-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-email {
    font-weight: 500;
}

.share-permission {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.share-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share-permission-select {
    width: auto;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

/* Permission badges */
.badge-view { background: #e9ecef; color: #495057; }
.badge-edit { background: #d4edda; color: #155724; }
.badge-user { background: #cce5ff; color: #004085; }
.badge-builder { background: #fff3cd; color: #856404; }
.badge-owner { background: #f8d7da; color: #721c24; }

/* Auth dialogs */
.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--primary-dark);
}

/* Organization styles */
.org-list {
    max-height: 300px;
    overflow-y: auto;
}

.org-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.org-item:last-child {
    border-bottom: none;
}

.org-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.org-name {
    font-weight: 500;
}

.org-role {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--primary-color);
    color: white;
}

/* Dark mode adjustments for auth */
[data-theme="dark"] .user-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .user-menu li:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .error-message {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] .badge-view { background: rgba(108, 117, 125, 0.3); color: #adb5bd; }
[data-theme="dark"] .badge-edit { background: rgba(40, 167, 69, 0.3); color: #28a745; }
[data-theme="dark"] .badge-user { background: rgba(0, 123, 255, 0.3); color: #007bff; }
[data-theme="dark"] .badge-builder { background: rgba(255, 193, 7, 0.3); color: #ffc107; }
[data-theme="dark"] .badge-owner { background: rgba(220, 53, 69, 0.3); color: #dc3545; }

/* ============= NODE TYPE TOOL GRID ============= */

.tool-grid {
    position: absolute;
    left: 10px;
    top: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 60px;
    max-width: 280px;
    overflow: visible;
    transition: all 0.2s ease;
}

.tool-grid.collapsed {
    min-width: 40px;
    max-width: 40px;
}

.tool-grid.collapsed .tool-grid-items {
    display: none;
}

.tool-grid.collapsed .tool-grid-header span {
    display: none;
}

.tool-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--light-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
}

.tool-grid-header .btn-xs {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
}

.tool-grid-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.tool-grid-items::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.tool-grid-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    border: 2px solid transparent;
    min-width: fit-content;
    white-space: nowrap;
}

.tool-grid-item:hover {
    background: var(--light-color);
}

.tool-grid-item.selected {
    border-color: var(--primary-color);
    background: rgba(74, 144, 217, 0.1);
}

.tool-grid-item .tool-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tool-grid-item .tool-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-grid-item .tool-icon.icon-circle {
    border-radius: 50%;
}

.tool-grid-item .tool-icon.icon-diamond {
    transform: rotate(45deg);
    border-radius: 4px;
}

.tool-grid-item .tool-icon.icon-diamond span {
    transform: rotate(-45deg);
}

.tool-grid-item .tool-icon.icon-triangle {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid currentColor;
    background: none !important;
}

/* Tooltip for tool grid items - disabled since name is now visible */
/* .tool-grid-item::after { ... } */

/* Empty state */
.tool-grid-empty {
    padding: 12px;
    text-align: center;
    color: var(--secondary-color);
    font-size: 11px;
}

/* Dark mode */
[data-theme="dark"] .tool-grid {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .tool-grid-header {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .tool-grid-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tool-grid-item.selected {
    background: rgba(74, 144, 217, 0.2);
}

/* Tool Grid Drag and Drop */
.tool-grid-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.tool-grid-item[draggable="true"] {
    cursor: grab;
}

.tool-grid-item[draggable="true"]:active {
    cursor: grabbing;
}

#canvas.drag-over {
    background: rgba(74, 144, 217, 0.1);
    outline: 2px dashed var(--primary-color);
    outline-offset: -2px;
}

/* ============= KGGEN CONTROLS PANEL ============= */

.kggen-controls {
    position: absolute;
    right: 10px;
    top: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    width: 220px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.kggen-controls.collapsed .controls-body {
    display: none;
}

.kggen-controls.collapsed {
    width: auto;
    min-width: 100px;
}

.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--primary-color);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.controls-header .btn-xs {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
}

.controls-header .btn-xs:hover {
    background: rgba(255, 255, 255, 0.3);
}

.controls-body {
    padding: 8px;
}

.controls-section {
    margin-bottom: 12px;
}

.controls-section:last-child {
    margin-bottom: 0;
}

.control-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Stats Panel */
.stats-panel {
    padding: 8px;
    background: var(--light-color);
    border-radius: 6px;
    margin-bottom: 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}

.stat-box {
    padding: 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.stat-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--secondary-color);
    letter-spacing: 0.3px;
}

/* Type Filters */
.type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.type-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--light-color);
    color: var(--text-color);
    transition: all 0.15s ease;
}

.type-filter-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.type-filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.type-filter-btn .type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.type-filter-btn .type-count {
    font-size: 10px;
    opacity: 0.8;
}

/* Layout Buttons */
.layout-buttons {
    display: flex;
    gap: 4px;
}

.layout-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--light-color);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

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

/* Range Sliders */
.kggen-controls input[type="range"] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.kggen-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.kggen-controls input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.kggen-controls input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

/* kggen theme specific controls styling */
[data-theme="kggen"] .kggen-controls {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
}

[data-theme="kggen"] .controls-header {
    background: var(--accent-gradient);
}

[data-theme="kggen"] .stats-panel {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="kggen"] .stat-value {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="kggen"] .type-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="kggen"] .type-filter-btn:hover,
[data-theme="kggen"] .type-filter-btn.active {
    background: var(--accent-gradient);
    border-color: transparent;
}

[data-theme="kggen"] .layout-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="kggen"] .layout-btn:hover,
[data-theme="kggen"] .layout-btn.active {
    background: var(--accent-gradient);
    border-color: transparent;
}

[data-theme="kggen"] .kggen-controls input[type="range"] {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="kggen"] .kggen-controls input[type="range"]::-webkit-slider-thumb {
    background: var(--accent-gradient);
}

/* Dark theme controls */
[data-theme="dark"] .kggen-controls {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .stats-panel {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .type-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

[data-theme="dark"] .layout-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

/* ========== OMEGA SYSTEM STYLES ========== */

/* Depth Meter */
.depth-meter {
    position: relative;
    height: 20px;
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.depth-bar {
    height: 100%;
    background: linear-gradient(90deg,
        #00d4ff 0%,
        #7c3aed 30%,
        #f472b6 60%,
        #fb923c 80%,
        #ef4444 100%);
    transition: width 0.5s ease;
    border-radius: 10px;
}

.depth-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Depth Breakdown Pills */
.depth-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 0 6px;
    font-size: 9px;
    font-weight: bold;
    border-radius: 9px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.depth-pill:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.depth-pill.depth-0 { background: #3b82f6; }
.depth-pill.depth-1 { background: #8b5cf6; }
.depth-pill.depth-2 { background: #a855f7; }
.depth-pill.depth-3 { background: #d946ef; }
.depth-pill.depth-4 { background: #ec4899; }
.depth-pill.depth-5 { background: #f43f5e; }
.depth-pill.depth-6 { background: #ef4444; }
.depth-pill.depth-7 { background: #f97316; }
.depth-pill.depth-8 { background: #eab308; }
.depth-pill.depth-9 { background: #84cc16; }
.depth-pill.depth-10 { background: #22c55e; }

/* Omega Section */
.omega-system-section {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
}

.omega-system-section h4 {
    color: #a855f7;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.omega-system-section h4::before {
    content: "Ω";
    font-size: 14px;
}

/* Emergence Section */
.emergence-section {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
}

.emergence-section h4 {
    color: #f59e0b;
    margin-bottom: 8px;
}

.emergence-alerts {
    max-height: 150px;
    overflow-y: auto;
}

.emergence-alert-item {
    background: rgba(234, 179, 8, 0.15);
    border-left: 3px solid #f59e0b;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 0 4px 4px 0;
    font-size: 11px;
}

.emergence-alert-item .alert-type {
    font-weight: bold;
    color: #f59e0b;
}

.emergence-alert-item .alert-confidence {
    float: right;
    font-size: 10px;
    color: var(--secondary-color);
}

/* Hierarchy Tree Dialog */
#hierarchyTree {
    background: var(--canvas-bg);
    border-radius: 8px;
}

.tree-node {
    cursor: pointer;
}

.tree-node circle {
    fill: var(--primary-color);
    stroke: white;
    stroke-width: 2px;
}

.tree-node text {
    font-size: 11px;
    fill: var(--text-color);
}

.tree-link {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 1.5px;
}

/* Toast Notifications */
.toast {
    min-width: 280px;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-top: 10px;
    animation: slideIn 0.3s ease;
    overflow: hidden;
}

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

.toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.toast-body {
    padding: 12px;
    font-size: 11px;
    color: var(--text-color);
}

.toast-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

/* Button variants */
.btn-xs {
    padding: 2px 6px;
    font-size: 10px;
}

.btn-block {
    width: 100%;
}

/* ========================================
   Activity Panel Styles
   ======================================== */

.activity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.activity-header h4 {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.activity-stats .stat-item {
    text-align: center;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 4px;
}

.activity-stats .stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.activity-stats .stat-value.stat-success {
    color: var(--success-color);
}

.activity-stats .stat-value.stat-failed {
    color: var(--danger-color);
}

.activity-stats .stat-label {
    font-size: 10px;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.activity-feed {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.activity-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.activity-item:hover {
    background: rgba(74, 144, 217, 0.05);
}

.activity-item .activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-item .activity-icon.success {
    background: rgba(40, 167, 69, 0.15);
    color: var(--success-color);
}

.activity-item .activity-icon.failed {
    background: rgba(220, 53, 69, 0.15);
    color: var(--danger-color);
}

.activity-item .activity-content {
    flex: 1;
    min-width: 0;
}

.activity-item .activity-description {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item .activity-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 10px;
    color: var(--secondary-color);
    margin-top: 2px;
}

.activity-item .activity-meta .activity-type {
    background: rgba(74, 144, 217, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--primary-color);
}

.activity-item .activity-location {
    font-size: 10px;
    color: var(--secondary-color);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
}

.activity-item[data-graph-id]:hover .activity-location {
    color: var(--primary-color);
}

/* Executions List in Activity Panel */
.executions-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.execution-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12px;
}

.execution-item:hover {
    background: rgba(74, 144, 217, 0.08);
}

.execution-item .exec-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.execution-item .exec-status-dot.running {
    background: var(--primary-color);
    animation: exec-pulse 1.2s infinite;
}

.execution-item .exec-status-dot.completed { background: var(--success-color); }
.execution-item .exec-status-dot.failed { background: var(--danger-color); }
.execution-item .exec-status-dot.cancelled { background: var(--secondary-color); }

@keyframes exec-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.execution-item .exec-info {
    flex: 1;
    min-width: 0;
}

.execution-item .exec-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
}

.execution-item .exec-meta {
    font-size: 10px;
    color: var(--secondary-color);
}

.execution-item .exec-progress {
    font-size: 10px;
    color: var(--secondary-color);
    white-space: nowrap;
}

/* Execution Detail Dialog */
.exec-detail-dialog {
    width: 700px;
    max-width: 90vw;
    max-height: 80vh;
}

.exec-detail-dialog .exec-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.exec-detail-dialog .exec-summary .badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.exec-node-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.exec-node-tab {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
}

.exec-node-tab.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.exec-node-tab.status-completed { border-left: 3px solid var(--success-color); }
.exec-node-tab.status-failed { border-left: 3px solid var(--danger-color); }

.exec-detail-section {
    margin-bottom: 12px;
}

.exec-detail-section h5 {
    font-size: 12px;
    margin: 0 0 4px 0;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exec-code-block {
    background: #1a1a2e;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 11px;
    max-height: 250px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: #e0e0e0;
}

/* Code Editor for code/src fields */
.code-field-group {
    margin-bottom: 1rem;
}

.code-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.code-field-header label {
    margin: 0;
    font-weight: 600;
}

.code-field-actions {
    display: flex;
    gap: 4px;
}

.code-field-actions .btn-xs {
    padding: 2px 6px;
    font-size: 11px;
}

.code-field-actions .btn-claude {
    background: linear-gradient(135deg, #10a37f, #0d8a6a);
    color: white;
    border: none;
}

.code-field-actions .btn-claude:hover {
    background: linear-gradient(135deg, #0d8a6a, #0a7358);
    transform: scale(1.05);
}

/* Data Source Configuration */
.field-data-source {
    display: inline-flex;
}

.field-header-with-source {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.field-header-with-source label {
    margin-bottom: 0;
}

.data-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 10px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--secondary-color);
}

.data-source-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.data-source-btn.configured {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.data-source-btn.configured:hover {
    background: #10b981;
    color: white;
}

.data-source-icon {
    font-size: 11px;
}

.data-source-label {
    font-weight: 500;
}

.fallback-order {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--light-color);
    border-radius: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.code-editor-wrapper {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #1e1e2e;
    overflow: hidden;
    min-width: 400px;
    transition: width 0.2s ease;
}

.code-editor-wrapper.expanded {
    height: calc(100vh - 120px);
}

.code-line-numbers {
    padding: 8px 8px 8px 12px;
    background: #16162a;
    color: #666;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
    user-select: none;
    border-right: 1px solid #333;
    min-width: 40px;
    overflow: hidden;
    white-space: pre;
}

.code-editor {
    flex: 1;
    padding: 8px 12px;
    background: #1e1e2e;
    color: #e0e0e0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    border: none;
    outline: none;
    resize: none;
    min-height: 150px;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
}

.code-editor:focus {
    box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.3);
}

/* Code Editor Modal */
.code-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.code-editor-modal-content {
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    background: var(--card-bg, #1a1a2e);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.code-editor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: white;
    font-weight: 600;
}

.code-editor-modal-actions {
    display: flex;
    gap: 8px;
}

.code-editor-modal-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
}

.code-editor-modal-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.code-editor-modal-body {
    flex: 1;
    padding: 16px;
    overflow: hidden;
}

.code-editor-modal-body .code-editor-wrapper {
    height: 100%;
}

.code-editor-modal-body .code-editor {
    height: 100%;
    min-height: unset;
}

.activity-chart-container {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.activity-chart-container h5 {
    margin: 0 0 0.5rem 0;
    font-size: 11px;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.activity-chart {
    height: 60px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.activity-chart .bar {
    flex: 1;
    background: var(--primary-color);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.activity-chart .bar:hover {
    background: var(--primary-dark);
}

/* ========================================
   Audit Log Viewer Styles
   ======================================== */

.dialog-xl {
    max-height: 90vh;
}

.audit-log-filters {
    padding: 1rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
}

.audit-log-filters .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.audit-log-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.audit-log-filters .filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.audit-log-filters .filter-group select,
.audit-log-filters .filter-group input {
    min-width: 140px;
}

.audit-log-filters .filter-actions {
    flex-direction: row;
    align-items: center;
    margin-left: auto;
}

.audit-log-summary {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.audit-log-summary .summary-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audit-log-summary .stat-number {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.audit-log-summary .stat-number.success {
    color: var(--success-color);
}

.audit-log-summary .stat-number.failed {
    color: var(--danger-color);
}

.audit-log-summary .stat-label {
    font-size: 12px;
    color: var(--secondary-color);
}

.audit-log-table-container {
    background: var(--card-bg);
}

.audit-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.audit-log-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-color);
    z-index: 1;
}

.audit-log-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 10px;
    border-bottom: 2px solid var(--border-color);
}

.audit-log-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.audit-log-table tbody tr:hover {
    background: rgba(74, 144, 217, 0.05);
}

.audit-log-table .status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.audit-log-table .status-badge.success {
    background: rgba(40, 167, 69, 0.15);
    color: var(--success-color);
}

.audit-log-table .status-badge.failed {
    background: rgba(220, 53, 69, 0.15);
    color: var(--danger-color);
}

.audit-log-table .details-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--secondary-color);
    font-family: monospace;
    font-size: 11px;
}

.audit-log-table .details-cell:hover {
    white-space: normal;
    word-break: break-all;
}

.audit-log-table .timestamp {
    color: var(--secondary-color);
    font-family: monospace;
    font-size: 11px;
}

.audit-log-table .action-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-color);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

.audit-log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.audit-log-pagination span {
    font-size: 12px;
    color: var(--secondary-color);
}

/* Resource type colors */
.resource-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.resource-badge.node { background: #e3f2fd; color: #1976d2; }
.resource-badge.graph { background: #f3e5f5; color: #7b1fa2; }
.resource-badge.schema { background: #e8f5e9; color: #388e3c; }
.resource-badge.connection { background: #fff3e0; color: #f57c00; }
.resource-badge.user { background: #fce4ec; color: #c2185b; }
.resource-badge.datastore { background: #e0f7fa; color: #0097a7; }
.resource-badge.op { background: #ede7f6; color: #512da8; }
.resource-badge.share { background: #fff8e1; color: #ffa000; }

[data-theme="dark"] .resource-badge.node { background: #1e3a5f; color: #64b5f6; }
[data-theme="dark"] .resource-badge.graph { background: #4a1c5c; color: #ba68c8; }
[data-theme="dark"] .resource-badge.schema { background: #1b3d25; color: #81c784; }
[data-theme="dark"] .resource-badge.connection { background: #4a2c00; color: #ffb74d; }
[data-theme="dark"] .resource-badge.user { background: #3d1a27; color: #f48fb1; }
[data-theme="dark"] .resource-badge.datastore { background: #003d4d; color: #4dd0e1; }
[data-theme="dark"] .resource-badge.op { background: #2a1a4d; color: #b39ddb; }
[data-theme="dark"] .resource-badge.share { background: #4a3800; color: #ffd54f; }

/* ============================================
   Workflow Panel Styles
   ============================================ */

#workflowPanel {
    padding: 0;
    overflow-y: auto;
}

.workflow-section {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.workflow-section:last-child {
    border-bottom: none;
}

.workflow-section h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.workflow-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.workflow-section-header h4 {
    margin: 0;
}

.workflow-list {
    max-height: 180px;
    overflow-y: auto;
}

.workflow-list .empty-state {
    text-align: center;
    color: var(--secondary-color);
    font-size: 12px;
    padding: 16px 8px;
}

/* Favorite Items */
.favorite-item,
.recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.favorite-item:hover,
.recent-item:hover {
    background: var(--hover-color);
}

.favorite-icon,
.recent-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.favorite-name,
.recent-name {
    flex: 1;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove-favorite {
    opacity: 0;
    transition: opacity 0.2s;
}

.favorite-item:hover .btn-remove-favorite {
    opacity: 1;
}

.recent-count {
    font-size: 10px;
    color: var(--secondary-color);
    background: var(--bg-color);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.quick-actions-grid .btn {
    font-size: 11px;
    padding: 6px 8px;
    text-align: left;
    justify-content: flex-start;
}

/* Favorite Button in Toolbar */
.btn-favorite {
    font-size: 16px;
    color: var(--secondary-color);
    transition: color 0.2s, transform 0.2s;
}

.btn-favorite:hover {
    color: #ffc107;
    transform: scale(1.1);
}

.btn-favorite.active {
    color: #ffc107;
}

/* Dropdown menu right alignment */
.dropdown-menu-right {
    right: 0;
    left: auto;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.2s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--secondary-color);
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-color);
}

.modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
}

/* Form styling in modals */
.modal-body .form-group {
    margin-bottom: 12px;
}

.modal-body .form-group:last-child {
    margin-bottom: 0;
}

.modal-body .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
}

.modal-body .form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-color);
    color: var(--text-color);
}

.modal-body .form-control:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.modal-body textarea.form-control {
    resize: vertical;
    min-height: 60px;
}

/* Template and Snapshot cards */
.template-card:hover {
    background: var(--hover-color) !important;
    transform: translateY(-2px);
    transition: all 0.2s;
}

/* Stats dialog styling */
.stat-card {
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

/* Additional workflow badges */
.resource-badge.favorite { background: #fff8e1; color: #f9a825; }
.resource-badge.template { background: #e8eaf6; color: #3f51b5; }
.resource-badge.snapshot { background: #efebe9; color: #6d4c41; }
.resource-badge.saved_search { background: #e1f5fe; color: #0288d1; }

[data-theme="dark"] .resource-badge.favorite { background: #4a3800; color: #ffd54f; }
[data-theme="dark"] .resource-badge.template { background: #1a237e; color: #7986cb; }
[data-theme="dark"] .resource-badge.snapshot { background: #3e2723; color: #a1887f; }
[data-theme="dark"] .resource-badge.saved_search { background: #01579b; color: #4fc3f7; }

/* ============================================
   Notification Bell and Badge
   ============================================ */
.notification-btn {
    position: relative;
    font-size: 18px;
    padding: 4px 8px;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--danger-color, #e74c3c);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Notification Panel */
.notification-panel {
    position: fixed;
    top: 50px;
    right: 10px;
    width: 350px;
    max-height: 450px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 1100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.notification-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 380px;
}

.notification-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: var(--hover-color);
}

.notification-item.unread {
    background: rgba(52, 152, 219, 0.1);
}

.notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--bg-tertiary);
    border-radius: 50%;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 2px;
}

.notification-message {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.btn-dismiss {
    opacity: 0;
    transition: opacity 0.2s;
}

.notification-item:hover .btn-dismiss {
    opacity: 1;
}

/* ============================================
   Advanced Search Button
   ============================================ */
.nav-search {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-advanced-search {
    font-size: 14px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-advanced-search:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* ============================================
   Comments Panel
   ============================================ */
.comments-list {
    max-height: 300px;
    overflow-y: auto;
}

.comment-item {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.comment-item.reply {
    margin-left: 24px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-top: 8px;
    border-bottom: none;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.comment-author {
    font-weight: 500;
    font-size: 12px;
}

.comment-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

.comment-content {
    font-size: 13px;
    line-height: 1.4;
}

.comment-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.comment-resolved {
    opacity: 0.6;
    background: var(--bg-tertiary);
}

/* ============================================
   Advanced Search Dialog
   ============================================ */
.search-operators {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.search-operators button {
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
}

.search-operators button:hover {
    background: var(--accent-color);
    color: white;
}

.search-results-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 8px;
}

.search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: var(--hover-color);
}

/* ============================================
   Graph Comparison
   ============================================ */
.comparison-diff {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.diff-section {
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: 6px;
}

.diff-section.added { border-left: 3px solid #27ae60; }
.diff-section.removed { border-left: 3px solid #e74c3c; }
.diff-section.modified { border-left: 3px solid #f39c12; }

.diff-section h5 {
    margin: 0 0 8px 0;
    font-size: 13px;
}

.diff-count {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.diff-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ============================================
   Batch Operations
   ============================================ */
.batch-progress {
    margin-top: 12px;
}

.batch-progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.batch-progress-fill {
    height: 100%;
    background: var(--accent-color);
    transition: width 0.3s;
}

.batch-status {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ============================================
   Keyboard Shortcut Styling
   ============================================ */
kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--border-color);
    margin-right: 4px;
}

/* ============================================
   Connection Context Menu
   ============================================ */
#connectionContextMenu {
    min-width: 160px;
}

#connectionContextMenu li[data-action="cycleType"]::after {
    content: 'T';
    float: right;
    font-size: 10px;
    opacity: 0.6;
    font-family: 'Consolas', monospace;
}

#connectionContextMenu li[data-action="reverseConn"]::after {
    content: 'R';
    float: right;
    font-size: 10px;
    opacity: 0.6;
    font-family: 'Consolas', monospace;
}

/* Connection type indicator in properties */
.connection-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

/* Cycle button styling */
.btn-cycle {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

/* Graph Execution Terminal */
.graph-execution-terminal {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 500px;
    height: 350px;
    min-width: 300px;
    min-height: 200px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    background: #0d0d1a;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 12px;
    overflow: hidden;
}

/* Resize handles */
.terminal-resize-handle {
    position: absolute;
    z-index: 10;
}

.terminal-resize-handle.handle-n {
    top: -4px;
    left: 10px;
    right: 10px;
    height: 8px;
    cursor: n-resize;
}

.terminal-resize-handle.handle-s {
    bottom: -4px;
    left: 10px;
    right: 10px;
    height: 8px;
    cursor: s-resize;
}

.terminal-resize-handle.handle-e {
    right: -4px;
    top: 10px;
    bottom: 10px;
    width: 8px;
    cursor: e-resize;
}

.terminal-resize-handle.handle-w {
    left: -4px;
    top: 10px;
    bottom: 10px;
    width: 8px;
    cursor: w-resize;
}

.terminal-resize-handle.handle-nw {
    top: -4px;
    left: -4px;
    width: 14px;
    height: 14px;
    cursor: nw-resize;
}

.terminal-resize-handle.handle-ne {
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    cursor: ne-resize;
}

.terminal-resize-handle.handle-sw {
    bottom: -4px;
    left: -4px;
    width: 14px;
    height: 14px;
    cursor: sw-resize;
}

.terminal-resize-handle.handle-se {
    bottom: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    cursor: se-resize;
}

/* Visual resize indicator in corner */
.terminal-resize-grip {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    opacity: 0.3;
    pointer-events: none;
    background:
        linear-gradient(135deg, transparent 50%, #666 50%, #666 60%, transparent 60%),
        linear-gradient(135deg, transparent 70%, #666 70%, #666 80%, transparent 80%);
}

.graph-execution-terminal.minimized {
    display: none;
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #16162a;
    border-bottom: 1px solid #333;
    cursor: move;
}

.terminal-title {
    font-weight: 600;
    color: #fff;
    font-size: 12px;
}

.terminal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #1a1a2e;
    border-bottom: 1px solid #333;
}

.terminal-search {
    flex: 1;
    background: #0d0d1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    color: #e0e0e0;
    outline: none;
    min-width: 120px;
}

.terminal-search:focus {
    border-color: #7c3aed;
}

.terminal-search::placeholder {
    color: #666;
}

.terminal-toolbar-btn {
    background: none;
    border: 1px solid transparent;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
    transition: all 0.15s;
    white-space: nowrap;
}

.terminal-toolbar-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    border-color: rgba(124, 58, 237, 0.3);
}

.terminal-toolbar-btn.active {
    background: rgba(124, 58, 237, 0.3);
    color: #a78bfa;
    border-color: rgba(124, 58, 237, 0.4);
}

.terminal-search-results {
    font-size: 10px;
    color: #666;
    padding: 0 4px;
}

.terminal-status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #333;
    color: #888;
}

.terminal-status.running {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    animation: pulse 1.5s infinite;
}

.terminal-status.success {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.terminal-status.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.terminal-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    transition: color 0.15s;
}

.terminal-btn:hover {
    color: #fff;
}

.terminal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.terminal-progress {
    height: 3px;
    background: #1a1a2e;
}

.terminal-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    transition: width 0.3s ease;
}

.terminal-output {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 12px;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

.terminal-output::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.terminal-output::-webkit-scrollbar-track {
    background: #1a1a2e;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.terminal-output::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.terminal-line {
    padding: 2px 0;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

.terminal-line mark {
    background: #7c3aed;
    color: #fff;
    padding: 0 2px;
    border-radius: 2px;
}

.terminal-line.hidden {
    display: none;
}

.terminal-line.info {
    color: #60a5fa;
}

.terminal-line.success {
    color: #10b981;
}

.terminal-line.error {
    color: #ef4444;
}

.terminal-line.output {
    color: #e0e0e0;
}

.terminal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #16162a;
    border-top: 1px solid #333;
}

.terminal-stats {
    font-size: 10px;
    color: #666;
}

.terminal-footer .btn {
    font-size: 11px;
    padding: 4px 12px;
}

/* ============================================
   VIEW MODE SWITCHER
   ============================================ */
.view-mode-switcher {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.view-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.view-mode-btn:hover {
    background: var(--light-color);
    color: var(--text-color);
}

.view-mode-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.view-mode-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   IDE MODE STYLES
   ============================================ */
.ide-container {
    display: flex;
    height: calc(100vh - 100px);
    background: var(--bg-color);
}

/* Explorer Sidebar (collapsible rail) */
.ide-sidebar {
    width: 250px;
    min-width: 200px;
    max-width: 400px;
    background: var(--sidebar-bg, var(--light-color));
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    resize: horizontal;
    overflow: hidden;
}

.ide-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--header-bg, var(--bg-color));
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.ide-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Tree section headers */
.ide-tree-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.ide-tree-section:hover {
    color: var(--text-color);
}

.ide-tree-section .section-chevron {
    font-size: 0.6rem;
    transition: transform 0.15s;
}

.ide-tree-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.ide-tree-group {
    padding-left: 8px;
}

.ide-tree-group.collapsed {
    display: none;
}

/* Tree items */
.ide-tree-item {
    display: flex;
    align-items: center;
    padding: 3px 8px 3px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-color);
    transition: background 0.1s;
    gap: 4px;
}

.ide-tree-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.ide-tree-item.selected {
    background: var(--selection-bg, var(--primary-color));
    color: white;
}

.ide-tree-item.folder {
    font-weight: 500;
}

.ide-tree-item .tree-icon {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    opacity: 0.7;
    font-size: 0.8rem;
}

.ide-tree-item .tree-chevron {
    width: 12px;
    flex-shrink: 0;
    font-size: 0.65rem;
    transition: transform 0.15s;
}

.ide-tree-item.collapsed .tree-chevron {
    transform: rotate(-90deg);
}

.ide-tree-item .tree-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Version badge */
.ide-tree-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--light-color);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Status dot (running/idle) */
.ide-tree-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
}

.ide-tree-status.running {
    background: #22c55e;
    animation: ide-pulse 1.5s ease-in-out infinite;
}

@keyframes ide-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Node count */
.ide-tree-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ide-tree-children {
    padding-left: 16px;
}

.ide-tree-children.collapsed {
    display: none;
}

/* IDE Main Area */
.ide-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Tab bar with mode toggle */
.ide-tabs {
    display: flex;
    background: var(--tabs-bg, var(--light-color));
    border-bottom: 1px solid var(--border-color);
    height: 35px;
}

.ide-tabs-list {
    display: flex;
    flex: 1;
    overflow-x: auto;
}

.ide-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}

.ide-tab:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.ide-tab.active {
    background: var(--bg-color);
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
}

.ide-tab .tab-close {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.1s;
    cursor: pointer;
}

.ide-tab:hover .tab-close {
    opacity: 0.5;
}

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

.ide-tabs-actions {
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
}

/* Code/Visual mode toggle */
.ide-mode-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-right: 6px;
}

.ide-mode-btn {
    padding: 2px 8px;
    background: transparent;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

.ide-mode-btn:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

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

/* Editor area */
.ide-editors {
    flex: 1;
    overflow: auto;
    background: var(--editor-bg, var(--bg-color));
    position: relative;
}

.ide-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}

.ide-welcome-content p {
    margin-bottom: 1.5rem;
}

.ide-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.82rem;
}

.ide-shortcuts .shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ide-shortcuts kbd {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.72rem;
}

/* Code Editor Mode */
.ide-code-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ide-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--header-bg, var(--light-color));
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}

.ide-code-body {
    flex: 1;
    display: flex;
    position: relative;
    overflow: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
}

.ide-line-numbers {
    padding: 8px 8px 8px 12px;
    text-align: right;
    color: var(--text-muted);
    user-select: none;
    border-right: 1px solid var(--border-color);
    background: var(--light-color);
    min-width: 40px;
    flex-shrink: 0;
}

.ide-code-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 8px 12px 8px 56px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    color: transparent;
    caret-color: var(--text-color);
    border: none;
    outline: none;
    resize: none;
    overflow: auto;
    white-space: pre;
    z-index: 1;
    tab-size: 2;
}

.ide-code-highlight {
    padding: 8px 12px 8px 56px;
    white-space: pre;
    pointer-events: none;
    min-height: 100%;
}

/* Syntax highlighting tokens */
.ide-tok-key { color: #9cdcfe; }
.ide-tok-str { color: #ce9178; }
.ide-tok-num { color: #b5cea8; }
.ide-tok-bool { color: #569cd6; }
.ide-tok-null { color: #569cd6; }
.ide-tok-brace { color: #d4d4d4; }
.ide-tok-err { text-decoration: wavy underline red; }

/* Validation error gutter */
.ide-code-error {
    font-size: 0.75rem;
    color: #f44;
    padding: 4px 12px;
    background: rgba(244,68,68,0.08);
    border-top: 1px solid rgba(244,68,68,0.2);
}

/* Visual Editor Mode */
.ide-visual-editor {
    padding: 12px;
    overflow: auto;
    height: 100%;
}

.ide-visual-section {
    margin-bottom: 16px;
}

.ide-visual-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.ide-visual-field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.ide-visual-label {
    width: 110px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ide-visual-value {
    flex: 1;
}

.ide-visual-value input,
.ide-visual-value select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.82rem;
    background: var(--edit-bg, white);
    color: var(--text-color);
}

.ide-visual-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ide-visual-cap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

/* Mini-table for inputs/outputs */
.ide-visual-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ide-visual-mini-table th {
    text-align: left;
    padding: 4px 8px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ide-visual-mini-table td {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
}

.ide-visual-graph-inset {
    margin-top: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    height: 180px;
    background: var(--light-color);
}

/* Graph Tab (split view) */
.ide-graph-split {
    display: flex;
    height: 100%;
}

.ide-graph-list {
    width: 300px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.ide-graph-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--light-color));
    font-size: 0.8rem;
}

.ide-graph-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
}

.ide-graph-list-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.ide-graph-list-item.selected {
    background: var(--selection-bg, rgba(0,100,200,0.1));
}

.ide-graph-list-item .item-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ide-graph-list-item .item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ide-graph-list-item .item-schema {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ide-graph-preview {
    flex: 1;
    background: var(--light-color);
    position: relative;
    overflow: hidden;
}

/* Console / Bottom Panel */
.ide-bottom-panel {
    height: 150px;
    min-height: 30px;
    max-height: 300px;
    border-top: 1px solid var(--border-color);
    background: var(--panel-bg, var(--light-color));
    display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
}

.ide-bottom-panel.collapsed {
    height: 30px !important;
    min-height: 30px;
    resize: none;
}

.ide-bottom-panel.collapsed .ide-panel-content {
    display: none;
}

.ide-panel-tabs {
    display: flex;
    background: var(--tabs-bg, var(--bg-color));
    border-bottom: 1px solid var(--border-color);
    min-height: 28px;
}

.ide-panel-tab {
    padding: 5px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
}

.ide-panel-tab.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
}

.ide-panel-tab-spacer {
    flex: 1;
    background: transparent;
    border: none;
}

.ide-panel-collapse {
    margin-left: auto;
}

.ide-panel-content {
    flex: 1;
    overflow: auto;
    padding: 6px 8px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Output log lines */
.ide-log-line {
    display: flex;
    gap: 8px;
    padding: 1px 0;
}

.ide-log-time {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 0.72rem;
}

/* Problems panel */
.ide-problem-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 3px;
}

.ide-problem-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.ide-problem-icon {
    flex-shrink: 0;
}

/* Executions mini-table */
.ide-exec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.ide-exec-table th {
    text-align: left;
    padding: 3px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.72rem;
}

.ide-exec-table td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--border-color);
}

.ide-exec-table tr:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
    cursor: pointer;
}

.ide-exec-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ide-exec-status.success { background: #22c55e; }
.ide-exec-status.failed { background: #ef4444; }
.ide-exec-status.running { background: #f59e0b; animation: ide-pulse 1.5s infinite; }
.ide-exec-status.pending { background: #94a3b8; }

/* Graph Flow animation */
.ide-graphflow-container {
    width: 100%;
    height: 100%;
}

.ide-graphflow-container .gf-node {
    transition: fill 0.3s, stroke 0.3s, transform 0.3s;
}

.ide-graphflow-container .gf-node.idle { fill: #94a3b8; }
.ide-graphflow-container .gf-node.running {
    fill: #f59e0b;
    animation: ide-gf-pulse 1s ease-in-out infinite;
}
.ide-graphflow-container .gf-node.success { fill: #22c55e; }
.ide-graphflow-container .gf-node.failed { fill: #ef4444; }

@keyframes ide-gf-pulse {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.7; filter: brightness(1.3); }
}

.ide-graphflow-container .gf-edge {
    stroke: #94a3b8;
    stroke-width: 1.5;
    fill: none;
}

.ide-graphflow-container .gf-dot {
    fill: var(--primary-color);
}

/* Quick Open Dialog */
.ide-quick-open {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    max-width: 90%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow: hidden;
}

.ide-quick-open input {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    background: transparent;
    color: var(--text-color);
    outline: none;
}

.ide-quick-open-results {
    max-height: 300px;
    overflow-y: auto;
}

.ide-quick-open-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.1s;
}

.ide-quick-open-item:hover,
.ide-quick-open-item.highlighted {
    background: var(--selection-bg, rgba(0,100,200,0.1));
}

.ide-quick-open-item .qo-icon {
    flex-shrink: 0;
    opacity: 0.6;
}

.ide-quick-open-item .qo-name {
    flex: 1;
}

.ide-quick-open-item .qo-type {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ============================================
   DATA MODE STYLES (Spreadsheet++)
   ============================================ */
/* data-container base is defined in DATA MODE section below */

.data-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--toolbar-bg, var(--light-color));
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.data-toolbar-left,
.data-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-toolbar input,
.data-toolbar select {
    max-width: 200px;
}

.data-row-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0 8px;
}

.data-grid-container {
    flex: 1;
    overflow: auto;
    position: relative;
}

.data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-grid th,
.data-grid td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.data-grid th {
    background: var(--header-bg, var(--light-color));
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: pointer;
    user-select: none;
}

.data-grid th:hover {
    background: var(--hover-bg, rgba(0,0,0,0.08));
}

.data-col-sortable::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
}

.data-col-sortable.asc::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--text-color);
}

.data-col-sortable.desc::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--text-color);
}
.data-col-sortable.secondary-asc::after {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 5px solid var(--text-muted, #888);
}
.data-col-sortable.secondary-desc::after {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid var(--text-muted, #888);
}

.data-grid tbody tr:hover {
    background: var(--row-hover, rgba(0,0,0,0.02));
}

.data-grid tbody tr.selected {
    background: var(--row-selected, rgba(var(--primary-rgb, 74, 144, 226), 0.1));
}

.data-checkbox-col {
    width: 40px;
    text-align: center !important;
}

.data-grid td.editable {
    cursor: text;
}

.data-grid td.editable:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    background: var(--edit-bg, white);
}

.data-grid td .cell-input {
    width: 100%;
    padding: 4px;
    border: none;
    background: transparent;
    font: inherit;
}

.data-grid .type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: var(--badge-bg, var(--light-color));
}

.data-grid .cell-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.1s;
}

.data-grid tr:hover .cell-actions {
    opacity: 1;
}

/* Data Statusbar */
.data-statusbar {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--statusbar-bg, var(--light-color));
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Data Cell Types */
.data-cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-cell-date {
    color: var(--date-color, #666);
}

.data-cell-link {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.data-cell-boolean {
    text-align: center;
}

.data-cell-boolean .bool-check {
    color: var(--success-color, #10B981);
}

.data-cell-boolean .bool-x {
    color: var(--danger-color, #EF4444);
}

/* Dark theme adjustments */
[data-theme="dark"] .ide-container,
[data-theme="dark"] .data-container {
    --sidebar-bg: #1e1e1e;
    --tabs-bg: #252526;
    --editor-bg: #1e1e1e;
    --panel-bg: #1e1e1e;
    --header-bg: #252526;
    --card-bg: #2d2d2d;
    --card-header-bg: #333;
    --hover-bg: rgba(255,255,255,0.05);
    --selection-bg: #094771;
    --toolbar-bg: #252526;
    --statusbar-bg: #007acc;
    --edit-bg: #1e1e1e;
    --row-hover: rgba(255,255,255,0.03);
}

[data-theme="dark"] .view-mode-btn {
    color: #888;
}

[data-theme="dark"] .view-mode-btn:hover {
    background: #333;
    color: #ccc;
}

[data-theme="dark"] .data-statusbar {
    color: white;
}

/* ============================================
   IDE MODE - TREE & SIDEBAR ENHANCEMENTS
   ============================================ */
.ide-sidebar-actions {
    display: flex;
    gap: 4px;
}

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

.ide-tree-item.op .tree-icon { color: #f59e0b; }
.ide-tree-item.graph .tree-icon { color: #3b82f6; }
.ide-tree-item.node .tree-icon { color: #10b981; }

/* Context menu */
.ide-context-menu {
    position: fixed;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1001;
    min-width: 160px;
    padding: 4px 0;
}

.ide-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-color);
}

.ide-context-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.ide-context-sep {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* ============================================
   DATA MODE - SPREADSHEET LAYOUT
   ============================================ */
.data-container {
    display: flex;
    height: calc(100vh - 100px);
}

.data-sidebar {
    width: 220px;
    min-width: 180px;
    background: var(--sidebar-bg, var(--light-color));
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.data-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.data-sheet-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.data-sheet-tree-item {
    display: flex;
    align-items: center;
    padding: 5px 8px 5px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.1s;
}

.data-sheet-tree-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.data-sheet-tree-item.selected {
    background: var(--selection-bg, var(--primary-color));
    color: white;
}

.data-sheet-tree-item .tree-icon {
    width: 14px;
    margin-right: 6px;
    text-align: center;
}

.data-sheet-tabs {
    border-top: 1px solid var(--border-color);
    padding: 8px;
}

.data-sheet-tabs-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.data-sheet-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.data-sheet-tab-item {
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 3px;
    cursor: pointer;
}

.data-sheet-tab-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.data-sources {
    border-top: 1px solid var(--border-color);
    padding: 8px;
}

.data-sources-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.data-source-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 3px;
}

.data-source-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.data-source-item.active {
    background: var(--primary-color);
    color: white;
}

.source-icon {
    font-size: 0.9rem;
}

/* Data Main Area */
.data-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Formula Bar */
.data-formula-bar {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.formula-cell-ref {
    min-width: 60px;
    padding: 4px 8px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85rem;
    text-align: center;
}

.formula-fx {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.formula-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.9rem;
}

.formula-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Grid Wrapper */
.data-grid-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
}

.data-row-header {
    width: 40px;
    min-width: 40px;
    background: var(--header-bg, var(--light-color));
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.data-grid tbody .data-row-header {
    font-weight: normal;
}

/* Sheet Tabs Bar (Bottom) */
.data-sheet-bar {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--light-color);
    border-top: 1px solid var(--border-color);
    gap: 4px;
}

.data-sheet-bar-tabs {
    display: flex;
    flex: 1;
    gap: 2px;
    overflow-x: auto;
}

.sheet-bar-tab {
    padding: 4px 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.sheet-bar-tab:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.sheet-bar-tab.active {
    background: white;
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

.data-sheet-bar-scroll {
    display: flex;
    gap: 2px;
}

/* Status Bar Enhancements */
.data-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-status-center {
    font-size: 0.8rem;
}

/* Tree Item Depth Indentation */
.data-sheet-tree-item[data-depth="1"] { padding-left: 24px; }
.data-sheet-tree-item[data-depth="2"] { padding-left: 36px; }
.data-sheet-tree-item[data-depth="3"] { padding-left: 48px; }

.ide-tree-item[data-depth="1"] { padding-left: 24px; }
.ide-tree-item[data-depth="2"] { padding-left: 36px; }
.ide-tree-item[data-depth="3"] { padding-left: 48px; }
.ide-tree-item[data-depth="4"] { padding-left: 60px; }

/* Dark theme for new elements */
[data-theme="dark"] .data-sidebar {
    --sidebar-bg: #1e1e1e;
}

[data-theme="dark"] .data-formula-bar {
    background: #252526;
}

[data-theme="dark"] .formula-input {
    background: #1e1e1e;
    color: #ccc;
    border-color: #3c3c3c;
}

[data-theme="dark"] .sheet-bar-tab {
    background: #2d2d2d;
    border-color: #3c3c3c;
}

[data-theme="dark"] .sheet-bar-tab.active {
    background: #1e1e1e;
}

/* Tree Section Headers */
.data-tree-section,
.ide-tree-separator {
    padding: 8px 12px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.data-tree-section:first-child,
.ide-tree-separator:first-child {
    margin-top: 0;
    border-top: none;
}

.tree-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--badge-bg, rgba(0,0,0,0.1));
    margin-left: 6px;
}

.tree-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.tree-spacer {
    width: 12px;
    display: inline-block;
}

.ide-node-card.collapsed .ide-node-card-body {
    display: none;
}

/* IDE Quick Actions */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.btn-outline:hover {
    background: var(--light-color);
}

/* ═══════════════════════════════════════════════════════════
   AI SUGGESTIONS PANEL
   ═══════════════════════════════════════════════════════════ */

.suggestions-panel {
    position: fixed;
    right: 0;
    top: var(--toolbar-height, 48px);
    width: 360px;
    max-height: calc(100vh - var(--toolbar-height, 48px) - var(--statusbar-height, 28px));
    background: var(--card-bg, #fff);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl, -4px 0 24px rgba(0,0,0,0.12));
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideInRight 0.25s ease-out;
}

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

.suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated, #f8f9fa);
}

.suggestions-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.suggestions-header .btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted, #6c757d);
    border-radius: var(--radius-sm, 4px);
    transition: background var(--transition-fast, 0.15s);
}

.suggestions-header .btn-icon:hover {
    background: var(--hover-bg, rgba(0,0,0,0.06));
}

.suggestions-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated, #f8f9fa);
}

.suggestion-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
}

.suggestion-tab:hover {
    color: var(--text-color);
    background: var(--hover-bg, rgba(0,0,0,0.03));
}

.suggestion-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.suggestions-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.suggestion-card {
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
}

.suggestion-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.suggestion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.suggestion-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 6px;
    border-radius: var(--radius-full, 20px);
    font-size: 11px;
    font-weight: 700;
    background: var(--primary-light, #e8f0fe);
    color: var(--primary-dark, #1a56db);
}

.suggestion-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.suggestion-body {
    font-size: 12px;
    color: var(--text-muted, #6c757d);
    line-height: 1.5;
}

.suggestion-reason {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

.cluster-header {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text-color);
}

.cluster-nodes {
    font-size: 12px;
    color: var(--text-muted);
}

.suggestions-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   COLLABORATION PRESENCE BAR
   ═══════════════════════════════════════════════════════════ */

.collab-presence-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}

.collab-avatar-stack {
    display: flex;
    align-items: center;
}

.collab-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border: 2px solid var(--bg-color, #fff);
    margin-left: -6px;
    position: relative;
    cursor: default;
    transition: transform var(--transition-fast, 0.15s);
}

.collab-avatar:first-child {
    margin-left: 0;
}

.collab-avatar:hover {
    transform: scale(1.15);
    z-index: 1;
}

.collab-avatar .collab-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success-color, #10b981);
    border: 1.5px solid var(--bg-color, #fff);
}

.collab-avatar .collab-status-dot.idle {
    background: var(--warning-color, #f59e0b);
}

.collab-user-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Remote cursors overlay */
.remote-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 800;
    transition: left 0.1s linear, top 0.1s linear;
}

.remote-cursor-pointer {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid currentColor;
    transform: rotate(-30deg);
}

.remote-cursor-label {
    position: absolute;
    top: 12px;
    left: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════
   MARKETPLACE DIALOG
   ═══════════════════════════════════════════════════════════ */

.marketplace-dialog {
    width: 720px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.marketplace-search-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated, #f8f9fa);
}

.marketplace-search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    background: var(--bg-color, #fff);
    color: var(--text-color);
    outline: none;
    transition: border-color var(--transition-fast, 0.15s);
}

.marketplace-search-bar input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.marketplace-categories {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
}

.marketplace-category-chip {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full, 20px);
    background: var(--bg-color, #fff);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast, 0.15s);
}

.marketplace-category-chip:hover,
.marketplace-category-chip.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.marketplace-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: 16px;
    background: var(--bg-color, #fff);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
    display: flex;
    flex-direction: column;
}

.marketplace-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-2px);
}

.marketplace-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.marketplace-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.marketplace-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.marketplace-card-downloads {
    font-weight: 500;
}

.marketplace-card-version {
    opacity: 0.7;
}

.marketplace-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   EXPLORATION MODE
   ═══════════════════════════════════════════════════════════ */

body.exploration-mode .top-nav,
body.exploration-mode .left-sidebar,
body.exploration-mode .right-sidebar,
body.exploration-mode .canvas-toolbar,
body.exploration-mode .status-bar {
    display: none !important;
}

body.exploration-mode .main-container {
    padding: 0;
}

body.exploration-mode .canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal, 1050);
    background: var(--canvas-bg, #f8f9fa);
}

.exploration-controls {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: var(--z-tooltip, 1080);
}

.exploration-toolbar {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    box-shadow: var(--shadow-xl, 0 8px 32px rgba(0,0,0,0.2));
}

.exploration-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exploration-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.exploration-info {
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    padding: 8px 24px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exploration-info h3 {
    margin: 0;
    font-size: 1.25rem;
}

.exploration-meta {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   NODE COMMENTS
   ═══════════════════════════════════════════════════════════ */

.comments-section {
    padding: 12px;
    border-top: 1px solid var(--border-color);
}

.comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.comment {
    padding: 8px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-sunken, #f1f5f9);
    font-size: 12px;
}

.comment-resolved {
    opacity: 0.5;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.comment-author {
    font-weight: 600;
    font-size: 11px;
}

.comment-time {
    font-size: 11px;
    color: var(--text-muted);
}

.comment-body {
    line-height: 1.4;
}

.comment-input textarea {
    resize: vertical;
    min-height: 48px;
}

/* ═══════════════════════════════════════════════════════════
   PARTICLE CANVAS
   ═══════════════════════════════════════════════════════════ */

.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

[data-theme="cosmos"] .particle-canvas {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════
   INTELLIGENCE DASHBOARD
   ═══════════════════════════════════════════════════════════ */

.intel-dashboard {
    padding: 4px;
}

.intel-health {
    text-align: center;
    padding: 16px 0;
}

.intel-health-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        var(--color) calc(var(--score) * 1%),
        var(--bg-sunken, #e2e8f0) calc(var(--score) * 1%)
    );
    position: relative;
}

.intel-health-ring::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-elevated, var(--card-bg, #fff));
}

.intel-health-value {
    position: relative;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 1;
}

.intel-health-label {
    font-weight: 600;
    font-size: 14px;
}

.intel-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.intel-section {
    margin-top: 16px;
}

.intel-section h4 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.intel-activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}

.intel-op-name {
    font-family: monospace;
    font-size: 11px;
}

.intel-status {
    padding: 2px 8px;
    border-radius: var(--radius-sm, 4px);
    font-size: 11px;
    font-weight: 600;
}

.intel-status-completed { background: rgba(16, 185, 129, 0.1); color: var(--success-color, #10b981); }
.intel-status-running { background: rgba(59, 130, 246, 0.1); color: var(--primary-color, #3b82f6); }
.intel-status-failed { background: rgba(244, 63, 94, 0.1); color: var(--danger-color, #f43f5e); }

/* ==========================================
   Branch Selector
   ========================================== */
.branch-selector {
    position: relative;
    margin-left: 8px;
}

.branch-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
}

.branch-current:hover {
    border-color: var(--primary-color, #3b82f6);
    background: var(--bg-tertiary, #f0f0f0);
}

.branch-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
}

.branch-item {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.1s;
}

.branch-item:hover { background: var(--bg-secondary, #f8f9fa); }
.branch-item.active { font-weight: 600; color: var(--primary-color, #3b82f6); }

.branch-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color, #10b981);
}

.branch-new {
    border-top: 1px solid var(--border-color);
    color: var(--primary-color, #3b82f6);
    font-weight: 500;
}

/* ==========================================
   Global Visual Polish & Micro-Interactions
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

code, pre, .monospace, .intel-op-name {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* Button micro-interactions */
.btn {
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn:focus-visible {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* Dialog/panel slide-in animation */
@keyframes slideUp {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.dialog, .modal, .marketplace-dialog {
    animation: slideUp 0.2s ease-out;
}

/* Sidebar smooth transitions */
.sidebar, .panel {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Selection styling */
::selection {
    background: rgba(59, 130, 246, 0.2);
    color: inherit;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color, #d1d5db);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #9ca3af);
}

/* Tooltip micro-animation */
[data-tooltip]::after {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Loading skeleton shimmer */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm, 4px);
}

/* Input focus glow */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Card hover lift */
.card:hover, .op-card:hover, .marketplace-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Subtle text animations for status changes */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.notification {
    animation: fadeInScale 0.2s ease-out;
}

/* Range slider styling */
.form-control-range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #d1d5db);
    outline: none;
    margin: 8px 0;
    cursor: pointer;
}

.form-control-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color, #3b82f6);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.form-control-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.form-control-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color, #3b82f6);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* ========== Category Filter Panel ========== */
.category-filter-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 60px;
    max-width: 240px;
    overflow: visible;
    font-family: inherit;
    transition: all 0.2s ease;
}

.category-filter-panel.collapsed .category-filter-body {
    display: none;
}

.category-filter-panel.collapsed .category-filter-header span:first-child {
    display: none;
}

.category-filter-panel.collapsed {
    min-width: 40px;
    max-width: 40px;
}

.category-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--light-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
    cursor: pointer;
    user-select: none;
}

.category-filter-header:hover {
    background: var(--light-color);
}

.category-filter-header .btn-xs {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
}

.category-filter-toggle {
    font-size: 10px;
    color: var(--secondary-color);
}

.category-filter-body {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-filter-body::-webkit-scrollbar {
    display: none;
}

.category-filter-actions {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.category-filter-actions button {
    flex: 1;
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    cursor: pointer;
}

.category-filter-actions button:hover {
    background: var(--light-color);
}

.category-filter-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.category-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.category-chip:hover {
    background: var(--light-color);
}

.category-chip.hidden {
    opacity: 0.4;
    text-decoration: line-through;
}

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

.category-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.category-count {
    color: var(--secondary-color);
    font-size: 11px;
    flex-shrink: 0;
}

/* ============================================
   MONITOR VIEW
   ============================================ */
.monitor-container {
    display: flex;
    height: calc(100vh - 100px);
}

.monitor-sidebar {
    width: 200px;
    min-width: 160px;
    background: var(--sidebar-bg, var(--light-color));
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.monitor-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
}

.monitor-sidebar-title {
    color: var(--text-color);
}

.monitor-nav-tree {
    padding: 4px 0;
}

.monitor-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-color);
    transition: background 0.15s;
}

.monitor-nav-item:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
}

.monitor-nav-item.active {
    background: var(--active-bg, rgba(16, 163, 127, 0.15));
    color: #10a37f;
    font-weight: 500;
}

.monitor-nav-icon {
    font-size: 11px;
    width: 16px;
    text-align: center;
}

.monitor-nav-group {
    margin-top: 4px;
}

.monitor-nav-group-header {
    padding: 6px 12px 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
    font-weight: 600;
}

.monitor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.monitor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--sidebar-bg, var(--light-color));
}

.monitor-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.monitor-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.monitor-panel-title {
    font-weight: 600;
    font-size: 14px;
}

.monitor-auto-refresh {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.monitor-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.monitor-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--secondary-color);
    background: var(--sidebar-bg, var(--light-color));
}

.monitor-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.monitor-empty, .monitor-loading, .monitor-error {
    padding: 40px;
    text-align: center;
    color: var(--secondary-color);
    font-size: 13px;
}

.monitor-error {
    color: #ef4444;
}

.monitor-panel-note {
    padding: 16px;
    background: var(--hover-bg, rgba(255,255,255,0.03));
    border-radius: 6px;
    font-size: 13px;
    color: var(--secondary-color);
    line-height: 1.5;
}

.monitor-live-feed {
    font-family: monospace;
    font-size: 11px;
    max-height: 500px;
    overflow-y: auto;
}

.monitor-feed-entry {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
}

.feed-time {
    color: var(--secondary-color);
    min-width: 70px;
}

.feed-type {
    color: #10a37f;
    min-width: 80px;
    font-weight: 500;
}

.feed-data {
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-feed-note {
    color: var(--secondary-color);
    font-style: italic;
    padding: 8px 0;
}

/* ============================================
   GIT MANAGEMENT (Monitor Tab)
   ============================================ */
.git-branch-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg, var(--light-color));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}
.git-branch-bar strong { color: var(--primary-color); }
.git-tracking { color: var(--text-muted, #888); }
.git-ahead { color: #22c55e; font-weight: 600; }
.git-behind { color: #ef4444; font-weight: 600; }

.git-action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    margin-bottom: 10px;
}

.git-section { margin-bottom: 16px; }
.git-section-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #888);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.git-section-count {
    background: var(--primary-color);
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
}

.git-file-list { display: flex; flex-direction: column; }
.git-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
}
.git-file-item:hover {
    background: var(--hover-color, rgba(0,0,0,0.05));
}
.git-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-file-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.git-file-item:hover .git-file-actions { opacity: 1; }

.git-status-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.git-log-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.git-log-toolbar .btn.active {
    background: var(--primary-color);
    color: #fff;
}

.git-log-list { display: flex; flex-direction: column; }
.git-log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.git-log-entry:hover { background: var(--hover-color, rgba(0,0,0,0.05)); }
.git-log-hash {
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--primary-color);
    font-weight: 600;
    flex-shrink: 0;
}
.git-log-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-log-meta {
    color: var(--text-muted, #888);
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
}

.git-ref-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}
.git-ref-head { background: #22c55e; color: #fff; }
.git-ref-branch { background: #3b82f6; color: #fff; }
.git-ref-remote { background: #8b5cf6; color: #fff; }

.git-graph-pre {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    background: var(--card-bg, var(--light-color));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
    color: var(--text-color);
}

.git-branch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
}
.git-branch-item:hover { background: var(--hover-color, rgba(0,0,0,0.05)); }
.git-branch-current {
    background: var(--primary-color);
    color: #fff;
    border-radius: 4px;
}
.git-branch-current:hover { background: var(--primary-color); }
.git-branch-icon { width: 12px; text-align: center; font-size: 18px; }
.git-branch-item .git-branch-name { flex: 1; font-weight: 500; }
.git-branch-hash {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--text-muted, #888);
}
.git-branch-current .git-branch-hash { color: rgba(255,255,255,0.7); }

.git-diff-view {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px;
    background: var(--card-bg, var(--light-color));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}
.git-diff-add { color: #22c55e; background: rgba(34,197,94,0.1); }
.git-diff-del { color: #ef4444; background: rgba(239,68,68,0.1); }
.git-diff-hunk { color: #06b6d4; font-weight: 600; }
.git-diff-header { color: var(--text-muted, #888); font-weight: 600; }
.git-diff-file { color: #f59e0b; font-weight: 700; }

/* Git Flow Graph */
.git-flow-container {
    overflow: auto;
    max-height: calc(100vh - 250px);
    padding: 12px;
    background: var(--bg-color, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    margin-top: 8px;
}
.git-flow-svg { display: block; transition: transform 0.2s ease; }
.git-flow-node, .git-flow-svg circle { cursor: pointer; transition: r 0.15s, filter 0.15s; }
.git-flow-svg circle:hover { filter: brightness(1.3); }
.git-flow-hash { font-family: 'Consolas','Monaco',monospace; font-size: 11px; fill: var(--primary-color, #6c63ff); font-weight: 600; }
.git-flow-subject { font-size: 12px; fill: var(--text-color, #e0e0ff); }
.git-flow-meta { font-size: 10px; fill: var(--text-muted, #888); }
.git-flow-ref-text { font-size: 9px; fill: #fff; font-weight: 600; font-family: system-ui, sans-serif; }

.btn-danger {
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
}
.btn-danger:hover { background: #dc2626; }

/* ============================================
   SHARED WIDGETS
   ============================================ */
.widget-stat-card {
    background: var(--card-bg, var(--light-color));
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color, #10a37f);
    border-radius: 6px;
    padding: 12px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.widget-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.stat-card-icon {
    font-size: 14px;
}

.stat-card-label {
    font-size: 11px;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-card-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.stat-card-subtitle {
    font-size: 11px;
    color: var(--secondary-color);
    margin-top: 4px;
}

.stat-card-sparkline {
    margin-top: 6px;
    color: var(--primary-color, #10a37f);
}

.widget-mini-table {
    width: 100%;
    overflow-x: auto;
}

.widget-mini-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.widget-mini-table th {
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--border-color);
}

.widget-mini-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.widget-mini-table tbody tr:hover {
    background: var(--hover-bg, rgba(255,255,255,0.03));
}

.mini-table-empty {
    padding: 20px;
    text-align: center;
    color: var(--secondary-color);
    font-size: 12px;
}

.widget-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-color);
    background: var(--card-bg, transparent);
    transition: background 0.15s;
}

.widget-action-chip:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
}

.chip-icon {
    font-size: 10px;
}

.widget-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    background: rgba(16, 163, 127, 0.15);
    color: #10a37f;
}

.filter-chip-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}

.filter-chip-remove:hover {
    opacity: 1;
}

.widget-gauge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.gauge-label {
    min-width: 100px;
    font-size: 11px;
    color: var(--secondary-color);
}

.gauge-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.gauge-text {
    font-size: 11px;
    color: var(--secondary-color);
    min-width: 80px;
}

/* ============================================
   GRAPH REFERENCE POPOVER
   ============================================ */
.graph-ref {
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(16, 163, 127, 0.08);
    color: #10a37f;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.graph-ref:hover {
    background: rgba(16, 163, 127, 0.18);
    color: #0d8a6a;
}
.graph-ref-icon {
    font-size: 10px;
    opacity: 0.7;
}
.graph-ref-popover {
    position: fixed;
    z-index: 15000;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    width: 300px;
    max-height: 400px;
    overflow: hidden;
    font-size: 12px;
    pointer-events: auto;
    animation: popoverFadeIn 0.15s ease-out;
}
@keyframes popoverFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.graph-ref-popover-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-color);
}
.graph-ref-popover-icon {
    font-size: 16px;
}
.graph-ref-popover-name {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.graph-ref-popover-type {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(74, 144, 217, 0.15);
    color: #4a90d9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.graph-ref-popover-fields {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.graph-ref-popover-field {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.graph-ref-popover-field-label {
    color: var(--secondary-color);
    font-size: 11px;
}
.graph-ref-popover-field-value {
    color: var(--text-color);
    font-size: 11px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.graph-ref-popover-connections {
    padding: 4px 12px 8px;
    font-size: 11px;
    color: var(--secondary-color);
    display: flex;
    gap: 12px;
}
.graph-ref-popover-graph-inset {
    border-top: 1px solid var(--border-color);
    height: 100px;
    background: rgba(0,0,0,0.02);
}
.graph-ref-popover-footer {
    padding: 6px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 10px;
    color: var(--secondary-color);
    display: flex;
    justify-content: space-between;
}

/* ============================================
   GRAPH INSET (Mini-graph SVG widget)
   ============================================ */
.graph-inset {
    position: relative;
    background: rgba(0,0,0,0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.graph-inset svg {
    width: 100%;
    height: 100%;
}
.graph-inset-node {
    cursor: pointer;
    transition: r 0.2s, opacity 0.2s;
}
.graph-inset-node:hover {
    opacity: 0.8;
}
.graph-inset-node-focal {
    stroke: #10a37f;
    stroke-width: 2.5;
}
.graph-inset-node-neighbor {
    stroke: var(--border-color);
    stroke-width: 1;
    opacity: 0.85;
}
.graph-inset-label {
    font-size: 9px;
    fill: var(--text-color);
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}
.graph-inset-edge {
    stroke: var(--border-color);
    stroke-width: 1;
    fill: none;
    opacity: 0.5;
}
.graph-inset-edge-label {
    font-size: 8px;
    fill: var(--secondary-color);
    opacity: 0;
    transition: opacity 0.15s;
}
.graph-inset:hover .graph-inset-edge-label {
    opacity: 1;
}

/* ============================================
   DENSITY TOGGLE
   ============================================ */
.density-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin-left: 8px;
}
.density-toggle-btn {
    border: none;
    background: transparent;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--secondary-color);
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.density-toggle-btn.active {
    background: var(--bg-color);
    color: var(--text-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.density-toggle-btn:hover:not(.active) {
    color: var(--text-color);
}

/* Density variants */
[data-density="comfortable"] .data-grid td,
[data-density="comfortable"] .ide-tree-item { height: 36px; line-height: 36px; }
[data-density="compact"] .data-grid td,
[data-density="compact"] .ide-tree-item { height: 28px; line-height: 28px; }
[data-density="dense"] .data-grid td,
[data-density="dense"] .ide-tree-item { height: 22px; line-height: 22px; font-size: 11px; }

/* ============================================
   COLLAPSIBLE RAILS
   ============================================ */
.collapsible-rail {
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
}
.collapsible-rail.collapsed {
    width: 40px !important;
    min-width: 40px !important;
}
.collapsible-rail.collapsed .rail-content {
    opacity: 0;
    pointer-events: none;
}
.collapsible-rail.collapsed .rail-icons {
    opacity: 1;
    pointer-events: auto;
}
.rail-collapse-btn {
    position: absolute;
    top: 8px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--secondary-color);
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.rail-collapse-btn:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-color);
}
.collapsible-rail.collapsed .rail-collapse-btn {
    right: auto;
    left: 10px;
}
.rail-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 36px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
}
.rail-icon-item {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--secondary-color);
    transition: background 0.15s, color 0.15s;
}
.rail-icon-item:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-color);
}
.rail-icon-item.active {
    background: rgba(16, 163, 127, 0.12);
    color: #10a37f;
}

/* ============================================
   KEYBOARD CHEAT SHEET
   ============================================ */
.keyboard-cheat-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cheatSheetFadeIn 0.2s ease-out;
}
@keyframes cheatSheetFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cheat-sheet-content {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px 32px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.cheat-sheet-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
    color: var(--text-color);
}
.cheat-sheet-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
}
.cheat-sheet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.cheat-sheet-key {
    font-family: monospace;
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-color);
    min-width: 28px;
    text-align: center;
}
.cheat-sheet-action {
    font-size: 12px;
    color: var(--secondary-color);
}
.cheat-sheet-dismiss {
    text-align: center;
    margin-top: 16px;
    font-size: 11px;
    color: var(--secondary-color);
}

/* ============================================
   COMMAND PALETTE
   ============================================ */
.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    padding-top: 15vh;
}

.command-palette {
    width: 520px;
    max-height: 400px;
    background: var(--bg-color, #1a1a2e);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.command-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.command-palette-icon {
    font-size: 16px;
    color: var(--secondary-color);
}

.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-color);
}

.command-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
}

.command-palette-item:hover,
.command-palette-item.selected {
    background: var(--active-bg, rgba(16, 163, 127, 0.15));
}

.command-item-icon {
    width: 20px;
    text-align: center;
    font-size: 12px;
}

.command-item-label {
    flex: 1;
}

.command-item-shortcut {
    font-size: 11px;
    color: var(--secondary-color);
    background: var(--border-color);
    padding: 1px 6px;
    border-radius: 3px;
}

.command-item-category {
    font-size: 10px;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.command-palette-footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--secondary-color);
}

/* ============================================
   DATA VIEW ENHANCEMENTS
   ============================================ */

/* Reference chips in data grid cells */
.data-ref-chip {
    cursor: pointer;
    padding: 1px 8px;
    border-color: rgba(16, 163, 127, 0.3);
    color: #10a37f;
    font-size: 11px;
}

.data-ref-chip:hover {
    background: rgba(16, 163, 127, 0.15) !important;
    border-color: #10a37f;
}

/* Color swatch in data grid cells */
.data-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Status badge in data grid cells */
.data-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.data-status-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Filter bar below data toolbar */
.data-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--sidebar-bg, var(--light-color));
    min-height: 0;
    flex-wrap: wrap;
    transition: min-height 0.2s, padding 0.2s;
}

.data-filter-bar:empty {
    min-height: 0;
    padding: 0 12px;
    border-bottom: none;
}

.data-filter-bar .widget-filter-chip {
    animation: filterChipIn 0.15s ease-out;
}

@keyframes filterChipIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Data sidebar group headers */
.data-sidebar .data-nav-group-header {
    padding: 8px 12px 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
    font-weight: 600;
}

/* Detail panel slide-out */
.data-detail-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    background: var(--sidebar-bg, var(--light-color));
    border-left: 1px solid var(--border-color);
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
}

.data-detail-panel.open {
    transform: translateX(0);
}

.data-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
}

.data-detail-close {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--secondary-color);
}

.data-detail-close:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
    color: var(--text-color);
}

.data-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.data-detail-section {
    margin-bottom: 16px;
}

.data-detail-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 6px;
}

.data-detail-field {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}

.data-detail-field-label {
    color: var(--secondary-color);
    min-width: 80px;
}

.data-detail-field-value {
    color: var(--text-color);
    text-align: right;
    word-break: break-all;
}

.data-detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
}

/* Breadcrumb navigation */
.data-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.breadcrumb-segment {
    color: var(--secondary-color);
    padding: 2px 4px;
    border-radius: 3px;
}
.breadcrumb-segment.clickable {
    cursor: pointer;
}
.breadcrumb-segment.clickable:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-color);
}
.breadcrumb-segment.active {
    color: var(--text-color);
    font-weight: 600;
}
.breadcrumb-sep {
    color: var(--secondary-color);
    opacity: 0.5;
    font-size: 11px;
}
.breadcrumb-count {
    color: var(--secondary-color);
    font-size: 11px;
}

/* Source badges (counts) */
.source-badge {
    float: right;
    font-size: 10px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.1);
    color: var(--secondary-color);
    min-width: 20px;
    text-align: center;
    line-height: 18px;
}

/* Source filter input */
.data-source-filter {
    margin: 4px 8px 6px;
    width: calc(100% - 16px) !important;
    font-size: 11px;
}

/* Saved views */
.data-saved-views {
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}
.data-saved-views-list {
    max-height: 200px;
    overflow-y: auto;
}
.data-saved-view-item {
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.data-saved-view-item:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
}
.data-saved-view-item .saved-view-icon {
    opacity: 0.6;
}
.data-saved-view-item .saved-view-remove {
    margin-left: auto;
    opacity: 0;
    cursor: pointer;
    font-size: 11px;
    color: var(--secondary-color);
}
.data-saved-view-item:hover .saved-view-remove {
    opacity: 1;
}

/* Group-by zone */
.data-groupby-zone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(74, 144, 217, 0.05);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
}
.groupby-label {
    color: var(--secondary-color);
    white-space: nowrap;
}
.groupby-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.groupby-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(74, 144, 217, 0.12);
    color: #4a90d9;
    font-size: 11px;
    cursor: default;
}
.groupby-chip .groupby-remove {
    cursor: pointer;
    margin-left: 2px;
    opacity: 0.6;
}
.groupby-chip .groupby-remove:hover {
    opacity: 1;
}

/* Group header rows in data grid */
.data-group-header-row td {
    background: rgba(0,0,0,0.04);
    font-weight: 600;
    font-size: 12px;
    padding: 6px 12px !important;
    cursor: pointer;
    user-select: none;
}
.data-group-header-row td .group-chevron {
    display: inline-block;
    transition: transform 0.15s;
    margin-right: 4px;
}
.data-group-header-row.collapsed td .group-chevron {
    transform: rotate(-90deg);
}
.data-group-header-row td .group-count {
    color: var(--secondary-color);
    font-weight: 400;
    margin-left: 6px;
    font-size: 11px;
}

/* Bulk actions bar */
.data-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(16, 163, 127, 0.08);
    border-bottom: 1px solid rgba(16, 163, 127, 0.2);
    animation: bulkBarSlideIn 0.15s ease-out;
}
@keyframes bulkBarSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.bulk-count {
    font-size: 12px;
    font-weight: 600;
    color: #10a37f;
}

/* Column resize handle */
.data-col-resize {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 5;
}
.data-col-resize:hover,
.data-col-resize.resizing {
    background: rgba(16, 163, 127, 0.4);
}

/* Column header drag indicator */
.data-grid th {
    position: relative;
}
.data-grid th.drag-over {
    background: rgba(16, 163, 127, 0.12) !important;
}
.data-grid th.data-col-dragging {
    opacity: 0.4;
}
.data-grid th.data-col-drop-left {
    box-shadow: inset 3px 0 0 var(--accent-color, #10a37f);
}
.data-grid th.data-col-drop-right {
    box-shadow: inset -3px 0 0 var(--accent-color, #10a37f);
}
.data-grid th[draggable="true"] {
    cursor: grab;
}
.data-grid th[draggable="true"]:active {
    cursor: grabbing;
}

/* Group headers */
.data-group-header {
    cursor: pointer;
    user-select: none;
}
.data-group-header td {
    background: var(--bg-secondary, #f0f0f0);
    padding: 6px 12px !important;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}
.data-group-toggle {
    display: inline-block;
    width: 16px;
    font-size: 10px;
    color: var(--text-muted, #888);
}
.data-group-count {
    color: var(--text-muted, #888);
    font-size: 12px;
    margin-left: 6px;
}

/* Type-aware cell editors */
.data-cell-bool input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.cell-datetime,
.cell-number {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
}
.cell-datetime:focus,
.cell-number:focus {
    outline: 2px solid var(--accent-color, #10a37f);
    outline-offset: -2px;
    border-radius: 2px;
}

/* Detail panel upgrades */
.data-detail-panel {
    width: 350px;
}
.data-detail-header .data-detail-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.data-detail-connections {
    border-top: 1px solid var(--border-color);
    padding: 8px 12px;
}
.data-detail-section-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 6px;
}
.data-detail-section-header.clickable {
    cursor: pointer;
}
.data-detail-conn-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
}
.data-detail-conn-direction {
    font-size: 10px;
    color: var(--secondary-color);
    width: 16px;
    text-align: center;
}
.data-detail-conn-type {
    font-size: 10px;
    color: var(--secondary-color);
    padding: 1px 4px;
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
}
.data-detail-graph-inset {
    border-top: 1px solid var(--border-color);
    padding: 8px;
}
.data-detail-history {
    border-top: 1px solid var(--border-color);
    padding: 8px 12px;
}

/* Active row highlight */
.data-grid tr.row-active {
    background: rgba(16, 163, 127, 0.08) !important;
}

/* Live execution pulsing indicator */
.exec-status-dot.pulsing {
    animation: exec-pulse 1.2s ease-in-out infinite;
}

@keyframes exec-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* Column picker dropdown */
.data-column-picker {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    padding: 8px 0;
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
}
.data-column-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
}
.data-column-picker-item:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
}
.data-column-picker-item input[type="checkbox"] {
    margin: 0;
}

/* ============================================
   ACTION MODULES
   ============================================ */
.action-module {
    border-bottom: 1px solid var(--border-color);
    transition: opacity 0.2s;
}

.action-module.hidden {
    display: none;
}

.action-module-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    transition: background 0.15s;
    user-select: none;
}

.action-module-header:hover {
    background: var(--hover-bg, rgba(255,255,255,0.03));
}

.action-module-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.action-module-title {
    flex: 1;
}

.action-module-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(16, 163, 127, 0.2);
    color: #10a37f;
}

.action-module-badge:empty {
    display: none;
}

.action-module-chevron {
    font-size: 10px;
    color: var(--secondary-color);
    transition: transform 0.15s;
}

.action-module.collapsed .action-module-chevron {
    transform: rotate(0deg);
}

.action-module:not(.collapsed) .action-module-chevron {
    transform: rotate(0deg);
}

.action-module-body {
    padding: 4px 12px 10px;
}

.action-module.collapsed .action-module-body {
    display: none;
}

.action-module-empty {
    font-size: 11px;
    color: var(--secondary-color);
    font-style: italic;
    padding: 4px 0;
}

/* Selection-specific action buttons */
.selection-action-grid {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.selection-action-grid .btn {
    font-size: 11px;
    padding: 3px 8px;
}

/* ============================================
   APP VIEW
   ============================================ */

#appView {
    flex-direction: column;
    height: 100%;
    background: var(--bg-color);
}

/* App Topbar */
.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.app-routes {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.app-routes::-webkit-scrollbar {
    display: none;
}

.app-route-tab {
    padding: 6px 14px;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--secondary-color);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

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

.app-route-tab:hover:not(.active) {
    color: var(--text-color);
    background: var(--hover-bg);
}

/* App Status */
.app-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-eval-indicator {
    font-size: 11px;
    color: var(--secondary-color);
    font-family: 'JetBrains Mono', monospace;
}

.app-eval-indicator.evaluating {
    color: var(--warning-color, #f0ad4e);
}

.app-eval-indicator.evaluating::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning-color, #f0ad4e);
    margin-right: 6px;
    animation: app-eval-pulse 1.2s infinite;
}

.app-eval-indicator.stale {
    color: var(--secondary-color);
    font-style: italic;
}

@keyframes app-eval-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* App Canvas */
.app-canvas {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

/* Layout Engines */
.app-layout-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.app-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.app-layout-tabs {
    display: flex;
    flex-direction: column;
}

.app-layout-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

/* Dashboard Layout — semantic 3-slot system (header + main + sidebar) */
.app-layout-dashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.app-slot-header {
    flex-shrink: 0;
}

.app-slot-content {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.app-slot-main {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.app-slot-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 240px;
    max-width: 360px;
}

@media (max-width: 900px) {
    .app-slot-content {
        flex-direction: column;
    }
    .app-slot-sidebar {
        max-width: none;
        min-width: 0;
    }
}

/* Widget Container */
.app-widget {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease;
}

.app-widget:hover {
    border-color: var(--secondary-color);
}

.app-widget.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.app-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--secondary-color);
}

.app-widget-header .widget-name {
    font-weight: 500;
}

.app-widget-header .widget-type {
    padding: 1px 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    font-size: 10px;
}

.app-widget-body {
    padding: 12px;
    min-height: 60px;
}

/* Widget Error State */
.app-widget.widget-error {
    border-color: var(--danger-color, #dc3545);
}

.widget-error-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-color);
}

.widget-error-overlay code {
    font-size: 11px;
    color: var(--danger-color, #dc3545);
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-widget.quarantined {
    opacity: 0.5;
    pointer-events: none;
}

/* Proposal Diff Panel */
.app-proposal-panel {
    border-top: 2px solid var(--primary-color);
    background: var(--panel-bg);
    max-height: 240px;
    overflow-y: auto;
    flex-shrink: 0;
}

.proposal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.proposal-diff {
    padding: 8px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.proposal-diff .diff-add { color: var(--success-color, #28a745); }
.proposal-diff .diff-remove { color: var(--danger-color, #dc3545); }
.proposal-diff .diff-modify { color: var(--warning-color, #f0ad4e); }

.proposal-reasoning {
    color: var(--secondary-color);
    font-style: italic;
    margin-bottom: 8px;
    font-family: inherit;
}

.proposal-confidence {
    font-size: 11px;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.proposal-section {
    margin-bottom: 8px;
}

.proposal-section strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-color);
}

.proposal-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.proposal-section li {
    padding: 2px 0;
    padding-left: 12px;
    position: relative;
}

.proposal-section li::before {
    position: absolute;
    left: 0;
    font-size: 10px;
}

.proposal-section li.proposal-add::before { content: '+'; color: var(--success-color, #28a745); }
.proposal-section li.proposal-change::before { content: '~'; color: var(--warning-color, #f0ad4e); }
.proposal-section li.proposal-remove::before { content: '-'; color: var(--danger-color, #dc3545); }

/* App View Error & Quarantine States */
.app-eval-indicator.offline {
    color: var(--danger-color, #dc3545);
}

.widget-error-banner {
    background: var(--danger-color, #dc3545);
    color: #fff;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 2px;
    margin-bottom: 4px;
}

.widget-quarantined {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.widget-quarantined::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(220, 53, 69, 0.08) 10px,
        rgba(220, 53, 69, 0.08) 20px
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Iframe & Web Component Widget Styles */
.app-widget-iframe .app-widget-iframe-frame {
    display: block;
    width: 100%;
    border: none;
    min-height: 200px;
    border-radius: 0 0 6px 6px;
    background: var(--surface-color, #1a1a2e);
}

.app-widget-webcomponent {
    overflow: hidden;
}

/* App Empty State */
.app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--secondary-color);
    text-align: center;
    gap: 12px;
}

.app-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.app-empty-state p {
    font-size: 13px;
    max-width: 400px;
    margin: 0;
}

/* App View Density Toggles */
.density-comfortable .app-widget-body { padding: 12px; }
.density-comfortable .app-widget-header { padding: 6px 10px; }

.density-compact .app-widget-body { padding: 8px; }
.density-compact .app-widget-header { padding: 4px 8px; }

.density-dense .app-widget-body { padding: 4px; }
.density-dense .app-widget-header { padding: 2px 6px; font-size: 10px; }


/* ========== Device Protocol Map Styles ========== */

.device-protocol-map {
    max-height: 400px;
    overflow-y: auto;
}

.device-card {
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--bg-tertiary, #1e1e2e);
    overflow: hidden;
    transition: border-color 0.2s;
}

.device-card:hover {
    border-color: var(--accent-color, #4a90d9);
}

.device-card.expanded {
    border-color: var(--accent-color, #4a90d9);
}

.device-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    gap: 8px;
}

.device-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.device-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.device-hostname {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-color, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.ip-badge, .os-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-secondary, #2a2a3e);
    color: var(--secondary-color, #888);
}

.device-summary {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.device-stat {
    font-size: 10px;
    color: var(--secondary-color, #888);
}

.device-status {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}

.device-status.online {
    background: #28a74520;
    color: #28a745;
}

.device-status.offline {
    background: #dc354520;
    color: #dc3545;
}

.device-chevron {
    color: var(--secondary-color, #666);
    font-size: 10px;
    transition: transform 0.2s;
}

.device-card.expanded .device-chevron {
    transform: rotate(90deg);
}

.device-detail {
    border-top: 1px solid var(--border-color, #333);
    padding: 8px 10px;
    background: var(--bg-secondary, #1a1a2e);
}

.detail-section-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-color, #4a90d9);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.protocol-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.protocol-table th {
    text-align: left;
    padding: 3px 6px;
    color: var(--secondary-color, #888);
    font-weight: 600;
    font-size: 9px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color, #333);
}

.protocol-table td {
    padding: 3px 6px;
    color: var(--text-color, #ccc);
    border-bottom: 1px solid var(--border-color, #222);
}

.protocol-port {
    font-family: monospace;
    font-weight: 600;
    color: var(--accent-color, #4a90d9);
}

.protocol-name {
    font-weight: 500;
}

.protocol-unknown td {
    color: var(--secondary-color, #666);
    font-style: italic;
}

.ssl-badge {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
    background: #28a74520;
    color: #28a745;
    font-weight: 700;
}

.no-services {
    color: var(--secondary-color, #666);
    font-style: italic;
    text-align: center;
}

.device-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    justify-content: flex-end;
}

.btn-xs {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
}

/* Network Map Modal */

.network-map-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.network-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.network-map-content {
    position: relative;
    background: var(--bg-primary, #0f0f1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.network-map-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #333);
    gap: 12px;
}

.network-map-header h3 {
    margin: 0;
    font-size: 14px;
    flex: 1;
    color: var(--text-color, #e0e0e0);
}

.network-map-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--secondary-color, #888);
}

.network-map-stats span {
    padding: 2px 8px;
    background: var(--bg-tertiary, #1e1e2e);
    border-radius: 4px;
}

.network-map-body {
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.network-map-body h4 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--accent-color, #4a90d9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-node {
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-tertiary, #1e1e2e);
}

.map-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.map-node-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.map-node-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color, #e0e0e0);
}

.map-node-type {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-secondary, #2a2a3e);
    color: var(--secondary-color, #888);
    margin-left: auto;
}

.map-node-details {
    font-size: 11px;
    color: var(--secondary-color, #aaa);
}

.map-node-ips {
    font-family: monospace;
    font-size: 10px;
    margin-bottom: 2px;
}

.map-node-os {
    font-size: 10px;
    margin-bottom: 4px;
}

.map-node-services {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 3px;
}

.map-svc-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--accent-color, #4a90d9)20;
    color: var(--accent-color, #4a90d9);
}

.map-node-ports {
    font-size: 10px;
    font-family: monospace;
    color: var(--secondary-color, #666);
}

.map-connection {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: var(--bg-tertiary, #1e1e2e);
    font-size: 11px;
}

.map-conn-type {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.map-conn-network { background: #4a90d920; color: #4a90d9; }
.map-conn-database { background: #28a74520; color: #28a745; }
.map-conn-api { background: #fd7e1420; color: #fd7e14; }
.map-conn-ssh { background: #9b59b620; color: #9b59b6; }
.map-conn-cache { background: #ffc10720; color: #ffc107; }
.map-conn-queue { background: #e74c3c20; color: #e74c3c; }

.map-conn-label {
    flex: 1;
    color: var(--text-color, #ccc);
}

.map-conn-port {
    font-family: monospace;
    color: var(--secondary-color, #888);
}

.no-data {
    color: var(--secondary-color, #666);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.discovery-actions {
    display: flex;
    gap: 4px;
}