/* ============================================================
 * 页面专属样式（网页管理端 · 第 54 轮）
 * 只放「某个页面独有」的形态；能进 components.css 的一律进那边
 * ============================================================ */

/* ---------- 工作台 ---------- */
.dash-hero {
  /* 头图配色与小程序一致：深绿 → 品牌绿。原先尾色是后台蓝 #3b82f6 */
  background: linear-gradient(120deg, #06281A 0%, #0B4A2E 55%, #07C160 140%);
  border-radius: var(--r-xl);
  padding: 22px 26px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 26px;
  box-shadow: var(--sh-2);
}
.dash-hero .hl { flex: 1; min-width: 0; }
.dash-hero .ht { font-size: var(--fs-lg); font-weight: 600; }
.dash-hero .hs { font-size: var(--fs-sm); color: rgba(255, 255, 255, .68); margin-top: 5px; line-height: 1.7; }
.dash-hero .hstat { display: flex; gap: 30px; }
.dash-hero .hstat .hi { text-align: right; }
.dash-hero .hstat .hn { font-size: var(--fs-big); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-hero .hstat .hu { font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); margin-top: 3px; }

.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.todo-i {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--t-fast);
  background: #fff;
}
.todo-i:hover { border-color: var(--brand-line); background: var(--brand-lt); }
.todo-i .tn { font-size: var(--fs-sm); color: var(--t3); display: flex; align-items: center; gap: 6px; }
.todo-i .tnum { font-size: var(--fs-xl); font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.todo-i .tz { color: var(--t4); }
.todo-i.has .tnum { color: var(--danger-d); }
.todo-i.has { border-color: var(--danger-line); background: var(--danger-lt); }

.mini-list { display: flex; flex-direction: column; }
.mini-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: var(--fs);
}
.mini-row:last-child { border-bottom: 0; }
.mini-row .mno { font-family: var(--mono); font-size: var(--fs-sm); color: var(--t2); white-space: nowrap; }
.mini-row .mtx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2); }
.mini-row .mam { font-variant-numeric: tabular-nums; color: var(--t1); font-weight: 600; }
.mini-row .mat { font-size: var(--fs-xs); color: var(--t4); white-space: nowrap; }

/* ---------- 库存台账 ---------- */
.stock-wrap { position: relative; }
table.tb.stock th, table.tb.stock td { white-space: nowrap; }
table.tb.stock .fz {
  position: sticky; left: 0; z-index: 2;
  background: #fff;
  border-right: 1px solid var(--line);
  min-width: 168px;
}
table.tb.stock th.fz { z-index: 3; background: var(--bg-thead); }
table.tb.stock tbody tr:hover .fz { background: var(--bg-row-hover); }
table.tb.stock tr.grp .fz { background: #f7f8fa; }
table.tb.stock .sz { min-width: 62px; }
table.tb.stock .sz.z { color: var(--t4); font-weight: 400; }
table.tb.stock .tot { background: #fbfcfd; font-weight: 600; }
table.tb.stock .tot.fz { background: #f7f8fa; }
table.tb.stock .bar-cell { position: relative; }
table.tb.stock .cell-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--brand-lt2);
}

/* 库存模式标记 */
.mode-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: var(--fs-xs); margin-left: 6px;
}
.mode-hold { background: var(--brand-lt); color: var(--brand-d); }
.mode-direct { background: var(--warn-lt); color: var(--warn-d); }

/* ---------- 登记页 ---------- */
.entry-tabs { margin-bottom: 16px; }

/* 尺码网格：把 14 个尺码一屏摊开，键盘一路 Tab 填完
   —— 这就是「网页端录单」相对于手机的价值所在，所以格子要密、要能横着走 */
.sz-grid { display: grid; gap: 6px; align-items: center; }
.sz-grid .sg-l { font-size: var(--fs-sm); color: var(--t3); white-space: nowrap; }
.sz-grid .sg-h { font-size: var(--fs-sm); color: var(--t4); text-align: center; }
.sz-grid .inp { text-align: center; padding: 7px 4px; min-width: 0; }
/* 数字框的上下箭头在密集网格里只会误点，关掉 */
.sz-grid .inp::-webkit-outer-spin-button,
.sz-grid .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sz-grid .inp[type=number] { -moz-appearance: textfield; appearance: textfield; }
.line-item {
  display: grid;
  grid-template-columns: 1fr 92px 92px 110px 96px 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.line-head {
  display: grid;
  grid-template-columns: 1fr 92px 92px 110px 96px 34px;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--t4);
  margin-bottom: 6px;
}
.line-item .rm {
  width: 30px; height: var(--h-ctl); border: 0; border-radius: var(--r-sm);
  background: var(--bg-muted); color: var(--t4); cursor: pointer; font-size: 15px; line-height: 1;
}
.line-item .rm:hover { background: var(--danger-lt); color: var(--danger-d); }
.sum-bar {
  display: flex; align-items: center; gap: 22px;
  margin-top: 14px; padding: 12px 16px;
  background: var(--bg-muted); border-radius: var(--r);
  font-size: var(--fs);
}
.sum-bar .sv { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.sum-bar .spacer { flex: 1; }

/* ---------- 单据列表 ---------- */
.doc-type {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600;
  background: var(--gray-lt); color: var(--t2);
}
.doc-type.purchase { background: var(--brand-lt); color: var(--brand-d); }
.doc-type.ship { background: var(--warn-lt); color: var(--warn-d); }
.doc-type.sale { background: var(--ok-lt); color: var(--ok-d); }
.doc-type.adjust { background: var(--info-lt); color: var(--info-d); }
.doc-type.return { background: var(--pink-lt); color: var(--pink-d); }
.row-void td { opacity: .55; text-decoration: line-through; text-decoration-color: var(--t4); }
.row-void td .pill, .row-void td .btn, .row-void td .doc-type { text-decoration: none; opacity: .8; }

/* ---------- 报表 ---------- */
.rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.merge-tb { font-size: var(--fs-sm); }
.merge-tb .grp-td { background: #f7f8fa; font-weight: 600; }
.stack-bar { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: var(--bg-muted); }
.stack-bar .sb { transition: width var(--t-slow); }

/* ---------- 全国总览 ---------- */
.ov-rank { display: flex; align-items: center; gap: 12px; }
.ov-rank .rk {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--bg-muted); color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600;
}
/* 排行榜前三名的角标：金银铜是**排行语义**，不参与品牌色，只把琥珀统一到小程序色板 */
.ov-rank .rk.r1 { background: #FFF5E6; color: #A55C00; }
.ov-rank .rk.r2 { background: #F2F3F5; color: #475569; }
.ov-rank .rk.r3 { background: #FFF4E8; color: #A55C00; }
.ov-broken { color: var(--warn-d); }

/* ---------- 设置 ---------- */
.set-nav { display: flex; flex-direction: column; gap: 2px; }
.set-nav .sn {
  padding: 9px 13px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs); color: var(--t2); transition: all var(--t-fast);
}
.set-nav .sn:hover { background: var(--bg-muted); }
.set-nav .sn.on { background: var(--brand-lt); color: var(--brand-d); font-weight: 600; }
.backup-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: var(--fs);
}
.backup-row:last-child { border-bottom: 0; }
.backup-row .bn { flex: 1; font-family: var(--mono); font-size: var(--fs-sm); color: var(--t2); }

/* ---------- 打印预览 ---------- */
.print-area {
  background: #fff;
  padding: 26px 30px;
  font-size: var(--fs);
  color: #000;
}
.print-area h2 { margin: 0 0 4px; font-size: var(--fs-xl); }
.print-area .pmeta { font-size: var(--fs-sm); color: #555; margin-bottom: 16px; }
.print-area table { width: 100%; border-collapse: collapse; }
.print-area th, .print-area td { border: 1px solid #ccc; padding: 6px 8px; font-size: var(--fs-sm); }
.print-area th { background: #f5f5f5; }

@media print {
  .side, .top, .no-print { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .card { box-shadow: none !important; }
}

/* ============================================================
 * 打印中心（第 56 轮）
 * ============================================================
 * 纸张与单据本身的样式在 print.css（那份整份黑白，与界面配色互不干扰）；
 * 这里只管**这一页的界面**：设置条、纸样容器、底部操作条。
 * ============================================================ */

/* ---------- 设置条 ---------- */
.pr-bar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; }
.pr-bar-g { display: flex; flex-direction: column; gap: 6px; }
.pr-bar-g > label { font-size: var(--fs-sm); color: var(--t3); }

/* 联次方案：芯片式按钮，两行字（名称 + 联次），一眼看清选的是哪套 */
.chip {
  display: inline-flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; cursor: pointer; font-family: inherit;
  transition: all var(--t-fast);
}
.chip b { font-size: var(--fs); color: var(--t1); font-weight: 600; }
.chip span { font-size: var(--fs-xs); color: var(--t4); }
.chip:hover { border-color: var(--brand-line); background: var(--brand-lt); }
.chip.on {
  border-color: var(--brand); background: var(--brand-lt);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, .12);
}
.chip.on b, .chip.on span { color: var(--brand-d); }

/* ---------- 纸样 ---------- */
.pv-stage {
  background: #e9ebef;                 /* 灰台面：白纸放上去才看得出边界 */
  border-radius: var(--r);
  padding: 13px;
  overflow: auto;
  max-height: 720px;
}
.pv-zoom { position: relative; margin: 0 auto; }
/* ⚠️ 缩放必须走 transform：直接改 width 会让纸张内部的 pt 字号跟着变，
      预览就不再是「纸上真实版式」了。 */
.pv-scale { position: absolute; top: 0; left: 0; transform-origin: top left; }
.pv-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; font-size: var(--fs-sm); color: var(--t3);
}
.pv-empty { padding: 64px 20px; text-align: center; color: var(--t4); }
.pv-empty svg { opacity: .5; }

/* ---------- 底部操作条（滚动时钉在窗口底） ---------- */
.pr-dock {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  margin-top: 16px; padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 -4px 18px rgba(16, 24, 40, .08);
}
.pr-statbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-stat { display: flex; align-items: baseline; gap: 2px; font-size: var(--fs); color: var(--t2); }
.pr-stat b { font-size: var(--fs-lg); font-weight: 700; color: var(--t1); }
.pr-stat b.big { font-size: var(--fs-num); color: var(--brand-d); }
.pr-stat i { font-style: normal; color: var(--t4); margin: 0 5px; }
.pr-stat-note { font-size: var(--fs-sm); color: var(--t3); }

/* ---------- 打印设置的控件（第 57 轮从 print.css 迁来）----------
 * ⚠️ 为什么搬过来：print.css 的约定是「这个文件里不允许出现第二个颜色」
 *    —— 那是**纸上的东西**（白纸黑字）。而下面这些是**屏幕上的控件**
 *    （选中态要用品牌绿），两者混在一个文件里，那条约定就名存实亡了。
 *    所以：纸归 print.css（只有中性灰），控件归 pages.css（可以用品牌色）。
 */
/* ---------- 四、设置弹窗里的「联次方案」----------- */
.pr-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pr-preset {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--t-fast);
}
.pr-preset:hover { border-color: var(--brand-line); background: var(--brand-lt); }
.pr-preset b { font-size: var(--fs); color: var(--t1); }
.pr-preset span { font-size: var(--fs-xs); color: var(--t4); }
.pr-preset em {
  position: absolute; top: 7px; right: 8px;
  font-style: normal; font-size: var(--fs-xs);
  color: var(--brand-d); font-weight: 600;
}
.pr-preset.on {
  border-color: var(--brand);
  background: var(--brand-lt);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, .12);
}
.pr-preset.on b { color: var(--brand-d); }

.pr-sheets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-sheet { display: flex; align-items: center; gap: 5px; }
.pr-sheet-no {
  font-size: var(--fs-sm);
  color: var(--t3);
  white-space: nowrap;
}
.pr-sheet .inp { width: 118px; }

.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.pr-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* 出纸方式只有三项（复写纸 / 裁开 / 一联一页），三列比四列更舒展 */
.pr-presets-3 { grid-template-columns: repeat(3, 1fr); }

/* 纸张：一列一个规格，显示「名字 + 毫米数」——毫米数是选纸的唯一依据 */
.pr-papers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pr-paper {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: all var(--t-fast);
}
.pr-paper:hover { border-color: var(--brand-line); background: var(--brand-lt); }
.pr-paper b { font-size: var(--fs-sm); color: var(--t1); font-weight: 600; }
.pr-paper span { font-size: var(--fs-xs); color: var(--t4); font-variant-numeric: tabular-nums; }
.pr-paper.on { border-color: var(--brand); background: var(--brand-lt); box-shadow: 0 0 0 3px rgba(7, 193, 96, .12); }
.pr-paper.on b { color: var(--brand-d); }

/* 联次行：加一联 / 每行一个输入 —— 层数多了要能换行不挤 */
.pr-sheets { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

/* 出纸方式的说明要突出：这一条是整页最要紧的口径（复写纸只印一遍） */
.hint-strong { color: var(--t2); font-weight: 500; }