/* ==========================================================================
   选品 V5 —— 选品项目管控系统 样式 (全部 scope 到 .sv5-stage)
   视觉与 business_erp.css 的 panel/table 风格保持一致, 不污染其它页面。
   ========================================================================== */
.sv5-stage { --sv5-line:#e5e7eb; --sv5-ink:#1f2937; --sv5-muted:#6b7280; --sv5-bg:#f8fafc;
  --sv5-accent:#2563eb; --sv5-accent-soft:#eff6ff; padding:4px 0 40px; color:var(--sv5-ink); }
.sv5-stage * { box-sizing:border-box; }

/* 顶部条 */
.sv5-topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--sv5-line); border-radius:12px; padding:12px 16px; margin-bottom:14px; }
.sv5-tag { font-size:12px; font-weight:600; color:#fff; background:var(--sv5-accent); padding:3px 10px; border-radius:999px; }
.sv5-topbar .sv5-desc { color:var(--sv5-muted); font-size:13px; }
.sv5-spacer { flex:1; }

/* 工具栏 */
.sv5-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.sv5-toolbar input[type=text], .sv5-toolbar select, .sv5-field input, .sv5-field select, .sv5-field textarea {
  border:1px solid var(--sv5-line); border-radius:8px; padding:7px 10px; font-size:13px; background:#fff; color:var(--sv5-ink); }
.sv5-toolbar input[type=text] { min-width:200px; }

/* 按钮 */
.sv5-btn { border:1px solid var(--sv5-line); background:#fff; color:var(--sv5-ink); border-radius:8px;
  padding:7px 14px; font-size:13px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.sv5-btn:hover { border-color:var(--sv5-accent); color:var(--sv5-accent); }
.sv5-btn.primary { background:var(--sv5-accent); border-color:var(--sv5-accent); color:#fff; }
.sv5-btn.primary:hover { background:#1d4ed8; color:#fff; }
.sv5-btn.danger { color:#b91c1c; border-color:#fecaca; }
.sv5-btn.danger:hover { background:#fef2f2; }
.sv5-btn.sm { padding:4px 10px; font-size:12px; }
.sv5-btn:disabled { opacity:.5; cursor:not-allowed; }

/* 面板 */
.sv5-panel { background:#fff; border:1px solid var(--sv5-line); border-radius:12px; padding:16px; margin-bottom:14px; }
.sv5-panel-title { font-size:14px; font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.sv5-panel-title .count { color:var(--sv5-muted); font-weight:500; font-size:12px; }

/* KPI */
.sv5-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.sv5-kpi { background:var(--sv5-bg); border:1px solid var(--sv5-line); border-radius:10px; padding:12px 14px; }
.sv5-kpi .lbl { font-size:12px; color:var(--sv5-muted); }
.sv5-kpi .val { font-size:24px; font-weight:700; margin-top:4px; }
.sv5-kpi.warn .val { color:#b45309; }
.sv5-kpi.risk .val { color:#b91c1c; }
.sv5-kpi.ok .val { color:#047857; }

/* 表格 */
.sv5-table-wrap { overflow-x:auto; border:1px solid var(--sv5-line); border-radius:10px; background:#fff; }
table.sv5-table { width:100%; border-collapse:collapse; font-size:13px; }
.sv5-table th { background:var(--sv5-bg); text-align:left; padding:10px 12px; font-weight:600; color:var(--sv5-muted);
  border-bottom:1px solid var(--sv5-line); white-space:nowrap; position:sticky; top:0; }
.sv5-table td { padding:10px 12px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.sv5-table tbody tr:hover { background:#fafcff; }
.sv5-table tbody tr.clickable { cursor:pointer; }
.sv5-empty { text-align:center; color:var(--sv5-muted); padding:28px 0; }
.sv5-link { color:var(--sv5-accent); cursor:pointer; }
.sv5-link:hover { text-decoration:underline; }

/* 状态胶囊 */
.sv5-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.sv5-pill.gray   { background:#f1f5f9; color:#475569; }
.sv5-pill.blue   { background:#dbeafe; color:#1d4ed8; }
.sv5-pill.amber  { background:#fef3c7; color:#b45309; }
.sv5-pill.green  { background:#d1fae5; color:#047857; }
.sv5-pill.red    { background:#fee2e2; color:#b91c1c; }
.sv5-pill.purple { background:#ede9fe; color:#6d28d9; }
.sv5-pill.slate  { background:#e2e8f0; color:#64748b; }

/* 进度条 */
.sv5-progress { background:#eef2f7; border-radius:999px; height:8px; width:90px; overflow:hidden; display:inline-block; vertical-align:middle; }
.sv5-progress > i { display:block; height:100%; background:var(--sv5-accent); border-radius:999px; }
.sv5-progress-text { font-size:12px; color:var(--sv5-muted); margin-left:6px; }

/* 任务矩阵 */
.sv5-matrix td.cell { text-align:center; padding:6px; }
.sv5-matrix .dot { display:inline-block; width:18px; height:18px; border-radius:5px; }
.sv5-matrix .dot.gray{background:#cbd5e1;} .sv5-matrix .dot.blue{background:#3b82f6;}
.sv5-matrix .dot.amber{background:#f59e0b;} .sv5-matrix .dot.green{background:#10b981;}
.sv5-matrix .dot.red{background:#ef4444;} .sv5-matrix .dot.slate{background:#e2e8f0;border:1px solid #cbd5e1;}
.sv5-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--sv5-muted); margin-top:10px; }
.sv5-legend span { display:inline-flex; align-items:center; gap:5px; }
.sv5-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* 三栏工作台 */
.sv5-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.sv5-card-list { display:flex; flex-direction:column; gap:8px; }
.sv5-mini { border:1px solid var(--sv5-line); border-radius:9px; padding:10px 12px; background:#fff; cursor:pointer; transition:all .15s; }
.sv5-mini:hover { border-color:var(--sv5-accent); box-shadow:0 1px 4px rgba(37,99,235,.08); }
.sv5-mini .t { font-weight:600; font-size:13px; }
.sv5-mini .s { font-size:12px; color:var(--sv5-muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; }

/* 抽屉 */
.sv5-drawer-mask { position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1200; opacity:0; pointer-events:none; transition:opacity .2s; }
.sv5-drawer-mask.open { opacity:1; pointer-events:auto; }
.sv5-drawer { position:fixed; top:0; right:0; height:100vh; width:min(720px,94vw); background:#fff; z-index:1201;
  box-shadow:-8px 0 30px rgba(15,23,42,.18); transform:translateX(100%); transition:transform .25s; display:flex; flex-direction:column; }
.sv5-drawer.open { transform:translateX(0); }
.sv5-drawer-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--sv5-line); }
.sv5-drawer-head h3 { margin:0; font-size:16px; flex:1; }
.sv5-drawer-body { flex:1; overflow-y:auto; padding:18px 20px; }
.sv5-drawer-foot { border-top:1px solid var(--sv5-line); padding:12px 20px; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.sv5-x { border:none; background:none; font-size:22px; line-height:1; color:var(--sv5-muted); cursor:pointer; }

/* 表单 */
.sv5-form { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.sv5-field { display:flex; flex-direction:column; gap:5px; }
.sv5-field.full { grid-column:1 / -1; }
.sv5-field label { font-size:12px; color:var(--sv5-muted); font-weight:600; }
.sv5-field label .req { color:#dc2626; }
.sv5-field textarea { min-height:64px; resize:vertical; font-family:inherit; }
.sv5-section-h { font-size:13px; font-weight:700; margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--sv5-line); grid-column:1/-1; }

/* 详情只读块 */
.sv5-kv { display:grid; grid-template-columns:120px 1fr; gap:8px 14px; font-size:13px; margin-bottom:6px; }
.sv5-kv .k { color:var(--sv5-muted); }
.sv5-readblock { background:var(--sv5-bg); border:1px solid var(--sv5-line); border-radius:8px; padding:10px 12px; font-size:13px;
  white-space:pre-wrap; line-height:1.6; margin-bottom:10px; }

/* 评论/日志 */
.sv5-feed { display:flex; flex-direction:column; gap:8px; }
.sv5-feed-item { font-size:12px; color:var(--sv5-muted); border-left:2px solid var(--sv5-line); padding:2px 0 2px 10px; }
.sv5-feed-item b { color:var(--sv5-ink); }

/* 视图切换 */
.sv5-viewtabs { display:inline-flex; border:1px solid var(--sv5-line); border-radius:8px; overflow:hidden; }
.sv5-viewtabs button { border:none; background:#fff; padding:7px 14px; font-size:13px; cursor:pointer; color:var(--sv5-muted); }
.sv5-viewtabs button.active { background:var(--sv5-accent); color:#fff; }

.sv5-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff;
  padding:10px 18px; border-radius:8px; font-size:13px; z-index:1400; opacity:0; transition:opacity .2s; }
.sv5-toast.show { opacity:1; }
.sv5-toast.err { background:#b91c1c; }

@media (max-width:768px){ .sv5-form{ grid-template-columns:1fr; } .sv5-kv{ grid-template-columns:90px 1fr; } }