/* @@SPLIT_HEADER@@
   css/pages/qc.css —— XII. 质检抽检
      由 redesign2.html 拆分而来（原行号 24417-24567），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ══════════════════════════════════════════════════════════════════════════
   XII. 样式（统一 qc- 前缀，避免和 .odlg / .ppop / .ix-* / .x10-* 撞）
   ★ z-index 970：比 IX 的 #ixMask(960) 高一层，比 X10 的行内备注编辑器(9000) 低
     —— 那是个 330px 的小浮层，只在双击备注单元格时出现，被本面板盖住时用户也点不到。
   ══════════════════════════════════════════════════════════════════════════ */
#qcMask{position:fixed;inset:0;z-index:970;background:rgba(15,23,42,.42);
  display:none;align-items:center;justify-content:center;padding:20px}
#qcMask.show{display:flex}
/* ★ 为什么给死一个高度（而不是 max-height + 内容撑开）：
   一、列表要能滚（抽检单多了不能把面板撑到天上去）；
   二、详情抽屉是 position:absolute;inset:0 的覆盖层 —— 面板高度随内容变时，
       抽屉的高度也跟着变，看起来像"抽屉只盖住半截"，很怪。
   760px 是 1080 屏下"够高但不顶满"的值，小屏自动退到 100vh-40px。 */
#qcPanel{width:min(1120px,calc(100vw - 40px));
  height:min(760px,calc(100vh - 40px));
  background:var(--card);border-radius:12px;box-shadow:0 20px 60px rgba(2,6,23,.28);
  display:flex;flex-direction:column;overflow:hidden}
#qcPanel .qc-hd{flex:none;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line)}
#qcPanel .qc-hd h3{margin:0;font-size:15px;font-weight:600;color:var(--text)}
#qcPanel .qc-hd .qc-sub{font-size:12px;color:var(--faint)}
#qcPanel .qc-hd .qc-x{margin-left:auto;width:28px;height:28px;border:none;background:none;
  color:var(--mut);font-size:18px;line-height:1;border-radius:6px;cursor:pointer}
#qcPanel .qc-hd .qc-x:hover{background:var(--bg);color:var(--text)}
#qcPanel .qc-body{flex:1;min-height:0;overflow:auto;padding:12px 16px 16px}

/* ---- 顶部提醒条（本块自己的，不碰 renderTips） ---- */
.qc-alert{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--accent-line);background:var(--accent-weak);color:var(--accent-hover);
  border-radius:8px;padding:7px 10px;font-size:12px;margin-bottom:10px}
.qc-alert.bad{border-color:var(--danger-line);background:var(--danger-bg);color:#b91c1c}
.qc-alert .qc-link{color:inherit;text-decoration:underline;cursor:pointer;background:none;
  border:none;padding:0;font-size:12px}

/* ---- 工具条：筛选 chips + 新建 ---- */
.qc-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.qc-chip{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--text-2);font-size:12px;cursor:pointer}
.qc-chip:hover{border-color:var(--accent-line);color:var(--accent)}
.qc-chip.on{background:var(--accent-weak);border-color:var(--accent-line);
  color:var(--accent);font-weight:600}
.qc-chip .n{font-size:11px;color:var(--faint);margin-left:3px}
.qc-chip.on .n{color:var(--accent)}
.qc-sp{flex:1}

/* ---- 按钮 ---- */
.qc-btn{height:28px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--card);color:var(--text);font-size:12px;cursor:pointer;white-space:nowrap}
.qc-btn:hover{border-color:var(--accent);color:var(--accent)}
.qc-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.qc-btn.pri:hover{background:var(--accent-hover);color:#fff}
.qc-btn.sm{height:24px;padding:0 8px;font-size:11px;border-radius:6px}
.qc-btn.danger{color:var(--danger);border-color:#fecaca}
.qc-btn.danger:hover{background:var(--danger-bg);border-color:#f87171;color:#b91c1c}
.qc-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- 列表 ---- */
.qc-tb{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.qc-tb th{position:sticky;top:0;z-index:1;background:var(--hover);color:var(--text-2);
  font-weight:600;text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.qc-tb td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-tb tbody tr:hover td{background:var(--hover)}
.qc-tb .mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}
.qc-tb .qc-prod{white-space:normal}
.qc-tb .qc-prod .s{display:block;color:var(--faint);font-size:11px}
.qc-empty{color:var(--faint);font-size:12px;text-align:center;padding:28px 0}
.qc-mut{color:var(--faint)}
.qc-warn{color:var(--danger);font-weight:600}

/* 状态胶囊：5 个状态各一色（语义，不是装饰） */
.qc-st{display:inline-block;padding:0 7px;height:19px;line-height:19px;border-radius:999px;
  font-size:11px;white-space:nowrap}
.qc-st.notified{background:var(--warn-bg);color:#c2410c}
.qc-st.shipped{background:var(--info-bg);color:#1d4ed8}
.qc-st.testing{background:#f0f9ff;color:#0369a1}
.qc-st.reported{background:var(--green-bg);color:#047857}
.qc-st.closed{background:var(--bg);color:#64748b}

/* ---- 报告快过期清单 ---- */
.qc-sec{margin-top:16px}
.qc-sec h4{margin:0 0 6px;font-size:12px;color:var(--text-2);font-weight:600}
.qc-exp{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--warn-line);
  background:var(--warn-bg);border-radius:8px;font-size:12px;margin-bottom:6px}
.qc-exp .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 表单（新建 / 详情里的字段组） ---- */
.qc-f{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.qc-f > label{flex:none;width:88px;text-align:right;color:var(--text-2);font-size:12px}
.qc-f .qc-in{flex:1;min-width:0;height:30px;padding:0 8px;border:1px solid var(--line-strong);
  border-radius:7px;font-size:12px;color:var(--text);background:#fff}
.qc-f .qc-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.qc-f textarea.qc-in{height:56px;padding:6px 8px;resize:vertical;line-height:1.5}
.qc-f .qc-hint{flex:none;font-size:11px;color:var(--faint);width:112px}

/* ---- 浮层（新建抽检记录） ---- */
#qcDlgMask{position:fixed;inset:0;z-index:990;background:rgba(15,23,42,.34);
  display:none;align-items:center;justify-content:center}
#qcDlgMask.show{display:flex}
#qcDlg{width:min(480px,calc(100vw - 40px));max-height:calc(100vh - 60px);
  background:var(--card);border-radius:11px;box-shadow:0 18px 48px rgba(2,6,23,.26);
  display:flex;flex-direction:column;overflow:hidden}
#qcDlg .qc-hd{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
#qcDlg .qc-hd h3{margin:0;font-size:14px;font-weight:600}
#qcDlg .qc-hd .qc-x{margin-left:auto;border:none;background:none;color:var(--mut);
  font-size:18px;cursor:pointer;line-height:1;border-radius:6px;width:26px;height:26px}
#qcDlg .qc-hd .qc-x:hover{background:#f1f5f9}
#qcDlg .qc-bd{padding:14px;overflow:auto}
#qcDlg .qc-ft{padding:10px 14px;border-top:1px solid var(--line);display:flex;
  justify-content:flex-end;gap:8px}
.qc-err{color:var(--danger);font-size:12px;margin:0 0 8px;display:none}
.qc-err.show{display:block}

/* ---- 详情（面板内右侧抽屉：不另开遮罩，用户还能看见列表做对照） ---- */
/* ★ z-index 必须显式给：列表表头是 position:sticky;z-index:1（滚动时压住内容），
   抽屉要是 z-index:auto，表头那一条会**穿透**抽屉画在白色底上 ——
   实测第一版就是这样（截图里能看见「编号/商品/通知时间」从抽屉中间穿出来）。 */
#qcDrawer{position:absolute;inset:0;z-index:5;display:none;background:var(--card);flex-direction:column;
  border-left:1px solid var(--line)}
#qcDrawer.show{display:flex}
#qcPanel{position:relative}
#qcDrawer .qc-dhd{flex:none;display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:#f8fafc}
#qcDrawer .qc-dhd .qc-no{font-family:ui-monospace,Consolas,monospace;font-size:12px;
  color:var(--text-2);font-weight:600}
#qcDrawer .qc-dhd .qc-x{margin-left:auto;border:none;background:none;color:var(--mut);
  font-size:18px;cursor:pointer;width:26px;height:26px;border-radius:6px;line-height:1}
#qcDrawer .qc-dhd .qc-x:hover{background:#e2e8f0}
#qcDrawer .qc-dbd{flex:1;min-height:0;overflow:auto;padding:14px 16px}
.qc-step{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.qc-step .s{font-size:11px;color:var(--faint);padding:2px 7px;border-radius:999px;background:#f1f5f9}
.qc-step .s.done{background:#e0e7ff;color:#3730a3}
.qc-step .s.now{background:var(--accent);color:#fff;font-weight:600}
.qc-step .ar{color:#cbd5e1;font-size:11px}
.qc-grp{border:1px solid var(--line);border-radius:9px;padding:10px 12px 2px;margin-bottom:12px}
.qc-grp .qc-gt{font-size:12px;font-weight:600;color:var(--text-2);margin:0 0 8px;
  display:flex;align-items:center;gap:6px}
.qc-grp .qc-gt .qc-sp{flex:1}
.qc-files{border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.qc-file{display:flex;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px dashed var(--line);font-size:12px}
.qc-file:last-child{border-bottom:none}
.qc-file .ic{flex:none;width:30px;height:20px;line-height:20px;text-align:center;
  border-radius:4px;background:var(--info-bg);color:var(--accent-hover);font-size:10px;font-weight:600}
.qc-file .ic.img{background:var(--green-bg);color:#047857}
.qc-file .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-file .sz{flex:none;color:var(--faint);font-size:11px}
.qc-file .op{flex:none;display:flex;gap:4px}
/* 上传中/成功提示：让用户确认"真传上去了"（文件名+大小+类型都要看得见） */
.qc-upnote{font-size:11px;color:var(--faint);margin-top:6px}
.qc-upnote.bad{color:#b91c1c}