/* ============ 包装订单管理系统 ============ */
:root {
--bg: #f3f5f8;
--card: #ffffff;
--line: #e3e7ee;
--text: #232a35;
--muted: #6b7280;
--brand: #1f6feb;
--brand-dk: #1756c0;
--green: #2f9e44;
--red: #e03131;
--orange: #e8590c;
--amber: #f08c00;
--radius: 10px;
--shadow: 0 1px 3px rgba(20, 30, 60, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 关键：横向滑/划到页面边缘时，不让浏览器把"返回/前进"手势接走，
否则在触屏/触摸板上划一下就会把当前页面（如新建订单）带走 */
html, body { overscroll-behavior-x: none; }
body {
font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
.hidden { display: none !important; }
a { color: var(--brand); text-decoration: none; }
/* ---------- 登录 ---------- */
#login-view {
min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center;
/* ⚠ 方向必须是 column。默认的 row 下，下面那个 .icp-foot 会变成**第二个 flex 项、
被横排到登录卡片的右边**（症状是「备案号跑到登录框旁边了」）。
column + center 让它自然落在卡片正下方、水平居中，**一个定位属性都不用加**。
⚠ 别为了挪位置给它加 position:fixed/absolute：卡片实测高 ≈369px，矮屏
（横屏手机 ≈375px，或窗口拖得很矮）时卡片下沿正好落在那条上 ⇒ 备案号横压在
卡片下沿（2026-09-23 两个方案都实测过，都会压字）；column 排布则让容器跟着
内容长高、永远不会压。
⚠ 别给这里补 `justify-content: safe center`（2026-09-23 试过，是个**恒等变换**）：
容器是 `height:auto + min-height:100vh`，内容比屏幕高时它会**跟着长到内容那么高**，
于是容器内**没有富余空间**，`justify-content` 无物可分配 ⇒ center 与 safe center
必然同解；内容比屏幕矮时两者也都是居中。矮屏上要靠滚动才看得到页脚是正常现象，
**不是**「居中把顶部裁掉」那一类 bug（那种 bug 需要容器高度被钉死才会出现）。 */
gap: 14px;
background: linear-gradient(135deg, #eaf2ff 0%, #f6f8fc 60%);
}
/* 登录页底部那一块：版权行 + ICP 备案号（工信部要求首页挂号并链到 beian.miit.gov.cn）。
两行之间用
分行、同吃这一条规则，所以这里没有「行间距」要管。
位置完全靠上面 `#login-view` 的 flex 排布，**本规则只负责字号和颜色** —— 没有
left/right/bottom，也没有 position，正因为如此它在任何屏幕高度下都不会压到卡片。
⚠ 别把它挪出 `#login-view`：它是靠父级被 .hidden 才跟着消失的（登录后不出现）。 */
.icp-foot {
font-size: 12px; color: var(--muted); text-align: center;
}
.icp-foot a { color: inherit; }
.icp-foot a:hover { text-decoration: underline; }
.login-card {
width: 360px; max-width: 92vw; background: var(--card); border-radius: 14px;
padding: 34px 30px 26px; box-shadow: 0 10px 30px rgba(20, 40, 90, .12);
}
.login-brand { font-size: 20px; font-weight: 700; text-align: center; }
.login-sub { color: var(--muted); text-align: center; font-size: 12px; margin: 6px 0 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
font-size: 14px; background: #fff; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.12);
}
/* 新建订单「订单类型」单选胶囊（成品单 / 半成品单 / 定制单） */
.ot-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-radios .ot-r {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
border: 1px solid var(--line); border-radius: 999px; background: #fff;
font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.ot-radios .ot-r:hover { border-color: var(--brand); }
.ot-radios .ot-r input { width: auto; height: auto; padding: 0; margin: 0; border: none; box-shadow: none; accent-color: var(--brand); cursor: pointer; }
.ot-radios .ot-r input:focus { box-shadow: none; }
.ot-radios .ot-r:has(input:checked) {
border-color: var(--brand); background: #eef5ff; color: var(--brand-dk); font-weight: 600;
}
/* ---------- 商品设置 · 字段编辑器 ---------- */
.ff-grid { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ff-grid > .ff-card { flex: 1 1 300px; min-width: 0; }
/* 商品设置 →「商品字段」和「定制产品字段」两张卡：比同行的「材质/规格选项」宽，且两张严格同宽。
宽度 = basis + (grow/Σgrow)·剩余空间。两张宽卡 basis 相同、grow 相同（1.5），
所以无论容器多宽，这两张算出来的宽度永远相等 —— 要「一样宽」就得让 basis 和 grow 都一致，
只改其中一个都会让两张随容器宽度错开。
basis 330 而非 540：两张宽卡 + 一张窄卡若按 540 起算，1400px 容器里 540×2+300+32 = 1412 放不下，
「材质/规格选项」会被挤到第二行。330 起算合计 992px 仍在一行，窄屏才照旧换行落整宽。
1400px 容器下实测 ≈ 483 / 483 / 402。 */
.ff-grid > .ff-card-wide { flex: 1.5 1 330px; }
/* ---------- 系统设置 · 数据维护卡里的并排行 ----------
四段说明两两并排（②③ 一行、④⑤ 一行），不再一条压一条。
两栏等宽：basis 相同 + grow 相同 ⇒ 任何容器宽度下两栏严格相等（与上面两张宽卡同一套算法）。
basis 320：两个 320 + gap 16 = 656px 起才并排，比这窄（手机/窄窗）自动落回上下堆叠。 */
.maint-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.maint-row > * { flex: 1 1 320px; min-width: 0; }
.ff-row {
display: flex; align-items: flex-start; gap: 10px; padding: 6px 2px;
border-bottom: 1px solid var(--line);
}
.ff-row:last-child { border-bottom: none; }
.ff-main { flex: 1; min-width: 0; }
.ff-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ff-line input[data-key="label"] {
flex: 1; min-width: 140px; padding: 7px 10px; border: 1px solid var(--line);
border-radius: 8px; font-size: 13px; background: #fff; color: var(--text);
}
.ff-line select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
.ff-line input:focus, .ff-line select:focus { outline: none; border-color: var(--brand); }
.ff-badge {
font-size: 11px; padding: 2px 7px; border-radius: 10px; white-space: nowrap;
}
.ff-b-builtin { background: #eef1f6; color: #5b6472; }
.ff-b-custom { background: #e6f2ff; color: var(--brand-dk); }
.ff-static { font-size: 12px; color: var(--muted); }
.ff-toggles { margin-top: 6px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.ff-toggles label.ff-chk { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ff-toggles label.ff-chk input { accent-color: var(--brand); }
.ff-field { margin-top: 6px; max-width: 300px; }
.ff-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ff-field input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.ff-actions { display: flex; align-items: center; gap: 5px; flex: none; }
.ff-actions .btn-sm { padding: 4px 8px; }
.ff-max { font-size: 11px; color: var(--muted); }
.craft-row .ff-line input {
flex: 1; min-width: 120px; padding: 7px 10px; border: 1px solid var(--line);
border-radius: 8px; font-size: 13px; background: #fff; color: var(--text);
}
.craft-row .ff-line input:focus { outline: none; border-color: var(--brand); }
/* ---------- 一组胶囊式勾选框 ----------
用到两处：订单工艺类型（新建订单 / 订单信息编辑），以及商品资料里「复选框」类型的
自定义字段（见 app.js productFormFields）。类名带 craft 是历史原因，做法是通用的。 */
.craft-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.craft-checks .craft-ck {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
border: 1px solid var(--line); border-radius: 999px; background: #fff;
font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.craft-checks .craft-ck:hover { border-color: var(--brand); }
.craft-checks .craft-ck input { accent-color: var(--brand); margin: 0; cursor: pointer; }
.craft-checks .craft-ck:has(input:checked) {
border-color: var(--brand); background: #eef5ff; color: var(--brand-dk); font-weight: 600;
}
/* 订单行里的自定义字段单元格（新建订单页按「新建订单」开关出列；见 app.js cfCellHTML）。
在窄格子里把控件收紧：输入/下拉限宽别撑破表，胶囊勾选框缩小一号、间距收窄。 */
.cf-cell { min-width: 110px; }
.cf-cell input, .cf-cell select { max-width: 100%; }
.cf-cell .craft-checks { gap: 4px; }
.cf-cell .craft-ck { padding: 3px 8px; font-size: 12px; }
/* 产品明细里每行的「工艺」列（仅当订单信息勾了工艺才显示，列名/格子联动隐藏） */
#no-lines-table.no-crafts .craft-col,
#no-lines-table.no-crafts .craft-cell { display: none; }
.craft-cell { min-width: 150px; }
.craft-cell .cc {
display: inline-flex; align-items: center; gap: 3px; margin: 2px 8px 2px 0;
font-size: 12px; color: var(--text); cursor: pointer; user-select: none; white-space: nowrap;
}
.craft-cell .cc input { accent-color: var(--brand); margin: 0; cursor: pointer; }
.craft-cell .cc:has(input:checked) { color: var(--brand-dk); font-weight: 600; }
/* 「新增/编辑客户」弹窗里那张意向表的工艺格：勾选框**排成一排不折行**。
`data-intents="modal"` 是意向表容器上的标记（页面详情那份是 "page"），所以这条只作用于
弹窗 —— 订单行那格（`#no-lines-table`，还是 150px 的窄格）照样折行，那儿折行是对的。
min-width 只是**下限**：工艺是「商品设置 · 产品工艺」里可配的，条数多了表格会自己变宽
（`.modal-body` 是 overflow:auto，撑不下就横向滚，不会把勾选框挤没）。 */
[data-intents="modal"] .craft-cell { min-width: 340px; }
[data-intents="modal"] .craft-checks { flex-wrap: nowrap; }
.login-err { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 4px; }
/* ---------- 订单列表 · 行内展开（产品明细与进度） ---------- */
.order-expand-row td { padding: 4px 14px 14px; background: #fafbfc; }
.inline-expand { font-size: 13px; }
.ie-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.ie-title { font-weight: 600; font-size: 14px; }
.ie-link { color: var(--brand); font-size: 12px; cursor: pointer; text-decoration: none; }
.ie-link:hover { text-decoration: underline; }
.tbl-compact { font-size: 12px; }
.tbl-compact th, .tbl-compact td { padding: 5px 8px; }
.login-tip { margin-top: 16px; font-size: 12px; color: #a0a7b4; text-align: center; }
.btn-block { width: 100%; }
/* ---------- 按钮 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
border: 1px solid transparent; border-radius: 8px; padding: 7px 14px;
font-size: 13px; cursor: pointer; background: #eef1f6; color: var(--text);
transition: filter .12s, background .12s; white-space: nowrap; user-select: none;
}
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); }
.btn-green { background: var(--green); color: #fff; }
.btn-red { background: #fff; color: var(--red); border-color: #f3c1c1; }
.btn-red:hover { background: #fdecec; }
.btn-ghost { background: transparent; color: #d7deea; border-color: rgba(255,255,255,.22); }
.btn-sm { padding: 3px 9px; font-size: 12px; border-radius: 7px; }
.btn-xs { padding: 1px 8px; font-size: 12px; border-radius: 6px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- 整体布局（左侧竖菜单 + 右侧页签区） ---------- */
.layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
flex: none; width: 108px; background: #f7f8fa; border-right: 1px solid var(--line);
display: flex; flex-direction: column; min-height: 0;
}
.sidenav { flex: 1; overflow-y: auto; padding: 8px 6px; }
.sn-item {
display: flex; align-items: center; gap: 7px; padding: 7px 8px; margin-bottom: 2px;
border-radius: 6px; cursor: pointer; color: #3a4352; font-size: 13px; user-select: none; white-space: nowrap;
}
.sn-item .ic { flex: none; width: 15px; text-align: center; }
.sn-item:hover { background: #eef1f6; color: var(--text); }
.sn-item.active { background: var(--brand); color: #fff; font-weight: 600; }
/* 右侧飞散子菜单：悬停/点击一级项，在它右边弹出一个浮层框 */
.sn-hint { flex: none; font-size: 10px; color: var(--muted); margin-left: auto; }
.sn-flyout {
position: fixed; display: none; min-width: 150px; z-index: 70;
background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 5px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); white-space: nowrap;
}
.sn-flyout.open { display: block; }
.sn-flyout-item {
display: block; padding: 7px 10px; border-radius: 6px; cursor: pointer;
font-size: 12px; color: #3a4352; user-select: none;
}
.sn-flyout-item:hover { background: #eef1f6; color: var(--text); }
.sn-flyout-item.active { background: #e3ecfb; color: var(--brand); font-weight: 600; }
/* 右上角：用户下拉菜单（与页签同行） */
.tabbar-user { flex: none; position: relative; margin-left: auto; padding: 0 8px 0 12px; border-left: 1px solid var(--line); display: flex; align-items: center; }
/* 当前公司那颗胶囊。**默认隐藏**，由 coChipRender() 打开 —— 单人单公司时它整块不出现，
顶栏跟改造前一模一样。 */
.co-chip-wrap { position: relative; display: none; }
.co-chip-wrap.on { display: block; }
.co-chip {
display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
border: 1px solid var(--line); background: #f7f9fc; border-radius: 15px;
font: inherit; font-size: 12px; color: var(--text); cursor: default; max-width: 200px;
}
.co-chip.can-switch { cursor: pointer; }
.co-chip.can-switch:hover { background: #eef1f6; }
.co-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #37b26c; }
#co-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-caret { flex: none; font-size: 9px; color: var(--muted); }
/* 只有点得开的时候才画那个小三角 —— 不能切的人看到一个箭头会去点它 */
.co-chip:not(.can-switch) .co-caret { display: none; }
.co-menu-head { padding: 6px 10px 7px; font-size: 12px; color: var(--muted); }
.co-item.cur { color: var(--brand); font-weight: 600; }
.co-item .co-tick { float: right; color: var(--brand); }
.co-sep { height: 1px; background: var(--line); margin: 4px 0; }
.tu-trigger {
display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px;
border: none; background: transparent; border-radius: 8px; cursor: pointer;
font: inherit; font-size: 13px; color: var(--text); white-space: nowrap;
}
.tu-trigger:hover { background: #eef1f6; }
.tu-avatar {
flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.tu-name { font-size: 12px; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tu-caret { flex: none; font-size: 10px; color: var(--muted); }
.dropmenu {
position: absolute; right: 4px; top: calc(100% + 4px); min-width: 158px; z-index: 60;
background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 5px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); display: none;
}
.dropmenu.open { display: block; }
.dm-head {
padding: 7px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-item {
display: block; width: 100%; text-align: left; padding: 8px 10px;
border: none; background: transparent; border-radius: 6px; cursor: pointer;
font: inherit; font-size: 13px; color: var(--text);
}
.dm-item:hover { background: #eef1f6; }
/* 总看板的「合计」行：钉在表尾、跟上面几家的行明显分开。
只加粗+底色，不换颜色 —— 这一行是同样口径的加法结果，不是「异常」。 */
.tbl tbody tr.row-total td { border-top: 2px solid var(--line); background: #f7f9fc; font-weight: 600; }
.main-col {
flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column;
background: var(--bg);
}
/* ---------- 顶部页签条 ---------- */
.tabbar {
flex: none; height: 40px; background: #fff; border-bottom: 1px solid var(--line);
display: flex; align-items: stretch; padding: 0 8px; z-index: 30;
}
.tablist {
flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto;
overscroll-behavior-x: contain; scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
.tab {
display: inline-flex; align-items: center; gap: 5px; padding: 0 10px 0 14px;
white-space: nowrap; font-size: 13px; color: var(--muted); cursor: pointer;
border-bottom: 2px solid transparent; border-right: 1px solid #eef1f4;
user-select: none; flex: none;
}
.tab:hover { background: #f7f9fc; color: var(--text); }
.tab.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); background: #f2f7ff; }
.tab .pin { font-size: 11px; }
.tab-x {
border: none; background: none; cursor: pointer; color: #aab2bf; font-size: 14px;
line-height: 1; padding: 0 0 0 4px; margin-left: 2px; border-radius: 4px;
}
.tab-x:hover { color: var(--red); }
/* ---------- 页签容器 ---------- */
#pane-root { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.tabpane { display: none; padding: 14px 18px 60px; }
.tabpane.active { display: block; }
/* 模块页内顶部工具行 */
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.page-title h2 { margin: 0; font-size: 18px; }
.page-title .sub { color: var(--muted); font-size: 13px; }
.page-title .pt-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* ---------- 列表页：左筛选 + 右内容 ---------- */
.list-page { display: flex; align-items: flex-start; gap: 14px; }
.filters {
flex: none; width: 224px; background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
position: sticky; top: 6px; max-height: calc(100vh - 120px); overflow: auto;
}
.fi-title { font-size: 12px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.fi-title:first-child { margin-top: 2px; }
.fi-row { display: flex; gap: 6px; margin-bottom: 8px; }
.fi-row .search { flex: 1; width: auto; }
/* 左筛选里的下拉（入库记录页的 入库人 / 产品编码）。裸 select 在这条筛选栏里既没宽度
规则也没内边距：`width` 取内容宽，长编码会把 224px 的栏顶破。跟 .fi-row .search 同宽口径。 */
.fi-row select {
flex: 1; width: auto; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
padding: 5px 8px; font-size: 13px; background: #fff; color: #3a4352;
}
.fi-radio {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; text-align: left; border: none; background: none; cursor: pointer;
padding: 6px 10px; border-radius: 7px; font-size: 13px; color: #3a4352; margin-bottom: 2px;
}
.fi-radio:hover { background: #f2f5fa; }
.fi-radio.on { background: #e7f0ff; color: var(--brand-dk); font-weight: 600; }
.fi-radio .cnt { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
.content { flex: 1; min-width: 0; }
/* ---------- 数据看板：顶部 KPI 卡排 + 订单页式左筛选 + 表内滚动 ---------- */
.filters .fi-row > select {
flex: 1; min-width: 0; width: 100%;
border: 1px solid var(--line); border-radius: 20px; padding: 5px 10px;
font-size: 13px; background: #fff; color: var(--text);
}
.filters .fi-row > select:focus { outline: none; border-color: var(--brand); }
#bd-kpis { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; flex: none; }
#bd-kpis .kpi {
flex: 1 1 0; min-width: 118px; max-width: 200px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 9px 12px 8px;
}
#bd-kpis .kpi .k { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
#bd-kpis .kpi .t { color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; }
#bd-kpis .kpi.ud .k { color: var(--amber); }
#bd-kpis .kpi.od .k { color: var(--brand); }
#bd-kpis .kpi.dl .k { color: var(--green); }
#bd-tblwrap { min-height: 140px; }
#bd-tblwrap .bd-empty { padding: 44px 16px; text-align: center; color: var(--muted); }
/* 看板关键字框下面的快捷词按钮（词表来自 系统设置 → 看板快捷关键词）。
走 flex-wrap：词多/词长时自动换行，不撑破左筛选栏。 */
.filters .fi-qks { flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.filters .fi-qk {
border: 1px solid var(--line); background: #fff; color: #3a4352;
border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filters .fi-qk:hover { background: #f2f5fa; }
.filters .fi-qk.on { background: #e7f0ff; border-color: var(--brand); color: var(--brand-dk); font-weight: 600; }
/* ---------- 页签右键菜单 ---------- */
.ctxmenu {
position: fixed; z-index: 150; min-width: 150px; background: #fff;
border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 8px 30px rgba(20, 30, 60, .16); padding: 5px;
}
.ctxmenu .cm-item {
display: block; width: 100%; text-align: left; border: none; background: none;
padding: 7px 12px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--text);
}
.ctxmenu .cm-item:hover { background: #f0f4fa; }
.ctxmenu .cm-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.ctxmenu .cm-item.danger { color: var(--red); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
/* ---------- 卡片 ---------- */
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
.card h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card h3 .sub { font-weight: normal; color: var(--muted); font-size: 12px; }
/* 窄卡：整页三分之一宽。min-width 兜住窄屏，别把里面的按钮组挤扁 */
.card.card-third { width: 33.333%; min-width: 280px; }
/* 半宽卡：放 .ff-grid 里两张并排。basis 扣掉 gap，min-width 让窄屏自动落回整宽。
保留 .card 自带的 margin-bottom —— flex 容器的行高把它算进去，正好和下一张卡留出间距 */
.card.card-half { flex: 1 1 calc(50% - 8px); min-width: 280px; }
/* ---------- 统计方块 ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 14px 16px; cursor: pointer;
}
.tile:hover { border-color: var(--brand); }
.tile .n { font-size: 28px; font-weight: 700; line-height: 1.1; }
.tile .t { color: var(--muted); font-size: 13px; margin-top: 2px; }
.tile.red .n { color: var(--red); }
.tile.amber .n { color: var(--amber); }
.tile.green .n { color: var(--green); }
.tile.blue .n { color: var(--brand); }
/* ---------- 表格 ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl-grid { table-layout: fixed; } /* 产品明细表：按 colgroup 固定列宽，表头/数据逐列对齐 */
table.tbl th {
text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl td { padding: 8px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr.clickable:hover { background: #f6f9ff; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl-left .num { text-align: left; } /* 订单列表：数字列也统一左对齐 */
tr.row-red td { background: #fff4f4; }
tr.row-mute td { color: #9aa2af; }
tr.row-over td { background: #fdeaea; }
.ov-badge, .chip {
display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 12px; line-height: 1.6;
}
.ov-badge { background: var(--red); color: #fff; font-weight: 600; }
.chip-blue { background: #e7f0ff; color: var(--brand-dk); }
.chip-green { background: #e4f6e7; color: #1b7f30; }
.chip-red { background: #fdeaea; color: var(--red); }
.chip-gray { background: #eef1f6; color: var(--muted); }
.chip-amber { background: #fff3e0; color: var(--amber); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; font-family: Consolas, monospace; }
/* 单号前的订单类型标记：成=成品 定=定制 半=半成品生产单 */
.ortag { display: inline-block; min-width: 18px; padding: 0 3px; margin-right: 6px; border-radius: 4px;
text-align: center; color: #fff; font-size: 11px; line-height: 18px; font-weight: 600; vertical-align: 1px; }
.ortag.ot-f { background: var(--brand); } /* 成 普通订单 */
.ortag.ot-c { background: #9b59b6; } /* 定 定制订单 */
.ortag.ot-h { background: var(--orange); } /* 半 半成品生产单 */
/* 阶段徽标 */
.st { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.st-pending { background: #eef1f6; color: #5b6472; }
.st-semi { background: #e7f0ff; color: var(--brand-dk); }
.st-finished { background: #e4f6e7; color: #1b7f30; }
/* ---------- 面板分区 ---------- */
.panel-title { font-weight: 600; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.panel-title .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-red { background: var(--red); }
.dot-green { background: var(--green); }
.dot-blue { background: var(--brand); }
.dot-amber { background: var(--amber); }
.emptynote { color: var(--muted); text-align: center; padding: 26px 0; }
/* ---------- 动态 feed ---------- */
.feed-item {
display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eef1f6; align-items: baseline;
}
.feed-item .at { color: #a0a7b4; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-item .who { color: var(--muted); font-size: 12px; white-space: nowrap; }
.feed-item .what { flex: 1; }
.feed-item a { color: var(--text); }
.feed-item:hover a { color: var(--brand); }
/* ---------- 筛选条 ---------- */
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.fbtn { border: 1px solid var(--line); background: #fff; padding: 4px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; color: var(--text); }
.fbtn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.fbtn .cnt { opacity: .7; font-size: 12px; margin-left: 2px; }
.search {
border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; width: 200px; font-size: 13px; background: #fff;
}
/* ---------- 订单详情 ---------- */
.oid-title { font-size: 16px; font-weight: 700; }
.oid-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 22px; margin-top: 12px; }
.oid-meta .mi label { display: block; font-size: 12px; color: var(--muted); }
.oid-meta .mi .v { font-size: 15px; }
.line-note { color: var(--muted); font-size: 12px; }
.del-chip { display: inline-flex; align-items: center; gap: 5px; background: #f3f6fb; border-radius: 8px; padding: 2px 7px; margin: 2px 6px 2px 0; font-size: 12px; }
.actioncell { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* 订单详情相关表：操作列按钮与表头「操作」一起左对齐（列表主表 / 行内展开 / 单笔详情明细） */
table[data-tblk="orders"] .actioncell,
table[data-tblk="orders-exp"] .actioncell,
table[data-tblk="order-detail"] .actioncell { justify-content: flex-start; }
/* ---------- 弹窗 ---------- */
#modal-root { position: fixed; inset: 0; z-index: 100; display: none; }
#modal-root.on { display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.45); }
.modal {
background: #fff; border-radius: 14px; width: 560px; max-width: 94vw; max-height: 88vh;
display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
/* 宽版弹窗（目前只有「新增/编辑客户」）——那张意向产品表列多，560px 里会挤成一团；
工艺那格还要把勾选框排成一排（那两条作用域规则在 `.craft-cell` 那一段下面）。
max-width: 94vw 那条继续兜窄屏，所以手机上不会被撑出界。 */
.modal.modal-wide { width: 1240px; }
.modal-head { padding: 14px 18px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 16px 18px; overflow: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fs { font-size: 12px; color: var(--muted); }
/* 「新增/编辑客户」里的 省 / 市 / 区县 三个下拉排成一行。
⚠ 三个都要 `min-width:0`：`