/* @@SPLIT_HEADER@@
   css/pages/ship.css —— 打单页专用：预设查询 chip 行 / 快递单模板行
      由 redesign2.html 拆分而来（原行号 310-494），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   6. 预设查询标签行 —— 可点 chip：灰底胶囊，hover 蓝边，选中蓝底白字
   ========================================================================== */
.tagbar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:5px 12px;min-height:36px}
.chip{
  height:24px;display:inline-flex;align-items:center;gap:4px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--hover);
  font-size:12px;color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{border-color:var(--accent);color:var(--accent);background:#fff}
/* ══ 5 个颜色筛选 chip：背景用对应颜色 ══
   ★ 2026-10-26 用户要求「背景也是同样的颜色」：
     原来是白底 + 一个小圆点，和「我打」那种"整颗胶囊都是那个颜色"的观感差很远。
     现在：未选中 = 淡色底 + 同色文字（一眼能分是哪个色）；
           选中   = 实色底 + 白字（和 .chip.on 的统一行为一致）。
   ⚠️ 变量必须和「行内色条」（#tbody>tr.viii-c-*）用同一套色值，
      三处（chip / 色条 / 行菜单色块）不一样会出现"点了紫色看到蓝条"这种最难查的 bug。 */
.chip[data-tag="purple"]{background:var(--accent-weak);border-color:#d8b4fe;color:#7e22ce}
.chip[data-tag="purple"] b{color:#a855f7}
.chip[data-tag="purple"]:hover{border-color:#a855f7;color:#6b21a8}
.chip[data-tag="purple"].on{background:#a855f7;border-color:#a855f7;color:#fff}
.chip[data-tag="purple"].on b{color:#f3e8ff}

.chip[data-tag="blue"]{background:var(--sel);border-color:var(--accent-line);color:#1d4ed8}
.chip[data-tag="blue"] b{color:#3b82f6}
.chip[data-tag="blue"]:hover{border-color:var(--accent);color:#1e40af}
.chip[data-tag="blue"].on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip[data-tag="blue"].on b{color:#dbeafe}

.chip[data-tag="green"]{background:var(--green-bg);border-color:#86efac;color:#15803d}
.chip[data-tag="green"] b{color:#22c55e}
.chip[data-tag="green"]:hover{border-color:#22c55e;color:#166534}
.chip[data-tag="green"].on{background:#22c55e;border-color:#22c55e;color:#fff}
.chip[data-tag="green"].on b{color:#dcfce7}

.chip[data-tag="yellow"]{background:#fef9c3;border-color:#fde047;color:#a16207}
.chip[data-tag="yellow"] b{color:#eab308}
.chip[data-tag="yellow"]:hover{border-color:#eab308;color:#854d0e}
.chip[data-tag="yellow"].on{background:#eab308;border-color:#eab308;color:#fff}
.chip[data-tag="yellow"].on b{color:#fef9c3}

.chip[data-tag="red"]{background:var(--danger-bg);border-color:#fca5a5;color:#b91c1c}
.chip[data-tag="red"] b{color:#ef4444}
.chip[data-tag="red"]:hover{border-color:#ef4444;color:#991b1b}
.chip[data-tag="red"].on{background:#ef4444;border-color:#ef4444;color:#fff}
.chip[data-tag="red"].on b{color:#fee2e2}

.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip b{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.chip.on b{color:#dbeafe}
/* ★ 2026-10-26（chip-patch）：本系统「没有这个维度」的 chip —— 现在只有 5 个颜色
   （紫/蓝/绿/黄/红）。本系统没有标色功能，这 5 枚 chip 的数字恒为 0，所以必须
   **看得出来它是灰的**，不能让用户点了没反应还以为卡了。
   ◆ 为什么用 class + cursor:not-allowed，而不是给 <button> 加 disabled 属性：
     ① disabled 的按钮不弹 title（浏览器一律忽略），而"为什么不能用"这句话
        只能靠 title / 点击提示传出去；
     ② disabled 连 hover 都吞掉，看上去像"页面坏了"，不像"这个能力还没有"。
   ◆ 字号、圆角、间距一律沿用 .chip，只压掉"可点"的全部视觉信号（描边/底色/文字）。 */
.chip.is-off{
  background:var(--bg);border-color:var(--line);color:#c2c8d1;cursor:not-allowed;
}
.chip.is-off b{color:#d3d9e1}
.chip.is-off:hover{background:var(--bg);border-color:var(--line);color:#c2c8d1}
.tagbar .ops{margin-left:auto;display:flex;align-items:center;gap:4px;white-space:nowrap}
.tagbar .ops .btn-link{font-size:12px;height:24px}

/* ==========================================================================
   7. 快递单模板行
   ◆ 选中模板 = 淡蓝底 + 蓝边（不是整块蓝底，和导航当前项同语言）
   ========================================================================== */
.tplbar{flex:none;display:flex;align-items:center;gap:8px;padding:5px 12px;flex-wrap:wrap;min-height:38px}
.tplbar .lead{font-size:12px;color:var(--mut);white-space:nowrap}
.tpl-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tpl{
  height:26px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  font-size:12px;color:var(--text-2);cursor:pointer;white-space:nowrap;position:relative;
}
.tpl:hover{border-color:var(--accent);color:var(--accent)}
.tpl.on{background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.tpl .sub{font-size:10px;color:var(--faint);font-weight:400}
.tpl.on .sub{color:#60a5fa}
/* 「在线寄件」类型标记：模板名后面的蓝胶囊
   ◆ 由模板数据的 isOnline 驱动（renderTpls() 拼 DOM）：带标记才输出这个 span。
   ◆ 为什么现在一个都不出现：微信小店开放接口没有在线寄件能力（只有电子面单），
     我们的微信模板全部 isOnline:false；以后接抖音（那边模板带 sendOnline 标记）
     把对应模板改成 true，蓝胶囊自动出现，CSS 和渲染代码都不用再动。 */
.tpl .tag-online{
  margin-left:5px;display:inline-flex;align-items:center;height:14px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--info-bg);color:var(--accent);border:1px solid var(--info-line);
  font-size:9px;font-weight:600;letter-spacing:.2px;
}
/* 在线寄件行（默认 hidden，按「当前选中的模板」条件显示）
   ◆ 为什么用 [hidden] 而不是 display:none 的类：hidden 是 HTML 标准属性，
     自测可以直接断言 el.hidden === true；但**作者样式里的 display 会盖掉它**，
     所以下面必须紧跟一条 [hidden]{display:none}，否则"隐藏"的容器照样占位。
   ◆ 为什么它现在不占高度：微信的模板全部不带 isOnline 标记，
     syncOnlineBar() 一直给它打 hidden —— 老板看到的界面和没有这一行完全一样。
     （这不是"删了"，是"按类型条件显示"：抖音模板带标记时它会自动出来。） */
.send-online{display:inline-flex;align-items:center;gap:6px;margin-left:2px;
  font-size:11px;color:var(--faint);flex-wrap:wrap}
.send-online[hidden]{display:none!important}
.send-online .so-lead{color:var(--mut);white-space:nowrap}
.send-online .so-w{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.send-online .so-input{
  width:48px;height:20px;padding:0 4px;border:1px solid var(--line);border-radius:5px;
  background:var(--hover);color:var(--text-2);font:inherit;text-align:center;
  font-variant-numeric:tabular-nums;
}
.send-online .so-input:focus{outline:none;border-color:var(--accent);background:#fff}
.send-online .so-list{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 一家快递一个胶囊：图标 + 名称 + 「约 X.XX 元」；价格最低的右上角挂红标 */
.send-online .so-pill{
  position:relative;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  color:var(--text-2);font-size:11px;cursor:default;white-space:nowrap;
}
.send-online .so-pill:hover{border-color:var(--accent);color:var(--accent)}
.send-online .so-pill .so-i{width:12px;height:12px;flex:none}
.send-online .so-pill .so-c{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.send-online .so-pill:hover .so-c{color:var(--accent)}
/* 「价格最低」角标：只有背景色不够醒目，对应后端 recommended_reason === 1 */
.send-online .so-best{
  position:absolute;top:-8px;right:-6px;padding:0 4px;line-height:13px;
  border-radius:var(--r-pill);background:var(--danger-bg);color:var(--danger);
  font-size:9px;font-weight:600;border:1px solid var(--danger-line);
}
/* 在线寄件行自己的东西（骨架复用 .send-online：输入框/胶囊/角标都是同一套）
   ◆ so-hint  = 「选择订单后展示寄件价格，单包裹默认重量」
   ◆ so-note  = 查不到报价时的灰字（**不能静默**：用户选了在线寄件模板却
                什么都没看到，只会以为功能坏了） */
.tpl-online .so-hint{color:var(--mut);white-space:nowrap}
.tpl-online .so-u{color:var(--mut);white-space:nowrap}
.tpl-online .so-note{color:var(--faint);white-space:nowrap}
.tpl-online .so-note.pending{color:var(--mut)}
/* 单包裹默认重量：58px 刚好放下 5 位数（100000 克 = 100 公斤的上限） */
.tpl-online .w-num{width:58px}
.tpl-online .w-num.bad{border-color:#f59e0b;background:#fffbeb}
/* ---------------- 「添加快递模板」三步对话框（2026-10-26） ----------------
   ◆ 骨架直接复用 .snd-box 那套（tm-hd / snd-f / snd-tip / snd-ft），
     只多两块"可点的列表"（公司 / 模板）—— 那两块是项目里别处没有的形态。
   ◆ z-index 353：比发货人面板(350)、编辑器(352)都高一层 ——
     用户可能开着编辑器去点「添加模板」，被压在下面等于点了没反应。
   ◆ ⚠️ 这段样式必须放在「14. 发货单模板管理 / 编辑器」之前：
     那边整段会被 _临时/_patch_tpl_editor.py 用 _tpl_editor.css 整块替换掉，
     放在它后面（例如样式表结尾之前）会在下一次跑补丁时被静默删掉。
   ◆ ⚠️ 注释里**绝对不能出现样式表结束标签的字样**（小于号 + 斜杠 + style）：
     浏览器解析 <style> 是 RAWTEXT，一看到那个结束标签就当场收尾 ——
     实测整份 CSS 只剩前 14.6KB，后面全变成正文文本、对话框一条样式都不生效。 */
#tplAddMask{position:fixed;inset:0;z-index:353;background:rgba(15,23,42,.38);
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(1px);padding:20px}
#tplAddMask.show{display:flex}
.tpladd-box{width:min(660px,94vw);max-height:92vh;background:var(--card);border-radius:12px;
  box-shadow:0 24px 64px rgba(15,23,42,.24);display:flex;flex-direction:column;overflow:hidden}
.tpladd-body{flex:1 1 auto;overflow:auto;padding:2px 16px 12px}
.tpladd-blk{padding:10px 0;border-top:1px solid var(--line)}
.tpladd-blk:first-child{border-top:0}
.tpladd-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:13px;font-weight:600;color:var(--text)}
.tpladd-n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent-weak);
  color:var(--accent);font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.tpladd-src{margin-left:auto;font-size:11px;font-weight:400;color:var(--mut)}
.tpladd-list{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.tpladd-item{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  font-size:12px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.tpladd-item:hover{border-color:var(--accent);color:var(--accent)}
.tpladd-item.on{background:var(--accent-weak);border-color:var(--accent-line);
  color:var(--accent);font-weight:600}
/* 不支持的那几家：虚线边 + 灰字 + not-allowed —— 看起来就"点不动" */
.tpladd-item.off,.tpladd-item.off:hover{background:var(--hover);border-style:dashed;
  border-color:var(--line);color:var(--faint);cursor:not-allowed}
.tpladd-tag{font-size:9px;font-weight:600;height:14px;padding:0 4px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;background:var(--bg);color:var(--mut)}
.tpladd-item.off .tpladd-tag{background:var(--bg);color:#9ca3af}
.tpladd-empty{font-size:12px;color:var(--mut);line-height:1.7}
.tpladd-box select{flex:1 1 auto;min-width:0;height:30px;border:1px solid var(--line-strong);
  border-radius:8px;padding:0 6px;font:inherit;font-size:12px;color:var(--text-2);background:#fff}
.tpladd-check{gap:6px}
.tpladd-check input{flex:none;width:14px;height:14px;margin:0}
.tplbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;white-space:nowrap}
.tplbar .right .btn-link{height:26px}