/**
 * TreeView Component - Main Layout - 100% INDEPENDENT
 * =====================================================
 * Main layout container for three sub-components
 * All styles scoped to .treeview-content-root
 * 
 * Sub-components:
 * - Area 1: treeview-hierarchy (Tree navigation)
 * - Area 2: treeview-table (Historic data)
 * - Area 3: treeview-chart (Trend graph)
 * 
 * Component Purpose: Layout orchestrator for TreeView tab
 * Created: 2024-12-26
 * Version: 3.0 - Sub-component Architecture
 */

/* COMPONENT ISOLATION CONTAINER */
.treeview-content-root {
    /* CSS Container Isolation */
    isolation: isolate;
    contain: layout style;
    
    /* Base styles */
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    box-sizing: border-box;
    
    /* Layout */
    position: relative;
    width: 100%;
    min-height: 600px;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Ensure all child elements use component scoping */
.treeview-content-root *,
.treeview-content-root *::before,
.treeview-content-root *::after {
    box-sizing: border-box;
}

/* TreeView Component Variables */
.treeview-content-root {
    /* Colors */
    --treeview-primary: #2563EB;
    --treeview-primary-dark: #1D4ED8;
    --treeview-primary-light: #3B82F6;
    --treeview-gray-50: #F9FAFB;
    --treeview-gray-100: #F3F4F6;
    --treeview-gray-200: #E5E7EB;
    --treeview-gray-300: #D1D5DB;
    --treeview-gray-400: #9CA3AF;
    --treeview-gray-500: #6B7280;
    --treeview-gray-600: #4B5563;
    --treeview-gray-700: #374151;
    --treeview-gray-800: #1F2937;
    --treeview-gray-900: #111827;
    --treeview-white: #FFFFFF;
    
    /* Spacing */
    --treeview-spacing-xs: 0.25rem;
    --treeview-spacing-sm: 0.5rem;
    --treeview-spacing-md: 0.75rem;
    --treeview-spacing-lg: 1rem;
    --treeview-spacing-xl: 1.5rem;
    --treeview-spacing-2xl: 2rem;
    
    /* Border Radius */
    --treeview-radius-sm: 4px;
    --treeview-radius-md: 6px;
    --treeview-radius-lg: 8px;
    --treeview-radius-xl: 12px;
    
    /* Shadows */
    --treeview-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --treeview-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --treeview-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Transitions */
    --treeview-transition-fast: 0.15s ease-in-out;
    --treeview-transition-normal: 0.3s ease;
}

/* ============================================
   THREE-AREA HORIZONTAL LAYOUT SYSTEM
   ============================================ */

/* Main container - fills viewport height, horizontal layout */
.treeview-content-root .treeview-main-layout {
    display: flex;
    flex-direction: row; /* Horizontal side-by-side */
    gap: var(--treeview-spacing-lg);
    padding: var(--treeview-spacing-lg);
    height: calc(100vh - 160px); /* Account for navbar + tabs + padding + space for stats below */
    max-height: calc(100vh - 160px);
    overflow: hidden;
}

/* Area 1: Hierarchical Tree View (Left, 28% width) */
.treeview-content-root .treeview-area-1 {
    flex: 0 0 28%;
    min-width: 280px;
    max-width: 450px;
    height: 100%;
    background: var(--treeview-white);
    border: 1px solid var(--treeview-gray-200);
    border-radius: var(--treeview-radius-lg);
    box-shadow: var(--treeview-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Area 2: Historic Data Table (Middle, 30% width) */
.treeview-content-root .treeview-area-2 {
    flex: 1 1 30%;
    min-width: 300px;
    height: 100%;
    background: var(--treeview-white);
    border: 1px solid var(--treeview-gray-200);
    border-radius: var(--treeview-radius-lg);
    box-shadow: var(--treeview-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Area 3: Trend Graph (Right, 42% width) */
.treeview-content-root .treeview-area-3 {
    flex: 1 1 42%;
    min-width: 400px;
    height: 100%;
    background: var(--treeview-white);
    border: 1px solid var(--treeview-gray-200);
    border-radius: var(--treeview-radius-lg);
    box-shadow: var(--treeview-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Large screens - maintain horizontal layout */
@media (min-width: 1400px) {
    .treeview-content-root .treeview-area-1 {
        flex: 0 0 28%;
    }
    
    .treeview-content-root .treeview-area-2 {
        flex: 1 1 30%;
    }
    
    .treeview-content-root .treeview-area-3 {
        flex: 1 1 42%;
    }
}

/* Medium screens - adjust widths */
@media (max-width: 1200px) {
    .treeview-content-root .treeview-main-layout {
        height: calc(100vh - 180px);
    }
    
    .treeview-content-root .treeview-area-1 {
        min-width: 240px;
        flex: 0 0 28%;
    }
    
    .treeview-content-root .treeview-area-2 {
        min-width: 280px;
        flex: 1 1 30%;
    }
    
    .treeview-content-root .treeview-area-3 {
        min-width: 350px;
        flex: 1 1 42%;
    }
}

/* Tablet screens - stack vertically if too narrow */
@media (max-width: 1024px) {
    .treeview-content-root .treeview-main-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 180px);
        overflow-y: auto;
    }
    
    .treeview-content-root .treeview-area-1 {
        flex: 0 0 auto;
        width: 100%;
        height: 300px;
        min-width: unset;
        max-width: unset;
    }
    
    .treeview-content-root .treeview-area-2 {
        flex: 0 0 auto;
        width: 100%;
        height: 350px;
        min-width: unset;
    }
    
    .treeview-content-root .treeview-area-3 {
        flex: 0 0 auto;
        width: 100%;
        height: 400px;
        min-width: unset;
    }
}

/* Mobile screens */
@media (max-width: 768px) {
    .treeview-content-root .treeview-main-layout {
        padding: var(--treeview-spacing-md);
        gap: var(--treeview-spacing-md);
    }
    
    .treeview-content-root .treeview-area-1 {
        height: 250px;
    }
    
    .treeview-content-root .treeview-area-2 {
        height: 300px;
    }
    
    .treeview-content-root .treeview-area-3 {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .treeview-content-root .treeview-main-layout {
        padding: var(--treeview-spacing-sm);
        gap: var(--treeview-spacing-sm);
    }
}

/* Support for zoom levels - adjust viewport height calculation */
@media (min-resolution: 120dpi) {
    .treeview-content-root .treeview-main-layout {
        height: calc(100vh - 140px);
    }
}

@media (min-resolution: 144dpi) {
    .treeview-content-root .treeview-main-layout {
        height: calc(100vh - 90px);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .treeview-content-root .treeview-area-1,
    .treeview-content-root .treeview-area-2,
    .treeview-content-root .treeview-area-3 {
        border-width: 2px;
        border-color: var(--treeview-gray-600);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .treeview-content-root * {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus visible for keyboard navigation */
.treeview-content-root *:focus-visible {
    outline: 2px solid var(--treeview-primary);
    outline-offset: 2px;
}