/* =============================================== +\
|             LAB SIDEBAR & BOOKMARKS               |
|    Styles for the left sidebar, and bookmarks     |
\* =============================================== */

/* The main container for the sidebar on desktop.  */
.side-bar {
    border-right: 2px solid rgba(216, 26, 216, 0.2); /* Very subtle purple edge. */
    margin-left: 0px !important;
    padding-left: 0px !important;
    order: 1; 
}



/* The content area within the sidebar that becomes scrollable. */
.sidebar-content {
    background-color: rgba(0, 0, 0, 0.2); /* Darker than body for depth. */
    padding-right: 4px !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
}

#study-sidebar hr {
    margin: 6px 0 8px 0;
}

@media (max-width: 991px) {
    .side-bar { display: none; }


    .side-bar.active {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.95);
    }
}

/* Custom Scrollbar for the sidebar (WebKit browsers like Chrome/Safari). */
.sidebar-content::-webkit-scrollbar { width: 4px; }

.sidebar-content::-webkit-scrollbar-track { background: transparent; }

.sidebar-content::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.sidebar-content::-webkit-scrollbar-thumb:hover { background: #8f00b3; }

 /* Purple hover on scrollbar. */

/* Sidebar back control: white Bootstrap icon on transparent background for dark theme. */
html[data-bs-theme="dark"] .sidebar-content #home-link {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    line-height: 1;
    box-shadow: none !important;
}


html[data-bs-theme="dark"] .sidebar-content #home-link:hover,
html[data-bs-theme="dark"] .sidebar-content #home-link:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}


html[data-bs-theme="dark"] .sidebar-content #home-link i {
    color: currentColor;
}


/* Simple static navigation tree: no sidebar progress bar. */
.sidebar-content .progress {
    display: none !important;
}


/* --- DESKTOP: STICKY SIDEBAR --- */
@media (min-width: 992px) {
    .sidebar-content {
        position: sticky; /* Makes sidebar stick during scroll. */
        top: 85px;      /* Sits below the 85px header with a 10px gap. */
        z-index: 1010;  /* Below the header (1020). */
        max-height: calc(100vh - 100px); /* Max height is the viewport height minus header. */
        overflow-y: auto; /* Enables scrolling only when content overflows. */
        display: block;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 2px !important;
    }
}

@media (max-width: 991px) {
    /* Styles the sidebar container, positioned off-screen to the left. */
    #study-sidebar {
        position: fixed;
        top: 0;
        left: -100%; /* Initially hidden off-screen. */
        width: 280px;
        height: 100vh;
        z-index: 2000;
        background-color: #1a1a1a !important;
        transition: left 0.3s ease; /* Smooth slide-in animation. */
        overflow-y: auto;
        padding: 20px 25px !important;
        display: block !important;
    }

    /* When active, the sidebar slides into view. */
    #study-sidebar.active {
        left: 0;
        box-shadow: 10px 0 30px rgba(0,0,0,0.8); /* Adds depth. */
    }

    #study-sidebar .sidebar-content {
        background-color: #1a1a1a !important;
        padding-left: 15px !important;
        margin-left: 0 !important;
    }
    
    /* Ensure sub-items indent properly on mobile */
    #study-sidebar #bookmark-list ul {
        --tree-indent: 14px;
        padding-left: 0 !important;
        margin-left: var(--tree-indent) !important;
        border-left: none !important;
    }

    #study-sidebar #bookmark-list {
        padding-left: 0 !important;
    }
    /* The button to open the mobile sidebar. */
    #open-sidebar {
        position: fixed; /* Stays in place during scroll. */
        bottom: 20px;
        right: auto;
        left: 10px;
        width: 60px;
        height: 60px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important; /* Makes it a circle. */
        z-index: 3500;
    }
}


/* --- BOOKMARK LIST (CHECKLIST) --- */

/* Base styles for the list container. */
#bookmark-list {
    list-style: none; /* Removes default bullets. */
    padding-left: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: #b0af9e;
}

/* Styles for each list item. */
#bookmark-list li {
    display: block;
    margin-bottom: 6px;
    line-height: 1.2;
}

#bookmark-list .nav-node-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 6px 2px 2px;
    border-radius: 6px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}



#bookmark-list .nav-tree-item.is-active > .nav-node-row,
#bookmark-list .nav-node-row.is-active {
    background: linear-gradient(90deg, rgba(41, 70, 61, 0.9) 0%, rgba(59, 40, 84, 0.85) 100%);
    box-shadow: inset 0 0 0 1px rgba(143, 0, 179, 0.45);
}


#bookmark-list .nav-tree-toggle {
    border: 1px solid #3c4a42;
    background: #0f1713;
    color: #e7d4ff;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

#bookmark-list .nav-tree-toggle:hover {
    border-color: #78a88f;
    color: #ffd27f;
}

#bookmark-list .nav-tree-toggle:focus-visible {
    outline: 2px solid #9d79cf;
    outline-offset: 1px;
}

#bookmark-list .nav-file-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7cc5e6;
    flex-shrink: 0;
    border: 1px solid #2a404d;
    border-radius: 4px;
    background: #0f161a;
    font-size: 0.72rem;
}

/* LEGACY page-title leaf (`role: "title"` on un-migrated tracks — a childless entry
   that anchors the `<h1>` rather than folding it): hand-authored glyph, an outline
   folder with a "/" in its front panel, in the same 20px box as the file icon, gold
   so it reads as "root of this tree / back to top", not a file. The single-root
   model never uses this box: there the title is an ordinary folder with the standard
   folder toggle (`bi-folder-fill` closed / `bi-folder2-open` open). The glyph is stroke-based (colour comes from
   `currentColor`), so this box only supplies colour, size, border and alignment. */
#bookmark-list .nav-title-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd27f;
    flex-shrink: 0;
    border: 1px solid #4a4326;
    border-radius: 4px;
    background: #16140f;
}

/* LEGACY title entry (`role: "title"`) keeps the page title readable as a title
   while the flat-sidebar tracks are migrated one by one. */
#bookmark-list .nav-title-item .nav-tree-link {
    font-weight: 600;
    color: #f3e6c4;
}

#bookmark-list .nav-tree-children.is-collapsed {
    display: none;
}

/* Nested lists (sub-topics) are indented and have a guide line. */
#bookmark-list ul {
    list-style: none;
    --tree-indent: 14px;
    position: relative;
    padding-left: 0 !important;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: var(--tree-indent) !important;  /* One-icon indentation per level. */
    border-left: none;
}

#bookmark-list ul::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tree-indent) * -0.5); /* Center line under the parent icon center. */
    width: 1px;
    background: #444;
}

/* Default link state in the bookmark list. */
#bookmark-list a {
    text-decoration: none;
    color: #e2dfd1;
    transition: color 0.3s, opacity 0.3s;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    border-radius: 4px;
}

#bookmark-list a:focus-visible {
    outline: 2px solid #9d79cf;
    outline-offset: 2px;
}

#bookmark-list .nav-tree-link.is-active {
    color: #f4e8ff !important;
    font-weight: 600;
}

/* Hover state for links. */
#bookmark-list a:hover {
    color: hotpink !important;
    text-decoration: none;
}

#bookmark-list .return-roadmap-link {
    margin-top: 12px;
    padding-top: 4px;
}

#bookmark-list .return-roadmap-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#bookmark-list .return-roadmap-link a::before {
    content: '◄';
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    line-height: 1;
    border: 1px solid rgba(157, 121, 207, 0.55);
    border-radius: 999px;
    background: rgba(157, 121, 207, 0.14);
    transform: translateY(-0.01em);
}