/* @@SPLIT_HEADER@@
   css/pages/col-freeze.css —— 列冻结 + 列名替换
      由 redesign2.html 拆分而来（原行号 23645-23761），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ---- ② 冻结列：position:sticky + JS 现算的 left/right 偏移 ----
   ★ 为什么用 sticky 而不是"克隆一张表钉在左边"：克隆要同步横向滚动、行高、勾选态、
     展开状态，两套 DOM 迟早对不上；sticky 是浏览器原生能力，滚动时零 JS。
   ★ z-index 分层（必须分，否则横滚时冻结列会被滚动的普通列盖住）：
       表头冻结列 7（勾选列还要 8，见下）> 表头普通 5/.c-chk 6 > 单元格冻结列 3 > 单元格普通 auto
   ★ 为什么勾选列表头单独抬到 8：「已选 N」红角标是绝对定位骑在勾选列右边界上的
     （right:-6px），它要压过后面的序号列表头。原来靠「勾选列 6 > 序号列 5」实现，
     现在两列都冻结、都属于第 7 层，DOM 顺序会让序号列反过来盖住角标 —— 必须把勾选列抬到 8。 */
#shipTable th.fz,#shipTable td.fz{position:sticky;z-index:3;background:#fff}
#shipTable thead th.fz{z-index:7;background:#fff}
#shipTable thead th.fz.c-chk{z-index:8}
#shipTable th.fz-right,#shipTable td.fz-right{position:sticky;z-index:3;background:#fff}
#shipTable thead th.fz-right{z-index:7;background:#fff}
/* 冻结区边界阴影：让「钉住的列」和「滚动的列」视觉上分开（不是装饰，是空间线索） */
#shipTable td.fz.edge{box-shadow:2px 0 4px -2px rgba(15,23,42,.12)}
#shipTable th.fz.edge{box-shadow:0 1px 3px rgba(0,0,0,.06),2px 0 4px -2px rgba(15,23,42,.12)}
#shipTable td.fz-right.edge{box-shadow:-2px 0 4px -2px rgba(15,23,42,.12)}
#shipTable th.fz-right.edge{box-shadow:0 1px 3px rgba(0,0,0,.06),-2px 0 4px -2px rgba(15,23,42,.12)}
/* ★ 行的状态底色必须跟着冻结列一起变，否则「滚动区是蓝的、冻结区是白的」，一眼就是 bug。
   hover / 选中 / 搜索结果闪烁高亮 / 高级搜索关键词命中，四种状态各补一条。
   选择器带上 #shipTable 和 tr:xxx 是为了**不靠 !important** 就压过
   `.grid tbody tr:hover td` 这类既有规则（id 优先，权重天然更高）。 */
#shipTable tbody tr:hover td.fz,#shipTable tbody tr:hover td.fz-right{background:var(--hover)}
#shipTable tbody tr.sel td.fz,#shipTable tbody tr.sel td.fz-right{background:var(--sel)}
#shipTable tbody tr.gs-hit td.fz,#shipTable tbody tr.gs-hit td.fz-right{
  background:var(--sel);animation:gsFlash 1.5s ease-in-out 1}
#shipTable tbody tr.adv-kw-hit>td.fz,#shipTable tbody tr.adv-kw-hit>td.fz-right{background:#fff1f2}
#shipTable tbody tr.adv-kw-hit:hover>td.fz,
#shipTable tbody tr.adv-kw-hit:hover>td.fz-right{background:#ffe4e6}

/* ---- 面板（复用「列设置面板」那套 .colset-pop / .cs-hd / .cs-body / .cs-ft 的样式，
        只补本块独有的几条；自己写一整套等于把同一张皮维护两遍） ---- */
#cePop{width:460px}
#cePop .ce-hd2{font-size:11px;color:var(--faint);margin:10px 0 4px;
  padding-top:8px;border-top:1px solid #f1f3f6}
#cePop .ce-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12px;color:var(--text-2)}
#cePop .ce-chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);
  cursor:pointer;user-select:none}
#cePop .ce-hint{font-size:11px;color:var(--faint);line-height:16px;margin:2px 0 4px;padding-left:1px}
#cePop .ce-sel{height:24px;font-size:12px;border:1px solid var(--line);border-radius:6px;
  padding:0 4px;background:var(--card);color:var(--text-2);cursor:pointer}
#cePop .ce-names{margin:2px 0 4px}
#cePop .ce-name{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:12px;min-width:0}
#cePop .ce-name .k{flex:1;min-width:0;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cePop .ce-name .k.on{color:var(--accent);font-weight:600}
#cePop .ce-tag{flex:none;font-size:10px;color:var(--mut);background:var(--bg);border-radius:999px;
  padding:0 5px;line-height:14px}
#cePop .ce-edit{flex:none;width:20px;height:20px;line-height:18px;text-align:center;
  border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--mut);
  font-size:11px;padding:0;cursor:pointer}
#cePop .ce-edit:hover{color:var(--accent);border-color:var(--accent);background:#f8fbff}
#cePop .ce-inp{flex:1;min-width:0;height:22px;font-size:12px;padding:0 5px;
  border:1px solid var(--accent);border-radius:5px;color:var(--text)}

/* ==========================================================================
   ② 横排恢复（2026-10-26）：列宽够用了，单元格内部要「能横放就横放」
   --------------------------------------------------------------------------
   ★ 根因（用户原话）：「我打里面是横着展示的…检查一下其他的因为之前不让横滚
     导致只能向下延展的，导致只能弄长排的修复一下」。
     这些竖排**不是设计**，是「不许横滚 → 列只有 55~80px」挤出来的结果：
     商品列 80px 装不下「图 + 名字 + 规格 + 数量」一行，只能一项一行往下堆。
   ★ 这里的策略统一是「弹性」：宽就一行排开，窄就自动折行 ——
     不写死行数、不写死 px，所以 1920 和 1280 都不会出现"硬塞进一行被截断"。
   ★ 为什么全部带 #shipTable 前缀：这三个单元格模板只有打单表在用，
     加了前缀既精准又天然压过原规则（id 权重），不用 !important。
   ========================================================================== */

/* ① 商品：图在左、文字在右（.prod 本来就是 flex，不用改）；
      要改的是「规格 / 商家编码」—— 原来 display:block 强制各占一行，
      220px 下就成了「名字一行、规格一行、编码一行」的竖排。
      改成 inline-block：跟在商品名后面同一行，窄了自然折到下一行。 */

/* ①.5 商品名限行容器（2026-10-26）
   ★ 默认**不限行**（面板里 nameLines 默认 0）：用户澄清行太高的根因是
     「我打只显示规格 + 数量，我们连名字也显示」，所以先把「商品名称」做成可关，
     限行只是额外手段，不该默认硬上。
   ★ 真的限行时（面板选 2/3/4 行），行数由 prodsHTML 写成内联
     style="-webkit-line-clamp:N"，这里只负责"可被限行"的结构。
   ★ 为什么用 -webkit-line-clamp 而不是 max-height：max-height 裁掉没有省略号，
     用户看不出「后面还有字」；line-clamp 自带「…」。
   ★ 为什么 clamp 只包「名称 + ×数量」：规格/编码本来就该各占一行（和「我打」一致），
     而且它们只做单行省略，不该被算进"名字占几行"里。 */
#shipTable .pn-t{
  display:-webkit-box;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;word-break:break-all;overflow-wrap:anywhere}


/* ② 收件信息：地址一行 + 「电话 / 虚拟号 / 眼睛」一行 → 宽了并成一行。
      ★ 两个 flex 分支的取值是这块的关键（试出来的最优组合）：
         .addr-line  flex:1 1 60px  —— 让它当"可伸缩的那一段"：省市区太长就省略号，
                                       **** 和电话因为各自 flex:none 永远不会被吃
         .addr-sub   flex:0 1 auto  —— 电话 + 眼睛按内容宽排在右边，不参与拉伸
      于是「宽了就一行、窄了才折回两行」。若把两者都设成 flex:0 1 auto，
      250px 下只能靠折行解决（实测 line.top 422 / sub.top 440，两行）；
      而全部写死 nowrap 又会在「强制一屏」模式下把眼睛挤出可视区。
      ★ **** 不可省略这条铁律没动：.addr-mask{flex:none}，省略号只发生在 .addr-region。 */
#shipTable .addr-cell{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
#shipTable .addr-cell>.addr-line{flex:1 1 60px;min-width:0}
#shipTable .addr-cell>.addr-sub{flex:0 1 auto;min-width:0}

/* ③ 订单时间：三段（下单 / 付了多久 / 还剩多久）并排，**进度条单独占满一行**。
      为什么进度条必须独占一行且在最后：它是「还剩多少」的可视化，
      挤在半行里只剩 20px 宽，等于没有。 */
#shipTable .ot-cell{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px}
#shipTable .ot-cell>.ot-time,#shipTable .ot-cell>.ot-paid,
#shipTable .ot-cell>.ot-left{flex:0 0 auto}
#shipTable .ot-cell>.ot-bar{flex:1 1 100%;width:100%;margin-top:2px}

/* ④ 状态/时间：三个「勾 + 时间」横着排，放不下自动往下一行（最多还是 3 行）。
      ★ 关键就是 inline-flex：原来是 display:flex（块级），三个必然各占一行。
      ★ 紧跟的 .st-line + .st-line{margin-top:1px} 也要压掉，
        否则横排时三条会错开 1px（看着像没对齐）。 */
/* 状态/时间的每一条（✓发货单 08:35 这种）。
   ⚠️ 原来是 vertical-align:top —— 实测这一列是 12 列里唯一偏上的（上边距17 / 下边距24，差7px）。
      改成 middle 后和 td 的 vertical-align:middle 对齐。 */
#shipTable .st-line{display:inline-flex;vertical-align:middle;margin-right:8px}
#shipTable .st-line + .st-line{margin-top:0}