/* Shared collapsible sidebar component
   The sidebar lives at the #content level in layout.html (via {% block sidebar %}).
   #content becomes a flex row; .cube-main-content fills the rest.
*/

/* ── Layout: #content becomes flex row when sidebar is present ── */
#content:has(.cube-sidebar-wrapper) {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#content:has(.cube-sidebar-wrapper) .cube-main-content {
    overflow: auto;
}

/* ── Outer wrapper: always visible, transitions between full and narrow ── */
.cube-sidebar-wrapper {
    width: 280px;
    min-width: 280px;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    transition: width 0.25s ease, min-width 0.25s ease;
    overflow: hidden;
    position: relative;
}

.cube-sidebar-wrapper.collapsed {
    width: 40px;
    min-width: 40px;
}

/* ── Collapsed strip: hidden when expanded, visible when collapsed ── */
.cube-sidebar-collapsed-strip {
    width: 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 22px;
    flex-shrink: 0;
    overflow: hidden;
    background: #F6F3F2;
    transition: width 0.25s ease, min-width 0.25s ease;
}

.cube-sidebar-wrapper.collapsed .cube-sidebar-collapsed-strip {
    width: 40px;
    min-width: 40px;
}

/* open button only shows when collapsed */
.cube-sidebar-open-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: 6px;
    color: #6b7a8d;
    cursor: pointer;
    display: none;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

.cube-sidebar-wrapper.collapsed .cube-sidebar-open-btn {
    display: flex;
}

.cube-sidebar-open-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #062D4A;
}

/* ── Sidebar panel: fills remaining width inside the wrapper ── */
.cube-sidebar {
    flex: 1;
    min-width: 0;
    background: #F6F3F2;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.cube-sidebar-wrapper.collapsed .cube-sidebar {
    opacity: 0;
    pointer-events: none;
    flex: 0;
    min-width: 0;
    width: 0;
}

/* ── Header ── */
.cube-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f4f8;
    flex-shrink: 0;
    color: #062D4A;
}

.cube-sidebar-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}

.cube-sidebar-toggle {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 6px;
    color: #6b7a8d;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.cube-sidebar-toggle:hover {
    background: #f0f4f8;
    color: #1080A3;
}

/* ── Scrollable content area ── */
.cube-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.cube-sidebar-content:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* ── Hide navbar logo when sidebar is expanded ── */
#content:has(.cube-sidebar-wrapper:not(.collapsed)) #mainNavbarLogo {
    display: none !important;
}

/* ── Always hide gpt selector on pages with a logo sidebar ── */
#content:has(.cube-sidebar-wrapper[data-navbar-logo-id]) .sidebarNav .gptSelectBox {
    display: none !important;
}

/* ── Logo header variant: tighter padding for logo+close layout ── */
.cube-sidebar-header--logo {
    padding: 18.5px 12px 10px 16px;
}

/* ── Inline variant: used when sidebar is inside an inner flex row (e.g. notebook),
   not at the #content level. Overrides 100vh height to fill parent instead. ── */
.cube-sidebar-wrapper--inline {
    height: 100%;
}

/* ── Theme: warm (podcasts/cliplists beige background) ── */
.cube-sidebar-wrapper--warm {
    background: #f0eeec;
}

.cube-sidebar-wrapper--warm .cube-sidebar-collapsed-strip {
    background: #f0eeec;
}

.cube-sidebar-wrapper--warm .cube-sidebar-open-btn {
    color: #9a9691;
}

.cube-sidebar-wrapper--warm .cube-sidebar-open-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}

.cube-sidebar.cube-sidebar--warm {
    background: #f0eeec;
    border-right: none;
}

.cube-sidebar.cube-sidebar--warm .cube-sidebar-header {
    border-bottom: none;
    padding: 20px 16px 8px;
}

.cube-sidebar.cube-sidebar--warm .cube-sidebar-title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9691;
    font-weight: 600;
}

.cube-sidebar.cube-sidebar--warm .cube-sidebar-toggle {
    color: #9a9691;
}

.cube-sidebar.cube-sidebar--warm .cube-sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}

.cube-sidebar.cube-sidebar--warm .cube-sidebar-content {
    padding: 8px 12px 12px;
}