/* @@SPLIT_HEADER@@
   css/pages/aftersale.css —— 售后工作台：#view-aftersale + 录屏扫描提示框 + 顶栏全局搜索样式
      由 redesign2.html 拆分而来（原行号 1535-1716），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   12.6 售后视图（#view-aftersale）
   ========================================================================== */
/* 筛选行：比打单页简单，一行放得下 */
.as-filter{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
.as-filter .sp{flex:1}
.w-as-q{width:250px}
/* 统计小条：待商家处理 / 待商家收货 / 处理中 / 已完成 / 已关闭 */
.as-strip{flex:none;display:flex;align-items:center;gap:18px;padding:8px 14px;font-size:12px;color:var(--mut);flex-wrap:wrap}
.as-strip .it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.as-strip .dot{width:6px;height:6px;border-radius:50%;flex:none}
.as-strip b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;font-size:13px}
/* 售后表：11 列，table-layout:fixed + 百分比列宽 —— 和打单表同一个防横滚策略 */
.as-wrap{flex:1;min-height:0;overflow:auto;overflow-x:hidden}
table.as-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12px}
.as-table thead th{
  position:sticky;top:0;z-index:5;height:36px;padding:0 8px;background:var(--card);
  border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.06);
  font-size:12px;font-weight:600;color:var(--text-2);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.as-table thead th.c-chk{padding-left:12px}
.as-table tbody td{
  height:46px;padding:4px 8px;border-bottom:1px solid var(--line);color:var(--text-2);
  vertical-align:middle;overflow:hidden;
}
.as-table tbody td.c-chk{padding-left:12px}
.as-table tbody tr:last-child td{border-bottom:none}
.as-table tbody tr:hover td{background:var(--hover)}
.as-table tbody tr.sel td{background:var(--sel)}
/* 金额列右对齐，但要留出右侧空隙：否则「54.42」和下一列的「—」贴在一起，
   看起来像「金额 54.42 —」这种多出来的字符（本轮实测发现的误读） */
.as-table td.num{padding-right:14px}
.as-table td.c-ret{padding-left:10px}
/* 等宽字体：所有单号列都用它，一眼能看出「这是编号不是文案」 */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.asid{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.as-oid{font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* 售后类型 / 状态胶囊 */
.pill-t-refund{background:var(--bg);color:#4b5563}
.pill-t-return{background:var(--warn-bg);color:#c2410c}
.pill-t-exchange{background:var(--info-bg);color:#6d28d9}
.pill-s-wait{background:var(--danger-bg);color:#b91c1c}
.pill-s-recv{background:var(--warn-bg);color:#c2410c}
.pill-s-doing{background:var(--info-bg);color:#1d4ed8}
.pill-s-done{background:var(--green-bg);color:var(--green)}
.pill-s-closed{background:var(--hover);color:#9ca3af}
/* 买家退货单号：本表最醒目的一列 —— 等宽 + 深色 + 可点复制；空值灰「—」
   注意: 空值态故意用 .blank 而不是 .empty —— 本页早先有个全局 .empty
   （48px 上下 padding 的空状态），类名撞上会把每一行撑到 110px 高（本轮实测踩过）。 */
.retno{display:flex;align-items:center;gap:5px;min-width:0}
.retno .v{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.retno.blank .v{font-weight:400;color:#b6bdc7}
.cpbtn{
  flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:5px;color:var(--faint);cursor:pointer;padding:0;
}
.cpbtn:hover{background:var(--accent-weak);color:var(--accent)}
.cpbtn .i{width:12px;height:12px}
.lg{font-size:12px;color:var(--text-2);white-space:nowrap}
/* 剩余处理时间：<24 小时标红 */
.timeleft{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.timeleft.urgent{color:var(--danger);font-weight:600}
/* 操作列：同意 / 拒绝 —— 两个都是次级样式（白底描边）。
   注意： 「同意」绝不做成主按钮蓝底：用户的铁律是绝不自动同意退款，
      按钮越显眼越容易被连点，必须靠人工一步步点。 */
.as-ops{display:flex;align-items:center;gap:6px}
.btn-sm{height:26px;padding:0 9px;font-size:12px;border-radius:6px}
.btn-sec{background:var(--card);border-color:var(--line-strong);color:var(--text-2)}
.btn-sec:hover{border-color:var(--accent);color:var(--accent)}

/* ==========================================================================
   12.7 「录屏扫描发货」提示框（居中弹窗，不用浏览器 alert）
   ◆ 需求里那条分隔线原文是制表符横线，这里用 1px 的 div 画：一个字符长得像线，
     但它同时是「制表符」，以后有人拿它排版会错位；而且项目自测把
     \u2500-\u257F 当「符号图标」计数，写成字符会让 emoji 计数不为 0。
   ========================================================================== */
/* 录屏扫描提示框：标题只留弹窗头部那一个（body 里再写一次会重复出现两次标题），
   标题下面用 1px 线分隔，再列三条状态，最后是「原型演示」说明。 */
.scan-bd{padding:4px 18px 4px;text-align:left}
.scan-hr{height:1px;background:var(--line);margin:11px 0 2px}
.scan-rows{padding:4px 0}
.scan-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:5px 0;color:var(--mut)}
.scan-row b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.scan-note{
  margin-top:8px;padding:7px 10px;border:1px dashed var(--accent-line);border-radius:8px;
  background:var(--hover);font-size:12px;color:var(--accent);
}

/* ==========================================================================
   12.8 顶栏全局搜索（输入框 + 结果下拉面板 + 跳转定位高亮）
   ◆ 视觉：尺寸/边框/focus 外发光全部抄筛选区的 .ipt —— 顶栏输入框和筛选区
     输入框必须像同一个控件，否则用户会当成两种东西（一个能搜全库、一个只
     筛当前页，长得不一样才不会被混淆）。
   ◆ 为什么面板锚 right:0 往左长：搜索框贴着顶栏右边缘，往右长会顶出屏幕；
     往左长则 260 -> 420 的加宽完全在视口内。
   ========================================================================== */
.gsearch{
  position:relative;display:flex;align-items:center;gap:6px;
  width:260px;height:30px;padding:0 8px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);
  transition:border-color .12s,box-shadow .12s;
}
/* focus：整块（图标+输入框）一起变蓝，而不是只给无边框的 input 加 outline */
.gsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.gsearch .gs-ic{width:14px;height:14px;color:var(--faint);flex:none}
.gsearch:focus-within .gs-ic{color:var(--accent)}
.gs-ipt{
  flex:1;min-width:0;height:100%;padding:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:12px;color:var(--text);
}
/* 占位文字用 11px：需求给的这句占位文案按 12px 排实测要 234px，而输入框可用
   宽度只有 222px（260 - 边框/图标/内边距），尾部会被硬裁一截。11px 约 214px
   刚好放得下，和结果摘要的小字同号也不突兀。文案一个字没改。 */
.gs-ipt::placeholder{color:var(--faint);font-size:11px}
/* 清除 ×：只有输入框有内容时出现（空的时候显示会像一个多余按钮） */
.gs-clear{
  display:none;align-items:center;justify-content:center;flex:none;
  width:16px;height:16px;padding:0;border:0;border-radius:4px;
  background:none;color:var(--faint);cursor:pointer;
}
.gsearch.has-val .gs-clear{display:inline-flex}
.gs-clear:hover{background:var(--accent-weak);color:var(--text)}
.gs-clear .i{width:11px;height:11px}

/* 结果面板：默认与输入框同宽（260），摘要太长时 JS 加 .wide 放宽到 420 */
.gs-panel{
  display:none;position:absolute;top:calc(100% + 6px);right:-1px;z-index:130;
  width:260px;padding:4px;max-height:382px;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06);
}
.gs-panel.show{display:block}
.gs-panel.wide{width:420px}
.gs-item{display:flex;align-items:flex-start;gap:7px;padding:6px 8px;border-radius:7px;cursor:pointer}
.gs-item:hover{background:#f5f8ff}
/* 键盘选中：淡蓝底 + 左侧 2px 蓝条 —— 鼠标 hover 只是浅灰蓝，键盘选中更重，
   这样按 上下方向键 时眼睛能立刻找到「Enter 会打开哪一条」 */
.gs-item.on{background:var(--accent-weak);box-shadow:inset 2px 0 0 0 var(--accent)}
.gs-badge{
  flex:none;margin-top:1px;height:16px;padding:0 5px;border-radius:4px;
  font-size:10px;font-weight:600;line-height:16px;white-space:nowrap;
}
.gs-badge.b-order{background:var(--sel);color:#1d4ed8}     /* 订单：蓝底 */
.gs-badge.b-as{background:var(--warn-bg);color:#c2410c}        /* 售后：橙底 */
.gs-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* 主标识用等宽字体：单号一眼看出是编号，不是文案（和售后表 .mono 同语言） */
.gs-main{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  font-size:12px;font-weight:600;color:var(--text);letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 摘要必须写清「哪个字段命中的」，否则用户不知道为什么搜到它 */
.gs-sub{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-foot{padding:5px 8px 3px;margin-top:2px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
.gs-empty{padding:18px 8px;text-align:center;font-size:12px;color:var(--mut);word-break:break-all}

/* 跳转定位高亮：浅蓝底 + 左侧 3px 蓝竖条，闪烁 1.5 秒后由 JS 摘掉 .gs-hit。
   ◆ 必须排在 .grid tbody tr:hover td / tr.sel td 之后：两者选择器优先级相同，
     靠源码顺序取胜，放前面会被 hover 的浅蓝盖掉（实测过的坑）。
   ◆ 用 animation 而不是 transition：要的是「闪两下」，1.5 秒里亮-暗-亮-暗，
     一眼能看出「就是这一行」。 */
@keyframes gsFlash{
  0%{background:#dbeafe}
  25%{background:#eff6ff}
  50%{background:#dbeafe}
  75%{background:#eff6ff}
  100%{background:#dbeafe}
}
.grid tbody tr.gs-hit td,
.as-table tbody tr.gs-hit td{background:var(--sel);animation:gsFlash 1.5s ease-in-out 1}
.grid tbody tr.gs-hit td:first-child,
.as-table tbody tr.gs-hit td:first-child{box-shadow:inset 3px 0 0 0 var(--accent)}

/* 更窄的屏（<1100）：顶栏还得放下 6 个菜单，搜索退到 200px。
   ≥1100 一律 260px（需求指定值），宁可缩搜索也不压菜单的文字和内边距。 */
@media (max-width:1100px){
  .gsearch{width:200px}
  .gs-panel{width:200px}
  .gs-panel.wide{width:320px}
}