/**
 * 标题: Layout
 * 说明: 页面整体三栏布局样式（左侧边栏 + 主内容 + 右侧详情面板）
 * 时间: 2026-03-03 21:12
 * @author: zhoujunyu
 */

/* 全局页面容器 */
body {
    background-color: var(--bg-light);
    color: var(--text-secondary);
}

/* 应用容器 - 三栏 flex 布局 */
.app-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-white);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* 左侧边栏 */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-light);
}

/* 主内容区域 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--bg-white);
    position: relative;
}

/* 右侧详情面板 */
.detail-panel {
    width: var(--detail-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    border-left: 1px solid var(--border-light);
    box-shadow: var(--shadow-detail);
    z-index: 20;
}
    /* ============================================
       �Ż������������������߿�
       ============================================ */
    .sidebar-nav {
         /* �����������Զ������� */
    }
    .main-content {
         background: #fcfcfd;
         box-shadow: 0 0 10px inset rgba(0,0,0,0.01);
    }
    .detail-panel {
        box-shadow: -10px 0 20px -5px rgba(0, 0, 0, 0.03); 
    }
    .app-container {
        border-radius: var(--radius-xl); 
        /*�����Ҫ���б߿�Ĵ���ĻӦ�ñ���������ô��*/
    }