/* ============================================================================
   VSCode-Inspired Interactive Layout System
   ============================================================================
   
   This CSS file defines the styling for a resizable panel layout system with:
   - Left sidebar (flow mode - pushes content)
   - Right sidebar (overlay mode - floats above content)
   - Bottom panel (configurable mode - flow or overlay)
   - Main editor area (flexible, responds to panel sizing)
   
   The layout uses a combination of:
   - Flexbox for main layout structure
   - CSS positioning (relative, absolute, fixed) for different panel modes
   - CSS transitions for smooth expand/collapse animations
   - CSS custom properties for easy theming
   
   Companion JavaScript: assets/splitter.js (handles resizing and collapsing)
   ============================================================================ */

/* ============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================ */
:root {
    /* Resize handle appearance */
    --color-dragbar: rgb(10, 91, 242);
    /* Normal state */
    --color-dragbar-hover: rgb(28, 63, 236);
    /* Hover state */
    --scale-dragbar: 3;
    /* Hover expansion multiplier */

    /* Color scheme (VSCode dark theme inspired) */
    --color-bg-dark: #1e1e1e;
    /* Main background */
    --color-bg-darker: #252526;
    /* Sidebar tab bar */
    --color-bg-light: #fff;
    /* Editor background */
    --color-border: #333333;
    /* Borders and dividers */
    --color-text-primary: #fff;
    /* Primary text */
    --color-text-secondary: #ccc;
    /* Secondary text */

    /* Sidebar dimensions */
    --sidebar-width: 500px;
    /* Default width */
    --sidebar-max-width: 600px;
    /* Maximum width */
    --sidebar-min-width: 50px;
    /* Minimum width */
    --sidebar-tabs-width: 50px;
    /* Animation timing */
    --transition-fast: 120ms;
    /* Quick transitions */
    --transition-medium: 200ms;
    /* Standard transitions */

}

/* ============================================================================
   BASE STYLES
   ============================================================================ */
/* Reset default browser styles and set full-screen layout */
html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    /* Prevent scrollbars on body */
}

/* Main app container
   - display: flex = horizontal layout (row)
   - height: 100vh = full viewport height
   - Structure: left-sidebar | content-wrapper | right-sidebar
*/
.app-container {
    display: flex;
    flex-direction: row;
    height: 97vh;
    width: 100vw;
}

/* ============================================================================
   ACTIVITY BAR (Optional - for future use)
   ============================================================================
   
   Note: This is not currently used in the layout but provided for future expansion.
   In VSCode, the activity bar is the narrow leftmost bar with large icons.
   
   To use: Add an .activity-bar div as the first child of .app-container
   Example: File Explorer, Search, Source Control, Run & Debug, Extensions
   ============================================================================ */
.activity-bar {
    width: 48px;
    background: #0f1720;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 6px;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.activity-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9fb7c9;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition-fast) ease,
        color var(--transition-fast) ease;
}

.activity-icon:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary);
}

.activity-icon.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
}

/* ============================================================================
   SIDEBAR & TAB CONTENT
   ============================================================================ */
/* Base sidebar styling
   - display: flex = enables tab bar + content panel layout
   - flex-direction: row = tabs on left, content on right (left sidebar)
                          tabs on right, content on left (right sidebar)
*/
.sidebar {
    display: flex;
    flex-direction: row;
}

/* -------- LEFT SIDEBAR -------- */
/* Base: Full height, participates in flex layout */
.sidebar--left {
    height: 100vh;
}

/* Flow mode: Normal document flow, pushes content-wrapper to the right */
.sidebar--left.sidebar--flow {
    position: relative;
}

/* Overlay mode: Fixed position, floats above content
   - z-index: 1001 = above right sidebar (1000) and bottom panel (999)
*/
.sidebar--left.sidebar--overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* -------- RIGHT SIDEBAR -------- */
/* Base: Full height */
.sidebar--right {
    height: 100vh;
}

/* Flow mode: Normal document flow, pushes content-wrapper to the left */
.sidebar--right.sidebar--flow {
    position: relative;
}

/* Overlay mode: Fixed position, floats above content
   - z-index: 1000 = above bottom panel (999) but below left sidebar (1001)
   - Tab bar (60px) is always visible on the right edge
*/
.sidebar--right.sidebar--overlay {
    position: fixed;
    top: 30px; /* Below Navbar */
    right: 0;
    z-index: 1000;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}

/* -------- SIDEBAR VISUAL STYLING -------- */
/* Left sidebar: Semi-transparent backgrounds */
.sidebar--left > .vertical-tabs {
    background-color: rgba(37, 37, 38, 0.95);
    width: 50px;
}

.sidebar--left > .tab-content {
    background-color: rgba(30, 30, 30, 0.95);
    padding: 0 !important;
}

/* Right sidebar: Semi-transparent backgrounds with glass effect
   - backdrop-filter: Creates blur effect for content behind (when supported)
*/
.sidebar--right > .vertical-tabs {
    background-color: rgba(38, 37, 37, 0.95);
}

.sidebar--right > .tab-content {
    background-color: rgba(30, 30, 30, 0.95);
}

/* -------- RIGHT SIDEBAR LAYOUT -------- */
/* Special positioning: Tab bar on right, content panel on left */
.sidebar--right > .vertical-tabs {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: var(--sidebar-tabs-width);
}

.sidebar--right > .tab-content {
    position: absolute;
    right: var(--sidebar-tabs-width);
    /* Positioned left of 60px tab bar */
    top: 0;
    height: 100%;
    width: 240px;
    box-sizing: border-box;
}

/* -------- OVERLAY MODE POINTER EVENTS -------- */
/* Allow clicks to pass through collapsed overlay sidebars
   This prevents blocking content when sidebar is collapsed
*/
.sidebar--overlay {
    pointer-events: none;
}

.sidebar--overlay>* {
    pointer-events: auto;
}

/* ============================================================================
   RESIZABLE PANEL SYSTEM (Unified for all panels)
   ============================================================================
   
   This system handles three types of panels:
   1. Left sidebar (collapsible, resizable from right edge)
   2. Right sidebar (collapsible, resizable from left edge)
   3. Bottom panel (always visible, resizable from top edge)
   
   JavaScript (splitter.js) handles the resize logic and state management.
   ============================================================================ */

/* -------- SIDEBAR TAB CONTENT -------- */
/* CRITICAL: Use direct child selector (>) to ONLY target the primary sidebar's main tab-content
   DO NOT match nested tab-content elements (e.g., accordion tabs or dbc.Tabs inside the sidebar)
   
   - display: none initially (becomes block when .ready is added)
   - overflow: hidden (prevents content overflow during collapse animation)
   - transition: smooth width animation on collapse/expand
*/
.sidebar--left > .tab-content,
.sidebar--right > .tab-content {
    box-sizing: border-box;
    /* overflow: hidden; */
    overflow: auto !important;
    transition: width var(--transition-fast) ease,
        visibility 0s var(--transition-fast);
    padding: 5px;
    display: none;
    width: var(--sidebar-width);
    min-width: 0;
    max-width: none;
}

/* -------- BOTTOM PANEL TAB CONTENT -------- */
/* Bottom panel is always visible (not collapsible like sidebars) */
.bottom-panel > .tab-content {
    box-sizing: border-box;
    overflow: auto;
    padding: 3px;
    display: block;
    width: 100%;
    height: 100%;
}

/* -------- PANEL STATE CLASSES -------- */
/* Ready: Panel is initialized and can be shown
   CRITICAL: Use direct child selector (>) to only match the sidebar's primary tab-content
*/
.sidebar--left > .tab-content.ready,
.sidebar--right > .tab-content.ready {
    display: block;
}

/* Collapsed: Panel is hidden but still in DOM (JS can measure it)
   IMPORTANT: Do NOT use display:none here - JS needs to read dimensions
   CRITICAL: Use direct child selector (>) to only match the sidebar's primary tab-content
*/
.sidebar--left > .tab-content.collapsed,
.sidebar--right > .tab-content.collapsed {
    width: 0 !important;
    padding: 0 !important;
    visibility: hidden;
    opacity: 0;
    border: none;
}

/* Expanded: Panel is visible and interactive
   - Width/height is set dynamically by JavaScript
   - Preserves user's last resize preference
   CRITICAL: Use direct child selector (>) to only match the sidebar's primary tab-content
*/
.sidebar--left > .tab-content.expanded,
.sidebar--right > .tab-content.expanded {
    visibility: visible;
    opacity: 1;
    /* padding: 20px; */
}

/* -------- RESIZE HANDLES -------- */
/* Visual indicators for resize edges (borders that highlight on hover)
   CRITICAL: Use direct child selector (>) to only affect the primary sidebar tab-content
*/
.sidebar--left > .tab-content.expanded {
    border-right: 2px solid transparent;
}

.sidebar--right > .tab-content.expanded {
    border-left: 2px solid transparent;
}

/* Hover effect: Show resize handle 
   CRITICAL: Use direct child selector (>) to only affect the primary sidebar tab-content
*/
.sidebar--left > .tab-content.expanded:hover {
    /* border-right-color: rgba(237, 27, 27, 0.5); */
    border-right-color: rgba(112, 111, 111, 0.891);
}

.sidebar--right > .tab-content.expanded:hover {
    /* border-left-color: rgba(235, 19, 19, 0.5); */
    border-left-color: rgba(112, 111, 111, 0.891);
}

/* VSCode-inspired layout styling
   Applied to sidebar elements for consistent theming
*/
.vscode-layout {
    display: flex;
    height: 100vh;
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: "Segoe UI", sans-serif;
}

/* ============================================================================
   VERTICAL TABS (Sidebar Navigation)
   ============================================================================
   
   Tab bars for left and right sidebars:
   - 60px wide, always visible (even when content panel is collapsed)
   - Vertical stack of icon-only buttons
   - Clicking a tab toggles the content panel
   - Icons are added via CSS ::before pseudo-elements (see Tab Icons section)
   ============================================================================ */
.vertical-tabs {
    display: flex;
    flex-direction: column;
    width: 60px;
    background-color: var(--color-bg-darker);
    border-right: 1px solid var(--color-border);
    align-items: center;
    padding-top: 8px;
}

/* Individual tab styling
   - 50px height for comfortable click target
   - Icons added via ::before pseudo-elements (see Tab Icons section below)
*/
.sidebar__tabs .nav-link {
    color: var(--color-text-secondary);
    font-size: 20px;
    height: 50px;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;
    transition: background-color var(--transition-medium) ease,
        color var(--transition-medium) ease;
}

/* Hover state */
.sidebar__tabs .nav-link:hover {
    background-color: #37373d !important;
    color: var(--color-text-primary) !important;
}

/* Active state (panel is expanded) */
.sidebar__tabs .nav-link.active {
    background-color: var(--color-border) !important;
    color: #61dafb !important;
}

/* Right sidebar: Mirror the border (left instead of right) */
.sidebar__tabs--right {
    border-right: none;
    border-left: 1px solid var(--color-border);
}

/* ============================================================================
   HORIZONTAL TABS (Bottom Panel - VSCode style)
   ============================================================================
   
   Tab bar for bottom panel:
   - Horizontal row of text labels (Output, Logs, Errors, etc.)
   - Similar to VSCode's panel tabs
   - Always visible (bottom panel doesn't collapse)
   - Active tab indicated by bottom border
   ============================================================================ */
.horizontal-tabs {
    display: flex;
    flex-direction: row;
    background-color: var(--color-bg-darker);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    gap: 0;
}

/* Individual tab styling
   - Smaller font (13px) compared to vertical tabs
   - Text labels (not icon-only)
*/
.horizontal-tabs .nav-link {
    color: rgba(204, 204, 204, 0.6);
    font-size: 0.75rem;
    padding: 3px 12px;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent;
    transition: color var(--transition-fast) ease;
    font-weight: 400;

}

/* Hover state */
.horizontal-tabs .nav-link:hover {
    color: var(--color-text-primary);
    background-color: transparent !important;
}

/* Active state: Blue underline */
.horizontal-tabs .nav-link.active {
    color: var(--color-text-primary) !important;
    background-color: transparent !important;
    border-bottom: 2px solid rgba(210, 180, 140, 0.856) !important;
}

/* ============================================================================
   SIDEBAR PANELS (Legacy/Unused)
   ============================================================================
   
   Note: These classes are not currently used in the layout.
   The current implementation uses Bootstrap's tab-content system instead.
   Kept for potential future use or backward compatibility.
   ============================================================================ */
.sidebar-panel {
    display: none;
    padding: 8px;
}

.sidebar-panel.active {
    display: block;
}

/* ============================================================================
   CONTENT WRAPPER & PANELS
   ============================================================================ */
/* Main content wrapper - contains editor and bottom panel
   - flex: 1 = fills remaining space between sidebars
   - position: relative = creates positioning context for bottom panel overlay mode
   - margin-right: 60px = space for right sidebar tabs (always visible)
*/
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 0;
    margin-right: 50px; /* Space for right sidebar tabs */
    position: relative;
}

/* Main editor/view panel
   - flex: 1 = fills available space above bottom panel
   - overflow: auto = enables scrolling if content is larger than container
*/
.editor-panel {
    flex: 1;
    min-height: 50px;
    overflow: auto;
    padding: 0px;
    margin: 0;
    /* background-color: var(--color-bg-light); */
    width: 100%;
    margin-bottom: 0;
}

/* Bottom panel - Base styles
   - border-top: visual indicator for resize handle
   - min-height: prevents collapsing completely
*/
.bottom-panel {
    min-height: 75px !important;
    background-color: rgba(29, 29, 29, 1);
    /* background-color: rgb(31, 41, 54, 0.9); */
    border-top: 4px solid transparent;
}

/* Hover effect on resize handle */
.bottom-panel:hover {
    border-top-color: rgba(75, 75, 75, 0.5);
}

/* Bottom panel - Flow mode
   - position: relative = normal document flow
   - Pushes editor panel up when expanded
   - Part of content-wrapper's flex layout
*/
.bottom-panel--flow {
    position: relative;
    height: 200px;
    width: 100%;
}

/* Bottom panel - Overlay mode
   - position: absolute = positioned relative to content-wrapper (not viewport!)
   - Floats above editor panel (editor keeps its size)
   - left: 0, right: 0 = spans full width of content-wrapper
   - CRITICAL: content-wrapper must have position: relative for this to work
   - z-index: 999 = appears above editor but below right sidebar
*/
.bottom-panel--overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 999;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

/* Generic panel component styles */
.panel__title {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 1.2rem;
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
/* Prevent text selection while dragging
   - Applied to body element by JavaScript during active drag operations
   - Prevents annoying text selection when dragging panels
   - Automatically removed when drag ends
*/
.dragging {
    user-select: none;
}

/* ============================================================================
   VSCODE-STYLE ACCORDION (Explorer Panel)
   ============================================================================
   
   Custom styling for .sidebar-accordion to match VSCode's explorer panel:
   - Dark background with subtle borders
   - Collapsible sections with chevron indicators
   - Hover states for interactive elements
   - Tight spacing and clean typography
   ============================================================================ */

/* Accordion container - Remove Bootstrap defaults */
.sidebar-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(255, 255, 255, 0.1);
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    background-color: transparent;
    /* border: 2px solid red; */
}

/* Accordion items - Clean spacing */
.sidebar-accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sidebar-accordion .accordion-item:first-of-type,
.sidebar-accordion .accordion-item:last-of-type {
    border-radius: 0;
}

.sidebar-accordion .accordion-item:first-of-type {
    padding-top: 0.5rem;
}

.sidebar-accordion .accordion-header {
    padding-bottom: 0.5rem;
}

.sidebar-accordion .accordion-body {
    padding-bottom: 1rem !important;
}

/* Accordion header/button - VSCode style */
.sidebar-accordion .accordion-button {
    background-color: transparent !important;
    color: rgba(204, 204, 204, 0.9) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    /* text-transform: uppercase !important; */
    letter-spacing: 0.5px !important;
    padding: 8px 12px !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.1s ease;
}

/* Hover state */
.sidebar-accordion .accordion-button:hover {
    background-color: rgba(255, 3, 3, 0.05) !important;
}

/* Remove focus outline */
.sidebar-accordion .accordion-button:focus {
    box-shadow: none !important;
    border: none !important;
}

/* Chevron icon - Position and style */
.sidebar-accordion .accordion-button::after {
    background-image: none !important;
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.6rem !important;
    color: rgba(204, 204, 204, 0.7) !important;
    width: auto !important;
    height: auto !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    order: -1 !important;
    transition: transform 0.15s ease !important;
}

/* Rotate chevron when expanded */
.sidebar-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg) !important;
}

/* Accordion body - Clean content area */
.sidebar-accordion .accordion-body {
    background-color: transparent;
    /* color: rgba(204, 204, 204, 0.9); */
    padding: 4px 12px 8px 12px;
}

/* Content items in accordion - VSCode explorer item style */
.sidebar-accordion .accordion-body p {
    margin: 0;
    padding: 4px 8px;
    color: rgba(204, 204, 204, 0.9);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.1s ease;
}

.sidebar-accordion .accordion-body p:hover {
    background-color: rgba(255, 255, 255, 0.08);
}



/* Remove collapse animation jank */
.sidebar-accordion .accordion-collapse {
    transition: height 0.15s ease;
}

/* ============================================================================
   PANEL HEADER (VSCode Explorer Style)
   ============================================================================
   
   Header title for sidebar panels matching VSCode's explorer panel header:
   - "EXPLORER" style with uppercase text
   - Small font size with subtle color
   - Proper spacing and alignment
   ============================================================================ */

.panel-header {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(204, 204, 204, 0.9);
    padding: 12px 20px 8px 20px;
    margin: 0;
    background-color: transparent;
    border-bottom: none;
}

/* ============================================================================
   END OF STYLES
   ============================================================================ */