/* 电瓷 ERP+MES V2 - 视觉语言：深蓝黑侧栏 + 浅灰画布 + 白色卡片 */
:root{
--brand:#1d4ed8; --brand-dark:#1e3a8a; --brand-deep:#12203a;
--sidebar-bg:#101f38; --sidebar-hover:rgba(255,255,255,.07); --sidebar-active:#1d4ed8;
--bg:#f2f5f9; --card:#ffffff; --border:#e3e8f0;
--text:#1e2a3a; --text-2:#5a6a7f; --text-3:#8b98ab;
--ok:#0f9d58; --ok-bg:#e6f5ec; --warn:#d97706; --warn-bg:#fdf3e0;
--bad:#dc2626; --bad-bg:#fdeaea; --info:#1d4ed8; --info-bg:#e8effd;
--gray:#6b7a90; --gray-bg:#eef1f6;
--radius:10px; --radius-sm:6px;
--shadow:0 1px 3px rgba(16,32,56,.08);
--shadow-lg:0 12px 32px rgba(16,32,56,.18);
font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.55}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--brand);text-decoration:none}
/* ===== 登录 ===== */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#101f38 0%,#1e3a8a 60%,#1d4ed8 100%)}
/* 窄屏下登录卡片要留边距，否则 380px 定宽在 360px 屏上会顶到屏幕两边 */
.login-card{width:380px;max-width:calc(100vw - 32px);background:#fff;border-radius:16px;padding:36px 34px;box-shadow:var(--shadow-lg)}
/* 登录页大标题 = 公司全称，比旧文案长 3 倍多 →
策略：整块交给浏览器缩放（容器已定宽 380px、卡片内宽约 312px）；
同时用 clamp 把字号锁在可读区间上限 18px，够长的全称会自动折 2 行而不会撑破卡片。
行高锁 1.35，避免折行后行距松散。 */
.login-logo{font-size:clamp(15px,4.6vw,18px);font-weight:700;color:var(--brand-dark);
line-height:1.35;margin-bottom:22px}
/* .login-sub 已随 M51 删除（副标题「依据 DB43/T 3523-2026 设计 · V2」整行移除），
规则保留无害但不再有元素命中；如需恢复副标题直接重建该 div 即可 */
.login-sub{color:var(--text-3);font-size:13px;margin-bottom:26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px}
.field input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
outline:none;transition:border .15s}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
/* 登录卡片内的主按钮：撑满卡片。注意必须限定在 .login-card 内——
写成全局 .btn-primary 会让 width:100% / letter-spacing:2px 泄漏到
全站所有 class="btn btn-primary" 的按钮上，把按钮撑满容器并挤压同排按钮 */
.login-card .btn-primary{width:100%;padding:11px;border:none;border-radius:var(--radius-sm);background:var(--brand);
color:#fff;font-size:15px;font-weight:600;letter-spacing:2px}
.login-card .btn-primary:hover{background:var(--brand-dark)}
.login-err{color:var(--bad);font-size:13px;min-height:20px;margin-bottom:4px}
/* ===== 布局 ===== */
/* min-height 写两遍是刻意的：不认 dvh 的浏览器取 100vh；认的（现代移动端）
取 100dvh，避免手机地址栏收起/展开时页面高度跳变。桌面端 dvh 恒等于 vh。 */
.layout{display:flex;min-height:100vh;min-height:100dvh}
.sidebar{width:218px;background:var(--sidebar-bg);color:#cdd8ea;display:flex;flex-direction:column;flex-shrink:0;
position:sticky;top:0;height:100vh;overflow-y:auto}
/* 侧栏品牌块 = 公司全称，18 个汉字塞进 218px 侧栏的可用宽度（约 140px）必然折行。
策略：align-items 由 center 改 flex-start —— 品牌名折 3 行时，居中对齐会让右上角的蓝色
「瓷」标记被视觉挤到左边缘贴死（截图实测），改成顶对齐后标记与首行文字齐平，观感稳定。
字号 13px / 行高 1.45 允许折 3 行；块间距收紧；title 属性（写在 app.js 模板里）保证
窄屏也拿得到完整名称。 */
.side-logo{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 13px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-logo .mark{width:34px;height:34px;border-radius:9px;background:var(--sidebar-active);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.side-logo .t{font-weight:700;font-size:13px;line-height:1.45;color:#fff;letter-spacing:.5px;word-break:break-word;padding-top:1px}
/* .s 已随 M51 删除（侧栏小字「DB43/T 3523-2026 · V2」整行移除），规则保留无害 */
.side-logo .s{font-size:10px;color:#7d8db0}
.side-logo .s{font-size:10px;color:#7d8db0}
.nav-group{padding:12px 8px 2px;font-size:11px;color:#64748f;letter-spacing:2px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 12px;margin:2px 8px;border-radius:8px;
color:#c7d2e5;cursor:pointer;font-size:13.5px;transition:background .12s}
.nav-item:hover{background:var(--sidebar-hover)}
.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600}
.nav-item .ico{width:18px;text-align:center;font-size:14px;flex-shrink:0}
.side-foot{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#7d8db0}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 22px;height:56px;display:flex;
align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
/* M53：顶栏左侧包一层（汉堡按钮 + 标题）。这里**刻意只给最小声明** ——
PC 下不设 flex:1、不加 gap / 省略号，让它与改动前的行为逐像素一致：
汉堡是 display:none（不参与 flex 布局），.top-left 宽度 = 标题内容宽、垂直居中，
等价于原来「标题直接当 topbar 的 flex item」。
（实测教训：一旦在此处加 overflow:ellipsis 或 flex:1，PC 截图会冒出 1px 级抗锯齿差异 ——
肉眼不可见，但破坏了「逐字节可比对」这条交付纪律，所以全部下沉到下方窄屏断点内。）
窄屏需要的 flex:1 / min-width:0 / 省略号，写在 M53 断点里。 */
.top-left{display:flex;align-items:center}
.top-title{font-size:17px;font-weight:700;color:var(--brand-dark)}
.top-user{display:flex;align-items:center;gap:10px}
/* M53：汉堡按钮与「PC / 移动」二选一文案。断点外先给 PC 确定默认值，
窄屏断点内再反过来（.hamb 显示、.pc-only 隐藏、.mob-only 显示）。 */
.hamb{display:none}
.pc-only{display:inline}
.mob-only{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--info-bg);color:var(--brand);
display:flex;align-items:center;justify-content:center;font-weight:600}
.content{padding:20px 22px;max-width:1500px;width:100%;margin:0 auto}
/* ===== 通用元件 ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:16px 18px}
.card+.card{margin-top:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-h .t{font-size:15px;font-weight:700;color:var(--brand-dark)}
/* white-space:nowrap 是刻意的：按钮在 flex 行内被挤压时，宁可保持单行（flex item 的
min-width:auto 会兜住内容宽度），也不要让中文文案折断成两行、按钮变成窄高块 */
.btn{padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;
color:var(--text-2);font-size:13px;white-space:nowrap;transition:all .12s}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-danger{background:#fff;border-color:#f0c8c8;color:var(--bad)}
.btn-danger:hover{background:var(--bad-bg);color:var(--bad)}
.btn-sm{padding:4px 10px;font-size:12.5px;border-radius:6px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn + .btn{margin-left:8px}
/* 用 gap 排版的按钮组：间距统一交给容器的 gap，否则相邻 margin 会叠加成 14/18/22px 参差不齐 */
.toolbar .btn + .btn,.modal-f .btn + .btn,
[style*="display:flex"][style*="gap"] > .btn + .btn{margin-left:0}
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-bad{background:var(--bad-bg);color:var(--bad)}
.tag-info{background:var(--info-bg);color:var(--info)}
.tag-gray{background:var(--gray-bg);color:var(--gray)}
.tag-purple{background:#f0ecfb;color:#6d4fd8}
table.tbl{width:100%;border-collapse:collapse}
.tbl-wrap{overflow-x:auto}
.tbl th{font-size:12.5px;color:var(--text-3);font-weight:600;text-align:left;padding:9px 10px;
border-bottom:1px solid var(--border);white-space:nowrap;background:#fafbfd}
.tbl td{padding:10px;border-bottom:1px solid #eef1f6;font-size:13.5px;vertical-align:middle}
.tbl tr:hover td{background:#f7f9fc}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ops{white-space:nowrap;text-align:right}
/* 操作列里的文字链接组（预览/下载/编辑/作废/删除…）：
Vue 模板中 之间的换行空白会被编译期折叠（whitespace:condense），
实测相邻链接净间距 = 0px，多个链接连成一串分不清，也难点。
这里显式给间距。必须限定 .tbl .ops —— 写成全局 a+a 会泄漏到
页面其它位置的链接（如登录页、表单里的「选择文件」），M29 的教训。 */
.tbl .ops a{display:inline-block;vertical-align:middle}
.tbl .ops a + a{margin-left:12px}
.empty{padding:40px 10px;text-align:center;color:var(--text-3);font-size:13px}
.infobox{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:var(--radius-sm);
padding:10px 14px;font-size:13px;line-height:1.8}
.warn-bar{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:var(--radius-sm);
padding:8px 14px;font-size:12.5px;margin-bottom:12px}
/* KPI 指标卡 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.kpi .k{font-size:13px;color:var(--text-2)}
.kpi .v{font-size:30px;font-weight:700;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.kpi .v small{font-size:13px;color:var(--text-3);font-weight:400;margin-left:2px}
.kpi .d{font-size:12px;color:var(--text-3)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-2a{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media(max-width:1100px){.grid-2,.grid-2a{grid-template-columns:1fr}}
/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(16,32,56,.45);z-index:200;display:flex;
align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:620px;max-width:96vw;
max-height:92vh;display:flex;flex-direction:column}
.modal.lg{width:860px}.modal.sm{width:460px}
.modal-h{padding:15px 20px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;
display:flex;justify-content:space-between;align-items:center}
.modal-h .x{cursor:pointer;color:var(--text-3);font-size:20px;line-height:1}
.modal-b{padding:16px 20px;overflow-y:auto}
.modal-f{padding:13px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:12px}
.form-item{display:flex;flex-direction:column;gap:5px}
.form-item .lab{font-size:13px;color:var(--text-2)}
.form-item .lab .req{color:var(--bad)}
.form-item input,.form-item select,.form-item textarea{border:1px solid var(--border);border-radius:var(--radius-sm);
padding:8px 10px;outline:none;width:100%;background:#fff}
.form-item input:focus,.form-item select:focus{border-color:var(--brand)}
.form-item .hint{font-size:12px;color:var(--text-3)}
/* 通用表单控件（表格单元格等裸用场景） */
.form-input{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);
outline:none;background:#fff;color:var(--ink);font-size:13px;font-family:inherit}
.form-input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(29,78,216,.10)}
/* 明细行表格（订单产品明细录入） */
.items-editor{border:1px solid var(--border);border-radius:var(--radius-sm);overflow-x:auto}
.items-editor table{width:100%;border-collapse:collapse;min-width:760px}
.items-editor th{background:#fafbfd;padding:7px 6px;font-size:12.5px;color:var(--text-3);white-space:nowrap;border-bottom:1px solid var(--border)}
.items-editor td{padding:6px;border-bottom:1px solid #f0f3f8;vertical-align:middle}
.items-editor input,.items-editor select{border:1px solid #e2e8f1;border-radius:5px;padding:6px 7px;width:100%;outline:none;font-size:13px}
.items-editor input:focus,.items-editor select:focus{border-color:var(--brand)}
.mini-note{font-size:11.5px;color:var(--text-3);line-height:1.4;margin-top:2px;white-space:normal}
/* M30：工单「补产」小标签 + 订单欠交数字 */
.tag-sup{display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;line-height:16px;
background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:600;vertical-align:1px}
.short-num{color:var(--bad);font-weight:600}
/* M40：库存期初导入（仅超管）—— 下载模板 / 粘贴回填 / 预览 / 确认 */
.imp-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.imp-bar select{border:1px solid #e2e8f1;border-radius:5px;padding:6px 8px;font-size:13px;outline:none;background:#fff}
.imp-tip{font-size:12.5px;color:var(--text-2);background:var(--gray-bg);padding:8px 10px;border-radius:6px;line-height:1.7;margin-bottom:10px}
.imp-paste{width:100%;box-sizing:border-box;border:1px solid #e2e8f1;border-radius:6px;padding:8px 10px;
font-size:12.5px;line-height:1.5;font-family:Consolas,"Courier New",monospace;outline:none;resize:vertical}
.imp-paste:focus{border-color:var(--brand)}
.imp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.imp-chk{font-size:12.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.imp-stat{font-size:12.5px;color:var(--text-2);margin-bottom:8px}
.imp-prev{max-height:300px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.imp-prev table{width:100%;border-collapse:collapse}
.imp-prev th{background:#fafbfd;padding:7px 6px;font-size:12.5px;color:var(--text-3);white-space:nowrap;
border-bottom:1px solid var(--border);text-align:left;position:sticky;top:0}
.imp-prev td{padding:6px;border-bottom:1px solid #f0f3f8;font-size:13px}
.imp-prev th.num,.imp-prev td.num{text-align:right}
.imp-err{font-size:12.5px;color:var(--bad);background:var(--bad-bg);padding:8px 10px;border-radius:6px;margin-top:8px;line-height:1.6}
/* 抽屉（右侧详情） */
.drawer-mask{position:fixed;inset:0;background:rgba(16,32,56,.4);z-index:150}
.drawer{position:fixed;top:0;right:0;bottom:0;width:680px;max-width:100vw;background:#fff;z-index:160;
display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(16,32,56,.18)}
.drawer-h{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.drawer-h .t{font-weight:700;font-size:15px;color:var(--brand-dark)}
.drawer-b{padding:18px 20px;overflow-y:auto;flex:1}
/* 工序流转条 */
.steps{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 14px}
.step{position:relative;padding:6px 10px;border-radius:8px;font-size:12.5px;white-space:nowrap;
background:var(--gray-bg);color:var(--gray);border:1px solid transparent}
.step.done{background:var(--ok-bg);color:var(--ok);font-weight:600}
.step.cur{background:var(--info);color:#fff;font-weight:700;box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.step.wait{background:var(--gray-bg);color:var(--text-3)}
/* ===== M32：工单列表「工序进度」方格 + 补投轮分组样式 =====
末格判色：本工单累计入库 ≥ 所属订单行需求量 → 绿(已完成)；否则 → 黄(部分完成)。
注意 .sq 是 flex 行内元素，必须 flex:0 0 auto，否则多轮 18 格会被压扁。 */
.sq{display:inline-block;flex:0 0 auto;width:9px;height:9px;border-radius:3px;background:var(--gray-bg)}
.sq.ok{background:var(--ok)}
.sq.cur{background:var(--brand);box-shadow:0 0 0 2px rgba(29,78,216,.18)}
.sq.warn{background:var(--warn);box-shadow:0 0 0 2px rgba(217,119,6,.20)}
/* 工序记录按轮分组的组标题（第 1 轮 / 第 N 轮·补投） */
.round-h{margin-top:12px;padding:6px 10px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;
background:#f5f8fd;color:var(--brand-dark);border-left:3px solid var(--brand)}
/* 工单结案提示：入库不足订单需求时转黄提示「部分完成」 */
.done-note{background:var(--ok-bg);border-radius:10px;padding:14px;text-align:center;color:var(--ok);
font-weight:600;line-height:1.7}
.done-note.warn{background:var(--warn-bg);color:var(--warn)}
/* 大数字填报 */
.report-box{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:#fafcff}
.big-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0 4px}
.big-field{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.big-field .l{font-size:13px;color:var(--text-2);margin-bottom:8px;display:flex;justify-content:space-between}
.big-field input{border:none;outline:none;font-size:30px;font-weight:700;color:var(--brand-dark);width:100%;
font-variant-numeric:tabular-nums;border-bottom:2px solid transparent;text-align:center}
.big-field input:focus{border-bottom-color:var(--brand)}
.big-field .hint{font-size:11.5px;color:var(--text-3);margin-top:6px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:12.5px;cursor:pointer;background:#fff;color:var(--text-2)}
.chip.on{background:var(--info);border-color:var(--info);color:#fff}
/* 顶部搜索/筛选条 */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar input,.toolbar select{border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;outline:none}
.toolbar .spacer{flex:1}
/* 出入库日志筛选行（M34，库存页专用）。类名独立且不覆盖任何既有元素，
避免 M29 那种「为局部写的全局规则泄漏到全站」；间距靠 flex+gap，不依赖换行空白（见 M31）。 */
.inv-log-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;
font-size:12.5px;color:var(--text-3)}
.inv-log-filter input[type="date"],.inv-log-filter select{border:1px solid var(--border);
border-radius:var(--radius-sm);padding:5px 8px;font-size:12.5px;color:var(--text);
background:var(--card);outline:none}
.inv-log-filter input[type="date"]:focus,.inv-log-filter select:focus{border-color:var(--brand)}
/* 日志备注列：单行省略（全量文字走 title 提示与导出的 Excel，避免把半宽卡片撑破） */
.inv-log-note{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 日志时间列：不许折行（半宽卡片时曾被压成「2026- / 09-18 / 23:18」三行） */
.inv-log-t{white-space:nowrap;font-size:12px}
/* 详情信息网格 */
.meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;padding:12px 0;border-bottom:1px dashed var(--border);margin-bottom:12px}
.meta-grid .m .k{font-size:12px;color:var(--text-3)}
.meta-grid .m .v{font-size:14px;font-weight:600;color:var(--text);margin-top:2px}
@media(max-width:900px){.meta-grid{grid-template-columns:repeat(2,1fr)}}
/* 占位/建设中 */
.soon{padding:60px 20px;text-align:center;color:var(--text-3)}
.soon .big{font-size:34px;margin-bottom:10px}
.soon .lst{display:inline-block;text-align:left;margin-top:14px;line-height:2;color:var(--text-2)}
.toast-wrap{position:fixed;top:18px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:#fff;border-left:4px solid var(--brand);box-shadow:var(--shadow-lg);border-radius:8px;
padding:11px 16px;font-size:13.5px;min-width:240px;max-width:380px;animation:tin .2s ease}
.toast.err{border-left-color:var(--bad)}
.toast.ok{border-left-color:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.loading{text-align:center;color:var(--text-3);padding:40px;font-size:13px}
/* ---- 单据打印（发货单 / 出厂质保单）---- */
.print-modal{width:880px;max-width:97vw}
.pm-tabs{display:flex;align-items:center;gap:8px;padding:11px 18px 0}
.pm-tabs .chip{user-select:none}
.pm-scroll{background:#eef1f6}
.paper{background:#fff;color:#222;width:760px;max-width:100%;margin:12px auto 6px;padding:34px 38px;
border:1px solid #e2e5ea;border-radius:6px;box-shadow:0 2px 12px rgba(16,32,56,.07);
font-size:13px;line-height:1.75;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.paper .p-title{text-align:center;font-size:24px;font-weight:800;letter-spacing:10px;color:#111;margin-bottom:2px}
.paper .p-sub{text-align:center;color:#888;font-size:12px;margin-bottom:10px}
.paper table.inf{width:100%;border-collapse:collapse;font-size:13px;margin:2px 0 8px}
.paper table.inf td{padding:1.5px 2px;vertical-align:top}
.paper table.tbl{border-collapse:collapse;width:100%}
.paper table.tbl th{background:#f2f2f2;color:#333;font-weight:600;border:1px solid #b9b9b9;padding:5px 7px;font-size:12.5px;text-align:left}
.paper table.tbl td{border:1px solid #c8c8c8;padding:4.5px 7px;font-size:12.5px;vertical-align:middle}
.paper table.tbl tr:hover td{background:#fff}
.paper .sig{display:flex;margin-top:30px;font-size:13px;color:#333}
.paper .sig div{flex:1}
.paper .foot{margin-top:18px;text-align:center;color:#9a9a9a;font-size:12px}
@media print{
@page{size:A4;margin:10mm 9mm}
body *{visibility:hidden !important}
.print-mask{position:static !important;display:block !important;background:#fff !important;
padding:0 !important;overflow:visible !important}
.print-modal{position:static !important;width:100% !important;max-width:none !important;
max-height:none !important;box-shadow:none !important;border:none !important;margin:0 !important}
.print-modal .modal-h,.print-modal .pm-tabs{display:none !important}
.print-modal .pm-scroll{max-height:none !important;overflow:visible !important;padding:0 !important;background:#fff !important}
.print-modal .paper{visibility:visible !important;width:100% !important;max-width:100% !important;
margin:0 !important;padding:0 !important;border:none !important;box-shadow:none !important;
color:#000 !important;font-size:12px !important}
.print-modal .paper *{visibility:visible !important}
}
/* ===== 图纸资料（M22）===== */
.ext-badge{display:inline-block;min-width:34px;text-align:center;padding:1px 5px;margin-right:6px;
border-radius:4px;font-size:11px;font-weight:600;line-height:1.65;vertical-align:1px}
.ext-pdf{background:var(--bad-bg);color:var(--bad)}
.ext-img{background:var(--ok-bg);color:var(--ok)}
.ext-cad{background:var(--info-bg);color:var(--info)}
.ext-xls{background:#e6f5ec;color:#0f7a45}
.ext-doc{background:var(--info-bg);color:var(--brand-dark)}
.ext-zip{background:var(--warn-bg);color:var(--warn)}
.ext-other{background:var(--gray-bg);color:var(--gray)}
.drop{border:1px dashed var(--border);border-radius:var(--radius-sm);padding:18px;text-align:center;
color:var(--text-2);background:#fafcff;transition:all .12s}
.drop.over{border-color:var(--brand);background:var(--info-bg)}
/* M28 单据删除确认弹窗的影响清单 */
.del-sec{margin-bottom:10px}
.del-t{font-weight:600;font-size:13px;color:var(--text-2);margin-bottom:4px}
.del-li{font-size:13px;color:var(--text-2);line-height:1.75}
/* M39：用户与权限页 —— 角色访问矩阵（只读展示） */
.perm-tbl th,.perm-tbl td{text-align:center;padding:5px 8px}
.perm-tbl th{white-space:nowrap}
.perm-tbl .perm-mod{text-align:left;font-weight:600;white-space:nowrap}
.perm-tbl .perm-grp{text-align:left;background:var(--gray-bg);color:var(--text-3);font-size:11.5px;font-weight:600;letter-spacing:.4px}
.perm-yes{color:var(--ok);font-weight:700;font-size:14px}
.perm-no{color:#c7d0dc}
/* ============================================================================
M53 移动端适配（2026-10-10）
----------------------------------------------------------------------------
目标：手机端「看为主、偶尔记个数」可用；PC（>900px）零变化 —— 全部规则都在
断点内，断点之外的 app.css 逻辑未动。
⚠ 必须用 `screen and (...)`，不能写裸 `@media(max-width:900px)`：
打印时视口按纸张算，A4 内容宽约 794px < 900px → 裸断点照样命中，会把
.paper 里的单据表格变成「横向滚动容器」，打出来就是被裁掉一半的半张纸。
本文件上方另有两处旧断点（1100 / 900，分别管 .grid-2 与 .meta-grid）没加
screen，属既有遗留，本次不动它们。
============================================================================ */
@media screen and (max-width:900px){
/* ---------- 1. 侧栏 → 覆盖式抽屉 ---------- */
/* PC 的侧栏是 width:218px + sticky，在 375px 屏上要占掉 58% 宽度，内容区只剩 157px。
窄屏改成 fixed 抽屉：脱离文档流 → .main 独占整宽；默认平移出屏，.open 滑回来。 */
.sidebar{
position:fixed;top:0;left:0;bottom:0;z-index:120;
width:266px;max-width:84vw;
height:auto; /* 覆盖 PC 的 height:100vh；高度改由 top/bottom 撑出 */
transform:translateX(-105%); /* 多移 5% 是为了把 box-shadow 也一起推出视口 */
transition:transform .22s ease;
box-shadow:6px 0 30px rgba(8,18,36,.35);
}
.sidebar.open{transform:none}
.nav-item{padding:11px 12px;font-size:14px} /* 触摸目标从 38px 加到 42px */
.nav-group{padding:14px 8px 4px}
.side-foot{padding:12px 16px;font-size:11.5px}
.side-mask{position:fixed;inset:0;z-index:110;background:rgba(10,20,38,.46);
-webkit-tap-highlight-color:transparent}
/* ---------- 2. 顶栏 ---------- */
.topbar{padding:0 12px;gap:8px}
/* 窄屏才给标题加省略号 + 允许压缩：PC 顶栏宽裕、不需要，加了反而破坏逐字节可比对 */
.top-left{gap:9px;min-width:0;flex:1}
.top-title{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-user{gap:6px;flex-shrink:0}
.hamb{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;flex-shrink:0;padding:0;
border:1px solid var(--border);border-radius:8px;background:#fff;
color:var(--brand-dark);font-size:16px;line-height:1}
.hamb:active{background:var(--info-bg)}
.tu-text{display:none} /* 窄屏只留头像，姓名/角色让位给页面标题 */
.pc-only{display:none}
.mob-only{display:inline}
.avatar{width:30px;height:30px;font-size:13px}
/* ---------- 3. 内容与卡片 ---------- */
.content{padding:14px 12px}
.card{padding:14px 13px}
.card-h{margin-bottom:10px;flex-wrap:wrap;gap:8px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:10px}
.kpi{padding:13px 14px;gap:4px}
.kpi .v{font-size:25px}
.empty{padding:30px 10px}
.infobox,.warn-bar{padding:9px 12px;font-size:12.5px}
/* ---------- 4. 表格：本次的关键修复 ----------
实测：全站 70 个 只有 5 处包了 .tbl-wrap，其余 65 处是「裸表」，
列宽由内容决定，一旦超过容器就顶穿 .card → .main → 整个页面。
改前 375px 巡检：18/18 页横向溢出，最重 +615px（窑次页）、最轻 +88px（发货单）。
逐个补包裹要动 10 个 JS 模板、风险大；这里用 :has() 让「任何直接包含 .tbl 的容器」
自己成为横向滚动视口 —— 一处生效、零模板改动。
:has() 需 Edge/Chrome 105+（2022-08 起）；老浏览器走 @supports not 兜底，
把表格自身变成滚动块（盒模型略变，但同样不再撑破页面）。 */
*:has(> table.tbl){overflow-x:auto;-webkit-overflow-scrolling:touch}
@supports not selector(:has(*)){
table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* 只给容器加滚动还不够：table.tbl 的 width:100% 会逼着表格硬塞进 375px，
浏览器宁可把「江苏智达高压电气有限公司」逐字折成 11 行也不溢出（截图实测），
行高被撑到半屏、完全没法读。
改成 min-width:max-content —— 表格至少保持「所有内容不折行」的宽度，
容器不够就横向滚动。宁可让用户滑一下，也不要牺牲可读性去硬塞。 */
table.tbl{width:100%;min-width:max-content}
.tbl th{padding:8px 9px;font-size:12px}
.tbl td{padding:8px 9px;font-size:13px}
.tbl .ops a{padding:5px 1px} /* 加大操作链接的点击热区 */
.tbl .ops a + a{margin-left:14px} /* 拉开间距防误触 */
.items-editor table{min-width:640px} /* 原 760px，窄屏降一档，少滑一截 */
/* ---------- 5. 表单 ---------- */
.form-row{grid-template-columns:1fr;gap:11px;margin-bottom:10px}
.big-inputs{grid-template-columns:1fr;gap:10px}
.big-field{padding:12px 14px}
.big-field input{font-size:26px}
.meta-grid{grid-template-columns:repeat(2,1fr);gap:8px 12px}
/* .toolbar 是 .card-h 的 flex 项，默认 min-width:auto + 无上限 —— 它会被子元素的
max-content 决定宽度。trace.js 的搜索框带内联 style="width:400px"（内联优先级最高，
CSS 覆盖不了），把容器顶到 400px → 375px 下穿出 .card（实测 +51px，全站唯一一处）。
下面只给容器加「不超父宽 + 允许收窄」的上限：子元素那侧已经 flex:1 1 128px + min-width:0，
容器一旦被夹住就会自动收窄。不去动内联样式（那是 10 个页面的统一写法，且 PC 需保持逐像素可比）。 */
.toolbar{gap:8px;max-width:100%;min-width:0}
.toolbar input,.toolbar select{flex:1 1 128px;min-width:0}
.imp-bar,.imp-actions{gap:6px}
/* iPhone/iPad 上，聚焦字号 <16px 的输入框会让整页自动放大（页面被"弹"一下，
用户得手动缩回去）。把控件字号顶到 16px 消除该行为；.big-field（26px）与
其它更具体的选择器特异性更高，不受影响。 */
input,select,textarea{font-size:16px}
.items-editor input,.items-editor select{font-size:16px}
/* ---------- 6. 弹窗与抽屉 ---------- */
.mask{padding:0}
.modal,.modal.lg{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
/* 小确认框（.sm）不铺满全屏 —— 一句「确定删除？」占满一屏反而让人找不到按钮 */
.modal.sm{width:calc(100% - 28px);height:auto;max-height:84dvh;border-radius:12px}
.modal-h{padding:13px 15px;position:sticky;top:0;background:#fff;z-index:3}
.modal-h .x{font-size:24px;padding:0 4px}
.modal-b{padding:14px 15px}
.modal-f{padding:11px 15px;position:sticky;bottom:0;background:#fff;z-index:3;
box-shadow:0 -3px 14px rgba(16,32,56,.08)}
.modal-f .btn{flex:1} /* 底栏按钮平分宽度，拇指好按 */
.drawer{width:100%;max-width:100%}
.drawer-b{padding:14px 15px}
.print-modal{width:100%}
.pm-tabs{overflow-x:auto;padding:10px 14px 0}
.paper{width:100%;padding:22px 16px}
.paper .p-title{font-size:20px;letter-spacing:5px}
/* ---------- 7. 触摸目标 ---------- */
.btn{padding:8px 13px;font-size:13.5px}
.btn-sm{padding:7px 11px;font-size:12.5px}
.chip{padding:5px 11px}
.step{padding:7px 11px}
/* ---------- 8. 提示条 ---------- */
.toast-wrap{top:auto;bottom:12px;left:12px;right:12px}
.toast{min-width:0;max-width:none}
}
/* 抽屉开着时把窗口拉宽（或手机横竖屏切换）到 PC 尺寸：侧栏在 PC 下本来就没有位移、
看着正常，但遮罩会继续盖住整个界面。JS 里已监听 resize 复位状态，这里再兜一层。 */
@media(min-width:901px){
.side-mask{display:none!important}
}
/* ---------- 备案号（工信部要求网站首页底部标注，且可跳转核验） ---------- */
.site-beian{text-align:center;font-size:12px;color:var(--text-3);line-height:1.6}
.site-beian a{color:var(--text-3);text-decoration:none}
.site-beian a:hover{color:var(--brand);text-decoration:underline}
/* 登录卡片内：与表单之间加一条分隔 */
.login-card .site-beian{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
/* 主界面底部：.main 是纵向 flex，margin-top:auto 让它贴底；
内容超高时自然排在内容之后，不遮挡任何内容 */
.site-foot{flex:0 0 auto;margin-top:auto;padding:10px 22px;border-top:1px solid var(--border);background:var(--card)}