:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e6e8eb;
  --tx: #1f2329;
  --tx2: #6b7280;
  --tx3: #9ca3af;
  --pri: #185fa5;
  --pri-soft: #e6f1fb;
  --ok: #0f6e56;
  --ok-soft: #e1f5ee;
  --warn: #854f0b;
  --warn-soft: #faeeda;
  --red: #a32d2d;
  --red-soft: #fcebeb;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  /* ---- 字号阶梯（唯一口径：全站只用这 7 档；▸ × + 等图形符号尺寸除外）---- */
  --fs-xs: 11px;    /* 极小辅助：角标、拖选提示 */
  --fs-sm: 12px;    /* 辅助信息：标签、表头、meta */
  --fs-md: 13px;    /* 紧凑正文：表格、列表、看板卡片 */
  --fs-base: 14px;  /* 正文基准：输入框、按钮、正文 */
  --fs-lg: 16px;    /* 标题：卡片标题、顶栏 logo */
  --fs-xl: 18px;    /* 大标题：弹窗标题 */
  --fs-2xl: 22px;   /* 特大：登录页标题、统计数字 */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--pri); text-decoration: none; }
button { font-family: inherit; font-size: inherit; }
small { font-size: var(--fs-xs); }

/* ---------- 登录页 ---------- */
#loginPage {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-box {
  width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 32px 28px; box-shadow: var(--shadow);
}
.login-box h1 { margin: 0 0 4px; font-size: var(--fs-2xl); font-weight: 600; }
.login-box .sub { color: var(--tx2); font-size: var(--fs-md); margin-bottom: 22px; }
.login-box label { display: block; font-size: var(--fs-sm); color: var(--tx2); margin: 12px 0 4px; }
.login-box .err { color: var(--red); font-size: var(--fs-sm); margin-top: 10px; min-height: 16px; }

/* ---------- 备案号页脚 ---------- */
.icp-foot { text-align: center; padding: 14px 0 4px; font-size: var(--fs-sm); color: var(--tx3); }
.icp-foot a { color: var(--tx3); }
.icp-foot a:hover { color: var(--pri); }
#loginPage .icp-foot { position: fixed; left: 0; right: 0; bottom: 12px; padding: 0; }

/* ---------- 通用控件 ---------- */
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: var(--fs-base); font-family: inherit; color: var(--tx); background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--pri); }
input[readonly] { background: #f3f4f6; }
textarea { resize: vertical; min-height: 56px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--tx); font-size: var(--fs-base); cursor: pointer; transition: .15s;
}
.btn:hover { border-color: var(--pri); color: var(--pri); }
.btn.pri { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn.pri:hover { background: #0f4a83; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.dgr { color: var(--red); }
.btn.dgr:hover { border-color: var(--red); background: var(--red-soft); }
.btn.sm { padding: 4px 10px; font-size: var(--fs-md); border-radius: 6px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 140px; }
.row label { display: block; font-size: var(--fs-sm); color: var(--tx2); margin-bottom: 4px; }

/* ---------- 布局 ---------- */
#app { display: none; min-height: 100vh; }
#app.on { display: block; }
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--border);
  height: 54px; display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
.topbar .logo { font-size: var(--fs-lg); font-weight: 600; color: var(--pri); white-space: nowrap; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: var(--fs-md); color: var(--tx2); }

.layout { display: flex; }
.sidebar {
  width: 180px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border);
  min-height: calc(100vh - 54px); padding: 12px 8px; position: sticky; top: 54px;
}
.sidebar a {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px;
  color: var(--tx2); font-size: var(--fs-base); margin-bottom: 2px;
}
.sidebar a:hover { background: var(--pri-soft); color: var(--pri); }
.sidebar a.on { background: var(--pri-soft); color: var(--pri); font-weight: 600; }
.main { flex: 1; min-width: 0; padding: 20px; }
.menu-icon { width: 18px; text-align: center; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 12px; font-size: var(--fs-lg); font-weight: 600; }
.card h3 { margin: 0 0 8px; font-size: var(--fs-base); font-weight: 600; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--tx2); font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
.empty { color: var(--tx3); text-align: center; padding: 24px; }

/* ---------- 标签 ---------- */
.tag { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: var(--fs-sm); background: #eef0f2; color: var(--tx2); white-space: nowrap; }
.tag.pri { background: var(--pri-soft); color: var(--pri); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.sew { background: #f3e8fd; color: #6b21a8; }   /* 无骨缝头（外发） */
.tag.cxl { background: #eceef1; color: #7d8590; }   /* 已取消（客人取消制作） */

/* ---------- 进度条 ---------- */
.segs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.seg { flex: 1; min-width: 90px; background: #f3f4f6; border-radius: 6px; padding: 6px 8px; }
.seg .bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.seg .bar i { display: block; height: 100%; background: var(--pri); }
.seg .bar i.ok { background: var(--ok); }
.seg .lbl { font-size: var(--fs-xs); color: var(--tx2); display: flex; justify-content: space-between; }
.seg .lbl b { color: var(--tx); }

/* ---------- 工序按钮（报工） ---------- */
.procs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.proc {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  background: #fff; text-align: center; min-width: 72px; user-select: none; transition: .15s;
}
.proc b { display: block; font-size: var(--fs-base); }
.proc span { font-size: var(--fs-xs); color: var(--tx2); }
.proc.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri); }
.proc.on span { color: var(--pri); }
.proc.done { border-color: var(--ok); background: var(--ok-soft); }
.proc.done b, .proc.done span { color: var(--ok); }

/* ---------- 手工做法多选 chip ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer;
  background: #fff; font-size: var(--fs-md); user-select: none; transition: .15s;
}
.chip small { color: var(--tx3); }
.chip.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri); }
.chip.on small { color: var(--pri); }

/* ---------- 订单搜索下拉（报工） ---------- */
.ord-drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  max-height: 280px; overflow-y: auto; display: none; box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.ord-drop.on { display: block; }
.ord-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.ord-item:last-child { border-bottom: none; }
.ord-item:hover { background: var(--pri-soft); }
.ord-item .sub { color: var(--tx2); font-size: var(--fs-sm); }
.ord-item.has-thumb { display: flex; gap: 10px; align-items: center; }
.ord-item .ord-thumb {
  width: 38px; height: 38px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); flex: none;
}
.ord-item .ord-thumb.ph { display: block; background: #f3f4f6; border-style: dashed; }
.ord-item .ord-main { min-width: 0; flex: 1; }

/* ---------- 报工页：款式图 + 信息备注 ---------- */
.r-imgbox { margin-bottom: 12px; }
.r-imgbox-in {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: var(--pri-soft); border-radius: 8px; padding: 10px;
}
img.r-img {
  width: 190px; max-width: 100%; border-radius: 6px; border: 1px solid var(--border);
  cursor: zoom-in; display: block; background: #fff;
}
img.r-img:hover { border-color: var(--pri); }
.r-noimg {
  width: 190px; padding: 20px 10px; text-align: center; font-size: var(--fs-sm); color: var(--tx3);
  border: 1px dashed var(--border); border-radius: 6px; background: #fff; line-height: 1.7;
}
.r-noimg span { font-size: var(--fs-xs); }
.r-imginfo { flex: 1; min-width: 220px; font-size: var(--fs-md); }
.r-imginfo .sub { color: var(--tx2); font-size: var(--fs-sm); margin: 4px 0 6px; }
/* 报工页：款式图右侧的订单信息块（面板里的信息直接铺开；原来要点「打开这张单」） */
.r-ordinfo { margin-top: 6px; }
.r-kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.r-kvs .om-kv { padding: 3px 0; }
.r-kvs .om-kv > span { width: 68px; font-size: var(--fs-sm); }
.r-kvs .om-kv > b { font-size: var(--fs-base); }
.r-kvs .r-wide { grid-column: 1 / -1; }
.r-ordops { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 款式图缩略图 ---------- */
img.thumb {
  width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); cursor: pointer; display: block;
}
img.thumb:hover { border-color: var(--pri); }
.img-box { margin-top: 8px; }
.img-box img { max-width: 160px; border-radius: 8px; border: 1px solid var(--border); }

/* ---------- 看板 ---------- */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bcol { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bcol-head { padding: 10px 14px; background: var(--pri-soft); color: var(--pri); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.bcol-head .cnt { font-size: var(--fs-sm); font-weight: 400; color: var(--tx2); }
.bitem { padding: 8px 14px; border-top: 1px solid var(--border); font-size: var(--fs-md); }
.bitem .no { font-weight: 600; }
.bitem .meta { color: var(--tx2); font-size: var(--fs-sm); }
/* 「拍照/寄样」是记录环节：浅绿底、不打点按钮醒目；拆成两列后「待寄样」用蓝色区分（寄出后会自动进出货对账） */
.bcol.smp-col { border: 1px dashed var(--ok); }
.bcol.smp-col > .bcol-head { background: var(--ok-soft); color: var(--ok); }
/* 「待确认机台样」列（样品视图：织造完成 → 确认机台样 → 才能缝头） */
.bcol.mchk-col { border: 1px dashed var(--warn); }
.bcol.mchk-col > .bcol-head { background: var(--warn-soft); color: var(--warn); }
.bcol.smp-col.jy-col { border-color: var(--pri); }
.bcol.smp-col.jy-col > .bcol-head { background: var(--pri-soft); color: var(--pri); }
.bitem .smp-badge {
  display: inline-block; margin: 4px 0 2px; padding: 2px 10px; border-radius: 20px;
  font-size: var(--fs-sm); font-weight: 600; color: #fff; background: var(--ok);
}
/* 已经拍过照、但前面还有工序没做完（客人急着确认大货的情况） */
.bitem .smp-badge.ok { background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.bitem .smp-badge.mchk { background: var(--warn); }
.bitem .card-ops { margin-top: 8px; }
/* 报工页：记录环节的提示条 */
.proc-note {
  flex-basis: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn); font-size: var(--fs-md); line-height: 1.7;
}
.proc-note.ok { background: var(--ok-soft); color: var(--ok); }
/* 看板卡片上的工艺摘要（刺绣 · 点胶 · 木耳边） */
.bitem .craft {
  display: inline-block; margin: 4px 0 2px; padding: 1px 9px; border-radius: 20px;
  font-size: var(--fs-sm); line-height: 1.7; color: var(--pri); background: var(--pri-soft);
}
/* 看板卡片：同款另一边的状态（样品↔大货配对，不用切视图来回看） */
.bitem .pairln { margin: 3px 0 2px; font-size: var(--fs-sm); color: var(--tx2); }
.bitem .pairln.wait { color: var(--warn, #b45309); }
.bitem .pairln.ok { color: var(--ok, #15803d); font-weight: 500; }
/* 看板：同一主单号分组（可展开/收起） */
.bgrp-head {
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  padding: 6px 12px; background: #f4f6f9; border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  flex-wrap: wrap; row-gap: 4px;   /* 窄列放不下就换行（防按钮被列 overflow:hidden 裁掉）—— 09-19 */
}
.bgrp-head:hover { background: var(--pri-soft); }
.bgrp-head .arw { color: var(--tx2); flex: none; width: 11px; font-size: var(--fs-xs); }
.bgrp-head .gno { font-weight: 600; color: var(--tx); white-space: nowrap; }
.bgrp-head .gmeta { color: var(--tx2); margin-left: auto; text-align: right; white-space: nowrap; }
.bgrp-head .gbtns { flex: none; margin-left: 8px; }
.bgrp-head.closed .gno { color: var(--tx2); }
.bgrp-body { border-left: 3px solid var(--pri-soft); }
.bgrp-body .bitem:first-child { border-top: 1px dashed var(--border); }
.gate-col .bgrp-body { border-left-color: var(--warn-soft); }

/* ---------- 缝头外发（无骨缝头送厂外做） ---------- */
.sew-box {
  border: 1px solid #e3d5f5; border-radius: 8px; padding: 10px 12px;
  background: #fbf8ff;
}
.sew-sum { font-size: var(--fs-md); color: var(--tx); margin-bottom: 6px; }
.sew-pend { color: var(--warn); }
.sew-ok { color: var(--ok); }
.sew-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 2px; border-bottom: 1px dashed #e3d5f5; font-size: var(--fs-md);
}
.sew-row:last-child { border-bottom: none; }
.sew-line { flex: 1; min-width: 200px; }
.sew-line .sub { color: var(--tx2); font-size: var(--fs-sm); margin-left: 6px; }
.sew-ops { display: inline-flex; gap: 6px; flex: none; }
.sew-row .btn { flex: none; }
.sew-row.sew-new { border-top: 1px solid #e3d5f5; padding-top: 10px; gap: 8px; }
.sew-row.sew-new input { width: auto; }
.sew-row.sew-new input[type="date"] { width: 150px; }
.sew-row.sew-new input[type="number"] { width: 130px; }
.sew-row.sew-new #sewFactory { width: 150px; }
.sew-row.sew-new #sewNote { flex: 1; min-width: 120px; }
.sew-hint { align-self: flex-end; font-size: var(--fs-sm); color: #6b21a8; line-height: 1.6; }
.sew-hint b { color: #6b21a8; }
/* 定型规则提示（包边/上鞋襻不用定型） */
.shape-hint {
  background: #fbf8ff; border: 1px solid #e3d5f5; border-radius: 8px;
  padding: 8px 10px; margin: 6px 0 4px; color: #6b21a8; font-size: var(--fs-sm); line-height: 1.7;
}
.shape-hint b { color: #6b21a8; }
/* 看板卡片上的外发提示行 */
.sew-line-b { margin-top: 4px; font-size: var(--fs-sm); color: #6b21a8; line-height: 1.5; }
.sew-line-b b { color: var(--warn); }
tr.cmp-row .tag.sew { margin-left: 4px; }

/* ---------- 刺绣花版（DST） ---------- */
.emb-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fafbfc; }
.emb-title { font-size: var(--fs-md); font-weight: 600; color: var(--tx2); margin-bottom: 6px; }
.emb-row {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 8px 2px; border-bottom: 1px dashed var(--border); font-size: var(--fs-md);
}
.emb-row:last-child { border-bottom: none; }
.emb-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 7px; }
.emb-main .emb-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.emb-main .sub { color: var(--tx2); font-size: var(--fs-sm); }
.emb-main .sub b { color: var(--tx); }
.emb-thread { width: 210px; }
.emb-row.emb-new { border-top: 1px solid var(--border); padding-top: 10px; }
.emb-row .btn { flex: none; }

/* 花版缩略图：花版预览图 + 实物图（点图看大图） */
.emb-thumbs { display: flex; gap: 8px; flex: none; }
.emb-thumb {
  position: relative; width: 76px; height: 76px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.emb-thumb img {
  width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block;
  background: #fff;
}
.emb-thumb.ph { background: #f7f8f9; color: var(--tx3); }
.emb-thumb.add {
  border: 1px dashed var(--pri); color: var(--pri); background: var(--pri-soft);
  cursor: pointer; flex-direction: column; gap: 2px;
}
.emb-thumb.add:hover { opacity: .82; }
.emb-thumb.add.busy { opacity: .5; pointer-events: none; }
.emb-ph-plus { font-size: 20px; line-height: 1; font-weight: 600; }
.emb-ph-empty { font-size: var(--fs-xs); }
.emb-thumb-tag {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: var(--fs-xs); line-height: 16px; height: 16px; color: #fff;
  background: rgba(31, 35, 41, .55);
}
.emb-thumb.ph .emb-thumb-tag { background: rgba(31, 35, 41, .28); }
.emb-thumb.add .emb-thumb-tag { background: transparent; color: var(--pri); position: static; height: auto; }
.emb-thumb .emb-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 50%; background: rgba(31, 35, 41, .6); color: #fff;
  font-size: var(--fs-sm); line-height: 18px; cursor: pointer; z-index: 2;
}
.emb-thumb .emb-x:hover { background: var(--red); }
@media (max-width: 640px) {
  .emb-thumb { width: 64px; height: 64px; }
}
/* 花版沿用同款样品单时的说明条 */
.emb-share {
  background: var(--pri-soft); color: var(--pri); font-size: var(--fs-sm); line-height: 1.7;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
}

/* 订单弹窗里的「修改建议」展示区 */
.revbox { display: flex; flex-direction: column; gap: 8px; }
.revcard {
  border: 1px solid #e3d5f5; border-radius: 8px; background: #fbf8ff; padding: 8px 10px;
}
.revcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.revcard-head b { font-size: var(--fs-md); color: #6b21a8; }
.revcard-head .sub { color: var(--tx2); }
.revcard-head .revcard-del { margin-left: auto; }
.revcard-text { margin-top: 5px; font-size: var(--fs-md); line-height: 1.7; white-space: pre-line; }
.revcard-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.revcard-imgs img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.revcard-big { display: block; max-width: 100%; margin-top: 8px; border-radius: 8px; border: 1px solid #e3d5f5; }

/* ---------- 样品寄出汇总：费用数字点一下可改 ---------- */
.fee-edit { cursor: pointer; }
.fee-edit:hover { color: var(--pri); text-decoration: underline dotted; }

/* ---------- 等待确认大货（等样品确认）列 ---------- */
.bcol.gate-col { border: 1px solid var(--warn); }
.bcol.gate-col > .bcol-head { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.bcol.gate-col .bgrp-head { background: #fdf6ea; }
.bcol.gate-col .bgrp-head:hover { background: var(--warn-soft); }
.bitem.gate { background: var(--warn-soft); }
.bitem.gate .gst { margin-top: 4px; font-size: var(--fs-sm); color: var(--warn); line-height: 1.5; }
.bitem.gate .gst .ok-tx { color: var(--ok, #0f6e56); font-weight: 600; }
.bitem.gate .gst .warn-tx { color: var(--warn, #b45309); font-weight: 600; }
/* 放行记录（谁点的放行 + 时间） */
.rel-by { margin-top: 3px; font-size: var(--fs-xs); color: var(--tx3, #9aa0a6); line-height: 1.4; }
.rel-by .lnk { color: var(--pri, #2563eb); text-decoration: none; border-bottom: 1px dashed currentColor; }
.rel-by .lnk:hover { color: var(--danger, #dc2626); border-bottom-style: solid; }

/* ---------- 页面互跳：可点卡片 / 链接 / 定位高亮 ---------- */
a.lnk { color: var(--pri); text-decoration: none; border-bottom: 1px dashed currentColor; cursor: pointer; }
a.lnk:hover { border-bottom-style: solid; }
.bitem.clickable { cursor: pointer; transition: background .15s; }
.bitem.clickable:hover { background: var(--pri-soft); }
.bitem.gate.clickable:hover { background: #f4e2c4; }
.bitem .meta a.lnk { font-size: var(--fs-sm); }

/* 打样版本备注（09-22）：卡片版本标下的小字 + 弹窗里的「版本N [框]」 */
.vnote-b { margin-top: 3px; font-size: var(--fs-xs); color: var(--tx3, #9aa0a6); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bitem .no a[data-vnote] { white-space: nowrap; }
.vnote-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.vnote-row label { flex: 0 0 54px; color: var(--tx2); }
.vnote-row .vnote-in { flex: 1; min-width: 0; }
img.thumb.xs, span.thumb.xs { width: 24px; height: 24px; border-radius: 4px; vertical-align: middle; display: inline-block; }
img.thumb.xs { object-fit: cover; }
span.thumb.ph { background: #f2f4f7; border: 1px dashed var(--border); }
/* ---------- 路由编辑器 ---------- */
.route-editor { display: flex; flex-direction: column; gap: 6px; }
.route-line { display: flex; align-items: center; gap: 6px; }
.route-line .rproc {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.route-line .rproc .nm { font-weight: 600; }
.route-line .rproc .dup { font-size: var(--fs-sm); color: var(--warn); }
.route-line .ops { display: flex; gap: 4px; }
.route-line .ops button { width: 28px; height: 28px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; }
.route-line .ops button:hover { border-color: var(--pri); color: var(--pri); }
.route-add { display: flex; gap: 6px; }
.route-add select { flex: 1; }

/* ---------- 模态 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--card); border-radius: 14px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; padding: 20px;
}
.modal h2 { margin: 0 0 16px; font-size: var(--fs-xl); }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal.wide { max-width: min(1280px, 96vw); }
.modal.mid { max-width: min(860px, 95vw); }
/* 看板内「订单管理」弹窗：头/身体/脚三段式，身体滚动、按钮常驻底部 */
.modal.om-modal {
  padding: 0; display: flex; flex-direction: column;
  max-height: 94vh; overflow: hidden;
}
.modal.om-modal .om-head { padding: 18px 26px 14px; border-bottom: 1px solid var(--border); flex: none; }
.modal.om-modal .om-head h2 { margin: 0; font-size: var(--fs-xl); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal.om-modal .om-body { flex: 1; overflow-y: auto; padding: 18px 26px; }
.modal.om-modal .om-foot {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 26px; border-top: 1px solid var(--border); background: #fafbfc;
}
.modal.om-modal .om-foot .btn { padding: 9px 22px; font-size: var(--fs-base); }
/* 双栏：左 = 图 + 基本信息 + 备注；右 = 进度 + 同款单 + 报工 */
.om-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 6px 32px; align-items: start; }
@media (max-width: 900px) { .om-grid { grid-template-columns: 1fr; gap: 0; } }
.om-col > .om-sect:first-child { margin-top: 0; }
.om-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.om-pic { flex: none; }
img.om-img {
  width: 270px; max-width: 46vw; border-radius: 8px; border: 1px solid var(--border);
  cursor: zoom-in; display: block; background: #fff;
}
img.om-img:hover { border-color: var(--pri); }
.om-noimg {
  width: 270px; max-width: 46vw; padding: 44px 8px; text-align: center; font-size: var(--fs-base);
  color: var(--tx3); border: 1px dashed var(--border); border-radius: 8px;
}
.om-kvs { flex: 1; min-width: 260px; font-size: var(--fs-base); }
.om-kv { display: flex; gap: 10px; padding: 5px 0; align-items: baseline; }
.om-kv > span { color: var(--tx2); font-size: var(--fs-sm); flex: none; width: 78px; }
.om-kv > b { min-width: 0; }
.om-sect {
  font-size: var(--fs-md); font-weight: 600; color: var(--tx2);
  margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.om-procs { display: flex; flex-wrap: wrap; gap: 9px; }
.om-proc {
  display: flex; align-items: center; gap: 7px; font-size: var(--fs-base);
  background: #f4f6f9; border-radius: 20px; padding: 6px 15px;
}
.om-proc.done { background: var(--ok-soft); color: var(--ok); }
.om-proc i { font-style: normal; font-size: var(--fs-sm); color: var(--red); }
.om-peer {
  display: flex; align-items: center; gap: 12px; padding: 11px 6px; font-size: var(--fs-base);
  border-bottom: 1px dashed var(--border); cursor: pointer;
}
.om-peer:hover { background: var(--pri-soft); }
.om-peer .sub, .om-log .sub { color: var(--tx2); font-size: var(--fs-sm); }
.om-log {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px; font-size: var(--fs-base);
  border-bottom: 1px dashed var(--border);
}
.om-log i { font-style: normal; color: var(--red); }
.om-log .lnk { margin-left: auto; }
/* 手机上让这个弹窗铺满屏幕，别缩成小卡片 */
@media (max-width: 900px) {
  .modal.om-modal { width: 100%; max-width: none; max-height: 94vh; }
}

/* ---------- 报工框（09-22）：从看板 / 订单面板点「报工」弹出 —— 头 / 身体 / 脚三段式，身体滚动、按钮常驻底部 ---------- */
.modal.rp-modal {
  padding: 0; display: flex; flex-direction: column;
  max-height: 92vh; overflow: hidden;
  width: 100%; max-width: min(1080px, 96vw);
}
.modal.rp-modal .rp-head { padding: 15px 22px 12px; border-bottom: 1px solid var(--border); flex: none; display: flex; align-items: center; gap: 10px; }
.modal.rp-modal .rp-head h2 { margin: 0; font-size: var(--fs-xl); }
.modal.rp-modal .rp-body { flex: 1; overflow-y: auto; padding: 16px 22px 18px; }
.modal.rp-modal .rp-foot {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 22px; border-top: 1px solid var(--border); background: #fafbfc;
}
.modal.rp-modal .rp-foot .btn { padding: 9px 20px; font-size: var(--fs-base); }
@media (max-width: 900px) {
  .modal.rp-modal { max-width: none; max-height: 94vh; }
}

/* ---------- 提示 ---------- */
.toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: var(--tx); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: var(--fs-base);
  box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transition: .25s;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--ok); }

/* ---------- 统计卡片 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stat .v { font-size: var(--fs-2xl); font-weight: 600; }
.stat .k { font-size: var(--fs-sm); color: var(--tx2); margin-top: 2px; }

.hint { color: var(--tx3); font-size: var(--fs-sm); }

/* 台账「备注」列：单行截断（悬停看全文） */
.tnote { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--tx2); }

/* ---------- 订单表格（类多维表格）：拉动看数据 = 首列冻结 + 列宽可拖 ---------- */
.ordtbl-wrap { overflow: auto; max-height: calc(100vh - 250px); border: 1px solid var(--border); border-radius: 10px; background: #fff; }
table.ordtbl { border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); table-layout: fixed; }
table.ordtbl th {
  position: sticky; top: 0; z-index: 2; background: #fafbfc; color: var(--tx2);
  font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; text-align: left;
  padding: 8px 16px 8px 10px; border-bottom: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis;
}
table.ordtbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.ordtbl tbody tr:last-child td { border-bottom: none; }
table.ordtbl tbody tr.ot-row { cursor: pointer; }
table.ordtbl tbody tr.ot-row:hover { background: #fafbfc; }
table.ordtbl tr.ot-grp td { background: #f5f7f9; color: var(--tx2); font-size: var(--fs-sm); cursor: pointer; }
table.ordtbl tr.ot-grp:hover td { background: var(--pri-soft); }
table.ordtbl tr.ot-main td { background: #eef3f8; font-weight: 600; cursor: pointer; }
table.ordtbl tr.ot-main:hover td { background: var(--pri-soft); }
table.ordtbl.dense td { padding: 4px 10px; }
table.ordtbl.dense th { padding: 5px 16px 5px 10px; }
/* 首列冻结：往右拉表格看后面的列时，第一列（任务项）固定在最左边 */
table.ordtbl th.ot-lock { left: 0; z-index: 4; background: #fafbfc; box-shadow: 1px 0 0 var(--border); }
table.ordtbl td.ot-lock { position: sticky; left: 0; z-index: 3; background: #fff; box-shadow: 1px 0 0 var(--border); }
table.ordtbl tbody tr.ot-row:hover td.ot-lock { background: #fafbfc; }
/* 列宽拖动：表头右边缘一条热区（悬停亮一条竖线；拖动中整页 col-resize） */
table.ordtbl th .ot-rz { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 6; }
table.ordtbl th .ot-rz::after { content: ''; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 2px; background: transparent; border-radius: 1px; }
table.ordtbl th .ot-rz:hover::after { background: var(--pri); }
body.colrz, body.colrz * { cursor: col-resize !important; user-select: none !important; }
/* 表尾空白行：直接填（类飞书）——任务项+数量齐了自动建单 */
table.ordtbl tr.ot-add td { color: var(--tx); background: #fbfdfe; border-top: 1px dashed var(--border); border-bottom: none; }
table.ordtbl tr.ot-add td.ot-addc { cursor: text; }
table.ordtbl tr.ot-add:hover td { background: #f5f9fc; }
table.ordtbl tr.ot-add td.ot-addc:hover { background: var(--pri-soft); }
table.ordtbl tr.ot-add td.ot-addna { color: var(--tx3); cursor: default; }
table.ordtbl tr.ot-add td.ot-lock { background: #fbfdfe; box-shadow: 1px 0 0 var(--border); }
table.ordtbl tr.ot-add:hover td.ot-lock { background: #f5f9fc; }
table.ordtbl tr.ot-add .ot-plus { color: var(--pri); font-weight: 700; margin-right: 2px; }
table.ordtbl tr.ot-emptyrow td { color: var(--tx3); }
.ot-thumb { height: 34px; width: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; display: inline-block; vertical-align: middle; }
.ot-thumb + .ot-thumb { margin-left: 4px; }
.ot-edit { cursor: text; }
.ot-edit:hover { background: var(--pri-soft); }
.ot-miss { color: var(--red); }
.tbl-pop {
  position: fixed; display: none; z-index: 70; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px 14px; max-width: min(440px, 92vw);
}
.tbl-pop .pfrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-md); }
.tbl-pop .pfrow > span { color: var(--tx2); font-size: var(--fs-sm); width: 64px; flex: none; }
.tbl-pop .pfopt { padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: var(--fs-md); }
.tbl-pop .pfopt:hover { background: var(--pri-soft); }
.tbl-pop .pfcols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.tbl-pop .pfcol { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.tbl-pop .pfcol:hover { background: var(--pri-soft); }
.tbl-pop .pfcol input { width: auto; }
.tbl-pop .btn.on2 { border-color: var(--pri); color: var(--pri); background: var(--pri-soft); }

/* 订单表格：多选小方框 + 同款合并行的小字（样品进度 / 样品交期 / +样数量） */
table.ordtbl .ot-ck { width: auto; margin: 0 7px 0 1px; vertical-align: middle; cursor: pointer; }
table.ordtbl .ot-sub { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--tx2); }
/* 同单折叠：同单多款时单号前的小三角（收起 / 展开同单其它款）+ 收起时的「+N 款」小标 */
table.ordtbl .ot-fold { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px 3px -4px 9px; font-size: 17px; font-weight: 700; line-height: 1; color: var(--tx); cursor: pointer; border-radius: 7px; user-select: none; vertical-align: middle; }
table.ordtbl .ot-fold:hover { color: var(--pri); background: var(--pri-soft); }
table.ordtbl .ot-fold:active { color: var(--pri); background: var(--pri-soft); }
table.ordtbl .ot-fb { font-size: var(--fs-xs); line-height: 1.4; color: var(--tx2); background: #eef1f4; border-radius: 8px; padding: 0 6px; margin-left: 4px; vertical-align: middle; }
.toolbar #ordSelBox { display: inline-flex; align-items: center; gap: 8px; }
.ordsel-n { font-size: var(--fs-sm); color: var(--tx2); }

/* 数量列：像 Excel 一样拖选一段 → 合计（高亮 + 合计条 + 拖动时禁文字选择） */
table.ordtbl td[data-edit="qty"] { cursor: cell; }
table.ordtbl td.ot-qsel { background: #d9ecff; box-shadow: inset 0 0 0 1px rgba(21, 87, 163, .35); }
body.qtdrag, body.qtdrag * { user-select: none !important; }
.toolbar #ordQtyBox { display: inline-flex; align-items: center; gap: 6px; }
.ordqsel-n { font-size: var(--fs-sm); color: var(--pri); background: var(--pri-soft); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
/* 样品寄出汇总：拖选订单行 → 合计（行高亮 + 顶部合计条 + 拖动时禁文字选择） */
tr.smp-order.smp-sel td { background: #d9ecff; box-shadow: inset 0 0 0 1px rgba(21, 87, 163, .35); }
body.smpdrag, body.smpdrag * { user-select: none !important; }
.toolbar #smpQtyBox { display: inline-flex; align-items: center; gap: 6px; }
/* 样品寄出汇总：每款打样费后面的小字（「= …」算式）—— 这笔钱逐笔怎么加出来的（初样/推翻样全额、修改样(vN)/补打样半价、免费补打 0） */
.smpdy-note { white-space: nowrap; font-size: var(--fs-xs); line-height: 1.35; color: var(--tx3); font-weight: 400; }

/* ---------- 响应式：手机 ---------- */
/* 手机底部导航：桌面端隐藏（默认 none），窄屏才显示 */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .sidebar { display: none; }
  .main { padding: 12px; }
  .topbar { padding: 0 12px; }
  .row > div { min-width: 100%; }
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; background: var(--card);
    border-top: 1px solid var(--border); display: flex; z-index: 20; padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    flex: 1; text-align: center; padding: 8px 4px; font-size: var(--fs-xs); color: var(--tx2);
    display: flex; flex-direction: column; gap: 2px; align-items: center;
  }
  .bottom-nav a .menu-icon { font-size: 18px; width: auto; }
  .bottom-nav a.on { color: var(--pri); font-weight: 600; }
  .main { padding-bottom: 70px; }
  .board-grid { grid-template-columns: 1fr; }
  table { font-size: var(--fs-sm); }
  th, td { padding: 6px 6px; }
}

/* ---------- 整单报工：款列表在左，「合格数 / 次品数 / 金额」摆到列表右边（fillBatchBox 给 #rLineWrap 加 .batch-on） ---------- */
#rLineWrap.batch-on { display: flex; align-items: flex-start; gap: 14px; }
#rLineWrap.batch-on #rBatchBox { flex: 1 1 auto; min-width: 0; }
#rLineWrap.batch-on #rQtyRow { flex: 0 0 200px; flex-direction: column; gap: 10px; }
#rLineWrap.batch-on #rQtyRow > div { flex: none; min-width: 0; }
@media (max-width: 720px) {
  #rLineWrap.batch-on { display: block; }
  #rLineWrap.batch-on #rQtyRow { margin-top: 10px; }
}

/* ---------- 刺绣文件数据汇总（订单表格页下方；刺绣车间 / 跟单 / 管理员可见） ---------- */
#embSumWrap { overflow-x: auto; }
.es-tbl td { white-space: nowrap; }
.es-tbl tr.es-sec td { background: #f5f7f9; color: var(--tx2); font-size: var(--fs-sm); font-weight: 600; }
/* 同单折叠三角（点一下收起 / 展开同单的其它款 —— 09-23 用户） */
/* 通用折叠小三角 + 「+N 款」标记（订单表格外的汇总页统一用；订单表格内是 .ot-fold/.ot-fb）—— 09-23 晚统一 */
.fold-ar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -5px 3px -5px 0; font-size: 15px; font-weight: 700; line-height: 1; color: var(--tx); cursor: pointer; border-radius: 7px; user-select: none; vertical-align: middle; }
.fold-ar:hover { color: var(--pri); background: var(--pri-soft); }
.fold-ar:active { color: var(--pri); background: var(--pri-soft); }
.fold-cnt { font-size: var(--fs-xs); line-height: 1.4; color: var(--tx2); background: #eef1f4; border-radius: 8px; padding: 0 6px; margin-left: 4px; vertical-align: middle; }
.fold-row { cursor: pointer; }
.es-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: zoom-in; display: block; }
.es-thumb:hover { border-color: var(--pri); }
.es-thread { width: 160px; padding: 5px 8px; font-size: var(--fs-sm); }
.es-thread.saved { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.emb-ver { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 5px; background: var(--pri-soft); color: var(--pri); font-size: var(--fs-xs); font-weight: 700; vertical-align: 1px; }
.emb-fin { display: inline-block; margin: 0 4px 0 2px; padding: 1px 7px; border-radius: 5px; background: var(--ok-soft); color: var(--ok); font-size: var(--fs-xs); font-weight: 700; vertical-align: 1px; }
.emb-fin-strong { color: var(--ok); }
.es-ver { white-space: nowrap; }

/* ---------- 导入刺绣文件 · 弹窗里的文件清单与选单面板 ---------- */
.imp-list { border: 1px solid var(--border); border-radius: 10px; max-height: 300px; overflow: auto; }
.imp-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.imp-row:last-child { border-bottom: none; }
.imp-row .imp-name { flex: 0 1 36%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-row .imp-ord { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-row .imp-res { flex: none; color: var(--ok); font-size: var(--fs-sm); }
.imp-row .imp-res.bad { color: var(--red); }
.imp-row .imp-del { flex: none; color: var(--red); }
.imp-pick { padding: 8px 10px; border-bottom: 1px solid var(--border); background: #fafbfc; }
.imp-pick input { max-width: 320px; }
.imp-qlist { max-height: 200px; overflow: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.imp-qlist a { display: block; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.imp-qlist a:last-child { border-bottom: none; }
.imp-qlist a:hover { background: var(--pri-soft); }
.imp-qlist a.on { background: var(--pri-soft); }

/* 单据核对弹窗（刺绣汇总页点订单号） */
.esdoc-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #fafbfc; padding: 6px; text-align: center; }
.esdoc-wrap img { max-width: 100%; display: block; margin: 0 auto; cursor: zoom-in; }