/* =============================================================================
   BIOS-STYLE RGB COLOR SYSTEM - CompoLyze
   Pure RGB colors for maximum retro computer aesthetic
   ============================================================================= */

:root {
  /* ===== BIOS BLACK ON WHITE COLOR SYSTEM ===== */
  /* Pure Black on White - Classic Computer Aesthetic */
  
  /* ===== BACKGROUND COLORS (Black on White) ===== */
  --bg-primary: #FFFFFF;        /* Pure White - Main background */
  --bg-secondary: #F5F5F5;      /* Light Gray - Secondary panels */
  --bg-interactive: #E0E0E0;    /* Medium Gray - Interactive elements */
  --bg-elevated: #EBEBEB;       /* Light Gray - Elevated surfaces */
  --bg-canvas: #FFFFFF;         /* Pure White - Canvas background */
  --bg-overlay: #FFFFFFF5;      /* Overlay background */
  
  /* ===== TEXT COLORS (High Contrast Black on White) ===== */
  --text-primary: #000000;      /* Pure Black - Primary text */
  --text-secondary: #000000;    /* Black - Secondary text/links */
  --text-tertiary: #555555;     /* Dark Gray - Tertiary text */
  --text-muted: #666666;        /* Gray - Muted text */
  --text-disabled: #999999;     /* Light Gray - Disabled text */
  --text-on-white: #FFFFFF;     /* White - Text on black backgrounds */
  
  /* ===== CTA & ACCENT COLORS (Flat Black BIOS) ===== */
  --cta-primary: #000000;       /* Black - Primary CTA (flat) */
  --cta-hover: #333333;         /* Dark Gray - CTA hover */
  --cta-active: #555555;        /* Medium Gray - CTA active */
  --accent-white: #000000;      /* Black - Primary accent */
  --accent-blue: #000000;       /* Black - Blue accent (no blue) */
  --accent-light-blue: #333333; /* Dark Gray - Soft accent */
  
  /* ===== STATUS COLORS (BIOS-Compatible Bright Colors) ===== */
  --status-success: #00db7c;    /* Bright Green - Success */
  --status-warning: #FFAA00 ;    /* Yellow - Warning */
  --status-error: #FF0000;      /* Red - Error */
  --status-info: #00FFFF;       /* Cyan - Info */
  
  /* ===== CONNECTION TYPE COLORS (Vibrant 8-bit Palette) ===== */
  --connection-high: #FF00FF;   /* Vibrant Magenta - High connectivity */
  --connection-medium: #00db7c;  /* Vibrant Green - Medium connectivity */
  --connection-low: #FFAA00;    /* Vibrant Orange - Low connectivity */
  --connection-none: #8888FF;   /* Vibrant Blue - No connections */
  
  /* ===== SPECIALIZED COLORS ===== */
  --color-collection: #FF00FF;  /* Vibrant Magenta - Collections */
  --color-purple: #CC00FF;      /* Vibrant Purple - Purple indicators */
  --color-purple-component: #9747FF; /* Component Set Purple - KEEP */
  --color-purple-light: #b47fff; /* Light Purple for hover states - KEEP */
  --color-blue-component: #3B82F6; /* Component Blue - Both (Consumer & Provider) - KEEP */
  --color-green-component: #10B981; /* Component Green - Consumer - KEEP */
  --color-orange-component: #FF9500; /* Component Orange - Provider - KEEP */
  --color-gray-component: #6B7280; /* Component Gray - Standalone - KEEP */
  --color-cyan-bright: #000000; /* Black for file usage */
  --color-purple-accent: #9747FF; /* Purple accent for paths - KEEP */
  --color-purple-accent-dark: #8b5cf6; /* Dark purple accent - KEEP */
  --color-purple-analytics: #9747FF; /* Purple for analytics - KEEP */
  --color-purple-analytics-08: rgba(151, 71, 255, 0.08);
  --color-purple-analytics-10: rgba(151, 71, 255, 0.1);
  --color-purple-analytics-20: rgba(151, 71, 255, 0.2);
  --color-gray-component-20: rgba(107, 114, 128, 0.2);
  --color-gray-component-30: rgba(107, 114, 128, 0.3);
  --color-cyan-file: #000000; /* Black for file sections */
  --color-cyan-file-08: rgba(0, 0, 0, 0.08);
  --color-cyan-file-20: rgba(0, 0, 0, 0.2);
  --accent-primary: #000000;    /* Black - Primary accent */
  --accent-cyan: #000000;       /* Black accent */
  
  /* ===== BORDER COLORS (Flat Black) ===== */
  --border-primary: #000000;    /* Black - Primary borders */
  --border-secondary: #555555;  /* Dark Gray - Secondary borders */
  --border-subtle: #999999;     /* Light Gray - Subtle borders */
  --border-accent: #000000;     /* Black - Accent borders */
  --border-cta: #000000;        /* Black - CTA borders */
  --border-default: #CCCCCC;    /* Default border for inputs */
  --border-interactive: #000000; /* Interactive border color */
  --border-hover: #777777;      /* Border hover state */
  
  /* ===== NO SHADOWS IN FLAT BIOS ===== */
  /* Shadows removed for flat 8-bit aesthetic */
  
  /* ===== OPACITY VARIATIONS ===== */
  --overlay-dark: rgba(255, 255, 255, 0.96);
  --overlay-medium: rgba(245, 245, 245, 0.9);
  --overlay-light: rgba(235, 235, 235, 0.75);
  
  --accent-white-05: rgba(0, 0, 0, 0.05);
  --accent-white-10: rgba(0, 0, 0, 0.1);
  --accent-white-20: rgba(0, 0, 0, 0.2);
  --accent-white-30: rgba(0, 0, 0, 0.3);
  
  --accent-blue-10: rgba(0, 0, 0, 0.1);
  --accent-blue-20: rgba(0, 0, 0, 0.2);
  --accent-blue-30: rgba(0, 0, 0, 0.3);
  
  --status-success-10: rgba(0, 255, 0, 0.1);
  --status-success-20: rgba(0, 255, 0, 0.2);
  
  --status-error-10: rgba(255, 0, 0, 0.1);
  --status-error-20: rgba(255, 0, 0, 0.2);
  
  --status-warning-10: rgba(255, 255, 0, 0.1);
  --status-warning-20: rgba(255, 255, 0, 0.2);
  
  --color-collection-10: rgba(255, 0, 255, 0.1);
  --color-collection-20: rgba(255, 0, 255, 0.2);
  
  --connection-high-10: rgba(255, 0, 255, 0.1);
  --connection-high-20: rgba(255, 0, 255, 0.2);
  
  --connection-medium-10: rgba(0, 255, 0, 0.1);
  --connection-medium-20: rgba(0, 255, 0, 0.2);
  
  --connection-low-10: rgba(255, 170, 0, 0.1);
  --connection-low-20: rgba(255, 170, 0, 0.2);
  
  --connection-none-10: rgba(107, 114, 128, 0.1);
  --connection-none-20: rgba(107, 114, 128, 0.2);
  
  --accent-purple-40: rgba(151, 71, 255, 0.4);
  --accent-green-05: rgba(16, 185, 129, 0.05);
  --bg-hover: rgba(0, 0, 0, 0.05);
  
  /* ===== GITHUB-STYLE UI COLORS (Black on White) ===== */
  --gh-bg-primary: #FFFFFF;     /* GitHub primary background */
  --gh-bg-secondary: #F5F5F5;   /* GitHub secondary background */
  --gh-bg-tertiary: #EBEBEB;    /* GitHub tertiary background */
  --gh-bg-elevated: #E0E0E0;    /* GitHub elevated background */
  --gh-bg-canvas: #FFFFFF;      /* GitHub canvas background */
  --gh-bg-hover: #F5F5F5;       /* GitHub hover background */
  --gh-bg-active: #E0E0E0;      /* GitHub active background */
  --gh-text-primary: #000000;   /* GitHub primary text */
  --gh-text-secondary: #555555; /* GitHub secondary text */
  --gh-text-link: #000000;      /* GitHub link color */
  --gh-border: #CCCCCC;         /* GitHub border color */
  --gh-border-hover: #777777;   /* GitHub border hover */
  --gh-success: #238636;        /* GitHub success color - KEEP */
  --gh-info: #000000;           /* GitHub info color */
  --gh-warning: #fb8500;        /* GitHub warning color - KEEP */
  --gh-danger: #da3633;         /* GitHub danger color - KEEP */
  --gh-muted: #666666;          /* GitHub muted color */
  
  /* ===== COMPONENT-SPECIFIC RGBA VARIATIONS ===== */
  --color-purple-component-60: rgba(139, 92, 246, 0.6);
  --color-purple-component-90: rgba(139, 92, 246, 0.9);
  --color-purple-component-40: rgba(139, 92, 246, 0.4);
  --color-purple-component-30: rgba(139, 92, 246, 0.3);
  --color-purple-accent-10: rgba(167, 139, 250, 0.1);
  --color-purple-accent-15: rgba(167, 139, 250, 0.15);
  --color-blue-component-08: rgba(59, 130, 246, 0.08);
  --color-blue-component-10: rgba(59, 130, 246, 0.1);
  --color-blue-component-12: rgba(59, 130, 246, 0.12);
  --color-blue-component-15: rgba(59, 130, 246, 0.15);
  --color-blue-component-25: rgba(59, 130, 246, 0.25);
  --color-blue-component-50: rgba(59, 130, 246, 0.5);
  --color-orange-component-10: rgba(255, 149, 0, 0.1);
  --color-cyan-bright-08: rgba(0, 0, 0, 0.08);
  --color-cyan-bright-10: rgba(0, 0, 0, 0.1);
  --color-cyan-bright-20: rgba(0, 0, 0, 0.2);
  --accent-white-40: rgba(0, 0, 0, 0.4);
  --accent-white-02: rgba(0, 0, 0, 0.2);
  --accent-black-20: rgba(0, 0, 0, 0.2);
  --accent-black-30: rgba(0, 0, 0, 0.3);
  --accent-black-50: rgba(0, 0, 0, 0.5);
  --accent-black-60: rgba(0, 0, 0, 0.6);
  
  /* ===== RISK/IMPACT INDICATOR COLORS ===== */
  --risk-high-bg: rgba(255, 59, 48, 0.15);
  --risk-high-border: rgba(255, 59, 48, 0.3);
  --risk-high-text: #ff3b30;
  --risk-medium-bg: rgba(255, 204, 0, 0.15);
  --risk-medium-border: rgba(255, 204, 0, 0.3);
  --risk-medium-text: #ffcc00;
  --risk-low-bg: rgba(52, 199, 89, 0.15);
  --risk-low-border: rgba(52, 199, 89, 0.3);
  --risk-low-text: #34c759;
  
  /* ===== SHADOW COLORS ===== */
  --shadow-primary: rgba(0, 0, 0, 1);
  --shadow-subtle: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.5);
  
  /* ===== BIOS DESIGN TOKENS ===== */
  --pixel-unit: 2px;
  --border-width: 2px;
  --border-width-thick: 4px;
  --border-radius: 0px;         /* No rounded corners for BIOS aesthetic */
  --shadow-offset: 4px;
  --shadow-offset-small: 2px;
  --shadow-offset-large: 8px;
  --transition-speed: 50ms;     /* Fast, snappy transitions */
  
  /* ===== TYPOGRAPHY TOKENS ===== */
  --font-bios: 'Consolas', 'Courier New', monospace;
  --font-logo: 'Jersey 10', 'Consolas', 'Courier New', monospace;
  --font-mono: 'Consolas', 'Courier New', monospace;
  
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* ===== SPACING TOKENS (8px grid) ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* ===== RESET AND BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

body {
    font-family: var(--font-bios);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    letter-spacing: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* BIOS-style high contrast - no glow needed */
}

/* Optional scan-line effect - subtle for BIOS feel */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 0.5px,
        transparent 0.5px,
        transparent 2px
    );
    z-index: 9999;
    opacity: 0.25;
}

/* ===== MAIN LAYOUT ===== */
.main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 500px;
    background: var(--bg-secondary);
    border-right: var(--border-width) solid var(--border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-header {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 400;
    padding: var(--space-md);
    border-bottom: var(--border-width) solid var(--border-primary);
    background: var(--bg-primary);
}

.sidebar-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

/* Make header content flex to align logo and button */
.sidebar-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* CompoLyze Header - Flat 8-bit BIOS Logo */
.sidebar-header-content h3 {
    margin: 0;
    padding: 8px 8px;
    font-family: var(--font-logo);
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: bold;
    background: var(--bg-primary);
    display: inline-block;
}

/* Header show-in-tree button */
.header-show-in-tree {
    background: var(--bg-interactive);
    border: var(--border-width) solid var(--border-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 18px;
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    font-family: var(--font-bios);
    line-height: 1;
}

.header-show-in-tree:hover {
    background: var(--cta-hover);
    color: var(--text-on-white);
}

.header-show-in-tree:active {
    background: var(--cta-active);
    transform: scale(0.95);
}

/* No animations in flat BIOS design */

/* Individual word styling for CompoLyze */
.sidebar-header-content h3 .compo-light {
    color: var(--text-primary);
}

.sidebar-header-content h3 .lyze-heavy {
    color: var(--text-primary);
}

.toggle-option:hover {
    color: var(--text-on-white);
    background: var(--cta-primary);
}

.sidebar-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* ===== BIOS BUTTONS ===== */
.collapse-all-btn,
.sidebar-close-btn {
    font-family: var(--font-bios);
    background: var(--bg-interactive);
    border: var(--border-width) solid var(--border-primary);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-weight: bold;
}

.collapse-all-btn:hover,
.sidebar-close-btn:hover {
    background: var(--cta-hover);
    color: var(--text-on-white);
}

.collapse-all-btn:active,
.sidebar-close-btn:active {
    background: var(--cta-active);
}

.sidebar-content {
    font-size: var(--font-size-base);
    flex: 1;
    overflow-y: auto;
    padding-top: 0;
    background: var(--bg-secondary);
}

/* ===== BIOS SEARCH BOX ===== */
.search-box {
    font-family: var(--font-bios);
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: var(--border-width-thick) solid var(--border-primary);
    width: 100%;
    font-weight: normal;
}

.search-box:focus {
    outline: none;
    border-color: var(--cta-primary);
    background: var(--bg-primary);
}

.search-box::placeholder {
    color: var(--text-muted);
}

/* Search in Sidebar */
.sidebar-search {
    margin-top: var(--space-sm);
    position: relative;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* New container for search box and reset button */
.search-box-container {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    border: var(--border-width) solid var(--text-primary);
    background: var(--bg-canvas);
}

.sidebar-search .search-box {
    width: 100%;
    height: 40px;
    font-size: var(--font-size-base);
    padding: var(--space-sm) 40px var(--space-sm) var(--space-sm);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-bios);
    box-sizing: border-box;
}

.sidebar-search .search-box:focus {
    outline: none;
    background: var(--bg-primary);
}

.search-reset-btn {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-xl);
    padding: var(--space-xs);
    line-height: 1;
}

.search-reset-btn:hover {
    color: var(--status-error);
    background: var(--bg-interactive);
}

/* Sidebar Controls in Header */
.sidebar-search .sidebar-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.sidebar-search .sidebar-controls .collapse-all-btn,
.sidebar-search .sidebar-controls .turn-all-off-btn {
    font-family: var(--font-bios);
    background: var(--bg-interactive);
    border: var(--border-width) solid var(--border-primary);
    color: var(--text-primary);
    padding: var(--space-xs);
    cursor: pointer;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
}

.sidebar-search .sidebar-controls .collapse-all-btn:hover,
.sidebar-search .sidebar-controls .turn-all-off-btn:hover {
    background: var(--cta-hover);
    color: var(--text-on-white);
}

/* Mode selector styling moved to unified-dropdowns.css for consistency */

/* ===== SIDEBAR POSITIONING & TRANSITIONS ===== */
.sidebar.tree {
    position: relative;
    left: 0;
    top: 0;
    height: auto;
    z-index: 100;
    transition: width 0.3s ease, transform 0.3s ease;
    padding: 0;
    overflow-y: auto;
}

/* ===== SIDEBAR TOGGLE BUTTON (8-BIT STYLE) ===== */
.sidebar-toggle-btn {
    position: absolute;
    top: var(--space-md);
    right: -48px;
    width: 40px;
    height: 40px;
    background: var(--bg-interactive);
    border: var(--border-width) solid var(--border-primary);
    color: var(--text-primary);
    cursor: pointer;
    display: none; /* Hide by default on desktop */
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    z-index: 101;
    user-select: none;
    font-family: var(--font-bios);
}

.sidebar-toggle-btn:hover {
    background: var(--cta-primary);
    color: var(--text-on-white);
    border-color: var(--border-cta);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-primary);
}

.sidebar-toggle-btn:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 var(--shadow-primary);
}

.sidebar-toggle-btn .toggle-icon {
    transition: transform var(--transition-speed);
    display: inline-block;
}

/* Sidebar collapsed state - REMOVE for desktop */
.sidebar.tree.collapsed {
    width: 500px; /* Keep normal width on desktop */
    min-width: 500px;
    border-right: var(--border-width) solid var(--border-primary);
    overflow: visible; /* Don't hide on desktop */
}

.sidebar.tree.collapsed .sidebar-toggle-btn {
    right: -48px; /* Keep normal position */
}

/* Canvas expands when sidebar is collapsed - REMOVE for desktop */
.main-container:has(.sidebar.collapsed) .canvas-container {
    margin-left: 0; /* This will be overridden by media query */
}

/* Add subtle visual feedback for collapsed state - REMOVE */
/* .sidebar.tree.collapsed::after - removed */

/* Smooth content transitions - REMOVE for desktop */
.sidebar-content {
    transition: none; /* No transition on desktop */
    opacity: 1; /* Always visible on desktop */
}

.sidebar.tree.collapsed .sidebar-content {
    opacity: 1; /* Always visible on desktop */
}

/* Mobile-specific behavior */
@media (max-width: 768px) {
    /* Show toggle button only on mobile/tablet - floating center-left, match canvas-btn style */
    .sidebar-toggle-btn {
        display: flex !important; /* Show on mobile with !important */
        position: fixed !important;
        top: 50% !important;
        left: 16px !important;
        right: auto !important;
        transform: translateY(-50%) !important; /* Center vertically */
        z-index: 1001;
        background: var(--bg-interactive) !important;
        color: var(--text-primary) !important;
        border: var(--border-width) solid var(--border-primary) !important;
        box-shadow: var(--shadow-offset-small) var(--shadow-offset-small) 0 var(--shadow-primary) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 0px !important; /* BIOS aesthetic */
        font-size: 16px;
        transition: all 0.2s;
    }
    
    .sidebar-toggle-btn:hover {
        background: #30363d !important;
        border-color: var(--accent-primary) !important;
    }
    
    .sidebar.tree {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 85vw; /* Use viewport width for better mobile experience */
        max-width: 400px;
        transform: translateX(-100%); /* Start collapsed on mobile */
        z-index: 1000;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease; /* Only animate transform */
    }
    
    .sidebar.tree.collapsed {
        width: 85vw; /* Keep responsive width on mobile for proper animation */
        max-width: 400px;
        transform: translateX(-100%);
        border-right: none;
        overflow: hidden;
    }
    
    .sidebar.tree.open {
        transform: translateX(0) !important; /* Override collapsed state */
    }
    
    .sidebar.tree.open + .sidebar-toggle-btn,
    .sidebar.tree.open ~ .sidebar-toggle-btn {
        left: calc(85vw + 16px) !important; /* Adjust position when sidebar is open */
    }
    
    /* Mobile backdrop */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .sidebar.tree.open ~ .sidebar-backdrop {
        display: block;
        opacity: 1;
    }
    
    /* Hide version control bar when mobile sidebar is open */
    .sidebar.tree.open ~ * .file-info-container {
        display: none !important;
    }
    
    /* Alternative - hide version control when body has mobile-sidebar-open class */
    body.mobile-sidebar-open .file-info-container {
        display: none !important;
    }
    
    /* Prevent body scroll when mobile sidebar is open */
    body.mobile-sidebar-open {
        overflow: hidden;
    }
    
    /* Mobile-friendly search and controls */
    .sidebar-search .search-box {
        height: 44px; /* Touch-friendly height */
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Larger touch targets for mobile */
    .collapse-all-btn,
    .turn-all-off-btn {
        
        padding: 4px 4px;
        font-size: 12px;
    }
    
    /* Adjust sidebar content padding for mobile */
    .sidebar-content {
        padding-right: 12px;
        transition: none; /* No transitions on mobile */
        opacity: 1; /* Always visible when sidebar is shown */
    }
    
    /* Make tree items more touch-friendly */
    .tree-node-header {
        min-height: 40px;
        padding: 10px 12px;
    }
}

/* Tablet-specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar.tree {
        width: 400px; /* Slightly smaller on tablets */
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .sidebar.tree {
        width: 90vw;
    }
    
    .sidebar.tree.open + .sidebar-toggle-btn {
        left: calc(90vw + 8px);
    }
    
    .sidebar-toggle-btn {
        left: 8px;
        top: 8px;
    }
}

.sidebar.tree.open {
    left: 0;
}

body.sidebar-open .main-container {
    margin-left: 0;
}

/* =============================================================================
   8-BIT PIXEL SCROLLBAR STYLING
   ============================================================================= */

/* Global scrollbar styling for consistent 8-bit appearance */
.global-scrollbar::-webkit-scrollbar {
    width: 16px;
    height: 16px; /* For horizontal scrollbars */
}

.global-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-canvas);
    border: var(--border-width) solid var(--border-secondary);
}

.global-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border: var(--border-width) solid var(--bg-canvas);
}

.global-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}

.global-scrollbar::-webkit-scrollbar-corner {
    background: var(--bg-canvas);
}

/* Firefox scrollbar styling */
.global-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) var(--bg-canvas);
}

/* =============================================================================
   8-BIT UI STATUS INDICATOR
   ============================================================================= */

.ui-status-indicator {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    background: var(--status-success);
    color: var(--bg-primary);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-bios);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-speed);
    border: var(--border-width) solid var(--shadow-primary);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-primary);
    text-transform: uppercase;
}

.ui-status-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

.ui-status-indicator .ui-status-icon {
    font-size: var(--font-size-base);
    animation: pixelBlink 1s steps(2) infinite;
}

@keyframes pixelBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ui-status-indicator .ui-status-text {
    white-space: nowrap;
}

/* Hide after 3 seconds */
.ui-status-indicator.auto-hide {
    animation: statusFadeOut 0.5s ease-out 3s forwards;
}

@keyframes statusFadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* =============================================================================
   8-BIT GLOBAL UTILITIES
   ============================================================================= */

/* Pixel-perfect borders */
.pixel-border {
    border: var(--border-width) solid var(--border-primary);
}

.pixel-border-accent {
    border: var(--border-width) solid var(--accent-cyan);
}

.pixel-border-cta {
    border: var(--border-width) solid var(--cta-primary);
}

/* Pixel shadows */
.pixel-shadow {
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-primary);
}

.pixel-shadow-small {
    box-shadow: var(--shadow-offset-small) var(--shadow-offset-small) 0 var(--shadow-primary);
}

/* Pixel glow effects */
.pixel-glow-cyan {
    text-shadow: 0 0 4px var(--accent-cyan), 0 0 8px var(--accent-cyan);
}

.pixel-glow-pink {
    text-shadow: 0 0 4px var(--cta-primary), 0 0 8px var(--cta-primary);
}

/* 8-bit button class for reuse */
.btn-8bit {
    font-family: var(--font-bios);
    background: var(--bg-interactive);
    border: var(--border-width) solid var(--border-primary);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all var(--transition-speed);
    box-shadow: var(--shadow-offset-small) var(--shadow-offset-small) 0 var(--shadow-primary);
    text-transform: uppercase;
    white-space: nowrap;
}

.btn-8bit:hover {
    background: var(--cta-primary);
    color: var(--text-on-white);
    border-color: var(--border-cta);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-primary);
}

.btn-8bit:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 var(--shadow-primary);
}

.btn-8bit.btn-accent {
    background: var(--accent-cyan);
    color: var(--text-on-white);
    border-color: var(--accent-cyan);
}

.btn-8bit.btn-success {
    background: var(--status-success);
    color: var(--text-on-white);
    border-color: var(--status-success);
}

.btn-8bit.btn-error {
    background: var(--status-error);
    color: var(--text-primary);
    border-color: var(--status-error);
}

/* 8-bit panel class for reuse */
.panel-8bit {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-primary);
    padding: var(--space-md);
}

/* =============================================================================
   COLOR INDICATOR CLASSES - For Tree and Graph Nodes
   ============================================================================= */

/* Collection/Component Set Indicators */
.color-indicator-collection {
    background: var(--color-collection) !important;
    border-color: var(--color-collection) !important;
}

/* Connection Type Classes */
.color-indicator-high {
    background: var(--connection-high) !important;
    border-color: var(--connection-high) !important;
}

.color-indicator-medium {
    background: var(--connection-medium) !important;
    border-color: var(--connection-medium) !important;
}

.color-indicator-low {
    background: var(--connection-low) !important;
    border-color: var(--connection-low) !important;
}

.color-indicator-none {
    background: var(--connection-none) !important;
    border-color: var(--connection-none) !important;
}

/* Default/Fallback Indicator */
.color-indicator-default {
    background: var(--text-muted) !important;
    border-color: var(--text-muted) !important;
}

/* Text Color Utilities for Labels on Colored Backgrounds */
.text-color-light {
    color: #FFFFFF !important;
}

.text-color-dark {
    color: #000000 !important;
}

/* 8-bit input class for reuse */
.input-8bit {
    font-family: var(--font-bios);
    background: var(--bg-canvas);
    border: var(--border-width) solid var(--border-primary);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
}

.input-8bit:focus {
    outline: none;
    border-color: var(--border-primary);
}

.input-8bit::placeholder {
    color: var(--text-muted);
}