.shell>div{min-width:0}
#orderList .orders-grid{width:100%;table-layout:auto;white-space:normal}
#orderList .orders-grid th,#orderList .orders-grid td{width:auto;padding:10px 8px;vertical-align:middle;overflow-wrap:anywhere;white-space:normal}
/* 「操作」列宽 40% —— 原来写的是 th:nth-child(6)。2026-10-14 订单列表插入「下单时间」列之后，
   第 6 列从「操作」变成了「状态」，这条规则会突然去撑宽状态列。改成 :last-child，与列数脱钩：
   分组表那支被下面 `.grouped-grid th:last-child{width:20%}`（同特异度、位置靠后）覆盖，行为不变。 */
#orderList .orders-grid th:last-child{width:40%}
#orderList .orders-grid td:nth-child(3){white-space:nowrap}
#orderList .orders-grid td:last-child{line-height:1.65}
#orderList .orders-grid td:last-child .muted{white-space:normal;overflow-wrap:anywhere;margin:5px 0}
#orderList .orders-grid td:last-child button{margin:3px 4px 3px 0}
.order-pager{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px}
.order-pager label{display:flex;align-items:center;gap:8px;margin:0}.order-pager select{width:auto;min-width:86px}
.scan-video{width:100%;max-height:45vh;min-height:160px;object-fit:contain;background:#17251c;border-radius:8px}
.scan-hint{margin:12px 0;white-space:normal}.scan-controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
@media(max-width:650px){#orderList .orders-grid thead{display:none}#orderList .orders-grid,#orderList .orders-grid tbody,#orderList .orders-grid tr,#orderList .orders-grid td{display:block;width:100%}#orderList .orders-grid tr{border:1px solid #e1e6dc;border-radius:8px;padding:8px;margin-bottom:12px}#orderList .orders-grid td{border:0;padding:4px 6px}#orderList .orders-grid td::before{content:attr(data-label);display:inline-block;color:#778176;min-width:76px}#orderList .orders-grid td:last-child{border-top:1px solid #edf0e9;margin-top:6px;padding-top:8px}#orderList .orders-grid td:last-child::before{display:none}.order-pager{justify-content:flex-start}}
/* 原写 th:nth-child(6)（当时的第 6 列是商品行，要 width:auto 不参与定宽）。
   2026-10-14 插入「下单时间」后第 6 列成了来源订单，这里跟着挪到第 7 列 —— 值仍是 width:auto，
   本来就压不过上面 `.orders-grid th{width:auto}`，属于空转，留着只为标明「商品行不参与定宽」这个意图。 */
#orderList .grouped-grid th:nth-child(7){width:auto}
#orderList .grouped-grid th:last-child{width:20%}
#documentTabs{margin:12px 0}
.modal .tablewrap table{white-space:normal;overflow-wrap:anywhere}
/* 采购配送员那一格允许折行 —— 原来写的 nth-child(3)，2026-10-14 插入「下单时间」后第 3 列是下单时间，
   于是挪到第 4 列。两点说明：① 下单时间那一格自己在 HTML 上钉了 nowrap，优先级高于这里的规则，
   所以不会被这条放开；② `.orders-grid td` 早已是 white-space:normal，这条其实一直是空转，
   留着的意义是「这一列允许折行」这个意图本身。下次再插列，照表头数一遍。 */
#orderList .grouped-grid td:nth-child(4){white-space:normal}
.document-status-list{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.document-status{display:inline-block;border:1px solid;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
/* ── 订单状态配色登记处（2026-10-09 用户口径：全局统一，一个状态一个颜色，与账号无关）──────────
   色值只在这里出现一次：:root 定义 --st-<状态>-bg/-fg/-bd，下面两族（.badge / .document-status）
   各引用同一组变量，所以同一个状态在两处的底色与字色必然相同。CSS 类名就是状态值本身
   （见 public/status-labels.js 的 statusTone；认不出的状态落 unknown 走中性兜底）。
   改色只改这一段，别在别处写死 hex —— tests/status-color.test.mjs 会读本文件断言：
   7 个状态两族齐全、bg/fg 两两不同（这就是「一个状态一个颜色」的机器断言）、规则体里不出现字面 hex。
   已作废（原判断：非餐厅账号看到的「待派发」单独一档 status-magenta 紫红、餐厅侧维持橙，
   且采购侧曾把待派发特判成 status-red 与「待采购」的正红撞色；
   原因：2026-10-09 用户口径改为「彻底一色一状态」—— 7 个状态各只有一个颜色，橙色让给「待实收核对」独占，
   旧的 status-purple / status-red / status-yellow / status-green / status-gray 五条随之作废；
   日期：2026-10-09） */
:root{
 --st-submitted-bg:#f7dced;--st-submitted-fg:#95215f;--st-submitted-bd:#d795bd;
 --st-confirmed-bg:#ffe4e4;--st-confirmed-fg:#a32222;--st-confirmed-bd:#eeaaaa;
 --st-purchased-bg:#e6effa;--st-purchased-fg:#1f5f9e;--st-purchased-bd:#a8c4e0;
 --st-delivering-bg:#ddf1ef;--st-delivering-fg:#0f6b6b;--st-delivering-bd:#9ccfcb;
 --st-received-bg:#fce7c2;--st-received-fg:#8a4d0f;--st-received-bd:#d9ae6a;
 --st-completed-bg:#dcf4e3;--st-completed-fg:#1c6537;--st-completed-bd:#99d3ac;
 --st-cancelled-bg:#edf0ed;--st-cancelled-fg:#566056;--st-cancelled-bd:#cbd2cb;
 --st-unknown-bg:#edf0ed;--st-unknown-fg:#566056;--st-unknown-bd:#cbd2cb;
}
.badge.submitted{background:var(--st-submitted-bg);color:var(--st-submitted-fg)}
.badge.confirmed{background:var(--st-confirmed-bg);color:var(--st-confirmed-fg)}
.badge.purchased{background:var(--st-purchased-bg);color:var(--st-purchased-fg)}
.badge.delivering{background:var(--st-delivering-bg);color:var(--st-delivering-fg)}
.badge.received{background:var(--st-received-bg);color:var(--st-received-fg)}
.badge.completed{background:var(--st-completed-bg);color:var(--st-completed-fg)}
.badge.cancelled{background:var(--st-cancelled-bg);color:var(--st-cancelled-fg)}
.badge.unknown{background:var(--st-unknown-bg);color:var(--st-unknown-fg)}
.document-status.status-submitted{background:var(--st-submitted-bg);border-color:var(--st-submitted-bd);color:var(--st-submitted-fg)}
.document-status.status-confirmed{background:var(--st-confirmed-bg);border-color:var(--st-confirmed-bd);color:var(--st-confirmed-fg)}
.document-status.status-purchased{background:var(--st-purchased-bg);border-color:var(--st-purchased-bd);color:var(--st-purchased-fg)}
.document-status.status-delivering{background:var(--st-delivering-bg);border-color:var(--st-delivering-bd);color:var(--st-delivering-fg)}
.document-status.status-received{background:var(--st-received-bg);border-color:var(--st-received-bd);color:var(--st-received-fg)}
.document-status.status-completed{background:var(--st-completed-bg);border-color:var(--st-completed-bd);color:var(--st-completed-fg)}
.document-status.status-cancelled{background:var(--st-cancelled-bg);border-color:var(--st-cancelled-bd);color:var(--st-cancelled-fg)}
.document-status.status-unknown{background:var(--st-unknown-bg);border-color:var(--st-unknown-bd);color:var(--st-unknown-fg)}
/* 单据「凭证」列的档位配色（2026-10-10 需求：订单内/单据列表要一眼看出还差哪几张凭证）。
   与上面的订单状态**是两个域**，所以单独一组变量、单独一段，不并进上面那个登记处 ——
   「一个状态一个颜色」那条口径只收编订单状态，凭证只是「传没传、认没认出来」。
   但同一条纪律照旧：色值只在这里出现一次，规则体里不写死 hex（tests/document-credential-column.test.mjs 盯着）。
   七档的读法：灰=还没有东西 / 靛=东西在系统里等着被识别 / 绿=认完了 / 青=认完了但单号是人核过的 /
   橙=要人核对 / 红=这张纸不作数了。
   语义要与 document-groups.js 的 credentialState 一一对应，改档位就两边一起改。
   已作废（原判断：「六档的读法」—— 没有「单号已人工确认」这一档；
   原因：2026-10-10 需求 1，单号读得对不上、人核对过之后要有个落得下去的档位，不能永远红着；
   日期：2026-10-10） */
:root{
 --cred-none-bg:#f0f1ee;--cred-none-fg:#6b7069;--cred-none-bd:#d4d8d2;
 --cred-empty-bg:#e9eef3;--cred-empty-fg:#4e6273;--cred-empty-bd:#c2cfda;
 --cred-pending-bg:#ece7f7;--cred-pending-fg:#5b3fa0;--cred-pending-bd:#c3b3e6;
 --cred-ok-bg:#dcf4e3;--cred-ok-fg:#1c6537;--cred-ok-bd:#99d3ac;
 /* confirmed 用青：它比 ok 多一层人核，不该与 ok 同色；又与 pending 的靛分得开。 */
 --cred-confirmed-bg:#ddf1ef;--cred-confirmed-fg:#0f6b6b;--cred-confirmed-bd:#9ccfcb;
 --cred-partial-bg:#fce7c2;--cred-partial-fg:#8a4d0f;--cred-partial-bd:#d9ae6a;
 --cred-stale-bg:#ffe4e4;--cred-stale-fg:#a32222;--cred-stale-bd:#eeaaaa;
}
.cred{display:inline-block;border:1px solid;border-radius:7px;padding:3px 8px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.cred-none{background:var(--cred-none-bg);border-color:var(--cred-none-bd);color:var(--cred-none-fg)}
.cred-empty{background:var(--cred-empty-bg);border-color:var(--cred-empty-bd);color:var(--cred-empty-fg)}
.cred-pending{background:var(--cred-pending-bg);border-color:var(--cred-pending-bd);color:var(--cred-pending-fg)}
.cred-ok{background:var(--cred-ok-bg);border-color:var(--cred-ok-bd);color:var(--cred-ok-fg)}
.cred-confirmed{background:var(--cred-confirmed-bg);border-color:var(--cred-confirmed-bd);color:var(--cred-confirmed-fg)}
.cred-partial{background:var(--cred-partial-bg);border-color:var(--cred-partial-bd);color:var(--cred-partial-fg)}
.cred-stale{background:var(--cred-stale-bg);border-color:var(--cred-stale-bd);color:var(--cred-stale-fg)}
/* 采购配送员卡片里那一行凭证状态（他看的不是表格，是卡片）。 */
.cred-line{margin:8px 0}
/* 「待派发」在单据处理弹窗里的那段提示文字（showDocument）。前景取待派发的状态色 —— 原来染的是另一支红
   #b42323，于是同一屏上待派发既是紫红 chip 又是一段红字，违反「一个状态一个颜色」。 */
.pending-assignment{color:var(--st-submitted-fg);font-weight:700}
p.pending-assignment{margin:10px 0}
/* 进销明细里「差异」值的高亮。原来借用了 .pending-assignment —— 那个类名的字面意思是「待派发」，
   两个意思共用一个类。差异不是订单状态域，颜色不参与状态配色，所以单列一个类。 */
.diff-flag{color:#b42323;font-weight:700}
/* ── 照片页内查看层（2026-10-10 需求：点开照片要有「关闭」，不能把系统页面顶掉）────────────
   原来是 <a target="_blank"> 跳到裸图片地址，手机里找不到关闭、只能靠系统返回手势。
   z-index 15 —— 高于 .modal-wrap 的 10（查看层要盖在弹窗上），低于 #toast 的 20（出错仍看得见）。
   缩略图元素从 <a> 换成 <figure>，所以这里顺带把 figure 的默认 margin 归零。 */
.evidence-photo{margin:0;cursor:zoom-in}
.evidence-photo figcaption{cursor:default}
.photo-viewer{position:fixed;inset:0;z-index:15;background:rgba(16,20,17,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.photo-viewer[hidden]{display:none}
.photo-viewer-img{max-width:100%;max-height:78vh;object-fit:contain;background:#fff;border-radius:8px}
.photo-viewer-close{position:absolute;top:14px;right:14px;padding:9px 16px;font-size:15px;border-radius:8px;background:#fff;color:#1c231d;border:0;cursor:pointer}
.photo-viewer-step{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:26px;line-height:1;background:rgba(255,255,255,.88);color:#1c231d;border:0;border-radius:8px;cursor:pointer}
.photo-viewer-step.prev{left:10px}
.photo-viewer-step.next{right:10px}
.photo-viewer-count{position:absolute;top:20px;left:18px;color:#fff;font-size:13px}
.photo-viewer-strip{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;overflow-x:auto;padding:0 16px;justify-content:center}
.photo-viewer-strip[hidden]{display:none}
.photo-viewer-thumb{width:56px;height:56px;flex:0 0 auto;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#fff;cursor:pointer}
.photo-viewer-thumb.active{border-color:#fff}
.photo-viewer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 订单详情里的「采购凭据／签字送货单」：原来是 <a target="_blank">，现在是个按钮，外观照旧做成链接样。 */
.photo-link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.receipt-difference{color:#b42323;border-color:#dc9c9c;background:#fff7f7}
#receiptDifference{margin:12px 0}
#ledgerFilters .actions{margin-top:16px;align-items:center}
#ledgerRows td:last-child{white-space:normal;min-width:220px}
/* ── 批量上传凭证弹窗（2026-10-10 需求）────────────────────────────────────────
   一次选/拍多张，每行一张照片：左缩略图、中间归单与进度、右操作。窄屏下换行而不是横向撑开。
   「识别灯」的颜色直接引用上面那一组 --cred-* —— 它表达的就是同一件事（认完了 / 有缺口要人核对 /
   这张不作数），另起一组 hex 只会让同一屏上出现两种不同的红。所以这一段同样不写死色值。 */
.batch-list{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.batch-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px;margin:0}
.batch-thumb{width:72px;height:92px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:#eef2ed;flex:none}
.batch-main{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 220px}
.batch-main strong{font-size:13px;overflow-wrap:anywhere}
.batch-book,.batch-percent,.batch-recog,.batch-err{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.batch-book{color:var(--green)}
/* 红字两种都走 --cred-stale-fg：它们是同一件事（这张纸／这张照片不作数了），
   借用同一个变量比另配一支近似的红更不容易看串。 */
.batch-book.bad,.batch-err{color:var(--cred-stale-fg)}
.batch-percent{color:#4e713d}
.batch-recog.ok{color:var(--cred-ok-fg)}
.batch-recog.warn{color:var(--cred-partial-fg)}
.batch-recog.bad{color:var(--cred-stale-fg)}
.batch-ops{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.batch-cands{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.batch-cand{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0;min-height:44px;width:100%}
.batch-cand:hover{background:#f4f7f2}
.batch-cand[disabled]{opacity:.6;cursor:not-allowed}
.batch-cand small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
@media(max-width:650px){.batch-row{gap:10px}.batch-thumb{width:56px;height:72px}}