/*
 * OmicVerse Resizable Sidebar Layout
 * JupyterLab-like resizable sidebar with CSS variables
 * ====================================================
 */

/* ========================================
   CSS Variable - Sidebar Width Control
   ======================================== */
:root {
    --sidebar-width: 260px; /* Default sidebar width, dynamically updated by JavaScript */
}

/* ========================================
   Sidebar - Fixed Positioning
   ======================================== */
.nxl-navigation {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-width) !important;
    z-index: 1000 !important;
    overflow: hidden !important;          /* scroll handled by .navbar-content */
    display: flex !important;
    flex-direction: column !important;
    transition: width 0.05s ease !important;
}

/* ========================================
   Header - Fixed Positioning with Sidebar Offset
   ======================================== */
.nxl-header {
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    z-index: 999 !important;
    margin-left: 0 !important;
    transition: left 0.05s ease !important;
    min-height: 66px !important;
}

.header-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Header items — reduce from theme default 79px to 42px */
.nxl-h-item {
    min-height: 42px !important;
}

.nxl-head-link {
    padding: 8px 8px !important;
}

/* Sidebar logo area — reduce from theme default 80px to 42px */
.m-header {
    height: 66px !important;
    padding: 4px 12px !important;
}

.nxl-navigation .m-header .brand-logo-left {
    max-height: 60px !important;
}

/* ========================================
   Main Container - Margin Follows Sidebar
   ======================================== */
.nxl-container {
    margin-left: var(--sidebar-width) !important;
    margin-top: 0 !important; /* No top margin */
    transition: margin-left 0.05s ease !important;
    padding-left: 0 !important;
}

.nxl-content {
    margin-left: 0 !important;
    padding-left: 15px !important;
}

/* ========================================
   Resize Handle - Draggable Separator
   ======================================== */
.sidebar-resize-handle {
    position: fixed !important;
    left: calc(var(--sidebar-width) - 2.5px) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    cursor: col-resize !important;
    z-index: 10000 !important;
    background: transparent !important;
    transition: left 0.05s ease, background 0.2s !important;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.resizing {
    background: rgba(59, 130, 246, 0.6) !important;
}

/* ========================================
   Resizing State
   ======================================== */
body.resizing-sidebar {
    user-select: none !important;
}

body.resizing-sidebar * {
    cursor: col-resize !important;
}

/* ========================================
   Sidebar Content Constraints
   ======================================== */
.navbar-wrapper {
    width: 100% !important;
    max-width: var(--sidebar-width) !important;
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* navbar-content scrolls internally; height:auto overrides theme's calc() */
.navbar-content {
    flex: 1 !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ========================================
   Memory Bar — pinned at sidebar bottom, never scrolls away
   ======================================== */
#memory-bar-container {
    flex-shrink: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top-color: #e5e7eb !important;
    z-index: 10 !important;
}

html.app-skin-dark #memory-bar-container {
    background: #1f2937 !important;
    border-top-color: #374151 !important;
}

/* ========================================
   Status Bar — offset by sidebar so it never
   overlaps the memory bar
   ======================================== */
#status-bar {
    left: var(--sidebar-width) !important;
    transition: left 0.05s ease !important;
}

/* ========================================
   Collapsible Cards — global auto-init
   ======================================== */

/* Card body transition when collapsing / expanding */
.card-body.cc-animated {
    overflow: hidden;
    transition: max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}

/* Card header becomes a row with toggle at right */
.card-header.cc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
    user-select: none;
}

/* The small toggle button injected into every header */
.card-collapse-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 0 0 8px;
    line-height: 1;
    opacity: 0.55;
    color: inherit;
    transition: opacity 0.15s;
}
.card-collapse-btn:hover { opacity: 1; }

/* Chevron rotates when collapsed */
.card-collapse-btn .cc-chevron {
    display: inline-block;
    transition: transform 0.25s ease;
}
.card-collapse-btn.collapsed .cc-chevron {
    transform: rotate(180deg);
}