/* 各页自己的排版，和窄屏（< 720，手机）时所有部件怎么折。 */

/* ---------- 新建采购单、要货单：明细行 ---------- */
.items{max-width:920px;margin-top:36px}
.sec .items{margin-top:0}
.sheet.form .items,.sheet.form .total{max-width:none}
.it-head,.it-row{display:grid;grid-template-columns:minmax(0,1fr) 128px 128px 88px 120px 44px;column-gap:var(--s12);align-items:center}
.it-head{font-size:14px;line-height:22px;font-weight:600;padding-bottom:var(--s8)}
.it-head .r,.it-row .r{text-align:right}
.it-row{border-top:1px solid var(--stone);min-height:56px;padding:var(--s8) 0}
.it-row:last-child{border-bottom:1px solid var(--stone)}
.it-row .ro{font-size:14px;color:var(--olive);font-variant-numeric:tabular-nums}
.it-row .sub{font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.it-row .del{display:grid;place-items:center}
.it-row .del button{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r8)}
.it-row .del button:hover{background:var(--tint)}
.it-row .lab{display:none}
.items.req .it-head,.items.req .it-row{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr) 44px}
.total{max-width:920px;display:flex;justify-content:flex-end;align-items:baseline;gap:var(--s16);margin-top:20px;padding-right:56px}
.total span{font-size:14px;color:var(--olive)}
.total b{font:700 32px/40px var(--song);font-variant-numeric:tabular-nums}
.form-block{max-width:920px;margin-top:28px}

/* ---------- 手机优先的一步一步页（收货、质检、入库） ---------- */
.m-top{display:flex;align-items:center;height:44px;margin:0 -12px var(--s12)}
.m-back{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r8)}
.m-back:hover{background:var(--tint)}
.m-top span{font-size:16px;font-weight:600}
.m-sub{font-size:14px;color:var(--olive);margin:var(--s4) 0 var(--s24)}
.m-item{border-top:1px solid var(--stone);padding:20px 0}
.m-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s12)}
.m-name{font-size:20px;line-height:28px;font-weight:600;min-width:0}
.m-ord{font-size:14px;color:var(--olive);text-align:right}
.m-line{display:flex;gap:var(--s12);margin-top:var(--s12);align-items:flex-end}
.m-line>.field{flex:1;min-width:0}
.m-in{flex:1;min-width:0;display:flex;align-items:baseline;height:64px;border:1px solid var(--field-line);border-radius:var(--r12);padding:0 var(--s16);background:var(--field);cursor:text}
.m-in input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font:700 32px/62px var(--song);font-variant-numeric:tabular-nums;padding:0}
.m-in input::placeholder{color:var(--sage);font:400 16px/62px var(--hei)}
.m-in span{font-size:16px;color:var(--olive);flex:none;margin-left:var(--s8)}
.m-in:focus-within{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive)}
.m-note{font-size:14px;line-height:22px;margin-top:var(--s8);font-weight:600}
.m-note:empty{display:none}
.m-more{margin-top:var(--s12);display:grid;grid-template-columns:1fr 1fr;gap:var(--s12)}
.m-more .full{grid-column:1/-1}
.m-photos{margin-top:var(--s12)}
.m-item>.check{margin-top:var(--s8)}
.m-foot{border-top:1px solid var(--stone);padding-top:var(--s16)}
.m-foot .btn.big{margin-top:var(--s16)}
.m-act{margin-top:var(--s12);font-size:14px}
.sheet>.btn.big.wide{margin-top:var(--s24)}

/* 入库：每行的几项 */
.pa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s12) var(--s16);margin-top:var(--s12)}
.pa-grid .wide{grid-column:span 2}
.pa-grid .goods{grid-column:1/-1}

/* ---------- 窄屏 ---------- */
@media (max-width:719px){
  .page-title{font-size:32px;line-height:40px}
  .top{margin-bottom:var(--s24);align-items:center}
  .top .acts{width:100%;justify-content:stretch}
  .top .acts .btn{flex:1;height:48px}
  .lead{margin-top:calc(-1 * var(--s16))}
  .figures{gap:var(--s32);margin-bottom:var(--s32)}
  .form-grid{grid-template-columns:1fr;gap:var(--s16)}
  .sheet{border:0;border-radius:0;padding:0;background:none}
  .sheet.form .acts{flex-direction:row-reverse}
  .acts{justify-content:stretch}
  .acts .btn{flex:1;height:48px}
  .btn{height:44px}

  .row{margin:0 -20px;padding:0 20px;width:calc(100% + 40px)}
  .row>.dot{left:6px;top:21px}
  .row-in{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s12);padding:var(--s12) 0;min-height:0}
  .r-main{flex:1 1 0;order:1}
  .r-amt{order:2;flex:none}
  .r-meta{display:flex;order:3;flex-basis:100%;gap:0 var(--s8);flex-wrap:wrap;margin-top:2px}
  .r-meta .r-c{font-size:12px;line-height:18px}
  .r-meta .r-c:empty{display:none}
  .r-meta .r-c+.r-c:not(:empty)::before{content:"· ";color:var(--sage)}
  .r-main b{display:block;margin:0}
  .r-main span{font-size:12px;line-height:18px}

  .drawer{width:100%;border-left:0;padding:var(--s16) 20px calc(96px + env(safe-area-inset-bottom));box-shadow:none}
  .rail{grid-template-columns:32px 1fr}
  .step b{font-size:12px;line-height:18px}
  .three b{font-size:16px;line-height:24px}
  .kv{grid-template-columns:64px 1fr}
  .d-act .btn{flex:1;height:48px}

  .items{margin-top:var(--s24)}
  .it-head{display:none}
  .it-row,.items.req .it-row{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "qty price" "last sub" "del del";gap:var(--s8) var(--s12);padding:var(--s12) 0}
  .it-row>*{min-width:0}
  .it-row .c-name{grid-area:name}
  .it-row .c-qty{grid-area:qty}
  .it-row .c-price{grid-area:price}
  .it-row .c-last{grid-area:last;padding:0}
  .it-row .c-sub{grid-area:sub;padding:0}
  .it-row .c-del{grid-area:del;justify-items:start}
  .items.req .it-row{grid-template-areas:"name name" "qty note" "del del"}
  .items.req .it-row .c-note{grid-area:note}
  .it-row .inp{height:44px}
  .it-row .unit-inp span{line-height:44px}
  .it-row .lab{display:block;margin-bottom:var(--s4)}
  .it-row .c-last,.it-row .c-sub{padding:0}
  .it-row .c-last,.it-row .c-sub{text-align:left;font-size:14px;color:var(--olive)}
  .it-row .c-last .lab,.it-row .c-sub .lab{display:inline;margin-right:var(--s8)}
  .it-row .c-last:not(:has(.lab)),.it-row .c-sub:has([data-sub]:empty){display:none}
  .it-row .del button{width:auto;height:32px;padding:0 var(--s8);gap:var(--s4);display:flex;align-items:center;font-size:14px;color:var(--olive)}
  .it-row.blank{grid-template-areas:"name name"}
  .it-row.blank>:not(.c-name){display:none}
  .total{padding-right:0;justify-content:space-between}

  .pa-grid{grid-template-columns:1fr 1fr}
  .pa-grid .wide{grid-column:1/-1}
}

/* ---------- 库存：一行一样货 / 一批货（手机上折成两行） ---------- */
.srows{margin-bottom:var(--s32)}
.srow{display:grid;grid-template-columns:minmax(0,1.3fr) 140px minmax(0,2fr) 170px;column-gap:var(--s24);align-items:center;min-height:56px;padding:var(--s12) var(--s8);border-top:1px solid var(--stone);cursor:pointer}
.srow:last-child{border-bottom:1px solid var(--stone)}
.srow.head{min-height:34px;padding-top:0;padding-bottom:0;background:var(--tint);border:0;border-radius:var(--r8);cursor:default;font-size:12px;line-height:18px;color:var(--olive)}
.srow.head:hover{background:var(--tint)}
.srow.head+.srow{border-top:0}
.srow.head .r{text-align:right}
.srow:hover{background:var(--tint)}
.s-main{min-width:0}
.s-main b{display:block;font-size:16px;line-height:24px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-main span{display:block;font-size:12px;line-height:18px;color:var(--olive)}
.s-qty{text-align:right;font:700 20px/28px var(--song);font-variant-numeric:tabular-nums;white-space:nowrap}
.s-qty span{display:block;font:400 12px/18px var(--hei);color:var(--olive)}
.s-side{font-size:14px;line-height:22px;color:var(--olive);text-align:right}
.s-side b{color:var(--ink);font-weight:600}
.s-side .t12{display:block}
.m-only{display:none}
.more-f{display:contents}

/* 按货架：地点 → 区 → 一个货架一张卡，卡里一层一行 */
.zone{margin-bottom:var(--s32)}
.zone>h3{margin:0 0 var(--s12);font-size:14px;line-height:22px;font-weight:600;display:flex;gap:var(--s8);align-items:baseline;flex-wrap:wrap}
.zone>h3 span{font-weight:400;color:var(--olive);font-size:12px}
.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s16)}
.shelf{border:1px solid var(--stone);border-radius:var(--r12);padding:var(--s4) var(--s16);background:var(--paper)}
.sh-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s8);padding:var(--s8) 0;font-size:16px}
.sh-head b{font-weight:600}
.sh-head span{font-size:12px;color:var(--olive)}
.layer{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s12);padding:var(--s8) 0;border-top:1px solid var(--stone)}
.ly-k b{display:block;font-size:14px;line-height:22px}
.ly-k span{display:block;font-size:12px;line-height:18px;color:var(--olive)}
.ly-v{min-width:0;font-size:14px;line-height:22px}
.ly-v .faint{line-height:22px}
.cell+.cell{margin-top:var(--s8)}
.cell b{font-weight:600}
.cell .t12{display:block;color:var(--olive)}
.layer.flat{grid-template-columns:minmax(0,1fr)}

/* ---------- 窄屏：乙批各页 ---------- */
@media (max-width:719px){
  .filters{gap:var(--s8) var(--s16)}
  .filters .grow{flex-basis:100%;max-width:none}
  .filters .inp{height:40px;font-size:16px}
  .filters .field{flex-wrap:wrap}
  .views .seg{gap:20px}
  .srow.head{display:none}
  .srow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main qty" "where where" "side side";row-gap:var(--s8);column-gap:var(--s12);padding:var(--s12) 0}
  .s-main{grid-area:main}
  .s-qty{grid-area:qty}
  .s-where{grid-area:where}
  .s-where:empty{display:none}
  .s-side{grid-area:side;text-align:left;font-size:12px;line-height:18px}
  .s-side .t12{display:inline;margin-left:var(--s8)}
  .m-only{display:inline;align-self:flex-start}
  .more-f:not(.open){display:none}
  .shelves{grid-template-columns:minmax(0,1fr)}
  .layer{grid-template-columns:88px minmax(0,1fr)}
}

/* 操作记录：一行三格 */
.srow.audit{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 140px;cursor:default}
.srow.audit .s-main b{white-space:normal}

/* 选一批货（折让单） */
.picked{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s12);border:1px solid var(--stone);border-radius:var(--r8);padding:var(--s8) var(--s12);background:var(--paper)}
.picked .t12,.pick .t12{display:block}
.pick-list{border:1px solid var(--stone);border-radius:var(--r8);margin-top:var(--s8);max-height:360px;overflow:auto;background:var(--paper)}
.pick{display:block;width:100%;text-align:left;padding:var(--s8) var(--s12);border-top:1px solid var(--stone)}
.pick:first-child{border-top:0}
.pick:hover{background:var(--tint)}

/* 商品表单：分组，点开再填 */
.fold{margin-top:var(--s24);border-top:1px solid var(--stone)}
.fold>summary{list-style:none;cursor:pointer;padding:var(--s16) 0;font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);transform:rotate(45deg);margin-right:6px}
.fold[open]>summary::after{transform:rotate(-135deg)}
.fold>.stack{padding-bottom:var(--s16)}
.half{max-width:320px}

/* 仓库货架：树 */
.tree{margin-bottom:40px}
.node{display:flex;justify-content:space-between;align-items:center;gap:var(--s16);min-height:44px;padding:var(--s8) 0;border-top:1px solid var(--stone)}
.node.site{border-top:0;padding-top:0}
.node.site h2{margin:0;font:900 20px/28px var(--song)}
.n-main{display:flex;align-items:baseline;gap:var(--s8);flex-wrap:wrap;min-width:0}
.n-main .code{font-size:16px}
.node.lv1{padding-left:var(--s24)}
.node.lv2{padding-left:48px}
.node.lv2 .code{font-size:14px}
.node.lv2 .n-name{color:var(--olive)}
.node.off .n-main{color:var(--sage)}
.n-acts{display:flex;gap:var(--s16);font-size:14px;flex:none}
.zone-box{border:1px solid var(--stone);border-radius:var(--r12);padding:0 var(--s16);margin-top:var(--s12);background:var(--paper)}
.zone-box>.node:first-child{border-top:0}

/* 角色权限表 */
.matrix-wrap{overflow-x:auto}
.matrix th.c,.matrix td.c{text-align:center;width:72px}
.matrix td{height:40px}
.matrix input[type=checkbox]{width:20px;height:20px;accent-color:var(--olive);margin:0}
.matrix tr.area td{font-size:12px;color:var(--olive);padding-top:var(--s16);height:auto;border-top:0}
@media (max-width:719px){
  .srow.audit{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main side" "where where"}
  .node{flex-wrap:wrap;gap:var(--s4) var(--s16)}
  .n-acts{width:100%;gap:var(--s16);flex-wrap:wrap}
  .node.lv1{padding-left:var(--s12)}
  .node.lv2{padding-left:var(--s24)}
  .zone-box{padding:0 var(--s12)}
  .matrix th.c,.matrix td.c{width:auto;padding-left:2px;padding-right:2px}
  .matrix th,.matrix td{font-size:12px;line-height:18px}
  .matrix td:first-child{min-width:104px}
  .half,.inp.half{max-width:none}
}
.scopes{margin-top:40px}
.scopes .field{margin-top:var(--s16)}

/* ---------- 钱：对账单（屏幕上一页，打印时只留这张纸） ---------- */
.paper-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s16);flex-wrap:wrap;margin-bottom:var(--s24)}
.paper-head .who-to{text-align:right}
.tbl.stmt td{vertical-align:top}
@media (max-width:719px){
  .paper-head .who-to{text-align:left}
  .tbl.stmt th:nth-child(2),.tbl.stmt td:nth-child(2){display:none}
  .tbl.stmt td,.tbl.stmt th{padding-left:var(--s4);padding-right:var(--s4);font-size:12px;line-height:18px}
}
@media print{
  .side,.bar,.tabs,.no-print,.toast{display:none!important}
  .shell{display:block}
  .main{padding:0;border:0;min-height:0}
  body{background:#fff}
  .sheet{border:0;padding:0;background:none;max-width:none}
  .paper .ref{text-decoration:none}
  .tbl.stmt tr{break-inside:avoid}
}

/* ---------- 盘点：一个货架一屏（手机上拿着走着录） ---------- */
.ct-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s8);align-items:center;margin-bottom:var(--s8)}
.ct-bin{margin-top:var(--s16)}
.ct-bin>h2{margin:0;padding:var(--s8) 0;font-size:16px;line-height:24px;font-weight:600;display:flex;gap:var(--s8);align-items:baseline}
.ct-bin>h2 span{font-size:12px;color:var(--olive);font-weight:400}
.ct-empty{border-top:1px solid var(--stone);padding:var(--s12) 0;margin:0}
.ct-who{margin-top:var(--s4)}
.ct-extra{border-top:1px solid var(--stone);padding:var(--s16) 0}
.ct-extra>.m-item{border-top:0;padding-top:0}
.s-side .s-act{margin-left:var(--s8)}

/* ---------- 报表 ---------- */
.tbl.rpt td{vertical-align:top}
.tbl.rpt td .t12{display:block}
.tbl.rpt tr.rp-more td{height:auto;background:var(--tint);font-size:14px;padding:var(--s8) var(--s12)}
.tbl.rpt tr.rp-total td{font-weight:600}
.rp-h{margin:var(--s32) 0 var(--s8);font-size:16px;line-height:24px;font-weight:600}
@media (max-width:719px){
  .tbl.rpt th,.tbl.rpt td{font-size:12px;line-height:18px;padding-left:var(--s4);padding-right:var(--s4)}
  .tbl.rpt td.name{font-size:14px;line-height:20px}
  .tbl.rpt .m-hide{display:none}
  .paper{overflow-x:auto}
}
@media print{
  .tbl.rpt tr{break-inside:avoid}
}

/* ---------- 经营总览：大字数字（能点进去）、一行几段的小字、开张前要做的几件事 ---------- */
.figures.biz{gap:var(--s24) 48px;margin-bottom:var(--s16)}
.figures .fig{display:block;min-width:112px}
.figures .fig:hover .fig-l{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone)}
.fig-s{font-size:12px;line-height:18px;color:var(--olive);margin-top:2px}
.kv-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4) var(--s16);font-size:14px;color:var(--olive);padding:var(--s8) 0;border-top:1px solid var(--stone)}
.kv-line:last-child{border-bottom:1px solid var(--stone)}
.kv-line>span{flex:0 0 64px;font-size:12px}
.kv-line a b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.kv-line a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone)}
.rp-h span{margin-left:var(--s8);font-weight:400}
.steps-list{list-style:none;margin:0;padding:0}
.steps-list a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s12);align-items:center;padding:var(--s12) 0;border-top:1px solid var(--stone)}
.steps-list li:last-child a{border-bottom:1px solid var(--stone)}
.steps-list a:hover{background:var(--tint)}
.sl-mark{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--olive);display:grid;place-items:center;font-size:14px;font-weight:600}
.sl-mark svg{width:16px;height:16px}
.steps-list li.done .sl-mark{background:var(--olive);border-color:var(--olive);color:var(--rice)}
.sl-text b{display:block;font-size:16px;line-height:24px;font-weight:600}
.sl-text span{display:block;font-size:12px;line-height:18px;color:var(--olive)}
.steps-list li.done .sl-text b{font-weight:400;color:var(--olive)}
.sl-go{font-size:14px;color:var(--olive);white-space:nowrap}
.more-g{margin-bottom:var(--s24)}
.more-g>h2{font-size:12px;line-height:18px;font-weight:400;color:var(--olive)}

/* ---------- 提醒 ---------- */
.rem-row{display:grid;grid-template-columns:minmax(0,1fr) 210px auto;gap:var(--s12);align-items:center;min-height:56px;border-top:1px solid var(--stone);padding:var(--s8) 0}
.group.rem .rem-row:last-child{border-bottom:1px solid var(--stone)}
.rem-main{min-width:0}
.rem-main b{display:block;font-size:16px;line-height:24px;font-weight:600}
.rem-main span{display:block;font-size:12px;line-height:18px;color:var(--olive);overflow-wrap:anywhere}
.rem-main:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stone)}
.rem-when{font-size:14px;color:var(--olive)}
.rem-when.warn{color:var(--walnut);font-weight:600}
.rem-acts{display:flex;gap:var(--s8);justify-content:flex-end;flex-wrap:wrap}
.rem-acts .btn{height:36px}
.rules .rule{margin-top:var(--s16)}

/* ---------- 月结：检查清单 ---------- */
.checks{border-top:1px solid var(--stone)}
.ck{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s12);padding:var(--s12) 0;border-bottom:1px solid var(--stone)}
.ck-mark{display:flex;align-items:flex-start;padding-top:2px;color:var(--olive)}
.ck-mark svg{width:20px;height:20px}
.ck-body b{font-weight:600}
.ck.bad .ck-body>b{color:var(--walnut)}
.ck-items{margin:var(--s4) 0;padding-left:var(--s16);font-size:14px}
.ck-items li{margin:2px 0}

/* ---------- 货架标签：屏幕上预览，打印时 A4 一页两列六行，沿虚线剪开 ---------- */
.label-page{display:grid;grid-template-columns:repeat(2,95mm);grid-auto-rows:44mm;margin-bottom:var(--s24)}
.shelf-label{border:1px dashed var(--sage);margin:0 -1px -1px 0;padding:4mm 6mm;display:flex;flex-direction:column;justify-content:center;min-width:0;background:var(--paper)}
.sl-code{font:900 13mm/16mm var(--song);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-name{font-size:16px;line-height:24px;margin-top:var(--s4)}
.sl-temp{font-size:14px;line-height:22px;color:var(--olive)}

@media (max-width:719px){
  .group.rem>h2,.group.setup>h2{flex-wrap:wrap;row-gap:0}
  .group.rem>h2 span,.group.setup>h2 span{flex-basis:100%}
  .figures.biz{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16) var(--s16)}
  .figures.biz .fig-n{font-size:20px;line-height:28px}
  .kv-line>span{flex-basis:100%}
  .rem-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main when" "acts acts";row-gap:var(--s8)}
  .rem-main{grid-area:main}
  .rem-when{grid-area:when;font-size:12px;text-align:right}
  .rem-acts{grid-area:acts;justify-content:flex-start}
  .rem-acts:empty{display:none}
  .ck{grid-template-columns:40px minmax(0,1fr)}
  .label-page{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .shelf-label{min-height:120px}
}
@media print{
  @page{size:A4;margin:10mm}
  .label-page{grid-template-columns:repeat(2,95mm);grid-auto-rows:44mm;margin:0;break-after:page}
  .label-page:last-child{break-after:auto}
  .shelf-label{background:none;min-height:0}
}