/* 修复后台布局滚动问题 */

/* 1. 固定HTML和body高度，防止整个页面滚动 */
html, body {
    height: 100vh;
    overflow: hidden;
}

/* 2. 主内容区使用flex布局 */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 3. Section区域可滚动，但限制在header下方 */
.section {
    display: none;
    padding: 24px;
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
}

.section.active {
    display: block;
}

/* 4. 修复侧边栏滚动 */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid var(--border-color);
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 5. 表格容器内部滚动 */
.table-container {
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
    max-height: calc(100vh - 200px);
}