/* 三栏布局 */
.docs-container {
    display: flex;
    /* 移除 min-height: calc(100vh - 60px); 让页面自然滚动 */
}

.docs-sidebar {
    width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    position: sticky;
    top: 60px;
    align-self: flex-start; /* 新增 */
    height: 100vh; /* 改这里 */
    box-sizing: border-box; /* 加这里 */
    overflow-y: auto;
    /* 移除 height: calc(100vh - 60px); */
}

/* 内容区域 - 简化 */
.docs-content {
    flex: 1;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    /* 移除 overflow-y: auto; 让页面整体滚动 */
}

/* 选择目录列表滚动时，内容区域据上方80px，不然目录标题会被上方标题栏覆盖 */
.docs-content :target {
    scroll-margin-top: 80px;
}

/* 目录面板 */
.docs-toc {
    width: 240px;
    background: #f8f9fa;
    border-left: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    align-self: flex-start; /* 新增 */
    height: 100vh; /* 改这里 */
    box-sizing: border-box; /* 加这里 */
    overflow-y: auto;
    /* 移除 height: calc(100vh - 60px); */
    color: #333;
}




.sidebar-header .header-link {
    display: block; /* 改为块级元素 */
    padding: 0.75rem 1rem; /* 增加内边距，扩大点击区域 */
    margin: -0.75rem -1rem; /* 抵消父容器的内边距（如果需要） */
    border-radius: 0.25rem; /* 可选：圆角 */
}

.sidebar-header .header-link:hover {
    background-color: #e9ecef;
    color: #512bd4 !important;
}


.sidebar-nav {
    padding: 1rem;
}

    .sidebar-nav .nav-link {
        color: #495057 !important;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        margin: 0.125rem 0;
        display: block;
    }

        .sidebar-nav .nav-link:not(.active):hover {
            background-color: #e9ecef;
            color: #512bd4 !important;
        }

        .sidebar-nav .nav-link.nav-toggle {
            display: flex !important;
            align-items: center;
            cursor: pointer;
        }

            .sidebar-nav .nav-link.nav-toggle:hover {
                background-color: #e9ecef;
            }

        .sidebar-nav .nav-link.active {
            background-color: #512bd4 !important;
            color: white !important;
            font-weight: 500;
        }

/* 折叠图标容器 */
.collapse-icon {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* SVG样式 */
    .collapse-icon svg {
        width: 100%;
        height: 100%;
        color: #6c757d;
    }

/* 悬停效果 */
.nav-link:hover .collapse-icon svg {
    color: #512bd4;
}

/* 展开时的图标颜色 */
.nav-toggle.expanded .collapse-icon svg {
    color: #512bd4;
}

.nav-toggle.expanded .collapse-icon svg {
    color: #512bd4;
}
.nav-toggle.btn:focus,
.nav-toggle.btn:active:focus,
.nav-toggle.btn-link.nav-link:focus {
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 子节点列表 */
.nav-children {
    padding-left: 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .nav-children.show {
        max-height: none !important;
    }

/* 侧边栏标题 */
.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
}

    .sidebar-header h5 {
        margin: 0;
        color: #495057;
        font-size: 1rem;
        font-weight: 600;
    }

/* 目录导航区域 */
.toc-nav {
    padding: 1rem;
    color: #333;
}

    .toc-nav .toc-link {
        display: block;
        padding: 0.25rem 0;
        color: #6c757d !important;
        text-decoration: none;
        font-size: 0.8rem;
        line-height: 1.3;
        border-left: 2px solid transparent;
    }

        .toc-nav .toc-link.toc-level-2 {
            font-weight: normal;
            color: #495057 !important;
            margin-top: 0.25rem;
            font-size: 0.85rem;
        }

        .toc-nav .toc-link.toc-level-3 {
            padding-left: 0.75rem;
            color: #6c757d !important;
            font-weight: normal;
            font-size: 0.8rem;
        }

        .toc-nav .toc-link.toc-level-4 {
            padding-left: 1.5rem;
            font-size: 0.75rem;
            color: #868e96 !important;
        }

        .toc-nav .toc-link:hover {
            color: #0056b3 !important;
        }

        .toc-nav .toc-link.active {
            color: #007bff !important;
            font-weight: normal;
        }

/* 目录标题 */
.toc-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
}

    .toc-header h6 {
        margin: 0;
        color: #6c757d;
        font-size: 0.875rem;
        font-weight: 500;
    }

/* 响应式设计 */
@media (max-width: 1200px) {
    .docs-toc {
        display: none;
    }
}

@media (max-width: 992px) {
    .docs-sidebar {
        position: fixed;
        left: -280px;
        transition: left 0.3s ease;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    }

        .docs-sidebar.show {
            left: 0;
        }

    .docs-content {
        width: 100%;
        padding: 1rem;
    }

    /* 移动端菜单按钮 */
    .mobile-sidebar-btn {
        position:fixed !important;
        left: -15px !important;
        top: 23px !important; /* 在标题栏下方 */
        z-index: 9999 !important;
        border-width: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        background-color: #512bd4 !important;
        color: white !important;
    }
    /* 使用Bootstrap断点控制 */
    @media (min-width: 768px) {
        .mobile-sidebar-btn {
            display: none !important;
        }
    }
}