/* ══════════ 打印件统一版式（hp-*）══════════
   来源：2026-09-29 二十四期，苏彧确认过的**入职资料表预览稿**那一套。
   原话（2026-09-30）：「你看其他单据的打印能不能也做成和入职资料表风格相统一的」。

   ⚠️ 为什么要抽成公共文件而不是每个页面各抄一份：
      打印件一共有 **三个出口** ——
        ① 打印中心（print-center.html，六类单据）
        ② 报销页自带的打印 Tab（baoxiao.html）
        ③ 考勤页自带的打印 Tab（kq.html：休假单 / 入职工资职位审批单）
      苏彧要的恰恰是"**全系统一个样**"。三处各抄一份 ⇒ 改一处忘两处，
      而且是**静默**的：不报错，只是"这两个地方印出来不太一样"。

   ⚠️ 本段的定义是**从 print-center.html 逐字搬过来的**（包括 align-items:flex-end、
      2.5px 边框、以及 .hp-conf 偏偏没有 margin-top 这类细节）——刻意的。
      先保证三个出口视觉**零漂移**，再谈优化；凭记忆重写必然引入肉眼看得出的差别。
   ⚠️ 只管 hp-* 那一套。不涉及任何页面原有的 UI，不会撞样式。
      「纸面容器」仍由各页面自己的 .paper 负责，这里不重复定义。 */

/* ── 刊头：左＝公司名 + 单据标题，右＝单号 / 门店 / 打印时间 ── */
.hp-ph{display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:2.5px solid #3B6B4A;padding-bottom:8px}
.hp-ph .corp{font-size:13px;color:#6B6560;letter-spacing:3px}
.hp-ph .ttl{font-size:23px;font-weight:700;letter-spacing:6px;line-height:1.3}
.hp-ph .rt{text-align:right;font-size:11.5px;color:#6B6560;line-height:1.9}
.hp-ph .rt b{color:#000;font-weight:600}

/* ── 分节小标题 ── */
.hp-sec{margin-top:15px}
.hp-sec-t{font-size:12.5px;font-weight:700;color:#3B6B4A;letter-spacing:2px;
  border-left:5px solid #3B6B4A;padding-left:8px;margin-bottom:6px}

/* ── 表格 ── */
.hp-tbl{width:100%;border-collapse:collapse}
.hp-tbl th,.hp-tbl td{border:1px solid #9C968D;padding:6px 9px;font-size:12.5px;vertical-align:middle}
.hp-tbl th{background:#F3F5F2;font-weight:600;width:14%;white-space:nowrap;color:#4A453F}
.hp-tbl td{font-weight:600}

/* ── 证件 / 发票照片四宫格 ── */
.hp-pics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.hp-pics figure{margin:0;border:1px solid #D9D4CC;background:#FAFAF8;text-align:center;padding:0 0 4px}
.hp-pics .box{height:70px;display:flex;align-items:center;justify-content:center;color:#A8A09A;font-size:11px;background:#F1EFEA}
.hp-pics img{width:100%;height:70px;object-fit:cover;display:block}
.hp-pics figcaption{font-size:11px;color:#6B6560;padding-top:4px}

/* ── 签字格 ── */
.hp-signs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp-si{border:1px solid #9C968D;min-height:82px;padding:6px 9px 4px;position:relative}
.hp-si .lb{font-size:11.5px;color:#6B6560;letter-spacing:1px}
.hp-si .nm{font-size:13px;font-weight:700}
.hp-si .dt{font-size:11px;color:#6B6560;margin-top:1px}
.hp-si img{position:absolute;right:8px;bottom:4px;max-height:56px;max-width:150px;object-fit:contain}
.hp-si .nosig{position:absolute;right:8px;bottom:6px;font-size:11px;color:#A8A09A}

/* ── 员工确认栏 ── */
.hp-conf{border:1px solid #9C968D;padding:8px 10px;font-size:12px;line-height:2}
.hp-conf .row{display:flex;gap:26px;flex-wrap:wrap}
.hp-conf u{display:inline-block;min-width:120px;border-bottom:1px solid #9C968D;text-decoration:none}

/* ── 页脚 ── */
.hp-foot{margin-top:12px;display:flex;justify-content:space-between;font-size:10.5px;color:#A8A09A}

/* ── 免责告知（红色虚线框）──
   ★ 样式与文案与其他出口 **保持一致**：同一句话在两个打印出口长得不一样，
     会被当事人当成"两份不同的声明"，出了事最说不清。 */
.hp-disclaimer{margin-top:10px;padding:8px 10px;border:1px dashed #D70015;border-radius:6px;
  font-size:12px;line-height:1.7;color:#D70015;background:#FFE5E3}

/* ══════════ 三十一期 ③：完整流转过程 + 末尾三个空白签字栏 ══════════
   · .hp-trace   —— 一张表的完整流转（序号/姓名/ID/身份/动作/时间），
                    数据来自单据上的「操作留痕」，**不另造流水**。
   · .hp-blank-signs —— 打印件最末尾的董事长 / 复核人 / 出纳三个**空白**签字栏，
                    给线下最后签字用；格子里**不允许**预填系统里的名字。 */

/* 流转过程：比正文表再收一档字号（行多，要能装进一页 A4） */
.hp-trace{margin-top:2px}
.hp-trace th,.hp-trace td{font-size:11.5px;padding:4px 7px}
.hp-trace th{background:#F3F5F2}
.hp-trace .hp-tr-idx{text-align:center;color:#6B6560;font-weight:400}
.hp-trace .hp-tr-uid{color:#6B6560;font-weight:400;font-variant-numeric:tabular-nums}
.hp-trace .hp-tr-at{color:#6B6560;font-weight:400;font-variant-numeric:tabular-nums}
/* 动作着色：驳回类红、通过类绿（与全站"红=驳回/绿=通过"同一套语义） */
.hp-trace .hp-tr-ok{color:#1E7A38}
.hp-trace .hp-tr-no{color:#D70015}

/* 三个空白签字栏 */
.hp-blank-signs{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-blank-signs .hp-bs{text-align:center}
/* 横线＝签字位（不能改成实线框：实线框看着像"已经签过了"） */
.hp-blank-signs .ln{border-bottom:1px solid #9C968D;height:44px}
.hp-blank-signs .lb{font-size:11.5px;color:#6B6560;letter-spacing:2px;padding-top:5px}

/* ── 分页 ── */
.hp-pb{page-break-after:always;break-after:page;height:0}

/* ── 打印时收紧一档（数值与 print-center 的 #printHost 段**逐字一致**）──
   ⚠️ 这几条是"装得下一页 A4"的关键，任何一条删掉长单据就会溢出到第二页。
      各页面自己还在用 #printHost 的话，以那边的为准，两边数字必须同步改。 */
@media print{
  @page{size:A4;margin:0}
  .hp-ph .ttl{font-size:20px;letter-spacing:4px}
  .hp-tbl th,.hp-tbl td{padding:4px 7px;font-size:11.5px}
  .hp-sec{margin-top:10px}
  .hp-pics .box,.hp-pics img{height:62px}
  .hp-si{min-height:70px}
  /* 流转表与签字栏在打印时再收一档，保证"正文 + 流转 + 签字"能落在同一页 A4 */
  .hp-trace th,.hp-trace td{font-size:10.5px;padding:3px 6px}
  .hp-blank-signs{margin-top:10px;gap:14px}
  .hp-blank-signs .ln{height:36px}
}