/* ==========================================================================
   创拓达软件 ERP 前端样式（PC + H5 自适应）
   ========================================================================== */

:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff4ff;
  --ok: #0f9d58;
  --warn: #d97706;
  --danger: #dc2626;
  --ink: #1b2130;
  --ink-2: #475467;
  --ink-3: #8a94a6;
  --line: #e4e8f0;
  --line-2: #eef1f7;
  --bg: #f4f6fb;
  --panel: #ffffff;
  --radius: 10px;
  --shadow: 0 6px 20px rgba(16, 24, 40, .08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 左侧栏配色（默认经典黑；整套变量由 html[data-theme] 覆盖，切换即时生效） */
  --side-bg: #101828;
  --side-fg: #cfd6e4;
  --side-fg-strong: #ffffff;
  --side-sub: #7c8798;
  --side-dim: #6b7686;
  --side-hover: rgba(255, 255, 255, .06);
  --side-border: rgba(255, 255, 255, .07);
  --side-active: var(--brand);
  --side-active-fg: #ffffff;
}

/* ------------------------------ 侧栏配色方案 ------------------------------
   只改左侧导航的底色与文字色，业务区保持不变。
   用户在「账号 → 界面配色」里切换，选择随账号保存。 */

html[data-theme="dark"] {
  --side-bg: #101828; --side-fg: #cfd6e4; --side-fg-strong: #ffffff;
  --side-sub: #7c8798; --side-dim: #6b7686;
  --side-hover: rgba(255, 255, 255, .06); --side-border: rgba(255, 255, 255, .07);
  --side-active: var(--brand); --side-active-fg: #ffffff;
}

html[data-theme="blue"] {
  --side-bg: #12336b; --side-fg: #c7d7f5; --side-fg-strong: #ffffff;
  --side-sub: #9db3e0; --side-dim: #8aa4d4;
  --side-hover: rgba(255, 255, 255, .10); --side-border: rgba(255, 255, 255, .12);
  --side-active: #3b82f6; --side-active-fg: #ffffff;
}

html[data-theme="orange"] {
  --side-bg: #7c3a0c; --side-fg: #f7ddc2; --side-fg-strong: #ffffff;
  --side-sub: #d8ac85; --side-dim: #c09670;
  --side-hover: rgba(255, 255, 255, .10); --side-border: rgba(255, 255, 255, .12);
  --side-active: #ea8b23; --side-active-fg: #ffffff;
}

html[data-theme="light"] {
  --side-bg: #ffffff; --side-fg: #475467; --side-fg-strong: #101828;
  --side-sub: #98a2b3; --side-dim: #98a2b3;
  --side-hover: rgba(16, 24, 40, .06); --side-border: #e4e8f0;
  --side-active: var(--brand); --side-active-fg: #ffffff;
}

html[data-theme="green"] {
  --side-bg: #0f3d2e; --side-fg: #c3e3d6; --side-fg-strong: #ffffff;
  --side-sub: #8fbcaa; --side-dim: #7aa897;
  --side-hover: rgba(255, 255, 255, .10); --side-border: rgba(255, 255, 255, .12);
  --side-active: #12805c; --side-active-fg: #ffffff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

a { color: var(--brand); text-decoration: none; }

/* ------------------------------ 布局 ------------------------------ */

/* 默认必须可见：登录页（未加 .ready）若为 display:none 会导致整页白屏 */
#app { display: block; min-height: 100vh; }
#app.ready { display: grid; grid-template-columns: 216px 1fr; }

.sidebar {
  background: var(--side-bg);
  color: var(--side-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: background .18s ease, color .18s ease;
}

.brand {
  padding: 18px 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--side-border);
}

.brand .logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
  display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 15px;
}

.brand b { color: var(--side-fg-strong); font-size: 15px; letter-spacing: .3px; display: block; }
.brand small { color: var(--side-sub); font-size: 11px; }

.nav { padding: 10px 8px 24px; flex: 1; }
.nav-group { margin-top: 12px; }
.nav-group > .gt {
  font-size: 11px; color: var(--side-dim); padding: 6px 12px 4px; letter-spacing: .08em;
}
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; margin: 1px 0;
  border-radius: 8px; color: var(--side-fg); font-size: 13.5px;
}
.nav a:hover { background: var(--side-hover); color: var(--side-fg-strong); }
.nav a.on { background: var(--side-active); color: var(--side-active-fg); font-weight: 600; }
.nav a .ic { width: 16px; text-align: center; opacity: .9; }

.main { display: flex; flex-direction: column; min-width: 0; }

/* ------------------------------ 界面配色选择 ------------------------------ */

.theme-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.theme-item {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer;
  background: #fff; text-align: center; font-size: 13px; color: var(--ink-2);
}
.theme-item:hover { border-color: #c8d2e3; }
.theme-item.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); color: var(--brand); font-weight: 600; }
.theme-item .sw { height: 46px; border-radius: 6px; margin-bottom: 6px; border: 1px solid rgba(0, 0, 0, .08); }
.theme-item .sw > i { display: block; height: 12px; margin: 8px 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.theme-item .sw > i.hot { width: 62%; background: #3b82f6; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 650; }
.topbar .sp { flex: 1; }
.crumb { color: var(--ink-3); font-size: 12.5px; }

.content { padding: 16px 18px 40px; min-width: 0; }

/* ------------------------------ 通用控件 ------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13.5px; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.btn:hover { border-color: #c8d2e3; background: #fafbff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.danger { color: var(--danger); border-color: #fbc9c9; }
.btn.danger:hover { background: #fff5f5; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
/* 车间报工的三色操作按钮：发外橙 / 回厂蓝 / 检验绿（颜色即语义，车间看一眼就知道点哪个） */
.btn.warn { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn.warn:hover { background: #d97706; border-color: #d97706; }
.btn.warn:disabled { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn.info { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.info:hover { background: #1d4ed8; border-color: #1d4ed8; }
.btn.info:disabled { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.success:hover { background: #15803d; border-color: #15803d; }
.btn.success:disabled { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.block { width: 100%; }

input, select, textarea {
  height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; width: 100%; min-width: 0;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #cfe0ff; border-color: var(--brand); }
input[readonly] { background: #f7f8fb; color: var(--ink-2); }
label.f { display: block; }
label.f > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; padding: 0 12px; height: 32px; cursor: pointer; font: inherit; color: var(--ink-2); }
.seg button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* 勾选类筛选（只看待回厂 / 只看未发外 / 含草稿订单）：做成胶囊，勾上即高亮 + 立刻查询 */
label.f.optchk { min-width: auto; }
label.f.optchk .optbox {
  height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
label.f.optchk .optbox:hover { border-color: var(--brand); color: var(--ink); }
label.f.optchk .optbox input { width: auto; height: auto; margin: 0; accent-color: var(--brand); cursor: pointer; }
label.f.optchk.on .optbox {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark);
  font-weight: 600; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

/* ------------------------------ 卡片 / 表格 ------------------------------ */

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.card-hd h3 { margin: 0; font-size: 14.5px; font-weight: 650; }
.card-hd .sp { flex: 1; }
.card-bd { padding: 14px; }
.card-bd.flush { padding: 0; }

.toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.toolbar-row > * { width: auto; }
.toolbar-row .grow { flex: 1; min-width: 150px; }

.table-wrap { overflow: auto; max-width: 100%; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.grid th {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc; text-align: left; font-weight: 600; color: var(--ink-2);
  padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.grid tbody tr:hover { background: #fafcff; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .ctr { text-align: center; }
table.grid .nowrap { white-space: nowrap; }
table.grid tfoot td { background: #f8fafc; font-weight: 650; }
/* 操作列吸附右侧：宽表横向滚动时行按钮始终可见（如订单发外清单） */
table.grid th.ops { z-index: 2; }
table.grid th.ops, table.grid td.ops { position: sticky; right: 0; }
table.grid td.ops { background: var(--panel); box-shadow: -8px 0 8px -8px rgba(15, 23, 42, .18); }
table.grid tbody tr:hover td.ops { background: #fafcff; }

/* ---------- 列宽可拖动（表头右边缘）+ 列设置浮层 ---------- */
table.grid.colfix { table-layout: fixed; }
table.grid.colfix th { position: sticky; overflow: hidden; text-overflow: ellipsis; }
table.grid.colfix th .crs {
  position: absolute; top: 0; right: -3px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 3; touch-action: none;
}
table.grid.colfix th .crs::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 4px; width: 1px;
  background: transparent; transition: background .12s;
}
table.grid.colfix th:hover .crs::after { background: var(--brand); }
body.col-dragging { cursor: col-resize; user-select: none; }
body.col-dragging table.grid.colfix th:hover .crs::after { background: var(--brand); }

.colcfg-wrap { position: relative; display: inline-block; }
.colcfg {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 296px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 10px 12px;
}
.colcfg[hidden] { display: none; }
.colcfg-hd { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 8px; }
.colcfg-hd .smut { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.colcfg-bd {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
  max-height: 260px; overflow: auto; padding-bottom: 4px;
}
.colcfg-i { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.colcfg-i input { width: auto; margin: 0; accent-color: var(--brand); cursor: pointer; }
.colcfg-i i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.colcfg-ft { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }

/* ---------- 发外清单：明细直接展开在主行下方（不再弹窗） ---------- */
table.grid td.ops .btn.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
table.grid tbody tr.subrow > td { padding: 0; background: #f7f9fd; border-bottom: 1px solid var(--line); }
table.grid tbody tr.subrow:hover > td { background: #f7f9fd; }
table.grid tbody tr.subrow .subbox {
  padding: 4px 12px 12px 22px; border-left: 3px solid var(--brand);
  /* 表格很宽要横向滚动时，明细跟着左缘走，不会滑出屏幕 */
  position: sticky; left: 0;
  /* 明细面板不要撑满整张宽表：按视口限宽，三栏始终都在屏幕内 */
  width: max-content; max-width: min(1200px, calc(100vw - 330px));
}
table.grid tbody tr.subrow .subsum { font-size: 12.5px; color: var(--ink-2); padding: 6px 0 8px; }
table.grid tbody tr.subrow .subsum b { color: var(--ink); }
table.grid tbody tr.subrow .subwrap {
  display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 10px; align-items: start;
}
table.grid tbody tr.subrow .subblk { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px 8px; }
table.grid tbody tr.subrow .subhd {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2);
  padding-bottom: 6px; border-bottom: 1px dashed var(--line);
}
table.grid tbody tr.subrow .subhd b { color: var(--ink); }
table.grid tbody tr.subrow .sublines { padding-top: 2px; }
table.grid tbody tr.subrow .subline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; font-size: 12.5px;
  padding: 4px 0; border-bottom: 1px dotted var(--line-2);
}
table.grid tbody tr.subrow .subline > * { white-space: nowrap; min-width: 0; }
table.grid tbody tr.subrow .subline:last-child { border-bottom: 0; }
table.grid tbody tr.subrow .subline .sp { flex: 1; }
table.grid tbody tr.subrow .sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
table.grid tbody tr.subrow .sdot.warn { background: #f59e0b; }
table.grid tbody tr.subrow .sdot.info { background: #2563eb; }
table.grid tbody tr.subrow .sdot.success { background: #16a34a; }
table.grid tbody tr.subrow .stime { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid tbody tr.subrow .sqty { color: var(--ink); }
table.grid tbody tr.subrow .smut { color: var(--ink-3); }
table.grid tbody tr.subrow .sno { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
table.grid tbody tr.subrow .sfile { color: var(--brand); text-decoration: none; white-space: nowrap; }
table.grid tbody tr.subrow .subline .btn.sm { padding: 1px 8px; font-size: 11.5px; }
table.grid tbody tr.subrow .subload { padding: 10px 0; }

/* ---------- 列表 / 看板 切换 ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg > button { border: 0; background: transparent; padding: 4px 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; line-height: 20px; }
.seg > button + button { border-left: 1px solid var(--line); }
.seg > button.on { background: var(--brand); color: #fff; }

/* ---------- 订单发外看板（待发外 / 待回厂 / 待检验 / 已完成） ---------- */
.board-wrap { padding: 4px 0 8px; }
.board { display: grid; grid-template-columns: repeat(4, minmax(238px, 1fr)); gap: 10px; padding: 8px 12px 14px; align-items: start; }
.bcol { background: #f7f9fd; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bcol-hd {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 12.5px; font-weight: 650;
  color: var(--ink-2); background: #fff; border-bottom: 1px solid var(--line);
}
.bcol-hd b { color: var(--ink); }
.bcol-hd .sp { flex: 1; }
.bcol-sum { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.bdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bdot.warn { background: #f59e0b; } .bdot.info { background: #2563eb; }
.bdot.success { background: #16a34a; } .bdot.done { background: #98a2b3; }
.bcol-bd {
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
  max-height: calc(100vh - 330px); overflow: auto;
}
.bempty { color: var(--ink-3); font-size: 12.5px; text-align: center; padding: 18px 6px; }

.bcard {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 8px; padding: 8px 9px; font-size: 12.5px; color: var(--ink-2);
}
.bcard.warn { border-left-color: #f59e0b; }
.bcard.info { border-left-color: #2563eb; }
.bcard.success { border-left-color: #16a34a; }
.bcard.done { border-left-color: #98a2b3; background: #fcfcfd; }
.bcard .bc-hd { display: flex; align-items: center; gap: 6px; }
.bcard .bc-no { font-family: var(--mono); font-size: 12px; color: var(--ink); }
/* 订单号是链接：悬停才变色加下划线，平时不像按钮，保持卡片干净 */
.bcard a.bc-no:hover { color: var(--brand); text-decoration: underline; }
.bcard .bc-ln { color: var(--ink-3); font-size: 11.5px; }
.bcard .bc-hd .sp { flex: 1; }
.bcard .bc-due { font-size: 11.5px; color: var(--ink-3); }
/* 派工单号：卡片上的第一标识，和打出来的纸对得上（等宽字、加粗、可复制） */
.bcard .bc-dno { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.bcard .bc-dno b { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .3px; user-select: all; }
.bcard .bc-dno .none { color: #b45309; font-weight: 600; }
.bcard .bc-prod { margin-top: 4px; color: var(--ink); line-height: 1.5; }
.bcard .bc-prod .smut { color: var(--ink-3); }
.bcard .bc-proc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.bcard .bc-proc .smut { color: var(--ink-3); font-size: 11.5px; }
.bcard .bc-bar { height: 5px; background: #eef1f7; border-radius: 999px; margin: 8px 0 5px; overflow: hidden; }
.bcard .bc-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #60a5fa, #2563eb); border-radius: 999px; }
.bcard.done .bc-bar > i { background: linear-gradient(90deg, #86efac, #16a34a); }
.bcard .bc-nums { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-3); font-size: 11.5px; }
.bcard .bc-nums b { color: var(--ink); font-weight: 600; }
.bcard .bc-ft { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.bcard .bc-ft .sp { flex: 1; }
.bcard .bc-todo { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: #f2f4f7; color: var(--ink-2); }
.bcard .bc-todo.warn { background: #fff7e6; color: #b45309; }
.bcard .bc-todo.info { background: var(--brand-soft); color: var(--brand); }
.bcard .bc-todo.success { background: #e7f7ee; color: #0b7a45; }
.bcard .bc-todo.done { background: #eef1f7; color: #5b6472; }
.bcard .bc-ops { display: flex; gap: 5px; margin-top: 7px; }
.bcard .bc-ops .btn { flex: 1; justify-content: center; padding: 2px 0; font-size: 12px; }
.bcard .bc-panel { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.bcard .bc-panel .subwrap { grid-template-columns: 1fr; gap: 6px; }
.bcard .bc-panel .subsum { font-size: 11.5px; padding: 2px 0 6px; }
.bcard .bc-panel .subblk { padding: 6px 8px; }
.bcard .bc-panel .subline { font-size: 11.5px; }
.bcard .bc-panel .sfile { font-size: 11.5px; }
/* 负数红字：退货冲减行（发票里由销退单带入）、手输负数，数量与金额统一标红。
   用 !important 是因为 .items-editor 里的 input 有独立的 color，层级更高。 */
.neg, input.neg, td.neg .val { color: var(--danger) !important; }
.pos, td.pos .val { color: var(--ok) !important; }

.empty { padding: 44px 16px; text-align: center; color: var(--ink-3); }
.empty .big { font-size: 26px; margin-bottom: 6px; }

.pager { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; }
.pager .sp { flex: 1; }

/* ------------------------------ 徽标 ------------------------------ */

.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 19px; }
.tag.draft { background: #fff7e6; color: #b45309; }
.tag.confirmed { background: #e7f7ee; color: #0b7a45; }
.tag.cancelled { background: #f2f4f7; color: #6b7280; }
.tag.i { background: #e7f7ee; color: #0b7a45; }
.tag.o { background: #fdecec; color: #b91c1c; }
.tag.info { background: var(--brand-soft); color: var(--brand); }
.tag.warn { background: #fff7e6; color: #b45309; }
/* 整单暂停：还要继续做，只是暂时不动 → 蓝灰调，与「已作废」的灰区分开 */
.tag.paused { background: #e8eefb; color: #1d4ed8; }
/* 已结案：剩余数量不做了，属正常结束 → 沉静灰绿，与「已作废」（灰）区分 */
.tag.closed { background: #e3ece8; color: #3f5f52; }

/* 派工单工序链：自制 / 外发一眼分开（工序按顺序排，箭头由相邻间距暗示，不加装饰） */
.pchip { display: inline-flex; align-items: center; gap: 4px; margin: 1px 4px 1px 0; padding: 1px 8px;
  border-radius: 6px; background: #f2f4f7; color: var(--ink-2); font-size: 12px; line-height: 19px; white-space: nowrap; }
.pchip i { font-style: normal; font-size: 10.5px; padding: 0 5px; border-radius: 999px; background: #e5e9ef; color: #4b5563; }
.pchip.out { background: #fff7e6; color: #92400e; }
.pchip.out i { background: #fde9c4; color: #92400e; }

/* ------------------------------ 看板 ------------------------------ */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow); }
.kpi .k { font-size: 12.5px; color: var(--ink-3); }
.kpi .v { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kpi.up .v { color: #d92d20; }   /* 涨 / 正向：红 */
.kpi.down .v { color: #087443; } /* 跌 / 负向：绿 */
.kpi.brand .v { color: var(--brand); }

/* ------------------------------ 登录页 ------------------------------ */

#login { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 15% -10%, #dbe7ff 0%, transparent 55%),
              radial-gradient(900px 500px at 100% 100%, #e8f7f2 0%, transparent 50%), #f4f6fb; }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 30px 28px; box-shadow: 0 20px 60px rgba(16, 24, 40, .12); }
.login-card .logo { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #3b82f6, #22d3ee);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 14px; }
.login-card h2 { margin: 0 0 4px; font-size: 20px; }
.login-card p.sub { margin: 0 0 20px; color: var(--ink-3); font-size: 13px; }
.login-card .field { margin-bottom: 12px; }
.login-card .btn.primary { height: 40px; font-size: 15px; margin-top: 6px; }
.hint { margin-top: 16px; padding: 10px 12px; background: var(--brand-soft); border-radius: 8px; font-size: 12.5px; color: #1e40af; line-height: 1.7; }

/* ------------------------------ 弹层 ------------------------------ */

.mask { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(16, 24, 40, .28); }
.modal.wide { max-width: 880px; }
/* 明细列特别多的录入页（BOM 子件信息）：先给一个更宽的常规尺寸，
   再配合弹层标题栏的「⤢」按钮拉到接近整屏（.full） */
.modal.xl { max-width: 1180px; max-height: 90vh; }
.modal.full { width: 96vw; max-width: 96vw; max-height: 94vh; }
.modal.full .modal-bd { padding: 18px 22px; }
/* 宽录入页（BOM）里的控件与明细表格同步放大一档：列多了得看得清、点得准 */
.modal.xl input, .modal.xl select { height: 38px; font-size: 14px; }
.modal.xl .form-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.modal.xl table.grid { font-size: 13.5px; }
.modal.xl table.grid th { padding: 10px 12px; }
.modal.xl table.grid td { padding: 9px 12px; }
.modal-hd { padding: 15px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; }
.modal-hd h3 { margin: 0; font-size: 15.5px; }
.modal-hd .sp { flex: 1; }
.modal-bd { padding: 16px 18px; overflow: auto; }
.modal-ft { padding: 12px 18px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; justify-content: flex-end; }

/* 选单弹窗 */
.src-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.src-list { display: flex; flex-direction: column; gap: 12px; }
.src-doc { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: #fff; }
.src-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.muted { color: var(--ink-2); font-size: 12.5px; }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
label.chk input { width: auto; }

#toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
#toast .t { background: #1b2130; color: #fff; padding: 9px 16px; border-radius: 9px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); max-width: 78vw; }
#toast .t.ok { background: #0b7a45; }
#toast .t.err { background: #b91c1c; }

/* ------------------------------ 表单网格 ------------------------------ */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-grid .c2 { grid-column: span 2; }
.form-grid .c3 { grid-column: span 3; }
.form-grid .full { grid-column: 1 / -1; }

/* ------------------------------ 表头列宽拖拽（Excel 式） ------------------------------ */

/* 手柄压在表头右边界：按住左右拖改列宽，双击恢复该列默认宽度。
   th 本身是 sticky（已建立定位上下文），手柄用 absolute 贴右边界即可。 */
table.grid th .col-rz {
  position: absolute; right: 0; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; user-select: none; touch-action: none;
  border-right: 2px solid transparent;
}
table.grid th .col-rz:hover { border-right-color: var(--brand); background: var(--brand-soft); }
/* 拖动过程中整页统一显示左右箭头光标，并禁掉文字选中 */
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing * { cursor: col-resize !important; }

.items-editor { overflow: auto; }
.items-editor table { min-width: 940px; }
.items-editor input { height: 30px; padding: 0 7px; font-size: 13px; border-radius: 6px; }
.items-editor td { padding: 4px 5px; }
.items-editor .del { color: var(--danger); cursor: pointer; user-select: none; padding: 0 6px; }

/* ------------------------------ 商品开窗选择 ------------------------------ */
.picker { display: flex; flex-direction: column; gap: 10px; max-height: 72vh; }
.picker-bar { display: flex; gap: 8px; align-items: center; }
.picker-bar input, .picker-bar select { height: 34px; }
.picker-list { overflow: auto; border: 1px solid var(--line); border-radius: 8px; min-height: 120px; }
.picker-list table { min-width: 660px; }
.picker-list tr:hover { background: var(--line-2); }
.picker-list tr.on, .picker-list tr.on:hover { background: var(--brand-soft); }

/* 开窗选商品：左侧分类树 + 右侧列表（BOM 选主件 / 子件用） */
.picker-treemode { flex-direction: row; align-items: stretch; gap: 12px; }
.picker-tree {
  width: 208px; flex: none; overflow: auto; max-height: 58vh;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px 10px; background: var(--panel);
}
.picker-tree-h { font-size: 12px; color: var(--ink-3); padding: 0 8px 6px; letter-spacing: .04em; }
.picker-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.picker-right .picker-list { flex: 1; min-height: 240px; max-height: 50vh; }

/* 表单里的商品字段：输入框 + 开窗按钮（值在 hidden 上，输入框只显示编码） */
label.f .prod-f { display: flex; gap: 6px; align-items: center; }
label.f .prod-f input[type="text"] { flex: 1; min-width: 0; }
label.f .prod-f .btn { flex: none; }

/* 开窗选商品：已选清单（勾选多了看不见全貌，这里逐个列出并可剔除） */
.picker-sel:empty { display: none; }
.picker-sel {
  max-height: 92px; overflow: auto; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft, #f8fafc);
}
.picker-sel-h { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  padding: 3px 6px 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 12.5px; color: var(--ink);
}
.chip button {
  flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: var(--ink-3); font-size: 12px; line-height: 1;
}
.chip button:hover { color: var(--danger); }
/* 商品联想下拉（表格单元格里直接输编码 / 名称时浮出的候选面板）
   面板挂在 body 上、用 fixed 定位：弹层本身有 overflow，绝对定位的下拉会被裁掉。
   滚动 / 改窗口大小时由 JS 重新贴回输入框下方（见 attachProductSuggest）。 */
.psug {
  position: fixed; z-index: 150; min-width: 320px; max-height: 300px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 4px;
}
.psug[hidden] { display: none; }
.psug-i {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1.5;
}
.psug-i:hover { background: var(--line-2); }
.psug-i.on, .psug-i.on:hover { background: var(--brand-soft); }
.psug-i.off { opacity: .58; cursor: not-allowed; }
.psug-i.off:hover { background: none; }
.psug-c { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.psug-n { color: var(--ink); }
.psug-s { color: var(--ink-3); font-size: 12px; }
.psug-e { padding: 10px; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

/* ------------------------------ 页签（多标签） ------------------------------ */
.content.stage { padding: 0; flex: 1; min-height: 0; overflow: auto; }
.tabs { display: flex; gap: 4px; padding: 8px 14px 0; flex-wrap: wrap; background: var(--bg); border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: #fff; color: var(--ink-2); cursor: pointer; font-size: 13px; max-width: 220px; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--panel); font-weight: 600; color: var(--brand); border-color: var(--line); box-shadow: inset 0 3px 0 var(--brand); }
.tab .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .x { color: var(--ink-3); border-radius: 4px; padding: 0 4px; font-size: 12px; line-height: 16px; }
.tab .x:hover { background: var(--danger); color: #fff; }
.tab-panel { padding: 16px 18px 40px; }
.tab-panel[hidden] { display: none; }

/* 页签批量操作：按钮靠右排在页签末尾，菜单是固定定位的浮层 */
.tab-acts { order: 99; margin-left: auto; display: flex; align-items: center; }
.tab-acts .btn { font-size: 12px; }
.tab-menu {
  position: fixed; z-index: 300; min-width: 210px; padding: 5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .16);
}
.tab-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: none; border-radius: 7px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.tab-menu button:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.tab-menu button:disabled { opacity: .42; cursor: default; }
.tab-menu button small { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.tab-menu .sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* ------------------------------ 菜单自定义（旧：菜单排序）------------------------------ */
.menu-ord { margin-bottom: 16px; }
.menu-ord .mo-h { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.mo-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 6px; }
.mo-idx { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.mo-name { font-size: 14px; }

/* ------------------------------ 权限模板（按系统别） ------------------------------ */
.perm-sys { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.perm-sys-hd {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px; background: var(--brand-soft, #f4f6fb); border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.perm-sys-hd b { font-size: 13.5px; color: var(--ink); }
.perm-sys-hd .sys-ck { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.perm-sys-hd .sys-ck input { width: auto; margin: 0; }
.perm-sys .table-wrap { border-radius: 0; }
.perm-sys table.grid thead th { background: #fff; }

/* 单据权限摘要（用户管理弹窗内展示角色权限） */
.role-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.role-sum .rs {
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: var(--ink-2);
  background: #fff; white-space: nowrap;
}
.role-sum .rs b { color: var(--ink); font-weight: 600; }

/* ------------------------------ 打印样式模板编辑 ------------------------------ */
.pt-sec { border: 1px solid var(--line); border-radius: 10px; margin-top: 14px; overflow: hidden; }
.pt-sec-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--brand-soft, #f4f6fb); border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.pt-sec-h small { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.pt-cols { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pt-col { display: flex; align-items: center; gap: 8px; }
.pt-col .ck { width: auto; display: inline-flex; align-items: center; }
.pt-col .ck input { width: auto; margin: 0; }
.pt-col .pt-t { width: 150px; }
.pt-col .pt-w { width: 76px; }
.pt-col .pt-a { width: 62px; }
.pt-sec .form-grid, .pt-sec > .f { padding: 10px 12px; }
.pt-sec > .f { display: block; margin: 0 0 8px; }
.pt-sec > .f > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
/* 打印样式：字段名后面挂一句小字说明（抬头名称 / 单据名称这类容易混淆的项） */
.pt-em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.pt-flags { padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.pt-flags .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pt-flags .ck input { width: auto; margin: 0; }

/* 表头字段 / 备注条款行：勾选 + 标签 + 自定义内容 + 排序 + 删除 */
.pt-rows { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pt-row { display: flex; align-items: center; gap: 8px; }
.pt-row > .tag-mini { min-width: 96px; text-align: right; font-size: 12.5px; color: var(--ink-3); }
.pt-row .pt-v { flex: 1; min-width: 120px; }
.pt-row .pt-lbl { width: 130px; }
.pt-row .del-x { border: 0; background: transparent; color: var(--danger, #c0392b); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; }
.pt-add { display: flex; gap: 8px; padding: 0 12px 10px; }
.pt-tag-custom { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--brand-soft, #f4f6fb); color: var(--ink-3); }

/* ------------------------------ 移动端 ------------------------------ */

.drawer-mask { display: none; }
.mob-only { display: none; }

@media (max-width: 860px) {
  #app.ready { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.open { transform: none; }
  .drawer-mask { display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .drawer-mask.open { opacity: 1; pointer-events: auto; }
  .desk-only { display: none !important; }
  .mob-only { display: inline-flex; }
  .content { padding: 12px 12px 40px; }
  .topbar { padding: 9px 12px; }
  .topbar h1 { font-size: 15px; }
  .form-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .form-grid .c2, .form-grid .c3 { grid-column: 1 / -1; }
  .modal { max-height: 92vh; }
  .kpi .v { font-size: 19px; }
  /* 列表在窄屏改为卡片式 */
  table.grid.responsive thead { display: none; }
  /* 卡片模式下固定列宽没有意义：交回浏览器自动排 */
  table.grid.responsive.colfix { table-layout: auto; width: auto !important; min-width: 0 !important; }
  table.grid.responsive.colfix col { width: auto !important; }
  table.grid.responsive tbody tr { display: block; border: 1px solid var(--line); border-radius: 10px; margin: 8px; padding: 6px 8px; background: #fff; }
  table.grid.responsive tbody td { display: flex; justify-content: space-between; gap: 10px; border: 0; padding: 3px 0; }
  table.grid.responsive tbody td::before { content: attr(data-th); color: var(--ink-3); font-size: 12.5px; flex: none; }
  table.grid.responsive tbody td .val { text-align: right; }
  /* 明细子行在卡片模式下也要紧贴主卡片下方，三栏收成一栏 */
  table.grid.responsive tbody tr.subrow { border: 0; margin: -6px 8px 8px; padding: 0; background: #f7f9fd; }
  table.grid.responsive tbody tr.subrow > td { display: block; padding: 0; }
  table.grid.responsive tbody tr.subrow > td::before { content: none; }
  table.grid tbody tr.subrow .subwrap { grid-template-columns: 1fr; }
  table.grid tbody tr.subrow .subbox { padding: 8px 10px 10px 12px; position: static; }
  /* 看板在窄屏按单列竖排（发外 → 回厂 → 检验 → 已完成） */
  .board { grid-template-columns: 1fr; padding: 8px; }
  .bcol-bd { max-height: none; }
}

/* ---------- 三级授权（模块 → 程序 → 金额字段） ---------- */
.perm-modbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  border-bottom: 1px dashed var(--line); margin-bottom: 12px; padding-bottom: 10px;
}
.perm-modbar b { font-size: 13px; color: var(--ink); }
.perm-modbar .sys-ck { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.perm-modbar .sys-ck input { width: auto; margin: 0; }
.af-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px 16px; }
.af-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.af-row select { min-width: 110px; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* ---------- 商品图片（拖入 / 开窗选择 / 截图粘贴） ---------- */
.img-pick {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 92px; padding: 10px 12px; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 8px; background: var(--bg-soft, transparent);
  transition: border-color .15s, background .15s;
}
.img-pick:hover, .img-pick.drag { border-color: var(--pri, #3b82f6); background: rgba(59, 130, 246, .06); }
.img-pick .img-prev { max-height: 84px; max-width: 140px; border-radius: 6px; object-fit: contain; }
.img-pick .img-tip { font-size: 12.5px; color: var(--ink-3, #9ca3af); }
.pimg { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }

/* 列表里可点开详情的字段（商品编码等）：看起来像链接，但不跳页面 */
.lk { color: var(--brand); cursor: pointer; text-decoration: none; border-bottom: 1px dashed transparent; }
.lk:hover { border-bottom-color: currentColor; }

/* ------------------------------ 商品详情 ------------------------------ */
.pd-head {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft, #f8fafc);
}
.pd-img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.pd-img-ph {
  width: 76px; height: 76px; flex: none; border-radius: 8px; border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--ink-3); font-size: 22px; background: #fff;
}
.pd-code { font-size: 12.5px; color: var(--ink-3); font-family: ui-monospace, Consolas, monospace; }
.pd-name { font-size: 16px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.pd-cols .pt-sec { margin-top: 0; }
.pd-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.pd-kv > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pd-kv span { flex: none; color: var(--ink-3); font-size: 12.5px; }
.pd-kv b { font-weight: 500; color: var(--ink); word-break: break-all; }
@media (max-width: 900px) {
  .pd-cols { grid-template-columns: 1fr; }
  .pd-kv { grid-template-columns: 1fr; }
}

/* ---------- 客户授权：左选成员 / 右勾客户 ---------- */
.grant-panes { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.2fr); }
.grant-pane { min-width: 0; border-right: 1px solid var(--line); }
.grant-pane:last-child { border-right: 0; }
.grant-pane-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); background: #f8fafc;
}
.grant-pane-hd .sp { flex: 1; }
.grant-pane-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line-2);
}
.grant-pane-bar input { max-width: 240px; }
.grant-pane .table-wrap { max-height: 420px; overflow: auto; }
.grant-pane tr[data-mrow] { cursor: pointer; }
.grant-pane tr[data-mrow].on, .grant-pane tr[data-mrow].on:hover { background: var(--brand-soft); }
.grant-pane .ck { display: inline-flex; align-items: center; }
.grant-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.grant-foot .sp { flex: 1; }
@media (max-width: 900px) {
  .grant-panes { grid-template-columns: 1fr; }
  .grant-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .grant-pane:last-child { border-bottom: 0; }
}

/* ------------------------------ 基础资料 Excel 导入 ------------------------------ */

/* 表单标签里的必填星号（导入弹窗的「客户」用） */
.f > span .req { color: var(--danger); font-weight: 400; }

.imp-tabs { display: flex; align-items: center; gap: 8px; }
.imp-tabs .sp { flex: 1; }
.imp-tabs .btn.sm.primary { background: var(--brand); border-color: var(--brand); color: #fff; }

.imp-drop {
  display: block; border: 1.5px dashed var(--line); border-radius: var(--radius);
  background: #fbfcfe; padding: 30px 16px; text-align: center; cursor: pointer;
  color: var(--ink-2); font-size: 13px; line-height: 1.7; transition: .15s;
}
.imp-drop:hover, .imp-drop.hot { border-color: var(--brand); background: var(--brand-soft); }

.imp-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 12px; background: #f8fafc; border: 1px solid var(--line-2);
  border-radius: 8px; font-size: 13px; color: var(--ink-2);
}
.imp-bar .sp { flex: 1; }
.imp-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.imp-inline select { height: 28px; padding: 0 6px; font-size: 12.5px; }

.imp-cols { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.25fr); gap: 14px; margin-top: 12px; }
.imp-sec-h {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px;
  color: var(--ink); margin-bottom: 6px;
}
.imp-sec-h small { font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
.imp-sec-h .sp { flex: 1; }
.imp-map-tb, .imp-prev-tb { font-size: 12.5px; }
.imp-map-tb th, .imp-prev-tb th { white-space: nowrap; }
.imp-map-tb select { width: 100%; min-width: 140px; height: 30px; font-size: 12.5px; }
.imp-map .table-wrap { max-height: 340px; }
.imp-preview .table-wrap { max-height: 340px; }
.imp-prev-tb td { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.imp-sum { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-sum-i {
  flex: 1; min-width: 92px; padding: 12px 14px; border-radius: 10px;
  background: #f8fafc; border: 1px solid var(--line-2); text-align: center;
}
.imp-sum-i b { display: block; font-size: 22px; line-height: 1.2; color: var(--ink); }
.imp-sum-i span { font-size: 12px; color: var(--ink-3); }
.imp-sum-i.ok { background: #e7f7ee; border-color: #c6ebd7; }
.imp-sum-i.ok b { color: #0b7a45; }
.imp-sum-i.info { background: var(--brand-soft); border-color: #cfdcff; }
.imp-sum-i.info b { color: var(--brand); }
.imp-sum-i.bad { background: #fdecec; border-color: #fbc9c9; }
.imp-sum-i.bad b { color: var(--danger); }
.imp-ok-all {
  margin-top: 14px; padding: 16px; border-radius: 10px;
  background: #e7f7ee; color: #0b7a45; font-size: 13px; text-align: center;
}

@media (max-width: 900px) {
  .imp-cols { grid-template-columns: 1fr; }
}

/* ---------- 编码规则设置：资料 / 编码方式 / 流水号长度 / 前缀符 全横向一行 ---------- */
/* 单据编号：单据 / 编号方式 / 前缀符 / 日期格式 / 流水号长度 / 流水号重置 */
.cr-grid.doc {
  grid-template-columns: 120px 110px minmax(80px, .8fr) minmax(150px, 1.2fr) 92px minmax(120px, .9fr);
  gap: 8px 10px;
}
.cr-grid.doc .cr-seq input { width: 100%; }
.cr-grid {
  display: grid;
  grid-template-columns: 120px minmax(200px, 1fr) 116px minmax(170px, 1.1fr);
  gap: 10px 12px; align-items: center;
}
.cr-grid.cr-head {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  padding-bottom: 2px; border-bottom: 1px dashed var(--line);
}
.cr-grid .cr-name { font-size: 13px; color: var(--ink); }
.cr-grid .cr-lab { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cr-grid .cr-seq { display: flex; align-items: center; gap: 6px; }
.cr-grid .cr-seq input { width: 68px; flex: none; }
.cr-grid .cr-pre { display: flex; align-items: center; gap: 6px; }
.cr-grid .cr-pre input { flex: 1; min-width: 0; }
.cr-grid input[disabled], .cr-grid select[disabled] { background: #f7f8fb; color: var(--ink-2); }

@media (max-width: 860px) {
  .cr-grid, .cr-grid.doc { grid-template-columns: 1fr 1fr; }
  .cr-grid.cr-head { display: none; }
  .cr-grid .cr-name { grid-column: 1 / -1; font-weight: 600; }
}
@media (max-width: 1180px) and (min-width: 861px) {
  /* 中等宽度时单据行折成两排，避免输入框被压得过窄 */
  .cr-grid.doc { grid-template-columns: 120px 110px minmax(80px, .8fr) minmax(150px, 1.2fr); }
  .cr-grid.doc .cr-seq, .cr-grid.doc [data-reset] { grid-column: span 1; }
}

/* ==========================================================================
   智能问数（AI 对话式查询）
   页面结构：会话区（可滚动）+ 快捷问法 + 输入区。
   表格沿用业务表格的 .grid 样式，只额外控制宽度与标题排版。
   ========================================================================== */
.ai-card .card-bd { padding-top: 10px; }
.ai-wrap { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 250px); min-height: 460px; }
.ai-log {
  flex: 1; overflow: auto; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.ai-msg { display: flex; gap: 10px; margin: 0 0 14px; align-items: flex-start; }
.ai-msg.me { flex-direction: row-reverse; }
.ai-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 600;
}
.ai-avatar.ai { background: var(--brand); color: #fff; }
.ai-bubble {
  max-width: min(900px, 88%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow);
}
.ai-msg.me .ai-bubble { background: var(--brand-soft); border-color: #dbe4ff; box-shadow: none; }
.ai-bubble.denied { border-color: #fecaca; background: #fff7f7; }
.ai-text { font-size: 13.5px; line-height: 1.8; color: var(--ink); white-space: normal; }
.ai-typing { font-size: 13px; color: var(--ink-3); }
.ai-typing i { font-style: normal; animation: ai-dot 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .2s; }
.ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ai-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.ai-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.ai-kpi {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  background: #fafbff; min-width: 96px;
}
.ai-kpi .k { font-size: 11.5px; color: var(--ink-3); }
.ai-kpi .v { font-size: 14.5px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-kpi.brand .v { color: var(--brand); }
.ai-kpi.up .v { color: var(--ok); }
.ai-kpi.down .v { color: var(--danger); }

.ai-tbl-wrap { margin-top: 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }
.ai-tbl-wrap table.grid { font-size: 12.5px; }
.ai-tbl-title { padding: 8px 12px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ai-tbl-foot { padding: 6px 12px 8px; font-size: 12px; color: var(--ink-3); }

.ai-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; transition: .15s;
}
.ai-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ai-chip.static { cursor: default; background: #f4f6fb; color: var(--ink-3); }
.ai-chip.static:hover { border-color: var(--line); color: var(--ink-3); background: #f4f6fb; }

.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-in { display: flex; gap: 8px; align-items: stretch; }
.ai-in textarea {
  flex: 1; min-height: 44px; max-height: 140px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--panel);
}
.ai-in textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.ai-in .btn { flex: none; min-width: 84px; }

@media (max-width: 860px) {
  .ai-wrap { height: calc(100vh - 210px); }
  .ai-bubble { max-width: 100%; }
}

/* 预收 / 预付单表头「订单号」：输入单号回车查询 + 开窗按钮 */
.ord-pick { display: flex; gap: 6px; align-items: center; }
.ord-pick input { flex: 1; min-width: 0; }
.ord-pick .btn { flex: none; padding: 7px 12px; }

/* ==========================================================================
   菜单自定义页（系统设置 → 菜单自定义）
   左：分组名 + 顺序；右：组内条目显示名 / 顺序 / 归属分组
   ========================================================================== */
.mn-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.mn-h { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.mn-grp { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); margin-bottom: 6px; }
.mn-grp.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.mn-grp .mn-ti { flex: 1; min-width: 0; }
.mn-cnt { font-size: 12px; color: var(--ink-3); min-width: 26px; text-align: right; }
.mn-main .mn-nm { width: 100%; }
.mn-main td.act { white-space: nowrap; }
.mn-main td:nth-child(3), .mn-main th:nth-child(3) { color: var(--ink-3); }
@media (max-width: 900px) {
  .mn-wrap { grid-template-columns: 1fr; }
}
.mn-grp .btn.sm, .mn-main td.act .btn.sm { padding: 0 8px; min-width: 30px; }


/* ==========================================================================
   侧栏折叠菜单：一级只显示主系统（销售 / 采购 / 库存 / 生产 / 财务 / 报表中心 /
   基础资料 / 系统设置），点系统名才展开其下的单据与报表
   ========================================================================== */
.nav-group.nv-fold { margin-top: 2px; }
.nav-group .nv-t {
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  padding: 8px 12px; margin: 1px 0; border-radius: 8px;
  color: var(--side-fg); font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
}
.nav-group .nv-t:hover { background: var(--side-hover); color: var(--side-fg-strong); }
.nav-group .nv-t.on { color: var(--side-fg-strong); }
.nav-group .nv-t .cv {
  width: 12px; text-align: center; font-size: 10px; color: var(--side-dim);
  transition: transform .15s ease;
}
.nav-group .nv-t.on .cv { transform: rotate(90deg); color: inherit; }
.nav-group .nv-t .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group .nv-t .ct { font-size: 11px; font-weight: 400; color: var(--side-dim); }
.nav-group .nv-sub { padding-left: 12px; }
.nav-group .nv-sub.hide { display: none; }
/* 分组内的二级小节标题（如 生产管理 → 厂内生产）：比条目浅一档，起分节作用 */
.nav-sec {
  margin: 10px 12px 2px; padding-left: 14px;
  font-size: 11px; color: var(--side-dim); letter-spacing: .08em;
}
.nav-sec:not(:first-child) { border-top: 1px dashed var(--side-hover); padding-top: 10px; margin-top: 10px; }
/* 商品资料「左分类树 + 右列表」布局（masterList 的 sideTree 通用能力） */
.mt-layout { display: flex; gap: 12px; align-items: flex-start; }
.mt-side { width: 230px; flex: none; padding: 10px 8px 12px; overflow: auto;
  max-height: calc(100vh - 150px); position: sticky; top: 12px; }
.mt-main { flex: 1; min-width: 0; }
.mt-side-h { font-weight: 650; font-size: 13px; padding: 2px 8px 8px; }
.mtree-n { display: flex; align-items: center; gap: 3px; padding: 5px 8px;
  border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.45; }
.mtree-n:hover { background: var(--line-2); }
.mtree-n.on { background: var(--brand-soft); font-weight: 600; }
.mtree-tw { width: 15px; flex: none; text-align: center; color: var(--ink-3);
  font-size: 10px; cursor: pointer; user-select: none; }
.mtree-tw:hover { color: var(--ink); }
.mtree-tw.leaf { visibility: hidden; }
.mtree-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtree-c { flex: none; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mtree-kids { padding-left: 13px; }
.mtree-tip { padding: 8px 8px 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }



/* ==========================================================================
   生产工单：主件 5 项（品号 / 品名 / 规格 / 单位 / 生产数量）独占一整行
   ========================================================================== */
.f.wo-main { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px 12px; }
.f.wo-main > .wm-t { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 8px; }
.f.wo-main .wm-g { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1180px) {
  .f.wo-main .wm-g { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ------------------------------ 品号编码方案 / 自动取号提示 ------------------------------ */

/* 字段下方的小字说明（编码留空会怎么取号、继承自哪一级） */
label.f > .f-note { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
label.f > .f-note.code-prev { font-variant-numeric: tabular-nums; color: var(--brand); }
label.f > .f-note.code-prev.muted { color: var(--ink-3); }

/* ------------------------------ BOM 批量变更预览 ------------------------------ */

/* 跳过行（新子件已存在不合并 / 无 BOM 未勾自动建）整行灰掉，一眼看出这次不会动它 */
.grid tbody tr.muted-row > td { background: #fafafa; }
.grid tbody tr.muted-row > td .val { color: var(--ink-3); }

/* ==========================================================================
   车间报工 → 扫码投料单
   --------------------------------------------------------------------------
   页面与发外清单「投料」弹窗共用同一套结构（scanFeedCore）：
   上面是订单 / 工序 / 二维码，中间是扫码框 + 结论条，下面左右两栏（BOM 子件 / 本次待提交）。
   ========================================================================== */

.btn.purple { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.btn.purple:hover { background: #6d28d9; border-color: #6d28d9; }
.btn.purple:disabled { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tag.success { background: #e7f7ee; color: #0b7a45; }

.sf { display: flex; flex-direction: column; gap: 12px; }

.sf-task { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #f8fbff; }
.sf-task-main { flex: 1; min-width: 0; }
.sf-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 13px; }
.sf-docno { font-size: 15px; letter-spacing: .02em; }
.sf-mut { color: var(--ink-3); font-size: 12.5px; }
.sf-prod { font-size: 15px; font-weight: 600; margin: 6px 0 4px; }

.sf-step { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sf-step .f.grow { flex: 1; min-width: 320px; }

.sf-scan { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sf-scan .f.grow { flex: 1; min-width: 300px; }
.sf-scan input[data-bc] { height: 40px; font-size: 16px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; }

/* 结论条：拦下来的（红）/ 提示（黄）/ 通过（绿），车间一眼看颜色就知道能不能投 */
.sf-msg { border-radius: 9px; padding: 9px 12px; font-size: 13px; line-height: 1.6;
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.sf-msg > b { flex: none; width: 18px; text-align: center; }
.sf-msg.ok { background: #e9f8ef; color: #0b7a45; border: 1px solid #bfe8cf; }
.sf-msg.warn { background: #fff8e8; color: #8a5a00; border: 1px solid #f6dfae; }
.sf-msg.bad { background: #fdeeee; color: #b91c1c; border: 1px solid #f5c2c2; }
.sf-msg .sf-hint { flex-basis: 100%; font-size: 12.5px; color: #8a5a00; }

.sf-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1180px) { .sf-cols { grid-template-columns: 1fr; } }
.sf-col { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.sf-hd { padding: 8px 12px; font-size: 13px; font-weight: 600; background: #f8fafc;
  border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sf-bom, .sf-pending { max-height: 360px; overflow: auto; }
.sf-table { width: 100%; border-collapse: collapse; }
.sf-table th { position: sticky; top: 0; z-index: 1; }
.sf-table tbody tr.done > td .val { color: var(--ink-3); }
.sf-table tbody tr.done { background: #fafdfb; }
.sf-table tbody tr.over { background: #fff6f6; }
.sf-table tbody tr.over-tip > td { border-top: 0; padding-top: 0; }

/* 进度条：已投 / 需求 */
.sf-bar { display: block; width: 84px; height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.sf-bar > i { display: block; height: 100%; background: #7c3aed; border-radius: 999px; }
tr.done .sf-bar > i { background: #16a34a; }

.sf-empty { padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.sf-empty .smut { margin-top: 4px; font-size: 12px; }

.sf-foot { display: flex; gap: 8px; align-items: center; }
.sf-foot .sp { flex: 1; }
.sf-tip { font-size: 12px; color: var(--ink-3); line-height: 1.7;
  background: #f9fafb; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; }

.sf-idle { padding: 30px 16px; text-align: center; color: var(--ink-3); }
.sf-idle-t { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.sf-nobom { padding: 22px 18px; border: 1px dashed #f0c36d; background: #fffaf0; border-radius: 10px;
  color: #8a5a00; line-height: 1.8; }

/* 二维码：页面里是小图（点开放大），打印页是矢量 */
.qrbox { display: inline-block; line-height: 0; }
.qrbox svg { display: block; width: 100%; height: 100%; }
.qrbtn { border: 0; background: #fff; padding: 2px; border-radius: 5px; cursor: zoom-in; line-height: 0; }
.qrbtn:hover { background: #eef4ff; box-shadow: 0 0 0 2px var(--brand-soft) inset; }
.qr-miss { display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-size: 11px; line-height: 1.35; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 6px; }

.qr-dlg { display: flex; gap: 22px; align-items: flex-start; }
.qr-dlg-pic { flex: none; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qr-dlg-info { flex: 1; min-width: 0; line-height: 1.9; font-size: 13px; }
.qr-dlg-prod { font-size: 15px; font-weight: 600; }
.qr-dlg code { background: #f3f4f6; padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
@media (max-width: 720px) { .qr-dlg { flex-direction: column; align-items: center; } }

/* ==========================================================================
   车间报工 → 半成品入库单（复用 .sf-* 的骨架，只补自己的几块）
   ========================================================================== */
.btn.teal { background: #0d9488; border-color: #0d9488; color: #fff; }
.btn.teal:hover { background: #0f766e; border-color: #0f766e; }
.btn.teal:disabled { background: #0d9488; border-color: #0d9488; color: #fff; }

.si-prog { padding: 12px 14px; }
.si-nums { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.si-nums > div { display: flex; flex-direction: column; gap: 2px; }
.si-nums b { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.si-nums .hl b { color: #0d9488; }
.si-bar { width: 100%; height: 10px; }
.si-bar > i { background: #0d9488; }
.si-pct { margin-top: 6px; }

.si-form { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.si-form .f.grow { flex: 1; min-width: 150px; }
.si-recent { margin-top: 12px; }
.si-recent .sf-pending { max-height: 260px; }

.si-cand .toolbar-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sf-chk { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 13px;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; }

/* hidden 属性会被 .sf-msg 的 display:flex 覆盖（曾表现为一条空白红带），显式压回去 */
.sf-msg[hidden] { display: none !important; }

/* ------------------------------ 扫码投料 / 半成品入库页面（半宽布局） ------------------------------ */

/* 页面版收窄为内容区一半（车间工位半屏使用；max() 兜底，避免半宽后窄到没法看）。
   弹窗（发外清单里的投料 / 入库弹窗）共用 core 但不套 .sf-page，不受影响。
   ≤960px 视口恢复全宽；容器窄于 700px 时双栏改上下堆叠并压缩表格。 */
.sf-page { container-type: inline-size; }
@media (min-width: 961px) { .sf-page { max-width: max(50%, 560px); } }
@container (max-width: 780px) {
  .sf-cols { grid-template-columns: 1fr; }
  .sf-bom, .sf-pending { max-height: 280px; }
  .sf-table { font-size: 12.5px; }
  .sf-bar { width: 56px; }
  .sf-prod { font-size: 14px; }
  .sf-step .f.grow, .sf-scan .f.grow { min-width: 220px; }
}

/* ------------------------------ 商品多选字段（主件品号） ------------------------------ */

/* 一个输入框 + 一排已选 chip：chip 多了会自动换行，不许把工具栏撑破 */
label.f.mprod { min-width: 360px; }
.prod-multi { display: flex; flex-direction: column; gap: 6px; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 22px; }
.pm-ph { font-size: 12.5px; color: var(--ink-3); }
.pm-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 240px;
  padding: 2px 6px 2px 8px; border: 1px solid var(--brand-soft, #c7dbff); border-radius: 999px;
  background: var(--brand-wash, #eef4ff); font-size: 12.5px; line-height: 1.7;
}
.pm-chip > b { font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.pm-chip > .pm-n { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-chip > i { cursor: pointer; font-style: normal; color: var(--ink-3); padding: 0 2px; border-radius: 50%; }
.pm-chip > i:hover { color: #b91c1c; background: #fdeeee; }
.pm-add { display: flex; gap: 6px; align-items: center; }
.pm-add > input { flex: 1; min-width: 0; height: 34px; }
.pm-add > .btn { flex: none; }

/* ------------------------------ 车间大屏（shop-board） ------------------------------ */
/* 深色整屏看板：固定深色配色（挂车间电视，不跟随系统主题），大字号远距离可读 */
.board {
  --bw: #0b1526;          /* 面板底 */
  --bl: #16263f;          /* 描边 */
  --bt: #dce9ff;          /* 主文字 */
  --bs: #7f96b8;          /* 次文字 */
  --bok: #34d399;         /* 完工/合格 */
  --bwarn: #fbbf24;       /* 在途 */
  --bbad: #f87171;        /* 不良/逾期 */
  --bacc: #4f8ef7;        /* 主色条 */
  min-height: calc(100vh - 72px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 14px;
  background: radial-gradient(1200px 500px at 20% -10%, #122544 0%, var(--bw) 55%) !important;
  color: var(--bt) !important;
  border: 1px solid var(--bl);
}
/* 全屏两种形态：原生 :fullscreen（requestFullscreen 成功）与 .pseudo-full（内核不支持 /
   被策略拒绝时的兜底，铺满视口效果一样）。全屏态整体放大字号，远距离看更清楚。 */
.board:fullscreen, .board.pseudo-full { border-radius: 0; padding: 22px 28px; min-height: 100vh; }
.board.pseudo-full { position: fixed; inset: 0; z-index: 1000; min-height: 100vh; margin: 0; overflow: auto; }
html.board-lock { overflow: hidden; }
/* 全屏放大档：标题 / KPI 数值 / 面板行字号按大屏观感放大一档 */
.board:fullscreen .board-tt, .board.pseudo-full .board-tt { font-size: 36px; }
.board:fullscreen .board-date, .board.pseudo-full .board-date { font-size: 22px; }
.board:fullscreen .board-cd, .board.pseudo-full .board-cd { font-size: 16px; }
.board:fullscreen .b-kpi .bv, .board.pseudo-full .b-kpi .bv { font-size: 54px; }
.board:fullscreen .b-kpi .bv i, .board.pseudo-full .b-kpi .bv i { font-size: 18px; }
.board:fullscreen .b-kpi .bk, .board.pseudo-full .b-kpi .bk { font-size: 18px; }
.board:fullscreen .b-ph, .board.pseudo-full .b-ph { font-size: 19px; }
.board:fullscreen .b-ph .b-sub, .board.pseudo-full .b-ph .b-sub { font-size: 14px; }
.board:fullscreen .bp-nm, .board.pseudo-full .bp-nm { font-size: 18px; }
.board:fullscreen .bp-nm i, .board.pseudo-full .bp-nm i { font-size: 13px; }
.board:fullscreen .bbar, .board.pseudo-full .bbar { height: 20px; border-radius: 10px; }
.board:fullscreen .bbar > i, .board.pseudo-full .bbar > i { border-radius: 10px; }
.board:fullscreen .bbar > em, .board.pseudo-full .bbar > em { font-size: 14px; line-height: 20px; }
.board:fullscreen .b-item, .board.pseudo-full .b-item { font-size: 16.5px; padding: 10px 2px; }
.board:fullscreen .b-item .btag, .board.pseudo-full .b-item .btag { font-size: 14px; }
.board:fullscreen .b-empty, .board.pseudo-full .b-empty { font-size: 16px; }
.board-hd { display: flex; align-items: baseline; gap: 14px; }
.board-tt { font-size: 24px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.board-date { font-size: 16px; color: var(--bs); font-variant-numeric: tabular-nums; }
.board-cd { font-size: 13px; color: var(--bs); border: 1px solid var(--bl); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.board-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.board-loading { padding: 60px 0; text-align: center; color: var(--bs); font-size: 16px; line-height: 2; }

.b-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.b-kpi {
  background: var(--bl); border: 1px solid #1f3355; border-radius: 12px;
  padding: 12px 16px 10px; text-align: center; min-width: 0;
}
.b-kpi .bv { font-size: 34px; font-weight: 800; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.b-kpi .bv i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--bs); margin-left: 4px; }
.b-kpi .bk { font-size: 13.5px; color: var(--bs); margin-top: 2px; letter-spacing: 1px; }
.b-kpi.ok .bv { color: var(--bok); }
.b-kpi.warn .bv { color: var(--bwarn); }
.b-kpi.bad .bv { color: var(--bbad); }

.b-grid { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 10px; min-height: 0; }
.b-panel { background: var(--bl); border: 1px solid #1f3355; border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.b-ph { padding: 10px 14px 8px; font-size: 15px; font-weight: 700; color: #cfe0ff; border-bottom: 1px solid #1f3355; display: flex; align-items: baseline; gap: 8px; }
.b-ph .b-sub { font-style: normal; font-weight: 400; font-size: 12px; color: var(--bs); margin-left: auto; }
.b-pb { flex: 1; overflow: auto; padding: 8px 12px 12px; }

.brow { padding: 6px 0 2px; }
.bp-nm { font-size: 14px; color: var(--bt); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-nm i { font-style: normal; font-size: 11px; color: var(--bs); border: 1px solid #2a4370; border-radius: 999px; padding: 0 6px; flex: none; }
.b-rank { width: 18px; height: 18px; border-radius: 50%; font-size: 11px !important; display: inline-flex; align-items: center; justify-content: center; color: #0b1526 !important; border: none !important; flex: none; }
.b-rank.r1 { background: #fbbf24; } .b-rank.r2 { background: #cbd5e1; } .b-rank.r3 { background: #d97706; }
.b-rank.r4, .b-rank.r5 { background: #334768; color: #9db3d6 !important; }
.bp-bars { padding: 4px 0 2px 2px; }
.bbar { position: relative; height: 14px; background: #0d1b31; border-radius: 7px; overflow: hidden; }
.bbar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2f6fe0, var(--bacc)); border-radius: 7px; transition: width .5s ease; }
.bbar.done > i { background: linear-gradient(90deg, #0ea371, var(--bok)); }
.bbar.bad > i { background: linear-gradient(90deg, #b34848, var(--bbad)); }
.bbar > em { position: absolute; inset: 0; font-style: normal; font-size: 11px; line-height: 14px; padding: 0 8px; color: #e7f0ff; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }

.b-item { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed #22385e; font-size: 13px; min-width: 0; }
.b-item:last-child { border-bottom: none; }
.b-item .bt { color: var(--bs); font-variant-numeric: tabular-nums; flex: none; }
.b-item .bn { color: var(--bt); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 40%; min-width: 0; }
.b-item .bp { color: var(--bs); flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-item .bq { color: var(--bok); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.b-item .btag { color: #9fc3ff; background: #14294a; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-empty { color: var(--bs); font-size: 13px; padding: 18px 4px; text-align: center; line-height: 1.8; }

@media (max-width: 1400px) {
  .b-kpis { grid-template-columns: repeat(5, 1fr); }
  .b-kpi .bv { font-size: 26px; }
  .b-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================== 模具管理 ============================== */
/* 新增 / 编辑模具弹窗的三个选项卡（基本信息 / 状态与保养 / 设计与技术参数） */
.mtabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line, #e5e7eb); }
.mtab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 18px; font-size: 14px; color: var(--muted, #6b7280);
  border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mtab:hover { color: var(--text, #111827); background: var(--bg, #f6f7f9); }
.mtab.on {
  color: #fff; background: var(--primary, #2563eb); border-bottom-color: var(--primary, #2563eb); font-weight: 600;
}