/* BOB 工具集 · 统一设计令牌（天蓝主色 + FedEx紫 / UPS棕 承运商色）
   所有页面通过 <link rel="stylesheet" href="theme.css"> 引入，主色集中在 :root，便于全局统一调整。 */
:root{
  /* 主色：天蓝（全站通用：导航/按钮/表头/标题/链接/选中态） */
  --brand: #2196F3;
  --brand-strong: #1565C0;
  --brand-soft: #E7F3FD;

  /* 承运商专属色：仅用于区分 FedEx / UPS */
  --fedex: #7B1FA2;        /* FedEx 紫 */
  --fedex-soft: #F3EBFA;
  --ups: #6B4226;          /* UPS 棕 */
  --ups-soft: #F5EFE7;

  /* 语义色 */
  --ok: #16A34A;
  --ok-soft: #ECFDF3;
  --warn: #B45309;
  --warn-soft: #FFF7EB;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;

  /* 中性 */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --ink: #1F2329;
  --muted: #5D6776;
  --line: #E3E7EE;

  /* 形状与圆角 */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(20,30,50,.07);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); }

/* 通用组件（供各页面按需取用） */
.wb-card{ background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.wb-btn{ border:none; border-radius: var(--radius-sm); font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
.wb-btn-primary{ background: var(--brand); color:#fff; }
.wb-btn-primary:hover{ background: var(--brand-strong); }
.wb-tag{ display:inline-block; padding:2px 10px; border-radius:11px; font-size:12px; font-weight:600; }
.wb-tag-fedex{ background: var(--fedex-soft); color: var(--fedex); }
.wb-tag-ups{ background: var(--ups-soft); color: var(--ups); }

/* ─────────────────────────────────────────────────────────────────────────
   ERP 表格（一行一条记录）—— 口径取自「仓库发货 · 配载单」表。
   凡是以「一行一个数据」呈现的记录列表，统一用这一套，别各页自己写一套：
   列宽合计 100% 锁定不跳动、表头吸顶、数字右对齐、编号用等宽胶囊。
   单元格默认单行省略；确实要换行的用 .wrap（整段可折）或 .erp-2l（两行截断）。
   用法：<div class="erp-wrap"><table class="erp-tbl">…</table></div>
   列多到一页放不下时才追加 erp-wide（见下方说明），别默认就加。
   ───────────────────────────────────────────────────────────────────────── */
.erp-wrap{ overflow:auto; max-height:62vh; border:1px solid var(--line); border-radius:10px; background:#fff; }
table.erp-tbl{ border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px; table-layout:fixed; }
.erp-tbl th,.erp-tbl td{
  padding:7px 7px; text-align:left; white-space:nowrap; vertical-align:middle;
  border-bottom:1px solid var(--line); background:#fff;
  overflow:hidden; text-overflow:ellipsis;
}
.erp-tbl thead th{
  position:sticky; top:0; z-index:2; background:var(--brand-soft);
  color:var(--brand-strong); font-weight:700; font-size:12px;
  /* 表头允许折行：列窄时「柜数 / 托盘」这类长表头宁可折两行，也别被省略号截成「柜数…」。
     数据单元格仍然单行省略，只有表头会变高。 */
  white-space:normal; line-height:1.3;
}
.erp-tbl tbody tr:hover td{ background:#F6FAFF; }
.erp-tbl tbody tr:last-child td{ border-bottom:none; }
.erp-tbl td.num,.erp-tbl th.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* 列多（约 ≥14 列）时才给表格一个最小宽度：它会撑破容器，.erp-wrap 因此左右滚动。
   ⚠️ 加之前先量容器实宽——本工具集多数面板可用宽只有 ~1024px（.layout 是 flex，
   .tab-panels 只占其中 1112px）。最小宽一旦超过它，最右的「操作」列会被裁掉，
   看上去像按钮被切了一半，很容易误判成按钮没换行。
   一页能铺满就别加：列宽按 100% 分掉即可，单元格该换行就换行（配载单就是这么做的）。 */
.erp-tbl.erp-wide{ min-width:1080px; }
/* 需要换行的单元格（操作按钮组、多标签明细）显式开启 */
.erp-tbl td.wrap{ white-space:normal; overflow:visible; }
.erp-tbl .empty{ padding:28px 0; text-align:center; color:var(--muted); font-size:13.5px; }

/* 编号胶囊（单号 / 柜号 / 配载单号）：等宽字，一眼分辨是「码」不是「名」 */
.erp-no{
  display:inline-block; max-width:100%; padding:2px 8px; border-radius:8px;
  background:#F5F3FF; border:1px solid #DDD6FE; color:#6D28D9;
  font-weight:700; font-family:Consolas,Menlo,'Courier New',monospace;
  font-size:11px; letter-spacing:.2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
}
/* 通用徽标 */
.erp-badge{
  display:inline-block; padding:2px 6px; border-radius:20px; font-size:11px; font-weight:600;
  background:var(--brand-soft); color:var(--brand-strong); white-space:nowrap;
}
.erp-badge.ok{ background:var(--ok-soft); color:var(--ok); }
.erp-badge.wait{ background:#FFEDD5; color:#C2410C; }
.erp-badge.loaded{ background:#EDE9FE; color:#6D28D9; }
.erp-badge.pink{ background:#FCE7F3; color:#BE185D; }
.erp-badge.grey{ background:#F1F5F9; color:#475569; }
/* 单元格内的次级说明（11px 灰） */
.erp-sub{ font-size:11px; color:var(--muted); }
/* 多值明细（柜号/批次、PL 号串）：最多两行，超出省略，悬停看全部 */
.erp-2l{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:11px; line-height:1.55; color:var(--muted); word-break:break-all; white-space:normal;
}
/* 行内小按钮：横向排（操作列首选），不够宽自动折行，不会被裁掉 */
.erp-ops{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
/* 竖向排（配载单那种「主操作 + 次操作」两行按钮） */
.erp-ops-t{ display:flex; flex-direction:column; gap:4px; align-items:stretch; }
.erp-mini-btn{
  padding:3px 9px; border:1px solid var(--brand); border-radius:8px; background:#fff;
  color:var(--brand-strong); font-size:11px; font-weight:700; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.erp-mini-btn:hover{ background:var(--brand-soft); }
.erp-mini-btn.warn{ border-color:#F59E0B; color:#B45309; }
.erp-mini-btn.warn:hover{ background:#FFFBEB; }
.erp-mini-btn.danger{ border-color:#E7C3C3; color:#C0392B; }
.erp-mini-btn.danger:hover{ background:#FDECEA; }
/* 主操作：实心橙，与配载单「签出」同款权重 */
.erp-mini-btn.solid-warn{ background:#C2410C; border-color:#C2410C; color:#fff; }
.erp-mini-btn.solid-warn:hover{ background:#9A3412; }