/* Mobile-First Base Styles */
.doc-sidebar {
    position: fixed;
    top: 0;
    left: -260px; /* Hidden by default */
    height: 100vh;
    width: 260px;
    z-index: 2000;
    overflow-y: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.doc-sidebar.show {
    left: 0;
    box-shadow: 5px 0 25px rgba(0,0,0,0.3);
}

#sidebarOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1900;
}

.doc-content {
    margin-left: 0;
    /* padding-top: 2rem; */
    transition: margin-left 0.3s ease;
}

/* Desktop View (MD and up) */
/* Update these sections in your Desktop View media query */
@media (min-width: 768px) {
    .doc-sidebar {
        left: 0;
        top: 0; /* Change from 64px to 0 to fill the gap */
        padding-top: 80px !important; /* This pushes the text down below your navbar */
        z-index: 1000;
        height: 100vh;
        /* Ensure the border-right is visible for definition */
        border-right: 1px solid rgba(255,255,255,0.1); 
    }

    .doc-content {
        margin-left: 260px;
        padding-top: 2rem; /* Reduced because sections usually have their own margins */
    }
}

/* Adjust the sticky headers inside the sidebar */
.doc-sidebar h6:first-of-type {
    margin-top: 0 !important; /* Remove the mt-5 from the very first header */
}

/* ScrollSpy Active Styles */
#docSidebar .nav-pills .nav-link.active {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-left: 3px solid #ffc107;
    border-radius: 0;
}
/* Documentation sidebar active link */
#docSidebar .nav-pills .nav-link {
    color: #adb5bd; /* muted text */
}

#docSidebar .nav-pills .nav-link:hover {
    color: #ffc107; /* warning yellow */
}