/* @@SPLIT_HEADER@@
   css/pages/scan-ship.css —— XXIV. 扫描发货 / 验货：样式
      由 redesign2.html 拆分而来（原行号 34070-34239），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   ① 底栏两个入口按钮（扫描验货 / 扫描发货）
   ★ 为什么单独给它们一个类：激活时按钮文字要变「退出扫描」，这属于本块状态，
     不该去改 .bbtn 公共样式；窄屏（≤1500px）底栏已有压缩档，这里再收一点，
     保证 1366 宽时整组不溢出。
   ========================================================================== */
#bbShip .bbtn-scn{padding:0 10px;font-weight:600}
#bbShip .bbtn-scn .i{color:var(--text-2)}
#bbShip .bbtn-scn.scn-active{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}
#bbShip .bbtn-scn.scn-active .i{color:var(--accent)}
#bbShip .bbtn-scn.scn-ship.scn-active{background:var(--warn-bg);border-color:#d97706;color:#b45309}
#bbShip .bbtn-scn.scn-ship.scn-active .i{color:#b45309}
@media (max-width:1500px){
  #bbShip{gap:6px}
  #bbShip .bbtn-scn{padding:0 7px;font-size:11.5px}
}

/* ==========================================================================
   ② 搜索框进入扫描态：描边 + 呼吸动画（和 XVI 售后扫描同一套视觉语言）
   ★ 为什么必须动效：扫不到时操作员要能一眼分清「没进模式」和「枪坏了」。
   ★ 验货 = 蓝（核对，不改任何东西）；发货 = 琥珀（会写微信，视觉上提醒一下）。
   ========================================================================== */
#qInput.scn-input{
  border-color:var(--accent);
  background:var(--hover);
  animation:scnBreathe 1.5s ease-in-out infinite;
}
#qInput.scn-input.scn-ship{
  border-color:#d97706;
  background:var(--warn-bg);
  animation-name:scnBreatheShip;
}
#qInput.scn-input.scn-pause{animation:none;opacity:.9}
#qInput.scn-fail{border-color:var(--danger) !important;background:var(--danger-bg) !important;animation:none !important}
@keyframes scnBreathe{
  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)}
}
@keyframes scnBreatheShip{
  0%,100%{box-shadow:0 0 0 2px rgba(217,119,6,.18)}
  50%    {box-shadow:0 0 0 5px rgba(217,119,6,.05)}
}

/* ==========================================================================
   ③ 底部状态条（HUD）：验货中 / 发货中 · 计数 · 最近一次结果
   ★ 为什么放底栏上方而不是筛选行里：筛选行每行都是 flex，塞标签会把「查询 /
     重置」挤换行；而操作员扫单时眼睛本来就在表格下半部，HUD 离手更近。
   ★ pointer-events:none：它浮在底栏上方，绝不能挡住任何按钮的点击。
   ========================================================================== */
.scn-hud{
  /* ⚠️ bottom:106 而不是 58：页面自带的 #toast 是 fixed bottom:68px、高约 30px，
     放 58 会和 toast 完全叠在一起（扫描结果 toast + HUD 同时出现，HUD 被盖住）。 */
  position:fixed;left:50%;bottom:106px;transform:translateX(-50%);z-index:81;
  display:flex;align-items:center;gap:8px;max-width:92vw;padding:6px 12px;
  border-radius:999px;background:rgba(15,23,42,.86);color:#fff;
  font-size:12px;line-height:1.3;box-shadow:0 6px 18px rgba(15,23,42,.22);
  pointer-events:none;white-space:nowrap;
  transition:background .15s linear;
}
.scn-hud[hidden]{display:none}
.scn-hud.ok{background:#047857}
.scn-hud.bad{background:#b91c1c}
.scn-hud .scn-hud-tag{
  flex:none;display:inline-flex;align-items:center;height:19px;padding:0 7px;
  border-radius:6px;background:rgba(255,255,255,.18);font-size:11px;font-weight:700;
  letter-spacing:.5px;
}
.scn-hud .scn-hud-msg{flex:1 1 auto;min-width:0;max-width:62vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.scn-hud .scn-hud-cnt{flex:none;color:rgba(255,255,255,.78);font-size:11.5px;
  font-variant-numeric:tabular-nums}
.scn-hud .scn-hud-k{flex:none;color:rgba(255,255,255,.55);font-size:11px}

/* ==========================================================================
   ④ 验货卡（这一块可以弹卡 —— 用户明确说验货要逐项核对）
   ★ 层级 1080/1081：在底栏(80)、XVI 抽屉(960)、XIV 结果窗(980) 之上，
     但在 XIX 选择抽屉(9500) 之下 —— 看别的抽屉时不该被验货卡盖住。
   ========================================================================== */
.scn-mask{position:fixed;inset:0;z-index:1080;background:rgba(15,23,42,.42);
  backdrop-filter:blur(1px)}
.scn-mask[hidden]{display:none}
.scn-card{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1081;
  width:min(560px,94vw);max-height:84vh;display:flex;flex-direction:column;
  background:var(--card);border-radius:14px;box-shadow:0 22px 60px rgba(15,23,42,.32);
  overflow:hidden;outline:none;
  font-size:12px;color:var(--text-2);
  animation:scnCardIn 140ms ease-out;
}
.scn-card[hidden]{display:none}
@keyframes scnCardIn{
  from{opacity:0;transform:translate(-50%,-48%) scale(.985)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.scn-hd{flex:none;display:flex;align-items:flex-start;gap:10px;padding:13px 16px 11px;
  border-bottom:1px solid var(--line);background:#fbfcfe}
.scn-hd-main{flex:1 1 auto;min-width:0}
.scn-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.2px}
.scn-sub{margin-top:3px;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scn-x{flex:none;border:0;background:transparent;font-size:17px;line-height:1;color:var(--faint);
  cursor:pointer;padding:2px 6px;border-radius:6px;margin-top:-2px}
.scn-x:hover{background:var(--bg);color:#0f172a}
.scn-bd{flex:1 1 auto;overflow:auto;padding:12px 16px 14px}
.scn-kv{display:flex;gap:10px;padding:3px 0;line-height:1.5}
.scn-kv>span{flex:none;width:46px;color:var(--faint);font-size:11.5px;padding-top:1px}
.scn-kv>b{flex:1 1 auto;min-width:0;font-weight:500;color:var(--text);word-break:break-word}
.scn-kv>b em{font-style:normal;color:var(--mut);font-variant-numeric:tabular-nums}
.scn-sec{display:flex;align-items:baseline;gap:8px;margin:13px 0 4px;
  font-size:12.5px;font-weight:700;color:#0f172a}
.scn-sec em{font-style:normal;font-size:11px;color:var(--faint);font-weight:400}
.scn-prior{margin:8px 0 2px;padding:6px 9px;border-radius:7px;font-size:11.5px;line-height:1.5;
  background:var(--green-bg);border:1px solid #bbf7d0;color:#166534}
.scn-prior.bad{background:var(--danger-bg);border-color:var(--danger-line);color:#b91c1c}
.scn-empty{padding:10px 2px;color:var(--faint);font-size:11.5px;line-height:1.6}
.scn-item{display:flex;align-items:flex-start;gap:9px;padding:8px 6px;border-radius:7px;
  border-bottom:1px dashed var(--line);cursor:pointer;transition:background .12s,opacity .12s}
.scn-item:hover{background:#f8fafc}
.scn-item:last-of-type{border-bottom:0}
.scn-item input[type="checkbox"]{flex:none;width:15px;height:15px;margin:2px 0 0;
  accent-color:var(--accent);cursor:pointer}
.scn-item.off{opacity:.55;background:#fff7f7}
.scn-item.off .nm{text-decoration:line-through;text-decoration-color:#dc2626}
.scn-item.shake{animation:scnShake .32s ease-in-out}
@keyframes scnShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.scn-item .pic{flex:none;width:42px;height:42px;border-radius:7px;overflow:hidden;
  background:linear-gradient(135deg,#eef2f7,#e2e8f0)}
.scn-item .pic img{width:100%;height:100%;object-fit:cover;display:block}
.scn-item .pic.bad img{display:none}
.scn-item .pm{flex:1 1 auto;min-width:0;padding-top:1px}
.scn-item .nm{display:block;font-size:12.5px;color:var(--text);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;word-break:break-word}
.scn-item .sp{display:block;margin-top:2px;font-size:11px;color:var(--mut);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scn-item .qty{flex:none;font-size:13px;font-weight:700;color:var(--text);padding-top:1px;
  font-variant-numeric:tabular-nums}
.scn-total{margin-top:9px;padding:8px 10px;border-radius:8px;background:var(--hover);
  border:1px solid var(--line);font-size:12px;color:var(--mut);line-height:1.6}
.scn-total b{color:var(--text);font-size:13px}
.scn-total .bad{color:#b91c1c}
.scn-ft{flex:none;display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-top:1px solid var(--line);background:#fbfcfe}
.scn-ft[hidden]{display:none}
.scn-ft .scn-ft-hint{flex:1 1 auto;min-width:0;font-size:11px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 验货通过 = 主按钮；有问题 = 白底；跳过一次 = 白底。
   ⛔ 不把「有问题」做成红色主按钮：红色大按钮会被误点成"确认"，
      这一排的主动作永远是"核对完通过"。 */
#scnPass{min-width:92px}
/* 异常小框（点「有问题」后才出现；出现时把下面那排主按钮藏起来） */
.scn-iss{flex:none;padding:11px 16px 13px;border-top:1px solid var(--danger-line);background:#fff7f7}
.scn-iss[hidden]{display:none}
.scn-iss-hd{font-size:12px;font-weight:700;color:var(--danger);margin-bottom:7px}
.scn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.scn-chip{height:26px;padding:0 10px;border:1px solid var(--danger-line);border-radius:999px;
  background:var(--card);color:var(--danger);font:inherit;font-size:11.5px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.scn-chip:hover{border-color:#f87171}
.scn-chip.on{background:#dc2626;border-color:var(--danger);color:#fff;font-weight:600}
.scn-iss textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:46px;
  padding:7px 9px;border:1px solid var(--danger-line);border-radius:8px;background:var(--card);
  font:inherit;font-size:12px;color:var(--text-2);line-height:1.5;outline:none}
.scn-iss textarea:focus{border-color:#f87171;box-shadow:0 0 0 2px rgba(220,38,38,.1)}
.scn-iss-ft{display:flex;align-items:center;gap:8px;margin-top:9px}
.scn-iss-ft .grow{flex:1 1 auto}