/* ========================================
   responsive.css - 小屏适配分册（14寸笔记本等窄视口）
   ========================================
   目标：1366~1600 有效视口下页面不横向破版、表格不挤压变形——
   - 表格：min-width + 宿主模板已有的 overflow-x:auto 外层 → 窄屏横向滚动兜底，
     杜绝 7 列/13 列被强压成竖条的"大变形"；
   - 卡头/按钮组：允许换行，筛选控件窄屏掉到第二行，不顶爆标题；
   - 字号/留白：按档位收紧一档，给表格腾出宽度。
   宽屏（>1600px）完全不受影响；只挂页面级选择器，不外溢其他模块。
   两档断点口径：≤1600 = 1920物理宽 + 125% 缩放（1536 有效宽）；
                ≤1440 = 1366 物理宽 / 1920 + 150% 缩放（1280 有效宽）。
*/

/* ===== 一档：≤1600px —— 表格横滚兜底，禁止挤压变形 ===== */
@media (max-width: 1600px) {
  /* 项目详情·订单Tab表（13列：单号/日期/人员/三金额列/状态/类型/细分/报价/备注/操作） */
  #page-project-detail .table { min-width: 1280px; }
  /* 项目列表表（7列：项目/状态/订单数/金额/最近开单/结算额/操作） */
  #page-project-list .table { min-width: 880px; }
  /* 单元格单行化：文字不折行（窄屏不再挤成两行），超出宽度由 min-width+外层横滚兜底；
     「项目/客户」「最近开单」的双行副信息是块级 div 排版，不受 nowrap 影响 */
  #page-project-list .table th,
  #page-project-list .table td,
  #page-project-detail .table th,
  #page-project-detail .table td { white-space: nowrap; }
  #page-project-list .table,
  #page-project-detail .table { font-size: 12px; }
}

/* ===== 二档：≤1440px —— 留白与字号收紧、卡头换行 ===== */
@media (max-width: 1440px) {
  /* 页面留白收窄（只挂项目两页，不动全局 .page） */
  #page-project-list,
  #page-project-detail { padding: 16px 18px; }

  /* 卡头（标题+筛选组）允许换行：窄屏日期/关键字控件掉到第二行 */
  #page-project-list .card-header,
  #page-project-detail .card-header { flex-wrap: wrap; row-gap: 8px; }

  /* 详情页顶部返回/标题/操作按钮行允许换行 */
  #page-project-detail > div:first-child { flex-wrap: wrap; row-gap: 8px; }

  /* 表格字号再收一档（单元格无内联 font-size，可安全继承覆盖） */
  #page-project-list .table,
  #page-project-detail .table { font-size: 11.5px; }
}

/* ===== 订单总列表页（orders/list.html）：本身已有 fixed 布局 + nowrap + 横滚，
   仅窄屏把检索关键字输入框收窄，给按钮组腾位（其余无需干预）。
   注：该页为 SPA 片段，片段内 <style> 有同选择器 width:220px（文档序更晚），
   这里借 .page-container 提升特异性压过它 ===== */
@media (max-width: 1440px) {
  .page-container .ol-filter-bar input[type="text"] { width: 160px; }
}

/* ========================================
   左栏菜单高度适配（14寸本等矮视口，768px 高常见）
   ========================================
   根因：.sidebar 定高 overflow:hidden，.sidebar-nav 无滚动样式——矮屏下 8 个
   菜单组全展开（约 1300px）超出可视高度的部分被直接裁掉且无法滚动看到。
   策略：导航列表自身可滚动（header/footer 常驻）+ 矮屏分档压缩行高留白。 */

/* 任何高度：导航列表自身可滚动，展开的组永远能滚到（宽屏无视觉变化） */
.sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

/* 紧凑档：≤860px 高（14寸 768 / 1080 - 系统任务栏等）。
   所有选择器带 .sidebar 前缀提特异性——index_v2 内联 <style> 文档序在本册之后，
   同特异性会压掉 @media 声明（验收退回教训） */
@media (max-height: 860px) {
  .sidebar .sidebar-header { padding: 10px 16px 8px; }
  .sidebar .sidebar-logo-img { max-height: 40px; }
  .sidebar .nav-item { padding: 4px 12px; font-size: 12.5px; }
  .sidebar .nav-item.active::before { height: 14px; }
  .sidebar .nav-section { padding: 7px 12px 4px; }
  .sidebar .nav-group { margin: 4px 6px; }
  .sidebar .sidebar-footer { padding: 8px 16px; }
}

/* 极矮档：≤700px 高（13/14寸 + 大缩放比） */
@media (max-height: 700px) {
  .sidebar .sidebar-logo-sub { display: none; }
  .sidebar .sidebar-header { padding: 8px 14px 6px; }
  .sidebar .nav-item { padding: 3px 12px; font-size: 12px; }
  .sidebar .nav-item svg { width: 14px; height: 14px; }
  .sidebar .nav-section { padding: 5px 12px 3px; }
  .sidebar .nav-group { margin: 3px 4px; }
  .sidebar .sidebar-footer { padding: 6px 14px; font-size: 10px; }
}