/*
===============================================================================
文件: layout.css (最新修订版)

【主要功能 & 注意事项】:
1) 保留主容器 .main-layout height: calc(100vh - 60px)，页面整体可滚动
2) 实现三列布局：左侧(.sidebar)=20% + 中间(.center-panel)=40% + 右侧(.right-panel)=40%
3) 当屏幕 <1200px 时，sidebar=15%、center=42.5%、right=42.5%，再小于992px => 10% / 45% / 45%
4) 提供 .two-col 布局(如个人中心/我的文件/报告页)，左侧20% + 主容器80%
5) 不再在 centerpanel.css / rightpanel.css 中强制 flex:1，以免覆盖本文件的 40%/40%
===============================================================================
*/

/* 原有基础: 保留主容器 .main-layout height: calc(100vh - 60px) */
.main-layout {
  margin-top: 60px; /* 与顶部导航的固定高度60px对齐 */
  height: calc(100vh - 60px);

  display: flex;
  /* 已注释掉 overflow: hidden => 允许整体可滚动，或各面板单独滚动 */
  /* overflow: hidden; */
}

/* ========== 三列布局：sidebar(20%) + center(40%) + right(40%) ========== */
.sidebar {
  flex: 0 0 20%;
  max-width: 20%;
  overflow-y: auto; /* 使左侧面板可滚动 */
}
.center-panel {
  flex: 0 0 40%;
  max-width: 40%;
  overflow-y: auto;
}
.right-panel {
  flex: 0 0 40%;
  max-width: 40%;
  overflow-y: auto;
}

/* ========== 两列布局（仅有左侧+主容器），在外层 main 上加 .two-col ========== */
.two-col .sidebar {
  flex: 0 0 20%;
  max-width: 20%;
}
.two-col .center-panel {
  flex: 0 0 80%;
  max-width: 80%;
}

/* ========== 中屏幕( <1200px )时缩放 ========== */
@media (max-width: 1200px) {
  .sidebar {
    flex: 0 0 15%;
    max-width: 15%;
  }
  .center-panel,
  .right-panel {
    flex: 0 0 42.5%;
    max-width: 42.5%;
  }
  .two-col .sidebar {
    flex: 0 0 18%;
    max-width: 18%;
  }
  .two-col .center-panel {
    flex: 0 0 82%;
    max-width: 82%;
  }
}

/* ========== 更小屏( <992px )时再缩小 ========== */
@media (max-width: 992px) {
  .sidebar {
    flex: 0 0 10%;
    max-width: 10%;
  }
  .center-panel,
  .right-panel {
    flex: 0 0 45%;
    max-width: 45%;
  }
  .two-col .sidebar {
    flex: 0 0 15%;
    max-width: 15%;
  }
  .two-col .center-panel {
    flex: 0 0 85%;
    max-width: 85%;
  }
}