/* ============================================================================
   响应式：窄屏降级为「底部标签 + 抽屉」
   ============================================================================ */
.mtabs{display:none}
.scrim{
  position:fixed;inset:var(--top) 0 0;background:rgba(23,26,31,.34);z-index:24;
  opacity:0;pointer-events:none;transition:opacity .2s var(--move);
}
body[data-drawer="true"] .scrim{opacity:1;pointer-events:auto}
.burger{display:none;width:32px;height:32px;border-radius:var(--r-sm);align-items:center;justify-content:center}

/* 1180：第二级页面列表收成抽屉（内容区至少留 700px 才够看表格） */
@media (max-width:1180px){
  .shell{grid-template-columns:var(--nav-w) 1fr}
  .pages{
    position:fixed;top:var(--top);bottom:0;left:var(--nav-w);width:262px;z-index:26;
    transform:translateX(-100%);transition:transform .22s var(--move);box-shadow:var(--sh-pop);
  }
  body[data-drawer="true"] .pages{transform:translateX(0)}
}

/* 860：模块栏也收成抽屉，底部标签常驻 */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .nav{
    position:fixed;top:var(--top);bottom:56px;left:0;width:226px;z-index:27;
    transform:translateX(-100%);transition:transform .22s var(--move);box-shadow:var(--sh-pop);
  }
  body[data-drawer="true"] .nav{transform:translateX(0)}
  /* 窄屏：第二级并进抽屉，模块在上、页面在下，一屏放得下 */
  .pages{display:none;position:static;width:auto;box-shadow:none;transform:none}
  body[data-drawer="true"] .pages{
    display:flex;position:fixed;top:var(--top);bottom:56px;left:226px;right:0;width:auto;z-index:27;
  }
  .panel{top:var(--top);bottom:56px;width:100%;border-left:0}
  .mtabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;z-index:28;
    background:var(--surface);border-top:1px solid var(--line);
    /* ⚠️ 必须显式 margin:0，否则它虽然 fixed 却**仍在文档流里占位**：
       实测 360×800 时 #mtabs 的 top=865/bottom=921，把 html 撑到 scrollHeight=921，
       于是手机上出现一条多余的纵向滚动条（内容只到 800）。
       fixed 元素的占位不是「想当然没有」，它的 margin/外边距仍参与布局 ——
       这里用 margin:0 把他彻底摘出文档流。 */
    margin:0;
  }
  /* 底部标签是 fixed 层，它盖住的是 shell 的最后 56px；
     给 shell 留出这段安全区，正文才不会被标签栏压住 */
  .shell{padding-bottom:56px}
  .mtabs button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:11px;color:var(--ink3);
  }
  .mtabs button[aria-current="true"]{color:var(--brand-ink);font-weight:600}
  .burger{display:flex}

  /* 窄屏顶栏挤：标题被压成两行、面包屑换行（上一轮真踩过）。
     收掉面包屑与环境徽标，给标题 nowrap，工具条另起一行。 */
  .bar{flex-wrap:wrap;padding:9px 12px;gap:8px}
  .bar .crumb{display:none}
  .bar h1{white-space:nowrap;font-size:15px}
  .bar .sp{flex-basis:100%;height:0}
  .search{min-width:0;flex:1 1 120px}
  .brand em{display:none}
  .top{gap:9px;padding:0 11px}
  .env{display:none}
  /* 顶栏在手机上必须**主动减项**，不能靠 overflow 硬裁：
     390px 下「版本号 + 会话倒计时 + 当前账号 + 退出」四项加起来就超宽了。
     保留退出与倒计时（安全相关），版本号与账号名收起（这两项在「关于」页与导航里还能看到）。
     实测不加这条时退出按钮会被顶出屏幕 → 视口被撑宽 → 整页横向滚动。 */
  .ver-chip{display:none}
  .who{display:none}
  .session-chip{font-size:11px;padding:2px 7px}
  .split{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* 更窄（≤360）：会话倒计时也收成只有数字，进一步压顶栏 */
@media (max-width:360px){
  .session-chip{max-width:72px;overflow:hidden;white-space:nowrap}
  .brand b{font-size:13.5px}
  .tbtn{padding:0 7px}
}

/* 打印：后台偶尔要打印名单 */
@media print{
  .top,.nav,.pages,.bar .density,.search,.panel,.mtabs,.row-ops{display:none !important}
  .shell{display:block;height:auto}
  body{overflow:visible;background:#fff}
  .rows,.card,.tbl-wrap{border-color:#999;box-shadow:none}
}

/* ============================================================================
   宽屏（>1180）侧栏收起：模块栏变图标窄条，二级导航隐藏，内容区占满
   —— 用户要求「电脑端导航栏要自动收起，次导航栏也要收起」。
   默认收起（initSidebar 写 body[data-sidebar=collapsed]），点顶栏汉堡展开。
   ============================================================================ */
@media (min-width:1181px){
  /* 桌面端也显示汉堡按钮（原来只在 ≤860 显示），用于收起/展开侧栏 */
  .burger{display:flex}
  /* 收起态：模块栏变窄图标条、二级导航隐藏，内容区占满剩余宽度。
     ⚠️ 必须用「2 列 + 显式放置」：若保留 3 列模板而把 .pages 设 display:none，
        它会退出网格流，.work 就滑进第 2 列（宽度 0）→ 内容区整片空白（实测踩过）。 */
  body[data-sidebar="collapsed"] .shell{grid-template-columns:56px 1fr}
  body[data-sidebar="collapsed"] .nav{width:56px}
  body[data-sidebar="collapsed"] .nav-t{display:none}
  body[data-sidebar="collapsed"] .mod{
    width:40px;margin:2px 8px;justify-content:center;padding:9px 0;
  }
  /* 只留图标：模块名与计数隐藏 */
  body[data-sidebar="collapsed"] .mod > span:nth-child(2),
  body[data-sidebar="collapsed"] .mod > span:nth-child(3){display:none}
  body[data-sidebar="collapsed"] .pages{display:none}
  /* 二级导航隐藏后，.work 显式放进第 2 列（占满） */
  body[data-sidebar="collapsed"] .work{grid-column:2}
}