/* ==========================================================================
   单据打印模板（241×140mm 针式连续纸）—— 送货单 / 报价单 / 采购单
   --------------------------------------------------------------------------
   同一份样式服务三处：
     · 屏幕预览   系统弹窗里的纸张（.pd-stage / .pd-item / .pd-sheet）
     · 新窗口打印  由 js/31-print-doc.js 打开的打印窗口
     · 导出图片   对单张 .pd-sheet 元素截图
   本文件【不含 @page】：纸型声明由脚本注入打印窗口，
   否则会连带把系统页面自己的 Ctrl+P 也改成针式纸规格。

   ★ 铁律一：@page 的页面尺寸必须与「打印机里的纸张尺寸」完全一致（这里是
     241×140mm），否则浏览器会自作主张把内容缩放去「适配」，一缩放就会顶边、
     右边同时被切。所以 @page 恒为物理纸 241×140mm，任何时候都不要改它。

   ★ 铁律二：纸张（.pd-sheet）宽度 = **有效打印区 203.2mm**，不是物理纸宽 241mm。
     原因：打印区在纸上只占**左侧一段**（实测标尺可打满 20cm，右侧打不到），
     且 Windows 打印时页面坐标原点对齐的是「可打印区左上角」，不是纸左缘。
     把「纸张」宽度声明成打印区宽度 203.2mm，并让它在页面里**左对齐**
     （打印时 margin:0，绝不居中），则纸张与打印区严丝合缝 ——
     内容在纸张内左右等距居中，落到物理纸上也正好落在打印区正中：
     既满足「居中」，又不会越界被切。
     ⚠ 反面教材：纸张若按 241mm 且内容居中 → 内容右界 213mm 超出打印区 203.2mm
       → 右边必被切（这正是历史上反复失败的原因）。

   版式基线（毫米）：
     物理纸 241 × 140（针式连续纸，约 9.5″×5.5″ 二分纸）
     页面（@page）241 × 140 = 纸张尺寸 → 不缩放
     纸张（.pd-sheet）203.2 × 140 = 打印区尺寸，打印时左对齐、屏幕里居中显示
     边距 上 0 / 下 0 / 左右 9.1（相等 → 内容 185mm 居中，左界 9.1、右界 194.1）
     自上而下：页眉 18.2（预算 18）· 表头 7 · 明细 ≤18×4.9 · 合计 6 · 大写 5
               · 签字 6.5 · 条款 6.5
     送货单满页（18 行）实测 ≈136.8 ≤ 140，余量 3.2mm
     报价单不印「合计行」与「金额大写行」，单页可放到 20 行（算式见 js 的 rowsPerPage）
     明细不补占位空行：不满一页时表格画到末条明细为止，空白留在纸的下方
   ========================================================================== */

/* ==========================================================================
   1. 屏幕预览外壳（只用于系统里的预览弹窗）
   ========================================================================== */
/* 打印预览专用弹窗：比系统默认 .wide（1000px）更宽，241mm 的纸接近原始尺寸才看得清 */
.dialog.pd-dlg { width: min(1520px, 96vw); }
.dialog.pd-dlg .d-body { padding: 12px 14px; }

.pd-stage {
  background: #e9edf3;
  border-radius: 10px;
  padding: 14px 10px;
  overflow: auto;
  max-height: 72vh;
  /* 纸张是 241mm≈911px 的固定宽度，若不解除 flex/grid 的 min-width:auto，
     这个宽度会沿着 .pd-stage → 对话框一路把弹窗撑得比屏幕还宽（手机上右侧直接被切）。
     min-width:0 让容器可以被压缩，纸张交给 overflow:auto 横向滚动。 */
  min-width: 0;
  max-width: 100%;
  /* ===== 版式变量（与打印窗口注入到 :root 的变量同名）=====
     脚本会按预览弹窗顶部「纸张大小 / 页边距」面板的当前值覆盖下面这些值；
     这里只是「脚本还没跑」时的兜底默认值。
       --pd-w / --pd-h           纸张（版面）宽 / 高
       --pd-pad-*                上下左右页边距（左右相等 → 内容在纸上水平居中） */
  --pd-w: 241mm;
  --pd-h: 140mm;
  --pd-pad-top: 0mm;
  --pd-pad-bottom: 0mm;
  --pd-pad-left: 18.9mm;
  --pd-pad-right: 18.9mm;
}
.pd-pages {
  display: flex; flex-direction: column; min-width: 0;
  /* safe center：不溢出时居中；纸张比弹窗宽时退化成左对齐，
     否则居中会把左半边推到滚动区之外，怎么拖都看不到表头和「序号」列 */
  align-items: center;
  align-items: safe center;
}
.pd-item {
  /* 屏幕缩放：纸张实际宽 241mm ≈ 911px，由脚本按弹窗宽度自动「适应宽度」，
     也可用工具条手动缩放。放在外层容器而不是 .pd-sheet 上 ——
     导出图片时脚本会沿祖先链把 zoom 还原成 1 */
  zoom: var(--pd-zoom, 1);
  box-shadow: 0 3px 12px rgba(16, 24, 40, .16);
  background: #fff;
  margin-top: 14px;
}
/* 缩放工具条：靠右悬浮在信息条末端 */
.pd-zoom { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pd-zoom > b {
  min-width: 46px; text-align: center; color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.pd-zoom .btn {
  padding: 2px 8px; line-height: 1.5; min-height: 0;
  font-size: 12px; white-space: nowrap;
}
.pd-tagno {
  font-size: 11px; color: #6b7280; padding: 12px 0 2px; text-align: center;
}
.pd-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12px; color: #5b6472;
}
.pd-bar b { color: #1f2937; }
.pd-warn { color: #b42318; font-weight: 600; }

/* ---- 页面设置面板（纸张大小 / 页边距），置于预览上方，改完立即生效 ---- */
.pd-set {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: #f6f8fb; border: 1px solid #e3e8ef; border-radius: 8px;
  font-size: 12px; color: #5b6472;
}
.pd-set__g { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pd-set__g > b { color: #1f2937; font-weight: 600; }
.pd-num {
  width: 56px; padding: 2px 4px; box-sizing: border-box;
  border: 1px solid #cfd6e0; border-radius: 4px; background: #fff;
  font: inherit; font-variant-numeric: tabular-nums; text-align: right;
}
.pd-num:focus { outline: none; border-color: #4b7bec; box-shadow: 0 0 0 2px rgba(75, 123, 236, .18); }
.pd-set .btn { padding: 2px 8px; line-height: 1.5; min-height: 0; font-size: 12px; }
/* 「保存设置」靠右，并带状态提示 */
.pd-set__tail { margin-left: auto; gap: 8px; }
.pd-save-hint { color: #6b7280; font-size: 12px; }
.pd-save-hint.is-dirty { color: #b45309; font-weight: 600; }

/* ==========================================================================
   2. 纸张本体
   --------------------------------------------------------------------------
   宽度 = **有效打印区 203.2mm**（不是物理纸 241mm，见文件头 ★ 铁律二）。
   纵向 flex：页眉 / 表格 / 金额大写 / 签字区 / 条款 自上而下依次堆叠，
   各块高度由内容决定，剩余空白留在纸的下方。
   相比「签字区绝对定位」，这种方式在数学上不可能与上方内容重叠
   —— 绝对定位一旦页眉或明细多出零点几毫米就会压字。
   ========================================================================== */
.pd-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 纸张（版面）尺寸与页边距全部来自 CSS 变量，由脚本按「页面设置」注入，
     兜底值 = 241×140 纸、左右各 18.9mm（内容 203.2mm 居中）。 */
  width: var(--pd-w, 241mm);
  height: var(--pd-h, 140mm);
  box-sizing: border-box;
  padding: var(--pd-pad-top, 0mm) var(--pd-pad-right, 18.9mm)
           var(--pd-pad-bottom, 0mm) var(--pd-pad-left, 18.9mm);
  background: #fff;
  color: #000;
  /* 强制纯黑输出：避免浏览器把黑色「优化」成灰，针打半色调后会变成稀疏点 */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  font-family: "宋体", SimSun, serif;
  font-size: var(--pd-font-size);
  line-height: 1;
  /* ⚠ 这里**不要**再声明 --pd-w/--pd-h/--pd-pad-*：它们由 .pd-stage（预览）
     或打印窗口的 :root（打印）统一提供，声明在 .pd-sheet 上会覆盖掉脚本注入的值。
     页边距与纸张大小请用预览弹窗顶部的「纸张大小 / 页边距」面板调整。 */
  --pd-row-h: 4.6mm;
  /* 正文字号：针式打印用「五号 10.5pt」。9pt 在 180dpi 的 24 针机上笔画只有
     1~2 点宽，经浏览器灰度抗锯齿 + 打印机半色调后会被打成稀疏点阵 → 字迹发虚。
     10.5pt 笔画点数增加约 40%，配合加粗即可稳定成形。行高 4.6mm 不变，行数不受影响。 */
  --pd-font-size: 10.5pt;
  --pd-title-size: 15pt;
  --pd-line: .25mm;
  /* 抬头行左右等量留白：给右上角单号让位。等宽故不影响公司名居中 */
  --pd-co-gutter: 40mm;
}

/* ==========================================================================
   3. 页眉 —— 三行，字号逐层递减
     层级：明细正文 10.5pt → 抬头（公司名）12.5pt → 单据标题 15pt
     高度由内容撑开，不写死，从根源上消除「页眉溢出压住表头」
   ========================================================================== */
.pd-hdr { flex: none; position: relative; }

/* ---- ① 抬头行：公司名（居中）· 单号（右上角）----
   居中做法：容器左右给「等量」留白 --pd-co-gutter，文本在剩余区域内
   text-align:center；左右留白相等 → 文本中点严格落在纸张中线。
   单号绝对定位到右上角，脱离文档流，不会把公司名挤偏。
   不用 flex 的 space-between（那会把公司名顶到最左），
   也不用 grid（部分 html2canvas 版本对 grid 栏宽还原不准，导出会错位）。 */
.pd-hdr__top {
  position: relative;
  padding: 0 var(--pd-co-gutter);
  text-align: center;
  line-height: var(--pd-row-h);
  font-size: var(--pd-font-size);
}
.pd-hdr__co {
  display: block;                                  /* 独占整行，居中基准不被单号污染 */
  font-size: calc(var(--pd-font-size) + 2pt);      /* 12.5pt：抬头，介于正文与标题之间 */
  font-weight: 700;
  letter-spacing: 1px;
  /* ★ 行高必须单独给足，不能沿用 --pd-row-h(4.6mm)。
     12.5pt 字的自然内容区 ≈ 1.35em ≈ 5.95mm，塞进 4.6mm 行高时上下各只剩 0.35mm，
     再叠加 overflow:hidden 就会把字的**上边缘与下边缘切掉**（屏幕勉强能看，
     针式机按点阵重绘后立即穿帮）—— 这就是「公司名上下被裁」的真凶。
     1.35 正好等于宋体的自然行距，上下各留 ~1mm 余量。
     同时**不能要 overflow:hidden / text-overflow:ellipsis**：那等于给字加了个
     比字还紧的裁剪框。公司名区域宽 105mm（185 − 两侧各 40mm 留白），
     14~20 字的公司名（≈65~92mm）都放得下，无需截断。 */
  line-height: 1.35;
  white-space: nowrap;
}
.pd-hdr__no {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  white-space: nowrap;
}
.pd-hdr__no i { font-style: normal; }

/* ---- ② 标题行：标题居中；续页角标绝对定位，不参与居中计算 ---- */
.pd-hdr__title {
  position: relative;
  text-align: center;
  /* 上 0.6 / 下 1.0 的「上紧下松」：公司名与标题是一个居中标题组，靠得近才成组；
     与下方信息行拉开，标题组和元信息才切得开 */
  padding: .6mm 0 1mm;
  /* letter-spacing 会在末字之后多出一份字距使字面整体左偏，左内边距补回一个字距 */
  padding-left: .42em;
}
.pd-hdr__sub {
  font-size: var(--pd-title-size);
  font-weight: 700;
  letter-spacing: .42em;      /* 用 em 而非 px：字号一改，字距按比例跟随 */
  line-height: 1.15;
  white-space: nowrap;
}
.pd-hdr__cont {
  position: absolute; right: 0; top: 0; bottom: 0;
  height: calc(var(--pd-row-h) - .2mm); margin: auto 0;
  box-sizing: border-box;
  display: flex; align-items: center; padding: 0 1.6mm;
  border: var(--pd-line) solid #000;
  font-size: var(--pd-font-size);
  white-space: nowrap;
}

/* ---- ③ 信息行：三栏（客户 / 仓库 / 日期）两端对齐到内容区边界 ---- */
.pd-hdr__info {
  display: flex; justify-content: space-between;
  line-height: var(--pd-row-h);
  font-size: var(--pd-font-size);
  font-weight: 700;
}
.pd-hdr__info > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-hdr__info > span + span { margin-left: 4mm; }
.pd-hdr__info > span:last-child { text-align: right; }

/* ==========================================================================
   4. 明细表格 —— 8 列固定版式
   --------------------------------------------------------------------------
   列宽必须固定（table-layout:fixed + colgroup），否则续页列宽会随内容漂移；
   单元格禁止换行，任何换行都会撑高行高、导致整页行数漂移。
   ========================================================================== */
.pd-grid {
  flex: none;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--pd-font-size);
}
.pd-grid th, .pd-grid td {
  border: var(--pd-line) solid #000;
  height: var(--pd-row-h);
  padding: 0 .8mm;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.pd-grid thead th {
  height: 7mm;
  font-weight: 700;
  text-align: center;
  letter-spacing: .5px;
}
.pd-grid tbody tr { height: var(--pd-row-h); }
/* 明细正文加粗：针打侧的主要解法。宋体细笔画在低分辨率下会被半色调打虚，
   加粗让竖笔达到 2 点宽，落点稳定、字迹实 */
.pd-grid tbody td { font-weight: 700; }
.pd-grid .pd-num { text-align: right; }
.pd-grid .pd-ctr { text-align: center; }
/* 合计行：末页＝合计，中间页＝本页小计 */
.pd-grid tfoot td {
  height: 6mm;
  font-weight: 700;
}
/* 合计格：两个「带文字的合计格」并排 —— 数量合计（跨序号…数量列）
   与 金额合计（跨单价…金额列）。整格右对齐，数值右缘正好落在
   「数量」「金额」两列的右缘之下，与上方明细数字对得上。
   标签用常规字重、数值用粗体，二者一眼可分。 */
.pd-grid tfoot .pd-total-cell { text-align: right; padding-right: 1.6mm; }
.pd-grid tfoot .pd-total-cap { font-weight: 400; letter-spacing: 1.5px; margin-right: 2.5mm; }
.pd-grid tfoot .pd-total-val { font-weight: 700; }

/* ==========================================================================
   5. 金额大写行（表格外独立块，不受列宽约束，可整行贯通书写）
   ========================================================================== */
.pd-upper {
  flex: none;
  height: 5mm;
  line-height: 5mm;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   6. 签字区 —— 同一行、无外框
     画外框会被误认为表格内的行，所以只有文字与下划线
   ========================================================================== */
.pd-sign {
  flex: none;
  margin-top: .8mm;
  height: 6.5mm;
  display: flex;
  align-items: flex-end;
  padding-bottom: .6mm;
  font-size: var(--pd-font-size);
}
.pd-sign > span { flex: 1; white-space: nowrap; }
.pd-sign > span + span { margin-left: 4mm; }
.pd-sign > span:nth-child(2) { text-align: center; }
.pd-sign > span:last-child { text-align: right; }
.pd-sign i { font-style: normal; display: inline-block; min-width: 18mm; border-bottom: var(--pd-line) solid #000; }

/* ==========================================================================
   7. 交易条款 —— 送货单专用，整张单据的最后一行（排在签字区之下）
     字号 8pt（正文 10.5pt 的 0.76 倍）：条款是附注性声明，比正文轻一档，
     但 7pt 在针打实机上偏小、易糊，故放大到 8pt。
     全文约 60 字 × 8pt ≈ 169mm < 内容宽 185mm → 仍是一行，不会折行。
     （7pt 时约 148mm；上限是 8.5pt≈180mm，再大就折行、撑破 6.5mm 预算。）
   ========================================================================== */
.pd-terms {
  flex: none;
  margin-top: .8mm;
  font-size: 8pt;
  line-height: 1.25;
}

/* ==========================================================================
   7. 打印环境复位（新窗口里生效；系统页面一般不会走到这里）
   ========================================================================== */
@media print {
  html, body { margin: 0; padding: 0; background: #fff; }
  .pd-item { zoom: 1 !important; box-shadow: none !important; margin: 0 !important; }
  .pd-stage { background: none; padding: 0; max-height: none; overflow: visible; border-radius: 0; }
  .pd-pages { gap: 0; }
  .pd-noprint { display: none !important; }
  /* 每张纸独占一页 */
  .pd-sheet + .pd-sheet { break-before: page; page-break-before: always; }
}

/* ==========================================================================
   9. 打印宽度标尺 —— 校准「机器实际可打印右界」的测试页
   针式打印机只能覆盖纸张左侧一段（80/82 列机约 203~208mm），右侧打不到。
   打一张标尺，看「数字带」从哪个数字开始缺失/变形，那个数字就是真实右界。
   单色机打印时颜色会变灰阶，故各参考线靠「文字标签」区分，不依赖颜色。
   ========================================================================== */
.rl-sheet {
  position: relative;
  width: var(--pd-w, 241mm); height: var(--pd-h, 140mm); box-sizing: border-box;
  padding: 8mm 0 0;
  background: #fff; color: #000;
  font-family: "宋体", SimSun, serif;
}
.rl-title { font-size: 12pt; font-weight: 700; text-align: center; }
.rl-sub { width: 200mm; margin: 2mm auto 0; font-size: 8pt; line-height: 1.5; text-align: center; }
/* 刻度区：左缘即纸左缘（0mm），三条 repeating 渐变叠出 1/5/10mm 三级刻度。
   高度 52mm 是为了容纳 4 个参考线标签（top 31/36/41/46，逐个错开防重叠） */
.rl-zone { position: relative; width: var(--pd-w, 241mm); height: 52mm; margin-top: 8mm; }
.rl-ticks {
  position: absolute; top: 0; left: 0; width: var(--pd-w, 241mm); height: 16mm;
  background-image:
    repeating-linear-gradient(to right, #000 0 .18mm, transparent .18mm 1mm),
    repeating-linear-gradient(to right, #000 0 .28mm, transparent .28mm 5mm),
    repeating-linear-gradient(to right, #000 0 .42mm, transparent .42mm 10mm);
  background-size: 1mm 5mm, 5mm 9mm, 10mm 15mm;
  background-repeat: repeat-x;
}
.rl-num { position: absolute; top: 15.5mm; transform: translateX(-50%); font-size: 7pt; white-space: nowrap; }
/* 数字带：每 10mm 一格印 3 位数字，断在哪一格一眼可见 */
.rl-cell { position: absolute; top: 22mm; width: 10mm; font-size: 9pt; white-space: nowrap; }
.rl-line { position: absolute; top: 0; height: 30mm; border-left: .3mm dashed #000; }
.rl-tag { position: absolute; top: 31mm; transform: translateX(-50%); font-size: 7pt; white-space: nowrap; background: #fff; padding: 0 .5mm; }
.rl-tail { width: 212mm; margin: 4mm auto 0; font-size: 8pt; line-height: 1.8; }
.rl-tail b { font-weight: 700; }