/*
 * Fixed left nav behavior with sticky header:
 * - keep sidebar-pills width/color (CoreUI's sidebar-fixed defaults to 200px/dark)
 * - at least viewport height (minus header)
 * - independent scroll when nav content overflows
 * - stays put while the main page scrolls
 * - sits under the sticky header
 */

:root {
    --cbot-header-height: 55px;
    --cbot-sidebar-width: 225px; /* matches .sidebar-pills */
}

@media (min-width: 992px) {
    body.sidebar-fixed .app-body > .sidebar.sidebar-pills {
        position: fixed;
        top: var(--cbot-header-height);
        bottom: 0;
        height: auto;
        max-height: none;
        width: var(--cbot-sidebar-width) !important;
        flex: 0 0 var(--cbot-sidebar-width) !important;
        overflow: hidden;
        /* Below sticky header (1020); above page content. */
        z-index: 1010;
        background-color: #f1f4f8 !important; /* .bg-light */
        color: #495057;
    }

    body.sidebar-fixed .app-body > .sidebar.sidebar-pills > .sidebar-nav,
    body.sidebar-fixed .app-body > .sidebar.sidebar-pills .sidebar-nav,
    body.sidebar-fixed .app-body > .sidebar.sidebar-pills .nav {
        width: 100%;
    }

    body.sidebar-fixed .app-body > .sidebar.sidebar-pills > .sidebar-nav {
        flex: 1 1 auto;
        height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep main/footer offset matched to pills width, not CoreUI's 200px fixed default. */
    html:not([dir="rtl"]) body.sidebar-lg-show.sidebar-fixed .main,
    html:not([dir="rtl"]) body.sidebar-lg-show.sidebar-fixed .app-footer {
        margin-left: var(--cbot-sidebar-width);
    }
}

/* Mobile already uses a fixed off-canvas sidebar; keep its internal scroll reliable. */
@media (max-width: 991.98px) {
    body .app-body > .sidebar.sidebar-pills {
        width: var(--cbot-sidebar-width) !important;
        background-color: #f1f4f8 !important;
        z-index: 1010;
        overflow: hidden;
    }

    body .app-body > .sidebar > .sidebar-nav {
        height: 100%;
        max-height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}