/* @@SPLIT_HEADER@@
   css/pages/aftersale-scan.css —— XVI. 售后扫描模式：样式
      由 redesign2.html 拆分而来（原行号 28358-28512），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ---- ① 底栏两套按钮组：.bb-set 用 display:contents 融进 #bbAftersale 的 flex，
   这样两套都不改原有居中和间距；hidden 时要显式盖掉（作者的 display 优先于 UA 的
   [hidden]{display:none}，不写这条隐藏会失效）。 */
#bbAftersale .bb-set{display:contents}
#bbAftersale .bb-set[hidden]{display:none}
/* 扫描态那 12 个按钮更窄一档：12 个按钮在 1366 宽的屏上必须能一行放下。
   （gap 也收 2px —— 整组宽 1200+，8px 的间距在这里最不值钱） */
#bbAftersale.bb-scan-mode{gap:6px}
#bbAftersale .bb-set[data-bbset="scan"] .bbtn{padding:0 9px}

/* ---- ② 搜索框进入扫描态：描边 + 呼吸动画（不是普通 focus）
   ★ 为什么要动效：操作员要能一眼看出"现在是扫描状态"，否则扫描枪没反应时
     他分不清是枪坏了还是没进模式。只用边框变色在扫单的余光里看不出来。 */
#view-aftersale #asQuery.asm-scanning{
  border-color:var(--accent);
  background:var(--hover);
  animation:asmBreathe 1.5s ease-in-out infinite;
}
@keyframes asmBreathe{
  0%,100%{box-shadow:0 0 0 2px rgba(37,99,235,.16)}
  50%    {box-shadow:0 0 0 5px rgba(37,99,235,.04)}
}
/* 没找到：红 300ms。红不留在那儿 —— 留着会让操作员以为输入框坏了 */
#view-aftersale #asQuery.asm-fail{border-color:var(--danger);background:var(--danger-bg);animation:none}
/* 「扫描中」小标签（插在搜索框前面，不进源码 = 不改筛选行那一排的 HTML） */
.asm-tag{display:none;flex:none;align-items:center;height:22px;padding:0 7px;border-radius:6px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px}
.asm-tag.on{display:inline-flex}
/* 搜索框右边：喇叭（常驻）+ 「已扫 N 单」（只在扫描模式出现） */
.asm-side{display:inline-flex;align-items:center;gap:4px;flex:none}
.asm-mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:24px;padding:0 7px;
  border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--mut);font-size:11px;
  cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.asm-mini:hover{border-color:var(--accent);color:var(--accent)}
.asm-mini .i{width:12px;height:12px}
/* ⚠️ 作者的 display 会盖掉 UA 的 [hidden]{display:none}：不加这条，「已扫 N 单」
   在正常态（hidden=true）照样显示出来（第一版实测踩到）。 */
.asm-mini[hidden]{display:none}
.asm-snd .asm-slash{display:none}
.asm-snd.off .asm-slash{display:inline-block}
.asm-snd.off{color:var(--faint)}

/* ---- ③ 表格上方的扫描结果提示条（0 条红 / 1 条绿 / N 条黄）
   ★ 为什么非要有：多条是常态（同一包裹退回几单），不提示的话操作员会以为
     "扫错了"或者"只扫到一单"，一单只处理一条 → 漏单。 */
.asm-found{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:12px;
  background:var(--card);border-bottom:1px solid var(--line);flex:none}
.asm-found[hidden]{display:none}
/* 扫描模式下藏掉原来那条「匹配 N 条 · 关键词 xxx」提示条：它和本块的结果条说的是
   同一件事（都来自售后搜索框），两条并排纯粹重复；「清空」由「清空继续扫」承担。
   用 ID 选择器压过 .hintbar.show，不需要 !important。 */
#asHint.asm-hide{display:none}
.asm-n{font-weight:600}
.asm-n.bad{color:#dc2626}
.asm-n.ok{color:#047857}
.asm-n.warn{color:#b45309}
.asm-sel{color:var(--mut);font-variant-numeric:tabular-nums}
.asm-ops{margin-left:auto}
.asm-ops a{color:var(--accent);cursor:pointer;font-size:12px;text-decoration:none}
.asm-ops a:hover{text-decoration:underline}

/* ---- ④ 底栏分裂按钮（左：进/退扫描模式；右 ▾：自动处理设置）
   ★ 为什么两半共用一条边线而不是两个独立按钮：它们是同一个开关组，
     分开摆会让人以为 ▾ 是另一个功能。 */
.bb-split>.bbtn{border-radius:0}
.bb-split>.bbtn:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);border-right:0}
.bb-split>.bbtn:last-of-type{border-radius:0 var(--r-sm) var(--r-sm) 0}
.bb-split>.bb-split-arrow{width:26px;padding:0;justify-content:center;font-size:10px;color:var(--mut)}
#btnAsScanMode.asm-active{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);font-weight:600}
/* 设置浮层里的四行（.pset-chk 是现成样式，只补长文案的换行与基线） */
#asScanCfgPop{width:392px}
.asm-cfg-row{align-items:flex-start;line-height:1.5;color:var(--text-2)}
.asm-cfg-row input[type="checkbox"]{margin:2px 0 0}
.asm-cfg-row.dis{color:var(--faint);cursor:not-allowed}
.asm-cfg-cond{font-style:normal;font-size:11px;color:var(--faint);margin-left:2px}
.asm-cfg-cond[hidden]{display:none}
.asm-cfg-tip{font-size:11px;color:var(--faint);line-height:1.4}

/* ---- ⑤ 售后详情抽屉（用户给的参数原样照抄：进 280ms / 出 200ms，纯位移，
   绝不加缩放旋转回弹 —— 那才是"割裂感"的来源） */
.asd{
  position:fixed;top:0;right:0;bottom:0;width:min(920px,72vw);
  background:var(--card);box-shadow:-8px 0 28px rgba(15,23,42,.14);
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(.22,.61,.36,1);
  z-index:960;display:flex;flex-direction:column;
}
.asd[hidden]{display:none}
.asd.show{transform:translateX(0)}
.asd.closing{transition-duration:200ms}     /* 出比进快：退出要干脆 */
.asd-mask{
  position:fixed;inset:0;background:rgba(15,23,42,.25);
  opacity:0;transition:opacity 120ms linear;z-index:959;
}
.asd-mask[hidden]{display:none}
.asd-mask.show{opacity:1}
/* 抽屉内件 */
.asd-hd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);flex:none}
.asd-hd .t{font-size:14px;font-weight:600;color:var(--text)}
/* 抽屉标题旁那枚「换货 · 处理中」胶囊（圆点颜色来自 AS_STATUS_DOT，和统计小条同一份） */
.asd-tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--bg);font-size:11px;color:var(--text-2);white-space:nowrap}
.asd-tag .d{width:6px;height:6px;border-radius:50%;flex:none}
.asd-hd .x{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:none;border-radius:6px;
  color:var(--faint);font-size:14px;line-height:1;cursor:pointer}
.asd-hd .x:hover{background:var(--bg);color:var(--text)}
.asd-bd{flex:1;min-height:0;overflow:auto;padding:6px 16px 18px}
.asd-sec{margin-top:12px}
.asd-sec>h4{margin:0 0 4px;font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--faint);
  padding-bottom:4px;border-bottom:1px solid #eef2f7}
.asd-kv{display:flex;align-items:flex-start;gap:12px;padding:4px 0;font-size:12px}
.asd-kv>span{flex:none;width:68px;color:var(--mut)}
.asd-kv>b{flex:1;min-width:0;font-weight:500;color:var(--text);word-break:break-all}
.asd-kv>b.dim{color:var(--faint);font-weight:400}
.asd-prod{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed #f1f3f6}
.asd-prod .pic{flex:none;width:46px;height:46px;border-radius:8px;background:var(--bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.asd-prod .pic img{width:100%;height:100%;object-fit:cover;display:block}
.asd-prod .pic.bad img{display:none}
.asd-prod .pm{flex:1;min-width:0;font-size:12px;color:var(--text)}
.asd-prod .pm .sp{font-size:11px;color:var(--mut);margin-top:2px;word-break:break-all}
.asd-prod .pm .pr{font-size:11px;color:var(--text-2);margin-top:2px}
.asd-tl{padding:2px 0 0}
.asd-tl .it{display:flex;gap:10px;padding:4px 0;font-size:12px}
.asd-tl .it time{flex:none;width:132px;color:var(--mut);font-variant-numeric:tabular-nums;font-size:11.5px}
.asd-tl .it span{flex:1;min-width:0;color:var(--text-2);word-break:break-all}
.asd-tl .it span .local{display:inline-block;margin-right:5px;padding:0 4px;border-radius:4px;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--danger);font-size:10px;line-height:15px}
.asd-empty{font-size:12px;color:var(--faint);padding:2px 0}
.asd-ft{flex:none;padding:9px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}

/* ---- ⑥ 本次记录 / 挂起 浮层（外壳用现成的 .ppop，只补内件样式） */
#asmLogPop{display:none;width:470px;padding:0}
#asmLogPop.show{display:block}
.asm-lp-hd{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #f1f3f6}
.asm-lp-tab{height:24px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  font-size:12px;color:var(--text-2);cursor:pointer}
.asm-lp-tab.on{border-color:var(--accent);color:var(--accent);background:var(--accent-weak);font-weight:600}
.asm-lp-tab b{margin-left:3px;font-weight:600;font-variant-numeric:tabular-nums}
.asm-lp-bd{max-height:300px;overflow:auto}
.asm-lp-table{width:100%;border-collapse:collapse;font-size:11.5px}
.asm-lp-table th{position:sticky;top:0;z-index:1;background:var(--hover);text-align:left;padding:5px 8px;
  color:var(--mut);font-weight:500;border-bottom:1px solid var(--line)}
.asm-lp-table td{padding:5px 8px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:middle}
.asm-lp-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--text)}
.asm-lp-table td.num{font-variant-numeric:tabular-nums;text-align:center}
.asm-lp-empty{padding:18px;text-align:center;font-size:12px;color:var(--faint)}
.asm-lp-ft{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid #f1f3f6}
.asm-lp-hint{flex:1;font-size:11px;color:var(--faint)}
.asm-lp-mini{height:24px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  color:var(--text-2);font-size:11.5px;cursor:pointer;white-space:nowrap}
.asm-lp-mini:hover{border-color:var(--accent);color:var(--accent)}
/* ⊙ 设置浮层（扫描态底栏那个圆点）：同一个 .ppop 外壳 + 同一份勾选行 */
#asmCfgPop{display:none;width:392px;padding:0}
#asmCfgPop.show{display:block}