/* layout.css - 核心布局与侧边栏 */

/* 核心布局：使用 CSS Grid 实现两栏 */
#app-container {
    /* display: grid; */
    /* grid-template-columns: 0 1fr; */
    min-height: 100vh;
}

/* 左侧侧边栏 (Sidebar) */
#sidebar {
    padding: var(--padding-unit) calc(var(--padding-unit) * 1.5);
    border-right: 1px solid var(--border-color);
    /* ⭐ 关键修正 1: 改为 fixed，并设置视口定位 ⭐ */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    /* 保证占据整个垂直视口 */
    /* 侧边栏的宽度保持和 Grid 定义的一致 */
    width: 200px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
}

/* 右侧主内容区 (Main Content) */
#main-content {
    padding-top: var(--padding-unit);
    padding-right: calc(var(--padding-unit) * 2);
    padding-bottom: calc(var(--padding-unit) * 2);
    padding-left: calc(var(--padding-unit) * 2);

    /* ⭐ 关键修正：手动为固定侧边栏腾出空间 ⭐ */
    margin-left: 260px;
    margin-top: 0px;

    /* 侧边栏的宽度 */

    overflow-y: auto;
    max-width: auto;
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Webkit browsers (Chrome, Safari, Opera) */
#main-content::-webkit-scrollbar {
    display: none;
}

/* ======================================= */
/* 📱 媒体查询 - 移动端适配 (布局核心重置) */
/* ======================================= */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        /* 手机上基础字体略微增大，提升可读性 */
    }

    #app-container {
        grid-template-columns: 1fr;
        /* 变为单列 */
    }

    /* 侧边栏调整 */
    #sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: var(--padding-unit);
    }

    /* 主内容区调整 */
    #main-content {
        margin-left: 0 !important;/* ⭐ 关键修正：确保在移动端移除左边距 ⭐ */
        padding: var(--padding-unit);
    }
}