/* 共用部件：页头、数字、分组清单行、表格、抽屉、弹层、提示条、小标签、空状态、照片、选择框、进度条。 */

/* ---------- 页头 ---------- */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s16);margin-bottom:var(--s32);flex-wrap:wrap}
.top .acts{margin-top:0}
.lead{font-size:14px;color:var(--olive);margin:calc(-1 * var(--s24)) 0 var(--s32)}
.sheet{max-width:1112px;background:var(--paper);border:1px solid var(--stone);border-radius:var(--r16);padding:var(--s32) 36px 40px}
.sheet.narrow{max-width:640px}

/* ---------- 大数字 ---------- */
.figures{display:flex;gap:64px;margin-bottom:40px;flex-wrap:wrap}
.fig-n{font:700 32px/40px var(--song);display:flex;align-items:center;gap:var(--s8);font-variant-numeric:tabular-nums}
.fig-l{font-size:14px;color:var(--olive);margin-top:2px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none;display:inline-block}

/* ---------- 分组清单行（采购总览、要货单、收货清单等） ---------- */
.group{margin-bottom:var(--s32)}
.group>h2{margin:0 0 var(--s8);font-size:16px;line-height:24px;font-weight:600;display:flex;gap:var(--s8);align-items:baseline}
.group>h2 span{font-size:12px;color:var(--olive);font-weight:400}
.group .more{display:block;padding:var(--s12) 0;font-size:14px}
.row{position:relative;display:block;margin:0 -28px;padding:0 28px;border-radius:var(--r8);cursor:pointer;width:calc(100% + 56px);text-align:left}
.row:hover{background:var(--tint)}
.row>.dot{position:absolute;left:9px;top:23px}
.row-in{display:grid;grid-template-columns:minmax(260px,1.8fr) minmax(150px,1fr) 130px 120px 110px;align-items:center;column-gap:var(--s16);min-height:56px;border-top:1px solid var(--stone)}
.group .row:last-of-type .row-in{border-bottom:1px solid var(--stone)}
.r-meta{display:contents}
.r-main{font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.r-main b{font-weight:600;margin-right:var(--s12)}
.r-main span{color:var(--olive);font-size:14px}
.r-c{font-size:14px;color:var(--olive);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.r-c.do{font-weight:600;color:var(--ink)}
.r-amt{text-align:right;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 一列一行的大清单（手机上收货、质检、入库选单用；电脑上也一样） */
.list-row{display:block;width:100%;text-align:left;border-top:1px solid var(--stone);padding:var(--s16) 0;cursor:pointer;position:relative}
.list-row:last-child{border-bottom:1px solid var(--stone)}
.list-row:hover{background:var(--tint)}
.list-row .lr-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s12)}
.list-row .lr-name{font-size:20px;line-height:28px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .lr-side{font-size:14px;color:var(--olive);white-space:nowrap;flex:none}
.list-row .lr-sub{font-size:14px;color:var(--olive);margin-top:var(--s4)}
.list-row .lr-sub b{color:var(--ink);font-weight:600}

/* ---------- 表格 ---------- */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-size:12px;line-height:18px;font-weight:400;color:var(--olive);text-align:left;padding:var(--s8);white-space:nowrap;background:var(--tint)}
.tbl th:first-child{border-radius:var(--r8) 0 0 var(--r8)}
.tbl th:last-child{border-radius:0 var(--r8) var(--r8) 0}
.tbl td{height:44px;border-top:1px solid var(--stone);font-size:14px;padding:var(--s8);vertical-align:middle}
.tbl thead+tbody tr:first-child td{border-top:0}
.tbl tbody tr:last-child td{border-bottom:1px solid var(--stone)}
.tbl th:first-child,.tbl td:first-child{padding-left:var(--s12)}
.tbl th:last-child,.tbl td:last-child{padding-right:var(--s12)}
.tbl .r{text-align:right}
.tbl td.name{font-size:16px}
.tbl td .t12{display:block}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--tint)}
.tbl .less{font-weight:600}

/* ---------- 抽屉（右侧打开一张单；手机上铺满） ---------- */
.drawer-back{position:fixed;inset:0;z-index:26}
.drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100%;background:var(--paper);border-left:1px solid var(--stone);box-shadow:-24px 0 48px var(--shade);padding:var(--s32) 36px 96px;overflow:auto;z-index:27;-webkit-overflow-scrolling:touch}
.d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s12)}
.d-sup{font:900 20px/28px var(--song)}
.d-sub{font-size:12px;line-height:18px;color:var(--olive);margin-top:var(--s4)}
.d-sec{margin-top:var(--s32)}
.d-sec>h3{margin:0 0 var(--s8);font-size:12px;line-height:18px;font-weight:400;color:var(--olive)}
.d-act{margin-top:var(--s32);display:flex;gap:var(--s8);flex-wrap:wrap;align-items:center}

/* 进度：货、钱两条线 */
.rail{display:grid;grid-template-columns:44px 1fr;margin-top:28px}
.rail-k{font:900 20px/28px var(--song)}
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.step{position:relative;padding-top:22px;min-width:0}
.step::before{content:"";position:absolute;top:4px;left:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--stone);background:var(--paper)}
.step::after{content:"";position:absolute;top:9px;left:16px;right:4px;height:2px;background:var(--stone)}
.step:last-child::after{display:none}
.step.done::before{background:var(--olive);border-color:var(--olive)}
.step.now::before{border-color:var(--olive)}
.step.joined::after{background:var(--olive)}
.step b{display:block;font-size:14px;line-height:22px;font-weight:600}
.step span{display:block;font-size:12px;line-height:18px;color:var(--olive);padding-right:var(--s8)}
.step.todo b{font-weight:400;color:var(--olive)}

/* 订的、收的、付的三个数 */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s12);padding-top:var(--s16);border-top:1px solid var(--ink)}
.three span{display:block;font-size:12px;line-height:18px;color:var(--olive)}
.three b{display:block;font:700 20px/28px var(--song);font-variant-numeric:tabular-nums}
.three b.word{font:600 16px/28px var(--hei)}
.kv{display:grid;grid-template-columns:72px 1fr;row-gap:var(--s12);column-gap:var(--s12);margin:0}
.kv dt{font-size:12px;line-height:22px;color:var(--olive)}
.kv dd{margin:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
.docs{margin:0;padding:0;list-style:none}
.docs li{display:flex;justify-content:space-between;gap:var(--s12);padding:var(--s8) 0;border-top:1px solid var(--stone);font-size:14px}
.docs li:last-child{border-bottom:1px solid var(--stone)}
.docs li span{color:var(--olive)}

/* ---------- 弹层确认 ---------- */
.dlg-back{position:fixed;inset:0;background:rgba(62,64,48,.32);z-index:40;display:grid;place-items:center;padding:var(--s16)}
.dlg{background:var(--paper);border-radius:var(--r16);padding:var(--s24);width:420px;max-width:100%;box-shadow:0 24px 48px var(--shade)}
.dlg h2{margin:0 0 var(--s8);font:900 20px/28px var(--song)}
.dlg p{margin:0 0 var(--s16);color:var(--olive)}
.dlg .acts{margin-top:var(--s24)}
.dlg.photo{width:auto;padding:var(--s8);background:var(--board)}
.dlg.photo img{display:block;max-width:min(92vw,1000px);max-height:84vh;border-radius:var(--r8)}

/* ---------- 提示 ---------- */
.toast{position:fixed;left:50%;bottom:var(--s32);transform:translateX(-50%);background:var(--board);color:var(--rice);padding:var(--s12) var(--s24);border-radius:var(--r12);font-size:14px;z-index:60;max-width:calc(100% - 32px);box-shadow:0 12px 32px var(--shade)}
.notice{border:1px solid var(--stone);border-radius:var(--r8);padding:var(--s12) var(--s16);font-size:14px;line-height:22px;background:var(--paper);margin:var(--s16) 0}
.notice.err{border-color:var(--walnut);color:var(--walnut);font-weight:600}
.notice b{font-weight:600}
.tag{display:inline-block;font-size:12px;line-height:18px;padding:1px var(--s8);border:1px solid var(--stone);border-radius:var(--r8);color:var(--olive);white-space:nowrap;vertical-align:middle;font-weight:400}
.tag.solid{background:var(--tint);border-color:transparent;color:var(--ink)}

/* ---------- 空、加载、出错 ---------- */
.state{padding:56px 0;text-align:center;color:var(--olive)}
.state b{display:block;font-size:16px;line-height:24px;color:var(--ink);font-weight:600;margin-bottom:var(--s4)}
.state .btn{margin-top:var(--s16)}
.loading{padding:56px 0;text-align:center;color:var(--sage)}

/* ---------- 照片 ---------- */
.photos{display:flex;gap:var(--s8);flex-wrap:wrap;align-items:center}
.thumb{width:56px;height:56px;border-radius:var(--r8);background:var(--tint);display:grid;place-items:center;overflow:hidden;position:relative;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:var(--board);color:var(--rice);display:grid;place-items:center}
.thumb.wait{color:var(--olive);font-size:12px}
.cam{width:56px;height:56px;border:1px dashed var(--stone);border-radius:var(--r8);display:grid;place-items:center;color:var(--olive);cursor:pointer;flex:none;position:relative}
.cam:hover{border-color:var(--olive)}
.cam input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cam.big{width:64px;height:64px;border-radius:var(--r12);border-style:solid;background:var(--paper)}
.photos:empty{display:none}

/* ---------- 打字找（选商品、选供货人） ---------- */
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--stone);border-radius:var(--r8);box-shadow:0 12px 32px var(--shade);max-height:280px;overflow:auto;z-index:35;min-width:240px}
.combo-list button{display:flex;justify-content:space-between;gap:var(--s12);width:100%;text-align:left;padding:var(--s8) var(--s12);font-size:16px;line-height:24px}
.combo-list button span{font-size:12px;color:var(--olive);white-space:nowrap}
.combo-list button.on,.combo-list button:hover{background:var(--tint)}
.combo-list .none{padding:var(--s12);color:var(--olive);font-size:14px}

/* ---------- 做完了 ---------- */
.finish{padding-top:72px;text-align:center}
.ring{width:72px;height:72px;border-radius:50%;border:2px solid var(--olive);display:grid;place-items:center;margin:0 auto var(--s24)}
.finish p{margin:var(--s8) 0 0;font-size:14px;color:var(--olive)}
.finish .acts{justify-content:center}

/* ---------- 单号、批次号、货架号 ---------- */
.ref{font:inherit;color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px;cursor:pointer}
.ref:hover{text-decoration-color:var(--olive)}
.code{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.chip{display:inline-flex;align-items:baseline;gap:var(--s4);padding:1px var(--s8);border-radius:var(--r8);background:var(--tint);font-size:14px;line-height:22px;white-space:nowrap}
.chip .code{font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8)}
.warn{color:var(--walnut);font-weight:600}
.d-back{display:inline-flex;align-items:center;gap:var(--s4);height:32px;margin:calc(-1 * var(--s8)) 0 var(--s12) -6px;padding-right:var(--s8);font-size:14px;color:var(--olive);border-radius:var(--r8)}
.d-back:hover{background:var(--tint)}
.d-back svg{width:18px;height:18px}
.docs li .loc{color:var(--ink)}

/* ---------- 清单页顶上的找和筛 ---------- */
/* 换看法（按商品 / 按货架…）：页签，底下一条线，选中的压一道橄榄绿 */
.views{margin-bottom:var(--s16);border-bottom:1px solid var(--stone)}
.views .seg{gap:var(--s24);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.views .seg button{height:44px;padding:0;border:0;border-radius:0;background:none;font-size:16px;color:var(--olive);white-space:nowrap;flex:none}
.views .seg button:hover{color:var(--ink)}
.views .seg button.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--olive)}
/* 找和筛：一行工具，是配角——名字小字放左边、框矮一档、选项不带框不带圆点，选中的垫一层浅底 */
.filters{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s24);align-items:center;margin-bottom:var(--s16)}
.filters .field{display:flex;align-items:center;gap:var(--s8);min-width:0}
.filters .field>label:not(.m-in):not(.check){margin:0;font-size:12px;line-height:18px;font-weight:400;color:var(--olive);white-space:nowrap;flex:none}
.filters .inp{height:36px;font-size:14px}
.filters .field>.inp,.filters .field>.sel,.filters .field>.combo{width:auto;min-width:148px}
.filters .grow{flex:1 1 240px;max-width:340px}
.filters .grow>.inp,.filters .grow>.combo{flex:1;min-width:0}
.filters .sel::after{top:13px}
.filters .seg{gap:2px}
.filters .seg button{height:32px;padding:0 var(--s12);border:0;background:none;font-size:14px;color:var(--olive)}
.filters .seg button::before{content:none}
.filters .seg button:hover{background:var(--tint)}
.filters .seg button.on{background:var(--tint);color:var(--ink);font-weight:600;box-shadow:none}