/* ========================================
   页签页面高度优化 - 确保占满可用空间
   ======================================== */

/* 确保body和html占满视口 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* body使用flex垂直布局 */
body {
    display: flex;
    flex-direction: column;
}

/* header固定高度 */
.header {
    flex-shrink: 0;
}

/* main-container占据剩余空间，使用flex水平布局 */
.main-container {
    flex: 1;
    display: flex;
    overflow: hidden; /* 防止内容溢出 */
}

/* sidebar固定宽度，独立滚动 */
.sidebar {
    flex-shrink: 0;
    overflow-y: auto;
}

/* main-content占据剩余空间，使用flex垂直布局 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* page-content占满主内容区域减去footer的空间 */
.page-content {
    display: none;
}

.page-content.active {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto; /* 内容过多时滚动 */
}

/* content-wrapper内容区域 */
.page-content .content-wrapper {
    flex: 1 0 auto; /* 允许内容撑开 */
}

/* footer固定在main-content底部 */
.footer {
    flex-shrink: 0;
    margin-top: 0 !important;
    margin-left: 0 !important; /* 不再有左侧margin */
}