/* 移动端优化（钉钉 H5 微应用）— P0：顶栏/抽屉导航 + 表格适配 @2026-08-26 */
/* 桌面端（>800px）不加载以下任何规则；以下元素桌面端一律隐藏 */
.mobile-menu-btn,.mobile-mask,.mobile-drawer{display:none}
@media(max-width:800px){
  /* ===== 顶栏（替代原左侧边栏）===== */
  .shell{grid-template-columns:1fr}
  /* ⚠️ 2026-09-15 关键修复（窄屏实测取证）：必须**显式写 display:flex**。
     app.css 里存在 `aside{...display:block}`（某个断点内），会覆盖本文件；
     而本规则原先只写了 flex-direction/align-items/gap —— **没有 display:flex 时这些全部失效** →
     顶栏退化成块级堆叠：logo 撑满一整行，用户名与 ☰ 按钮被挤到 56px 顶栏之外，
     正好压在页面标题「我的工作台」上（实测 .side-user top=73、.mobile-menu-btn top=64，均应 <56）。 */
  aside{display:flex;position:fixed;top:0;left:0;right:0;height:56px;padding:0 12px;flex-direction:row;align-items:center;gap:10px;border-right:0;border-bottom:1px solid #e5e7eb;z-index:200}
  aside .brand{width:auto;height:30px;margin:0}
  aside .side-user{padding:0;background:none;border-radius:0;margin:0;font-size:14px}
  aside .side-user small{display:none}
  aside nav{display:none}
  aside .logout{display:none}
  .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;margin-left:auto;border:0;border-radius:8px;background:#e8edf5;color:#344054;font-size:20px;line-height:1;cursor:pointer}
  /* 2026-09-15 修复手机端顶部"挤成一堆"（用户截图反馈）：
     ① app.css 有一条 @media(max-width:1600px){.content{padding:50px 5vw 76px}} 同样命中手机，
        而移动端顶栏是 fixed 的 56px 高 → 50px 顶不住，标题被顶栏压住。
        用更高特异性的 main.content 固定移动端顶部留白（70px），保证不被那条断点覆盖。
     ② 标题所在容器宽度只由文字撑开（桌面实测 155px），且 header 是 flex + nowrap，
        于是"标题 + 新建订单按钮"被挤在左侧一条窄列里、右侧大片空白 → 改为各自独占整行。 */
  main.content{padding:70px 14px 92px;max-width:100%}
  /* 2026-09-15 二次修复（窄屏截图取证）：上一次给 .workbench-create 加 width:100% 是**错的** ——
     标题块内部是 flex 行，按钮 width:100% 会把同行的 <h1> 压扁（"我的工作台"被挤成重叠/变形）。
     正确做法：让「标题块 / 标题 / 新建按钮」各自都能占满整行，并允许换行。 */
  main.content > header{flex-wrap:wrap;row-gap:10px}
  main.content > header > div{flex:1 1 100%;min-width:0;flex-wrap:wrap}
  main.content > header > div > h1{flex:1 1 100%;min-width:0}
  main.content > header .workbench-create{flex:1 1 100%;width:auto}
  header h1{font-size:20px;margin:0}
  /* 顶栏：窄屏空间有限 —— 隐藏版本号、用户名可省略，避免与 logo / 菜单按钮互相挤压 */
  aside .side-version{display:none}
  aside .side-brand{flex:none;min-width:0}
  aside .side-user{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eyebrow{display:none}
  /* ===== 左抽屉导航 ===== */
  .mobile-mask{display:block;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:300;opacity:0;visibility:hidden;transition:opacity .22s}
  .mobile-mask.show{opacity:1;visibility:visible}
  .mobile-drawer{position:fixed;top:0;left:0;bottom:0;width:min(78vw,300px);z-index:310;display:flex;flex-direction:column;padding:20px 14px 16px;background:#fff;transform:translateX(-100%);transition:transform .22s;overflow:auto}
  .mobile-drawer.open{transform:translateX(0)}
  body.mobile-menu-open{overflow:hidden}
  .mobile-drawer-user{font-weight:700;font-size:15px;padding:12px;border-radius:8px;background:#e8edf5;margin-bottom:12px}
  .mobile-drawer-user small{display:block;color:#667085;font-weight:400;margin-top:4px;font-size:12px}
  .mobile-nav-btn{display:block;width:100%;min-height:48px;border:0;background:none;text-align:left;padding:14px 12px;border-radius:8px;color:#475467;font-size:15px;margin:2px 0;cursor:pointer}
  .mobile-nav-btn.active{background:#dfe8f8;color:#0b57b7;font-weight:700}
  .mobile-drawer .mobile-logout{margin-top:auto;min-height:48px;border:0;background:none;color:#b42318;text-align:left;padding:14px 12px;font-size:15px;cursor:pointer}
  /* ===== 触控尺寸 ===== */
  .primary,.ghost,.danger{min-height:44px}
  .toolbar button,.toolbar input,.toolbar select{min-height:44px}
  .pager button{min-height:44px}
  .mz-dialog footer button{min-height:44px}
  /* ===== 表格横向滚动兜底（人员/权限矩阵/统计等）===== */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .dept-users,.admin-result,.stats-block{overflow-x:auto}
  .dept-user-table{min-width:680px}
  .perm-table{min-width:900px}
  /* ===== 零件清单：前两列（序号+图号名称）固定 + 触控行高 ===== */
  .excel-table-wrap{overflow-x:auto}
  .excel-table th:nth-child(-n+2),.excel-table td:nth-child(-n+2){position:sticky;background:#fff;z-index:2}
  .excel-table th:nth-child(1),.excel-table td:nth-child(1){left:0;min-width:52px}
  .excel-table th:nth-child(2),.excel-table td:nth-child(2){left:52px}
  .excel-table thead th{z-index:3}
  .excel-table td,.excel-table th{padding:10px 12px}
  .excel-table td input{min-height:38px}
  /* ===== P1：订单详情纵向化 ===== */
  .detail-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .detail-heading h2{font-size:19px;line-height:1.35;word-break:break-word}
  .detail-stage{padding:18px 16px}
  .detail-stage strong{font-size:18px}
  .detail-action{min-height:46px;padding:13px 16px;font-size:15px}
  .detail-facts{grid-template-columns:1fr}
  .detail-facts > div:nth-child(-n+2){border-bottom:0}
  .detail-facts dd,.detail-fact-value{font-size:20px}
  .attachment-list li{grid-template-columns:1fr auto;gap:8px}
  .attachment-list a,.order-detail .attachment-list a{display:inline-block;padding:8px 10px}
  .attachment-append label{min-height:44px;padding:0 14px}
  /* ===== P1：工序卡片重排 ===== */
  .machining-item{padding:14px 12px;grid-template-columns:22px 1fr;gap:8px}
  .item-check input{width:20px;height:20px}
  .item-title{flex-wrap:wrap;gap:8px}
  .item-title h4{font-size:15px;flex-basis:100%}
  .machining-item .state-chip{font-size:12px;padding:5px 10px}
  .machining-item .part-responsible{margin-left:0}
  .machining-item .part-owner{margin-left:0}
  .operation-list li{display:block;background:#fafbfc;border:1px solid #eef1f5;border-radius:8px;padding:12px;margin:8px 0}
  .operation-list li > span{font-weight:600;font-size:14px}
  .operation-list small{display:block;margin-top:6px;line-height:1.6}
  .op-tools{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
  .op-tools .link-button{min-height:40px;padding:8px 12px;border:1px solid #d0d5dd;border-radius:6px;background:#fff}
  .link-button{min-height:40px;padding:8px 12px}
  .item-tools{gap:8px}
  .machining-downloads{flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
  .machining-downloads button,.route-buttons button{min-height:44px;padding:10px 14px}
  .excel-toolbar .excel-upload{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
  .file-chip{padding:8px 10px;font-size:13px}
  .item-files{gap:8px}
  /* ===== P2：报价表单纵向化（sheet-grid 网格块化）===== */
  .sheet-grid{grid-template-columns:1fr;border-left:0}
  .s-row{display:flex;flex-direction:column}
  .s-row .s-label{background:none;border-right:0;justify-content:flex-start;padding:12px 12px 4px}
  .s-row .s-val{padding:2px 12px 12px;align-items:flex-start}
  .sheet-grid input,.sheet-grid select,.sheet-grid textarea{max-width:100%;min-width:0}
  .sheet-grid .tri-input{max-width:100%;flex-wrap:wrap}
  .sheet-grid .tri-input input{min-width:0}
  .sheet-actions button{min-height:44px;padding:10px 14px}
  .fee-grid.fee-base,.fee-grid.fee-mold{grid-template-columns:1fr}
  .fee-pair{flex-wrap:wrap}
  /* ===== P2：报价 chip 加大 ===== */
  .qf-detail .chip{font-size:14px;padding:11px 14px;border-radius:9px}
  .qf-detail .chip-group-nowrap{flex-wrap:wrap;overflow-x:visible;max-width:520px}
  .qf-detail .chip input{width:19px;height:19px}
  .qf-detail .chip-extra{font-size:14px;padding:9px 12px}
  .qf-detail .chip-extra input{font-size:14px;width:84px}
  /* ===== 弹窗（P0 定稿：居中卡片 + 内部滚动；勿再改回"贴底抽屉"）===== */
  .mz-dialog-overlay{align-items:center;padding:12px 10px}
  .mz-dialog{display:flex;flex-direction:column;width:100%;max-width:100%;max-height:88vh;max-height:90dvh;overflow:hidden;border-radius:14px;padding:18px 16px 22px;padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:mzUp .22s ease}
  @keyframes mzUp{from{transform:translateY(24px);opacity:.4}to{transform:translateY(0);opacity:1}}
  .mz-dialog header button{min-width:44px;min-height:44px}
  .mz-dialog .mz-fields,.mz-dialog .mz-dialog-body{flex:1;min-height:0;overflow-y:auto}
  .mz-dialog > footer,.mz-dialog .mz-dialog-actions{flex:none;padding-top:10px}
  .mz-dialog > footer button,.mz-dialog .mz-dialog-actions button{flex:1 1 0;min-width:0}
  .mz-dialog-inv,.mz-dialog-proc,.mz-dialog-fails{width:100%;max-width:none}
  .mz-dialog-lg,.todo-dialog,.stock-inbound-dialog,.repair-dialog{width:100%;max-width:none}
  .mz-dialog .mz-fields{display:block}
  .mz-dialog .mz-fields > *{width:100%;max-width:100%;margin-bottom:12px}
  /* ===== P1：弹窗内宽表横向滚动 ===== */
  .mz-dialog-body,.mz-dialog .mz-fields{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dept-user-table.inv-table{min-width:920px}
  /* 表头不换行：auto 布局下 nowrap 表头会参与列的最小宽度计算，等于给每列兜住「表头文字宽」，
     从根上消灭「一列一个字、竖着排」；正文仍按 overflow-wrap:anywhere 正常换行 */
  .dept-user-table.inv-table thead th{white-space:nowrap}
  .part-list-table,.proc-items-table{min-width:660px}
  /* ===== P1：产品档案工具栏（全部筛选项＋查询/导出已并为一个流式行，窄屏控件各占满行）===== */
  .archive-toolbar .af-filters{flex-wrap:wrap}
  .archive-toolbar .af-filters > select,.archive-toolbar .af-filters > input{flex:1 1 100%;width:auto;max-width:none;min-width:0}
  .archive-toolbar .af-filters .archive-keyword{flex:1 1 100%;width:auto;max-width:none;min-width:0}
  .archive-toolbar .af-filters > .primary,.archive-toolbar .af-filters > .archive-export{flex:1 1 100%}
  .archive-toolbar .af-custom-range{flex:1 1 100%}
  .archive-toolbar .af-custom-range input,.archive-toolbar .af-filters select{width:auto;max-width:none;flex:1 1 100%}
  /* ===== P1：售后配件选择器（特异性须压过 repair-flow.css 的 0,2,1）===== */
  .part-picker-query,.part-picker-manual-form{flex-wrap:wrap}
  .repair-dialog .part-picker-query input,.repair-dialog .part-picker-manual-form input{flex:1 1 100%;width:100%;min-width:0}
  .repair-dialog .part-picker-query .primary,.repair-dialog .part-picker-manual-form .primary{flex:1 1 100%;width:100%;min-width:0;min-height:44px}
  /* ===== P1：库存（原料构成行改单列 / 操作按钮加大）===== */
  .inv-bom-row{grid-template-columns:1fr}
  .inv-bom-row select,.inv-bom-row input,.inv-bom-row .link-button{width:100%}
  .inv-ops{width:100%}
  .inv-op{flex:1 1 auto;min-height:42px;padding:10px 12px;font-size:13px}
  /* ===== P2：其余板块复用通用规则（借领/采购/项目/盘点/统计/系统管理）===== */
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar > input,.toolbar > select{flex:1 1 100%;min-width:0}
  .toolbar > .primary,.toolbar > .ghost,.toolbar > .danger{flex:1 1 auto}
  .stats-grid2,.stats-two-col{grid-template-columns:1fr}
  .stats-kpi{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .stats-bar-row{grid-template-columns:minmax(76px,1fr) minmax(0,1fr) 64px;gap:8px}
}
/* ===== 2026-09-17 窄桌面兜底（800px～1180px）=====
   根因：app.css 的 `.dept-user-table th,td{overflow-wrap:anywhere}` 把单元格最小内容宽度降到「一个字」，
   而 min-width 兜底原先只写在 @media(max-width:800px) 内 → 800～1180px 时侧栏仍常驻 180–204px，
   正文只剩 600px 左右，15 列的库存表被压成「每列一个字、竖向排一行」。
   这里在窄桌面同样给宽表一个最小宽度，超出部分由页面/容器横向滚动承接（宁可横向拉，不要逐字换行）。 */
@media(max-width:1180px){
  /* 表头不换行（2026-09-17 由「仅库存表」提升为通用）：auto 布局下 nowrap 表头参与列的最小宽度计算，
     等于给每列兜住「表头文字宽」，从根上消灭「一列一个字、竖着排」；正文仍按 overflow-wrap:anywhere 正常换行 */
  .dept-user-table thead th{white-space:nowrap}
  /* 整页横滚根治（2026-09-17 实测）：`.shell` 是 display:grid，grid 子项默认 min-width:auto 会被宽表
     沿祖先链一路撑开（main.content 从 390px 被撑到 1073px）→ 最小宽度兜底"顶破整页"而不是在容器内横滚 */
  .shell > .content{min-width:0}
  /* 表格最小宽度：先让 `.table-scroll>table` 压过 app.css 的 min-width:600px，再兜底未被包裹的宽表 */
  .table-scroll > table{min-width:760px}
  .dept-user-table{min-width:760px}
  .dept-user-table.inv-table{min-width:900px}
  .dept-user-table.perm-table{min-width:900px}
  .dept-user-table.proc-items-table{min-width:900px}
  /* 宽表按列数分档（2026-09-18，用户选定"建议档"，与上一轮 760/900px 一刀切相比只提高宽表）：
     档位类由 app.js 的 wrapTablesForScroll() 按表头列数自动打（≥13 列 cols-xl / 11–12 列 cols-lg / 9–10 列 cols-md），
     不逐表写死；数值＝每列约 95–100px（4 字表头 56px ＋ 左右 padding 32px ≈ 88px，留余量）：
     1000px(9–10 列) / 1160px(11–12 列) / 1320px(≥13 列)。
     代价＝窄屏出现表格内横滚（滚动落在 .table-scroll 容器内，页面整体不横滚），换来长文本不再被 app.css 的
     overflow-wrap:anywhere 逐字断行（旧状：库存/售后 14 列在 900px 内每列约 55px，单行高 251px）。
     注意：两类选择器优先级相同，故本段必须写在上面 760/900px 兜底之后才生效。 */
  .dept-user-table.cols-md{min-width:1000px}
  .dept-user-table.cols-lg{min-width:1160px}
  .dept-user-table.cols-xl{min-width:1320px}
  /* 费用管理页同样是 grid 子项（.cost-card 被撑开） */
  .cost-grid > *{min-width:0}
  /* 非 dept-user-table 的两张宽表（不经 app.js 的自动包裹，需单独兜底）：售后配件库 9 列 / 报价成本 6 列 */
  .part-list-table{min-width:760px}
  .cost-table{min-width:560px}
  /* 2026-09-18：原先此处有一条 `.mz-dialog-body,.mz-dialog .mz-fields{overflow-x:auto}`（≤1180px 生效），
     导致窄桌面（如 1366×768 缩放后视口 ~1093px）点开档案详情弹窗就出现横滚条 —— 用户反馈"电脑端也要滑动看了"。
     该兜底只在 ≤800px 有意义，现已移除；桌面端改为让弹窗内容自身不溢出（见 app.css 的档案详情弹窗规则）。 */
  .detail-section:has(> .dept-user-table),.detail-section:has(> .table-scroll){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stats-block,.admin-result,.dept-users{overflow-x:auto}
  /* 工具栏宽内容兜底（2026-09-17 实测）：订单页日期范围组 581px、产品档案查询卡 799px 都是 flex 子项
     （min-width:auto 不收缩）→ 窄屏会顶破整页，这里允许换行并允许收缩 */
  .toolbar .date-range,.toolbar .date-quick{flex-wrap:wrap;min-width:0;max-width:100%}
  .archive-toolbar .af-filters{flex-wrap:wrap}
  .archive-toolbar .af-filters > select,.archive-toolbar .af-filters > input{min-width:0;max-width:none}
}